Usability workshop held by Daniel Gore on 25.11.13. at Lillebealt Academy, Odense, Denmark

1. Usability Workshop
25.11.2013.!
EAL, DSR !
Daniel Gore

2. What is Usability?

3. Definition
"Usability is a quality attribute that assesses how
easy user interfaces are to use. The word "usability"
also refers to methods for improving ease-of-use
during the design process.”
Jakob Nielsen

4. •
Learnability: How easy is it for users to accomplish basic
tasks the first time they encounter the design?
•
Efficiency: Once users have learned the design, how quickly
can they perform tasks?
•
Memorability: When users return to the design after a period
of not using it, how easily can they reestablish proficiency?
•
Errors: How many errors do users make, how severe are
these errors, and how easily can they recover from the
errors?
•
Satisfaction: How pleasant is it to use the design?

5. •
Definition: Utility = whether it provides the
features you need.
•
Definition: Usability = how easy & pleasant
these features are to use.
•
Definition: Useful = usability + utility

6. •
Maps, info graphics
•
Special Books!
•
Houses, Factories, Malls!
•
Softwares, websites, apps

10. Why is usability
important?
•
Satisfied users are happier customers
•
Increasing productivity
•
Increasing profits
•
10% of the design budget = 2x sales increase

11. User Experience
"User experience" encompasses all aspects of
the end-user's interaction with the company, its
services, and its products.
•
Jakob Nielsen

12. Information Architecture
Information architecture (IA) is the art and
science of organising and labeling data
including: websites, intranets, online
communities, software, books and other
mediums of information, to develop usability and
structural aesthetics.
•
Wikipedia

13. Usability in the
development process

14. Ads
SEO
Usability
Content (IA)

16. Usability in the
development process
•
we can test our assumptions
•
we can measure our products
•
we can iterate on our products

17. Usability Principles

18. The 10 most general principles for interaction
design. They are called "heuristics" because they are
more in the nature of rules of thumb than specific
usability guidelines.We can measure our products
Heuristics for heuristic evaluation developed by
Jacob Nielsen and Rolf Molich in 1990
Nielsen refined it based on a factor analysis of 249
usability problems in 1994

19. 1. Visibility of system
status
The system should always keep users informed about
what is going on, through appropriate feedback
within reasonable time.

21. 2. 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.

24. 3. 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.

26. 4. Consistency and standards
!
!
Users should not have to wonder whether different
words, situations, or actions mean the same thing.
Follow platform conventions.

28. 5. 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.

30. 6. Recognition rather than
recall
Minimise 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.

32. 7. 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.

34. 8. 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.

36. 9. 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

39. 10. 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 should be easy to search, focused on the
user's task, list concrete steps to be carried out, and
not be too large.

41. Usability for
websites

42. Fitt's law
!
!
Predicts that the time required to rapidly move to a
target area is a function of the distance to the target
and the size of the target.
The bigger an object and the closer it is to us, the
easier it is to move to.

45. Hick's law
!
!
The time it takes for a person to make a decision as a
result of the possible choices he or she hasThe
bigger an object and the closer it is to us, the easier it
is to move to.
The more options, the more difficult to choose

47. Similarity
!
!
Elements with similar functions should be grouped
physically and visually.

49. Navigation
!
Use the logo as a link for navigating to the main
page.
!

50. Navigation
!
The user should always know where is he on the
website
!

51. Navigation
!
Links should be visually different and they should
speak for themselves
!

52. Readability
!
!
The text should be always readable
Try to highlight important informations for quicker
readers
Contrast, whitespace

54. Recommended reading
!
http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/
0321344758

55. Usability for mobile

56. Differences
!
!
Different place and way of usage
Smaller screen
Different screen sizes

59. What are they doing?
!
Searching for information (Google Maps)
!
Social media (Facebook)
Work (Email)
Communication (Messaging)
Spending free time (Angry Birds)

60. Mobile First / Mobile last
!
!

61. Content first
!
!
Concentrate on the content
Decrease navigation elements

