SlideShare a Scribd company logo
Steve Krug
Nothing important should ever be more than
two clicks away.
Things that make us think
 All kinds of things on a Web page can make
  us stop and think unnecessarily.
  For example: cute or clever names, marketing
  induced names, company-specific
  names, and unfamiliar technical names. (like
  button names as Job! Is obvious than
  Employment Opportunities)
   Where am I?
   Where should I begin?
   Where did they put _________?
   What are the most important things on this
    page?
   Why did they call it that ?
   Make things Obvious and Easy.
   Make pages self- evident or at least
    self-explanatory (appearance of things,
    well-chosen names, layout of the page,
    and the small amounts of carefully
    crafted text should all work together to
    create near-instantaneous recognition).
   Web pages are going to be effective,
    they have to work most of your magic at
    a glance.
EXAMPLE   EXAMPLE
Scanning, satisficing, and muddling through

When we’re creating sites, we act as though
 people are going to pore over each page.

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.
Read Here

   Read Here


   Read Here


   Finally, click on a chosen link.
Look around feverishly for anything that
Is interesting and is clickable.



 As soon as you find a halfway-decent
 Match, click.

 If it doesn’t pan out, click the back
 Button and try again.
    We don’t read pages. We scan them.
If the document is longer than a few
     paragraphs, we’re likely to print it out
     because it’s easier and faster to read on
     paper than on a screen.

Why do we scan?
    ◦   We’re usually in a hurry.
    ◦   We know we don’t need to read everything
    ◦   We are good at it (we’ve been scanning news
        papers, magazines etc all our lives.)
We don’t make optimal choices. We satisfice.

Most of the time we don’t choose the best
 option. We choose the first reasonable
 option.
We don’t figure out how things work. We
 muddle through.

Why does this happen?
 ◦ It’s not important to us
 ◦ If we find something that works, we stick to it.
Designing pages for scanning.
There are five important things you can do to make sure they see – and understand –
   as much of your site as possible: Create a clear visual hierarchy on each page
The more important something is, the more prominent it is.
    ◦   For instance more important headings are either larger, bolder, in a
        distinctive color, set off by more white space, or some combination of the
        above.
   Things that are related logically are also related visually.
   You can show that things are similar by grouping them
    together under a heading, displaying them in a similar is
    usual style, or putting them all in a clearly defined area.
   Things are “nested” visually to show what’s part of what.
    For instance, a section heading (“Computer Books”) would
    appear above the title of a particular book, visually
    encompassing the whole content area of the page, because
    the book is part of the section.
EXAMPLE
Take advantage of conventions
  ◦ Every publishing medium
    develops conventions and
    continues to refine them and
    develop new ones over time.
    The Web already has a lot of
    them, mostly derived from
    newspaper and magazine
    conventions, and new ones will
    continue to appear.
   Dividing the page into
    clearly defined areas is
    important because it
    allows users to decide
    quickly which areas of
    the page to focus on
    and which areas they
    can safely ignore.
Make it obvious what’s clickable
Minimize noise




                        Colors like red and black together


Spacing between links
Why users like mindless choices?

Users don’t mind a lots of clicks as long as each click
  is painless and they have continued confidence
  that they’re on the right track. I think the rule of
  thumb might be something like “ three
  mindless, unambiguous clicks equal one click that
  requires thought.”
The art of not writing for the web.

◦ E. B. White’s seventeenth rule in “The Elements of
  Style” Omit Needless words. 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.
Getting rid of all those words that no one is
 going to read has several beneficial effects:
 ◦ It reduces the noise of the page
 ◦ It makes the useful content more prominent.
 ◦ It makes the pages shorter, allowing users to see
   more of each page at a glance without scrolling.
Specially 2 kinds of writing 1. Happy talk and
2. instructions.

Happy talk must die.
 A lot of Happy talk is the kind of self-
  congratulatory promotional writing that you find in
  badly written brochures. Unlike good promotional
  copy, it conveys no useful information, and if
  focuses on saying how great we are, as opposed to
  delineating what makes us great.

