Part 3.

3: Information
Architecture
What is information architecture?
Way of in which Information can be arranged and accessed
Design process for information architectures
Information architecture for interactive systems
Information architecture for ubiquitous systems

User Interface Design

What information architecture is
about?
 IA definition
1. The structural design of shared information
environments.
2. The art and science of organizing and labeling
web sites, intranets, online communities and
software to support usability and findability.
3. An emerging community of practice focused on
bringing principles of design and
architecture to the digital
landscape.

User Interface Design

Information Architecture
 Overall design of the site
 Must connect with the user’s context
 Don’t let sites just grow
 No order to pages
 Information is scattered
 Based on content and functionality

User Interface Design

Information architecture
 Without an effective and efficient architecture,
the site will not support a person’s needs.
 Must be user-centered (UCD).
Reflect the user’s information needs and not
the organization’s.

User Interface Design

Information architecture
 About
 The site structure
 Overall organization
 Navigation

 Not about
 The page layout
 Color choices
 Creating content
User Interface Design
Information is arranged in many ways
 Date
 Alphabetical
 Geography
 Topic
 Hierarchy
 Faceted
 Organic
 Combination

 Good IA allows access to information in many ways

User Interface Design
By date

User Interface Design

Alphabetical

User Interface Design

By geography

User Interface Design

By geography

User Interface Design

By audience

User Interface Design

By audience

User Interface Design

By task

User Interface Design

By topic

User Interface Design

By category

User Interface Design

By category

User Interface Design

Organic organisation system

User Interface Design

About hierarchies

UC Home
Future students Current students Staff
Entry into UC Announcements Announcements

About UC courses OSIS OPUS

Academic dvisions Directories

UC College
& schhols & maps

Academic dvisions
Campus life Studying at UC
& schhols

User Interface Design

Getting around - navigation

User Interface Design

Navigation

 Every page of a site should let you know:

 Where am I
 What’s here
 Where can I go now
 Where have I been

 People don’t always work from the home

page – they get to a page from a link or from
a search
User Interface Design
Navigation is visual
 Keep reader oriented
 Provide cues to location on the web site
 Nav bar marking
 Bread crumbs
 Design problems
 Complex system is hard to maintain
 Reader must understand your coding

User Interface Design

Designing Navigation
 Always have way to homepage
 Don’t rely on the back button
 Build a hierarchy
 Construct in user terms
 Don’t construct in system terms
 Avoid menu-menu-menu scheme

User Interface Design

User Interface Design
User Interface Design
Types of navigation
 Global navigation
 Persistent across a site
 Allows access to major parts of the site
 Local navigation
 Lets you move around the current ‘section’
 Contextual navigation
 Inline links, to anywhere
 Supplemental navigation
 Helpers – site map, A-Z index
 See also User Interface Design

 Related links
Navigation

User Interface Design

Social navigation

User Interface Design

Labeling
 Good labels
 Are understandable by the reader

 Are consistent within the site

 Clearly describe where you are going next

 Labeling is not easy – it is as complex as structure and

navigation
 Where to get labeling ideas:
 User research

 Search terms

 Referrer terms

 Call centre/people in contact with users

User Interface Design
Search
 What to search
 Query structure - how to search it
 Relevance - which results are the most
important
 How to display the results

User Interface Design

Metadata
 ‘Data about data’
 Title

 Description

 Authored date

 Keywords

 Historically used to improve searching – search can use

the metadata fields
 Also can be used to relate information together

User Interface Design

In an IA project
 Research
 Business needs
 User requirements
 Content
 Gives me an understanding of the domain
 Understand technical opportunities or limitations
 Design site structure (site map)
 Design navigation and page layouts (wireframes)
 Design metadata, search and relationships
 Usability test throughout the process
 Creates a blueprint for the site – technical work after
blueprint created and tested
User Interface Design
IA for interactive sites
 Sites that are primarily about ‘doing things’ use IA
differently
 Fewer pages than a large informational site, so site
map may show workflow not structure
 Navigation and labeling still important

 More emphasis on scenarios

 Wireframes show a lot more detail and show all screens
 Design process is very similar

User Interface Design

The elements of user experience

User Interface Design

IA for ubiquitous computing

 Depends on the ubicomp device

 For this assignment, interaction is more important
 Navigation – getting around the interface
 Labeling always important
 Design process is similar
 As information becomes embedded into our
environment, accessing that information will
become important…

User Interface Design

Doing the initial design
 Figure out the categories
 User-based, not system-based
 Draw it out. Your mind will not work for a
very complicated site.
 Post-it notes
 Paper sketches
 Software is ok, but often clunky

User Interface Design

Knowing what to design
 We started the way I had started with my first
webpage: we pored over the documentation to
discover who the audience was and what their
key needs were. We wrote the names of three
people who we thought would use the site, and
wrote their needs underneath each of the
names. Dave, the CEO who wanted to know if
he should buy the product. Jill, the potential
employee who wanted to know if it was a cool
place to work. Carla, the investor who wanted to
know if this was a hot buy.
User Interface Design
Conceptual model
 Which of these does the IA control and why?
 The implementation model is how the product
works from a technical point of view.
 The mental model is how the user thinks the
product works.
 The conceptual model is the message the
designer or IA sends to the user

User Interface Design

Information flows
 How does a person
look at the
information.
 What order
 Where are the
branch points

User Interface Design

Site map
 Drawing of the entire site
 Don’t be afraid to use a wall and Post-its
 Software is not a good way to go
 Often huge and constantly updated
 Need to keep big picture

User Interface Design

Wirefames
 Simple mock up of the page

User Interface Design

IA Resources
 Books
 Information Architecture for the World Wide Web – Louis Rosenfeld &
Peter Morville
 Elements of user experience – Jesse James Garrett
 Information Architecture – Blueprints for the Web – Christina Wodtke
 Don’t Make Me Think – Steve Krug
 Online
 Boxes and Arrows – http://www.boxesandarrows.org/
 IAslash - http://www.iaslash.org/
 IAwiki – http://www.iawiki.org/
 http://www.maadmob.net/donna/blog/
 http://www.steptwo.com.au/

User Interface Design