SlideShare a Scribd company logo
1 of 10
Usability and Design

     MEGAN MCKEEVER
   INFORMATION CULTURE
      OCTOBER 22, 2012
Design v. Usability: Who will win?

 Many graphic/web designers cringe when they hear
  the words accessibility and usability, but I think
  there can be a happy meeting ground.
 There are small things that can be changed to make a
  site more usable and easier to navigate that won’t
  overhaul or disrupt design.
Hyperlinks

 Make clickable buttons large enough to click. Elderly
 users or people with mobility issues may have
 trouble clicking small targets.
Titles and Headers

 Uses page titles and headers and make them count
 Page titles should be fairly concise and explain what
 the user can find on each page
    DON’T use your web address in a page title
    DON’T use a filename
    DON’T use a one-word title, i.e.

    DO use context, i.e. Lilly’s Vineyard – Wine Tasting
     Reservations – Finger Lakes, NY
 This will allow users to quickly figure out if they are
 in the right place
Be Consistent

 Consistency and standards - Users should not
  have to wonder whether different words, situations,
  or actions mean the same thing. Follow platform
  conventions. (Nielsen)
 Make colors consistent as well. If the previous screen
  has a green continue button, don’t make the next one
  purple.
 Use plain language.
Give Feedback

 Keep users informed of what is going on. Was their
 upload successful? Did you receive their
 applications?
Don’t require registration …

 At least not immediately.
 User participation is affected by the number of
  barriers on your site.
 When you force users to log-in, you may lock away
  features that don’t really need user identification
 Pixlr
Once you need users to register

 Keep it short and simple. Long registration forms
  may drive away users.
 Ask only for the information you need.
    You can always give users the option to update their profile
     once they are a member.
    Don’t include optional items in the form. Users may not notice
     the un-asterisked lines and think it is all required.
Recognition vs. Recall

 “Minimize the user's memory load by making
 objects, actions, and options visible. The user should
 not have to remember information from one part of
 the dialogue to another. Instructions for use of the
 system should be visible or easily retrievable
 whenever appropriate.”
For additional Info:

Check out Nielsen’s 10 Usability Heuristics

   Visibility of system status The system should always keep users informed about what is going on, through appropriate
    feedback within reasonable time.
   Match between system and the real world The system should speak the users' language, with words, phrases and
    concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in
    a natural and logical order.
   User control and freedom Users often choose system functions by mistake and will need a clearly marked "emergency exit"
    to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.
   Consistency and standards Users should not have to wonder whether different words, situations, or actions mean the same
    thing. Follow platform conventions.
   Error prevention Even better than good error messages is a careful design which prevents a problem from occurring in the
    first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they
    commit to the action.
   Recognition rather than recall Minimize the user's memory load by making objects, actions, and options visible. The user
    should not have to remember information from one part of the dialogue to another. Instructions for use of the system should
    be visible or easily retrievable whenever appropriate.
   Flexibility and efficiency of use Accelerators -- unseen by the novice user -- may often speed up the interaction for the
    expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
   Aesthetic and minimalist design Dialogues should not contain information which is irrelevant or rarely needed. Every
    extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.
   Help users recognize, diagnose, and recover from errors Error messages should be expressed in plain language (no
    codes), precisely indicate the problem, and constructively suggest a solution.
   Help and documentation Even though it is better if the system can be used without documentation, it may be necessary to
    provide help and documentation. Any such information

More Related Content

What's hot

Usability Primer - for Alberta Municipal Webmasters Working Group
Usability Primer - for Alberta Municipal Webmasters Working GroupUsability Primer - for Alberta Municipal Webmasters Working Group
Usability Primer - for Alberta Municipal Webmasters Working GroupNormanMendoza
 
10 principles of interaction design
10 principles of interaction design10 principles of interaction design
10 principles of interaction designLinda Bartlett
 
Designing Inclusive Experiences to Maximize Reach and Satisfaction
Designing Inclusive Experiences to Maximize Reach and SatisfactionDesigning Inclusive Experiences to Maximize Reach and Satisfaction
Designing Inclusive Experiences to Maximize Reach and SatisfactionWindows Developer
 
Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009Emagination ®
 
