From Don’t Make Me Think by Steve Krug. Avoid cute or clever names, marketing induced names, company- specific names and unfamiliar technical names.

Slides:



Advertisements
Similar presentations
Author: Steve Krug Presented by: Nicole Wilson
Advertisements

Create an action plan for Your desk! Why does this matter to me? Return to Jims Desk Hints Don t read This either Do not read this Don t read This either.
DON’T MAKE ME THINK Steve Krug.
A Common Sense Approach to Web Usability Steve Krug Highly Recommend Resource!
Don’t Make Me Think (the slides) Dan Fleck SWE 632 gmu
Final project Steve Krug Don’t make me think. Principle #1 How we really use the web Have something on the page that catches the readers interest. -Users.
Steve Krug’s -5- Guiding Principles of Good Web Design & Usability
Group Project. Don’t make me think Steve Krug (2006)
Prof. Anselm SpoerriWeb Design Summary1 Web Guiding Principles Diversity of Users & Rapid Change –Diverse users, diverse computers, diverse skills, diverse.
Web Design, Usability, and Aesthetics 3
Web Design, Usability, and Aesthetics 2 Billboard Design 101 “Designing pages for scanning not reading” Notes from book “Don’t Make Me Think: by Steve.
Web Design, Usability, and Aesthetics 1 Notes from book “Don’t Make Me Think: A Common Sense Approach to Web Usability” by Steve Krug.
Gmail Tutorial This tutorial aims to quickly cover some of the basic elements of web based using Gmail - a free service Use the Index on the.
STEVE KRUG’S WEB DESIGN PRINCIPLE BY YAOFENG CHEN WELCOME TO THE.
Nick Donnarumma. We are either very lazy or very efficient because we tend not to read pages. We scan them instead to save time. We don’t figure out how.
Don’t Make Me Think Explained Justin Sattelberg. Welcome This presentation is about… Steve Krug’s Book Don’t Make Me Think: A Common Sense Approach to.
Dawn Pedersen. Web Interfaces Web interfaces allow a user to interact with a website. The simplest web interfaces provide information and allow the user.
CS 235: User Interface Design February 17 Class Meeting Department of Computer Science San Jose State University Spring 2015 Instructor: Ron Mak
Chapter 12: The Internet The ultimate direct. Internet Facts U.S. firms spend $14.7 billion on Internet advertising in 2005 By 2010, they are expected.
Multimedia & The World Wide Web winny HCI 201 Multimedia and the www.
Don’t Make Me Think Steve Krug Dean Steuer MFC 215.
© Anselm Spoerri Lecture 14 Course Review –Course Objectives –Design Principles Evaluation Criteria used for Term Project.
1. 2 OVERVIEW First Impressions Content Purpose Design Distinction Closing.
CS 4720 Usability and Accessibility CS 4720 – Web & Mobile Systems.
Don’t Make me Think Guiding Principles Summarized by Andrew Piatek
SWE205 Review Spring Why is software unusable? Users are no longer trained. Why? Feature creep Inherently hard: a problem of communication Designed.
Billboard Design 101. Create a clear visual hierarchy The more important something is, the more prominent it is.
USABILITY An Introduction. Usability “..usability really just means making sure that something works well: that a person of average (or even below average)
Organizing Information AGCJ 407 Web Authoring in Agricultural Communications.
Web Site Usability: Chapter 3 Billboard Design Summary Notes on Steve Krug Don’t Make Me Think New Riders, 2 nd Edition Ben Hunt Web 2.0 How to Design.
Website Usability presentation by Pasha Souvorin for Georgia Pathway in Advanced Web Design evaluating and planning for web design.
Unstated Requirements And useability 1. Many UI decisions End up being made by the technical development/implementation staff End up being made by the.
User eXperience. Don’t make me think  When you looking at a page that doesn’t make you think, all the thought balloons over your head say things like.
CS 235: User Interface Design October 8 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak
Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2.
Web Usability1. Goal : Your average user can use it without frustration. Usability guidelines:  Don’t make users think.  Avoid obscure messages. Web.
AJAX 10 Most Common Mistakes. 1. Not giving immediate visual cues for clicking widgets. If something I'm clicking on is triggering Ajax actions, you have.
Principles of effective web design NOTES Flo Morris-Duffin.
Client Website Chris Dunn Web Design Year 1. For this brief I chose to create a notional client website for a charity named after my Dad called The Brian.
CS 174: Web Programming November 25 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak
Don’t Make Me Think Author: Steve Krug Presentation by: Taina Castro Author: Steve Krug Presentation by: Taina Castro.
Dawn Pedersen American River College. What’s an Interface? The connection between a user and a machine. Interfaces provide complex information in a usable.
Web Page Design The Key to a Successful Web Page by Judy Bogdanets.
Informational Design.  Informational Design involves determining a Web page’s content  Content – text and graphics  A successful Web page uses words.
Web page design. Web Site Design Principles Design for the Medium What is meant by Hyper Media? Hypertext links.
Don’t Make Me Think Steve Krug. Don’t Make Me Think What To Do & Not To Do:  Use short and to the point titles on links and buttons  Use links and buttons.
DON’T MAKE ME THINK Ryan O’Mara. Key Ideas  Navigation  Usability  User Tendencies  Design For Users  Testing  Navigation  Usability  User Tendencies.
THE “COLLEGES I AM THINKING ABOUT” LIST IN YOUR FAMILY CONNECTIONS ACCOUNT.
MARK3030 Navigational Testing Navigation Design Basics all of the ways that users can move around a site and understand where to go revealed in the appearance.
DON’T MAKE ME THINK KRISTEN ABELL. TAKEAWAYS Accessibility Usability testing Good design does not always equal good usability.
Essential Elements to Keep in Mind While Designing a Website.
By: Your Name ELEMENTS OF WEB DESIGN. VISUAL APPEAL Optimization of Graphics, for people to stay on your website, your pictures have to load out as soon.
INTERAKSI MANUSIA & KOMPUTER
Usability Testing and Web Design
Imran Hussain University of Management and Technology (UMT)
Thinking beyond HCI Dr David Tarrant, University of Southampton
Krug Chapter 6 A: Navigation
Krug 11 Usability as Courtesy
A Common Sense Approach to Web Usability By Steve Krug, 2000
Krug Chapter 2 How We Really Use the Web and Web Site Design
Homepage and taglines.
Don’t make me think Usability.
Where am I? Navigating a website: Browsing, searching, menus & breadcrumbs.
DELIGHT WITH UX DESIGN RACHEL KORPELLA
Krug Chapter 2 How We Really Use the Web and Web Site Design
Krug Chapter 6 Street signs and Breadcrumbs
Usability 1.0 J. Richard Stevens.
Software Usability and Design
Presentation transcript:

