Prototyping medium/high fidelity Användarupplevelse Interaktionsflöde och flow Användbarhetsutvärdering - Usability testing Tillgänglighet

Relevanta dokument
Interaktionsdesign och användbarhet Personas. Paper prototyping. » Metod för representation av användaren. » Metod för konceptutveckling

martin östlund Disposition

Workshop III användartestning Senast ändrad :02 av Martin Östlund Redigera

SMD084 lp människa/datorinteraktion. Del II Programmeringens matematiska grunder. Del I - Lektionsplanering. Del II Lektionsplanering

Vad utmärker ett bra användargränssnitt?

Kursplan Gränssnittsdesign, 100p Läsår

SLUTRAPPORT RUNE TENNESMED WEBBSHOP

Interaktionsdesign och användbarhet Personas. Paper prototyping. » Metod för representation av användaren. » Metod för konceptutveckling

Hi fi prototyping. Johanna Persson MAM nov 2014

Prototypningsverktyg. A Human-Centered Design Process (ISO , 2010) Mattias Institutionen för datavetenskap

Utvärdering av prototyp: Frågedatabas av Mårten Cronander. Innehållsförteckning

Sharing nature på svenska

Värderingskartlägging. Vad är värderingar?

Sju riktlinjer vid utveckling av hemsidor för mobil och desktop

Spelutveckling - Gameplay. Design och produktion

Föreläsning 7 Handlande, metaforer och interaktionsstilar. Kapitel i Stone et al.

ÖVERSÄTTNINGAR I detta kursmaterial har vi valt att översätta en del engelska beteckningar till svenska. Ex: Feature Egenskap

Hi-Fi Prototyping + laborationsgenomgång & verktyg

Kognition. Kognition, interaktion och användare. Överblick - kognition. Data-information-kunskap. Nivåer av kognition. Dä ä bar å åk.

OBS! Lägg till planeringsområde

Vad utmärker ett bra gränssnitt?

Uthållig Förblir effektiv och motiverad trots bakslag och besvikelser. Arbetar tills projektet avslutas eller resultat uppnås.

Symmetry: Bortsett från menyn har innehållet av sidan viss symmetri när det kommer till videoklippen som är upplagda på sidan.

Kursplan Gränssnittsdesign och Webbutveckling 1 Vårtermin 2014

Rune Tennesmed. Oskar Norling 1DV430. Individuellt Mjukvaruutvecklingsprojekt 1DV430 Webbprogrammerare H12 Oskar Norling

Introduktion till After Effects

Interaktiva applikationer för dator (WPF) och web (Silverlight) Grafisk utvecklingsmiljö. Hela produktioner: design, layout, animationer, skins, etc.

Föreläsning 7, Interak2on

Kursplan Webbutveckling 2, 100p Läsår

Presentationsprogram - Kravspecifikation. Henrik Österdahl och Jenny Melander, D mars 2002

Workshop II checklistor Senast ändrad :55 av Martin Östlund Redigera

Nya Medier. Gränssnitt, Interaktivitet och Digital kod

ibooks Author Komma igång

Version: Datum: DynaMaster 5 Golf Övergripande manual

Handbok i konsten att köpa översättningar

Funktionalitet i ProDiver

Calligra. En allmän inledning. Raphael Langerhorst Jost Schenck Översättare: Stefan Asserhäll

Under Kurser visas dina kurser som kort och om där finns nya uppgifter eller anslag visas antalet i kurskortet.

Föreläsning 10: Gränssnitt och webbdesign

Det goda boksamtalet- en ömsesidig dialog Våra gemensamma tankar för att boksamtalet ska bli bra, Sa 1a och Språkintroduktionen.


Föreläsning 8, Design

Microsoft Expression Blend + Sketch Flow

Prototypning. Filmtajm. Prototypens roll: Evolutionär eller kasta bort. Dagens föreläsning. Detaljgrad. Detaljerad i vilket avseende?

Kanban. Marcus Hammarberg. torsdag den 15 september 2011 (v.)

GRÄNSSNITTSDESIGN. Ämnets syfte. Kurser i ämnet

Användbarhet. Bryt rätt regler. Nils Ehrenberg

Undervisningen i ämnet webbutveckling ska ge eleverna förutsättningar att utveckla följande:

Handbok i konsten att köpa översättningar

Användarhantering Windows 7 I denna laboration kommer vi att skapa nya användare och grupper och titta på hur man hantera dessa.

