9. Ta med hjem konkrete tips, teknikker og ideer – gjør din løsning mer sømløs!
MÅL
Kilde: http://www.slideshare.net/lillayla/design-thinking-and-lean-ux, Foto: Lillian Ersøy
11. “The total cognitive load,
or amount of mental processing power
needed to use your site,
affects how easily users find content and
complete tasks”
Minimize Cognitive Load to Maximize Usability | Kathryn Whitenton, Nielsen Norman Group
12. “Hick’s Law […] states that
the more stimuli (or choices) users face,
the longer it will take them to
make a decision”
Hick’s Law: Making the choice easier for users | Mads Soegaard, Interaction Design Foundation
Hei og takk for at dere kom, og takk for at jeg fikk komme og snakke om noe jeg synes er veldig spennende
Hvor mange er utviklere? Designere, prosjektledere/produkteiere?
Det jeg skal snakke om i dag er noe som påvirker oss alle hver dag
Hvem får litt angst når du ser en slik side?
Nesten litt frekt å bli møtt med en hukommelsestest mens du er midt oppi det du egentlig skulle gjøre
Vi skal gå litt i dybden på innlogging i dag og finne bedre måter å løse dette på
Mitt navn er Henrik Walker Moe. Jobber i BEKK som utvikler og er over middels opptatt av UX (brukeropplevelse)
Idag skal jeg lære bort det jeg kan om å lage gode sømløse innloggingsopplevelser
Og som dere ser svever litt i skyene om dagen: skyløsninger, og systemutvikling innen luftfart hos Avinor
Hva driver Avinor med?
Statseid selskap som har ansvaret for all operativ logistikk på lufthavnene<klikk>
Drifter alle Norges 45 sivile lufthavner<klikk>
I fjor: 24,5 mill passasjerere som reiste innenlands<klikk>
51,5 mill passasjerere totalt inkl. utenland og offshore
Jeg jobber i teamet «Eksterne kanaler» hos Avinor
avinor.no (informasjon, bestille parkering, netthandel), Avinor App (reisefølge), EarlyBird (legacy)
I tillegg en innloggingsløsning Min Profil som fungerer som autentiseringsserver (profil med kvitteringer, kontaktinformasjon, boardingkort)
Røde tråden for i dag:
Erfaringer under utvikling av autentiseringsserveren samt øvrige erfaringer på alle løsningene
Hva er de unike utfordringene?
Brukere i ulike kontekster: i sofaen, på beina, stresset.
60% er på mobile enheter
Brukerne er innom 1 gang, så 1 sjanse til å gi en god opplevelse
Stiller høye krav til sømløs brukeropplevelse = god reiseopplevelse
Hvorfor tittelen «Sømløs Identity»?
Autentiseringsserveren vår er det sentrale navet i appene våre. Den må oppleves som rask, robust og sikker.
Hvis den oppleves som sømløs er gevinsten vår fornøyde og, kanskje aller viktigst, innloggede brukere
Hva mener du er nøkkelen til «Sømløs Identity»? <neste slide>
UX må drive fram de tekniske kravene
Uten god UX er det vanskelig å få glade og motiverte brukere
Kan ha knallgod og knallsikker teknisk løsning men hjelper lite uten god UX
Skal snakke om erfaringer, delt opp i 3 områder <klikk>
Hvilke UX-utfordringer har vi for innloggingsopplevelsen?
Hvordan kan vi motivere brukeren til å logge inn?
Hva består en god innloggingsopplevelse av?
Hvilke rammeverk og biblioteker har vi brukt i appene våre?
Hvilke skytjenester har vi for IDaaS i dag?
Hvilke løsninger tilbyr skyen for B2B- og B2C-innlogging (dvs ansatte og sluttbrukere)?
Finnes det begrensninger i disse tjenestene som gjør sømløs innlogging vanskelig?
Hva er ditt mål for i dag?
Lær av erfaringene våre, og ta med hjem håndfaste tips, løsninger eller ideer fra idag
For alle: utviklere og ikke-tekniske: designere, produkteiere
8 min
Hvilke premisser har vi for å skape gode innloggingsopplevelser?
<pust>
Vi vet at ved å redusere antall valgmuligheter så reduseres kognitiv belastning
Finner innhold lettere
Fullfører oppgaver raskere
Dette gir brukeren økt måloppnåelse og dermed en lykkefølelse
<pust>
Og Hick’s Law forteller oss at mange valgmuligheter i skjermbildene øker tiden det tar brukeren å foreta et valg
Ser vi på tid som valuta så er brukeren gjerrig og ønsker å bruke så lite penger som mulig. Blakker vi brukeren risikerer vi en irritert bruker som kan forlate nettsiden. En bruker som derimot har mye penger igjen kan gå videre til neste mål på nettsiden din
Fokusert interaksjonsdesign. Fjern støyende elementer slik at bruker kan nå måloppnåelse raskest mulig
Dette er et typisk brukernavn og passord innloggingsskjermbilde
Hva hvis man glemmer passord, eller verre: eposten
En slik løsning kan bli OK. Men vi vet også fordelene med færre valgmuligheter og færre ting å ta stilling til og huske… raskere vei igjennom innlogging vil oftest være bedre
For å ta et eksempel fra den positive enden av UX-skalaen..<klikk>
Her ser vi PayPal sin innloggingsside. Enkelt, ryddig design
Å lage god UX virker veldig enkelt, men det er vanskelig
La oss se på EarlyBird og hvordan vi valgte å løse innlogging der
Driverne for interaksjonsdesignet her har vært fokus på holde skjermbildet enkelt, gi insentiver. Skjul alt annet av ekstra linker og innhold under «the fold»
Mobilnummer og sms-kode som autentiseringsmekanisme. Slipper å huske passord! Brukere er på mobile enheter og passord oppleves som vanskelig (har brukertestet)
Ett skjermbilde hvor vi ber om en ting og ett call-to-action
Fordelen med det: bruker får rask feedback og god måloppnåelse fordi hvert steg går fort å gjennomføre
Ofte brukt interaksjonsdesignpattern hos oss. Be om litt og litt brukerinformasjon over flere skjermbilder, enn en vegg med mange påkrevde skjemafelter
Et viktig prinsipp er at et design kan alltids bli bedre. Ofte kan veldig enkle tekniske grep forbedre interaksjonen drastisk.
Når vi skal skrive inn mobilnummeret her, hvordan kan vi hjelpe brukeren for å øke hastigheten på måloppnåelsen?
HTML5 ga oss inputhjelp på mobilenheter som gjør at bruker kan skrive raskere <klikk>
Egen «input type» for telefonnumre, type=tel. Type=email. Veldig deilig hvis du har en lang epostadresse!
HTML5-attributtene er veldig lavthengende frukter
Vil gi umiddelbart raskere måloppnåelse for brukeren, lav risiko
Vi har sett her et eksempel på innlogging til EarlyBird. Viktig med god sømløs on-boardingsopplevelse under innloggingen slik at brukeren går fra å være besøkende til å logge inn og bli konvertert bruker. Oppsummert om on-boarding kan vi si<klikk>
<klikk>Ryddig interaksjonsdesign,<klikk>Gi gode insentiver,<klikk>Fjern tekniske hindre,<klikk>Rask feedback
Etter fullført on-boarding er neste oppgave, hvis du f.eks. driver en nettbutikk, å gi kjøpsinsentiver slik at man kan konvertere brukeren til kjøpende kunde
Viktig å huske at on-boarding er en kontinuerlig iterativ prosess hvor man må måle, justere og måle igjen. Vi bruker Google Analytics til å måle «bounce rate», slik at vi lærer hva som virker og ikke virker. A/B-testing
Viktig nøkkel for å lage best mulig design for on-boardingen er å forstå brukers kontekst
19 min
<klikk>Er brukerne på beina, i aktivitet, i en kjøpsprosess eller på en reisefot? Finn kontekstene
<klikk>Når du forstår kontekstene, lag en skreddersydd on-boardingopplevelse for innloggingen
<klikk>Kan brukerne være i flere kontekster, lag flere innloggingskjermbilder slik at hver kontekst har en skreddersydd on-boardingopplevelse
Jeg skal vise dere hva jeg mener med kontekster og on-boarding ved å vise noen eksempler fra Avinor appen
20:30 min, halvveis på tid!. Avinor appen for iPhone i App Store, og Android i Google Play
Kontekst: Nettopp lastet ned appen
Vi vil se en on-boarding som fokuserer på å vise verdien appen gir deg som din reisefølge
Appen vil gi deg rask og enkel tilgang til informasjon,
Du kan følge flighter og få pushvarsel ved endringer
Gode skjermbilder, fokusert ledetekster
Ledetekst og call-to-action er tydelig, og positivt ladet – kom i gang!
Kontekst: ikke-innlogget bruker – ønsker å lage en profil for å f.eks. angi reg.nr hvis du skal parkere bilen din på en lufthavn
(skyte inn: kan fortsatt bruke appen uten brukerprofil)
Vi klikker på «Registrer mobilnummer»
Enklere on-boarding fordi du allerede har appen
Fokuserer på at mobilnummeret er alt som trengs – enkelt å lage en bruker!
Ingen store skjema med vegg av påkrevde felter
Kontekst: ønsker å følge en flight for å få abonnere på endringer, f.eks. ny gate, forsinkelser osv.
Vi klikker på Ny reise og finner en flight som vi ønsker å følge
Vi klikker på Følg denne flighten
Her ser vi den tredje varianten av teknisk sett samme innlogging i samme app, men i en litt annet kontekst og variant enn de foregående eksemplene
Tydelig ledetekst og call-to-action
On-boardingen fokuserer på funksjonaliteten du får tilgang til når du logger inn
Vi fokuserer vi på hva som gir brukerverdi: rask tilgang på viktig informasjon, transportpriser på buss/taxi, praktisk info for din destinasjon..<klikk>
Eller relevante tilbud på lufthavnene du befinner deg på
Å styre innloggingen slik vi har sett med flere kontekster og variere on-boardingen, gir en brukeren skreddersydd opplevelse. Det er noe våre brukerne responderer veldig positivt på.
Vi lager ikke slik on-boarding for alle tjenestene våre. Det blir oftest heller bestemt ut ifra behovet til å ha en innlogget bruker i tjenesten.
Det var det viktigste jeg hadde å si om brukerkontekster og on-boarding
La oss se nærmere på det tekniske<klikk>
22:30 min
…og hvilke erfaringer vi har gjort oss på å håndtere Identity/autentisering i løsningene våre
Ikke vær redd hvis du ikke skjønner all koden, hensikten er bare å vise muligheter
Arkitekturen ser ofte slik ut:
Front-end separat applikasjon fra back-end API-applikasjonen. API sørger for å persistere data basert på ønsket forretningslogikk for applikasjonens domene
Hva fokuserer vi på i dag? <klikk>
Erfaringer på front-end er enklest for oss å dele med andre fordi her har vi mest i felles med andre prosjekter
Hvilke rammeverk og biblioteker bruker vi på front-end om dagen?
Byggeklossene våre front-end apper består av er:<klikk>
React med:
Redux
Redux-auth-wrapper for å styre tilganger (autorisasjon) på sider/routes
Redux-oidc for OpenID Connect autentisering med Implicit Flow (redirect fram/tilbake med JWT)
Bruker oidc-client.js fra IdentityModel. Frittstående JS-rammeverk. Gjør stille-reautentisering av bruker, gjør alt av autentiseringsforespørsler – veldig bra!
Liker med redux-auth-wrapper:
Sikkerhetsdokumentasjon i kode. Her ser vi alle sidene (routes) i en React app med tilgangsstyring i kode
UserIsAuthenticated og UserIsAdmin
Vi hadde nok ikke hatt en like sømløs autentisering i React-appene våre hadde det ikke vært for at kombinasjonen av React/redux, redux-auth-wrapper og redux-oidc fungerer bra sammen.
<pust>
Har man flere apper burde man håndtere autentiseringen i front-enden likt:
Kompetansen og erfaringen hos utviklerne lett kan overføres
Forbedringer kan fritt overføres til flere apper
Utviklerne kan lettere context switche mellom apper
I demoen av Avinor appen tidligere viste jeg flere brukerkontekster som styrte bruker til forskjellige on-boardingsopplevelser<klikk>
Her ser vi et konfigurasjonseksempel med oidc-client.js for å få til det vi gjør. Dette biblioteket gjør selve autentiseringen mot autentiseringsserveren
acr_values: Authentication Context Class Reference values
Klientapplikasjonen forteller autentiseringsserveren at disse parameterne skal brukes i autentiseringskonteksten for akkurat denne autentiseringsforespørselen
Ved å sende med parameter for kontekst, språk m.fl. kan våre klientapplikasjoner diktere hva slags on-boardingsopplevelse brukeren får under innlogging
Skal IKKE brukes til å påvirke selve autentiseringserverens indre mekanismer for autentisering. Kun påvirke «look & feel» under innlogging på autentiseringsserveren
Hva verdiene er og hva de gjør bestemmer du helt selv i klientapplikasjonen og på autentiseringsserveren din. Vi eier begge deler og står fritt til å lage våre egne standarder her
For å illustrere hvor kraftig verktøy acr_values kan være….
Vi har 2 autentiseringsmekanismer vi bestemmer pr klientapplikasjon
Brukernavn og passord
Mobilnummer med sms-kode
Vi kan i tillegg, for hver av disse klientapplikasjonene, styre innloggingsopplevelser basert på kontekst med å sende med info i acr_values.
(hvis tid): Skal man høyne sikkerheten kan man kjøre en step up autentisering fra mob.nr og smskode, til ny faktor: passord, app-kode
Brukere responderer veldig positivt til høy grad av skreddersydde opplevelser fordi de føler seg forstått, og for innloggingsløsninger er dette en viktig nøkkel til sømløs innlogging
29 min
Vi har sett på hva som skal til for å gjøre innloggingsopplevelsen «sømløs» i kode. Gitt du har kontroll over klientapplikasjonen og autentiseringsserveren kan du få til mye.
Men kan vi bruke en skyleverandør som tilbyr IDaaS til å få til noe av det vi har sett her i dag?
La oss først se på fordeler og ulemper med å velge en IDaaS-tjeneste
Fordeler:
<klikk...>Outsourcer driftingen og abonnerer i stedet på autentiserings- og Identity Management-tjeneste
Eksperter tar seg av det tekniske – sikrere?
Leverandøren har SLA for å garantere tjenestekvalitet
Ofte noen form for enkel tilpasning av HTML/CSS i ett innloggingskjermbilde
Ulemper
Produktifiserte og begrensede – driftsmargin de tar
Enkel konfigurasjon, avansert funksjonalitet koster eller ikke mulig
Gir bort full kontroll over konfigurasjon og data vs å hoste egen løsning
Ikke full sertifisering for alle autentiseringsmåter i OpenID Connect & Oauth 2.0. (OpenID Foundation)
Forenklet tilpasning av innloggingskjermbildet ofte ikke bra nok. JavaScript-støtte mangelfull
Konklusjonen min er at velger man en skytjeneste så gir du bort muligheten til å lage beste mulige innloggingsopplevelsen, men du får så klart de åpenbare fordelene en skytjeneste gir. En POC vil være helt nødvendig slik at du avdekker behov og evt. mangler i tjenestene
I det norske markedet ser jeg at populære leverandører av IDaaS er<klikk>:
Azure AD – B2B/ansatte, moden og solid tjeneste for Active Directory integrasjon med on-prem. Innlogging via ADFS.
Azure AD B2C – For dine sluttbrukere, ikke rik på funksjonalitet men vokser raskt
Auth0 – Både B2B og B2C. Flere: AWS, Google Identity, PingIdentity m.fl.<klikk>
Se min bloggpost på open.bekk.no for flere detaljer rundt disse leverandørene
På Avinor så vi tidlig at IDaaS-tjenester ga oss begrensinger på UX som var showstoppere (hvilke: skreddersydd on-boarding, full kontroll på autentiseringsserveren)
Så hvis skytjenester ikke er for deg…. <klikk>
Stiller krav til ekspertise men får full kontroll og kan lage best mulig løsning<klikk>:
Spring (Java) – ikke OpenID-sertifiserte men populært rammeverk man kan bygge ut med OpenID Connect-støtte for å sikre applikasjoner, API’er og lage egen autentiseringsserver
IdentityServer (.Net og .Net Core v4) – OpenID-sertifiserte og mest populære open-source .Net-rammeverket for å lage egen OpenID Connect & Oauth 2.0 autentiseringsserver. På Github og open-source
Node OIDC-Provider (JS)– Full OpenID-sertifisering for alle OIDC-autentiseringsmåter, som er imponerende! Liker du JS/node så er kanskje denne verdt en kikk. På Github og open-source
Hvis du har valgt å lage en egen autentiseringsserver så skal det finnes et rammeverk som passer for deg. Fortsatt viktig å avdekke behov, spesielt med tanke på krav til UX
35 min <klikk>
UX må drive fram og styre teknologikravene.
On-boardingen må være smertefri og målrettet
Forstå brukers kontekst slik at du kan lage skreddersydde innloggingsopplevelser
I React-appene våre fungerer redux-auth-wrapper- og redux-oidc bibliotekene ypperlig. Autentisering er lett å konfigurere, håndteringen av innlogget bruker i appen er ryddig og vi kan sende bruker til skreddersydd on-boarding ved hjelp av acr_values
Det finnes IDaaS-tjenester idag for innlogging av B2B- og B2C-brukere. B2B-verden er mest moden men ofte begrenset på UX-muligheter. For B2C-segmentet og dine sluttbrukere er Azure AD B2C ung men lovende. Auth0 er også solid på B2B og B2C.
Hvis du finner begrensninger i IDaaS-tjenestene - gjør det selv hvis du behersker de tekniske utfordringene det valget medfører
Og til slutt…. Jeg vet at autentisering kan være et komplekst domene
Her ser vi cockpiten til romfergen Endeavour og mange små knapper med store konsekvenser.
Trikset for å lande trygt er å vite hvilke man bør trykke på… slik er det også med innloggingsløsninger
Jeg håper jeg har fått satt søkelyset på noen knapper her i dag så uansett hvilken rolle du har så håper jeg du har fått noen konkrete tips, teknikker eller ideer som du kan ta med hjem – slik at din løsning blir hakket mer sømløs for dine brukere
Hvis dere har spørsmål kom gjerne bort til podiet etterpå.
Takk for at dere kom og ha en flott JavaZone videre! Takk for meg!