The document discusses navigation design considerations for complex web applications. It covers different navigation patterns like hub vs spoke, one-page forms vs wizards, and horizontal vs vertical wizards. It also addresses different levels of navigation including global, local, cross-system, and dashboards. Additional topics include mental models vs technical architecture, user profiles, multi-device support, and internationalization. The presentation aims to provide guidance on navigation requirements, application mapping, and navigation design for information architecture and user interface.

1. Navigation Design
for
Complex Web Applications
Gino Lardon
IA Day Gent
February 11, 2012
@glardon #ia2012gent #WIAD

2. Deliverables
• Navigation requirements
• Application map
• Navigation design (IA + UI)

3. Hub vs. Spoke

4. Hub vs. Spoke

5. One-page form vs. Wizard

6. One-page form vs. Wizard

7. Horizontal vs. Vertical wizard

8. Wizard in a wizard ?

9. Wizard in a wizard ?

10. Hub in a wizard ?

11. Hub in a wizard ?

13. Navigation design
• Global
• Local
• Cross
• Dashboard

14. Global navigation

15. Global navigation

16. Global navigation

17. Navigation design
• Global
• Local
• Cross
• Dashboard

18. Local navigation

19. Local navigation

20. Local navigation

21. Local navigation – Modal screen

22. Local navigation – Modal screen

23. Local navigation – Modal screen

24. What about overlays?

25. What about overlays?

26. What about breadcrumbs?

27. What about breadcrumbs?

28. Navigation design
• Global
• Local
• Cross
• Dashboard

29. Dashboard navigation

30. Dashboard navigation

31. Other attention points
• Mental model vs. technical architecture
• User profiles
• Browser chrome
• Multi-device
• Multi-language
• …

32. Courtesy statement
The application maps are inspired by and
made with the OmniGraffle template from
Hagan Rivers.

33. Thank you !
Please feel free to contact me with any
questions and suggestions.
Gino Lardon
@glardon
www.iAnua.be