(From uie.com’s All You Can Learn video library, subscription required. Posted in 2011 hence the image quality isn’t great)
Application maps help you visualize a site’s architecture
Applications maps vary from site maps:
- They aren’t hierarchical
- They don’t map out the existing nav structure
- They avoid all the messiness of connecting lines that cross over etc
- They are easier to read at a glance
- Color/shape can visually call out actions or functionalities: create, edit etc
Application maps help you:
- Quickly become familiar w app
- Find missing screens
- Locate inconsistencies
- Capture task flows, not nav flows
Hagan used the WordPress CMS c. 2011 for her examples. They hold lots of complex functionality in an interesting way
Hubs
- A list of things to manage
- If there’s a table grid or list, it’s probably a hub
- Dashboards are hubs but don’t usually have spokes, they link to other hubs
- Usually object centered, surrounded by verbs – but not always!
Spokes
- Task based – Create, import, export, edit etc
- Often have Ok Cancel buttons
- Spoke screens can have complex tasks, even subtasks
- Only try to represent major spokes in your first pass, adding a “+ More” note when you aren’t capturing every action
Dashboards
Generally dashboards contain links to hubs
Quick post: a small spoke functionality added to this dashboard
Settings
FYI: In 2018, WordPress’ interface is far cleaner:
About Hagan (from uie.com): With 23 years of experience in designing user interfaces for organizations such as Sun Microsystems and Netscape, Hagan has a comprehensive answer to the question, “How can I simplify this chaotic UI?”
Hagan is an expert on the what, why, and how of good (and bad) interface design for complex interactions. Since founding Two Rivers Consulting, she’s been answering her calling to design beautiful and useful dashboards for companies worldwide. And after this seminar, you’ll be well on your way to doing the same.
Plus, before the session, you can check out her info-packed UIE podcast, “Simplifying Complex Interactions,” or follow her on Twitter @haganrivers.