User ExperienceDesign

in context ofGraphic Design

~Jiri Jerabek~

01 The Aimof The Presentation→→explaining→the→term→“user→experience”

→→what→is→the→aim→of→UX→design?

→→how→UX→design→relates→to→graphic→design?

→→examples→explaining→main→UX→design→→→ → →→ principles

→→historical→and→contemporary→confrontation→→ →→ of→phone→interface→design→

→→concludes,→what→we→as→designers→should→→ → →→ stick→to;→major→principles→of→UX→design

?What isUser Experience

Design?

02 Explaining term“User Experience”

→→User→Experience→is→how→users→feel→when→→ → →→ using→a→product→

→→ if→they→like→or→dislike→using→it→

→→determines→if→they→will→use→it→again

“03What is the aim

of UX Design?

“It doesn’t matter if you used a device hundred times successfully - you will remember the unsuccessful attempt.”Donald→Norman

→→ the→main→goal→is→to→design→a→product→which→we→→→ will→be→able→to→use→not→only→with→a→success→

→→but→with→pleasure→as→well→

→→ to→design→a→product→that→users→will→want→to→use→→→ again

“

04 How does it relate to Graphic Design?→→graphic→design→is→an→integral→part→of→the→→→ → →

→ concept→of→the→product→

→→ thus→it→is→an→integral→part→of→user→experience→→→→ design→process

“A picture is worth a thousand words. An interface is worth a thousandpictures.”Ben→Shneiderman

→→ the→user→interface→we→create→is→actually→a→→ → →→ meeting→plane→of→user’s→needs→and→product’s→→→ features→

→→when→users→see→an→interface,→they→create→a→→ →→ “conceptual→model”→in→their→mind→

→→ that→means→they→try→to→imagine→how→the→→ product→works→and→what→they→have→to→do→to→→ →→ make→the→desired→action;→ie.→to→play→a→game→on→→→ the→mobile→phone→

→→designers→know→how→the→product→works→so→→→ they→should→investigate→user’s→needs→and→→→ apply→these→findings→to→the→design→of→the→user→→→ interface→

→→designers→are→responsible→not→→only→for→how→→→ the→product→will→look→but→how→users→will→→→ interact→with→it

“05 What does make

a design successful?

“People think it’s this veneer -- that the designers are handed this box andtold, ‘Make it look good!’ That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works.”Steve→Jobs

“→→ in→today’s→society,→good→design→is→synonym→→ →

→ for→aesthetics→

→→but→good→design→is→about→good→user→→ → → → →→ experience

“Appearance has a strong impact on functionality: An application thatappears cluttered or illogical is hard to understand and use.”iPhone→Human→Interface→Guidelines

→→decisions→leading→to→successful→design→aren’t→→→ accidental,→they→are→a→result→of→strategy→→ planning,→careful→research→and→user→testing→

→→ it’s→very→important→to→research→who→we→design→→→ for→-→the→users→-→what→their→needs→and→→→ problems→are,→how→the→product→is→going→to→→→ help→them

06 So is it justabout the users?

→→we→do→not→design→only→to→satisfy→users’→needs,→→→ but→to→meet→needs→and→goals→of→→ the→manufacturers→as→well

07What is UX Design about after all?

→→UX→is→not→about→aesthetics→-→it’s→about→→→ understanding→user´s→behavior→and→needs→

→→but→aesthetics→is→important→

→→UX→is→not→user→interface→design→-→but→designing→→→ UI→is→an→integral→part→of→the→UX→Design→process→

→→ it’s→a→design→discipline→concentrating→on→→→ finding→a→solution→to→make→a→product→which→→→ people→will→enjoy→using,→won’t→struggle→and→→→ will→want→to→use→again

Historical & contemporary confrontation of

telephone interface design

08 The history of a telephone interface→→ the→history→of→a→telephone→dates→back→to→the→→

→ invention→of→a→Morse→telegraph→in→the→first→half→→→ of→the→19th→century

→→ though→the→device→itself→had→pretty→simple→→→ →→ interface,→it→wasn’t→very→user→friendly→

→→only→skilled→operators→with→knowledge→of→the→→→→ Morse→code→were→able→to→successfully→send→→→ and→receive→a→message→

→→ the→operator→had→to→translate→the→message→into→→→ the→Morse→code→and→then→operate→a→bar→to→send→→→ the→message→to→the→receiver

→→ the→breakthrough→in→telecommunication→dates→→→ back→to→1876→when→Alexander→Graham→→→ Bell→was→awarded→a→patent→for→invention→of→a→→→ telephone→

→→ the→interface→of→the→early→telephones→was→→→ quite→complicated→

→→an→operator→had→to→use→a→crank→to→rung→→→ the→telephone→on→the→other→end→of→the→line→

→→separated→earpiece→and→microphone→

→→no→dial,→just→2→telephones→connected→together

→→ the→evolution→of→the→telephone→continued→→→ and→brought→several→improvements→to→→ the→telephone’s→interface→

→→a→dial,→allowing→to→connect→to→other→→→ telephone→lines→in→user→friendly→way→

→→a→“switchhook”,→a→hook→on→which→an→→→ earpiece→was→hung→if→not→in→use→

→→a→seamless→handset→connecting→the→→→ earpiece→and→microphone

09Modern officetelephone→→ in→the→2nd→half→of→20th→century,→rapid→evolution→→

→ of→technology,→allowed→manufacturers→to→→→ introduce→new→functions→

