How to Design Effective Websites

Jason Slowey, CSE 619, Spring 2015

Maximize Usability

Goal should be to make each page Self-Evident Average user should know what “it” is and how to use “it”

If you can’t make something self-evident, make it Self-Explanatory

“Don’t Make Me Think!”

People don’t like to puzzle over how to do things.

My Perspective

I think that Krug’s quote “Don’t Make Me Think!” is a perfect way of describing how web pages should be designed, I had not though about how mindlessly we browse pages, and looking back on it, I see how the times when I have been thoroughly frustrated, have been when I had to really work to figure out how to use a site.

Follow Existing Conventions

Conventions – The widely used or standardized design patterns

In the last 20 years, many web conventions have changed Where things are located How they Work How they look

Web conventions make life easier, when applied properly

“Be innovative when you know you have a better idea, but take advantage of conventions when you don’t.”

My Perspective

To be honest, before reading this, conventions was something I had completely taken for granted. Having now read this book, I see how keeping elements such as where utilities are located on the page, can strengthen the design.

Create Clear Visual Hierarchy

Appearance of things on the page accurately portrays the relationships between the things on the page The more important something is, the more prominent it is Things that are related logically are related visually Things are nested visually to show their relationship to other

things.

Good visual hierarchy saves us work by preprocessing the page for us If everything looks equally important, we can’t effectively

scan, which means a lot more work.

My Perspective

Considering most of the time we are reading content online we are actually scanning it, I can see how creating visual hierarchy with the content on the page can enhance this process, and in turn enhance the user experience.

Design of Everyday Things

This is very similar to the examples given in Design of Everyday Things regarding the doors. When the visual cues failed with the door design, it caused the user to think, and in some cases prevented the door from being used.

In Krug’s book, when discussing visual hierarchies, he notes that when the visual cues fail it causes the user to think.

Pages = Clearly Defined Areas

Users decide very quickly decide: What parts of the page will have useful information, then Rarely look at the other parts

SO…

Break pages up into clearly defined areas This allows users to decide what is important on the page,

and what they can safely ignore

Make Clickabiltiy Obvious

VERY Important to make it easy to tell what's clickable. Large part of what we do on the web is looking for the next

thing to CLICK.

We scan pages looking for visual cues that identify what is clickable It’s best to stick to one color for all text links, or Make sure that their shape and location identify them as links

My Perspective

This is another example of a concept that, until reading this book, I had not given a ton of though to. Krug brings up an excellent point that when we are browsing, we are looking for the next thing to click. With this in mind, I can see why making clickability obvious is so vital.

Reduce Noise

“Noise is one of the greatest enemies of easy-to-grasp pages”

Three Types of Noise: Shouting – Everything screaming for your attention Disorganization Clutter

Get rid of everything that’s not important

My Perspective

I completely agree with Krug about getting rid of all noise on a web page. Nothing is more frustrating than trying to read content online while a brightly colored, fast moving ad is flashing repeatedly off to the side.

Support Scanning with Format

The way your text is formatted can do a lot to make it easier to scan.

Use Plenty of Headings Headings within text create an outline of the page Using bullets can have the same effect

Keep Paragraphs Short Long paragraphs are daunting, hard to scan

Highlight Key Terms, making them easier to find

My Perspective

The idea of supporting scanning with format is in the same category with creating visual hierarchy. Since we know many users will be scanning the content, by catering to this we can enhance the experience.

Give Clear Choices

“Links that clearly, and unambiguously the identify target assures users that clicking them will bring them closer to their goal”

Make the choices: Brief – Smallest amount of info possible Timely – Placed so it is encountered right when it is

needed Unavoidable – Formatted so it will for sure be noticed

Omit Needless Words

Getting rid of needless words: Reduces noise Promotes useful content Shortens the page, enhancing scanning

Remove “Happy Talk” Self-congratulatory, promotional writing you find in bad brochures

Remove Instructions, Make EVERYTHING Self-Explanatory No one is going to read them

My Perspective

The idea of supporting omitting needless words is in the same category as reducing noise. By taking Krug’s advice and “getting rid of everything that is not important, we enhance the user experience and can maximize learning.

Use Persistent Navigation

“Navigation isn’t just a feature of the site, it is the site.” It tells us how to use the site.

Persistent Navigation – Set of navigation elements that appear on every page

Site ID – Logo in top left corner of the page

Sections [Primary/Secondary]

Utilities – Things that help me use the site, or publisher information (Only 4-5)

Home Button

Search Box / Link to a Search Page

My Perspective

I love Krug’s line “Navigation isn’t just a feature of the site, it is the site” because it really reinforces the importance of navigation. By using persistent navigation, we not only keep the site consistent, but also allow users access to the vital navigation elements at all times.

Street Signs & Bread Crumbs

Street Signs = Page Names Every page needs a name Page name should be at the top It needs to be prominent It needs to match the link the user clicked

Bread Crumbs = Show Path from Home Page to Current Location while browsing

Put them at the top of the page Use “>” to separate levels Boldface the current location

Establish the Main Point

Getting off on the right foot is HUGE! “If they start lost, they will stay lost”

Homepage should convey who you are, what you do, and what your site has to offer

A Clear Homepage = Easily answer these questions: What Is It?

What can I do here?

What do they have here?

Why should I be here

The Homepage

Three places on the home page that provide explicit statements of what the site is about:

The Tagline – “Pithy phrase that characterizes the whole enterprise” Good taglines are clear and informative

Convey differentiation and a clear benefit

Good taglines sound generic

Be personable, lively and sometimes clever

*Some websites can go without taglines, but it’s rare

The Welcome Blurb – Top left Corner, Block of text

The “Learn More” – Short explanatory video

Perform Usability Testing

“If you want a great site, you’ve got to test it.”

Test early in the project Much harder to make changes when the site is already in use.

Perform DIY usability testing as an alternative to professional One Morning a Month Throughout the entire process Recruit loosely, 3 people Facilitator with Participant Observe Remotely Debrief, Decide what to fix

Don’t Forget Mobile

Create a Mobile Site that is a subset of the full site Allow Zooming

Always provide a link to the “full site”

Make links take you where you want to go, not the homepage

Don’t hide affordances

No hoverability

Be Memorable/Learnable

Managing real estate challenges shouldn’t be done at the cost of usability

“It’s all about tradeoffs.” Most serious usability problems are a result of a bad tradeoff Good Mobile Usability = Making Good Tradeoffs

Design of Everyday Things

This is similar to the Design of Everyday Things in the sense that they also place a lot of value in affordances. According to Norman, affordances act as signifiers, just like they do in Krug’s book.

In Krug’s book, when discussing mobile web navigation conventions, he notes the importance of making affordances prominent in order to help viewer pick up on visual cues.