Web a11y beyond guidelines
Web a11y beyond guidelinesWeb a11y beyond guidelines
Web a11y beyond guidelinesrach123
 
User interface design for people with special needs
User interface design for people with special needsUser interface design for people with special needs
User interface design for people with special needsRhaf Alloush
 
The 10 Golden Usability Heuristics (Montreal Girl Geeks September 2014)
The 10 Golden Usability Heuristics (Montreal Girl Geeks September 2014)The 10 Golden Usability Heuristics (Montreal Girl Geeks September 2014)
The 10 Golden Usability Heuristics (Montreal Girl Geeks September 2014)Elida Arrizza
 
Summary Guidelines
Summary GuidelinesSummary Guidelines
Summary Guidelinestwoplayer
 
Heuristic Analysis - PBS Newshour Website
Heuristic Analysis - PBS Newshour WebsiteHeuristic Analysis - PBS Newshour Website
Heuristic Analysis - PBS Newshour Websitefabiolaeinhorn
 
RBC Royal Bank : An Accessibility Evaluation & Recommendations
RBC Royal Bank : An Accessibility Evaluation & RecommendationsRBC Royal Bank : An Accessibility Evaluation & Recommendations
RBC Royal Bank : An Accessibility Evaluation & RecommendationsSivaprasad Paliyath (CUA - HFI)
 
How To Be Rich With Smalltalk
How To Be Rich With SmalltalkHow To Be Rich With Smalltalk
How To Be Rich With SmalltalkESUG
 
Usability Expert Review
Usability Expert ReviewUsability Expert Review
Usability Expert ReviewDataArt
 
Design Theory - Ankur Sharma - Presentation
Design Theory - Ankur Sharma - PresentationDesign Theory - Ankur Sharma - Presentation
Design Theory - Ankur Sharma - PresentationMobileNepal
 

What's hot (20)

Measuring UX
Measuring UXMeasuring UX
Measuring UX
 
Usability engineering
Usability engineeringUsability engineering
Usability engineering
 
Usability Primer - for Alberta Municipal Webmasters Working Group
Usability Primer - for Alberta Municipal Webmasters Working GroupUsability Primer - for Alberta Municipal Webmasters Working Group
Usability Primer - for Alberta Municipal Webmasters Working Group
 
10 principles of interaction design
10 principles of interaction design10 principles of interaction design
10 principles of interaction design
 
Neison,s Heuristic Examples
Neison,s Heuristic ExamplesNeison,s Heuristic Examples
Neison,s Heuristic Examples
 
Usability Presentation
Usability PresentationUsability Presentation
Usability Presentation
 
Designing Inclusive Experiences to Maximize Reach and Satisfaction
Designing Inclusive Experiences to Maximize Reach and SatisfactionDesigning Inclusive Experiences to Maximize Reach and Satisfaction
Designing Inclusive Experiences to Maximize Reach and Satisfaction
 
Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009
 
Web a11y beyond guidelines
Web a11y beyond guidelinesWeb a11y beyond guidelines
Web a11y beyond guidelines
 
User interface design for people with special needs
User interface design for people with special needsUser interface design for people with special needs
User interface design for people with special needs
 
Hci lec 5,6
Hci lec 5,6Hci lec 5,6
Hci lec 5,6
 
The 10 Golden Usability Heuristics (Montreal Girl Geeks September 2014)
The 10 Golden Usability Heuristics (Montreal Girl Geeks September 2014)The 10 Golden Usability Heuristics (Montreal Girl Geeks September 2014)
The 10 Golden Usability Heuristics (Montreal Girl Geeks September 2014)
 
Usability
UsabilityUsability
Usability
 
Summary Guidelines
Summary GuidelinesSummary Guidelines
Summary Guidelines
 
Heuristic Analysis - PBS Newshour Website
Heuristic Analysis - PBS Newshour WebsiteHeuristic Analysis - PBS Newshour Website
Heuristic Analysis - PBS Newshour Website
 
UX Usability Heuristics
UX Usability HeuristicsUX Usability Heuristics
UX Usability Heuristics
 
RBC Royal Bank : An Accessibility Evaluation & Recommendations
RBC Royal Bank : An Accessibility Evaluation & RecommendationsRBC Royal Bank : An Accessibility Evaluation & Recommendations
RBC Royal Bank : An Accessibility Evaluation & Recommendations
 
