12
Don’t Make Me Think Designing Effective Websites Jason White

Don’t make me think

Embed Size (px)

Citation preview

Page 1: Don’t make me think

Don’t Make Me ThinkDesigning Effective Websites

Jason White

Page 2: Don’t make me think

Usability: A person of average (or even below average) ability and experience can figure out how to use the thing to accomplish something without it being more trouble than it is worth.

o Basic principle to Eliminate question markso Limit a person’s thinking by keeping everything no more than 2

clicks awayo My Impression to this idea is that we all have shiny object

syndrome when looking at websites. If something draws your attention from the goal of the site, or causes you to have to pause to complete a task, the site designer did not take usability into consideration.

Page 3: Don’t make me think

The Design of Everyday Things

• Make it obvious what is clickable: “Don Norman explains so enjoyably in his recently updated usability classic The Design of Everyday Things, we’re constantly parsing our environment (like the handles on doors) for these clues (to decide whether to pull or push).”

• I was excited for this quote to show up in the book as I found the example so true. I have started looking closer at doors to see were the handles are and which way they swing open.

Page 4: Don’t make me think

Design Ideaso Take advantage of conventions: Using existing

widely used or standardized design patterns.o Create visual hierarchies: Good visual hierarchies

make it easier for a viewer to find the important information on a website by creating priority and emphasis on content to limit processing time.

o Break pages into clearly defined areas: “Eye-tracking studies of Web page scanning suggest that users decide very quickly in their initial glances which parts of the page are likely to have useful information and then rarely look at the other parts.”

Page 5: Don’t make me think

Design Ideaso Eliminate distractions: Visual noise is

the enemy 3 types of noise: Shouting,

Disorganization, Cluttero Format content for scanning:

Use plenty of headings Keep paragraphs short Use bulleted lists Highlight key terms

Page 6: Don’t make me think

Mindless Choiceso Links need to be clearly labeled so they create an

unambiguously identified target for the user to reach their goal.

o User Guidance Brief: The smallest amount of information that will help me Timely: Placed so I encounter it exactly when I need it Unavoidable: Formatted in a way that ensures that I’ll notice it

When I saw the design ideas and mindless choices topics I couldn’t help but identify with them. I have the attention span of a fly and get distracted very easily. If a site has to many decisions to make, or is not clear about how to use it, I tend to leave the site and not return.

Page 7: Don’t make me think

Omission of needless words

o Reduction of noise, Promoting of useful content, Short pages to allow the page to be seen without scrolling

o “Your objective should always be to eliminate instructions entirely by making everything self-explanatory, or as close to it as possible. When instructions are absolutely necessary, cut them back to the bare minimum.”

o Clear, simple and persistent navigation: Use of these reduce the likelihood that a user will get frustrated with your site and not return to it

Page 8: Don’t make me think

Omission of needless words

o Persistent Navigation: Site Id Sections Utilities Home Button

o Tabs can be important as they are self evident, hard to miss and slick

o Well designed page: What site is this? (Site ID) What page am I on? (Page name) What are the major sections of this site? (Sections) What are my options at this level? (Local navigation) Where am I in the scheme of things? (“You are here”

indicators) How can I search?

Page 9: Don’t make me think

Omission of needless wordso Street Signs

Every page needs a name Page name at top of page

o Bread crumbs Should be at top of the page “>” should separate each level of the path Use bold typeface to show current location

The idea of bread crumbs is one of my biggest pet peeves when it comes to website design. I like to know how I got to a page on a site, and if I want to go back to a different specific page I like to have that option. When sites do not include the path of the site, it causes a user to have to go back to the homepage and start over.

Page 10: Don’t make me think

Usability Testing

o Usability tests not focus groupo Test early, test often; cheaper in the long

run

This topic is the one that I have personally seen cost web designers a good deal of time and money. If you just design a site without testing its usability, you could run into issues that cause extra work, or even a complete site redesign.

Page 11: Don’t make me think

Designing for Mobile Devices

o Create a mobile version of your site Allow zooming Provide link to the full site Hiding of affordances is a no-no Make your links go to the designated location

not to the homepage No cursor=no hover=no clue Be learnable and memorable

o Test usability on mobile

Page 12: Don’t make me think

Brain RulesAt first I was trying to find a link from Brain Rules to Don’t Make Me Think and couldn’t find one. Then I stopped and realized there were so many ways to link the topics in Brain Rules to this book. Attention, memory, vision and sensory integration are the ones that stuck out most to me. The noise that Krug talks about eliminating affects our senses through out vision. The distractions that come from disorganization, clutter, and overstimulation can cause our attention to move away from the website we are on and ruin the experience. To finish this off we always remember a bad website and try to avoid that site at all costs.