Berättelser Scenarios Presentationer Skisser Formella modeller Mjukvaruprototyper Kartong modeller etc.

Kognition crash course

Clarity Program. Att leda inifrån sin kärna.

S A V E T H E C O M M U N I C A T I O N

Några exempel. Principer för design. Vilka problem medför den här designen? Vilken av följande placeringar av piltangenterna är bäst?

Mina listor. En Android-applikation. Rickard Karlsson Rickard Karlsson - rk222cu Linnéuniversitet rk222cu@student.lnu.

BESKRIVNING AV DISPLAY

Kravspecifikation. Sammanfattning. Fyra i rad Javaprojekt inom TDDC32. Version 2.0. Datum Dokumentnummer

Visuell GUI Testning

Innehåll. Vad är prototyping? Low-, mid-, high-fidelity prototyping Konceptuella modeller Verktyg för mid/high-fi prototyping

Sharpdesk Sharpdesk Dokumenthanteringslösning

Skapa epublikationer för Webben & Mobila Enheter

ZWCAD har stöd för VBA och Lisp program så alla funktioner som ni tidigare har skapat kan användas direkt utan anpassning.

Författare DNR: Diarienummer. Manual för Mittuniversitetets Officemallar

Coachningsfärdigheter för professionella vuxenutbildare COACH4U WP 7 Utveckling av utbildningshjälpmedel. Beskrivning av coachingsuppsättningar

Bygga kurser för mobila enheter

Tillgänglighetskrav på interaktion och design Dessa krav baseras på WCAG 2.0,

Upptäck fördelarna med underhållssystemet MaintMaster.

Vad vi pratade om förra gången. Fast med andra ord

Bilaga: Gestaltning 1177 Sjukvårdsrådgivning Videostöd för ökad kvalitet och tillgänglighet. Daniela Baccarini & Pelle Östberg

För dig som lärare har vi placerat nya inkomna svar från elever under Följ upp uppgifter medan elev på samma ställer ser alla sina aktiva Uppgifter.

Extended DISC Coachande ledarskap

Idag. Prototyper och användbarhetsutvärdering. Vad prototyper prototypar. Olika sorters prototyper. Del 2 Prototyper Utvärdering Analytisk Empirisk

14 egenskaper som kännetecknar de bästa marknadscheferna

SSF Säkerhetschef avsnitt 7 Hans Fornwall

TILLGÄNGLIG FÖRSKOLA FÖR ALLA!

FLOW Ditt optimala tillstånd. 1. Mässerbjudande 2. Presentation

Processledar manual. Landsbygd 2.0

Strategi för e-service

SKOLFS. beslutade den XXX 2017.

Läsförståelsen sjunker dramatiskt. Kan vi göra något?

Pussel DISC/Morot Kombination

Processledarmanual. Landsbygd 2.0

KURSMÅL WINDOWS STARTA KURSEN

Rapport Projekt 1 Från material till webb

EN BERÄTTELSE OM SAMARBETE OCH FRAMGÅNG

INFORMATIONSFÖRSÖRJNING OCH KOMMUNIKATION MED WEBBASERAD 3D

Enkel Digital Skyltning

Vårt arbetssätt bygger på Läroplanen för förskolan (Lpfö98) och utbildningspolitiskt program för Lunds kommun. Här har vi brutit ner dessa mål till

Föreläsning 4, Användbarhet, prototyper

Grafisk formgivning. Användarens checklista

DI-Plot. Instruktionsmanual

ENTRÉ DOKUMENTHANTERING...

Hej! Min uppdaterade portfolio finns online på

ÖVNINGAR KRING KOMMUNIKATION OCH PARRELATION

Enkel Digital Skyltning. på några minuter...

Digitalt lärande och programmering i klassrummet

TropicBox INNEHÅLLSFÖRTECKNING. 1. Sammanfattning. 2. Innehållsförteckning. 3. Utgångspunkter. 4. Användarstudie. 5. Koncept och visualisering

EN GUIDE FÖR GRAFISK PROFIL

Webbtillgänglighet. Webbtillgänglighet. World Wide Web Consortium. Web Accessibility Initiative, WAI WCAG 2.0 WCAG 1.0

Transkript:

martin östlund 2008

Prototyping medium/high fidelity Användarupplevelse Interaktionsflöde och flow Användbarhetsutvärdering - Usability testing Tillgänglighet