How To Be Rich With Smalltalk
How To Be Rich With SmalltalkHow To Be Rich With Smalltalk
How To Be Rich With Smalltalk
 
Usability Expert Review
Usability Expert ReviewUsability Expert Review
Usability Expert Review
 
Design Theory - Ankur Sharma - Presentation
Design Theory - Ankur Sharma - PresentationDesign Theory - Ankur Sharma - Presentation
Design Theory - Ankur Sharma - Presentation
 

Similar to Megan McKeever - design

Heuristic principles
Heuristic principlesHeuristic principles
Heuristic principlesSwathy Tantry
 
HCI Unit 3.pptx
HCI Unit 3.pptxHCI Unit 3.pptx
HCI Unit 3.pptxRaja980775
 
Design process design rules
Design process  design rulesDesign process  design rules
Design process design rulesPreeti Mishra
 
Ten Usability Heuristics by Jakob Nielsen.pptx
Ten Usability Heuristics by Jakob Nielsen.pptxTen Usability Heuristics by Jakob Nielsen.pptx
Ten Usability Heuristics by Jakob Nielsen.pptxsharmiladevi941
 
Neilsen Design heuristics
Neilsen Design heuristicsNeilsen Design heuristics
Neilsen Design heuristicsHafizMImran1
 
The 10 Usability Commandments
The 10 Usability CommandmentsThe 10 Usability Commandments
The 10 Usability Commandmentssytnik
 
Usability, Accessibility, and Design Evaluation
Usability, Accessibility, and Design EvaluationUsability, Accessibility, and Design Evaluation
Usability, Accessibility, and Design EvaluationDamian T. Gordon
 
User Experience & Design…Designing for others…UED
User Experience & Design…Designing for others…UEDUser Experience & Design…Designing for others…UED
User Experience & Design…Designing for others…UEDPreeti Chopra
 
Top 10 jakob nielsen’s phenomenal rules of uiux design for 2022
Top 10 jakob nielsen’s phenomenal rules of uiux design for 2022Top 10 jakob nielsen’s phenomenal rules of uiux design for 2022
Top 10 jakob nielsen’s phenomenal rules of uiux design for 2022Cogniter Technologies
 
Usability Engineering General guidelines
Usability Engineering General guidelinesUsability Engineering General guidelines
Usability Engineering General guidelinesREHMAT ULLAH
 
User Experience Design - Designing for others
User Experience Design - Designing for othersUser Experience Design - Designing for others
User Experience Design - Designing for othersBART RADKA
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAAiman Hud
 
Usability Heuristics
Usability HeuristicsUsability Heuristics
Usability HeuristicsOvidiu Von M
 
Usability Essentials to Know
Usability Essentials to KnowUsability Essentials to Know
Usability Essentials to KnowPravin Mehta
 
Wikis in EFL: unrealised potential
Wikis in EFL: unrealised potentialWikis in EFL: unrealised potential
Wikis in EFL: unrealised potentialRick
 
Usability of UI Design (motivation, heuristics, tools)
Usability of UI Design (motivation, heuristics, tools)Usability of UI Design (motivation, heuristics, tools)
Usability of UI Design (motivation, heuristics, tools)Oleksii Prohonnyi
 
Evaluating User Interfaces
Evaluating User InterfacesEvaluating User Interfaces
Evaluating User InterfacesNancy Jain
 

Similar to Megan McKeever - design (20)

Heuristic principles
Heuristic principlesHeuristic principles
Heuristic principles
 
Concept Presentation
Concept PresentationConcept Presentation
Concept Presentation
 
HCI Unit 3.pptx
HCI Unit 3.pptxHCI Unit 3.pptx
HCI Unit 3.pptx
 
Design process design rules
Design process  design rulesDesign process  design rules
Design process design rules
 
Ten Usability Heuristics by Jakob Nielsen.pptx
Ten Usability Heuristics by Jakob Nielsen.pptxTen Usability Heuristics by Jakob Nielsen.pptx
Ten Usability Heuristics by Jakob Nielsen.pptx
 
