IMAT 3712

Human Computer
Interaction
Information Architecture
Acknowledgements
 Some slides originated in lectures developed by
Howell Istance
 Some slides originated in lectures developed by
John Burns
 Some slides originated in materials produced by
Daniel D. McCracken (City College of New York) and
Rosalee J. Wolfe (DePaul University) to accompany
their book User-Centered Website Development
 A lot of the content comes from books and articles
by Jakob Nielsen
 Some of the content draws on articles from various
associates of the Nielsen Norman Group
Designing for the Web
 Basic Principles: Website as a design problem
The Web is NOT...
 Printed paper
 Television
 A Windows application GUI
Why the Web is like the
Telephone
 Can be interactive
 1 to 1 communication
 Calls initiated by the user: “pull medium”
 Everyone is a publisher
Differences from GUI design
 Device diversity
 Need to plan for big differences
 Looking different is a feature, not a bug
 Single fixed-width layout good for control, not so

good for variety of devices

 User controls navigation
 Design to maximise freedom of navigation
 Users are using Web as a whole
 The web has become a genre

 BUT GUI design is becoming web design: HTML

interfaces
Differences from Paper design
 Books and articles are linear
 Paper pages can be viewed simultaneously, written
on, given to friends etc

 Exploit the medium

 Don’t seek to replicate the structure of a paper

document in its online version.

 Exploit hypertext with context-specific linking
 Add value
 For example, online book catalogue with links to

‘more like this’, ‘customers also bought these

books’, ‘reviewers comments’
Designing a User Experience
 User Experience design: UX
 How will the users interact with a complicated

information structure?
 Find information within site…
 Find information on page…
 See information…
 Understand information…
 What are the users’ needs and objectives? Use
cases…
 What are the client’s needs and objectives?
 What will improve the user experience?
 What will detract from the user experience?
The Elements of User
Experience
 Jesse James Garrett
 Web as software
interface
 Visual design
 Interface design
 Information design
 Interaction design
 Functional
specifications
 User needs
 Site objectives
The Elements of User
Experience
 Jesse James Garrett
 Web as hypertext
system
 Visual design
 Navigation design
 Information design
 Information
architecture
 Content
requirements
 User needs
 Site objectives
Designing hypertext structures
 Non-linear structure is a feature, not a bug, but...
 Exploiting possibilities of hypertext can make

structure confusing
 Easy to lose sense of current position
 Multiple entry points to a linked page leads to

loss of contextual information

 Complex structure may mean crucial information

is by-passed by user
 Leads to uncertainty, loss of confidence
 Printing hard copy of multipage structures is
non-trivial
 Printing is linear, hypertext is not
Principles of design
 Define your problem
 Understand your audience
 Whom do you want to impress?
 What are the information needs of your users?
 Think through organisation of information
 What do the visitors want to do or find out ?
 How will the site develop over time ?
 Use principles of good GUI design
 Use logical progression, allow speed control,
design appropriately for users, be consistent
Decide on criteria for success
 Make sure the reasons for building a website are
clear
 Get organizational agreement about what success
means
 Examples of criteria for success
 number of hits per day
 number of repeat visits
 number of new people signing up to an organisation or
service
 quantity of products sold
 feedback from customers
 getting good press reviews
 making customer communication easier
 If you aren’t clear about what constitutes a
Decide whom you want to
impress
Be clear about
 Which groups of people you are designing a site for
 What assumptions you will make about their level

of knowledge and their expectations

 What you think the target audience wants to get

from visiting your site

Example: ‘Fanzine’ site dealing
with Liverpool Football Club
 Target audience:
 People who are already football fans, primarily of

LFC
 Assumptions:
 Audience probably know a lot about football and

probably follow the matches week by week,

expect high quality interactive magazine
 Audience wants up-to-date news, analysis,

gossip, match reports with photos

 Audience not primarily looking for basic facts

about LFC, Liverpool or football in general

 Clearly other people may visit the site (e.g.

tourists visiting Liverpool), but they are not

Designing websites
 Site structure
Minimizing cognitive load
 Intrinsic cognitive load: effort involved in
