Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Visual Hierarchy in a Mobile Design World


Published on

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.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Visual Hierarchy in a Mobile Design World

  1. 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. 2. What’s this presentation about?
  3. 3. • Learn about visual hierarchy • Discuss “the problem” • Identify tactics to solve “the problem”
  4. 4. What’s hierarchy?
  5. 5. – Ellen Lupton and Jennifer Cole Phillips excerpt from, “Graphic Design: The New Basics” ©2015 Adams Media. “Hierarchy is the order of importance…”
  6. 6. What’s visual hierarchy?
  7. 7. Founded in Gestalt Psychology
  8. 8. • Developed by Max Wertenheimer • 5 “laws” • Helps explain how humans perceive organization
  9. 9. –Kurt Koffka (contemporary of Weternheimer) “…the whole is different from the sum of its parts.”
  10. 10. What defines visual hierarchy?
  11. 11. – 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.
  12. 12. Examples
  13. 13. Fantastic Mr. Fox (2009) Directed by Wes Anderson ©2009 Twentieth Century Fox Home Entertainment
  14. 14. ©2009 Twentieth Century Fox Home Entertainment
  15. 15. Grand Budapest Hotel (2014) Directed by Wes Anderson ©2014 Twentieth Century Fox Home Entertainment
  16. 16. ©2014 Twentieth Century Fox Home Entertainment
  17. 17.
  18. 18. So, what’s “the problem”?
  19. 19. 3 areas: Content Priority Cognitive Load Design Constraint
  20. 20. Content Priority
  21. 21. • Lots of content needs from many campus stakeholders • Everyone wants their content on the homepage • “Enrollment-driven” eclipses everything else
  22. 22. Cognitive Load
  23. 23. • 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
  24. 24. Design Constraint
  25. 25. • 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
  26. 26. How do we bridge the gap?
  27. 27. Visual Hierarchy!
  28. 28. But how?
  29. 29. 3 Tactics
  30. 30. 1. Study your site
  31. 31. • 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
  32. 32. 2. Find out what’s important
  33. 33. • 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
  34. 34. 3. Design for the user
  35. 35. • Remove what your user doesn’t need • Create consistency with how your content is presented • Use task-based navigation
  36. 36. Final Thoughts
  37. 37. Thank You.
  38. 38. Questions?