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

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

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! Husk at dere har en kontaktstudent dere kan bruke: Ingrid Thorkildsen (ingrth@student.matnat.uio.no). INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 2 15.09.14

Grublegruppa 39 som har svart foreløpig (33+6) Tar sikte på oppstart om 2-3 uker INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 3 15.09.14

Obligatorisk oppgave 1 INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 4 15.09.14

Obligatorisk oppgave 1 Husk å gjøre lyd- eller videoopptak Husk å levere disse filene sammen med besvarelsen To forskjellige intervjuobjekter vær kreativ! Det er lov å gjøre «feil» så lenge du beskriver prosessen Besvarelser uten transkribering eller lydfiler blir ikke godkjent INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 5 15.09.14

Obligatorisk oppgave 1 Hva blir underkjent? Manglende/feil med formelle krav: filformat, vedlegg, sidetall, brukernavn (bruk malen fra gruppelærerne) Ufullstendig besvarelser: for kort intervju/transkribering, manglende pilotintervju, ufullstendig rapport Forsinkede innleveringer sendt på e-post til gruppelærer dette skal gå via studieadministrasjonen Hvordan skrive en god oblig? Bruk teori dere har lært (begreper, referanser, eksempler) når dere svarer på spørsmål Ikke bare namedrop begreper, men bruk dem aktivt Bruk teori, men ikke definer den i oppgaven! Ikke gjenta lange definisjoner på ting hvor dere bare kan henvise til lærebok/lysark. Vær kreativ i valg av intervjuobjekter og sørg for at dere knytter valg av intervjuobjekter opp mot valgt tematikk. Vis at du bruker pilotintervjuet som en forberedelse til hovedintervjuet (planlegging, valg av spørsmål, refleksjoner). Gjør en god refleksjon i rapporten. Man diskuterer ikke med et svar på én setning, og refleksjoner av typen «alt gikk bra» holder ikke mål. Sørg for at transkribering er enkel å lese (unngå prosaform, bruk utheving, klammer etc., del gjerne opp) PS. Alt dere er usikre på om dere bør ha med kan legges bakerst i et appendiks (bilder, notater, samtykkeskjema etc.) INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 6 15.09.14

Tjenestedesign (service design) INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 7 15.09.14

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

(Rå)vare Kaffebønner Produkt Ferdig kvernet kaffe Tjeneste Nytraktet kaffe Opplevelse Kaféstemning INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 10 15.09.14

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 11 15.09.14

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 12 15.09.14

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 13 15.09.14

INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 14 15.09.14

INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 15 15.09.14

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 16 15.09.14

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 17 15.09.14

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 18 15.09.14

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 19 15.09.14

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 20 15.09.14

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 21 15.09.14

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 22 15.09.14

INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 23 15.09.14

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

Customer Journey Map INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 25 15.09.14

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 26 15.09.14

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

Webtrender og webutvikling INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 28 15.09.14

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 29 15.09.14

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 30 15.09.14

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 31 15.09.14

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 32 15.09.14

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 33 15.09.14

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 34 15.09.14

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 35 15.09.14

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

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 37 15.09.14

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 38 15.09.14

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 39 15.09.14

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 40 15.09.14

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 41 15.09.14

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 42 15.09.14

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

Tingenes internett: Sikkerhetsmessige utfordringer som følger med fremtidens internett 14. august 2014 INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 44 15.09.14

INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 45 15.09.14

INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 46 15.09.14

INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 47 15.09.14

Grensesnitt INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 48 15.09.14

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 49 15.09.14

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 50 15.09.14

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 51 15.09.14

Ulike typer grensesnitt INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 52 15.09.14

Tangible interface INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 53 15.09.14

Shareable interface INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 54 15.09.14

Wearable interface INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 55 15.09.14

Scannable interfaces INF1500 Introduksjon til design, bruk, interaksjon Webutvikling, grensesnitt og service design 56 15.09.14