web design – Page 2 – The Team W Blog

April 21, 2011

Design Challenge: Help Ilovebluesea.com and the fish

Picture of Martin Reed — Martin Reed from ILoveBlueSea.com

Martin Reed is a tall, young entrepeneur with a passion for fish. I met up with him in San Francisco recently, and we sat down at an outside table at Hog Island Oyster Bar in the Ferry Building. I tried raw oysters for the first time, and Martin told me about sustainable fish, and the company he started to sell sustainable fish through the internet. Martin runs a tight ship (pardon the pun!) — the business on a tight budget (it’s a year old, so it’s still kind of a start-up). He doesn’t have a huge budget for website re-design. He told me he wants to improve the design of the website, but he’s not sure what he should do. Somewhere around the 4th or 5th oyster I had an idea. “Let’s tell your story at my blog and see if my readers will help you imrove your website.” And so that’s what we decided to do.

How you can help:

1. Click on this ilovebluesea link to listen to the 7 minute interview I did with Martin via Skype. We recorded this a few weeks after our San Francisco meeting. He explains how he got the idea for the company, why he’s so passionate about sustainable fish, and he talks about the web site, ILoveBlueSea.com

2. Go look at Martin’s site: ILoveBlueSea.com Spend some time at the home page, category page, and individual product pages.

Product Page from I Love Blue Sea website — Product Page from ILoveBlueSea.com

3. If you have ideas about how Martin can improve the site, write a comment to this blog post, or send me an email with your ideas: weinschenk@gmail.com

4. I’ll compile the ideas and share them at the blog and also with Martin. We’ll even get Martin on Skype again to talk through the suggestions, and I”ll write a follow-up post so we can see what he thinks of our ideas.

So that’s the Design Challenge. I hope you will listen to the recording and send in your ideas!

Disclosure — Martin did say he might send me some oysters in return for attention to his site!

Susan

April 1, 2011

100 Things You Should Know About People: #96 — Past Experience And Expectations Determine Where People Look

Where do people look first on a computer screen? Where do they look next? It depends partially on what they are doing and expecting.

Left to right? — If people read in languages that move from left to right, then they tend to look at the screen from left to right. If they read from right to left, it is the opposite.

Not the edges — People tend to ignore the edges of screens. Because people have gotten used to the idea that there are things on computer screens that are not as relevant to the task at hand, such as logos, blank space, and navigation bars, they tend to move towards the center of the screen and avoid the edges. After the first look at a screen people then move in whatever is their normal reading pattern, in other words left to right/top to bottom in cultures that read that way.

Grabbing attention — If there is something that grabs attention, for example, a large photo (especially one with someone’s face), or movement (animated banner, video) somewhere else on the screen, then you can pull them away from their normal reading path and get them to look elsewhere, at least briefly.

Where to find certain tools and features — People have also gotten used to the location of certain items on a screen. For example, navigation bars are usually on the left or the top. Logos are at the top left. Search is expected at the top, either in the middle or towards the right. Help links or buttons are usually at the top right.

What do you think? Is it important to design with these conventions in mind? Or do you sometimes break out of the mold?

June 28, 2010

100 Things You Should Know About People: #36 — People are Inherently Lazy

2137226532_7c41430aa5 — Photo Credit: Mr. Thomas

Ok, I’ll admit it, I am exaggerating a little bit when I say people are inherently lazy. What I really mean is that people will do the least amount of work possible to get a task done.

Is lazy another word for efficient? — Over eons of evolution humans have learned that they will survive longer and better if they conserve their energy. We’ve learned that we want to spend enough energy to have enough resources (food, water, sex, shelter), but beyond that we are wasting our energy if we spend too much time running around getting stuff.

How much is enough? — Of course questions about how much is enough, and do we have enough stuff yet, and how long should the stuff last (and on and on), still vex us, but putting the philosophical questions aside, for most activities most of the time humans work on a principle that is called “satisficing”.