understanding the information you came for

 Extrinsic cognitive load: mental effort involved

in getting to the information

 Web design task is minimizing extrinsic cognitive

load
 Writing content well is also hard
 “To write simply is as difficult as to be good” –
William Somerset Maugham
 “Everything should be made as simple as possible, but
not simpler” – (attributed to) Albert Einstein
Design the site structure
around the information
 Identify natural structure of the information
 Well-defined chunks with clear purpose
 Names that clearly show content and purpose
 Sensible, clearly defined groups
 Names and groups fit how users think

 Don’t assume people know how you categorize

your content
 University courses may not get found by prospective
students if they’re listed under faculties or departments
Design the site structure
around the information
 Allow for growth:
 Plan for growth and the addition of new material

so that this can fit into the existing structure

 Otherwise there is a danger that the site

structure will need to be changed to

accommodate new information
Exact organizational schemes
 How do we categorize and arrange?

 Familiar in everyday life:

 Alphabetical: Phone book
 Chronological: Appointment book
 Spatial: Shopping mall diagram with store

locations
Content-based organisation
 Four types of content-based organizational
schemes:
 Topical: Conceptually similar items
 Subsections of textbook, e.g. Castro
 Task-oriented: What users need for one task
 E-commerce purchasing process, e.g. Amazon
 Audience-specific: Group the users first, and the
content second, for each user group
 (Bits of) DMU homepage
 Metaphor-driven: Mapped to structure of
metaphorical situation
 E-commerce supermarkets, e.g. Amazon
 Hybrid of more than one of these
 Hybrid organizational scheme
example

Topical
(categories)

Task
oriente
d
What categories? What names?
 Problem: how do you know what your users’
categories are?
 Will they look for a sweater under Winter Wear

or under Men’s Clothing?

 What do they expect to find under “About Us”?
 What can you put on the home page for a

college that will lead most directly to the courses

offered?
 You don’t know!
 Not until you ask your users …
 … who, of course, have no idea what you mean by
“What are your categories?”
There isn’t always one right
classification
Is Black Treacle

A. Sugar?
B. A baking ingredient?
C. Something to spread
on bread, like jam?
D. Filed under L for
Lyle’s, or B for Black,
or T for Treacle?
E. Ideally, all of the
above?
Moral!
 Different users will use different terminology
 Different users will see different similarities
 Users and developers see the world differently
 Clients providing information and users using
information see the world differently

 You need to understand how your users think

 There isn’t always one best answer
 Can you allow for different views?
Names and categories
 Go and ask the users!
 Are the clients the users? Just a subset?
 Designers and clients have peculiar view
 Technical vocabulary (other people’s baffling jargon)
 Understanding of structure of organization or services

 How?
Card Sort
 Procedure for getting users to tell you what your
categorizations should be

1. Put names or descriptions of content, or

questions users might have, on cards, with
numbers on the back
2. Shuffle
3. Get subjects to sort them into piles of cards that
seem related in some way
4. Get subjects to give names to their
groups
Card Sort
 Procedure for getting users to tell you what your
categorizations should be
 Quite a lot of subjects – ideally 20 or so
 Need to consider diversity of users

 Natural number of items, but not too many – 40 or

so
 Can let people choose number of categories
 (best if quick study)
 Can use seeds – put initial items into different
categories
 (useful for really thorough study, and to make

sure large groups get split)

How do the groups relate to
each other? A Hierarchy?
 Perhaps a hierarchy of topics and subtopics,
branching out from a central starting point
How do the groups relate to
each other? A Network?
 Perhaps a network of topics, which we can connect
with hyperlinks:
Flat versus deep hierarchies

 Flat and deep hierarchies have pros and cons

 Fit site structure to natural structure of

information
 Broad and flat usually easier to use
 Content more discoverable if not buried far down
 Distinct, recognizable categories that don’t

overlap are easiest to understand

 Over-general labels hard to understand
 Long lists without grouping harder to use
Designing websites
 Dividing information between pages
Amounts of information can
vary
 Strict hierarchy with uneven amounts of
