User Experience Design in context of Graphic Design

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? →→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 is User 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

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

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

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

→→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 just about the users? →→we→do→not→design→only→to→satisfy→users’→needs,→→ → but→to→meet→needs→and→goals→of→ → the→manufacturers→as→well

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

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

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

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

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

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.

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.

let’s have a look on Apple’s iPhone

“ “Good design is also an act of communication 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

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.

→→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 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?

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

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

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

The End

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

User Experience Design in context of Graphic Design

by Jiri Jerabek

Accessibility

Categories

Upload Details

Usage Rights

18 Embeds 493

Statistics

User Experience Design in context of Graphic Design Presentation Transcript