Usability and UX

What is Design, UX, Usability, UI?

Design could be viewed as an activity that translates an idea into a

blueprint for something useful, whether it's a car, a building, a graphic, a
service or a process.

Usability is about ease of use: a highly usable product enables the user to
achieve their goals quickly, with minimum fuss or frustration and without
error. (Simple, Usable, Easy to learn, consistent)

User experience includes usability, but also encompasses a more

emotional dimension. (PET)

Learning by pictures

Management think usability (or design) is fix or lipstick.

It is an overall design strategy if you really care about design. The DNA
of product life cycle.

What is design?
Alex White
To design means to plan. The process of design is used to bring order
from chaos and randomness.
Victor Papanek
Design is the conscious effort to impose meaningful order.
Douglas Martin (Book design: A practical Introduction)
Questions about whether design is necessary or affordable are quite
beside the point: Design is INEVITABLE. The alternative to good design is
bad design, not no design at all.

How to start, Where to start, Who can start and What is in for me?
Who can contribute

Where to start

Product Manager
Designer
Testing
Developer

Design
Design
Design
Design
Design
Tools
----

Strategy
Process
methods
principles
guidelines

How to start?
Leave it all, lets invert the pyramid and start such that every one can get
started and contribute. (The low hanging fruits)
Creation of design DNA.

What is IxD, IA, ID, Visual Design?

The Five Layers of User Experience

Surface Plane
Skeleton Plane
Structure Plane
Scope Plane
Strategy Plane

User need, goals.

Business goals.

1. Bob(Persona) wants a home where he can peacefully live with his mother, wife and 2 children. He has
limited saving and has taken loan to build his home.
2. Bob has two cars.
3. His mother is not in good health and loves nature and likes to spend time sitting outside the house and
watching trees and birds.
4. His elder son is in college and is enrolled to gym but he has to miss it sometimes as he has to assist his
professor to support is education.
5. His younger daughter is in music and want to become a professional singer.

The Five Layers of User Experience

Surface Plane
Skeleton Plane
Structure Plane
Scope Plane

1.
2.
3.
4.

Features, functions.
Services, facilities.
Content.

Strategy Plane

The house should have atleast 3 bed rooms and single floor.
There should be space inside the house to park two cars.
There should be porch and it should be covered.
There should be big room which can accommodate gym and space for music equipments.

The Five Layers of User Experience

Surface Plane
Skeleton Plane
Structure Plane

IA: Organize content into logical

hierarchies and categories.
IxD: User workflow to achieve
goal.

Scope Plane
Strategy Plane

IA: Information Architecture

IxD: Interaction Design

The Five Layers of User Experience

1. IA: The layout of the house to match the user need.

2. IxD: The house provide different functions (for interaction) for every one in the family to accomplish
their needs. E.G. The daughter can practice her music for hours without disturbing others.

The Five Layers of User Experience

Surface Plane
Skeleton Plane

Navigation design: Where you are

right know, where you can go from
here, where did you come from.
Information design: Layout,
placements.
Interface design: Widgets, controls.

Structure Plane
Scope Plane
Strategy Plane

The Five Layers of User Experience

Navigation design: Where family members can go from a room and how they can reach that room.

The Five Layers of User Experience

1. Information design: How the items in this bedroom will be placed? Like the bed, chairs,
almirah, Lamp etc.
2. Interface design: The items in this bedroom and their functions to support the required
placement. Like the bed (Will have drawers) ,chairs, almirah, Lamp etc.

The Five Layers of User Experience

Surface Plane

Visual design: Colour, Touch, Text

Images, Look.

Skeleton Plane
Structure Plane
Scope Plane
Strategy Plane

The Five Layers of User Experience

Visual design: The color, look, touch of the items in this bedroom. Like bed will be glossy in touch for
smoothness, will be round around edges and will have yellow and white color.

For Developer

How to eliminate the common design blunders while development

GUI Control
-

Using the wrong control