information suggests scrolling pages
Combined hierarchical and
linear structure
 Alternative to scrolling pages
 Used where more than one ‘page’ or screen is
needed to contain information or tasks related to
the same thing at a particular place in the
hierarchy
 Easy to see how one can get ‘lost’ in information
space
How much scrolling?
Signalling that scrolling is
needed
 Determine page length by relevance of information
 … in most situations

 BUT need to ensure that users understand what

information is on which page
 Right expectations
 Can see what’s there
How much scrolling?
Signalling that scrolling is
needed
 Avoid horizontal scrolling if at all possible

 Users will scroll downwards, but look at first

screen...
 What’s on this page? Whole page, or beginning?

What’s here? What can I do?

 Users easily confused if what’s above the fold

looks like a complete page – scroll bars are not

enough
 First screenful needs to show clearly there’s

more content
 First screenful needs to show clearly what the

extra content is
How much scrolling?
Infinite scrolling vs multiple
pages
 Multiple pages
 Fixed number of items per page
 Going to next page irritating
 Page number is useful index for returning to item
 Ideally, allow user control over no. of items per

page

 Infinite scrolling with more items added

progressively
 Saves users asking for the next page
 Confuses the scroll bars
 Can feel like drowning in an infinite information
Designing websites
 Enabling the users to understand their location
Predictable contexts
 Advertisements etc can lead to custom pages
 Exploit opportunities to show tailored pages
 Encourage and exploit task-specific deep linking
from other sites
Unpredictable contexts
 Search engines can lead people anywhere
 Avoid orphan pages
 Always link home
 Search engines show titles +/- summaries
 Use titles that are meaningful out of context
 Never abandon URLs – put in appropriate page

or program if out of date

Make navigation visible:
Breadcrumbs
 People don’t want to build elaborate mental maps
of your website
 Where you are matters, so show people!

 Breadcrumbs work well to show where you are in a

hierarchical structure, starting from the home page
 nn/g home  AskTog  Interaction Design Section
Types of Breadcrumbs
 Location: Where in the hierarchical organization of
the site this is
 Sequence of steps down levels from homepage
 ALMOST ALWAYS BEST

 Path: Sequence of steps followed by user from

starting point
 Can (sometimes) vary for same page
 Useful if fixed linear sequence

 Attribute: Categories this page/item belongs to

 Useful for ecommerce systems
Drill-down versus Search
 Individual differences between users
 Majority prefer search
 Large minority prefer drill-down
 Most users lousy at devising

search terms
 Even relatively tech-savvy aren’t

great at effective searches

 Large sites should support both search and drill-

down
 Sensibly designed ‘no results’ pages important
 Clear that there are no results
 Sensible suggestions for what to do next
Make navigation visible:
Global navigation
 Global navigation – between major chunks of
website
 Traditionally visible and constant
 Needs to be clearly available and

understandable

 Current trend to having global navigation in

dropdowns
 Influence of limited space on mobile devices
 Dangerous – users need to see scope of offerings

in enough detail to know what to expect from

dropdowns
 Dropdown megamenus to deep content are
Splash pages
 Just DON’T

 Splash pages with pretty images and no content

(apart from link to the content) used to be
fashionable
 Still common student mistake
 Good for corporate egos, not users
 Still relatively little real content on most

corporate home pages

 Users want real stuff

 The first page should serve useful content


HCI in bite sized chunks
 Articles from the Nielsen Norman Group
http://www.nngroup.com/articles/

 Short articles on various aspects of designing and

evaluating websites
 Lots by Jakob Nielsen, who used to publish them

every two weeks for many years, under the

name ‘Alertbox’ (now merged in with this site)
 Sources for a lot of the content of this lecture
Some important articles
 113 Guidelines for big-site homepages
 (Jakob Nielsen, 2001)
 http://www.nngroup.com/articles/113-design-guidelines-
homepage-usability/
 First principles of interaction design
 (Bruce Tognazzini, 2014)
 http://asktog.com/atc/principles-of-interaction-design/
The textbook
Yvonne Rogers
Helen Sharp
Jenny Preece
Interaction Design,
6th ed
Wiley, 2023
ISBN 978-1-119-90109-9