Satisfy plus suffice = Satisfice — According to Wikipedia, Herbert Simon was the person who coined the term satisfice. It was originally used to describe a decision-making strategy whereby the person decides to pick the option that is adequate rather than optimal. The idea is that the cost of making a complete analysis of all the options is not only not worth it, but may be impossible. According to Simon we often don’t have the cognitive faculties to weigh all the options. So it makes more sense to make a decision based on “what will do” or what is “good enough” rather than trying to find the optimal or perfect solution.

Designing with satisficing in mind — So if people “satisfice” rather than “optimize”, what are the implications for those of us who design web sites, software, products, or even design surveys? Satisficing leads to some interesting design guidelines which I’ve listed below.

Design web sites for scanning, not reading — In his excellent book Don’t Make Me Think, Steve Krug applies the idea of satisficing to the behavior you can observe when someone comes to your web site. You are hoping the visitor will read the whole page, but we know that “What they actually do most of the time (if we’re lucky) is glance at each new page, scan some of the text, and click on the first link that catches their interest or vaguely resembles the thing they’re looking for. There are usually large parts of the page that they don’t even look at.”

Assume that people will look for shortcuts — People will look for ways to do something faster and with less steps. This is especially true if it is a task they are doing over and over.

But if the shortcut is too hard to find — Then people will keep doing it the old way. This seems paradoxical, but it’s all about the amount of perceived work. If it seems like too much work to find a shortcut then people will stay with their old habits (they are even satisficing about satisficing).

Provide defaults — Defaults reduce the amount of work. When you provide defaults on a web form, for example, the person’s name and address is already filled in, this means there is less that people have to do. The downside of this is that people often don’t notice defaults, and so may end up accepting a default without knowing. Here again, the answer lies in the amount of effort. If it takes a lot of work to change the result of accepting a “wrong” default, then think twice about using them.

Take care with the order and wording of your survey questions — Satisficing is particular difficult for surveys. People will get into a “groove” of answering all the questions the same way because it’s easier and they don’t have to think. If your survey is more than a few questions long you will have to mix it up, and provide different options and formats for the questions or you will find that a given individual has chosen twenty-five “6’s” in a row on your scale.

What are your experiences, either as a user or a designer, with the concept of satisficing?

Photo credit by Mr. Thomas

—————————————————

Did you find this post interesting? If you did, please consider doing one or more of the following:

add your comment
subscribe to the blog via RSS or email
sign up for the Brain Lady newsletter
share this post

May 7, 2010

100 Things You Should Know About People: #33: Bite-Sized Chunks Of Info Are Best

I am about to head to Portugal for a week, and I was interested in exploring different possible destinations in Portugal. I may not have much time for touring (I’m going to speak at the UXLX conference there), but if I did have time, where should I go? I have to admit to pretty much total ignorance about Portugal, the different regions, landscapes, and parts of the country, so I went to the official tourism web site for the country.

Give me a little bit at a time — The Portugal tourism site did an OK job of what is called progressive disclosure. This is fancy term that is used in the field of psychology to refer to providing information in increasing chunks of size and complexity.

We can only handle so much — Humans can only process small amounts of information at a time (consciously that is… the estimate is that we handle 40,000,000 pieces of information every second, but only 40 of those make it to our conscious brains). One mistake that web sites make is to give too much information all at once, like this web site from the Canadian government:

There is no chunking here, there is not progressive disclosure. It’s just all the information thrown on the page all at once. The result? You don’t read it, you just leave.

Feeding bits of information — The Portugal site was just OK when it came to progressive disclosure. New Zealand does a much better job. The New Zealand tourism site has multiple levels of disclosure, feeding you the information bit by bit. Here’s the first page on the regions of New Zealand:

where I see the overall map and names of the different regions. If I hover over one of the regions in the list then I see a thumbnail of information:

