Wireframeskisser, pappersprototyper och heuristisk utvärdering

Storlek: px

Starta visningen från sidan:

Download "Wireframeskisser, pappersprototyper och heuristisk utvärdering"

Simon Nilsson
för 6 år sedan
Visningar:

3 5 4 6 Dagens föreläsning Wireframeskisser, pappersprototyper och heuristisk utvärdering Mattias Arvola Institutionen för datavetenskap Designmönster Wireframes Wireflows Sitemaps Pappersprototyper

1 Dagens föreläsning Wireframeskisser, pappersprototyper och heuristisk utvärdering Mattias Arvola Institutionen för datavetenskap Designmönster Wireframes Wireflows Sitemaps Pappersprototyper Heuristisk utvärdering 2 Designmönster (se Tidwell) Magnetism Kontext med överliggande mönster Problem Krafter Lösning Underliggande mönster Inspiration och saker att tänka på Inga recept! Ingen kokboksdesign! Use when: The user needs to position objects very precisely, such as next to other objects or against Guides. Why: Magnetism helps compensate for users lack of perfect dexterity with a mouse. How: When the user drags an object closer to another object s edge, make it snap to the other object. Likewise, when it s dragged away, keep it there for a few pixels, and then let it move away. Skissning av Pirmin Buchenberg

7 9 11 8 10 12 + -!? Alt # Design rationale av Matilda Zetterblom Scenarios När Yngve och Marianne äter sin första hotellfrukost i Vimmerby diskuterar de vad de ska göra under dagen.

De kollar vilka platser som är inkluderade i mobilapplikationen och beslutar sig för att helt enkelt lägga upp rutten efter dem.

2 !? Alt # Design rationale av Matilda Zetterblom Scenarios När Yngve och Marianne äter sin första hotellfrukost i Vimmerby diskuterar de vad de ska göra under dagen. De tänker starta på Näs, promenera runt lite i staden och sedan ta bilen för att titta på omgivningarna. De kollar vilka platser som är inkluderade i mobilapplikationen och beslutar sig för att helt enkelt lägga upp rutten efter dem. Det visar sig att även flera byggnader och platser inne i stadskärnan är inkluderade i applikationen så när de är färdiga på Näs aktiverar Yngve appen. START Listen to verbal or read printed in the to install and start the application. MINNESMARK Task Flow END A final story is played (audio or video) when all peices of the puzzle are found and the camera is pointed to the jigsaw poster in the. START Listen to verbal or read printed in the to install and start the application. MINNESMARK Task Flow END A final story is played (audio or video) when all peices of the puzzle are found and the camera is pointed to the jigsaw poster in the. jigsaw poster with lost pieces in the map Start the Log of Wood story compass Owl Tree Kristin's House Astrid's Home Reset the application jigsaw poster with lost pieces in the map Start the Log of Wood story compass Owl Tree Kristin's House Astrid's Home Reset the application See question on marks where the how to solve the lost pieces can puzzle be found See the pieces you have found to the jigsaw on the places poster you found them question marks where the lost pieces should have been. Found pieces are shown at their positions Project: Digital Landscapes Creator: Mattias Arvola Modified: 17 June 2011 Product: Minnesmark Phase: Detailed Design Version: 1.3 to the start marker outside the Listen to the log of wood story (or watch the movie) log of wood Read on screen to the ground See in what direction the closest peice of the puzzle is, and also the directions to the pieces further away and view Pippi (or Astrid) in the tree to the marker behind the tree View photo or film of the inside of the tree and listen to sounds of owl chicken eggs, and view Kristin's house from the outside. Walk closer and passed the walls of the house to see the kitchen on the other side of the walls Point to marker, find the milk piece, View someone walking on the roof top Point camera to marker turn around View a panorama from the rooftop and find a whisker If all peices are found, read final, and go to view the jigsaw poster in the to the printed reset-marker Confirm the reset on screen See how all found pieces are deleted See question on marks where the how to solve the lost pieces can puzzle be found See the pieces you have found to the jigsaw on the places poster you found them question marks where the lost pieces should have been. Found pieces are shown at their positions Project: Digital Landscapes Creator: Mattias Arvola Modified: 17 June 2011 Product: Minnesmark Phase: Detailed Design Version: 1.3 to the start marker outside the Listen to the log of wood story (or watch the movie) log of wood Read on screen to the ground See in what direction the closest peice of the puzzle is, and also the directions to the pieces further away and view Pippi (or Astrid) in the tree to the marker behind the tree View photo or film of the inside of the tree and listen to sounds of owl chicken eggs, and view Kristin's house from the outside. Walk closer and passed the walls of the house to see the kitchen on the other side of the walls Point to marker, find the milk piece, View someone walking on the roof top Point camera to marker turn around View a panorama from the rooftop and find a whisker If all peices are found, read final, and go to view the jigsaw poster in the to the printed reset-marker Confirm the reset on screen See how all found pieces are deleted Note: Content objects are bold. Actions are italic. Note: Content objects are bold. Actions are italic. HOME Sitemaps Den enklaste varianten är som en organisationshierarki Boxarna representerar sidor eller skärmbilder Linjerna representerar länkar Teknisk info Produktinfo Policy Butiker Start Produkt -typ Manual Sitemap med storlek för att visa vikt Om oss Kontakt Kundtjänst FAQ