Neilsen Design heuristics
Neilsen Design heuristicsNeilsen Design heuristics
Neilsen Design heuristics
 
The 10 Usability Commandments
The 10 Usability CommandmentsThe 10 Usability Commandments
The 10 Usability Commandments
 
10 Usability Heuristics explained
10 Usability Heuristics explained10 Usability Heuristics explained
10 Usability Heuristics explained
 
Usability, Accessibility, and Design Evaluation
Usability, Accessibility, and Design EvaluationUsability, Accessibility, and Design Evaluation
Usability, Accessibility, and Design Evaluation
 
User Experience & Design…Designing for others…UED
User Experience & Design…Designing for others…UEDUser Experience & Design…Designing for others…UED
User Experience & Design…Designing for others…UED
 
Top 10 jakob nielsen’s phenomenal rules of uiux design for 2022
Top 10 jakob nielsen’s phenomenal rules of uiux design for 2022Top 10 jakob nielsen’s phenomenal rules of uiux design for 2022
Top 10 jakob nielsen’s phenomenal rules of uiux design for 2022
 
Usability Engineering General guidelines
Usability Engineering General guidelinesUsability Engineering General guidelines
Usability Engineering General guidelines
 
User Experience Design - Designing for others
User Experience Design - Designing for othersUser Experience Design - Designing for others
User Experience Design - Designing for others
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIA
 
Usability Heuristics
Usability HeuristicsUsability Heuristics
Usability Heuristics
 
Usability Essentials to Know
Usability Essentials to KnowUsability Essentials to Know
Usability Essentials to Know
 
BuildETH
BuildETHBuildETH
BuildETH
 
Wikis in EFL: unrealised potential
Wikis in EFL: unrealised potentialWikis in EFL: unrealised potential
Wikis in EFL: unrealised potential
 
Usability of UI Design (motivation, heuristics, tools)
Usability of UI Design (motivation, heuristics, tools)Usability of UI Design (motivation, heuristics, tools)
Usability of UI Design (motivation, heuristics, tools)
 
Evaluating User Interfaces
Evaluating User InterfacesEvaluating User Interfaces
Evaluating User Interfaces
 

Megan McKeever - design

  • 1. Usability and Design MEGAN MCKEEVER INFORMATION CULTURE OCTOBER 22, 2012
  • 2. Design v. Usability: Who will win?  Many graphic/web designers cringe when they hear the words accessibility and usability, but I think there can be a happy meeting ground.  There are small things that can be changed to make a site more usable and easier to navigate that won’t overhaul or disrupt design.
  • 3. Hyperlinks  Make clickable buttons large enough to click. Elderly users or people with mobility issues may have trouble clicking small targets.
  • 4. Titles and Headers  Uses page titles and headers and make them count  Page titles should be fairly concise and explain what the user can find on each page  DON’T use your web address in a page title  DON’T use a filename  DON’T use a one-word title, i.e.  DO use context, i.e. Lilly’s Vineyard – Wine Tasting Reservations – Finger Lakes, NY  This will allow users to quickly figure out if they are in the right place
  • 5. Be Consistent  Consistency and standards - Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions. (Nielsen)  Make colors consistent as well. If the previous screen has a green continue button, don’t make the next one purple.  Use plain language.
  • 6. Give Feedback  Keep users informed of what is going on. Was their upload successful? Did you receive their applications?
  • 7. Don’t require registration …  At least not immediately.  User participation is affected by the number of barriers on your site.  When you force users to log-in, you may lock away features that don’t really need user identification  Pixlr
  • 8. Once you need users to register  Keep it short and simple. Long registration forms may drive away users.  Ask only for the information you need.  You can always give users the option to update their profile once they are a member.  Don’t include optional items in the form. Users may not notice the un-asterisked lines and think it is all required.
  • 9. Recognition vs. Recall  “Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.”
  • 10. For additional Info: Check out Nielsen’s 10 Usability Heuristics  Visibility of system status The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.  Match between system and the real world The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.  User control and freedom Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.  Consistency and standards Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.  Error prevention Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.  Recognition rather than recall Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.  Flexibility and efficiency of use Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.  Aesthetic and minimalist design Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.  Help users recognize, diagnose, and recover from errors Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.  Help and documentation Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information