Continuing on with this idea of progressive disclosure, if I click on that region then I link to a page with more pictures and little more detail:

there is a big map and there are tabs to go to for more information. If I scroll down I’ll have details on the region:

This is a great example of how to use progressive disclosure.

It’s not the clicks that count (pun intended) — One thing I’d like to point out is that progressive disclosure requires multiple clicks. Sometimes you will hear people say that websites should minimize the number of clicks that people have to make to get to the detailed information. The number of clicks is not the important criteria. People are very willing to make multiple clicks, in fact that won’t even notice they are making the clicks, if they are getting the right amount of information at each click to keep them going down the path.

Think progressive disclosure, don’t count clicks.

Should I let the web site design influence whether I book a ticket? Not this time at least. This time I’m headed for Portugal, where I plan to use the Portugal tourism site as a case study in my workshop!

——————————————————————-

Did you find this post interesting? If you did, please consider doing one or more of the following:

add your comment
subscribe to the blog via RSS or email
sign up for the Brain Lady newsletter
share this post

March 22, 2010

5 Lessons From Theatre You Can Apply to Web Site Design

I just finished a run with my local theatre group (I played Golde in Fiddler on the Roof), and I couldn’t help but make comparisons between putting on a theatre production and designing products, web sites, or anything where a team needs to create something together.

1. It takes a team – In order to put on the show we had an entire team of people. Obviously we had all the actors, but we also had musicians, people to work on props, lighting, a stage manager, director, etc. If you are doing to get a web site or a product out the door on time you’ve also got to have a team of people. Large endeavors rarely get finished if you are the only person working on it. A great team appreciates that it really is a team.

2. Everyone has a role to play – And I don’t just mean a particular character to play, although that is true too. But more than that, we needed people with different talents. In the production I was just in, people appreciated each other for the unique gifts they brought to the group. Some people sang very well, others were great actors, others could dance, there were some excellent violin players for the orchestra, there were good set builders, and a person who knew how to work the lights in the theater. No one had to do it all. Bringing one gift, talent, skill or knowledge to the group was enough. The same is true of a team that is putting out a web site or product. The individual members of the team don’t have to be “equal” to teach other. Everyone can bring their own particular skill or talent to the group and whatever they bring can, and should be, appreciated. One person is a great content writer, another is good at graphic design, another is a psychologist that can guide the group on design, another is an efficient programmer… A great team appreciates all the players, even those who have a small role.

3. You need a director/leader – Although the cast and crew were critical to the success of the show, we needed a director to create the vision of what the show was to be, to communicate that vision clearly and appropriately to the cast, the set designers, the costumers. The director guided us when we were going astray, and inspired us when we were getting tired. The web site or product team also needs someone to be in charge; someone to go to if you are unsure what to do, or which alternative to choose, someone who can communicate with others outside the team, and someone who will lead the team through the project.

4. You need a deadline – In a theatre production the deadline is very clear. It’s opening night! And there is no such thing as changing the deadline. This means that every part of the work from the start to the end is planned out. Exactly what will be rehearsed each night is planned out, with some blank space to work on “problem scenes” as they crop up. A good director has experience putting on a show and knows, for example, that if we are going to be ready to raise the curtain on opening night we have to have had a certain number of rehearsals of the whole show. A good director decides the date that all lines must be memorized (called going “off book”), when costumes need to be started, sets built, etc. The web site or product team also needs a deadline. Everyone on the team needs to feel that the deadline is do-able with hard work, and that there is a firm plan in place for all the activities and interim deadlines along the way that ensure the final deadline will be met.

