Visual hierarchy is a cornerstone for all design disciplines and describes how humans interact and perceive content across all mediums. As digital designers, it is our responsibility to design interfaces and experiences that help communicate the content our users are looking for. Mobile screens present unique challenges to applying visual hierarchy concepts, especially when viewed through the lens of responsive design and progressive enhancement. This presentation will explore tactics that can be employed to help bridge the gap between design constraint and content priority, as well as discuss the role visual hierarchy should play when designing for all digital screens.

1. Visual Hierarchy in a
Mobile Design World
Waylon Baumgardner
Director of Web Applications Development
California Baptist University
HighEdWeb Annual Conference - Sacramento, CA
October 23, 2018
@waylonrobert

2. What’s this presentation about?

3. • Learn about visual hierarchy
• Discuss “the problem”
• Identify tactics to solve “the problem”

4. What’s hierarchy?

5. – Ellen Lupton and Jennifer Cole Phillips
excerpt from, “Graphic Design: The New Basics” ©2015 Adams
Media.
“Hierarchy is the order of importance…”

6. What’s visual hierarchy?

7. Founded in Gestalt Psychology

8. • Developed by Max Wertenheimer
• 5 “laws”
• Helps explain how humans perceive
organization

10. –Kurt Koffka
(contemporary of Weternheimer)
“…the whole is different from the sum of its
parts.”

12. What defines visual hierarchy?

13. – Pete Faraday
“… the order in which information is
communicated to a user.”
Faraday, P., "Visually Critiquing Web Pages", Proceedings of the 6th Conference on Human Factors the Web, 2000, pp. 1-12.

14. Examples

17. Fantastic Mr. Fox (2009)
Directed by Wes Anderson
https://www.imdb.com/title/tt0432283/ ©2009 Twentieth Century Fox Home Entertainment

18. ©2009 Twentieth Century Fox Home Entertainment

19. Grand Budapest Hotel (2014)
Directed by Wes Anderson
https://www.imdb.com/title/tt2278388/ ©2014 Twentieth Century Fox Home Entertainment

20. ©2014 Twentieth Century Fox Home Entertainment

23. https://www.nasa.gov/content/space-station-flight-control-room

27. So, what’s “the problem”?

28. 3 areas:
Content Priority
Cognitive Load
Design Constraint

29. Content Priority

30. • Lots of content needs from many campus
stakeholders
• Everyone wants their content on the
homepage
• “Enrollment-driven” eclipses everything
else

31. Cognitive Load

32. • If there’s too much to process, the brain
struggles
• If it’s too hard to find, it won’t be found
• The way information is presented
matters

33. Design Constraint

34. • Finite screen space to work with
• Vendor products dictate what we can
and can’t do
• Websites are messy because of
governance issues and/or stale content

35. How do we bridge the gap?

36. Visual Hierarchy!

37. But how?

38. 3 Tactics

39. 1. Study your site

40. • Take a screenshot of a page on mobile and on
desktop screens, then blur them
• What do you see? Where do your eyes go? Can you
identify where important information should go?
• Ask other users what they see
• Record the results

45. 2. Find out what’s important

46. • Catalog entire website’s content
• Review analytics to find out where users
are going (and not going)
• Develop and measure user tasks
• Perform usability testing on those tasks

47. 3. Design for the user

48. • Remove what your user doesn’t need
• Create consistency with how your
content is presented
• Use task-based navigation

49. Final Thoughts

50. Thank You.

51. Questions?