TDT4180 – Øving 1: Designprinsipper

  1. eBillett

    Applikasjonen valgt for oppgaven er en nettside for bestilling av e-billetter, mer spesifikt kinobilletter, via Ebillett.no. Nettsiden skal fungere som en rask, trygg og fleksibel selvbetjeningsløsning der kunder slipper å kjøpe billettene på fysiske billettautomater eller i kassen. Nettsiden tilbyr flere billettkategorier etter at kunden velger ønsket film. For enkelte filmer vil billettprisene variere for de ulike billettkategoriene, bl.a. voksne, studenter, barn o.l. Applikasjonen inneholder også en betalingsløsning for billettene.

  2. Interaksjon med systemet

    Når brukeren har valgt et arrangement som de vil dra på, kommer de til en skjerm der man kan velge antall billetter (fig. 1.1a). Her må brukeren oppgi hvor mange billetter (og av hvilken type, e.g. barn, voksen, ledsager) de vil kjøpe. Antall billetter som brukeren vil kjøpe av hver type velges gjennom et nedtrekksmeny som tilhører hver type, og vil bli lagt til i handlevognen når brukeren har trykket på et antall i menyen. Handlevognen befinner seg nederst på skjermen (fig. 1.1a) og er skjult fram til brukeren trykker på den (fig. 1.1b). Figur 1.1a - billettvalg/”forsiden” i applikasjonen med skjult handlekurv Figur 1.1b - utvidet handlekurv Figur 1.2 - billettvalg med valgte billetter Når et vilkårlig antall billetter er valgt blir «Fortsett» knappen (fig. 1.2, nederst til høyre) grønn, som indikerer at brukeren nå kan fortsette til neste trinn i transaksjonen. Denne knappen er i utgangspunktet grå (fig. 1.1a) for å vise at den ikke kunne trykkes på enda. Etter at antall billetter er angitt, og «Fortsett» knappen trykkes, vil brukeren komme til neste trinn der man kan velge seter (fig. 1.3a). Applikasjonen vil automatisk velge hvor bestilte setene blir plassert. Hvis brukeren har kjøpt 3 billetter, vil setene som anbefales være plassert så nært midten som mulig der det er plass til tre seter ved siden av hverandre (fig. 1.3a). Brukeren kan velge å akseptere denne plasseringen og trykke på «Fortsett» for å komme til betalingssiden, eller flytte på setene. Figur 1.3a - setevalg med 3 valgte seter Hvis brukeren vil flytte på setene, har de noen restriksjoner. Brukeren har begrenset tid (1 minutt) på valg av seter (fig. 1.3a nederst til høyre). Alle setene må være plassert ved siden av hverandre slik det at det ikke er mulig å velge seter hver for seg. Det er heller ikke mulig å velge seter som er ett sete unna et opptatt sete (fig. 1.3b). Vi tenker at dette er til for å forhindre at det blir mange enslige seter til overs som ikke blir valgt, ettersom man sjeldent drar på kulturelle arrangement alene. Denne funksjonen blir ikke direkte kommunisert til brukeren, og kan virke forvirrende. Om brukeren likevel prøver å velge et slikt “nært” sete, vil det automatisk bli flyttet enten helt inntil et allerede opptatt sete, eller to seter unna et opptatt sete (fig. 1.3b). Figur 1.3b - nærmest avstand (dvs. ett eller flere seter) mellom valgte seter (grønt) til et opptatt sete (mørkegrått). På samme måte kan man ikke velge seter på en rad som ikke har nok plasser til alle billettene ved siden av hverandre. Valget vil da bli flyttet til en annen rad der det er plass. Hvis man bruker en liten skjerm, eller har problemer med å se, kan man zoome inn og ut (fig.1.3a til høyre for “salen”) for å se setene bedre. Har brukeren valgt seter og er fornøyd, trykker de på «Fortsett» (fig. 1.3a). Den siste siden i transaksjonen er betalingssiden (fig. 1.4a). For å kunne motta billetten digitalt må brukeren oppgi e-postadresse (fig. 1.4a). Om man allerede har en eksisterende konto, vil man kunne logge inn (fig. 1.4c). Har man ikke en profil, får man muligheten til å opprette en eller fortsette med kun e-postadresse. Opprettelsen av en ny profil krever at brukeren fyller ut feltene under “Kundeinfo” (fig. 1.4b) før de kan fortsette med transaksjonen. Brukeren kan betale med Visa eller Mastercard (eventuelt Vipps på noen arrangementer). I tillegg er det mulig å få billetten(e) på SMS og/eller donere til Sykehusklovnene (fig. 1.4d). Til slutt trykker brukeren på “Bekreft kjøp” for å fullføre bestillingen, eller på “Handle mer” for å kjøpe flere billetter til samme eller et annet arrangement (fig. 1.4d nederst til høyre). Figur 1.4a - “tom” betalingsside Figur 1.4b - oppretting av konto Figur 1.4c - innlogging med eksisterende konto

