The black box of UX

Design Principles

The black box of UX Design

Anshuman Kumar Interaction designer

Google

But what’s User Experience Design?

Look and Feel Usability UI design

… … Or

Just a Jargon

User Experience Design is not…

User experience design is not

User interface design.

1

“User experience isn't a layer or component of a product or service. It's

really about the design of whole systems and their interconnections.”

Andrew Hinton Information architect

The Understanding Group

Jesse James Garrett user experience designer

The elements of User Experience

Web as Software Interface Web as Hypertext System


User experience design is Not

Just about usability.

2

“While usability is important, its focus on efficiency and effectiveness seems to blur the other important factors in UX,

which include learnability and visceral and behavioral emotional responses to the

products and services we use.”

David Malouf Professor of interaction design

Savannah College of Art & Design

Facets of the User Experience

http://semanticstudios.com/publications/semantics/000029.php

Facets of the User Experience

http://yfrog.com/h3j8sp


Just about technology

3

“User experience design is not limited to the confines of the computer. It doesn't even need a screen... User experience is

any interaction with any product, any artifact, any system.”

Bill DeRouchey Creative Director

Simple


Just about the User

4

“We just can’t always do what is best for the users. there are a set of business

objectives that are needing to be met—and we’re designing to that, as well.”

Russ Unger Senior UX lead

GE Capital


A step in the process

5

“User experience design isn't a checkbox. You don't do it and then move

on. It needs to be integrated into everything you do.”

Liz Danzico Chair, MFA in Interaction Design

School of Visual Arts in NYC

THE USER-CENTERED DESIGN OF DIGITAL PRODUCTSWrite user-centered requirements specificationsResearch user interface topicsCreate user interface style guidesConceptual and detailed design of user interfacesReview and test usabilityInformation architecture for large bodies of contentWrite and edit documentation

INFORMATIONARCHITECTURE

SCENARIOSOF USE

FUTURE STATE

MOCK-UP

TAXONOMYAND METADATA

TESTREPORT

STYLEGUIDE

CONCEPTUALDESIGN

USECASES

USER REQUIREMENTS

I’m going to kill myself. I should go to Paris and jumpoff the Eiffel Tower. I’ll bedead. You know, in fact, if I get the Concorde, I could be dead three hours earlier,which would be perfect. Orwait a minute. It – with thetime change, I could be alivefor six hours in New York butdead three hours in Paris. I could get things done, and I could also be dead.

Woody Allen (one of the greatestpersonas of the 20th century… goodthing he didn’t take the plane toParis)

“Those things that hurt,instruct.”

Ben Franklin

“Break it, stretch it, bend it,crush it, crack it, fold it.”

Bruce Mau, Lifestyle

CONTENTINVENTORY

FIELD STUDIES

RESEARCHREPORT

GRAPHICDESIGN

DETAILEDSPECIFICATION DOCUMENTATION

EXPERTREVIEW

USABILITY TEST PROTOCOL

COMMUNICATION PLANA document describing the scope and the planning of the communication project: what is to be communicated, for whom and how;where the challenges and opportunities lie.

CONCEPTUAL DESIGNA set of sketches illustrating the main interactionconcept of a digital product. The conceptualdesign starts with paper and pencil.

CONCEPTUAL MODELThe concepts that the design must communicatein order for the user to understand and operatethe product. The conceptual model differs from the technical model, which is theway the developer understands the product. It also differs from the mental model, which isthe concept that an individual user develops in order to understand the product.

CONTENT INVENTORYA structured list of all content (documents, digitalassets, information chunks, etc.) that must beconsidered for publication in a digital product.

DETAILED SPECIFICATIONA detailed specification describes the compo-nents and behaviour of the user experience in sufficient detail for the developer, and mayinclude the design rationale.

DOCUMENTATIONThe final deliverables of a documentation project. Usually the writing process of docu-mentation takes three iterations: draft version,pre-final version, and final version.

EXPERT REVIEWDuring expert reviews, a number of expertsreview a product, first individually, then in a group, noting issues and recommendingremedial action. Experts readily use rules ofthumb (heuristics) but challenge each other’saccepted wisdom.

FIELD STUDIESObserving users in the environment in whichthey will work with the digital product that isbeing designed.

