Navigation and Presentation Design Peter Dolog dolog [at] cs [dot] aau [dot] dk 2.2.05 Intelligent...

Navigation and Presentation Design

Peter Dologdolog [at] cs [dot] aau [dot] dk2.2.05Intelligent Web and Information SystemsOctober 7, 2010

Outline

Navigation design principlesNavigation design techniquesPresentation design techniques

Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

Navigation Design Principles

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


Step Navigation


Paging Navigation


Breadcrumb Trail or Navigation - Path


Breadcrumb Trail or Navigation - Attribute


Tree Navigation


Site Maps


Directories


Tag Clouds


Navigating from tag ”software” on previous page


A-Z index


Navigation Bars and Menus


Vertical Menu


Dynamic Menu


Drop Down Menu


Properties to think of

To pursue to followVisual clarityAppropriateness for type of siteAligning with user needsBreath vs. DepthEase of learningConsistency vs. InconsistencyFeedback to userEfficiencyClear Labels


Design


© Springer, Web Applications Engineering 2009

Navigation Design Techniques

Navigation Views



Navigation Schema



In context class



WebML Hypertext Schema



UML Guide



Concurrent presentation



Collections and Interfaces



Interaction between objects and collections



Navigation Context Pattern



Presentation design techniques

Presentation



Abstract Widgets Design



Interaction Spaces



ADV Views



Presentation



Concrete Presentation Object



Pages and Models



Pages and Components



Architecture



Web Components Architecture



Integration Model



WebML 4 RIA



UML Guide and RIA



Navigation and Presentation Design Peter Dolog dolog [at] cs [dot] aau [dot] dk 2.2.05 Intelligent...

Documents

Transcript of Navigation and Presentation Design Peter Dolog dolog [at] cs [dot] aau [dot] dk 2.2.05 Intelligent...