Figur 1.4d - betaling med diverse tillegg

  1. Designprinsipper

    Vi skal nå analysere løsningen ved hjelp av Don Normans åtte designprinsipper. [1]

    Visibility

    Løsningen har god «visibility»; det er ikke for mange elementer på skjermen og ingen viktige elementer blir utelatt eller er for små til å vises ordentlig. Billettvalg-siden (fig. 1.1a) er oversiktlig med overskrifter for valg («type», «pris», «antall»). Handlevognen er noe skjult, men en liten hoppende pil nederst på siden trekker oppmerksomheten mot opptrekksmenyen. På setevalg siden (fig.1.3) er det tydelig hvilken vei setene peker, altså hvor lerretet befinner seg, slik at det er enklere for brukeren å vite hvordan de skal velge seter. De setene man velger har sterk grønn farge; grønt signaliserer ofte et «gyldig» valg. Dette gjør at brukere lettere skjønner hvilke seter som er “deres” (de setene de har valgt). På betalingssiden (fig. 1.4c) er knappen for å faktisk betale (med VISA/Mastercard logo) mye større enn de andre elementene. Det er derimot ikke så tydelig hva slags info som må fylles inn før man betaler, siden man kun ser «e-post» feltet helt frem til man taster inn en gyldig e-postadresse (fig. 1.4a). Først da ser man at det også er mye annet å fylle inn (fig. 1.4b, 1.4c), og at man har muligheten til å betale med/uten en e-billett bruker.

    Affordance

    Når det gjelder «affordance» er det både negative og positive punkter. På fig. 1.1a kan man se at handlekurven er en opptrekksmeny på grunn av den grønne pilen som peker opp. Piler indikerer en bevegelse, i dette tilfellet «opp» og inviterer brukeren til å interagere med menyen. I tillegg er det skygge bak handlekurv-panelet som indikerer at det er et «eget» element og ikke bare en «footer» eller lignende. Når man tar pekeren over panelet, vokser det litt og musepekeren forvandles til en hånd med en pekende finger, for å si «jeg er aktiv - trykk meg». Det er også ganske tydelig at antall-billetter menyen er en nedtrekksmeny på grunn av pilen som peker ned som tyder på at menyen kan bli utvidet. På fig. 1.3a er det ikke så enkelt å se hvilke seter som er opptatte og hvilke som er ledige (false affordance). Vanligvis vil de «blekeste» elementene bli oppfattet som deaktiverte/opptatte, mens de med mer farge er aktive/ledige (perceived affordance). Det er derimot de lysegrå setene som er opptatte og de mørkegrå som er ledige (real affordance). Det er heller ikke noe oversikt over farger og deres betydning. Det er i tillegg vanskelig å skjønne at setene er klikkbare i det hele tatt (hidden affordance); musepekeren skifter ikke form når man holder den over et sete, og setene skifter heller ikke farge for å gi en «forhåndsvisning» av det eventuelle setevalget. Derfor føles det litt ut som om man må trykke i blinde for å så se hvor man ender opp. Dette er spesielt utfordrende hvis man skal velge flere seter. På fig. 1.4d er «billett på SMS» sjekkboksen grå, men huket av, noe som kan få brukeren til å tro at valget allerede er gjort, samtidig signaliserer grå at noe er deaktivert så dette kan bli forvirrende. Ellers er det mye bra; alle knappene ser ut som knapper og aktive elementer som handlevogn-menyen signaliserer sin «affordance» gjennom piler, skygger og farger.

    Constraints

    Løsningen har noen «constraints», men ikke alle tjener brukeren. En bra «constraint» er at man ikke kan velge flere billetter etter at «fortsett» knappen er trykket på fig. 1.1a; musepekeren blir til et stopp-tegn og man klarer ikke trykke på noe. Man kan heller ikke velge mer enn x-antall billetter om gangen (fra x inntil bredden av en rad), noe som er betinget av nedtrekksmenyen på «antall». Når man velger seter kan man ikke bruke mer enn 1 minutt på å gjøre dette (“timer” på fig. 1.3a). Hvis det går mer enn 1 minutt, kommer det opp en feilmelding (fig. 1.5) som tar brukeren tilbake til fig. 1.1a (hvis man trykker “Prøv igjen”) der man må velge alt på nytt. Den mest positive begrensningen i løsningen er at man ikke kan gå videre før nødvendig informasjon er fylt ut (f.eks. fig. 1.1a, der man ikke kan fortsette før antall seter er valgt). Figur 1.5 - feilmelding “for lang tid brukt”

    Feedback

    Løsningen har mye «feedback», som for eksempel «fortsett» knappen på fig. 1.1a. Denne er først grå for å indikere at den er deaktivert (fig. 1.1a), og blir grønn når nødvendig info er fylt inn (fig. 1.2). Når «fortsett» knappen trykkes, blir den til en animert «loading» sirkel slik at brukeren vet at noe er i ferd med å skje. Hvis man velger flere seter enn det er plass til ved siden av hverandre i salen, får brukeren en feilmelding om dette (fig. 1.6). Figur 1.6 - feilmelding ved for få plasser På fig. 1.3a får man tilbakemelding om hvilke seter man har valgt ved at de blir grønne når man trykker på dem. Velger man rullestol seter (eks. 1.7a), kommer det opp en boks som ber om at brukeren bekrefter valget (fig. 1.7b), for å gjøre brukere oppmerksomme på at denne plassen er reservert for rullestolbrukere.