From Don’t Make Me Think by Steve Krug

Avoid cute or clever names, marketing induced names, company- specific names and unfamiliar technical names.

Make it obvious what is and isn’t clickable.

Facts: 1. We don’t read pages. We scan them. 2. We don’t make optimal choices. We satisfice. 3. We don’t figure out how things work. We muddle through.

 Create a clear visual hierarchy.  Conventions are your friends.  Break up pages into clearly defined areas  Make it obvious what’s clickable  Keep the noise down to a dull roar

 “It should never take over n clicks (3, 4, 5?) to get to any page on the site”  Really counts – not number of clicks but how hard each click is.  User’s don’t mind a lot of clicks as long as each click is painless and they have continued confidence that they’re on the right track.

Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts. From: Elements of Style by William Stuck and E.B. White

 Happy talk must die Introductory text that doesn’t really say anything. Content free, just a way to be sociable.  Instructions must die Nobody reads them unless they’ve repeatedly tried to muddle through and failed. Instead make everything self-explanatory or as close to it as possible.

When using the web:  You’re usually trying to find something  You decide whether to ask first or browser first  “search dominant“ people  “link dominant” people

Web experience misses many of the cues we’ve relied on all our lives to negotiate spaces:  No sense of scale  No sense of direction  No sense of location

Home page, bookmarks, breadcumbs, back buttons help. Back button clicks account for between 30-40% of all links clicked.

 It gives us something to hold onto  It tells us where we are  It tells us how to use the site  It gives us confidence in the people who built the site

These emerged quickly and are mostly adapted from print conventions

Persistent navigation (navigation elements that appear on every page) Done right it says “The navigation is over here. Some parts will change a little depending on where you are, but it will always be here, and it will always work the same way.” Exceptions:  Home page is different.  Forms, my be unnecessary distraction

Site id:  Needed on every page  Place in an expected place (where? )  Make it look like a site id (how?)

 Sections – primary navigation (links to the main sections of the site)  Utilities – important elements of the site that aren’t really part of the content hierarchy.  Make these slightly less prominent

 Always have a visible way to get home

Avoid:  Fancy wording  Instructions  Options – if there is any confusion about the scope, spell it out (often just avoid)

 Every page needs a name  The name needs to be in the right place  The name needs to be prominent  The name needs to match what I clicked

 These need to stand out  Breadcrumb best practices:  Put them at the top  Use > between levels  Use tiny type  Use the words “You are here.”  Boldface the last item  Don’ t use them instead of a page name.

4 benefits:  They’re self-evident  They’re hard to miss  They're slick (can add polish and serve a purpose)  They suggest a physical place

Say you are suddenly dumped onto a page. You should be able to answer the following without hesitation:  What site is this?  What page am I on?  What are the major sections of this site?  What are my options at this level?  Where am I in the scheme of things?  How can I search?

Circle:  Site ID  Page name  Sections and subsections  Local navigation  “You are here” indicator(s)  Search Global_Mart p_narration

Home page must accommodate:  Site identify & mission  Site hierarchy  Search  Teases  Timely content  Deals  Shortcuts  registration

Also it needs to meet abstract criteria:  show me what I’m looking for  … and what I‘m not looking for  Show me where to start  Establish creditability and trust

As quickly as possible it must answer questions: 1. What is this? 2. What do they have here? 3. What can I do here? 4. Why should I be here and not somewhere else?

 No average web users – they are all unique  Myth – Good design is about figuring out what people like  It isn’t one dimensional “I like pulldowns” or “I don’t like pulldowns”  It is more complex. “Does this pulldown, with these items and this wording in this context on this page crate a good experience for most people who are likely to use this site?”  Solution: Testing

 Do more rounds of testing  For instance - One morning a month. Debrief during lunch.

 Good will characteristics  Idiosyncratic  Situational  You can refill it  Sometimes a single mistake can empty it

 Things that lower it  Hiding information that I want  Punishing me for not doing things your way  Asking me for information you don’t really need  Shucking and jiving me  Putting sizzle in my way  Your sites looks amateurish

 Things that raise it  Know the main things that people want to do on your site and make them obvious and easy  Tell me what I want to know  Save me steps wherever you can  Know what questions I’m likely to have, and answer them  Provide me with creature comforts like printer- friendly pages  Make it easy to recover from errors.  When in doubt, apologize