Mobile Information Architecture Workshop

Information Architecture in Mobile
2
Lazar Petrakiev
Creative Lead, MentorMate BG / Country Manager, IDF
Lazar_PetrakievLazar Petrakiev
February 13, 2015

Agenda
workshop
 Introduction
 What is IA
 Design the IA
 Structure your content
 Analyzing the users
3 February 13, 2015
 Better Content & Navigation
- Persona Creation
- Card Sorting
 Q&A

Introduction
4 February 13, 2015
 Focus on Mobile
 Build intuitive applications
 IA is fundamental for every industry

What is Information Architecture
 IA in every small & big project
 Most important aspects
 Example from the real live
5 February 13, 2015

 The structural design of an information environments.
 Combination of organization, labeling, search, and navigation systems
 The art and science of shaping information products and experiences to
support usability and findability
 An emerging discipline focused on bringing principles of design and
architecture to the digital landscape.
6 February 13, 2015

 Structuring
 Organization
 Labelling
 Finding
 Managing
7 February 13, 2015

Why Information Architecture Matters
 Why should you care?
 The cost of not finding information
 The value of education
 The cost of construction
8 February 13, 2015

CONFIDENTIAL © MobCon Bulgaria. All rights reserved.9 February 13, 2015
 The IA is under the surface
 Clear and appropriate the names
 Well controlled dictionary can affect the IA

Design the Information Architecture
How is mobile different
 Mobile devices are lighter
 More portable
 We feel a unique, emotional
connection to them
11 February 13, 2015

 Touch screen displays
 Limited space
 Containing only the most
important things
 Mobile data transfer
 Limited connectivity

 They are with us everywhere
 63% of people feel lost if their
smartphone are not in easy
reach
 Mobile diversity affects UCD
 - Delivery methods
- IA

 4 delivery methods
- Mobile version
- Responsive website
- Mobile native application
- Mobile hybrid application

IA patterns for web: Hierarchical tree
PROS
 Information-rich websites
 Many routes explore
CONS
 Does not fit in mobile
 Link-heavy

IA patterns for mobile: Nested Doll
PROS
 Keep users' attention
 Good for small screens
CONS
 Difficult crossing between first
& last screen

IA patterns for mobile: Hub & Spoke
PROS
 Prevent users from distractions
 Good for multi-functional apps
CONS
 The sections are isolated each
other

IA patterns for mobile: Bento Box / Dashboard
PROS
 Multi-functional tools
 Content-based tablet apps
CONS
 User's interaction between
each section

IA patterns for mobile: Filtered View
PROS
 Large quantities of content
 Suitable to be sub-pattern
CONS
 More Complex
 Difficult to display on smaller
screens

IA patterns for mobile: Tabbed View
PROS
 Good for multi-tasking
 Intuitive and easy navigation
CONS
 Best suited only to simple
content structures

IA patterns for mobile: Combined Systems
There is no right or wrong way.
Everything is based on the
projects' and users' needs

Structure Your Content
Content Inventory
 Full Content Inventory
 Partial Content Inventory
 Content Audit

Full Content Inventory
 All screens/pages
 All downloadable files
 All embedded objects
 All additional content as
users' comments

Content Inventory: What to Include?
 Link name: The label used in
navigation
 Page name
 Page URL
 Content type: how-to, product,
brochure, report, spec-doc ...
 Resources: Downloadable
files attached
 Status: Is it current or out of
date?
 Date updated
 Comments

Analyzing the users
 What type of information users need
 How they are using it
 Where they are using it
 Make sure the content is easy to use

Analyzing the users
Whom to learn from?
 Screening
 Market segmentation research
 Learn from competition

Analyzing the users
Create a Plan!
 Short introduction
 What is the intent of the study
 Basic factual or demographic questions
 Question specific for the study

Analyzing the users
The Questionnaire
 Give me more information about your current job
 Why you do exactly this job?
 What is your role in the organization?
 What are your responsibilities in your job?
 How long have you been … (designing)?
 What professional skills you have?

