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

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

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 followVisual clarityAppropriateness for type of siteAligning with user needsBreath vs. DepthEase of learningConsistency vs. InconsistencyFeedback to userEfficiencyClear Labels

Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

Design

Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

© Springer, Web Applications Engineering 2009

Navigation Design Techniques

Navigation Views

Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

© Springer, Web Applications Engineering 2009

Navigation Schema

Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

© Springer, Web Applications Engineering 2009

In context class

Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

© Springer, Web Applications Engineering 2009

WebML Hypertext Schema

Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

© Springer, Web Applications Engineering 2009

UML Guide

Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

© Springer, Web Applications Engineering 2009

Concurrent presentation

Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

© Springer, Web Applications Engineering 2009

Collections and Interfaces

Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

© Springer, Web Applications Engineering 2009

Interaction between objects and collections

Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

© Springer, Web Applications Engineering 2009

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

Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

© Springer, Web Applications Engineering 2009

Interaction Spaces

Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

© Springer, Web Applications Engineering 2009

ADV Views

Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

© Springer, Web Applications Engineering 2009

Presentation

Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

© Springer, Web Applications Engineering 2009

Concrete Presentation Object

Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

© Springer, Web Applications Engineering 2009

Pages and Models

Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

© Springer, Web Applications Engineering 2009

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

Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

© Springer, Web Applications Engineering 2009

Integration Model

Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

© Springer, Web Applications Engineering 2009

WebML 4 RIA

Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

© Springer, Web Applications Engineering 2009

UML Guide and RIA

Peter Dolog, Web Engineering 2010, Navigation and Presentation Design

© Springer, Web Applications Engineering 2009