Transcript
Page 1: Effective Web Design

By Beth Spencer

Page 2: Effective Web Design

Steve KrugSteve Krug is a website usability and interface design expert.

His consulting firm, Advanced Common Sense, has tested a variety of sites including Apple, Amazon, Barnes and Noble and Netscape.

Reviews for existing sites range from $3,000-8,000 for a conference call consultation.

Krug’s usability workshops cost $15,000, not including travel expenses.

Page 3: Effective Web Design

Krug’s questions visitors should never have to ask

• Where am I?• Where do I start?• Where did they put _______?• What are the most important things on

this page?• Why did they call it that?

Page 4: Effective Web Design

What are the most important things on this site?

We know what the most important stories are, even though the headlines are written in Arabic, thanks to visual

hierarchy.

Page 5: Effective Web Design

Where am I?

• There are several ways to let visitors know where they are on a website:– Pointers– Text color change– Bold text– Change in button

color

Page 6: Effective Web Design

Where did they put _____?

The word “official” is seems invisible since it is white on a mostly white background.

Page 7: Effective Web Design

Where do I start?

Having two buttons could cause confusion

and users may question which button

to use. It would be better with only the

search button.

A simple button like this one works best.

Effective web design will clearly convey where to begin to its visitors.

The fewer words, the better. Useless words can cause confusion and frustrate users.

The words “search” and “go” are the most clear ones to use with search buttons, according to Krug.

Most people are fans of the search box, and they start there.

Page 8: Effective Web Design

How often do you use search boxes and on which sites?

“Often, I love search boxes, pubmed, pitchforkmedia, all of them I guess.”-Kathleen Biggs, VA medical center resident

“I use search boxes on all sites that are run by a good search engine. It reduces search time when the engine is powerful.”-John Campbell, financial analyst

“I use them on Google and the Memphis website.” Megan Mayo, U of M nursing student

“Often, on most sites I regularly use.”-Aaron Worcester, medical journalist.

Page 9: Effective Web Design

What is the first thing you look for when viewing a new

website?“A search box.”-Ty Hamilton, high school student

“The info that prompted me to seek the site out.”-Aaron Worcester, medical journalist

“Design and information at the same time.” John Polzin, professional photographer

“Usually a menu, (with links to Home, news, photos) to see what type/how many pages the site has.”-Megan Miller, U of M Spanish major

Page 10: Effective Web Design

Most user-friendly website“Search capabilities. It kind of explains why Google is all powerful. Ease and time in finding the right information is almost as important as the information itself.”-John Campbell, financial analyst

“I use Google for everything.”-Sarah Gill, PR coordinator

“Normally I just type in stuff in the Google search box if I’m looking for something, and I do that a lot.”-Ali Boone, U of M advertising major

Page 11: Effective Web Design

Unclear navigation

Navigation should be either top horizontal or left vertical. Those are the standard locations, and when we visit sites that do not follow that guideline, it causes confusion.

Besides guiding visitors around the site, navigation also reveals the content of the site. Each link should have a short description about where it will take them.

This home page is a good example of bad navigation tools.

Not only are they in an odd location, visitors have no idea what will happen when their click one of the six choices.

Page 12: Effective Web Design

Make it obvious what’s clickable.When visitors don’t know what they can or cannot click, it is as if they are driving and all of the road signs are blank, according to Vincent Flanders, web usability guru.

If visitors know what they can click, they don’t have to ask as many questions. Similarly, if the road signs have directions on them, drivers know where they are headed.

Page 13: Effective Web Design

Bad Terrible navigation

The navigation tools are splattered across the screen. They should be vertical or horizontal, never this way.

Page 14: Effective Web Design

Effective navigation

Navigation always works best top-horizontal or left-vertical.

Page 15: Effective Web Design

Tab Navigation

Steve Krug is a fan of tab navigation, because it is obvious what they are for.

They also help divide the site into sections, while indicating where the visitor is in the site at all times.

Yahoo.com uses tabs to separate different kinds of news stories.

Page 16: Effective Web Design

Tab navigation

The Commercial Appeal’s tab navigation shows users other pages within each tab.

My Fox Memphis uses this technique as well.

Page 17: Effective Web Design

Drop-down menusQuite a few news websites use drop-down menus.

Users have to seek out drop-down menus, which can limit the site’s usability.

The menus can be tricky for users, since they disappear when the mouse moves.

Saving space on the website is the only benefit from using drop-down menus.

The Washington Post uses drop-down menus.

CNN’s color-coded navigation bar is much more simple and user-friendly.

Page 18: Effective Web Design

What do you think about drop-down menus?

“They are confusing.”-Sara Patterson, U of M internet journalism major

“I don’t really pay a lot of attention to them.”-Ali Boone, U of M advertising major

“As long as they work properly, I think they are useful.”-Sarah Gill, PR Coordinator

“They are annoying.”-Megan Miller, U of M Spanish major

Page 19: Effective Web Design

Drop-down menus

MSNBC’s drop-down menus have too many choices, and they would be difficult to scan.

Page 20: Effective Web Design

Most important: readability, consistency or simplicity?

Six interviewees said they consider readability to be the most important feature of web design.

Seven said simplicity was the most important.

One considered consistency to be the most important feature of web design.

Page 21: Effective Web Design

Text color contrast

The poor color contrast makes reading the categories difficult.

Page 22: Effective Web Design

Text color contrast

The text color was later changed to grey, which is a tiny improvement.

Page 23: Effective Web Design

How much time do you spend on the internet?

• Combined, they spend an average of 2.5 hours per day using the internet.

• Five hours was the most hours spent (photographer)

• 1.5 hours was the minimum amount spent on the internet (U of M Spanish major)

Page 24: Effective Web Design

What is your primary use of the web?

• Half of my interviewees mainly use the web for email

• Social networking was the most popular answer, and according to the study, 6 out of 7 people use the web for that purpose.

• News, shopping, sports, work and communication were all popular answers.

Page 25: Effective Web Design

Most common mistakes new web designers make?

“They make the website too aesthetic and not functional enough.” Tim Bass, law student

“Sometimes there’s too much stuff to load and pop-ups. I don’t want to get 900 pop-ups from clicking the wrong thing.”-Ty Hamilton, Central High School student

“Aesthetics should not be neglected, but usability should be the primary focus, and sometimes it seems that sites are designed the other way around.”-Aaron Worcester, medical journalist

Page 26: Effective Web Design

Pop-ups

Too many pop-ups can send visitors clicking on the competitors’ sites.

Page 27: Effective Web Design

Too much focus on aesthetics

This magazine website site was designed for visual appeal, and users view each page by clicking the corner, as if they are reading a magazine. It may seem like a good idea in theory, but people do not read web pages that way.

Page 28: Effective Web Design

What is the most important element of web usability?

“If it solves the problem or question fully and quick.”-John Polzin, professional photographer

“Intuitive navigation.”-Sara Patterson, U of M internet journalism major

“I like being able to easily read about a certain subject but also skip to a different subject quickly via a menu on the side of the web page.”-Bryan Shipman, MTSU computer engineering major

Page 29: Effective Web Design

“If it solves the problem or question fully and quick.”

USA Today’s site is simple, has a search box and displays visual hierarchy.

Page 30: Effective Web Design

How could designers make sites more user-friendly?

“More organization, more help features and search boxes.”-Kathleen Biggs, VA Medical Center resident

“Know "who, what, why, and how many times" the basics of the project and carry it through the design.”-John Polzin, professional photographer

“Keep it simple.”-William Pentecost, optometrist

“Sites are more user-friendly when information is tucked away and simplicity is the focal point.”-John Campbell, financial analyst


Top Related