5. Practice, practice, practice – Our first night of rehearsal was nothing like our opening night. We didn’t expect to get things right the first time. We all knew that it would take lots of practice, both individually, and then as a group, before we would be ready. We understood that we didn’t have an infinite amount of time to work on the production. This is community theatre, and we are volunteering and involved on a part time basis while we have our jobs, families, etc. But we also knew that we had to put the time in if we were going to create a quality production. The web or product team also has competing priorities – other duties at work, personal and family time, etc., and all of that must be juggled. Yet there has to be a commitment to the project, a willingness to do one’s part on one’s own, and also to spend time together to create the final product. Quality products require iteration and the wise team member will be tolerant of themselves and others when mistakes are made.

Do you agree? Can you think of any other parallels that I’ve missed?

——————————————————————-

Did you find this post interesting? If you did, please consider doing one or more of the following:

add your comment
subscribe to the blog via RSS or email
sign up for the Brain Lady newsletter
share this post

March 4, 2010

Web Site Bloopers

I’m amazed by the continual “bloopers” I find on websites. Maybe my expectations are too high, but I expect major companies and organizations to fix issues they have with their websites. Here are a few of my favorites:

This blooper from Hertz has been going on for months — look at the calendar, it’s wrong… it’s got the wrong day of the week for these dates. Maybe they are using a Mayan calendar or something?

hertz3 — Picture of calendar at Hertz web site

Don’t know English? Then read what to do – in English! — I first saw this content from the state of California Courts website on being a juror several years ago… it’s still there (the highlighting is mine) – “If you cannot unerstand English, follow the instructions on the summons…” all written, of course, in English!:

And Verizon hasn’t tested what their website looks like — It’s looked like this for several months. There is some kind of problem here, probably a browser issue, but I guess Verizon hasn’t tested with Safari.

Do you have favorite bloopers? Send me a URL and description.

——————————————————————-

Did you find this post interesting? If you did, please consider doing one or more of the following:

add your comment
subscribe to the blog via RSS or email
sign up for the Brain Lady newsletter
share this post

February 23, 2010

100 Things You Should Know About People: #27 — We go below the "fold"

For the last year or so there has been a heated debate about “the fold”. The fold is the idea that there is a place on a web page that is the bottom edge of what people will see when they look at the page in a browser, and that in order to see anything below that line, the visitor has to scroll down the page. This concept comes from newspapers — there is content on a newspaper page (especially the front page) that is below where the paper folds. In the newspaper world there has been interest for decades and maybe even centuries, at this point, about what to print right above the fold, right below the fold, and right on the fold. This concept bled over to websites in terms of what shows on the screen without scrolling.

What’s the big deal about the fold? — For many years a guiding principle of web and content design has been: If it’s important make sure it’s above the fold, because visitors may not scroll and see more. But lately marketing people, user experience professionals, and others have been questioning this principle. Certainly there is often a lot of material that is below the fold, and people seem to be clicking on it.

Want to see a visual example? — At iampaddy.com there is an interesting visual example. Here is a short video I made from the iampaddy blog that makes the point that maybe people really will scroll:

So do we worry about the fold or not? — I believe it still holds true that the most important content should be above the fold, and that if it is above the fold then it is most likely that people will see it. BUT, if it’s below the fold that doesn’t mean people WON’T see it. Ok, not a definitive answer I know, but the best we can do right now with the data we have (stay tuned… I plan to do some research of my own on this topic).

What do you think? How concerned should we be about whether information and links fall below the fold?

——————————————————————-

Did you find this post interesting? If you did, please consider doing one or more of the following:

add your comment
subscribe to the blog via RSS or email
sign up for the Brain Lady newsletter
share this post

December 29, 2009

10 Best Posts of 2009

It’s that time of year — so here is my list of the 10 best posts from my blog in 2009. I chose the 10 that I believe have had the greatest impact/most thought provoking/most interest from my readers.

#1: Dopamine Makes You Addicted to Seeking Information — I thought this was an interesting post when I wrote it, but it surprised me how quickly it took off virally; more than any other post I’ve written!

#2: Eyetracking — 7 Traps to Avoid — Another surprise to me how popular this post was.

