Navigation and Presentation Design Peter Dolog dolog at

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

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

Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

Navigation Design Principles

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Navigation Design Techniques

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

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

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

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

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

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

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

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

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

Presentation design techniques

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

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

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

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

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

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

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

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

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

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

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

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

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