IN Introduksjon til design, bruk, interaksjon Tjenestedesign

Transkript

1 IN Introduksjon til design, bruk, interaksjon Tjenestedesign 26. september 2017 Institutt for Informatikk, Universitetet i Oslo joshi@ifi.uio.no IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

2 IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

3 IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

4 Oversikt Tjenestedesign (service design) Hva er tjenestedesign? Tjenester Touchpoints Experience prototyping Customer Journey Map Videoer & quiz(?) Les på egenhånd: Webtrender og webutvikling Trender innenfor webutvikling Responsive web design (RWD) Prinsipper for godt design Grensesnitt Hva er grensesnitt? Utviklingen av grensesnitt de siste årene Eksempler på ulike typer grensesnitt Kun praktiske oppgaver på gruppetimene denne uken derfor ekstra viktig å delta! IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

5 Nøkkelbegreper fra dagens forelesning Tjenestedesign s. 17 Touchpoints s. 25 Experience prototyping s. 35 Customer Journey Map s. 42 Responsive Web Design s. 52 Web 2.0 s. 59 Grensesnitt (rep.) s. 62 IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

6 Tjenestedesign (service design) IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

7 IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

8 IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

9 IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

10 IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

11 ( IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

12 IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

13 IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

14 Tjenestedesign Tjenestedesign handler om å skape nye opplevelser som forhåpentligvis vil gi bedre kundeopplevelser som bør resultere i høyere avkastning på investeringer og kanskje til og med reduserte kostnader (Figur lånt fra UXMatters) (Wiethoff & Butz, 2011) IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

15 (Rå)vare Kaffebønner Produkt Ferdig kvernet kaffe Tjeneste Nytraktet kaffe Opplevelse Kaféstemning IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

16 (Rå)vare Teknologi Produkt Telefon Tjeneste Integrasjon Opplevelse Nye muligheter IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

17 Bakgrunn og motivasjon Definisjoner: - Tjenestedesign Great services are what they do not what they promise (L. Løvlie) Stor vekst av tjenester (75-80 % av vestlig BNP er tjenester) Krever ny tenkemåter mot tjenester (enn produkter og arkitektur) Bruker man like mye tid på design av tjenesten som man bruker på å utvikle produktet? Tjenestedesign handler altså om design av hele tjenesten Skiller seg fra UCD ved at man ønsker å designe med brukere, ikke for brukere Vi kaller det for tjenestedesign på norsk og service design på engelsk IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

18 En brukerhistorie Fra ukens pensumutdrag IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

19 Utvidelse av designprosessen Designprosessen kan brukes til mer enn bare utforming av form og funksjon Designprosessen har vært under stadig utvikling de siste årene Design av ideologi og politikk (3) Vi kan lage en miljøvennlig og resirkulerbar telefon, og vi kan samtidig velge en løsningen basert på åpen programvare. Design av prosesser og systemer Design av form og funksjon (2) Vi kan designe en telefon som løser en rekke oppgaver (prosesser) og som tilpasser seg omringende systemer. (1) Vi kan bygge en pen og smart telefon. IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

20 Tjenester forandrer seg med tiden For 15 år siden I dag Ser reiseannonse i avisen Besøk flyselskapets nettside Besøker et reisebyrå Motta boardingpass på mobil Mottar billetter med brevpost Gå til innsjekkingsskranken Dropp av bagasje på self-check-in Motta boardingpass Stig om bord på flyet Sjekk inn bagasje Stig om bord på flyet (Wiethoff & Butz, 2011) IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

21 IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

22 IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

23 Hva er så en tjeneste? En rekke med sammenhengende aktiviteter som former en prosess og har en verdi for brukeren Kundereise (customer journey) Tjenester påvirker oss i våre daglige liv Brukeropplevelse (user experience) Tjenestedesign har elementer fra andre designdisipliner, for eksempel design av systemer Tjenesteskisse (service blueprint) Tjenestedesign fokuserer på hele systemet i bruk Touchpoints IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

24 Egenskaper ved tjenester Tjenester er mer "intangible" enn produkter derfor vanskelig å måle, vanskelig å forstå, vanskelig å telle antall interaksjoner Tjenester er opplevelser Tjenester handler mye om følelser Tjenester kombineres ofte med eget eid utstyr (Ruter-app, Statoilkopp, Internett på flyplassen etc.) Tjenester er vanskelig å prototype fordi de ikke manifesterer seg før noen bruker dem krever derfor at vi lager scenarioer som vi utfører med for eksempel rollespill Tjenester involverer i stor grad mennesker aktivitet og er derfor vanskelig å skalere IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

25 Hvilke elementer inngår i tjenestedesign? Definisjoner: - Touchpoints Tjenestedesign fokuserer på en brukers interaksjon med flere touchpoints over en periode med tid Elementene i tjenestedesign beskrives med touchpoints Hva er touchpoints? Steder, produkter, prosesser og mennesker Objekter, fysiske steder, nettsider, kundeservice, partnere etc. En situasjon hvor en tjeneste tilbys eller informasjon utveksles IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

26 Touchpoints som et bindeledd Merkevare Tilbyder av tjeneste Mennesker (brukere) Tjeneste Prosess Produkt Teknologien Selskapet Touchpoints Kunden IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

27 Eksempler på touchpoints Sted Settingen" hvor tjenesten leveres Miljø og omgivelser nødvendig for å kunne tilby tjenesten Brukere trenger hint skilt, infoskranker, infotavler etc. Produkt Artefakten (for eksempel den fysiske gjenstanden) som tilbyr interaksjonen Befinner seg i og utfyller omgivelsene (sted) Gir bruker en mulighet til å engasjere seg og delta IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

28 Steder IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

29 Produkter IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

30 Eksempler på touchpoints Prosesser Prosesser beskriver hvordan en tjeneste bestilles, lages og leveres til brukeren Det finnes ofte mange veier (dermed prosesser) gjennom en tjeneste Gir et holistisk overblikk over hele tjenesten med alle involverte elementer Mennesker Mennesker kommer til live gjennom tjenester og det er de som er koreografene Brukere og ansatte utfører ulike deler av tjenesten for å oppnå et ønsket resultat Sitter igjen med personlige opplevelser og inntrykk av tjenesten IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

31 Prosess IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

32 Mennesker IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

33 IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

34 Hvordan jobber man med tjenestedesign? Skiller seg litt fra andre disipliner ved at man er er tjenesteorientert Fremtidsarkeologi Visualisering av hele tjenestens levetid er viktig: Rollespill (utspilling av scenarioer, hjørnetilfeller, forventende situasjoner) Improvisasjon (for å oppdage nye utfordringer) Stakeholder map Customer Journey Map Prototyping av løsninger må inkludere mer enn bare produkter: (kommer tilbake til dette senere) Evidencing Experience prototyping Videoprototyping Øvrige metoder: Storytelling Workshops Observasjon Cultural probes IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

35 Experience prototyping Definisjoner: - Experience prototyping En måte å prototype på hvor vi er opptatt av opplevelsen rundt bruk Et forsøk å «bli» brukeren Bygger på innsiktsfulle kvalitative undersøkelser fremfor kvantitative undersøkelser Vi prototyper ikke produkter (apper eller dingser), men hele opplevelsen Hvordan oppleves for forespeilede løsning? Hvilke kanttilfeller og ekstremiteter kan brukeren havne i? Eksempler på teknikker: service safari, rollespill, assosiasjonsøvelser, dommedagsscenario etc. Eksempel på oppgave: gi noen på et tog oppgaven: «vær sulten finn noe å spise» IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

36 IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

37 IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

38 (Eksempel på brukerreise fra Halogen v/ Astrid T. Larssen) IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

39 IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

40 Customer Journey Map (Bilder av John Kembel) IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

41 Customer Journey Map IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

42 Customer Journey Map Definisjoner: - Customer Journey Map En metode som brukes for å visualisere en kundes reise gjennom en tjeneste Visualiserer stegene og touchpointene som inngår i tjenesten En mer abstrakt og mindre detaljert modell enn for eksempel systemskisser, men Inkluderer også andre aspekter, for eksempel humør, forventninger, objekter etc. Ingen fast modell, men hensikten med modellen er å orientere om kundens opplevelse av tjenesten Tidsaspektet er viktig det begynner/slutter gjerne ofte lenge før/etter bruken av tjenesten Brukes svært mye i tjenestedesign, men har også smittet over på andre disipliner Bruker ofte begrepet brukerreise på norsk IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

43 Hvorfor begynne før og etter bruken av tjenesten? IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

44 Utfordringer med tjenestedesign anno Merkevarens medium vil bli irrelevant Kunder vil binde seg til merkenavnet og tjenesten som leveres - ikke mediumet 2. Touchpoint design vil ikke være nok til å gjøre en forskjell UX er blitt for allment - langsiktige og stabile kundeforhold vil utgjøre forskjellen 3. Holistiske opplevelser krever holistiske organisasjoner Conway s Law: organizations which design systems are constrained to produce designs which are copies of the communication structures of these organizations. 4. Kunder vil tilegne seg mer flytende forventninger Som brukere vil de forvente samme opplevelser på tvers av systemer og tjenester 5. Design av opplevelser for ansatte vil bli en prioritet Det vil bli økt fokus på hvordan tjenester leveres internt slik at ansatte kan betjene kunder enda bedre 6. Bedrifter vil bygge ut kapasitet for tjenestedesign Bedrifter vil vil adaptere et tjenestefokus og inkludere mer fokus på verktøy, metoder og praksis fra tjenestedesign IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

45 Webtrender og webutvikling IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

46 Da og nå Se flere eksempler på Dell (1996) Netflix (1997) Amazon (1995) Apple (1996) IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

47 Internett har forandret seg Vi snakker gjerne om nye standarder for utforming og at nettsider ser estetisk pene ut for eksempel tableless design, bruk av negative spaces, typografi etc. Men det har skjedd mye mer enn det som har påvirket Internetts utforming: Menneskene har forandret seg (holdninger, interesser etc.) Nye grupper mennesker har kommet til (og nye alders- og yrkesgrupper) Teknologien har utviklet seg (tilgang, hardware, kompatibilitet) Standarder har utviklet seg (mer forståelse og åpenhet rundt samhandling) Bedre infrastruktur (bedre utbygging av teleløsninger) Hvordan har disse faktorene påvirket utforming av nettsider i det siste (og i fremtiden)? IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

48 Nye trender Ubiquitous computing Internett er alltid tilgjenglig overalt Raskere hastigheter Økt hastighet gir mulighet for å dele mer dynamisk innhold Nye standarder Nye standarder for HTML, CSS, nettlesere og web Crowdsourcing Ideer springer ut av fellesskap, penger samles inn i fellesskap (crowdfunding) Nye enheter kommer til Input fra mer utradisjonell enheter (kjøleskap, bil, planter) Mer og mer deling Flere sosiale medier strømmer til med nye måter å dele opplevelser på Nye brukere og brukergruppen Fra nye deler av verden og nye brukergrupper (eldre, barn) Lettere å skape innhold Enkle tjenester, WYSIWYG-editorer Bred tilgang for nye medier TVer, printere, kameraer, musikkanlegg kan koble seg rett på Cloud Computing Lokale begrensninger ikke lenger et problem Støte for utfordrede brukere Universell utforming blir stadig viktigere IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

49 og nye bruksmønstre (KPCB: Meeker & Wu, 2013) Før hørte de på musikk på konserter. Nå tekster, twitrer og instagrammer de. IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

50 Nye løsninger basert på Internett (KPCB: Meeker & Wu, 2013) Bygging/finansiering: Kickstarter Printing av fysiske modeller: MakerBot Utleie av boliger: AirBnB Egenutdanning: KhanAcademy Musikkleie: Spotify Video-on-demand: Netflix Leie skolebøker: Chegg Elektronisk lommebok: Square Elektronisk billetter: NSB E-butikk: Shopify Matbestilling: Just-Eat Freelance-on-demand: odesk IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

51 You help me, I help you Crowdsourcing innebærer at en gruppe mennesker går sammen om å løse oppgaver, tilby tjenester eller skape ideer En demokratisk prosess med en flat struktur Eksempler: Crowdvoting: få tilbakemelding fra en stor gruppe mennesker Crowfunding: mange mennesker bidrar med små summer for å oppnå et økonomisk mål IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

52 Responsive web design (RWD) Definisjoner: - Responsive web design Internett er nå tilgjenglig på en rekke enheter: stasjonære maskiner, mobiler, tablets, TVer etc. Ulike enheter har ulike oppløsninger, fysisk skjermstørrelser, prosessorkraft og programvarestøtte. Ulike enheter har også svært ulike interaksjonsmekanismer Responsive web design handler om å utforme nettsider slik at de gir best mulig brukeropplevelse uansett enhet. Nettsiden må altså tilpasses enheter for å unngå at bruker må skalere, rotere, zoome, scrolle unødvendig mye. Det finnes noe innebygget støtte i for eksempel HTML og CSS for å tilpasse utformingen (med media queries) Det finnes ferdige rammeverk som hjelper til (Foundation, Bootstrap, Skeleton, jquery for mobile etc.) Støtte for å simulere ulike enheter og nettlesere online eller som en del av populære utviklerverktøy IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

53 Responsive web design (RWD) IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

54 Attention span Vi er forventningsfulle, men samtidig svært utålmodige Vi vet hva vi er på jakt etter og ønsker ikke å måtte lete etter det Det er så mye vi ikke gidder å lese (Hva med EULA?) IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

55 Ser brukerne våre det vi tror de ser? (Hentet fra boken Don t make me think av S. Krug (2005),.s ) IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

56 Hvordan vite hvordan brukerne bruker nettsiden? Det er blitt viktigere og viktigere å forstå brukerne og dere bruksmønstre og preferanser Hvordan bruker de siden? Hvor lenge er de på hver underside? Hvordan navigerer de rundt? Google Analytics brukes til generering av statistisk data: IP-adresse, skjermoppløsning, nettleser, besøkte sider etc. Heatmaps og eye-tracking brukes til å studere mer subjektive bruksmønstre IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

57 Essence of the bull Klarer vi å skille det vesentlige fra det uvesentlige? Er alt det vesentlige like vesentlig for alle brukere? IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

58 Prinsipper for godt design Steve Krug presenterer 10 prinsipper for godt design i sin bok: 1. Brukbarhet betyr at det fungerer godt og ikke frustrerer 2. Nettsider bør være selvforklarende og åpenbar 3. Ikke få meg til å tenk 4. Ikke sløs med tiden min 5. Brukere bruker fortsatt "tilbake"-knappen 6. Vi er vanedyr - vi holder oss til det vi får til 7. Ikke tid til smalltalk - vekk med alt støy og koseprat 8. Ikke ta vekk søkeboksen 9. Vi former mentale kart over nettsider 10. Gjør det lett å gå hjem IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

59 Web 2.0 Definisjoner: - Web 2.0 Begrep som ble brukt for å angi hvordan bruken av Internett hadde forandret seg (ikke ny utgave) Beskrev en forandring man observerte i innhold, utforming og bruk av nettsider Nettsider gikk fra statiske sider med enveiskommunikasjon til å bli nettsider med dialog: Dialog mellom de som skaper og leser innhold Dialog mellom ulike brukere Diskusjoner En overgang til mer oppfordret deling, brukerdeltagelse, samarbeid, co-creation etc. Trenden la grobunn for blogging og alle sosiale nettsteder vi siden har blitt kjent med men plutselig ble man noen på Internett, man fikk en karakter, en avatar, en personlighet IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

60 Identitet Personvern, datalagring, overvåkning har blitt aktuelle temaer Vanskelig å surfe på nettet uten at din identitet kobles til sosiale medier som Facebook eller Google+ Nettsidene kan videre bruke geolocation, IP-adresse, sensordata etc. til å bygge en profil av deg Cookies og søkehistorikk brukes også til å tilføye mer informasjon om vaner, Interesser, bruksmønstre etc. IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

61 Grensesnitt IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

62 Hva er et grensesnitt? Definisjoner: - Grensesnitt Et grensesnitt er kommunikasjonspunktet hvor to ulike systemer møtes og interagerer Vi bruker betegnelsen til å omtale den måten brukeren interagere med systemet på Grensesnittet kan være touchbasert, talebasert, bevegelsesbasert etc. Det er lett å blande de engelske begrepene for grensesnitt / interaksjon interface / interaction. Omtales nærmere i kapittel 6 i læreboken, spesielt de første delkapitlene Fremtidens grensesnitt? Inspirasjon IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

63 IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

64 Repetisjon: interaksjon vs. grensesnitt Interaksjon (interaction) Hvordan vi interagerer med systemet Hvordan brukere og systemet kommuniserer og gir hverandre tilbakemelding kommunikasjonsform Fire interaksjonstyper: (1) Instruerende, (2) Konverserende, (3) Manipulerende og (4) Eksplorerende Les mer i kapittel 2 Interaksjonen beskriver kommunikasjonsformen mellom menneske og maskin, altså hvordan vi interagerer med et system. Fordi dette alene ikke nødvendigvis spesifiserer hvordan interaksjonen vil foregå i praksis, må vi også beskrive kontaktpunktet som kommunikasjonen foregår gjennom. Kontaktpunktet omtales som grensesnittet og beskriver hvordan interaksjonen manifesterer seg. En interaksjon kan f.eks. være konverserende uten at vi vet om det er en tekstlig dialog gjennom et WIMP-grensesnitt som IKEA-eksempelet i boka, eller om det er et talebasert grensesnitt slik som Siri på iphone. Grensesnitt (interface) Grensesnittet beskriver kontaktpunktet/overgangen (border) som knytter menneske og system samme Grensesnittet muliggjør interaksjonen Grensesnittyper: WIMP, shareable, augmented reality, virtual reality, wearable, tangible, touch-based Se flere eksempler på s. 159 (4. utgaven) / s. 158 (3. utgave) IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

65 Utviklingen av grensesnitt de siste årene (KPCB: Meeker & Wu, 2013) Mainframemaskiner 1960-tallet Minimaskiner 1970-tallet Personlige datamaskiner 1980-tallet Internettmaskiner 1990-tallet Mobile Internettmaskiner 2000-tallet Wearable/ overaltværende maskiner 2010-tallet Annet? IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

66 Hvordan velge seg et grensesnitt? Det mest velegnede grensesnittet avhenger av flere faktorer: Oppgave hva skal gjøres, hvor lenge, hvor omfattende, hvor mange ganger? Bruker er det en ekspertbruker, en novise, flere brukere samtidig? Kontekst er det hjemme, ute på farta, på ferie, er det støyete rundt? Kostnad hvor dyrt blir det å implementere, hvor lenge holder det, hvor god skalerer det? Robusthet hvor solid er det, hva tåler det av belastning, hvilket materiale? Men et av de viktigste spørsmålene å stille seg er fortsatt: hvordan formidles informasjon? IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

67 Ulike typer grensesnitt beskrevet i kapittel 6 IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

68 Tangible interface IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

69 Shareable interface IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

70 Wearable interface IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

71 Scannable interfaces IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

72 Tingenes internett: Sikkerhetsmessige utfordringer som følger med fremtidens internett 13. august 2015 IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

73 IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

74 IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign

75 IN1050 Introduksjon til design, bruk, interaksjon Tjenestedesign