Katelyn Vermeyen presented on usability heuristics, content guidelines, and mobile versus desktop design. She discussed Jacob Nielsen's 10 usability heuristics for UI design, including providing feedback, using familiar words, clearly marking exits, preventing problems, making objects available, allowing manipulation, ensuring all information is valuable, writing clear error messages, and creating helpful documentation. She emphasized the importance of content, designing for mobile with constraints, utilizing whitespace, and practicing empathy through personas.

1. Presented by Katelyn Vermeyen, UX Designer – February 16th, 2015

2. Usability heuristics Content guidelines
Patient-facing interfaces Mobile vs. desktop design

3. Heuristic = an expert’s opinion on the best way to do something
Broad rule of thumb – not a specific guideline
Jacob Nielsen’s 10 usability heuristics for UI design

5. Provide feedback for action in a reasonable amount of time.

6. Provide feedback for action in a reasonable amount of time.

7. Provide feedback for action in a reasonable amount of time.
Color change: good
Same verbiage: bad

8. Provide feedback for action in a reasonable amount of time.My suggestion: change to a check
mark icon for the terms “remind me”
Or keeping star icon, change to term
to favorite and store “favorites” on a
separate page.

9. Use words, phrases & concepts familiar to the user.
Register Sign In

10. Use words, phrases & concepts familiar to the user.
Register Sign In
Different verbiage

11. Use words, phrases & concepts familiar to the user.
Register Sign In
Different verbiage
Different style

12. Use words, phrases & concepts familiar to the user.
Register Sign In
Different verbiage
Different style
Different phrases

13. Use words, phrases & concepts familiar to the user.
Register Sign In
Different verbiage
Different style
Different phrases
Different syllables

14. Clearly mark an “emergency exit” – support undo/redo.
click to expand

15. Clearly mark an “emergency exit” – support undo/redo.
click to contract

16. Don’t confuse your user – keep
words & actions consistent.

17. Prevent problems from occurring with
confirmation messages.

18. Make objects & actions available.
Instructions should be visible.

19. Allow users to manipulate & personalize frequent actions.

20. All information should be valuable and relevant.

21. Error messages should be in plain language, indicate the
problem, and constructively suggest a solution.

23. Any help information
should be easy to
search, focused, list
concrete steps, and not
be too large.

25. Content is king.
Content is what users come for.
Content is what users want to access.
Design is nothing without content.

26. Content is king.
Content is what users come for.
Content is what users want to access.
Design is nothing without content.

27. People come for the content, but stay for good design.
Users are more likely to trust your content if it’s well-designed.

28. Clear & concise voice.
Keep it simple.
Make it useful.
An example of what not to do; vague, no
useful information, and annoying.

30. Be aware of cognitive biases.
Practice empathy.
You are not your user.

31. A way to empathize with and internalize the mindset of people
that will eventually use the software we design.
Take a walk in your users’ shoes.
More than one persona is best – try 3-4
(depending on project scope)

32. Name: Sam
Age: 37
Occupation:
Live musician

33. • Tech-
connected
• On-the-go
lifestyle
• Dad
• Wants to
access health
info quickly &
efficiently

35. “Mobile first”
Mobile is under extreme space & content constraints.
Constraints are good for design.
Responsive design > Static design

37. Bigger touch points are generally better
Leave enough space between touch points

38. “designing for
thumbs”
Large smartphones
have taken over!
More on Luke W.

39. Burger bar – becoming
less common
If <5 options, avoid burger
bar
(more interaction with nav bar)
Redbooth removed their burger menu out & saw session time jump 70%

40. More space = more whitespace
not always white

41. More space = more whitespace
Don’t overwhelm user with too
much information
Use color to call out important
information
(“call to action”)

42. More space = more whitespace
Don’t overwhelm user with too much information

43. More space = more whitespace
Don’t overwhelm user with too much information
call-to-action
whitespace
simple navigation
recommendations (less important) below

44. • Keep content clear & simple
• Content first will save you time – press for more content
• Set constraints
• You are not your user – practice empathy with personas
• Utilize white space
• Use color to encourage actions

46. • User Onboard – a breakdown of how popular apps/site onboard users
• Dribbble for design inspiration
• Persona – a photography project that’s helpful for developing personas
• A Book Apart series if you want some easy reading
• Design Review Podcast – UX principles applied to a UI review
• Something more specific? Ask me.
• Katelyn.Vermeyen@iatric.com