INF1500 - Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design

INF1500 - Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 16. september 2013 Institutt for Informatikk, Universitetet i Oslo joshi@ifi.uio.no INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 1 16.09.13

Konkurranse geirmuns 17,5 torsiguh 14 nielsl 14 mettesu 14 eriklar 13 stila 13 hildurmj 13 siljeck 13 chrisye 13 aasms 13 Sist oppdatert på fredag Gjennomsnittet på quizen har økt til 5,9 av 15 poeng Det kommer fire quizer til på gruppetimene Flere måter å samle poeng på INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 2 16.09.13

Oversikt Tjenestedesign (service design) Hva er tjenestedesign og hvorfor er vi motivert til å tenke slik? Tjenester Touchpoints 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! Husk innlevering av obligatorisk oppgave 1 på fredag! Kontaktstudenten for semesteret heter Stig Ditman (stigod@student. matnat.uio.no). INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 3 16.09.13

Tjenestedesign (service design) INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 4 16.09.13

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) INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 5 16.09.13

Bakgrunn og motivasjon 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 Vi kaller det for tjenestedesign på norsk og service design på engelsk INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 6 16.09.13

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. INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 7 16.09.13

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) INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 8 16.09.13

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 INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 9 16.09.13

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 INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 10 16.09.13

Hvilke elementer inngår i tjenestedesign? 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 INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 11 16.09.13

Touchpoints som et bindeledd Merkevare Tilbyder av tjeneste Mennesker (brukere) Tjeneste Prosess Produkt Teknologien Selskapet Touchpoints Kunden INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 12 16.09.13

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 INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 13 16.09.13

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 INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 14 16.09.13

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 INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 15 16.09.13

Customer Journey Map (Bilder av John Kembel) INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 16 16.09.13

Customer Journey Map INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 17 16.09.13

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 INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 18 16.09.13

Hvorfor begynne før og etter bruken av tjenesten? INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 19 16.09.13

Webtrender og webutvikling INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 20 16.09.13

Da og nå Se flere eksempler på http://blog.uxpin.com/3032/progress-in-design-hot-webistes-then-and-now/ Dell (1996) Netflix (1997) Amazon (1995) Apple (1996) INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 21 16.09.13

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)? INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 22 16.09.13

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 INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 23 16.09.13

og nye bruksmønstre (KPCB: Meeker & Wu, 2013) Før hørte de på musikk på konserter. Nå tekster, twitrer og instagrammer de. INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 24 16.09.13

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 INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 25 16.09.13

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 INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 26 16.09.13

Responsive web design (RWD) 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 INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 27 16.09.13

Responsive web design (RWD) INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 28 16.09.13

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?) INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 29 16.09.13

Ser brukerne våre det vi tror de ser? (Hentet fra boken Don t make me think av S. Krug (2005),.s. 21-23) INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 30 16.09.13

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 INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 31 16.09.13

Essence of the bull Klarer vi å skille det vesentlige fra det uvesentlige? Er alt det vesentlige like vesentlig for alle brukere? INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 32 16.09.13

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 INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 33 16.09.13

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, brukerdetagelse, 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 INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 34 16.09.13

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, land etc. til å bygge en profil av deg Cookies og søkehistorikk brukes også til å tilføye mer informasjon om vaner og interesser INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 35 16.09.13

Grensesnitt INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 36 16.09.13

Hva er et 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 INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 37 16.09.13

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? INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 38 16.09.13

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? INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 39 16.09.13

Ulike typer grensesnitt INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 40 16.09.13

Tangible interface INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 41 16.09.13

Shareable interface INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 42 16.09.13

Wearable interface INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 43 16.09.13

Scannable interfaces INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 44 16.09.13