Medium fidelity prototyping/testning» Använda skärmbilder» Statiska men mer detaljerade och mer färdiga än pappersprototyper*» Fortfarande snabba att ta fram (i relation till färdig applikation)» Simulera funktionalitet i sekvenser

Medium fidelity prototyping/testning» Statiskt/manuellt» Simulera funktion manuellt» Byta sida manuellt» Interaktivitet - fejkad» Växla mellan statiska skärmbilder» Dedikerade prototypingverktyg t ex prototypeapp» HTML och javascript» Powerpoint, Flash

Vilken typ av upplevelse vill jag erbjuda? Vad uppskattar min målgrupp? Användarupplevelsen» Vilken användarupplevelse vill man leverera» Vad är det användaren uppskattar? Tänk på vad det kan vara*» Användare uppskattar sällan saker som de inte ser» Fokusera på huvudsakerna» Kul, stimulerande, effektivt, förtroendeingivande, lättlärt, lättanvänt beror på användaren och situation vad som passar

Vilken magkänsla är jag ute efter? Vilka känslor vill jag frambringa? Ett ramverk för användarupplevelser» Olika trådar» The sensual thread - magreaktionskänslor» The emotional thread komplexa känslor som glädje, nöjdhet, engagemang, känna utmaning, känna sig duktig» The compositional thread - Innehåll Hur kan innehållet styra användarupplevelsen?» The spacio-temporal thread miljön* Här gäller det att ställa sig frågan vad vill man att användaren ska känna hur designar Hur påverkar man en form tjänst för att understödja detta och design» Och hur lyckas man med det/hur användarupplevelsen? kan man lyckas bättre (förbättringsförslag)****

» Magkänsla» Soligt» Känslor» Kul» Underhållande» Spännande» Engagerande» Uppmuntrande» Innehåll» Sekvens» Meningsfullt» Miljö» Funktionellt» Snyggt» Genomarbetat

Hur kan man styra användarens uppmärksamhet? Hur kan man tydliggöra sekvensen? Uppmärksamhet» Vi kan bara fokusera på en sak i taget» Uppmärksamhet är det som styr den medvetna och målinriktade människan» Synen är (ofta) det dominerande sinnet» Uppmärksamheten är flyktig och ändrar fokus kontinuerligt*** Synen dominerar tydligen

» Styra uppmärksam heten till rätt ställe i rätt sekvens» Grafik» Gruppering» Animation

Vilken hänsyn behöver man ta/kan man ta till andra saker som tävlar om uppmärksamheten? Uppmärksamhet medvetenhet» Vi kan bara tänka på en sak i taget» Medvetandet är där det (medvetna) tänkandet sker» Uppmärksamheten är dörren in till medvetandet» Påverkas av både yttre och inre faktorer» Ta hänsyn till begränsningar i korttidsminne och arbetsminne*

» Stöd avbrott i sekvensen» Sessionstid» Gör alla val synliga» Gör sekvensen tydlig» Låt användaren bestämma ordningen i vilken saker görs

Vilka alternativa finns det till (dolda) inställningar? Om man ändå vill/behöver ha (dolda) inställningar, hur kan man synliggöra att de är aktiva? Dold funktionalitet» Dolda inställningar» Ställer orimliga krav på minnet» Exempel:» Dolda inställningar i Word» Publiceringsinställningarna i Powerpoint» Visuella indikatorer är bra» Fungerar som triggers» Exempel: Markören i Photoshop**

» Synlighet inga dolda inställningar eller funktioner» Bara direktflyg» Bara SAS» Bara miljöklassat» Synliga indikatorer viktigt

Interaktionsflöde» Skapa flow» När allting flyter på man är i the zone» Fokus helt på uppgiften» Inte på interaktionsmekanismen» Exempel:» Illustrator: Fokus på det man skapar, inte på hur man använder Pen tool» Drop-down-lista: Fokus på valet inte på hur man väljer ett alternativ i en drop-down-lista» Skrivande: Fokus på historien, inte språk, grammatik eller ordbehandlarens funktioner» Det mekaniska automatiseras och försvinner från medvetandet» Stödja/uppmuntra till automatiska beteenden*» Kräver inlärning och övning, men kan göras mer eller mindre svårt Symbios mellan människa och maskin gränssnittet blir osynligt

