IA workshop
66
IA Workshop
-
Upload
peter-van-lanschot -
Category
Internet
-
view
146 -
download
0
description
A 4 hour workshop as a follow up to the "What is IA?" presentation. Group exercises designed to get people thinking about how IA skills are applied to their daily digital work. Putting the theory of IA into practice with some simple core tasks.
Transcript of 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
