Navigation Design              forComplex Web Applications          Gino Lardon          IA Day Gent       February 11, 20...
Deliverables• Navigation requirements• Application map• Navigation design (IA + UI)
Hub vs. Spoke
Hub vs. Spoke
One-page form vs. Wizard
One-page form vs. Wizard
Horizontal vs. Vertical wizard
Wizard in a wizard ?
Wizard in a wizard ?
Hub in a wizard ?
Hub in a wizard ?
Navigation design•   Global•   Local•   Cross•   Dashboard
Global navigation
Global navigation
Global navigation
Navigation design•   Global•   Local•   Cross•   Dashboard
Local navigation
Local navigation
Local navigation
Local navigation – Modal screen
Local navigation – Modal screen
Local navigation – Modal screen
What about overlays?
What about overlays?
What about breadcrumbs?
What about breadcrumbs?
Navigation design•   Global•   Local•   Cross•   Dashboard
Dashboard navigation
Dashboard navigation
Other attention points•   Mental model vs. technical architecture•   User profiles•   Browser chrome•   Multi-device•   Mu...
Courtesy statementThe application maps are inspired by andmade with the OmniGraffle template fromHagan Rivers.
Thank you !Please feel free to contact me with any       questions and suggestions.              Gino Lardon              ...
Navigation Design for Complex Web Applications
Upcoming SlideShare
Loading in …5
×

Navigation Design for Complex Web Applications

10,806 views

Published on

Presentation about navigation design for complex web applications given on the Information Architecture Day in Ghent. Abstract available on http://www.ianua.be/blog/navigation-design-for-complex-web-applications.

Published in: Design, Technology, Sports
2 Comments
12 Likes
Statistics
Notes
No Downloads
Views
Total views
10,806
On SlideShare
0
From Embeds
0
Number of Embeds
1,353
Actions
Shares
0
Downloads
0
Comments
2
Likes
12
Embeds 0
No embeds

No notes for slide

Navigation Design for Complex Web Applications

  1. 1. Navigation Design forComplex Web Applications Gino Lardon IA Day Gent February 11, 2012 @glardon #ia2012gent #WIAD
  2. 2. Deliverables• Navigation requirements• Application map• Navigation design (IA + UI)
  3. 3. Hub vs. Spoke
  4. 4. Hub vs. Spoke
  5. 5. One-page form vs. Wizard
  6. 6. One-page form vs. Wizard
  7. 7. Horizontal vs. Vertical wizard
  8. 8. Wizard in a wizard ?
  9. 9. Wizard in a wizard ?
  10. 10. Hub in a wizard ?
  11. 11. Hub in a wizard ?
  12. 12. Navigation design• Global• Local• Cross• Dashboard
  13. 13. Global navigation
  14. 14. Global navigation
  15. 15. Global navigation
  16. 16. Navigation design• Global• Local• Cross• Dashboard
  17. 17. Local navigation
  18. 18. Local navigation
  19. 19. Local navigation
  20. 20. Local navigation – Modal screen
  21. 21. Local navigation – Modal screen
  22. 22. Local navigation – Modal screen
  23. 23. What about overlays?
  24. 24. What about overlays?
  25. 25. What about breadcrumbs?
  26. 26. What about breadcrumbs?
  27. 27. Navigation design• Global• Local• Cross• Dashboard
  28. 28. Dashboard navigation
  29. 29. Dashboard navigation
  30. 30. Other attention points• Mental model vs. technical architecture• User profiles• Browser chrome• Multi-device• Multi-language• …
  31. 31. Courtesy statementThe application maps are inspired by andmade with the OmniGraffle template fromHagan Rivers.
  32. 32. Thank you !Please feel free to contact me with any questions and suggestions. Gino Lardon @glardon www.iAnua.be

×