ia workshop

IA Workshop

Overview

Background & purpose

Exercises:Site map

NavigationPage layoutForm design

Background & purpose

Overview

The Spectrum of UX via IA.net

Is this you?

Or is this you?

Information Architecture

The organisation and flow of content on a website.

How information works on a page.How information works on a site.

How information works on the web.

How information is organised and structured.

Information Architecture

It’s not just about making something functional.

It’s about understanding how people will feel when they use it.

How will they move through the information.

How can we provide them with what is important?

What makes up IA

Content

User

Context

IA

Background

The 3 core skills of Information Architecture:

Site maps

Wireframes

User Interface design

Background

Few more skills involved:

Site mapsTaxonomy

Process flowsPaper PrototypingModule diagrams

WireframesModule libraries

User Interface design

(this list is still evolving)

Background

The trick is knowing when and how much to use it on:

● Fast projects (1-10 days) eg: updating a page template or two*

● Standard projects (3-4 weeks) eg: delivering a portfolio website*

● Large projects (2-3 months) eg: overhauling a government website*

*Insight does all 3 of these

Background

During this workshop we’ll cover the 3 core skills of Information Architecture:

Site maps

Wireframes

User Interface design

Typical IA process flow

Site maps

Navigation

Page layouts

Group exercises

1. Site map

Site map

What are site maps?

The brief

The techniques

What we want to get out of it

Remember to… describe page relationships, sketch it out first

Next steps

Site map

Site map

Site map

Site map

Site map

Site map

Site map

Site map

Site map

Site map

The client: http://crossroadswines.co.nz/

The brief: this popular winery wants an updated website, but we’ve first got to understand the size of it.

We need to create a site map to clearly see the whole site structure.

We aren’t creating a new site structure!

The challenge is to methodically and logically map out the pages.

Site map

The client: http://crossroadswines.co.nz/

The brief: this popular winery wants an updated website, but we’ve first got to understand the size of it.

30mins of creating the site map in pairs.

Remember to… show clearly where each page sits in relation to the home page. Don’t worry about making a mistake, it’s just sketching!

Site map

The client: http://crossroadswines.co.nz/

The brief: this popular winery wants an updated website, but we’ve first got to understand the size of it.

How did it go?

What does the site look like? Are there any page templates?

How are we going to formally document this?

2. Navigation

Navigation

What is navigation?

The brief

The techniques

What we want to get out of it

Remember to… use the site map, experiment with sketches first

Next steps

Navigation

Navigation

Navigation

Navigation

Navigation

Navigation

The client: Amnesty International

The brief: the site structure has been mapped and the brief is “come up with a nav that works” since their current one is full of bugs and not intuitive. Come up with a navigation using the site map provided.

Fix the website’s global navigation (that is the header and footer).

The challenge is to find a usable solution.

Navigation

The client: Amnesty International

The brief: the site structure has been mapped and the brief is “come up with a nav that works” since their current one is full of bugs and not intuitive. Come up with a navigation using the site map provided.

30mins of using the site map to create a new global navigation.

Remember to… sketch out various approaches to the solution first. Try to imagine using this navigation to see if it works.

Navigation

The client: Amnesty International

The brief: the site structure has been mapped and the brief is “come up with a nav that works” since their current one is full of bugs and not intuitive. Come up with a navigation using the site map provided.

How did it go?

What’s the optimal navigation? How about browsing it on mobile?

How are we going to formally document this?

3. Page layout

Page layout

What is page layout?

The brief

The techniques

What we want to get out of it

Remember to… use the site map, experiment with sketches first

Next steps

Page layout

Page layout

Page layout

Page layout

UX is everyone’s responsibility

Design

Account / Project Management

UX

Development &

Production

Page layout

The client: http://www.kohler.co.nz/

The brief: the product pages are under performing. The client wants them to be redesigned since they are getting a lot of direct traffic to product pages and you can now buy products direct. “Really sell the product!”

Refresh the layout for the product page template.

The challenge is to sketch up a new product page wireframe based on the user needs and your professional understanding of best practice / online consistency.

Page layout

Page layout

The client: http://www.kohler.co.nz/

The brief: the product pages are under performing. The client wants them to be redesigned since they are getting a lot of direct traffic to product pages and you can now buy products direct. “Really sell the product!”

30mins of sketching wireframes based on user needs.

Remember to… not be precious of your sketches, try stuff out, make mistakes. Build up the page based on what is important to both the user and the business! Find that balance.

Page layout

The client: http://www.kohler.co.nz/

The brief: the product pages are under performing. The client wants them to be redesigned since they are getting a lot of direct traffic to product pages and you can now buy products direct. “Really sell the product!”

How did it go? Did you describe functionality? Rationale for layout?

What’s the new product page look like? How about browsing it on mobile?

What about the empty pages? How are we going to get this built?

4. Form design

Form design

What is form design?

The brief

The techniques

What we want to get out of it

Remember to… read the functional specifications

Next steps

Form design

Form design

Form design

Form design

Form design

Form design

Form design

Form design

Form design

The client: http://www.mbnorthshore.co.nz/

The brief: a car dealer website wants to increase conversions from test drives to sales but they’ve realised that the Request A Test Drive form is broken.

Redesign the request a test drive form experience.

The challenge is to create a form that gets a high completion rate.

Form design

The client: http://www.mbnorthshore.co.nz/

The brief: a car dealer website wants to increase conversions from test drives to sales but they’ve realised that the Request A Test Drive form is broken.

30mins of sketching wireframes based on functional specifications.

Remember to… design a form that will get a high completion rate by sketching and trying out different options until you find something that works.

Form design

The client: http://www.mbnorthshore.co.nz/

The brief: a car dealer website wants to increase conversions from test drives to sales but they’ve realised that the Request A Test Drive form is broken.

How did it go?

Did anyone break it down into steps? How are error messages displayed?

What do we do with this now? How will we know if this will actually work?

Wrap up

Wrap up

A lot of Information Architecture is about:

● understanding categories and structure

● making pages flow together well

● the layout of information on a page

● collaboration and compromise

Feedback