Demystifying Information Architecture

49
Demystifying Information Architecture Patrick Kennedy
  • date post

    19-Sep-2014
  • Category

    Technology

  • view

    21
  • download

    1

description

Presentation from WebDU 2008 in Sydney, where I attempt to give developers and designers some insight into what IA is and how it works, so they can integrate it into their own practices or just work more effectively with IA/UX practitioners

Transcript of Demystifying Information Architecture

Page 1: Demystifying Information Architecture

Demystifying Information ArchitecturePatrick Kennedy

Page 2: Demystifying Information Architecture

“The usability guy says you can’t do that”

Does this sound familiar?

Page 3: Demystifying Information Architecture

Or maybe it’s more like this?

“You know what you can do with your heuristics?!”

Page 4: Demystifying Information Architecture

A bit about me

Two-minute resume• Electrical and Computer Systems Engineer• Front and back-end web developer• Team leader and ‘solutions architect’• Information Architect• User Experience consultantIndustry exposure• IT and corporate• Marketing, advertising and media

Page 5: Demystifying Information Architecture

So you think you can IA?do

“I drew a site map, I’m doing IA!”

Page 6: Demystifying Information Architecture

So you think you can IA?

“We wireframe everything!”

do

Page 7: Demystifying Information Architecture

So you think you can IA?

“Usability testing? Yep, we all think it

works great.”

do

Page 8: Demystifying Information Architecture

So you think you can IA?

“We surveyed what our users want!”

do

Page 9: Demystifying Information Architecture

So you think you can IA?

“I installed Visio…I am an Information

Architect!”

do

Page 10: Demystifying Information Architecture

What IA isn’t

Information Architecture is not…• Simply drawing up a sitemap• Simply pumping out masses of ‘wireframes’• Designing for yourselves• Just about navigation• A frivolous expense for ‘Rolls Royce’ projects only• A ‘nice to have’ item on a checklist• Database design (at least not for this session!)

Page 11: Demystifying Information Architecture

So what is IA?

Information Architecture is…• The practice of designing, for a website or intranet, the:

– Site structure– Navigation– Labelling

• Often a synonym for ‘usability’ or ‘User Centred Design’, which involves:– Understanding users and their needs– Designing with those needs in mind (balanced by business context and

content)– Validating design decisions with user involvement

Page 12: Demystifying Information Architecture

The basics of IA

Page 13: Demystifying Information Architecture

Structure

Page 14: Demystifying Information Architecture

Navigation

Page 15: Demystifying Information Architecture

Labelling

Page 16: Demystifying Information Architecture

More broadly…

IA is User Centered Design (UCD)• Which generally speaking, involves:

– Understanding users and their needs (balanced by business context and available/necessary content)

– Designing with those needs in mind– Validating design decisions with user involvement

• Other synonyms include ‘usability’ or ‘user experience’

Page 17: Demystifying Information Architecture

ResearchUnderstand the audience and context

Solve the problem at hand

Design

Test design against requirements

Validate

A general IA process

Page 18: Demystifying Information Architecture

ResearchUnderstand the audience and context

Solve the problem at hand

Design

Test design against requirements

Validate

A general IA process

Page 19: Demystifying Information Architecture

User research techniques

Page 20: Demystifying Information Architecture

There’s something about Mary

“I want to go on holiday,

somewhere in Australia”

“But I’m not sure where to

go…”

“…or what each city has

to offer”

Page 21: Demystifying Information Architecture

Other research

“We need to drive traffic to the destination

guides!”

“What content do we already

have?”

Page 22: Demystifying Information Architecture

ResearchUnderstand the audience and context

Solve the problem at hand

Design

Test design against requirements

Validate

A general IA process

Page 23: Demystifying Information Architecture

High level design

Page 24: Demystifying Information Architecture

Designing the travel site

Home

Internationalvacations

Domesticvacations

Guides

Packages

Book now!

Existing knowledge:Travel content lends itself to a geographic categorisation scheme

Want to “holiday” in Australia

Not sure whereWhat is there to

do?

Need to drive traffic to

destination guides

Page 25: Demystifying Information Architecture

Low level design

Page 26: Demystifying Information Architecture

Designing the travel siteLogo

Lorem ipsum dolor sit amet,consectetuer adipiscing elit.

International vacationsGuide 1 Guide 2Guide 3 Guide 4

Domestic vacationsGuide 5 Guide 6Guide 7 Guide 8

GuidesPackagesBooknow!

Conventions:Users are used to search in the top right hand corner

Want to “holiday” in Australia

Not sure whereWhat is there to

do? SearchContact us

Need to drive traffic to

destination guides

Page 27: Demystifying Information Architecture

ResearchUnderstand the audience and context

Solve the problem at hand

Design

Test design against requirements

Validate

A general IA process

Page 28: Demystifying Information Architecture

Validation techniques

Page 29: Demystifying Information Architecture

Logo

Lorem ipsum dolor sit amet,consectetuer adipiscing elit.

International vacationsGuide 1 Guide 2Guide 3 Guide 4

Domestic vacationsGuide 5 Guide 6Guide 7 Guide 8

GuidesPackagesBooknow!

SearchContact us

Feedback from Mary

“Huh? I don’t see a list of places I can go on holiday. Where do

I click?”

Page 30: Demystifying Information Architecture

