what is ia?
Post on 29-Jun-2015
158 Views
Preview:
DESCRIPTION
TRANSCRIPT
What is IA?
Overview
IA = Information Architecture
The reasons to use it.
When to use it.
How to apply it in your job.
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
Organising lots of content.
Can tell a lot from an inbox.
Or a filing system.
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
The typical tools
Information Architecture focusses on structure.
Site mapProcess flowsWireframes
Module libraryUser Interface design
Information Architecture
It often starts out as quick sketches
Information Architecture
What if it’s more than a few pages of work?
Or if we need to show it to someone new to the project?
How do we keep a track of all of these pages?
We start from the top.
With a site map.
Information Architecture
Two common
Information Architecture
Two common
Information Architecture
There’s a set way to make a site map
Information Architecture
Two common formats
Information Architecture
Site maps are the result of sketching
Information Architecture
Doesn’t matter how you sketch it
Information Architecture
How you document it is important
Site maps
Site maps
Allows us to see:● the big picture● taxonomy (classification)● page relationships● the user journey● required content / modules
Information Architecture
Unsure how to structure a website? Try card sorting
Site maps
Large site maps are often supported by a card sorting exercise to understand the taxonomy and classification of information
Site maps
Why use a site map?
● Keep track of the content.● Helps define the navigation.● Understand how many page
templates we need to build.● Can show where new content
can integrate. ● Can stagger a build and release it
in stages.● Gets client sign off and locks the
scale of the site.
After the site map
Understanding how the pages will flow together.
Describing these pages.
Boxes and arrows and grey for a reason.
We’re not designing here, we are still understanding.
Process flows
Technical map of key processes
Wireframes
Just like blueprints for a house
Wireframes
Or any pre-build schematics
Wireframes
Saves cost on final build to tweak sooner rather than later
Wireframes
Boxes and arrows and grey for a reason.Focus is on page layout and information structuring.
Wireframes are not designs
Wireframes
It’s about sketching ideas and working an idea up
Wireframes
Trying out different routes
Wireframes
Concepting quickly and getting feedback
Wireframes
It’s a blueprint for the web
Wireframes
That can explain functionality and more
Wireframes
Wireframes
Why use wireframes?
● Key user & business needs.● Understand the limitations.● Gets the core page requirements
across to creative and technical team members (information hierarchy).
● Understand the flow of pages.● Rapid prototyping and iteration. ● Document what each page does.
Module library
Reusing a lot of modules on different pages?
Allows us to:● tick off site map pages● scope page templates quickly● describe functionality● get closer to wireframes
User Interface design
In summary
Information Architecture is all about structure and organisation.
Things categorised and organised neatly.
Taxonomy = classification.
Getting the big picture on how users will find what they need.
Understanding how people will flow between pages.
Getting things ready for design and build.
Where IA is headed?
Gone are the days of huge printed wireframe documents.
Yes, you’ll probably still print out a site map, but not for wireframes.
New breed of IA - one who can rapid prototype.
Speed / working Lean becomes key.
The current need in the industry is for people who understand the fundamentals of IA but can also rapidly produce working prototypes that
can be tested and quickly worked up ready for build.
Further readingA List Apart article on Paper Prototyping (an old but still highly relevant article)http://alistapart.com/article/paperprototyping
50 Sketch resources (huge list of links, worth a cruise)http://www.inspireux.com/2010/06/28/50-sketching-resources-for-user-experience-designers/
A great collection of wireframes (useful for when developing your own style)http://www.pinterest.com/breanne1/beautiful-wireframes-ia-ux/
POP (prototyping on paper app)https://popapp.in/
Solid online wireframing tool (can make clickable prototypes quick, easy, free, )http://uxpin.com/
Omnigraffle (Mac only, classic wireframe / document creation tool)http://www.omnigroup.com/omnigraffle
Invision (great focus on collaborative feedback when wireframing)http://www.invisionapp.com/
Macaw (really new, wireframe and it codes itself)http://macaw.co/
Questions
top related