→→competition→forced→the→manufacturers→→→ to→reduce→design→&→development→costs→

→→ these→phones→brought→lots→of→different→functions,→→→ rows→of→similar→buttons→and→a→user→manual→you→had→→→ to→read→and→remember→how→to→use→all→these→functions→

→→ user→was→forced→to→create→complex→conceptual→→→ models→-→which→buttons→in→what→order→to→press→to→call→→→ a→desired→function

10ExampleFeatures→these→functions:

-→headset→connection→with→line→button-→computer/fax→connector→and→mute→→button-→20→direct→non-volatile→memories-→On-hook→dialling→with→LED→indicator-→Speakerphone

-→One-touch→memory→dialling→(on/off)-→Message→waiting→and→visual→ringing→indicator-→Hold,→headset→and→microphone→muting→have→LED→indicator-→Time→break→recall/earth→recall-→Adjustable→receiver,→ringer→and→speaker→volume-→PBX→message→waiting

““The phone has some features (such as ringtones) where the manual doesn’t tell you how to set them. I had to contact their helpline, only to find out that the settings are hidden behind a screwed-on panel.

There are speed dial buttons, but you can see from the picture of the phone that there isn’t a place beside the buttons to write names (they are 5mm apart). This phone seems to me to have poor usability overall.

I wouldn’t buy it again. In fact, I’m shopping for a replacement, and I’ve only had this about 2 months.”The→Amazon.co.uk→user→“TreeHouseCoach”→(Oxford)

?What do I think is wrong from the User Experience

point of view?

11 Conceptualmodels→→To→use→the→function,→users→have→to→press→→

→ a→particular→button;→or→worse→a→sequence→of→→→ buttons→

→→ ie.→*1→for→hold,→103#→to→call→a→colleague,→*3→to→→→ transfer→a→call,→and→finally→hang→up→

→→Basically,→I→need→to→remember→which→buttons→→→ should→I→use→in→what→order→to→perform→a→→→ desired→action.→This→is→a→conceptual→model→

→→Users→are→forced→to→create→such→conceptual→→→ models→for→every→action→they→want→to→perform,→→→ mainly→due→to→the→design→of→the→phone,→which→→→ is→nowhere→close→to→being→self-explanatory

→→User→has→no→guidance→what→buttons→in→what→→→ order→to→press,→apart→from→the→user→guide→

→→Errors→are→common→and→there→is→no→way→how→→→ to→precede→them.

12 Lack ofConstraints

13 Lack ofVisibility→→All→buttons→are→often→similar→looking,→same→→

→ size.→

→→Display→is→often→unused→or→shows→information→→→ not→relating→to→desired→action.→

→→ No→indication→which→buttons→press→in→which→→→ situations.

let’s have a look on Apple’s iPhone

““Good design is also an act of commu-nication between the designer and the user, except that all the communication has to come about by the appearance of the device itself.The device must explain itself.”Donald→Norman

14Metaphors

→→ iPhone’s→interface→is→built→around→“Metaphors”→→→ -→a→software→representation→of→the→object→or→→→ action→in→real→world.→

→→For→example→-→a→“Folder”→on→our→desktop→is→a→→→ software→metaphor→for→real→folder→we→use→to→→→ store→documents.

→→When→a→Metaphor→is→used→as→a→part→of→→ the→interface,→user→can→easily→understand→the→→→ particular→function.→

→→Metaphors→are→self-explanatory→–→a→sort→of→→→ Holy→Grail→of→interface,→because→user→is→not→→→ forced→to→create→a→complicated→conceptual→→→ model,→but→immediatelly→sees,→what→the→→→ particular→function→is→for→or→uses→his→intuition→→→ to→perform→actions→in→the→same→way→he→would→→→ perform→them→in→a→real→world.

“15 Direct

Manipulation

“A great user interface follows human interface design principles that are based on the way people—users—think and work, not on the capabilities of the device.”iPhone→OS→Reference→Library

Users→operating→a→phone→with→classic→interface→with→buttons→are→forced→to→create→conceptual→models.

They→need→to→understand→and→remember→what→particular→buttons→do,→how→to→get→the→cursor→to→the→desired→location,→how→to→navigate→through→menu→etc.

This→often→makes→using→a→phone→difficult→and→unnatural.

In→contrast,→due→to→its→touch-screen→and→gestures,→iPhone→users→can→perform→actions→just→with→their→fingers→in→a→very→natural→way,→without→a→need→for→creating→additional→conceptual→models.→→People→feel→they→control→something→tangible,→not→abstract.

Conclusion~

16 Questionsto askQuestions→I→think→a→designer→should→ask→before→starting→a→design→project:

→→how→do→we→want→to→benefit→from→the→project?→

→→how→do→our→users→want→to→benefit→from→our→→→ project?→

→→who→are→the→users?→(demographic→and→→→ psychographic→research)→

→→what→are→our→users→needs?

17Most important thing I have learnedDesigners→should→learn→more→about:

→→how→people→think,→behave→and→interact→→→ (psychology,→human→-→computer→interaction)→

→→UX→design→and→Interactive→Design→methods→→→ and→process→

→→keep→learning→about→visual→communication,→→→ typography→and→graphic→design→in→general→-→→→ it’s→very→important→to→stay→informed→and→up→to→→→ date

18Majordesign principles

→→visibility→

→→affordance→

→→ feedback→

→→constraints

19 Prototype& test

→→prototype→and→test→your→design

The End