In-App Feature Tours

Recently we conducted a usability test on an app that we had worked on for awhile. Something that striked me was because we worked on it so much we totally forgot that users of the app would not know how to use certain functions right off the bat. It reminded me of how people often say, “Do not ever assume that we are the users because we are not.” And it was something that we usually are unaware and do not think much of but after going through testing we realise it plays a huge factor in how a user would use an app and the experience they would get at the end of the day.

Denis Baranov on Quora (Dec 29 2011) wrote that “feature tours are a best practice for first user experience” because it provides “against confusions in the UI and get users engaged with the product right away”. Having said that, he does highlight that people do opt to skip them. He provides a relevant reference on patterns and best practices in creating an app tour from http://www.uxbooth.com/blog/mobile-design-patters/.

From the site, it shows a chapter excerpt of the book Mobile Design Pattern Gallery written by Theresa Neil (Nov 17, 2011). It specifically looks at “Invitations” which she defines as “helpful tips that are displayed the first time a user opens an application”. It guides the user to the intended functionalities that exist within the app. Each invitation pattern has its own pros and cons to using it. It can consist the following types:

1) Dialog
2) Tip
3) Tour
4) Demo
5) Transparency
6) Embedded
7) Persistent
8) Discoverable

Things to keep in mind and question is out of these patterns listed above, how many people actually pay attention to them or go through them? Do people tend to just briefly go through them, skip them or just not bother? When does it become irrelevant? When does it become a reason of instead of engaging with the user, it ends up confusing and complicating matters? Examples of this happening could be resulted from having the whole event take too long and boring or it was not visually appealing and the information presented is complicated and confusing that there was no point to reading it? Do you go through an app tour when you first use a new app you downloaded onto your smart phone if they had it? Food for thought.

Reading or Scanning?

Back in April 2011, I wrote about how I was reading all over the place: on my laptop, iPad 2, twitter links, blogs, whitepapers, RSS feeds, and so forth. So I came across something interesting written by Jakob Nielsen saying that research conducted shows “79% of web users scan rather than read” providing explanations to the reasons in why this is so [1]. Three points were highlighted which I agree with the author.

The first is that if I read something online, I am more inclined to quickly move onto the next page or see some other pages. The reason behind this is that I would feel that I have been very unproductive. The second point would be that since now everyone online with a web page is competing to get a user’s attention, how does the user determine whether this is really the site they are looking for? From a designer’s perspective the colors and typography that gets chosen then becomes very important because this is what a user will see first. Even though we say that we shouldn’t judge a book by its cover, we are actually doing this unknowingly when we surf websites in attempting to find information [2].

According to McGovern (2008) [3] ”We don’t (even) scan a webpage but instead we scan only a particular block or section of it.” His studies show that areas of interest to a user is the left column where users expect to see the core navigation. For a huge range of products then it is expected the left and center columns would merge as one single block. The right block apparently has little or no view at all.

So I wonder if a designer highlights the right block with beautiful colors and specific call to actions, will the right block still have little or no views? I doubt so right because the eyes would immediately see the contrasting element of how different the right side is in comparison to the rest of the page. What do you think? Do you agree with any of the studies conducted?
[1] http://www.useit.com/alertbox/whyscanning.html

[2] http://uxmyths.com/post/647473628/myth-people-read-on-the-web

[3] http://www.gerrymcgovern.com/nt/2008/nt-2008-10-06-block-reading.htm

Disrupt – Luke Williams

Content taken from the book: Disrupt – Think the Unthinkable to Spark Transformation in Your Business
Author: Luke Williams

In chapter 2 Discovering a Disruptive Opportunity, this book introduces on the topic of contextual research. So in taking action, the book highlights on three main things, observations, insights, and opportunities. He states the importance of what each element involves.

In chapter 3, one part that left an impression was on p.82 when he quotes someone saying “We don’t need any more ideas; we have too many. We don’t have them written down or anything but we discuss them a lot.” The author highlights the fact that this is the problem in a nutshell that we talk about ideas in general terms but abstraction makes it harder to understand the idea and remember it.

Observations feed insights. Insights feed opportunities. Opportunities feed ideas.
When putting down descriptions use the template:

A ___ [label] that allows ___ [user] to ____[benefit] by ____[method].

Chapter 4, the aim is to explain to the reader that it is not enough just to come up with something disruptive but it has to be disruptive in ways that are valued by users. Practical solutions require actively involving end users to test and review. Listen and observe users reactions. Value in prototypes is more towards the interactions, conversations, arguments, collaborations they invite.

