User Experience Design in context of Graphic Design
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

User Experience Design in context of Graphic Design

on

  • 9,225 views

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

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

Thanks for watching.

Statistics

Views

Total Views
9,225
Views on SlideShare
8,678
Embed Views
547

Actions

Likes
17
Downloads
337
Comments
3

22 Embeds 547

http://thinkoutsidebr.wordpress.com 383
http://bitpakkit.blogspot.com 37
http://blog.jirijerabek.net 26
http://www.slideshare.net 23
http://jkelleher.blogspot.com 12
http://www.jirijerabek.net 11
http://www.e-presentations.us 8
http://chrisrutz.de 7
http://www.brijj.com 6
https://twitter.com 5
http://www.2xhib.dev 5
http://www.openux.education 4
http://www.pinterest.com 4
http://jkelleher.blogspot.co.uk 3
http://posterous.com 3
http://jkelleher.blogspot.de 2
http://www.linkedin.com 2
http://staging.2xhib.com 2
http://pinterest.com 1
http://webcache.googleusercontent.com 1
http://news.google.com 1
https://www.linkedin.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Great slide show and clear explanation for a graphic designer learning more about UX design. Simple, clean, concise. Thanks!
    Are you sure you want to
    Your message goes here
    Processing…
  • 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
    Are you sure you want to
    Your message goes here
    Processing…
  • 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
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

User Experience Design in context of Graphic Design Presentation Transcript

  • 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
  • 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. →→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. 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. 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. “ “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. What do I think is wrong from the User Experience point of view?
  • 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. 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. 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. let’s have a look on Apple’s iPhone
  • 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. 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. →→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. 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. 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. Conclusion
  • 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. 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. 18 Major design principles →→visibility→ →→affordance→ →→feedback→ →→constraints
  • 35. 19 Prototype & test →→prototype→and→test→your→design
  • 36. The End