Figur 1.7a - eksempel på sal med rullestolplasser Figur 1.7b - popup bekreftelse om valg ————————————————————————– av rullestolplass Etter 1 minutt får man et varsel om at tiden er brukt opp, og alternativer til hva man kan gjør (prøve igjen/avslutte) (fig. 1.5). Brukeren får også beskjed i tilfelle noe informasjon mangler, og hvilken informasjon det er (eks. fig. 1.8). Figur 1.8 - popup ved trykk på “Fortsett” uten å ha valgt antall billetter i fig. 1.1a På fig. 1.4.b blir feltene for personlig info grønne når den inntastede informasjonen er gyldig, og røde hvis den ikke er det (fig. 1.9). Dette er bra for brukeren, slik at man kan rette på det som er feil. Figur 1.9 - ugyldig e-postadresse

Mapping

På fig. 1.3a finnes det to zoom-knapper som gjør akkurat det som er forventet. Plasseringen på knappene er naturlig, slik som folk er vant til på fjernkontroller o.l., men selve zoom løsningen har noen tekniske problemer. «Fortsett» knappen fører brukeren til neste side, noe som også er naturlig. Type, pris og antall billetter i fig. 1.1a står på samme rad, lik en tabell. (Usikker på om det går under mapping, men pilene, som f.eks den som er ved siden av handlekurven, kan det gå under som god mapping?) se tekst under //veldig usikker Et annet eksempel på god mapping er pilene som brukes til å illustrere at det er noe som kan åpnes, dette brukes for eksempel i den nedre baren som kan trykkes på for å åpne handlekurven, og under bestillingen hvor man kan velge antall billetter. Figur 1.10a - pil for nedtrekksmeny Figur 1.10b - pil for å åpne handlekurv (Figur 1.1b)