Usability testing

“This is more like it! It gives me a list of places I can go to and I can get more

information”

Page 31: Demystifying Information Architecture

ResearchUnderstand the audience and context

Solve the problem at hand

Design

Test design against requirements

Validate

A general IA process

Page 32: Demystifying Information Architecture

IA in the broader process

Strategy and scoping Visual design Build Launch

Page 33: Demystifying Information Architecture

Often IA appears here…

Strategy and scoping Visual design Build Launch

Page 34: Demystifying Information Architecture

…or here

Strategy and scoping Visual design Build Launch

Page 35: Demystifying Information Architecture

Research

But this is where it belongs

Strategy and scoping Visual design Build Launch

Design

Validate

Page 36: Demystifying Information Architecture

IA and agile

Agile development methodologies• Design is shifted earlier in the project• More iterative• Taken the technical development world by storm

Problems• IA seen as rigid and pedantic• And also costly and slow

To fit into an agile environment IA needs to be:• Flexible (both in terms of time and method)• Quicker and less costly• Better integrated into the process (and team)• More guerrilla in approach; ad-hoc expertise when needed• Leverage the iterative nature of agile development for more user contact/input

Page 37: Demystifying Information Architecture

IA and the new web

Web 2.0 and Rich Internet Applications (RIA)• You will no doubt be familiar with these!• Higher levels of interactivity• Breaking away from the “page model” web• Asynchronous communication with server• Built using Flash, Flex, AJAX, Air, Silverlight, Java etcDifficulties for IA• As with designers and developers, RIAs mean a big shift for IA• Web IA finds this difficult• More akin to software design than web design

Page 38: Demystifying Information Architecture

Compare the IA for this…

Page 39: Demystifying Information Architecture

…with the IA for this…

Page 40: Demystifying Information Architecture

…or this

Page 41: Demystifying Information Architecture

IA for RIAs

“Traditional” techniques may not work• Particularly in terms of documentation (eg site map and wireframes)• New ways of documenting and communicating IA are needed• Methodologies may need to change also (eg fit in with agile)• Less about strict IA and more about interaction designNew techniques to consider• User task flows, storyboards, early working prototypes• Rapid iterative prototyping; see it working then refine it• ‘Wireflows’ and other hybrid forms of documentation

Page 42: Demystifying Information Architecture

IA practice is catching up

Page 43: Demystifying Information Architecture

Different, yet still the same

We’re still talking about UCD• Whilst IA needs to ensure it keeps up with advances in technology and industry

trends, the same basic principles apply• Research, design, validate• It’s just a new way of applying the principles

Web 2.0 is not an excuse for a free-for-all• We don’t want a repeat of lavish and unusable interfaces from early 90s• Be careful of the “if we build it they will come” mentality; websites and applications

still need to have purpose and meet a well defined audience need

Page 44: Demystifying Information Architecture

What does this mean for you?

Web developers and designers…• Need to allow time for IA (and UCD in general)• Can use IA to help improve what you create• Should get involved in IA (or even start to specialise in it)• Provide valuable input into IA; leverage your experience

across many projects and scenarios• Can be key drivers for IA in the development team• Are well placed to set the standards and influence

colleagues (as with web-standards)• Should play well with others (IA and UX professionals :)

Page 45: Demystifying Information Architecture

Tips

For success in IA, remember…• There are no simple answers, but there are simple

techniques• Solve each problem at the right stage of the project• Designs should be useful, not just usable• Iteratively sense-check your work with users• Teamwork works best (little “d” design with a

multidisciplinary team)• Always use a ‘blended’ approach (aka triangulation)

Page 46: Demystifying Information Architecture

Further reading

For a good intro to all things IA related, try:• Don’t Make Me Think by Steve Krug ISBN: 0789723107• The Elements of User Experience by Jesse James Garrett ISBN: 0735712026• The User Is Always Right by Steve Mulder & Ziv Yaar ISBN: 0321434536• Information Architecture for the World Wide Web by Louis Rosenfeld & Peter

Morville ISBN: 0596000359• Boxes and Arrows www.boxesandarrows.com• User Interface Engineering (UIE) www.uie.com

Page 47: Demystifying Information Architecture

Further reading

For wise thoughts on design documentation, try:• Sketching User Experiences by Bill Buxton ISBN: 0123740371• Communicating Design by Dan Brown ISBN: 0321392353

For the latest in IA for RIAs, try:• Documenting the Design of Rich Internet Applications: A Visual Language for State

by Richard F. Cecilwww.uxmatters.com/MT/archives/000251.php

• The Guided Wireframe Narrative for Rich Internet Applications by Andres Zapatawww.boxesandarrows.com/view/the_guided_wire

Page 48: Demystifying Information Architecture

In summary

• IA is not something to be scared of!• Designers and developers can use IA to deliver better results• In its most basic form IA is all about structure, navigation and labelling• But more broadly it is UCD, consisting of Research, Design, Validation• Ultimately IA will mean different things in different situations• It’s not something frivolous or stuck at the end of a project• IA is just as important for RIAs and Web 2.0 (perhaps more so)

Page 49: Demystifying Information Architecture

Questions?

Contact details• Patrick Kennedy• [email protected]• www.gurtle.com/ppov/

• All slides will be on SlideShare:www.slideshare.net/PatrickKennedy