Mutually exclusive checkboxes.

Using controls wrongly

Dynamic menus.

Navigation
Textual
Layout and Windows
Visual
Interaction
Responsive

Mutually exclusive checkboxes

For Developer

How to eliminate the common design blunders while development

GUI Control
-

Using the wrong control

Mutually exclusive checkboxes.

Using controls wrongly

Dynamic menus.

Navigation
Textual
Layout and Windows
Visual
Interaction
Responsive

Dynamic menus

For Testing

Heuristic are 10 most general principles for interaction design. They are more
in the nature of rules of thumb than specific usability guidelines.

No. of evaluator find problem and provide severity ratings.

The severity of a usability problem is a combination of three factors:

-

The frequency with which the problem occurs: Is it common or rare?

The impact of the problem if it occurs: Will it be easy or difficult for the users to overcome?
The persistence of the problem: Is it a one-time problem that users can overcome once they know about
it or will users repeatedly be bothered by the problem?

A heuristic evaluation with four evaluators would cost $6,400 and would find
usability problems worth $395,000.

Ten Heuristics

Visibility of system status

Match between system and the real world

User control and freedom

Consistency and standards

Error prevention

Recognition rather than recall

Flexibility and efficiency of use

Aesthetic and minimalist design

Help users recognize, diagnose, and recover from errors

Help and documentation

Product Manager
PM: Market Information, User Need and Goal, Persona, Scenario of use.

Need-Goal-Intent-Insight-Constraint

Problem statement-Design Opportunity-Design Ideas

Brainstorm

Prototype

Test-Feedback

Agile

Who: Your persona (Refine the backlog to give priority to your primary persona).

What: Need, Goal of user or design opportunities.

Why: Insight or learning you discovered about your user.

How: To-be scenario of the product.

Persona
Bill Cosby (US Comedian)

I dont know the key to success but the key to failure is trying to please everybody.

Why we need Persona?

Users become real people, with real needs and behaviours. This reduces the
likelihood that you will arbitrarily introduce unrealistic features or behaviours into
your product.

Personas help you align product decisions to a specific person and behaviours. They
can also help resolve disagreements around features by asking Would our persona
really behave like this?.

Personas help you communicate the reasons behind your design decisions to
stakeholders.

Meet Mike Control Room Operator

Meet Mike Control Room Operator

Personal background:

Michael (Mike), age 38

Location: Lives in a rural residential area nearby his home town.

Status: Has a relationship with a girl he met in a pub a while

back.

Hobbies: Loves football, particularly Manchester United never

misses a match; also plays in a team of friends on occasion for
the fun of it and the beers after, not so much for its sportive
character. Mike is well integrated into his local community, e.g.
member of a volunteer fire company.

Professional background:

Education: Electronics technician.

Started professional training right after school, still works for the
same company he was trained at.

Initially a field agent, he was later asked to join the control

center.

Information provided by Uwe Pfizenmaier (PM Network Division)

Meet Mike Control Room Operator

Tasks:
Taking

calls/reports from the field, most communication via phone

or radio.
Monitoring information on the wall and his desktop using various
tools, only very occasionally interacts with the wall (or asks
supervisor to do so).
Logging incidents, documenting actions.
Responding to events as quickly as possible; has rigid steps to
follow.
Sharing information, escalating events to supervisor as needed.

Likes/Dislikes:
Not

very computer savvy as he never really learned it; sometimes

still rather prefers books and paper over computer based tools.
Although it can be boring, he likes monitoring what's happening
on the wall as he still finds it the technology fascinating and cool;
he also fancies a chat with his former colleagues in the field.
Doesnt like to work in shifts as it complicates his leisure time, but
he came to terms with it and learned to make the best of it.
Information provided by Uwe Pfizenmaier (PM Network Division)

Meet Mike Control Room Operator

Goals/Motivation:

Not very ambitious, knows that he's currently doing fine in his job and
that's enough for him.

Wants to avoid too much hassle.