Looking at prototype, you are designing an experience. Ask yourself, “what kind of interactions do I want to create?” Create storyboards of step-by-step pictures of how people will accomplish specific tasks when interacting with your offering. Draw a separate picture for each action the consumer takes while experiencing the key aspects of your idea.

After this your create a mock-up of the overall structure of the product (inclusive of functionality, service and information components).

In chapter 5, Luke Williams talks about the 9 minute & 9 slide pitch being the most effective time frame and content in delivering one’s message. He also does a breakdown of what each slide should be about where he highlights the importance of the hook of building empathy (what are the changes) and tension (why) at the beginning but also providing high concept analogy to buy in understanding from the audience through juxtaposing two ideas from non related industries.

This is _____ (analogous example) for _______ (your category).
This is the Volvo XC70 for inkjet printers.

We’re doing for ______ (your category) what ______ (analogous example) did for ______ (alternative category).
We’re doing for sock what Nike did for running shoes.

The 9 slide layout format:
1) The Status Quo – state the problem in industry here
2) The Observations – focus on the consumers, what are the tension points, explains why this is an issue
3) The Story – creates empathy and how that’s frustrating the target customer
Slides 4-6 building tension
4) The Insight – say what they don’t know
5) The Turning Point / Opportunity
6) The Analogy – make it familiar
Slides 7-9 make the audience believe
7) The Solution – solution name, brief description, visual on how it works, key points of difference than what offered is different. Describe components, features and functionality
8 ) The Advantages – make changes appealing in order to persuade. Shift the focus from the need to motivate the change.

Look at who are the early adopters (graph is introduction, growth, maturity and decline). “Introduction stage – focus on early adopters to refine and tune the solution before going anywhere mainstream. You never start in the mainstream markets so don’t talk about targeting these people “revolutionary goals but evolutionary steps”.

Second look at key stakeholders (especially those you’ll need to implement the new system). Suppliers, partners and alliances. Need to show them advantages in adopting your idea and convince them the change is worthwhile.

9) The Ethos – leave them on a high, a mantra of some sorts.

I found this book a good read. I guess with all such books reading about it is not sufficient. You still have to get your hands dirty and throw yourself out there just to see if it works. Give it a go and would love to hear whether it works for you.

As Luke quotes Marc Andreesen, “If you believe human wants and needs are infinite, then there are infinite industries to be created, infinite businesses to be started, and infinite jobs to be done, and the only limiting factor is human imagination.” Sometimes it’s not only about focusing on the problems – things that don’t work and need fixing but there are other ways in looking at the process. It is a mindset of looking beyond, looking at things that have been consistently overlooked or underserved.

Users and Patterns

Everyone has their own perspective and interpretation of Information Architecture.

This week: Looking at user’s needs

IA Framework

Components:
Organisational context – important – context of use – what is it used for?
Look at data collection
Who are the users, relationships between the system to user and system to content

Mental / Cognitive Aspects

• Brain – 5 senses “sensory perception”
  • “Scent” – used in marketing. (eg perfume)
    Project now looking at scent (smell) and emotion.
    Scent and taste not exploited yet in computer systems.
  • Attention – how to ensure the user pays attention to the system?

Understand user’s mental models and knowledge in long term memory

Looking at website – information can be inferred. Simple colorful websites are usually for children?

Certain behavior of users from talking to them. Confirm in focus groups.

Understand the mental model, sensory perception and attitudes.

Cognitive is abstract. To make concrete, they look at behavioral aspects.

Look at tasks, information needs, information seeking behavior.

Mental model:

Users have a mental model /  Designers try to understand the mental model (add diagram)

To be effective, designers need to know the users model.

Users

Understand the users with the system via the interface.

What is the mental model of the user.
Interactions user has with the system.

User models:
1) User profile – demographics – gender, age, nationality (descriptions of who you are)
2) Persona – personality, behavior, preferences / interests, important in HCI –

User centered design – cater to all users – impossible for all – space is infinite so we have to make it finite groups. Thus design for majority using personas.
Can design for general requirements
Specifics for persona A, persona B – categories of users
EX: Clothes sizes S/M/L/XL/XXL

80 / 20 principle – 20 percent of your effort to do 80 percent of the work

3) Scenarios – models of common tasks and situations of what a real person will do. Description of set of tasks the user that he does.

Context – Background and why he is doing it.

4) Prototypes – part of working real system

Mockup = shell of the real system

Concepts

IA – looks at the broader perspective