63. Mobile usability
Bigger navigation elements (finger size)
Bigger whitespace between elements
No hover state
Instead of scroll, swipe
No physical feedback, visualise feedbacks

64. Hotspots

65. Mobile interfaces

66. Dashboard

67. Hamburger
menu

68. Tabs

69. Other approaches

70. Use the device!
GPS
Camera
Sensors
Navigation
Environment

71. One eye one thumb
!
!

72. Recommended reading
!
http://www.lukew.com/resources/mobile_first.asp

73. Information
Architecture

74. The structural design of shared information
environments.
The art and science of organizing and labeling web
sites, intranets, online communities, and software to
support findability and usability.
The combination of organization, labeling, search and
navigation systems within websites and intranets.

77. Structuring information
!
•
sequential!
!
•
hierarchical!
•
•
•
narrow and deep
broad and shallow
web or tag-based

78. 1.
2.
3.

84. Card sorting
!
•
Technique that helps us to organise information
!
•
We can test our users
•
Open, closed, hybrid

85. Card sorting is good for…
! Define sitemaps
•
•
Structures and hierarchies
•
Content categories
•
Product categories
•
On site
•
what should be in one place
•
Titles, names, tags

86. Tools to use
!
•
UX sort http://www.uxsort.com/
•
xSort http://www.xsortapp.com/
•
Simple Card Sort http://www.simplecardsort.com/

87. http://websort.net/s/AB7AF9/

88. •
Displays the frequency that cards are grouped together.

89. •
Shows the clustering of groups in a tree view.
http://en.wikipedia.org/wiki/Cluster_analysis

90. Recommended reading
!
http://practical-ia.com/

91. Prototyping

92. •
Define what do you want to test or present
•
Choose your tool based on this

95. !
Cost of
change
Alpha version
Prototype
Development Progress

96. •
Pop app https://popapp.in/
•
Flinto https://www.flinto.com/

98. •
•
Proto.iohttp://proto.io/
Codiqa https://codiqa.com/

99. •
Framer.js http://www.framerjs.com/
•
Bootstrap http://getbootstrap.com/
•
Foundation http://foundation.zurb.com/

100. Testing

101. Never stop asking questions
!
•
Measuring analytics can answer the what?
•
Usability research can answer for the why?
•
Combine analytical data with the UX research for
proper insights

102. Usability research types
!
•
Usability test
•
Observation
•
Field study
•
Interview
•
A/B or multivariate tests
•
Eye tracking

103. You can test on…
!
•
Existing website or app
•
Paper prototype
•
Wireframes or graphics
•
Interactive prototypes

104. Usability research
•
Use real life tasks (Book a ticket, Find someone)
•
Ask the participants to think loudly (“I think I should
click here to …”)
•
Start the test from a realistic environment (Google)

105. Some misbeliefs about
researches
•
People can tell you what they want
•
User research is expensive
•
People are rational
•
They click on the red buttons more often
•
You know what your users wants

106. Some rules for usability
researches
!

107. Don’t ask leading questions

108. Don’t ask if a feature would
ever be used

109. Don't ask open ended
questions

110. Stay neutral

112. A/B tests

114. Multivariate tests

115. https://usabilityhub.com/

116. Measuring

117. You can get answers for these
question by measuring you
websites
•
Where are they coming from?
•
What are they doing on my website?
•
When and where are they leaving it?

118. You can get answers for these
question by measuring you
websites
•
Content: What should be on the main page?
•
Structure: What kind of content should go into the
main menu point?
•
Do we need detailed search options?
•
Should we optimise our website for mobiles?

119. Analytics
•
Analytics can tell you what are your users, visitors
are doing but it cannot tell you why are they doing
it.

121. Google Analytics
•
Basic indicators
•
Conversions
•
Funnels
•
Integrate in multiple marketing channels

122. Recommended reading
!
http://www.advanced-web-metrics.com/

123. Thank You!
!
Questions?
!
http://twitter.com/gored!
hu.linkedin.com/in/gored/!
goredani@gmail.com!