1. Navigation and Presentation Design Peter Dolog dolog [at] cs [dot] aau [dot] dk 2.2.05 Intelligent Web and Information Systems October 7, 2010

2. Outline Navigation design principles Navigation design techniques Presentation design techniques Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

9. Navigation Design Principles

10. Navigation Navigation in the web application concerns mostly the hints the users are provided with in order to move from one page to another or in general from one goal to another. In the most simplest view it concerns how to link the pages of your web application Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

11. Step Navigation Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

12. Paging Navigation Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

13. Breadcrumb Trail or Navigation - Path Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

14. Breadcrumb Trail or Navigation - Attribute Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

15. Tree Navigation Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

16. Site Maps Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

17. Directories Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

18. Tag Clouds Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

19. Navigating from tag ”software” on previous page Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

20. A-Z index Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

21. Navigation Bars and Menus Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

22. Vertical Menu Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

23. Dynamic Menu Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

24. Drop Down Menu Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

25. Properties to think of To pursue to follow Visual clarity Appropriateness for type of site Aligning with user needs Breath vs. Depth Ease of learning Consistency vs. Inconsistency Feedback to user Efficiency Clear Labels Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

26. Design Peter Dolog, Web Engineering 2010, Navigation and Presentation Design © Springer, Web Applications Engineering 2009

27. Navigation Design Techniques

28. Navigation Views Peter Dolog, Web Engineering 2010, Navigation and Presentation Design © Springer, Web Applications Engineering 2009

29. Navigation Schema Peter Dolog, Web Engineering 2010, Navigation and Presentation Design © Springer, Web Applications Engineering 2009

30. In context class Peter Dolog, Web Engineering 2010, Navigation and Presentation Design © Springer, Web Applications Engineering 2009

31. WebML Hypertext Schema Peter Dolog, Web Engineering 2010, Navigation and Presentation Design © Springer, Web Applications Engineering 2009

32. UML Guide Peter Dolog, Web Engineering 2010, Navigation and Presentation Design © Springer, Web Applications Engineering 2009

33. Concurrent presentation Peter Dolog, Web Engineering 2010, Navigation and Presentation Design © Springer, Web Applications Engineering 2009

34. Collections and Interfaces Peter Dolog, Web Engineering 2010, Navigation and Presentation Design © Springer, Web Applications Engineering 2009

35. Interaction between objects and collections Peter Dolog, Web Engineering 2010, Navigation and Presentation Design © Springer, Web Applications Engineering 2009

36. Navigation Context Pattern Peter Dolog, Web Engineering 2010, Navigation and Presentation Design © Springer, Web Applications Engineering 2009

37. Presentation design techniques

38. Presentation Peter Dolog, Web Engineering 2010, Navigation and Presentation Design © Springer, Web Applications Engineering 2009

39. Abstract Widgets Design Peter Dolog, Web Engineering 2010, Navigation and Presentation Design © Springer, Web Applications Engineering 2009

40. Interaction Spaces Peter Dolog, Web Engineering 2010, Navigation and Presentation Design © Springer, Web Applications Engineering 2009

41. ADV Views Peter Dolog, Web Engineering 2010, Navigation and Presentation Design © Springer, Web Applications Engineering 2009

42. Presentation Peter Dolog, Web Engineering 2010, Navigation and Presentation Design © Springer, Web Applications Engineering 2009

43. Concrete Presentation Object Peter Dolog, Web Engineering 2010, Navigation and Presentation Design © Springer, Web Applications Engineering 2009

44. Pages and Models Peter Dolog, Web Engineering 2010, Navigation and Presentation Design © Springer, Web Applications Engineering 2009

45. Pages and Components Peter Dolog, Web Engineering 2010, Navigation and Presentation Design © Springer, Web Applications Engineering 2009

46. Architecture Peter Dolog, Web Engineering 2010, Navigation and Presentation Design © Springer, Web Applications Engineering 2009

47. Web Components Architecture Peter Dolog, Web Engineering 2010, Navigation and Presentation Design © Springer, Web Applications Engineering 2009

48. Integration Model Peter Dolog, Web Engineering 2010, Navigation and Presentation Design © Springer, Web Applications Engineering 2009

49. WebML 4 RIA Peter Dolog, Web Engineering 2010, Navigation and Presentation Design © Springer, Web Applications Engineering 2009

50. UML Guide and RIA Peter Dolog, Web Engineering 2010, Navigation and Presentation Design © Springer, Web Applications Engineering 2009