Instructions must die.
 The other source of needless words is instructions.
  Your objective should always be to eliminate
  instructions entirely by making everything self-
  explanatory, or as close to it as possible. When
  instructions are necessary, cut them back to bare
  minimum.
Designing Navigation
It’s a fact:
  “People won’t use your Web site if they
  can’t find their way around it.”
Enter Site


                                                    Feel like
                                Yes                 browsing

                            Click on a section

     No
                               Click on a
                               subsection
  Think you’re in     Yes
 The right section?
                               Look for
                              whatever it is


                                 Find It?
                 No
                                      Yes
Not Yet

        Thoroughly
        Frustrated?                         Leave
                                            Happy
Enter Site


        Feel like
        browsing            No

                        Find a
                      search box


                    Type your query


                                        No
                    Credible results?

                                                   Device a
                             Yes                  Better query

                    Scan results for                     Not Yet
                     likely matches


                     Check the out
                                                  Had Enough?
Leave         Yes       Find it?             No
Happy
                                                  Leave Unhappy
Enter Site


                                                    Feel like
                                 Yes                browsing            No

                            Click on a section                      Find a
                                                                  search box
     No
                               Click on a                       Type your query
                               subsection
  Think you’re in     Yes
 The right section?
                               Look for
                                                                                    No
                                                                Credible results?
                              whatever it is
                                                                                               Device a
                                                                         Yes                  Better query
                                 Find It?
                   No                                           Scan results for                     Not Yet
                                       Yes                       likely matches

Not Yet                 Almost
                                                                 Check the out

   Thoroughly                                                                                 Had Enough?
   Frustrated?                              Leave         Yes       Find it?             No
                                            Happy
             Yes                                                                              Leave Unhappy
   No sense of scale (no, of pages in the site)
   Its hard to know whether you’ve seen
    everything of interest in a site, which means
    it’s hard to know when to stop looking. This
    is one reason why it’s useful for links that
    we’ve already clicked onto display in a
    different color. It gives us some sense of
    how much ground we’ve covered.
   No sense of direction.
   There is no up and down in hierarchy – to a
    more general or more specific level.
   It gives us something to hold on to.
   It tells us what’s here.
   It tells us how to use the site.
   It gives us confidence in the people who build
    it.
Conventions specify the appearance and location of the navigation elements so we know
  what to look for and where to look when we need them.
Putting them in a standard place lets us locate them quickly, with a minimum of effort;
   standardizing their appearance makes it easy to distinguish them from everything else.


Navigation conventions for the web have emerged quickly, mostly adapted from existing
  print conventions. They will continue to evolve, but for the moment these are the basic
  element.
   Site ID
   Sections
   Subsection
   Utilities
   You are here
   Page name
   Local navigation
Don’t look now, but I think it’s following us.
Just having the navigation appear in the same place on every
  page with a consistent look gives you instant confirmation
  that you’re still in the same site.
Navigation should include the five elements you most need to
 have on hand at all times;
   Site ID
   A way home
   A way search
   Utilities
   Sections
Did I say every page?
I lied. There are two exceptions to the "follow
   me everywhere" rule:
 The home page
 Forms
   The Site ID represents the whole site.
   Primary navigation- are the links to the
    main sections of the site.
   Utilities are the links to important
    elements of the site that aren't really part
    of the content hierarchy(like help, sitemap
    etc).
   Having a Home button in sight at all times
    offers reassurance that no matters how lost I
    may get, I can always start over. Site ID doubles
    as button that can take you to Home page.
   Given the potential power of searching and the
    number of people who prefer searching to
    browsing, unless a site is very small and very
    well organized, every page should have either a
    search box or a link to search page.
   Large percentage of users their first official act
    when they reach a new site will be to scan the
    page for search option.
Level 1          XYZ Home



 Level 2       Product                        Support                Help


Level 3
    Hardware        Software       Support            Live    FAQs          Contact
                                   database         Support                  Info
