Designing interaction

1. Human—Computer
Interaction
04: Designing Interaction

3. user system

4. user system
WANTS
NEEDS
LIKES
GOALS
REQUIREMENTS
CAPABILITIES

5. I.The user…

6. Came with a speci
fi
c goal
— Is looking for speci
fi
c information
— Wants to perform a speci
fi
c action
— Wants to be entertained

7. Aims to optimize their cost–bene
fi
t ratio
— Is in a hurry
— Doesn’t care
— Is not paying attention
— Has a short attention span

9. II.The system

10. Is not there to please the user
— Wants to present speci
fi
c information
— Wants to enable a speci
fi
c action
(conversion)
— Wants to keep the user on the platform

12. Design the user
fl
ow

13. Guide your users by using:
— hierarchy
— order
— visual cues
— motion
— choice

14. Information

16. How to present information
— Short, in small chunks
— Start with important points
— Headings, subheadings, bold, lists
— Related content grouped visually

19. Narrative
fl
ow
— Guide the user through your content
— One main
fl
ow
— Options / choice used sparingly
as a means of boosting engagement

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

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

25. 3. Search
— Simple
— Advanced
— Don’t do it if you can’t do it well

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

29. 5. Shortcuts
— Guide the user
— Visible at speci
fi
c moments
— Up to 5 elements

31. Visual cues
— Icons: up to 5, very clear meaning
Good for returning users
— Illustrations, photos
Engage, focus attention

34. Engagement

35. Buttons & links
— Does the user know it’s clickable?
— Clear what it does
— Good copy is essential

39. Modal windows
1. Pop-up
— Blocks the interface
— Error
— Critical information, requires action
— Very important for the system

42. Modal windows
2. Banner
— Important, but not critical
— Action for the user

45. Modal windows
3. Snackbar
— Disappears
— Nice to know, but not really important

47. Input forms
— Clear labels that don’t disappear
— Tab button works
— Clear way to validate
— Errors shown near the problematic entry