Difference between revisions of "UX Overview"

From GWAVA Technologies Training
Jump to: navigation, search
(Designing for Accessiblity)
(Examples)
 
(17 intermediate revisions by one user not shown)
Line 1: Line 1:
The User Experience is more than just what it looks like but how it works.  
+
The User Experience (UX) is more than just what it looks like but how it works.  
  
The [[Journey Maps]] process helps us clarify who wants the feature, what they are trying to do, why they are trying to do it.  
+
We handle large amounts of customer data and losing the data can have severe business consequences for them and for us.  
  
[https://www.nngroup.com/articles/first-impressions-human-automaticity/ First Impressions Matter: How Designers Can Support Humans’ Automatic Cognitive Processing ]
+
==Examples==
  
==User Persona Design==
+
If you think UX isn't important:
[https://www.nngroup.com/articles/computer-skill-levels/ The Distribution of Users’ Computer Skills]. There are four levels of technological proficiency users show when interacting with software.
+
* “Below Level 1” = 14% of Adult Population. Can do basic tasks. for example: Select the obvious button: Send, or Delete.
+
* Level 1 = 29% of Adult Population. Can reason out and do multi-step tasks. For example: find all emails from John Smith.
+
* Level 2 = 26% of Adult Population. Can handle more abstract but well-defined tasks. For example:  “You want to find a sustainability-related document that was sent to you by John Smith in October last year.”
+
* Level 3 = 5% of Adult Population. Can handle highly abstract and ill-defined tasks. For example: “You want to know what percentage of the emails sent by John Smith last month were about sustainability.”
+
* Can’t Use Computers = 26% of Adult Population. This is learned helplessness, they learned that they couldn't use computers from very badly designed programs.
+
  
==Designing for Accessiblity==
+
*[https://twitter.com/CivilBeat/status/953127542050795520 This is the screen that set off the ballistic missile alert on Saturday] see also [https://news.ycombinator.com/item?id=16157798]
Something to be aware of is that users are often limited in some way. It might be needing glasses or having carpel tunnel syndrome. There are quick notes on [https://accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on-designing-for-accessibility/ accessible design] that make the UX easier for everyone.
+
*[https://medium.com/tragic-design/how-bad-ux-killed-jenny-ef915419879e How Bad UX Killed Jenny]
 +
*[http://www.asktog.com/columns/027InterfacesThatKill.html When Interfaces Kill: What Really Happened to John Denver]
 +
*[https://blog.codinghorror.com/the-opposite-of-fitts-law/ The Opposite of Fitts' Law]
 +
*[http://epmonthly.com/article/not-heroes-wear-capes-one-las-vegas-ed-saved-hundreds-lives-worst-mass-shooting-u-s-history/ How One Las Vegas ED Saved Hundreds of Lives After the Worst Mass Shooting in U.S. History]
 +
*[https://en.wikipedia.org/wiki/Therac-25 Therac-25 software failure that killed people]
 +
*[http://www.cse.psu.edu/~gxt29/bug/softwarebug.html A list of software failures]
  
[http://blog.usabilla.com/how-to-design-for-color-blindness/ Designing for users with color blindness]
+
[http://www.ganssle.com/tem/tem345.html#article2 A Fire Code for Software?] There isn't a fire code for software yet, but there will be eventually.
*    Use both colors and symbols
+
*    Keep it minimal
+
*    Use patterns and textures to show contrast
+
*    Be careful with contrasting colors and hues
+
*    Avoid certain color combinations that are difficult to distinguish
+
*    Test page in different filters [https://www.toptal.com/designers/colorfilter].
+
  
Designing for users with low vision
+
==Estimation==
*    use good contrasts and a readable font size
+
[http://thecontentwrangler.com/2017/09/15/how-to-estimate-the-impact-of-business-decisions-on-content-teams/# How To Estimate The Impact of Business Decisions]
*    publish all information on web pages (HTML)
+
*    use a combination of colour, shapes and text
+
*    follow a linear, logical layout -and ensure text flows and is visible when text is magnified to 200%
+
*    put buttons and notifications in context
+
  
Designing for users with physical or motor disabilities
+
==UX Mapping Methods==
*    make large clickable actions
+
There are four kinds of [https://www.nngroup.com/articles/ux-mapping-cheat-sheet/?utm_source=Alertbox&utm_campaign=96e9850de9-UX_Mapping_Brutalism_Antidesign_2017_11_06&utm_medium=email&utm_term=0_7f29a2b335-96e9850de9-40376129 User Experience mapping techniques]:
*   give form fields space
+
 
*   design for keyboard or speech only use
+
* [https://www.nngroup.com/articles/empathy-mapping/ Empathy mapping]
*   design with mobile and touchscreen in mind
+
* Customer journey mapping
*   provide shortcuts
+
* Experience mapping
 +
* Service blueprinting
 +
 
 +
==Journey Maps==
 +
The [[Journey Maps]] process helps us clarify who wants the feature, what they are trying to do, why they are trying to do it.
 +
 
 +
==Design==
 +
 
 +
[https://www.nngroup.com/articles/first-impressions-human-automaticity/ First Impressions Matter: How Designers Can Support Humans’ Automatic Cognitive Processing ]
  
Designing for users of screen readers
+
[https://developers.google.com/web/tools/chrome-user-experience-report/ Chrome User Experience Report] A useful resource for user experience in the real world.
*    describe images and provide transcripts for video
+
*    follow a linear, logical layout
+
*    structure content using HTML5
+
*    build for keyboard use only
+
*    write descriptive links and heading - for example, Contact us
+
  
Designing for users who are deaf or hard of hearing
+
[https://accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on-designing-for-accessibility/ Dos and don'ts on designing for accessibility] 6 posters to make designing for accessibility easy.
*    write in plain English
+
*    use subtitles or provide transcripts for video
+
[http://www.ganssle.com/tem/tem345.html#article2 A Fire Code for Software?] Is it safe?
*    use a linear, logical layout
+
*    break up content with sub-headings, images and videos
+
*    let users ask for their preferred communication support when booking appointments
+
  
Designing for users with dyslexia
+
==Checklists==
*    use images and diagrams to support text
+
Much of what we do is complex, done rarely or both. Something that helps is a checklist Some people are taking a long time to learn how powerful they are.
*   align text to the left and keep a consistent layout
+
*[https://www.newyorker.com/magazine/2007/12/10/the-checklist The Checklist (New Yorker 2007)]
*    consider producing materials in other formats (for example, audio and video)
+
*[http://toyotadriverseat.com/community/tssc-childrens-hospitals.htm TPS for the Children 2017]
*   keep content short, clear and simple
+
Notice these are both dealing with the exact same problem a decade apart. Let's try to do better.
*    let users change the contrast between background and text
+
  
Designing for users on the autistic spectrum
+
==Writing Requirements==
*   use simple colours
+
From [http://www.ganssle.com/tem/tem343.html The Embedded Muse 343]
*   write in plain English
+
Writing good requirements is vital, and should include the following characteristics:
*   use simple sentences and bullets
+
*Atomic: it describes just one thing.
*   make buttons descriptive - for example, Attach files
+
*Complete: it has everything you need to implement the requirement.
*   build simple and consistent layouts
+
*Concise: It should be simple and clear to anyone reading it, what is to be accomplished.
 +
*Consistent: Use the same terminology throughout the specification.
 +
*Correct: It should be appropriate to the system not just a cut&paste from somewhere else.
 +
*Implementation free: Define what should be done, not how.
 +
*Necessary: Why is it important?
 +
*Traceable: How will it be tracked so development, QA and support will know where the feature came from.
 +
*Unambiguous: Is it clear enough that there is only one way it can be interpreted (this is very hard).
 +
*Verifiable: What does success look like?
 +
*Viable: Will it actually improve the system?

Latest revision as of 17:28, 19 March 2018

The User Experience (UX) is more than just what it looks like but how it works.

We handle large amounts of customer data and losing the data can have severe business consequences for them and for us.

Contents

[edit] Examples

If you think UX isn't important:

A Fire Code for Software? There isn't a fire code for software yet, but there will be eventually.

[edit] Estimation

How To Estimate The Impact of Business Decisions

[edit] UX Mapping Methods

There are four kinds of User Experience mapping techniques:

  • Empathy mapping
  • Customer journey mapping
  • Experience mapping
  • Service blueprinting

[edit] Journey Maps

The Journey Maps process helps us clarify who wants the feature, what they are trying to do, why they are trying to do it.

[edit] Design

First Impressions Matter: How Designers Can Support Humans’ Automatic Cognitive Processing

Chrome User Experience Report A useful resource for user experience in the real world.

Dos and don'ts on designing for accessibility 6 posters to make designing for accessibility easy.

A Fire Code for Software? Is it safe?

[edit] Checklists

Much of what we do is complex, done rarely or both. Something that helps is a checklist Some people are taking a long time to learn how powerful they are.

Notice these are both dealing with the exact same problem a decade apart. Let's try to do better.

[edit] Writing Requirements

From The Embedded Muse 343 Writing good requirements is vital, and should include the following characteristics:

  • Atomic: it describes just one thing.
  • Complete: it has everything you need to implement the requirement.
  • Concise: It should be simple and clear to anyone reading it, what is to be accomplished.
  • Consistent: Use the same terminology throughout the specification.
  • Correct: It should be appropriate to the system not just a cut&paste from somewhere else.
  • Implementation free: Define what should be done, not how.
  • Necessary: Why is it important?
  • Traceable: How will it be tracked so development, QA and support will know where the feature came from.
  • Unambiguous: Is it clear enough that there is only one way it can be interpreted (this is very hard).
  • Verifiable: What does success look like?
  • Viable: Will it actually improve the system?
Personal tools
Namespaces

Variants
Actions
Home
Exchange
GroupWise
JAVA
Linux
MTK
Retain
GW Monitoring and Reporting (Redline)
GW Disaster Recovery (Reload)
GW Forensics (Reveal)
GWAVA
Secure Messaging Gateway
GW Mailbox Management (Vertigo)
Windows
Other
User Experience
Toolbox
Languages
Toolbox