Interaktionsflöde» Relaterat till användarvänlighet men inte samma sak» Kan till och med stå i motsatsförhållande till användarvänlighet» Relaterat till effektivitet men inte samma sak» Effektivitet behöver inte kännas kul/bra» Flow ska kännas kul och bra och samtidigt effektivt» Och då bägge typer av effektivitet gör det man vill - rätt funktion - och gör det på ett effektivt sätt - snabbt och smidigt

Canon Cat» Framtagen av Jef Raskin» Ordbehandlare» Anpassad efter människans kognitiva förutsättningar» Uppmuntra till automatiskt beteenden» Ett sätt att göra varje sak (monotonicitet)» Kräver viss inlärning, men grymt effektiv» Inga filnamn» Inga dolda inställningar» Dedikerade knappar för sökning, beräkning, makron och andra specialfunktioner» Alla funktioner tillgängliga från dedikerade knappar (use front)» Utan att släppa skrivpositionen

Skapa förutsättningar för flow» Riktlinjer måste alltid anpassas till aktuell situation för att skapa flow» Förstå användarnas syfte fokusera på användarnas syfte» Förstå användarnas mentala/konceptuella modeller (eller hjälpa användaren att skapa bra modeller)» Designa för att stödja mentala/konceptuella modeller» Fokus på processer och arbetsflöde hellre än funktioner» Mindre är oftast bättre än mer*» Fokusera» Det som är irrelevant eller marginellt nyttigt ska bort eller tonas ned» Skilja på kommando och konfiguration*» Konfiguration bryter flödet» Alltid vara konsekvent» Samma typ av flöde för samma typer av uppgifter

» Förstå användaren» Förstå vad användaren vill göra» Söka resor» Boka resor» Utforska möjliga mål» Hitta erbjudanden» Stödja användarens mentala/konceptuell a modeller» Synliggöra modell» Inga dolda konfigurationer

User in control» Få användaren att känna att han/hon kontrollerar det som sker» Och användaren ska också vara den som kontrollerar vad som sker» Dialoger mellan användare och applikation är sällan en bra idé men det finns undantag*» Undvik en alltför blank duk» Se till att alla verktyg som behövs finns nära till hands och är enkelt tillgängliga för aktuell uppgift» Verktyg ska vara organiserade så att det understödjer användarnas arbetsprocesser*» Visa verktyg som är relevanta för aktuell uppgift, dölj de som inte är det kontextberoende*

User in control» Ge feedback så att användaren vet vad som sker» Stoppa inte flödet (inga modala dialogrutor om inte syftet är att stoppa flödet)*» Feedback ska vara relevant» Viktig/meningsfull» Relevant för uppgiften» Presentera på rätt sätt» Presentera feedback som del i arbetsflöde*» Rätt ställe och sammanhang» Rätt format» Se till att användaren förstår budskapet» Och vad han/hon förväntas göra i respons (om något)» Prioritera omedelbar respons» Även om det tar ett tag innan ett kommando kan utföras ge omedelbar respons om att kommandot har aktiverats

» Låta användaren kontrollera vad som händer» Hjälpa användaren komma igång» Synliggöra valmöjligheter» Visa rätt verktyg för aktuell uppgift» Ge relevant och förståelig feedback till användaren» Snabb respons (även om kommando tar tid att utföra)

Att göra rätt och inte göra fel» Designa för det vanliga (förutsägbara)» Värdera alternativen hur ofta/sällan kommer alternativet att väljas**» Vilket val gjordes förra gången» Vanliga alternativ synliga ovanliga alternativ dolda (åtkomliga?)» Hjälp användaren göra rätt*» Hjälp användaren undvika att göra fel*» Exempel: Ejection seat*» Hjälp användaren att begränsa konsekvenserna när det blir fel» Avbryt» Ångra*

» Undvika fel» Bra gissning» Testning, modifikation, testning, modifikation» Uppmuntra till trial&error utforskande» Inbjuda till att testa» Inbjudande knappar» Direktmanipulation» Lätt att ångra» Varför finns inte ångringsknappar på webben -?

Duktiga på Flow och interaktionsflöde» Google» Förstår användaren syfte» Stenhårt fokus på syfte med minimalistiskt gränssnitt utan grafiskt lull-lull*» Effektivt» Gör det man vill» Gör det snabbt och smidigt» Apple» Fokus på enkelhet» Fokus på flöde» Noggrant (ur)val av funktioner*» Elegans i gränssnitt» Effektivt» Känns effektivare än det kanske är» Bra användarupplevelse nöjda användare