User Experience
      Design
   in context of
Graphic Design
     ~Jiri Jerabek~
01   The Aim
     of The Presentation
     →→explaining→the→term→“user→experience”

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

...
What is
User Experience
    Design?
02   Explaining term
     “User Experience”

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

...
03          What is the aim
            of UX Design?


“
“It doesn’t matter if you used a device
hundred times successful...
→→the→main→goal→is→to→design→a→product→which→we→→
→ will→be→able→to→use→not→only→with→a→success→

→→but→with→pleasure→as→w...
04           How does it relate
             to Graphic Design?
            →→graphic→design→is→an→integral→part→of→the→→→...
→→the→user→interface→we→create→is→actually→a→→ → →
→ meeting→plane→of→user’s→needs→and→product’s→→
→ features→

→→when→use...
05           What does make
             a design successful?


“
“People think it’s this veneer -- that the
designers are...
→→in→today’s→society,→good→design→is→synonym→→ →
              → for→aesthetics→

              →→but→good→design→is→about...
→→decisions→leading→to→successful→design→aren’t→→
→ accidental,→they→are→a→result→of→strategy→
→ planning,→careful→researc...
06   So is it just
     about the users?


     →→we→do→not→design→only→to→satisfy→users’→needs,→→
     → but→to→meet→need...
07   What is UX Design
     about after all?
     →→UX→is→not→about→aesthetics→-→it’s→about→→
     → understanding→user´s→...
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...
→→the→breakthrough→in→telecommunication→dates→→
→ back→to→1876→when→Alexander→Graham→→
→ Bell→was→awarded→a→patent→for→inv...
→→the→evolution→of→the→telephone→continued→→
→ and→brought→several→improvements→to→
→ the→telephone’s→interface→

→→a→dial...
09   Modern office
     telephone
     →→in→the→2nd→half→of→20th→century,→rapid→evolution→→
     → of→technology,→allowed→...
10 Example         Features→these→functions:

                   -→headset→connection→with→line→button
                   ...
“
“The phone has some features (such as ringtones) where
the manual doesn’t tell you how to set them. I had to
contact the...
What do I think
is wrong from the
 User Experience
  point of view?
11   Conceptual
     models
     →→To→use→the→function,→users→have→to→press→→
     → a→particular→button;→or→worse→a→seque...
12   Lack of
     Constraints

     →→User→has→no→guidance→what→buttons→in→what→→
     → order→to→press,→apart→from→the→us...
13   Lack of
     Visibility
     →→All→buttons→are→often→similar→looking,→same→→
     → size.→

     →→Display→is→often→u...
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 ...
14 Metaphors
  →→iPhone’s→interface→is→built→around→“Metaphors”→→
  → -→a→software→representation→of→the→object→or→→
  → a...
→→When→a→Metaphor→is→used→as→a→part→of→
→ the→interface,→user→can→easily→understand→the→→
→ particular→function.→

→→Metap...
15            Direct
              Manipulation


“
“A great user interface follows human
interface design principles that...
Users→operating→a→phone→with→classic→interface→with→
buttons→are→forced→to→create→conceptual→models.

They→need→to→underst...
Conclusion
16   Questions
     to ask
     Questions→I→think→a→designer→should→ask→before→starting→
     a→design→project:


     →→h...
17   Most important
     thing I have learned
     Designers→should→learn→more→about:


     →→how→people→think,→behave→an...
18   Major
     design principles

     →→visibility→

     →→affordance→

     →→feedback→

     →→constraints
19   Prototype
     & test

     →→prototype→and→test→your→design
The End
User Experience Design in context of Graphic Design
Upcoming SlideShare
Loading in...5
×

User Experience Design in context of Graphic Design

8,162

Published on

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

Thanks for watching.

Published in: Design, Business, Technology
3 Comments
20 Likes
Statistics
Notes
  • Great slide show and clear explanation for a graphic designer learning more about UX design. Simple, clean, concise. Thanks!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Great preso, I would suggest that the yellow used throughout should be a bit darker in tone though... hurts my eyes. Apart from that its brilliant
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • great slide show, can I download and convert it to video for youtube using: http://www.powerpoint-to-video.org/leawo-powerpoint-to-video.html
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
8,162
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
366
Comments
3
Likes
20
Embeds 0
No embeds

No notes for slide

User Experience Design in context of Graphic Design

  1. 1. User Experience Design in context of Graphic Design ~Jiri Jerabek~
  2. 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. 3. What is User Experience Design?
  4. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 14. Historical & contemporary confrontation of telephone interface design
  15. 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
  16. 16. →→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
  17. 17. →→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
  18. 18. 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
  19. 19. 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
  20. 20. “ “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)
  21. 21. What do I think is wrong from the User Experience point of view?
  22. 22. 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
  23. 23. 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.
  24. 24. 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.
  25. 25. let’s have a look on Apple’s iPhone
  26. 26. “ “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
  27. 27. 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.
  28. 28. →→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.
  29. 29. 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
  30. 30. 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.
  31. 31. Conclusion
  32. 32. 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?
  33. 33. 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
  34. 34. 18 Major design principles →→visibility→ →→affordance→ →→feedback→ →→constraints
  35. 35. 19 Prototype & test →→prototype→and→test→your→design
  36. 36. The End
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×