• Organizational culture – shared set of beliefs / prevalent in the organization
• Mission and vision statements and strategic plans. (Only in IA)
  • What you hope to be (vision)
  • What you want to achieve (mission)

System not an isolated part.

(add diagram here)

Ergonomics – study of human factors – distance between the user and the hardware – like you layout, does not concern itself with the Enterprise because it has an impact of the use.

Cognitive Framework

• Visual perception
  • Icons and symbols.
    • Icons is an image. (eg diskette means to save)
  • Also involves location and positioning of the icons and symbols
• Attention
  • Top left = more visible = more attention
• Interaction
  • Address the user’s attention and focus this attention
  • How is this done?
• Focus Users’ Attention
  • Structure information
  • Using colors
    • Making things multicolors removes the focus
  • Alert mechanisms
    • Flashy, sounds
  • Spatial and temporal cues
• Memory

Baddeley’s working memory model

• Iconic
  • Visual, auditory
• Short
  • Limited capacity
  • Remember in sets / chunks / grouping
    • Group things together
    • Requires organization of information
• Long
  • Deep level processing and recall using “cues” to LTM (Long Term Memory).

• Problem Solving and Decision Making
  • Understand how people make decisions which can help people solve problems
    (eg FAQ)
• Mental Models
  • If mental model of person is not same as system model , usability problems will occur.
  • Changes over time, expertise has increased.
  • Design something appropriate
    • Consider social and cultural as well as organizational
    • What is ok in one country may not be accepted in other countries
    • User types – age, experience, usage

Intuitive – can get a grasp of it very fast

Good interface when you have cues for a person recall

Recognition is better than recall however tied to STM (Short Term Memory)

Information Processing in relation to Systems

• Human information processing model  (Earliest)
  • Encode -> Compare -> Response Selection -> Response Execution
  • Unidirectional / sequential
  • If cannot recall (comparison stage), a response selection would not be able to occur
  • Information Science
  • Generic model
• Norman’s Task CompletionModel
  • 7 stages that a user goes through as an action
  • GOALS –  Intention – Action specification – execution –physical activity – perception – interpretation – evaluation
  • Cognitive activities / mental – HCI
  • Generic model

Users go to a website they have a goal in mind and they want to get what they want ASAP.

• Information Seeking Models
  • Information Systems have common tasks like seeking information
    • Taken from Information Science
  • Models

Can I apply this to the design to the information system? Think the system as a process.

• Eisenberg’s Big Six
  • Will use 6 types of skills – can use all Information Literate
    • 1)Task definition, 2) info seeking strategies, 3)location and access, 4)use of information , 5)synthesis, 6)evaluation.
  • Task definition – define and identify the problem. What the user wants to see and what info is needed.
  • Is this sequencial? 1 must come first but 2, 3,  does not necessarily run in this order, 4, 5, 6 is sequential
• Ellis’
  • 8 steps
    • 1)Starting, 2)Chaining, 3)Browsing, 4)Differentiating, 5)Monitoring, 6)Extracting, 7)Verifying, 8)Ending
    • Chaining follow clues. From one article link to another article aka chaining
    • Differentiating – comparing and contrast
    • Not all sequential. 2-6 may not need be in sequence.
• Kuhlthau’s
  • Believes users will exhibit: feelings, thoughts and actions
  • 1)Initiation, 2)Selection, 3)Exploration, 4)Formulation, 5)Collection, 6)Presentation
  • Do we want to have assurance in dealing with the users feelings?
• Belkin’s 4 dimensions of information seeking strategies

Strategy types:

1)      Method of interaction (scan-search)

2)      Goal of interaction (learn-select)

3)      Mode of retrieval (recognition-specification)

1. Retrieval – take and pay

4)      Resource considered (information items meta information)

1. Broad overview of what I would need
2. Look it up and go to that place.

• Westbrook’s
  • Needing, Starting, Working, Deciding, Closing

When thinking of a design, there is design rationale, and have justification, explain from the perspective and address of the user.

One action involves a series of activities. Design is like a movie going through a continuous sequence of steps. This allows easy comprehension of “scenario”.

Week 2

IA – structuring info.
q) What is the diff between knowledge, information or data?
1) data = raw
2) information  = processed data
3) knowledge = applied information, structured information.

Art has more subjective.
Science has more discipline approach.
To support usability and findability especially with big databases.

IA can also look at data modeling and the analysis, their relationships and associations.

Practice – articulates the objectives of the information and understand the intended audience.  Can package the information as per intended audience. What do you want to do with the information?
Develop taxonomies, how you want users to navigate, group topics and categories.