There are 4 things you need to know about
  page names:
 Every page needs a name
 Name needs to be in right place
 The name needs to be prominent
 Name needs to match what I clicked
   They need to stand out(example
    highlight sub-section link)
   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 page name
   They   are self evident
   They   are hard to miss
   They   are slick
   They   suggest a physical space
   What site is this? (Site ID)
   What page am I on? (Page name)
   What are the major sections of the page?
    (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?
Think about all the things the Home page has to accommodate:
 Site identity and mission.
 Site hierarchy
 Search
 Timely content
 Deals
 Short-cuts
 Registration
 Show me what I'm looking for
 ...and what I'm not looking for
 Show me where to start
 Establish credibility and trust
   Everybody wants a piece of it.
   Too many cooks
   One size fits all
   The Tagline
   the welcome blurb
   Use as much as space necessary
   ...but don't use any more space than
    necessary
   Don't use a mission statement as a welcome
    blurb
   It's one of the most important things to test.
   Section descriptions.
   Different orientation
   Everywhere else
   You have to seek them out
   They are hard to scan
   Putting a banner ad on the Home page if you
    don’t have to.
   Promoting everything
   Letting deals drive Home page design. (Cross
    Promotion)
   Getting ready for user data.
why most web design team arguments about usability are a
 waste of time, and avoid them.
In a Focus group, a small group of people(usually 5 to 8) sit
  around a table and react to ideas and design that are shown
  to them. It's a group process, and much of its value comes
  from participants reacting to each other's opinion. Focus
  groups are good for quickly getting a sampling of user's
  opinions and feelings about things.

In a Usability test, one user at a time is shown something
  (whether it's a Web site, a prototype of a site, or some
  sketches of individual pages) and asked to either (a) figure
  out what it is, or (b) try to do a typical task.
   If you want a great site, you've got to test.
   Testing is an iterative process
   Nothing beats a live audience reaction
   Where do you test?
   Who should do the testing?
   Who should observe?
What to do if you're the facilitator
 Try the test yourself first and then give it to other participants

 Protect the participants

 Try to see the thought balloons forming over their heads.

 Don't give them hints about what to do

 Keep your instructions simple

 Probe, probe, probe

 Don't be afraid to improve

 Don't be disappointed if a user turns out to be inexperienced

 Make some notes after each session
What to do if you're observing
 Do they get it?

 Can they find their way around?

 Don't panic

 Be quiet

 Pay more attention to actions and explanations than opinions

 Reporting what you saw.
Dontmakemethink

More Related Content

Viewers also liked

P4 activitat amb la pissarra digital
P4 activitat amb la pissarra digitalP4 activitat amb la pissarra digital
P4 activitat amb la pissarra digital
infantildms
 
Power point ordenagailuaren osagaiak
Power point ordenagailuaren osagaiakPower point ordenagailuaren osagaiak
Power point ordenagailuaren osagaiakik012071tp
 
Product Photoshow
Product PhotoshowProduct Photoshow
Product Photoshow
austinRphillips
 
организация комплексной системы обеспечения безопасного и бесперебойного функ...
организация комплексной системы обеспечения безопасного и бесперебойного функ...организация комплексной системы обеспечения безопасного и бесперебойного функ...
организация комплексной системы обеспечения безопасного и бесперебойного функ...UralCIO
 
Ordenagailuaren osagaiak
Ordenagailuaren osagaiakOrdenagailuaren osagaiak
Ordenagailuaren osagaiakik012071tp
 
Senior Project Paper
Senior Project PaperSenior Project Paper
Senior Project Paper
austinRphillips
 
Promotion handout
Promotion handoutPromotion handout
Promotion handout
Kaly Nguyen
 
Contrast Translation Presentation
Contrast Translation PresentationContrast Translation Presentation
Contrast Translation PresentationKaly Nguyen
 
The next 10 years of life
The next 10 years of lifeThe next 10 years of life
The next 10 years of life
Brian Turner
 
Power point ordenagailuaren osagaiak
Power point ordenagailuaren osagaiakPower point ordenagailuaren osagaiak
Power point ordenagailuaren osagaiakik012071tp
 
Elements of cinematography
Elements of cinematographyElements of cinematography
Elements of cinematography
Brian Turner
 

Viewers also liked (11)

P4 activitat amb la pissarra digital
P4 activitat amb la pissarra digitalP4 activitat amb la pissarra digital
P4 activitat amb la pissarra digital
 
Power point ordenagailuaren osagaiak
Power point ordenagailuaren osagaiakPower point ordenagailuaren osagaiak
Power point ordenagailuaren osagaiak
 
Product Photoshow
Product PhotoshowProduct Photoshow
Product Photoshow
 
организация комплексной системы обеспечения безопасного и бесперебойного функ...
организация комплексной системы обеспечения безопасного и бесперебойного функ...организация комплексной системы обеспечения безопасного и бесперебойного функ...
организация комплексной системы обеспечения безопасного и бесперебойного функ...
 
Ordenagailuaren osagaiak
Ordenagailuaren osagaiakOrdenagailuaren osagaiak
Ordenagailuaren osagaiak
 
Senior Project Paper
Senior Project PaperSenior Project Paper
Senior Project Paper
 
Promotion handout
Promotion handoutPromotion handout
Promotion handout
 
Contrast Translation Presentation
Contrast Translation PresentationContrast Translation Presentation
Contrast Translation Presentation
 
The next 10 years of life
The next 10 years of lifeThe next 10 years of life
The next 10 years of life
 
Power point ordenagailuaren osagaiak
Power point ordenagailuaren osagaiakPower point ordenagailuaren osagaiak
Power point ordenagailuaren osagaiak
 
Elements of cinematography
Elements of cinematographyElements of cinematography
Elements of cinematography
 

Similar to Dontmakemethink

Web usability
Web usabilityWeb usability
Web usability
8raystech
 
2017 06-test withintelligence-conversionelite
2017 06-test withintelligence-conversionelite2017 06-test withintelligence-conversionelite
2017 06-test withintelligence-conversionelite
Tim Stewart
 
10 Design & Layout Principles Guaranteed To Improve
10 Design & Layout Principles Guaranteed To Improve10 Design & Layout Principles Guaranteed To Improve
10 Design & Layout Principles Guaranteed To Improve
Lauren Martin
 
TAKE CONTROL
TAKE CONTROL TAKE CONTROL
TAKE CONTROL
Rakesh Verma
 
Painless Insight Planning
Painless Insight PlanningPainless Insight Planning
Painless Insight Planning
Susan Abbott
 
Why Grammar and Punctuation and Picky Layout Rules Matter in Advertising
Why Grammar and Punctuation and Picky Layout Rules Matter in AdvertisingWhy Grammar and Punctuation and Picky Layout Rules Matter in Advertising
Why Grammar and Punctuation and Picky Layout Rules Matter in Advertising
Noah Liberman
 
NCompass Live: Tech Talk with Michael Sauers: Artificial Intelligence: Transf...
NCompass Live: Tech Talk with Michael Sauers: Artificial Intelligence: Transf...NCompass Live: Tech Talk with Michael Sauers: Artificial Intelligence: Transf...
NCompass Live: Tech Talk with Michael Sauers: Artificial Intelligence: Transf...
Nebraska Library Commission
 
Website Evaluation Rubric
Website Evaluation RubricWebsite Evaluation Rubric
Don't Make me Think - Book Summary
Don't Make me Think - Book Summary Don't Make me Think - Book Summary
Don't Make me Think - Book Summary
Adam Guerguis
 

Similar to Dontmakemethink (9)

Web usability
Web usabilityWeb usability
Web usability
 
2017 06-test withintelligence-conversionelite
2017 06-test withintelligence-conversionelite2017 06-test withintelligence-conversionelite
2017 06-test withintelligence-conversionelite
 
10 Design & Layout Principles Guaranteed To Improve
10 Design & Layout Principles Guaranteed To Improve10 Design & Layout Principles Guaranteed To Improve
10 Design & Layout Principles Guaranteed To Improve
 
TAKE CONTROL
TAKE CONTROL TAKE CONTROL
TAKE CONTROL
 
Painless Insight Planning
Painless Insight PlanningPainless Insight Planning
Painless Insight Planning
 
Why Grammar and Punctuation and Picky Layout Rules Matter in Advertising
Why Grammar and Punctuation and Picky Layout Rules Matter in AdvertisingWhy Grammar and Punctuation and Picky Layout Rules Matter in Advertising
Why Grammar and Punctuation and Picky Layout Rules Matter in Advertising
 
NCompass Live: Tech Talk with Michael Sauers: Artificial Intelligence: Transf...
NCompass Live: Tech Talk with Michael Sauers: Artificial Intelligence: Transf...NCompass Live: Tech Talk with Michael Sauers: Artificial Intelligence: Transf...
NCompass Live: Tech Talk with Michael Sauers: Artificial Intelligence: Transf...
 
Website Evaluation Rubric
Website Evaluation RubricWebsite Evaluation Rubric
Website Evaluation Rubric
 
Don't Make me Think - Book Summary
Don't Make me Think - Book Summary Don't Make me Think - Book Summary
Don't Make me Think - Book Summary
 

Recently uploaded

"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin..."$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
Fwdays
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
Miro Wengner
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
Zilliz
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
Safe Software
 
Christine's Supplier Sourcing Presentaion.pptx
Christine's Supplier Sourcing Presentaion.pptxChristine's Supplier Sourcing Presentaion.pptx
Christine's Supplier Sourcing Presentaion.pptx
christinelarrosa
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
Neo4j
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
Tatiana Kojar
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving
 
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance PanelsNorthern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving
 
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
Jason Yip
 
Demystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through StorytellingDemystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through Storytelling
Enterprise Knowledge
 
Session 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdfSession 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdf
UiPathCommunity
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
MichaelKnudsen27
 
A Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's ArchitectureA Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's Architecture
ScyllaDB
 
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
Fwdays
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
Edge AI and Vision Alliance
 

Recently uploaded (20)

"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin..."$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
 
Christine's Supplier Sourcing Presentaion.pptx
Christine's Supplier Sourcing Presentaion.pptxChristine's Supplier Sourcing Presentaion.pptx
Christine's Supplier Sourcing Presentaion.pptx
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
 
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance PanelsNorthern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
 
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
 
Demystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through StorytellingDemystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through Storytelling
 
Session 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdfSession 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdf
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
 
A Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's ArchitectureA Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's Architecture
 
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
 

Dontmakemethink

  • 2. Nothing important should ever be more than two clicks away.
  • 3. Things that make us think  All kinds of things on a Web page can make us stop and think unnecessarily. For example: cute or clever names, marketing induced names, company-specific names, and unfamiliar technical names. (like button names as Job! Is obvious than Employment Opportunities)
  • 4. Where am I?  Where should I begin?  Where did they put _________?  What are the most important things on this page?  Why did they call it that ?
  • 5.
  • 6. Make things Obvious and Easy.  Make pages self- evident or at least self-explanatory (appearance of things, well-chosen names, layout of the page, and the small amounts of carefully crafted text should all work together to create near-instantaneous recognition).  Web pages are going to be effective, they have to work most of your magic at a glance.
  • 7. EXAMPLE EXAMPLE
  • 8. Scanning, satisficing, and muddling through When we’re creating sites, we act as though people are going to pore over each page. 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.
  • 9. Read Here Read Here Read Here Finally, click on a chosen link.
  • 10. Look around feverishly for anything that Is interesting and is clickable. As soon as you find a halfway-decent Match, click. If it doesn’t pan out, click the back Button and try again.
  • 11. We don’t read pages. We scan them. If the document is longer than a few paragraphs, we’re likely to print it out because it’s easier and faster to read on paper than on a screen. Why do we scan? ◦ We’re usually in a hurry. ◦ We know we don’t need to read everything ◦ We are good at it (we’ve been scanning news papers, magazines etc all our lives.)
  • 12. We don’t make optimal choices. We satisfice. Most of the time we don’t choose the best option. We choose the first reasonable option.
  • 13. We don’t figure out how things work. We muddle through. Why does this happen? ◦ It’s not important to us ◦ If we find something that works, we stick to it.
  • 14. Designing pages for scanning. There are five important things you can do to make sure they see – and understand – as much of your site as possible: Create a clear visual hierarchy on each page The more important something is, the more prominent it is. ◦ For instance more important headings are either larger, bolder, in a distinctive color, set off by more white space, or some combination of the above.
  • 15. Things that are related logically are also related visually.  You can show that things are similar by grouping them together under a heading, displaying them in a similar is usual style, or putting them all in a clearly defined area.  Things are “nested” visually to show what’s part of what. For instance, a section heading (“Computer Books”) would appear above the title of a particular book, visually encompassing the whole content area of the page, because the book is part of the section.
  • 17. Take advantage of conventions ◦ Every publishing medium develops conventions and continues to refine them and develop new ones over time. The Web already has a lot of them, mostly derived from newspaper and magazine conventions, and new ones will continue to appear.
  • 18. Dividing the page into clearly defined areas is important because it allows users to decide quickly which areas of the page to focus on and which areas they can safely ignore.
  • 19. Make it obvious what’s clickable
  • 20. Minimize noise Colors like red and black together Spacing between links
  • 21. Why users like mindless choices? Users don’t mind a lots of clicks as long as each click is painless and they have continued confidence that they’re on the right track. I think the rule of thumb might be something like “ three mindless, unambiguous clicks equal one click that requires thought.”
  • 22. The art of not writing for the web. ◦ E. B. White’s seventeenth rule in “The Elements of Style” Omit Needless words. 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.
  • 23. Getting rid of all those words that no one is going to read has several beneficial effects: ◦ It reduces the noise of the page ◦ It makes the useful content more prominent. ◦ It makes the pages shorter, allowing users to see more of each page at a glance without scrolling.
  • 24. Specially 2 kinds of writing 1. Happy talk and 2. instructions. Happy talk must die.  A lot of Happy talk is the kind of self- congratulatory promotional writing that you find in badly written brochures. Unlike good promotional copy, it conveys no useful information, and if focuses on saying how great we are, as opposed to delineating what makes us great. Instructions must die.  The other source of needless words is instructions. Your objective should always be to eliminate instructions entirely by making everything self- explanatory, or as close to it as possible. When instructions are necessary, cut them back to bare minimum.
  • 25. Designing Navigation It’s a fact: “People won’t use your Web site if they can’t find their way around it.”
  • 26. Enter Site Feel like Yes browsing Click on a section No Click on a subsection Think you’re in Yes The right section? Look for whatever it is Find It? No Yes Not Yet Thoroughly Frustrated? Leave Happy
  • 27. Enter Site Feel like browsing No Find a search box Type your query No Credible results? Device a Yes Better query Scan results for Not Yet likely matches Check the out Had Enough? Leave Yes Find it? No Happy Leave Unhappy
  • 28. Enter Site Feel like Yes browsing No Click on a section Find a search box No Click on a Type your query subsection Think you’re in Yes The right section? Look for No Credible results? whatever it is Device a Yes Better query Find It? No Scan results for Not Yet Yes likely matches Not Yet Almost Check the out Thoroughly Had Enough? Frustrated? Leave Yes Find it? No Happy Yes Leave Unhappy
  • 29. No sense of scale (no, of pages in the site)  Its hard to know whether you’ve seen everything of interest in a site, which means it’s hard to know when to stop looking. This is one reason why it’s useful for links that we’ve already clicked onto display in a different color. It gives us some sense of how much ground we’ve covered.  No sense of direction.  There is no up and down in hierarchy – to a more general or more specific level.
  • 30.
  • 31. It gives us something to hold on to.  It tells us what’s here.  It tells us how to use the site.  It gives us confidence in the people who build it.
  • 32. Conventions specify the appearance and location of the navigation elements so we know what to look for and where to look when we need them. Putting them in a standard place lets us locate them quickly, with a minimum of effort; standardizing their appearance makes it easy to distinguish them from everything else. Navigation conventions for the web have emerged quickly, mostly adapted from existing print conventions. They will continue to evolve, but for the moment these are the basic element.  Site ID  Sections  Subsection  Utilities  You are here  Page name  Local navigation
  • 33. Don’t look now, but I think it’s following us. Just having the navigation appear in the same place on every page with a consistent look gives you instant confirmation that you’re still in the same site. Navigation should include the five elements you most need to have on hand at all times;  Site ID  A way home  A way search  Utilities  Sections
  • 34. Did I say every page? I lied. There are two exceptions to the "follow me everywhere" rule:  The home page  Forms
  • 35. The Site ID represents the whole site.
  • 36. Primary navigation- are the links to the main sections of the site.
  • 37. Utilities are the links to important elements of the site that aren't really part of the content hierarchy(like help, sitemap etc).
  • 38. Having a Home button in sight at all times offers reassurance that no matters how lost I may get, I can always start over. Site ID doubles as button that can take you to Home page.
  • 39. Given the potential power of searching and the number of people who prefer searching to browsing, unless a site is very small and very well organized, every page should have either a search box or a link to search page.  Large percentage of users their first official act when they reach a new site will be to scan the page for search option.
  • 40. Level 1 XYZ Home Level 2 Product Support Help Level 3 Hardware Software Support Live FAQs Contact database Support Info
  • 41. There are 4 things you need to know about page names:  Every page needs a name  Name needs to be in right place  The name needs to be prominent  Name needs to match what I clicked
  • 42. They need to stand out(example highlight sub-section link)
  • 43. 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 page name
  • 44. They are self evident  They are hard to miss  They are slick  They suggest a physical space
  • 45. What site is this? (Site ID)  What page am I on? (Page name)  What are the major sections of the page? (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?
  • 46. Think about all the things the Home page has to accommodate:  Site identity and mission.  Site hierarchy  Search  Timely content  Deals  Short-cuts  Registration  Show me what I'm looking for  ...and what I'm not looking for  Show me where to start  Establish credibility and trust
  • 47. Everybody wants a piece of it.  Too many cooks  One size fits all
  • 48. The Tagline  the welcome blurb  Use as much as space necessary  ...but don't use any more space than necessary  Don't use a mission statement as a welcome blurb  It's one of the most important things to test.
  • 49. Section descriptions.  Different orientation  Everywhere else
  • 50. You have to seek them out  They are hard to scan
  • 51. Putting a banner ad on the Home page if you don’t have to.  Promoting everything  Letting deals drive Home page design. (Cross Promotion)  Getting ready for user data.
  • 52. why most web design team arguments about usability are a waste of time, and avoid them.
  • 53. In a Focus group, a small group of people(usually 5 to 8) sit around a table and react to ideas and design that are shown to them. It's a group process, and much of its value comes from participants reacting to each other's opinion. Focus groups are good for quickly getting a sampling of user's opinions and feelings about things. In a Usability test, one user at a time is shown something (whether it's a Web site, a prototype of a site, or some sketches of individual pages) and asked to either (a) figure out what it is, or (b) try to do a typical task.
  • 54. If you want a great site, you've got to test.  Testing is an iterative process  Nothing beats a live audience reaction
  • 55. Where do you test?  Who should do the testing?  Who should observe?
  • 56. What to do if you're the facilitator  Try the test yourself first and then give it to other participants  Protect the participants  Try to see the thought balloons forming over their heads.  Don't give them hints about what to do  Keep your instructions simple  Probe, probe, probe  Don't be afraid to improve  Don't be disappointed if a user turns out to be inexperienced  Make some notes after each session
  • 57. What to do if you're observing  Do they get it?  Can they find their way around?  Don't panic  Be quiet  Pay more attention to actions and explanations than opinions  Reporting what you saw.