Please comment. User Experience Design presentation for the Graphic Design in Context uni module. Thanks for watching.

1. User Experience
Design
in context of
Graphic Design
~Jiri Jerabek~

2. 01 The Aim
of 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

3. What is
User Experience
Design?

4. 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

5. 03 What 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

6. →→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

7. 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 thousand
pictures.”
Ben→Shneiderman

8. →→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

9. 05 What does make
a design successful?
“
“People think it’s this veneer -- that the
designers are handed this box and
told, ‘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

10. →→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 that
appears cluttered or illogical is hard to
understand and use.”
iPhone→Human→Interface→Guidelines

11. →→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

12. 06 So is it just
about the users?
→→we→do→not→design→only→to→satisfy→users’→needs,→→
→ but→to→meet→needs→and→goals→of→
→ the→manufacturers→as→well

13. 07 What 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

14. Historical & contemporary
confrontation of
telephone
interface design

15. 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

17. →→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

18. →→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

19. 09 Modern office
telephone
→→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

20. 10 Example Features→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

21. “
“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)

22. What do I think
is wrong from the
User Experience
point of view?

23. 11 Conceptual
models
→→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

24. 12 Lack of
Constraints
→→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.

25. 13 Lack of
Visibility
→→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.

26. let’s have
a look on
Apple’s
iPhone

27. “
“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

28. 14 Metaphors
→→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.

29. →→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.

30. 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

31. 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.

32. Conclusion

33. 16 Questions
to ask
Questions→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?

34. 17 Most important
thing I have learned
Designers→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

35. 18 Major
design principles
→→visibility→
→→affordance→
→→feedback→
→→constraints

36. 19 Prototype
& test
→→prototype→and→test→your→design

37. The End