Purpose: reusability (for the same purpose)
q) Why reuse?
To save cost and efficiency in time but got challenges. Can be outdated information or over generalization. Misunderstand the objective. Infringing on copyrights (Digital Rights Management).

Focus on user. Know who they are and how to meet their needs.

Taxonomy – subset of IA.

—————————————————————————————————-

Information and Interaction Patterns
Easily understood

Designs

Info Design:
(Rob Waller) Address all the diff prospective of presenting information with intention to communicate complex information.
Organisation, structure, look and feel.
(Richard Saul Wurman) Concept of maps and wanted people to locate information, categorizing into genres.

Idea: Visual display of data/information. Most times overlooked.

Library Information Science:

Human Computer Interaction:
Idea: to make it more usable by people. To support people so they can carry out their tasks efficiently, effectively and enjoyable.

ISO 9241: Usability must meet these 3 components – effectiveness, efficiency and satisfaction.
effectiveness – accuracy and completeness
efficiency – in relation to resources, accuracy and completeness in time
satisfaction – subjective view of the user. Comfort and acceptability

Patterns

Purpose of reusing and doing things fast.
Popular by Software Engineers.
Describing and defining a feature whereby other people can use.
eg word templates, log in panels
Serve as an aid to help people in design.

Design pattern is not a finished design – it is a template for how to solve a problem.

HCI users interacting with the system
General repeatable solution to a commonly occurring usability or accessibility.

Diff between software pattern vs HCI patterns.
Software – backend
HCI – user interface level

http://designinginterfaces.com

Patterns are structural. Something that is familiar to the users. Features that improve the habitability of something. People that can identify it, people will be more acceptable of it.
(eg blue underline text is a link – pattern)
affordance (technical term) – once you see it you would know how to use it
Whole idea of familiarity is important – identification and experience.
Habit – something that is a repeated behavior (eg waking up at a certain time, reading from left to right).
Memory – cognitive short and long term (eg remember up, down arrows).

q) why patterns?
avoid repeated errors
intro existing interactions

For interactive design pattern, should have set of structured elements (problem, context, principle – more established guideline, solution, why – how and the why, example)

Guideline vs Pattern
Guidelines are more general and open to interpretation (and abuse).  Can make changes.
A pattern sets the tone. Less room for ambiguity and interpretation and less likely one make changes. Stringent.

There is a lot of guidelines where it is difficult to find the “right” one. There is a lack of description of the context where the guideline applies. Can be vaguely interpreted.

Patterns – limits the creativities and innovation.
Guidelines gives you room of creativity but opens up to wrong interpretation.

In deciding to use which one, have to ask “Do I have the time to explore and the resources?”.

Objective and audience determines the design of the website.

IA – structuring info.
q) What is the diff between knowledge, information or data?
1) data = raw
2) information  = processed data
3) knowledge = applied information, structured information.

Art has more subjective.
Science has more discipline approach.
To support usability and findability especially with big databases.

IA can also look at data modeling and the analysis, their relationships and associations.

Practice – articulates the objectives of the information and understand the intended audience.  Can package the information as per intended audience. What do you want to do with the information?
Develop taxonomies, how you want users to navigate, group topics and categories.

Purpose: reusability (for the same purpose)
q) Why reuse?
To save cost and efficiency in time but got challenges. Can be outdated information or over generalization. Misunderstand the objective. Infringing on copyrights (Digital Rights Management).

Focus on user. Know who they are and how to meet their needs.

Taxonomy – subset of IA.

—————————————————————————————————-

Information and Interaction Patterns
Easily understood

Designs

Info Design:
(Rob Waller) Address all the diff prospective of presenting information with intention to communicate complex information.
Organisation, structure, look and feel.
(Richard Saul Wurman) Concept of maps and wanted people to locate information, categorizing into genres.

Idea: Visual display of data/information. Most times overlooked.

Library Information Science:

Human Computer Interaction:
Idea: to make it more usable by people. To support people so they can carry out their tasks efficiently, effectively and enjoyable.

ISO 9241: Usability must meet these 3 components – effectiveness, efficiency and satisfaction.
effectiveness – accuracy and completeness
efficiency – in relation to resources, accuracy and completeness in time
satisfaction – subjective view of the user. Comfort and acceptability

Patterns

Purpose of reusing and doing things fast.
Popular by Software Engineers.
Describing and defining a feature whereby other people can use.
eg word templates, log in panels
Serve as an aid to help people in design.

Design pattern is not a finished design – it is a template for how to solve a problem.

