Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

User Experience Design in context of Graphic Design

15,571 views

Published on

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

Thanks for watching.

Published in: Design, Business, Technology
  • Very useful material! And I'd like to share an amazing online training software - ezTalks:Free for up to 100 Participants,Group Video/Audio/IM Chat, Screen Sharing, Whiteboard and Recording,etc.(https://www.eztalks.com)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Great Slide
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • How to Use Graphic Design to Sell Things, Explain Things, Make Things Look Better, Make People Laugh, Make People Cry, and (Every Once in a While) Change the World --- http://amzn.to/1pCIIdH
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Graphic Design: The New Basics: Second Edition, Revised and Expanded --- http://amzn.to/1Mvw1pR
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Creative Workshop: 80 Challenges to Sharpen Your Design Skills --- http://amzn.to/1ZgKayp
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

User Experience Design in context of Graphic Design

  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

×