Download - What is IA?
![Page 1: What is IA?](https://reader034.vdocument.in/reader034/viewer/2022052622/559046251a28ab93118b45dd/html5/thumbnails/1.jpg)
What is IA?
![Page 2: What is IA?](https://reader034.vdocument.in/reader034/viewer/2022052622/559046251a28ab93118b45dd/html5/thumbnails/2.jpg)
Overview
IA = Information Architecture
The reasons to use it.
When to use it.
How to apply it in your job.
![Page 3: What is IA?](https://reader034.vdocument.in/reader034/viewer/2022052622/559046251a28ab93118b45dd/html5/thumbnails/3.jpg)
Overview
The Spectrum of UX via IA.net
![Page 4: What is IA?](https://reader034.vdocument.in/reader034/viewer/2022052622/559046251a28ab93118b45dd/html5/thumbnails/4.jpg)
Is this you?
![Page 5: What is IA?](https://reader034.vdocument.in/reader034/viewer/2022052622/559046251a28ab93118b45dd/html5/thumbnails/5.jpg)
Or is this you?
![Page 6: What is IA?](https://reader034.vdocument.in/reader034/viewer/2022052622/559046251a28ab93118b45dd/html5/thumbnails/6.jpg)
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.
![Page 7: What is IA?](https://reader034.vdocument.in/reader034/viewer/2022052622/559046251a28ab93118b45dd/html5/thumbnails/7.jpg)
Information Architecture
Organising lots of content.
Can tell a lot from an inbox.
Or a filing system.
![Page 8: What is IA?](https://reader034.vdocument.in/reader034/viewer/2022052622/559046251a28ab93118b45dd/html5/thumbnails/8.jpg)
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?
![Page 9: What is IA?](https://reader034.vdocument.in/reader034/viewer/2022052622/559046251a28ab93118b45dd/html5/thumbnails/9.jpg)
What makes up IA
Content
User
Context
IA
![Page 10: What is IA?](https://reader034.vdocument.in/reader034/viewer/2022052622/559046251a28ab93118b45dd/html5/thumbnails/10.jpg)
The typical tools
Information Architecture focusses on structure.
Site mapProcess flowsWireframes
Module libraryUser Interface design
![Page 11: What is IA?](https://reader034.vdocument.in/reader034/viewer/2022052622/559046251a28ab93118b45dd/html5/thumbnails/11.jpg)
Information Architecture
It often starts out as quick sketches
![Page 12: What is IA?](https://reader034.vdocument.in/reader034/viewer/2022052622/559046251a28ab93118b45dd/html5/thumbnails/12.jpg)
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.
![Page 13: What is IA?](https://reader034.vdocument.in/reader034/viewer/2022052622/559046251a28ab93118b45dd/html5/thumbnails/13.jpg)
Information Architecture
Two common
![Page 14: What is IA?](https://reader034.vdocument.in/reader034/viewer/2022052622/559046251a28ab93118b45dd/html5/thumbnails/14.jpg)
Information Architecture
Two common
![Page 15: What is IA?](https://reader034.vdocument.in/reader034/viewer/2022052622/559046251a28ab93118b45dd/html5/thumbnails/15.jpg)
Information Architecture
There’s a set way to make a site map
![Page 16: What is IA?](https://reader034.vdocument.in/reader034/viewer/2022052622/559046251a28ab93118b45dd/html5/thumbnails/16.jpg)
Information Architecture
Two common formats
![Page 17: What is IA?](https://reader034.vdocument.in/reader034/viewer/2022052622/559046251a28ab93118b45dd/html5/thumbnails/17.jpg)
Information Architecture
Site maps are the result of sketching
![Page 18: What is IA?](https://reader034.vdocument.in/reader034/viewer/2022052622/559046251a28ab93118b45dd/html5/thumbnails/18.jpg)
Information Architecture
Doesn’t matter how you sketch it
![Page 19: What is IA?](https://reader034.vdocument.in/reader034/viewer/2022052622/559046251a28ab93118b45dd/html5/thumbnails/19.jpg)
Information Architecture
How you document it is important
![Page 20: What is IA?](https://reader034.vdocument.in/reader034/viewer/2022052622/559046251a28ab93118b45dd/html5/thumbnails/20.jpg)
Site maps
![Page 21: What is IA?](https://reader034.vdocument.in/reader034/viewer/2022052622/559046251a28ab93118b45dd/html5/thumbnails/21.jpg)
Site maps
Allows us to see:● the big picture● taxonomy (classification)● page relationships● the user journey● required content / modules
![Page 22: What is IA?](https://reader034.vdocument.in/reader034/viewer/2022052622/559046251a28ab93118b45dd/html5/thumbnails/22.jpg)
Information Architecture
Unsure how to structure a website? Try card sorting
![Page 23: What is IA?](https://reader034.vdocument.in/reader034/viewer/2022052622/559046251a28ab93118b45dd/html5/thumbnails/23.jpg)
Site maps
Large site maps are often supported by a card sorting exercise to understand the taxonomy and classification of information
![Page 24: What is IA?](https://reader034.vdocument.in/reader034/viewer/2022052622/559046251a28ab93118b45dd/html5/thumbnails/24.jpg)
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.
![Page 25: What is IA?](https://reader034.vdocument.in/reader034/viewer/2022052622/559046251a28ab93118b45dd/html5/thumbnails/25.jpg)
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.
![Page 26: What is IA?](https://reader034.vdocument.in/reader034/viewer/2022052622/559046251a28ab93118b45dd/html5/thumbnails/26.jpg)
Process flows
Technical map of key processes
![Page 27: What is IA?](https://reader034.vdocument.in/reader034/viewer/2022052622/559046251a28ab93118b45dd/html5/thumbnails/27.jpg)
Wireframes
Just like blueprints for a house
![Page 28: What is IA?](https://reader034.vdocument.in/reader034/viewer/2022052622/559046251a28ab93118b45dd/html5/thumbnails/28.jpg)
Wireframes
Or any pre-build schematics
![Page 29: What is IA?](https://reader034.vdocument.in/reader034/viewer/2022052622/559046251a28ab93118b45dd/html5/thumbnails/29.jpg)
Wireframes
Saves cost on final build to tweak sooner rather than later
![Page 30: What is IA?](https://reader034.vdocument.in/reader034/viewer/2022052622/559046251a28ab93118b45dd/html5/thumbnails/30.jpg)
Wireframes
Boxes and arrows and grey for a reason.Focus is on page layout and information structuring.
![Page 31: What is IA?](https://reader034.vdocument.in/reader034/viewer/2022052622/559046251a28ab93118b45dd/html5/thumbnails/31.jpg)
Wireframes are not designs
Wireframes
![Page 32: What is IA?](https://reader034.vdocument.in/reader034/viewer/2022052622/559046251a28ab93118b45dd/html5/thumbnails/32.jpg)
It’s about sketching ideas and working an idea up
Wireframes
![Page 33: What is IA?](https://reader034.vdocument.in/reader034/viewer/2022052622/559046251a28ab93118b45dd/html5/thumbnails/33.jpg)
Trying out different routes
Wireframes
![Page 34: What is IA?](https://reader034.vdocument.in/reader034/viewer/2022052622/559046251a28ab93118b45dd/html5/thumbnails/34.jpg)
Concepting quickly and getting feedback
Wireframes
![Page 35: What is IA?](https://reader034.vdocument.in/reader034/viewer/2022052622/559046251a28ab93118b45dd/html5/thumbnails/35.jpg)
It’s a blueprint for the web
Wireframes
![Page 36: What is IA?](https://reader034.vdocument.in/reader034/viewer/2022052622/559046251a28ab93118b45dd/html5/thumbnails/36.jpg)
That can explain functionality and more
Wireframes
![Page 43: What is IA?](https://reader034.vdocument.in/reader034/viewer/2022052622/559046251a28ab93118b45dd/html5/thumbnails/43.jpg)
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.
![Page 44: What is IA?](https://reader034.vdocument.in/reader034/viewer/2022052622/559046251a28ab93118b45dd/html5/thumbnails/44.jpg)
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
![Page 45: What is IA?](https://reader034.vdocument.in/reader034/viewer/2022052622/559046251a28ab93118b45dd/html5/thumbnails/45.jpg)
User Interface design
![Page 46: What is IA?](https://reader034.vdocument.in/reader034/viewer/2022052622/559046251a28ab93118b45dd/html5/thumbnails/46.jpg)
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.
![Page 47: What is IA?](https://reader034.vdocument.in/reader034/viewer/2022052622/559046251a28ab93118b45dd/html5/thumbnails/47.jpg)
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.
![Page 48: What is IA?](https://reader034.vdocument.in/reader034/viewer/2022052622/559046251a28ab93118b45dd/html5/thumbnails/48.jpg)
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/
![Page 49: What is IA?](https://reader034.vdocument.in/reader034/viewer/2022052622/559046251a28ab93118b45dd/html5/thumbnails/49.jpg)
Questions