HCI users interacting with the system
General repeatable solution to a commonly occurring usability or accessibility.

Diff between software pattern vs HCI patterns.
Software – backend
HCI – user interface level

 http://designinginterfaces.com

Patterns are structural. Something that is familiar to the users. Features that improve the habitability of something. People that can identify it, people will be more acceptable of it.
(eg blue underline text is a link – pattern)
affordance (technical term) – once you see it you would know how to use it
Whole idea of familiarity is important – identification and experience.
Habit – something that is a repeated behavior (eg waking up at a certain time, reading from left to right).
Memory – cognitive short and long term (eg remember up, down arrows).

q) why patterns?
avoid repeated errors
intro existing interactions

For interactive design pattern, should have set of structured elements (problem, context, principle – more established guideline, solution, why – how and the why, example)

Guideline vs Pattern
Guidelines are more general and open to interpretation (and abuse).  Can make changes.
A pattern sets the tone. Less room for ambiguity and interpretation and less likely one make changes. Stringent.

There is a lot of guidelines where it is difficult to find the “right” one. There is a lack of description of the context where the guideline applies. Can be vaguely interpreted.

Patterns – limits the creativities and innovation.
Guidelines gives you room of creativity but opens up to wrong interpretation.

In deciding to use which one, have to ask “Do I have the time to explore and the resources?”
Objective and audience determines the design of the website.

Information Architecture Introduction

Q) What are you expecting to learn from this course?
-      How to organize information on web applications and content management system.
-      What to consider and decide what is important for designing the portal / website. Gathering requirements

 Will be looking at techniques, methods (patterns / design patterns).
“Patterns helps in making the design better.”
“Design of good websites should adopt patterns.”
Q) Agree? Disagree? Are patterns really good? And for what purpose?            Are the statements correct?
Advantages? Disadvantages?

“Information Architecture” == IA
A recent term but theory behind it isn’t.
Different views on IA – blueprint / plan? Process?
Represented via site maps, flow charts, screen level design prototypes – taxonomies

Q) What does taxonomies mean? – noun the scientific process of classifying things [Oxford] Oxford The Australian Student’s Color Dictionary

Architecture vs Engineering
Q) What do you see when you see in a building?
Functions / shops / safety / facilities / how things are positioned
Location of the building
Building in relation to environment
Look and feel (aesthetics)

When we look at architecture, everybody looks at it differently. Why?
Based on their own “aspects” and their own needs.
For everybody there are different levels of satisfaction.
How does one measure the sense of satisfaction?

There are also different types of user experience dependent on their interactions.

Science vs Art
Science – looks at the concrete, something that can be provable, systematic
Art – the look and feel, “element of creativity and aesthetics that cannot be replicated”- Dr Theng Yin Leng

Digital landscape – no longer only websites / portal
Now include games, mobile applications, etc

Q) What is exactly Information Architect and Information Architecture?
How much is based on perceptions (which is affected by culture) or on facts?
-      IA – huge spaces of information and how one can structure it
(common words)
-      User centric, meaningful
-      Structured, organizing, patterns, design, interaction
-      Find ability and search ability
(other words)
-      Objective, modeling, usability, big picture
(Mostly nouns and adjectives)

Architect – a person who plans and organizes patterns.
They are the brain of the design. Gathers a holistic view (big picture) of the situation before deciding of the design. Decides on the organization of the information.

The qualification of how good it is – through navigation and browsing? Scalability and sustainability?
Different set of concepts, efficiency and effectiveness.
Q) What does it mean by efficiency and effectiveness? In what sense is this true?

The interaction between the user to the visual design.
Q) What do you see? How is the look and feel?
What they see and what do they do with it?

Usability based on ease of use and does it meet user’s needs.
Do some form of evaluation? – Usability Engineering.

Extended architecture will look at the enterprise systems.

IAD Program Overview

Lecturer majors in HCI. Googled her under Scholar Google. She’s written very impressive papers…

First part = Information and Design
Who we are designing for?

Second part = Architecture
Organizing and structure

One concept a week. 1.5 hr lecture / 1.5 hr tutorial

Ass 1 (20 marks)         grp 3-4
Ass 2 (16 marks)         grp 3-4
Ass 3 (14 marks)         indiv

Ass 1: User-centred Design patterns for Effective Interaction
Q) What does it mean by user centred?
Why is there effectiveness?
Will be looking at websites (educational, health care, interactive gamers)

Ass 2: links back to Ass 1

Ass 3: looks at the impacts of “information architecture” on the domains of education, government, commerce, health care and game.