User Experience Design

User Experience (UX)

En samling af forelæsninger der berører

User Experience/User Experience Design:

• Uge 43 (i dag): Introduktion til User Experience og efter pausen, Informationsarkitektur på Websites.

• Uge 44: Usability og Evaluering.• Uge 47: Oplevelsesdesign (Christian Winther

Bech).

Experience

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

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 Dokumenter

Googles 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 deres behov?

• Hvad er deres ønsker?

• Hvilken motivation driver dem?

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 model

En 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, 1999

Informationsarkitekturen

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

du bruger• Hvordan skal sproget/terminologien være?• Mere om dette efter pausen.

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

Litteratur

Garrett, Jesse James: “The Elements of User Experience”, New Riders, 2002, p. 86-111.

Rogers, Y., Sharp, H., Preece, J. Interaction Design: Beyond human-computer interaction. Wiley, 2002, p. 1-20.

Pause