Tjänster Om Process • Vad kan man göra med menyn? • Hur reagerar den vid mouseover? • Om man klickar på den? Tjänster • Går man till en annan sida? • Fälls det ut en undermeny? •Fälls den ihop eller stannar? • Om man klickar på en annan tab?
Hittar sajten Det här ser snyggt, coolt, seriöst ut! Ah, här finns kvällskursen om vikingatiden! UX – vad människor upplever när de använder din app, sajt, tjänst 😀
använda Hur ser det här ut? Var finns det jag söker? Det går inte! 🤬 Kan inte hitta – sticker 😠 Fult, konstigt – sticker 🙁 När dålig ui-design ger användarna en dålig upplevelse
på visuell (gra fi sk) design • Informationsdesign – på senare tid har man börjat inse vikten (”ux copy”) • Interaktionsdesign – fi ck fart under 2000-talet.
den största tröskeln för att acceptera och börja använda en tjänst • Användare dömer digitala system mycket snabbt! • Svag informationsdesign är det största problemet i användning • Svag interaktionsdesign har största potential att skada ditt varumärke och dina kundrelationer under lång tid
göra! Så bra – postadressen hämtades direkt när jag fyllt i postnumret ’’ Snyggt, den bytte till si ff ertangenterna när jag klickade i fältet för telefonnummer! ’’ Besparar oss ”onödig” interaktion!
design: Flöden kräver normalt tre designer (färg, form, typ) Interaktions- design: Hur många steg är rimligt? Informations- design: Vad kallar vi de olika stegen? Får de rum? Både och: I vilken ordning kommer de? Vad innehåller varje steg?
Hund Katt V I bokstavs- ordning? Är ”husdjur” ett bra samlande begrepp? Fiskar Iller Papegoja Råtta Undulat Eller lägga de vanligaste först? ”Fiskar” … eller ”Akvariefiskar”?
I slur some words’, said Dagmar Munn, a retired wellness instructor who has amyotrophic lateral sclerosis. ’Although I am careful to enunciate and carefully pronounce a command, the device stops listening by my second word. I just can’t speak fast enough to satisfy the preset listening time,’ Ms. Munn said.” Interaktions -design!
SEO Informativa bilder: kartor, diagram instruktioner, symboler, tabeller Interaktionsdesign Knappar, menyer, fl öden, inloggad eller ej, mouseover, progress bar Vad vi arbetar med Visuell design: Färg, animeringar, bildmanér, typogra fi , grid, storlekar, styrkor
meny, navigation eller sidfot. Brödsmulor visar hierarkin Upp- daterad senast Call-to-action: Länk till verktyg, tjänst eller liknande. Kan fi nnas fl er än en. H2 H1 H3 Kontakt-person är länkad men inte publicerare Ingress Senast uppdaterad visas inte under texten, enbart upptill Wireframe
Länk till verktyg, tjänst eller liknande. Kan fi nnas fl er än en. H2 H1 H3 Kontakt-person är länkad men inte publicerare Ingress Senast uppdaterad visas inte under texten, enbart upptill Nu med gra fi sk design Innehåll på bred sida. Visas här utan meny, navigation eller sidfot.
aktions- design User Interface / Gränssnitt Vi sätter olika färg på tabbarna så blir det lättare att hitta Animeringar gör interaktionen tydligare Klickbara taggar tar en till relaterat innehåll
i par – eller max som trio. • Hitta och utforska två exempel på interaktionsdesign. • Digitalt, kombinerat analogt–digitalt, eller helt analogt • Försök kartlägga och rimligt detaljerat beskriva vad användaren gör, steg för stega. • Leta efter exempel på ordning, constraints, prioriteringar, hierarki , ergonomi – bättre eller sämre. Fundera över varför har de valt de lösningar de gjort?
• Enkla digitala spel • Träningsapp från gymkedja • Parkeringsappar • Studentportalen • Dela innehåll från ngt till annan kanal • Antal manövrer (steg, klick) för att betala räkning • Bokning av tvättstugan
spaning. • Lämpligt format kan vara 2–4 powerpoint-slajds per tjänst, med några skärmdumpar eller foton och kommentarer. • Spara som pdf. • Döp fi len med namn och initial först, och därefter "uppgift 1 IxD" – alltså till exempel ”Eva E och Anna A uppgift 1 IxD". • Ladda upp via studentportalens inlämningslänk. • Var beredd att visa och kortfattat berätta om din spaning på lektionen på fredag.