User Experience2. oktober 2015, v. Hans Klysner

Experience

Oplevelse og erfaring

Definitioner af UX

• IBM• Apple• Garrett

IBM

“User experience design fully encompasses traditional Human-Computer Interaction (HCI) design and extends it by

addressing all aspects of a product or service as perceived by users…”

www-01.ibm.com/software/ucd/designconcepts/whatisUXD.html

IBM“… HCI design addresses the interaction

between a human and a computer. In addition, user experience design

addresses the user's initial awareness, discovery, ordering, fulfillment,

installation, service, support, upgrades, and end-of-life activities…”

www-01.ibm.com/software/ucd/designconcepts/whatisUXD.html

Apple Developer Network

“User Experience is a term that encompasses the visual appearance, interactive behavior, and assistive

capabilities of software.”

web.archive.org/web/20110604233528/http://developer.apple.com/ue/index.html (2012)

Garrett

“The user experience development process is

all about ensuring that no aspect of the user’s experience with your site happens without your conscious, explicit intent.”

Garrett, 2003: 21

Garrett

“This means taking into account every possibility of every action the user is likely

to take and understanding the user’s expectations at every step of the way

through that process.”

Garrett, 2003: 21

User Experience Design• "One cannot design a user experience, only

design for a user experience." (Sharp et al., 2007: 15).

• User Experience (UX) bruges ofte synonymt med User Experience Design (UXD).

Opsummering• User Experience er brugernes oplevelse af

produktet.

• Alle produkter er forbundet med en brugeroplevelse (Garrett, 2003: 10).

• User Experience dækker den totale oplevelse fra vugge til grav.

Opsummering• Designprocessen handler om, at sætte sig I

brugerens sted og indfri brugerens forvendtninger.

• User Experience indeholder HCI, Interaktionsdesign, Informationsarkitektur, Usability, Interfacedesign, Visuelt design mv.

Delta & American Airlines

Før-efter-eksempler indenfor luftfartsbranchen.

passfail.squarespace.com

Boarding Pass

passfail.squarespace.com

Boarding Pass - Redesign

Kilde: dustincurtis.com/dear_american_airlines_redesign.html

Kilde: dustincurtis.com/dear_american_airlines_redesign.html

Kilde: www.aa.com

Google DokumenterGoogles gamle og nye grænseflader

til Google Docs

The Elements of User Experience

Garrets model og supplerende metoder til udvikling af designstrategier.

Strategy• Den hyppigste årsag til mangelfulde

hjemmesider er en manglende forståelse for:

»Hvilket formål hjemmesiden skal opfylde.

»Hvilke ønsker og behov brugerne har.

Hvad er formålet?• Formuler en vision• Definer de forretningsmæssige mål• Hvordan er markedet?• Succeskriterier• Branding/identitet• Usability goals• User experience goals

Usability Golas• Effectiveness (hvor godt produktet udfører sin opgave)

• Efficiency (hvor godt produktet supporterer brugeren)

• Safety (beskyttelse mod farlige situationer)

• Utility (om den rette funktionalitet er til stede)

• Learnability (hvor hurtig indlæreringen er)

• Memorability (hvor godt brugen af et produkt huskes)

User Experience Golas• User experience goals er de subjektive

værdier der ønskes for produktet.» Fornemmelse og føelse.

• Beskrives typiske med en række tillægsord.» Tilfredsstillende, behagelig, sjov, underholdende,

hjælpsom, motiverende, æstetisk tiltalende, understøttende for kreativitet mv. (Sharp et. al., 2009: 26-27)

Sharp et al, 2002: 19

Hvem er brugerne?• Lær brugerne at kende

• Hvad er brugernes behov?

• Hvad er brugernes ønsker?

• Hvilken motivation driver brugerne?

Kendskab til brugerne• Usability og user research

• Surveys

• Fokusgrupper

• Interviews

Scope• Hvad er omfanget af opgaven?• Hvordan defineres rammerne?• Specifikation af funktioner• Specifikationer af indholdet

Kravspecifikationen• Hvordan ser er kravspecifikation ud?

• Prioriter indhold og funktioner

Structure• Hierarkisk sideopbygning• Find en passende labeling til menupunkter• Find en passende konceptuel model• Hvordan er håndteringen af fejl?

Konceptuel modelEn konceptuel model kan beskrives som et abstrakt billede, der indfanger hvad en bruger kan gøre med et produkt, og hvilke koncepter der behøves for at forstå interaktionen med produktet. Den konceptuelle model er typisk knyttet til en metafor eller analogi, kendt fra den fysiske verden (Sharp et. al., 2007: 51-52).

Southwest Airlines

Informationsarkitekturen• Strukturering af indholdet• Vær bevidst om de organisationsprincipper

du bruger• Hvordan skal sproget/terminologien være?

Skeleton• Informationsdesign• Interfacedesign• Navigationsdesign

Interfacedesign• Sidelayout• Brug kendte konventioner• Pas på med brugen af metaforer• Designkomposition/wireframes

Designkomposition

Navigationsdesign• Global navigation• Lokal navigation• Supplerende navigation• Kontekstuel navigation• Andre navigationstyper

Eksempler på navigation

Horisontal menu med drop down

Horisontal menu med drop down

Horisontal megamenu

Horisontale menuer med tabs

Horisontal navigation

Horisontale og verticale menuer

Surface• Designkomposition/wireframes

• Farvepalette

• Typografi