1.
Navigation Design forComplex 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 ?

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

13.
Global navigation

14.
Global navigation

15.
Global navigation

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

17.
Local navigation

18.
Local navigation

19.
Local navigation

20.
Local navigation – Modal screen

21.
Local navigation – Modal screen

22.
Local navigation – Modal screen

23.
What about overlays?

24.
What about overlays?

25.
What about breadcrumbs?

26.
What about breadcrumbs?

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

28.
Dashboard navigation

29.
Dashboard navigation

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

31.
Courtesy statementThe application maps are inspired by andmade with the OmniGraffle template fromHagan Rivers.

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