GRAPHIC DESIGNThe design of the look and feel of the digitalproduct. The graphical design usually consistsof a specification of standard colours, icons, thelocation of graphical elements and typography.

INFORMATION ARCHITECTUREDocument describing the information architec-ture of a digital product. In some cases, theinformation architecture specification offers two perspectives:• User’s side: what the user sees —the taxonomyand structuring of the information on the pages.• Authoring/Storage side: describing the author-ing and storage of the information, workflows,metadata, topics and information types.

MOCK-UPA more or less realistic simulation of the userinterface that combines the scenarios of usewith the conceptual design into real-life storiesof use. A mock-up can be created in such a way that it can be used in usability tests.

PERSONASPersonas are lively descriptions of typical users.They are based on patterns and findings gathered during field studies. Using personasprevents designers from drifting towards an idealized view of users that lacks nuance.

RESEARCH REPORTA document that expresses the findings of aresearch project. Creative and rational at thesame time, it provides insight into murky territory.

SCENARIOS OF USE[current state/future state]An engaging, richly textured story of one ormore users who use tools to achieve goals.Current-state scenarios cover how usersaccomplish those goals now, before introducingthe new product. Future-state scenarios explorehow the envisaged product would affect thestoryline.

STYLE GUIDEA document describing the formal conventionsto be followed within a family of digital prod-ucts. Conventions can be lexical (what are thecodes, both visual and linguistic) and syntacti-cal (how the codes can be assembled to formpractical wholes).

TAXONOMY AND METADATADesign of the information structure, the labellingand the terminology that will be applied to thecontent of a digital product. The informationstructure is usually a tree or a matrix (facetedclassification).

TEST REPORTThe report summarizes the results of the usabili-ty tests, identifies the design issues that need tobe re-considered, and offers recommendationsfor improvement.

USABILITY TESTA method by which users of a product are askedto perform tasks in an effort to measure theproduct’s ease-of-use, task time, and the user’sperception of the product.

USABILITY TEST PROTOCOLThe protocol describes scope, goals, settings,instructions and tasks to be performed by a test participant.

USE CASESA use case defines a set of use-case instancesin which each instance is a sequence of actionsa system performs that yields an observableresult of value to a particular actor, often a user.

USER REQUIREMENTSUser requirements are a formal expression of the desired functions and qualities of thefuture digital product. Not only product features,but also non-functional requirements, such as reliability and usability, are included.

Cur

rent

sta

te

Futu

re s

tate

Cur

rent

sta

te

Futu

re s

tate

TIME

NAMAHN

PERSONAS

SCENARIOSOF USE

CURRENT STATE

USABILITYTEST

“I write scripts to serve asskeletons awaiting the fleshand sinew of images.”

Ingmar Bergman, NY Times 22 Jan 78

“Regulations [are] written forthe obedience of fools andthe guidance of wise men.”

Anonymous. Featured in the filmReach for the Sky (UK, 1956).

“Sight, even though used byall of us so naturally, has notyet produced its civilization.Sight is swift, comprehensive,simultaneously analytic andsynthetic. It requires so littleenergy to function, as it does,at the speed of light, that itpermits our minds to receiveand hold an infinite numberof items of information in a fraction of a second. Withsight infinities are given atonce; wealth is its description.”

Caleb Gattegno, Toward a VisualCulture

An ounce of action is worth a ton of theory.

Friedrich Engels (1820 - 1895)

CONCEPTUALMODEL

“Our burgeoning digital cul-ture is heading for oblivion,and fast…future anthropolo-gists will find our pottery butnot our e-mail.”

James Gleick, Faster: theAcceleration of Just aboutEverything

SOLUTIONS

COMMUNICATION PLAN

AB

STR

AC

TIO

N

Deliverables Activities

“Rules are sparse; we forgetthem. Stories, being rich indetails, are multiply index-able...Moreover, if a rule fails,it can be reassessed onlywith great difficulty becauserules hang in the air, unat-tached to experience. But ifthe lesson attached to a spe-cific story fails, the events ofthe story can be reassessedto figure out why the lessonfailed and what other lessonmight have been drawn.”

Tell Me a Story, Roger C. Schank

“An architect is defined assomeone who forgets to putin the staircase.”

Gustave Flaubert, French novelist(1821-80), Dictionnaire des idéesreçues (1881).

