Usability: Structure, Content, Accessibility

1. Human—Computer
Interaction
03: Usability

3. Guide your users by using:
— hierarchy
— order
— choice

5. I. Structure

6. 1. Information Architecture
— Define key information topics
— Group the topics to form a few
main themes
— Set priorities

8. 2. Interface Flow
— Define typical user stories
— Define key functional and
information modules
— Order the modules according to user flow
— Set priorities

10. 3. Product Structure
— Define the atomic elements that make up
the product (screens, pages etc)
— Order the elements according to user flow
and logical links between them
— Set priorities

12. II. Navigation

13. 1. Menu (Main Navigation)
— Shows the main categories
— Short (up to 5–7 elements)
or with a visible structure

15. 2. Secondary Navigation
— Footer
— Links
— Secondary menu
(example: focused on user group)

17. 3. Search
— Don’t do it if you can’t do it well

19. 4. Action buttons
— Choose one main functionality per module
— Need to be consistent throughout
the product

21. 4. Shortcuts
— Guide the user
— Visible at specific moments
— Up to 5 elements

23. III. Content

24. WCAG (Web Content Accessibility Guidelines)
— Perceivable
— Operable
— Understandable
— Robust

25. Cost
20% or more

26. — clear and meaningful content
— clear content structure and hierarchy
— typography: contrast / legibility / size
— well structured html
— alternatives for audio, video and images
— responsive
— intuitive navigation (touch, mouse, keyboard)

37. 1. Layout
— Use a grid
— Watch out for banner blindness
— ATF is BS: go with the user flow

45. 1. Color
— Contrast calculator
— You will NEVER please everyone

46. 1. Typography
— Use legible body typography
— Not too many typefaces (safe bet: 1 or 2)
— Good body size: 16 px
— Check contrast
— Responsive sizes

47. 1. Visual content
— Icons: up to 5, very clear meaning
Good for returning users
— Illustrations

49. 1. Verbal content
— Microcopy
— Short text
— Clear headings