People on the floor and in the fields as well as the spacy

environment motivate him.

Likes to share his knowledge and experience.

Challenges:

Workflows and technology that are difficult to understand and use.

Too many different tools can be irritating.

Information provided by Uwe Pfizenmaier (PM Network Division)

 User type:

Meet Mike Control Room Operator

Novice

Inter-mediate

Expert

Quotes:

I loved to work in the field, but its also great to be part of the
control room group. I still get to talk a lot with my old folks.

Its a job of extremes: sometimes nothing exciting really

happens for days and weeks, but then you suddenly have to do
the right steps in just seconds.

Sometimes I feel a little overwhelmed by all this modern

technology around me. But its pretty cool, too.
Frequency:

Information provided by Uwe Pfizenmaier (PM Network Division)

Interaction:

Daily

Active

Weekly

Passive

Monthly

Yearly

Once

For Designer
Massimo Vignelli quotes Helvetica
The life of a designer is a life of fight. Fight against the ugliness. Just like a
doctor fights against disease. For us, the visual disease is what we have
around, and what we try to do is cure it somehow with design.

Debbie Millman (How to think like a great graphic designer)

Many of the designer in this book describe design as problem solving activity,
yet it's clear that these designers do far more than that. Despite the obvious
similarities, there is on trait shared by each and every person in this group of
designers: high level of empathy.

Design Influence
Microsoft

Bauhaus movement

International Typographic Style (or Swiss Style)

Motion design (the force of timethe way we experience the world).

Bauhaus movement
Focus on making the function beautiful is the first influence. At the heart
of the Bauhaus philosophy is stripping away superfluous decorations to
focus on the essence of the functional.

Radical reductionism to the core function

Elimination of superfluous additions

Beauty esteemed through simplicity

International Typographic Style (or Swiss Style)

Emphasizes cleanliness, readability and objectivity.

Great typography, a focus on layout and grid systems, and the use of
bold, flat color.

Seen in way-finding signage at airports and other transportation hubs.

Motion design

Saul Bass used great graphic design, typography and motion to create title
sequences that set an emotional stage for films.

Designers understood that not only could motion support those activities, it
could also aid usability, it helps explain how a thing is accomplished.

Great motion design not only adds delight and create a positive emotional
impact, but also explains and educates with its subtle and intuitive designs.

Some examples that are cool

North by Northwest http://bit.ly/hZ9A2h

Catch me if you can http://bit.ly/cWtjxE

General http://bit.ly/rgb52M

Design Inspiration

Spend time consuming before you begin creating.

Inspiration in your products or others.

Jim Jarmusch quote:

"Nothing is original. Steal from anywhere that resonates or fuels your imagination. Devour old
films, new films, music, books, paintings, photographs, poems, dreams, random
conversation, architecture, bridges, street sign, trees, clouds, bodies of waters, light and
shadows. Select only things to steal from that speak directly to your soul. If you do this, your
work (and theft) will be authentic. Authenticity is invaluable; originality is non-existent. And
dont bother concealing your thievery - celebrate it if you feel like it. In any case, always
remember what Jean-Luc Godard said: Its not where you take things from - its where you
take them to.

- Windows 8 inspiration

Office, Window media center, Zune, Xbox, problem in current system

Windows Media Center

Windows Media Center

Xbox

Zune

Windows Phone 7

Windows Phone 8

Windows 8

Microsoft: One Design

Next Step.
Scratching the tip of ice-berg (Add more people-Contribute, add, review, train)
People who Design/Usability/UX.
People who use Design/Usability/UX but dont know.
People who dont use Design/Usability/UX.

Douglas Martin (Book design: A practical Introduction)

Questions about whether design is necessary or affordable are quite beside the point:
Design is INEVITABLE. The alternative to good design is bad design, not no design at all.
If some one gives work to you and say implement it, push it back and ask:
WHY?
For WHOM?
HOW you came to know? Are you assuming? Are you sure it is what the user needs?