Sprint #41. Navigation2. Wireframes

Navigation is:

all design elements that guide the user to the content.

the way people getaround the site.

designed after IA

Let the user know where they are

Tell the user where they have been

Show the users where they are going

Create context Classify content. Use landing pages to gather

related content. Provide links to related content. Be consistent in classification.

Which website am I on?

Where am I?

What are the main sections (global navigation)?

Where can I search?

What are my possibilities on this level (local navigation)?What is my context?

Designing navigation

4Revise

Does it fit with the strategy, content and IA. Tweak the navigation.

3Then to the homepageCommunicate who the company is, highlight particular content, allow people to navigate

2Next - the pages that link to content pagesWhat may link to the content page?

1Begin with the content pageWhat needs to be on this page? where do people want to go next?

2) WireframesA visualization of content and navigation simple lines few colors focus on the lay-out Users should be able to find

around a wireframe despite missing

visual design level of detail varies

PURPOSE:Illustrate the site content and navigation without addressing color, style, etc.

1) NavigationResearching navigation possibilities: Discuss the advantages and

disadvantages of the different types of navigation on the following websites.

Discuss types of navigation suitable for your new IA website

Horizontal: http://www.northside.dk/en/Vertical: http://www.auberge-de-l-ill.com/V2/index.htmlTabs: http://www.fidesvita.org/Inverted L: http://www.uxaustralia.com.au/The navicon: http://take-your-pulse.com/en-USDropdown: http://www.bonlook.com/Page-body nav: http://tomasbarfod.com/Contextual links: http://da.wikipedia.org/wiki/ForsideFly-out: http://www.porsche.com/usa/Alphabetical: http://www.bbc.co.uk/a-z/All on one page: http://siebennull.com/Map: http://kulturklik.dk/kort.aspxBreadcrum: http://coolspotters.com/cameras/lomography-diana-dreamer-camera

2) Sketching up wireframes 1. Decide the type of information that should be on your website (text, sound, pictures, video, animation)2. In your group begin sketching up your wireframe so they illustrate both content and navigation (including internal links as shortcuts and links to related content).3. Revise your scenarios and wireframe before you begin prototyping.

1) NavigationResearch p navigations muligheder:

Diskuter fordele og ulemper ved de forskellige typer af navigation p flgende websites.

Diskuter typer af navigation egnet til din nye IA.

Horizontal: http://www.northside.dk/en/Vertical: http://www.auberge-de-l-ill.com/V2/index.htmlTabs: http://www.fidesvita.org/Inverted L: http://www.uxaustralia.com.au/The navicon: http://take-your-pulse.com/en-USDropdown: http://www.bonlook.com/Page-body nav: http://tomasbarfod.com/Contextual links: http://da.wikipedia.org/wiki/ForsideFly-out: http://www.porsche.com/usa/Alphabetical: http://www.bbc.co.uk/a-z/All on one page: http://siebennull.com/Map: http://kulturklik.dk/kort.aspxBreadcrum: http://coolspotters.com/cameras/lomography-diana-dreamer-camera

2) Sketching up wireframes 1. Beslut, hvilken type oplysninger, der skal vre p din hjemmeside (tekst, lyd, billeder, video, animation)2.Gruppevis begynd at skitsere wireframes, s de illustrerer bde indhold og navigation (herunder interne links som genveje og links til relateret indhold).3. Revidr dine scenarier og wireframes, fr du begynder prototyping.