Gestaltningstekniker Innehåll ALLMÄNT. Att zooma in och zooma ut

Transkript

1 Innehåll Gestaltningstekniker Allmänt Tekniker Designmöten Visuell attraktivitet Gestaltningstekniker & kommunikation Johan Åberg För bättre kvalitet i designprocessen ALLMÄNT Samla tillräckligt med information Arbeta med alternativ Växla mellan detaljnivåer Arbeta med att rama in problemet Att zooma in och zooma ut Koncept Operation Vad produkten är Syfte, tänkt användning Hur användare interagerar med produkten Funktion Hur utnyttjar användare Vad produkten gör funktionerna och innehållet De funktioner och det Perception informationsinnehåll som behövs Hur produkten presenteras Struktur Förmedling av sinnesintryck, Hur information och funktioner är visuellt, beröringsmässigt, ordnade audiellt... Linjär, hierarkisk, cirkulär... Vilka kvalitetsaspekter utrycker gestaltningen? 1

2 TEKNIKER specifikation operativ bild vision datorprototyp pappersprototyp skiss visuellt berättande scenarion & rollspel Scenarier och personor Berättelser om vem som gör vad, när, var, hur och varför, på makro- eller mikronivå Starka på praktisk och social funktion Snabba och kommunikativa Relativt svaga på koncept, svaga på estetik och perception, samt operation. Exempelscenario Lisa från LAH åker hem till Elisabet, 79, som är i behov av kontinuerliga blodprov. Hon är dement och det är därför svårt för Lisa att föra en givande konversation med henne. Elisabet har en son som jobbar utomlands, men vill ändå kunna hålla koll på vad som händer, och han har därför gett strikta order om hur hemtjänsten och LAH ska arbeta med sin mamma. Överallt i lägenheten sitter det lappar som påminner personalen att skriva i en tidredovisningsbok som sonen lagt dit. En sjuksköterska från LAH har skrivit en lapp med lite matrestriktioner som hemtjänsten måste tänka på, och schemat för hemtjänstens många besök under veckan står uppskrivet på flera lappar i lägenheten. Några saker är överstrukna och ändrade i och med att schemat har ändrats sedan lappen skrevs första gången. Gränssnittsskisser Starka på praktisk funktion, estetik, koncept och konstruktion Mellanstarka på operation, presentation, sociala aspekter och etiska aspekter Svaga på feel-sidan av perceptionen Snabbast och kommunikativa 2

3 Skicklighet att rita? Att kunna kommunicera idéer till andra är viktigast Övning Sätt er i par. En ritar, den andra gissar. OBS Den som ritar, ritar färdigt innan den andra gissar. Diskutera vad det var i skissen som var viktigast för förståelsen. Fanns det något som var onödigt för förståelsen? Elefant När jag visar ordet på nästa slide så blundar alla som ska gissa! Elegant Elegant elefant 3

4 Storyboards Bilder som visar vad användare och system gör sekventiellt. Kombinerar scenarios och skisser. Svag på feel men stark på övriga nivåer (förutom struktur) Kan även förgrena sig så att den skapar ett diagram av bilder vilket gör den starkare på struktur Säger inget om konstruktion Video Extremt kommunikativa på tjänstekoncept, funktion, interaktion, look och i viss mån feel Testar (oftast) inte konstruktion Resurskrävande Wizard-of-Oz Exempel: Sixth Sense T-prototyper Pattie Maes med flera från MIT Media Lab Jämför Text Bilder Video Man kan inte prototypa allt 4

5 Papper, gula lappar, OH-film, kapaskivor... Kan göras så likt verkligheten som man vill Fördelar Snabbt, billigt, enkelt och portabelt Nackdelar Fysiska mock-ups (pappersprototyper) Svag på feel (men starkare än skisser) och testar inte konstruktion Bundet till plattform och miljö: look & feel, konstruktion Fördelar Kan skapa komponenter för produktion, kan visa feel och interaktion/handhavande Nackdelar Datorprototyper Tidskrävande, för realistiskt Mjukvaruverktyg för prototypning Presentationsverktyg (PowerPoint) HTML-redigerare (GoLive, Dreamweaver, Frontpage ) Multimediaproduktionsverktyg (Revolution, Flash, Director ) Visuella programmeringsmiljöer (Jbuilder, Visual Studio ) DESIGNMÖTEN Ett bra designmöte Främjar kreativt tänkande Testar idéer och utnyttjar olika synvinklar Tillåter alla att känna sig respekterade och bli hörda Uppnår tydliga mål på ett effektivt sätt Ger deltagarna en tydlig uppfattning om vad som ska åstadkommas efter mötet Strategi för designmöte Bestäm vad som ska åstadkommas T.ex. Gå igenom ett specifikt scenario Besvara en specifik designfråga Rita några specifika skärmar Lista möjliga punkter Bestäm snabbt vilken/vilka punkter som ska tas upp Max 5 minuter, annars singla slant 5