Consistency

Fig. 1.3a har bra «consistency» fordi setevelgeren ligner på setevelgere hos andre kinoer, på tog og på flyselskaper. Det gjør det lettere for nye brukere å forstå hvordan de skal bruke løsningen. I tillegg ser alle sidene like ut, med arrangementet øverst og handlekurven nederst (alle figurer). Noe som ikke er så bra, er at handlekurven befinner seg nederst på skjermen. Vanligvis, på nettsteder som tilbyr netthandel, er handlekurven øverst i høyre hjørne. I eBillett er språkvalg og “avslutt” knappen i høyre hjørne (fig.1.1a). Det er mulig at handlekurven ville ha vært enklere å finne hvis denne ble flyttet.

  1. Forbedringsforslag

    Systemet til Ebillett har en del forbedringspotensiale. Ved å ta utgangspunkt i det som er påpekt i del 3 av oppgaven drøfter vi ulike forbedringer som tettere vil følge Don Normans designprinsipper.

En av affordance-utfordringene var at applikasjonen ikke lett skiller mellom opptatte, ledige og valgte seter. Brukeren kan for eksempel tro at de mørkegrå setene er ledige, og de lysegrå er opptatte (fig. 1.3a). Et fargekart som knytter de ulike fargene til ulike “tilstander” setet er i bør implementeres slik at man unngår å bli forvirret av hva de ulike fargene betyr. Fargene bør være tydelige og varierte slik at brukeren ikke må skille mellom ulike nyanser av samme farge. Her er vårt forslag: Figur 4.1 - forbedringsforslag til seteoversikt

Et annet tiltak vi foreslår er å gi en “forhåndsvisning” på setene man velger for å løse en annen affordance-utfordring vi nevnte i del 3. Det er vanskelig å vite hvor setene “ender opp” når man trykker på salen. Dette kan gjøres ved å markere setene musepekeren holdes over (fig. 4.2).

Figur 4.2 - en forhåndsvisning av valg av 3 seter der musepekeren holdes over setene

På den siste siden (fig. 1.4d) får brukeren et valg om å få billetten på SMS. Dette velges ved å markere en sjekkboks som sier at man ønsker å få billetten på mobil (fig. 1.4d). Sjekkboksen er derimot allerede avkrysset i lys grå når brukeren går inn på siden, noe som kan få brukeren til å tro at den allerede er valgt (fig. 1.4d). Som diskutert tidligere i del 3, kan dette gjøre brukeren forvirret. Vi foreslår å fjerne haken som er i boksen når den ikke er valgt som illustrert i figur 4.3.

Figur 4.3a - “Billet på SMS” slik den ser ut i fig. 1.4d

Figur 4.3b - vårt forslag til forbedring

En av utfordringene ved “consistency” var at handlekurven var plassert nederst på siden (fig. 1.1a) i stedet for øverst i høyre hjørne, som på mange andre nettbutikker. Vi foreslår å flytte for å gjøre det enklere for brukeren å gjenkjenne designet fra andre nettsteder (fig. 4.4).

Figur 4.4 - handlevogn som en popup når man holder musepekeren over handlekurv ikonet

KILDER [1] Sharp, H., Preece, J., & Rogers, Y. (2019). Don Norman Principles. I Interaction Design: Beyond Human-Computer Interaction 5th Edition (ss. 26-30). Wiley.