3 13 14 Wireframes Design by Pirmin Buchenberg Wireflows SWIPE Från arbetsskisser till beskrivande och specificerande bilder There is no such thing as a failed experiment, only experiments with unexpected outcomes. Buckminster Fuller LoFi- och HiFi-prototyper Low Fidelity: Ofta gjorda i papper. Används för att testa en design med användare och förutse stora problem till en extremt låg kostnad. High Fidelity: Interaktiva och datorbaserade. Används för att övertyga ledning och andra intressenter om att man tänkt igenom designen ordentligt och att man är på god väg. Kostnaden för dem kan dock vara ganska hög och de kan orsaka orealistiska förväntningar bland kunder. Mer om det i kommande föreläsning. Evolutionära eller temporära prototyper Funktion Integrerad Konstruktion Look & Feel 17 18

4 Pappersprototyper A Görs tidigt i utvecklingsprocessen för att utforska idéer A Interaktiva! A Billiga, snabba och portabla A Lätta att ändra, kan t.o.m. skapas under en session med användare A Användare har lätt att föreslå förändringar A Vad vill du testa? Ju finare de är desto mer fokuserar användare på utseende

25 Fysisk mock-up Fysisk mock-up 1:1 eller skalmodeller ungefär som arkitekter använder Kartong, lego, styrofoam Får systemdesigners att tänka 3D och fysiska begränsningar 26 HEURISTISK UTVÄRDERING

5 25 Fysisk mock-up Fysisk mock-up 1:1 eller skalmodeller ungefär som arkitekter använder Kartong, lego, styrofoam Får systemdesigners att tänka 3D och fysiska begränsningar 26 HEURISTISK UTVÄRDERING Tag 3 5 experter och en utprovad lista med tumregler Gå igenom tillsammans vad tumreglerna kan betyda för aktuellt system Utvärderare individuellt Går igenom systemet ett första varv Går igenom systemet noga ett andra varv Identifierar problem utifrån tumreglerna Output: lista med hittade problem kopplade till varje tumregel Sammanställ output från samtliga utvärderare Bedöm allvarlighetsgrad Ge förslag på åtgärder Tumregler Bedöma allvarlighetsgrad Enkel och naturlig dialog Tala användarens språk Minimera användarens minnesbelastning Var konsekvent Ge feedback Erbjud tydligt markerade utgångar Erbjud genvägar Bra felmeddleanden Förebygg fel Frekvens: ofta eller sällan Inverkan: enkelt eller svårt att åtgärda om det går snett Ihärdighet: problem en gång för användare som inte känner till det eller kommer de besväras av det varje gång? 29 30

6 5-gradig skala för allvarlighetsgrad Hur många utvärderare behövs? 0. Jag håller inte med om att detta är ett användbarhetsproblem överhuvudtaget 1. Kosmetiskt problem behöver inte åtgärdas om det inte finns tid över i projektet 2. Mindre användbarhetsproblem att åtgärda det bör ges låg prioritet 3. Större användbarhetsproblem viktigt att åtgärda, så det bör ges hög prioritet 4. Användbarhetskatastrof tvunget och nödvändigt att åtgärda innan produkten släpps För bästa resultat Bäst resultat ges om utvärderaren har expertis inom både Användbarhet och tumreglerna Domänen 18 Great Examples of Sketched UI Wireframes and Mockups Posted by Henry Jones on May 20, great-examples-of-sketched-ui-wireframesand-mockups

Relevanta dokument

according to Bill Verplank

1 according to Bill Verplank 1. Planera den användarnära processen 2. Förstå och specificera brukssituationen Uppfyller kraven 5. Utvärdera mot användarkrav 3. Specificera användar- och verksamhetskrav