6 Strategi för designmöte (forts) Låt den bästa idén vinna Strunta i vems idé det är Våga utforska dumma idéer Men om det börjar kännas oproduktivt, fråga hur det hänger ihop med mötets målsättning Utforska och förstå innan värdera och föreslå Se exempel på de två följande bilderna IxD1 (ritandes vid tavlan): Lisa hittar kunden i organisationsytan, väljer honom och så dyker fältet upp i arbetsytan här borta. IxD2: Hur hittar hon honom i organisationsytan? IxD1: Hm. Hon skriver nog bara in kundens namn längst upp i organisationsytan, och så visas de bästa träffarna i en resultatlista. Där väljer hon den rätta. IxD2: Så du säger att valen i organisationsytan alltid styr innehållet i arbetsytan? IxD1: Ja, jag tror det är rätt sätt. IxD2: Och hon kan bara välja en sak i taget? IxD1: Ja, det verkar vara det minst förvirrande alternativet. IxD2: Ok, jag håller med om att det stämmer för det mesta, men vad händer om hon måste jämföra två olika fält, som detta året jämfört med förra året? IxD1: Hm. Du har rätt, då blir det problem Hm Hon kommer inte att behöva göra det särskilt ofta, så hur vore det om vi la in en jämför -knapp i fältet, som då visar en speciell sida-vid-sida-vy så här? Då kan vi behålla den tydliga kopplingen mellan organisationsytan och arbetsytan. IxD2: Visst, jag tror det funkar. Strategi för designmöte (forts) Parkera frågor och kommentarer vid behov När man skissar intensivt så är vissa frågor av mindre vikt Parkera dessa vid en speciell plats på tavlan Ha en anledning för varje beslut Utmana beslut med Varför är det bra? Fatta beslut i mötet, inte vid skrivbordet Snabbar upp och förankrar processen Gäller främst beslut av övergripande karaktär (tidiga designfaser) Använd 15-minutersregeln Ägna max 15 min åt ett problem, ta sedan in utomstående person för nytt fräscht perspektiv Bra mötesanteckningar innehåller Varje scenario som introducerats eller modifierats vid mötet Varje designbeslut, inklusive skisser och förklaring Varje öppen fråga, helst med förslag på när den ska bearbetas vidare Varje att-göra-punkt, med den person som ansvarar för att det blir gjort samt deadline Alla viktiga eller potentiellt kontroversiella designriktningar som valdes bort, inklusive motivering Dåliga mötesanteckningar Dålig översikt Saknar information Jobbiga att sätta sig in i 6

7 Bra mötesanteckningar VISUELL ATTRAKTIVITET Visuell attraktivitet Övning Ett antal webbsidor kommer att visas. Din uppgift är att betygsätta deras visuella attraktivitet på en 5-gradig skala. Först lite uppvärmning. 7

8 8

9 Övning Nu kör vi på riktigt! För varje webbsida som visas, betygsätt dess visuella attraktivitet. 9

10 10

11 Fortsättning Ni kommer nu få se samma webbsidor, fast under längre tid, och i annan ordning. Betygsätt webbsidornas visuella attraktivitet på nytt i den ordning de visas. 11

12 12

13 Gå igenom och jämför resultaten GESTALTNINGSTEKNIKER & KOMMUNIKATION Vad säger resultaten? Studie av gestaltningstekniker & kommunikation bland intressenter Uppdrag: en betalningsfunktion i ett intranät för ett hälsovårdsföretag Intressenter Sjukhuspersonal Informations- och IT-personal Systemutvecklare och systemadministratörer Vilka teman och ur vilka perspektiv diskuterar grupperna kring olika gestaltningstekniker? Perspektiv som användes 13

14 Summary Johansson & Arvola, 2007 Teman man pratade om 14