Dilbert: “Your user require-ments include four hundredfeatures. Do you realize thatno human would be able touse a product with that levelof complexity?”Feature Creep: “Good point.I’d better add ‘easy to use’ to the list.”

Dilbert as quoted in PaperPrototyping, Carolyn Snyder

“To determine whether or nota spark is being delivered tothe spark plug, hold a sparkplug wire approximately 1/4inch away from the cylinderhead as the engine is crankedwith the starting motor…If aspark is noted from each ofthe wires, the trouble is notlikely to be with the ignitionsystem.”

from Ford’s 1941 Deluxe and SuperDeluxe Reference Book (Ford did notcaution the reader against gettingshocked or performing this quick-fixwhile standing in a puddle.).

“He who every morning plansthe transaction of the dayand follows out that plan,carries a thread that willguide him through the mazeof the most busy life. Butwhere no plan is laid, wherethe disposal of time is surren-dered merely to the chanceof incidence, chaos will soonreign.”

Victor Hugo (1802 - 1885)

Observation“A little manure on the bootsmay disturb city folks, but inrequirements work, you learnnot to mistake appearance for value.”

Donald C. Gause & Gerald M.Weinberg, Exploring Requirements:Quality Before Design

De

sig

n b

y Je

an-

Ma

rc K

linke

rt a

nd S

and

er

Verm

eul

en

- P

hoto

cre

dits

: Ge

ert

Alle

ga

ert

, Jo

ann

es

Vand

erm

eul

en

and

Ka

rolie

n Ta

vern

iers

- T

hank

s to

Ala

in S

chiff

ele

ers

and

And

ree

a C

hela

ru

Grensstraat/rue de la Limite 21B-1210 Brussels T +32 2 209 08 [email protected] www.namahn.com

“If you want to know whathappens when you throw a stone into a pond, it is infi-nitely better to make a trialand film it than to attempt to theorize about it.”

René Thom, Physicist“Igloo: an indigenous home constructed of local buildingmaterials. Bavarian castle: a home constructed to impress the neighbours. Space station: a mobile home with a view.”

Donald C. Gause & Gerald M. Weinberg,Exploring Requirements: Quality BeforeDesign

“Just wait, Gretel, until themoon rises, and then we shallsee the crumbs of breadwhich I have strewn about;they will show us our wayhome again.”

Hansel and Gretel

“First, the taking in of scat-tered particulars under oneIdea, so that everyoneunderstands what is beingtalked about…Second, theseparation of the Idea intoparts, by dividing it at thejoints, as nature directs, not breaking any limb in half as a bad carver might.”

Plato, Phaedrus, 265D

Minding the user throughout.

It stands almost completeand finished in my mind sothat I can survey it like a finepicture or a beautiful statue.

Wolfgang Amadeus Mozart, fromInformation Design, edited by RobertJacobson

The men of experiment arelike the ant, they only collectand use; the reasonersresemble spiders, who makecobwebs out of their ownsubstance. But the bee takesthe middle course: it gathersits material from the flowersof the garden and field, buttransforms and digests it by a power of its own. Not unlikethis is the true business ofphilosophy (science).

Francis Bacon

“Technical work needsreviewing for the same reason that pencils neederasers: to err is human.”

Freedman and Weinberg, Handbookof Walkthroughs, Inspections andTechnical Reviews

http://www.namahn.com/sites/default/files/Namahn-2004poster.pdf

User experience design is Not Easy

6


the role of one person or department.

7

“User experience isn’t just the responsibility of a department or a person.

This compartmentalize view of UX is evidence that UX is not a part of the

organizational culture and hints to teams not having a common goal or vision for

the experience they should deliver collectively.”

Livia Labate

Senior Director, User Experience Design at Marriott International


A choice

8

“The biggest misconception is that companies have a choice to invest in their user’s experience. To survive, they don’t.”

Joshua Porter Principal

Bokardo Design

Experiences happen, whether or not you plan them.

When not intentionally designed, there’s a much higher likelihood of the

experience being poor.

Some Guru

Further Reading ... http://www.abookapart.com/products/complete-library

Free online certification course... www.coursera.org/cource/hci

QUESTIONS?

Asim Janjua [email protected]

http://mashable.com/2009/01/09/user-experience-design/

Acknowledgements

10 Most Common Misconceptions About User Experience Design – Whitney Hess

The black box of UX

Design

Transcript of The black box of UX