#3: 7 Steps to Successful Web Site Redesign — I think Jacek Utko has an important view of the world.

#4: Your Attention is Riveted By Pictures of People — If people knew how important this is I think they’d change the pictures they put at their web site.

#5: Web Site User Experience Anatomy — Not one of my posts, but a guest post by Craig Tomlin, and an interesting way to think about web sites. Continue reading “10 Best Posts of 2009”

December 16, 2009

7 Steps to Successful Web Site Redesign

Jacek Utko is a newspaper designer. He has designed/redesigned many newspapers in Central and Eastern Europe and won world awards. He believes strongly in “giving power to the designers” and that designers should embed their personal vision into the work they do, even at the expense of being a team player.

Utko’s words and work are compelling, and I especially like his 7 Steps to Success. He is talking about 7 steps to success if you are redesigning a newspaper, but when I first read the 7 steps I thought they were a good jumping off point on 7 Steps to Successful Web Site Design. So I’ve taken his 7 steps and modified them to fit the design of websites:

7 Steps To Successful Web Site Design or Redesign (concepts borrowed from Jacek Utko and modified)

1. Web Site Strategy: What is the goal? Where and how can you reach new visitors to your website? Pick one measure of success (sales, conversions registrations), pick your most important measure and ask: “How can we increase that one measure of success?”

2. Content: What content do you have that will attract new visitors and advertisers. What content should you change or add to reach and serve them better? Continue reading “7 Steps to Successful Web Site Redesign”

December 14, 2009

Web Site User Experience Anatomy

GUEST POST: This is a guest post by Craig Tomlin

Just like human anatomy, the anatomy of a web site is composed of different user experience parts that must all work together seamlessly. Optimizing the user experience of each part however is problematic: Where do you start? How much user experience testing and adjusting should you do on each of your page types? What’s critical, important or just a nice to have in terms of spending your limited user experience testing resources?

Over the past 13 or so years I’ve conduct user experience testing and optimization on hundreds of large and small web sites. During this time, I’ve noted a pattern to the user experience of typical web site pages. There seems to me to be what I call a “user experience page weight” and a resulting “user experience testing weight” that are fairly consistent across web sites.

In my opinion, these user experience anatomy points of a web site can be weighted, and that weighting used to help a web site owner determine what user experience importance to place on each page type. This weighting can also help determine how much user experience testing resources should be applied to each page.

Following is my overview of an average web site user experience page weight, and user experience testing needs.

Of course, no two web sites are exactly the same, thus your web site may or may not have the same weightings as I’m indicating here. But you can use my criteria and weights as a starting point, and adjust your web site user experience weighting to fit your site. This provides you the benefit of having a better comprehension of the user experience needs by page type, and how much resources to spend testing and optimizing each page type.

A Few Definitions first:

User Experience Page Weight – I define this as a percentage of your total web site experience cognitive load. Total web site experience is the average amount of cognitive load your web site visitor will typically expend on your web site during typical critical tasks.

Some pages, for example the home page and products pages, may typically experience a higher cognitive load than other pages, as your web site visitors try to determine if your site should be trusted, and if you provide the products or services the visitor is trying to find.

Many years of usability testing on large and small sites have enabled me to average a “typical” UX Page Weight, which I’ll define specifically for each page type below. However, your web site may not have the same UX Page Weight as I am providing here – your own usability testing on your own site should be your guide.

User Experience Testing – I define this as a percentage of the resources you should expend in conducting usability testing and related user experience research (clicktrack analysis, eye-tracking, etc.) when evaluating optimizations of the user experience for that page.

It’s a rare firm that has enough UX resources to continually test and optimize all web site pages at the same time, most of us have to spread limited resources around. This metric is my average for each page gained from years of usability testing observations of multiple kinds of web sites. Your web site might have different UX testing weights.

User experience anatomy of a typical web site, with UX page and testing weights.

Continue reading “Web Site User Experience Anatomy”