Analyzing the users
The Questionnaire
 What do you do to improve and develop your skills?
 What are your sources of knowledge?
 Would you consider to work for another company? Why?
 Walk me through a typical day in your life!
 How often are you online?
 What computers or devices do you use?

Analyzing the users
The Questionnaire
 When do you use each of them?
 Do you share any of them?
 What do you typically do online?
 What do you typically do on your days off?
 How do you decide what to do?
 Tell me about how your children use the internet.

Analyzing the users
The Questionnaire
 How do you decide what to do on your days off with your kids?
 What are your particular non-work interests?
 What do you read online besides the news?
 How frequently do you visit museums in your town? Which ones?

Creating Personas
 What is "User Personas"
- Fictional profile of the consumer
- Detailed description
- Focus on the target group
- Use several Personas
 How it helps us

Creating Personas
History
 The method appears in late 90's
 User archetypes, User models,
Lifestyle snapshots, and Model
users
 The Book: "The Inmates are
Running the Asylum" by Alan
Cooper

Creating Personas
When to Begin?
 Earliest in the process
 As part of the user research
process

Creating Personas
The Process of
 The whole team should be
involved
 Build relationship between the
team and the personas
 Define users characteristics
based on the research
 Add specific details

Creating Personas
Persona's Profile Information
 Name, age, gender, and a
photo
 What they do in “real life”
 Experience level in the area of
your product or service
 How they would interact with
your product
 Goals and concerns
 Quotes to sum up the
persona’s attitude

Card Sorting
 What is Card Sorting
 What are the benefits
- Create the structure of your app
- What to put on the home screen
- Labeling the items in the navigation

Card Sorting
Types
 Open Card Sorting
 Closed Card Sorting
 Hybrid Card Sorting

Card Sorting
Best Practices
 Limit the number of cards
 Estimate the time
 Think about the benefits of each
session

Card Sorting
How to Conduct
 Prepare the Cards
 Set-up the Session
 Lead the Session
 Remote sorting sessions
 Analyze Your Data

Card Sorting
Prepare the Cards
 Create your list of content topics (50 or less)
 List the most important
 Base the list on the Content Inventory
 Physical or Online card-sorting

Card Sorting
Set-up the Session
 Plan about 20min. for 30 / 30min. for 50 cards
 Make sure everything works
 Involve another member of your team
 Arrange for payment

Card Sorting
Lead the Session
 Show the cards and share the intent
 Ask the participant to talk out loud
 Ask if some of the groups could be combined
 Ask the participant to name each category
 Thank the participant and give the payment

Card Sorting
Remote Session
 Create your list of content topics
 Prepare the cards according to the software instructions
 Email your participants a link to the study
 Ask them to leave a comment
 Thank the participant
 Provide instructions for receiving payment

Card Sorting
Analyze your Data
 Use the generated data by the software
 Take a photo of the cards for physical sessions
 Analyze quantitative information
- Which cards appeared together most often
- How often cards appeared in specific categories
 Pull together your findings in a report

Card Sorting
Time to Practice

References & Sources:
http://iainstitute.org
http://www.nngroup.com
http://www.uxbooth.com
http://www.smashingmagazine.com
http://www.usability.gov/
https://www.interaction-design.org/encyclopedia/card_sorting.html
https://www.interaction-design.org/encyclopedia/personas.html
http://alistapart.com/article/interviewing-humans
http://www.ux-lady.com/diy-user-personas/
• A Practical Guide to Information Architecture - by Donna Spencer
• Information Architecture for the World Wide Web - by Louis Rosenfeld and Peter Morville
Websites:
Books:

Thank you
Lazar Petrakiev
Creative Lead
MentorMate
Lazar_PetrakievLazar Petrakiev

Mobile Information Architecture Workshop

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Mobile Information Architecture Workshop

Similaire à Mobile Information Architecture Workshop (20)

Mobile Information Architecture Workshop