Prototyper

Hur vi arbetar med design, del 3 - Prototyper

Det föregående inlägget i den här bloggserien handlade om Wireframes. Nu har det blivit dags att runda av med ett sista inlägg som handlar om hur vi som designers arbetar med prototyper på en teknisk webbyrå som Odd Hill, nu kör vi!

Så, vad är en prototyp?

En prototyp är en typ av digital testmodell som designern tar fram under designprocessen. Det gör man för att tidigt kunna upptäcka potentiella missar eller designproblem som man annars inte kunnat upptäcka förrän slutprodukten är färdig och testas. Man kan också använda den för att förklara t ex ett användarflöde för kunden.

En prototyp är med andra ord klickbara (ibland animerade) designskisser.

Vi på Odd Hill använder oss idag av tre olika metoder för detta:

  • Enkla klickbara mockups
  • HTML-prototyper
  • Animerade prototyper

Jag ska försöka förklara dem här under, det blir kul – Lovar!

Klickbara mockups

För att undvika att skapa trista och oinspirerande upplevelser för våra användare behöver vi inte bara tänka på hur saker vi designar ser ut, utan även hur de fungerar. Ett av de senaste årens trendigaste modeord är User Experience Design (UX-design), ett område som täcker in hela spektrat av hur en webbplats eller app fungerar och upplevs av användaren. Inom UX-design är användarvänlighet en viktig hörnsten, det spelar nämligen ingen roll hur tilltalande en design är rent estetiskt om det inte är självklart hur man använder den. En av våra vanligaste och enklaste metoder för att demonstrera och testa interaktivitet och flöden är att skapa klickbara mockups.

Klickbara mockups är egentligen precis samma sak som vanliga, platta designskisser som kan skrivas ut på papper. Skillnaden är att vi kan lägga på ett lager av interaktivitet, klickbara ytor, så att testanvändaren kan klicka sig runt mellan designskisserna och få upplevelsen av exempelvis en webbplats utan att vi behöver skriva en massa kod. Lite som en keynote fast mer anpassat för webben kan man säga. För att skapa klickbara mockups arbetar vi i InVision som är ett kraftfullt verktyg med flera andra användbara funktioner.

Klickbara mockups:

  • Är snabba att genomföra
  • Ger en tydlig bild av hur webbplatsen kommer att upplevas
  • Gör det lätt att upptäcka brister i designen
  • Är dock inte särskilt precisa och kan inte visa animationer och övergångar mellan sidor

 

 

HTML-prototyper

I sällsynta fall har våra kunder redan ett befintligt utvecklarteam i åtanke när de anlitar oss för sitt webbprojekt. Då kan det bli så att vi enbart levererar design & frontend i form av en HTML-prototyp. En HTML-prototyp innehåller i princip hela det visuella skalet, och en utvecklare kan sen utveckla webbplatsens grund separat och använda vår prototyp som mall.

Det som är så himla bra med HTML-prototyper är att de ser ut och fungerar precis som den tänkta slutprodukten kommer att göra. Det blir då lättare för oss att fokusera på upplevelse och design eftersom vi behåller 100% kontroll över de delarna och inte behöver oroa oss över andra tekniska lösningar.

HTML-prototyper:

  • Ser ut och fungerar precis som den slutgiltiga produkten
  • Maximerar precisionen i designarbetet
  • Tar tyvärr lite längre tid att genomföra, men kompenserar genom högre kvalitet i slutändan

 

Animerade prototyper

Sommaren 2014 presenterade Google vad som skulle komma att få genomslag i hela den digitala designvärlden: Material Design. Material Design är ett designsystem som skapats för att användas genomgående i alla Googles olika kanaler och produkter. Designers har därefter inspirerats av och anammat Material Design och nya trender har uppkommit ur detta. Grundtanken i Material Design handlar om att ta tillvara på hur det känns att använda något som finns bakom glaset på din skärm. Hur saker kan ha olika djup och röra sig organiskt, även hur olika saker på skärmen kan påverka varandra (det hela kan verka flummigt men kolla in videoklippet nedan så blir det förhoppningsvis tydligare).

Vad som var särskilt spännande i den här otroligt väl genomarbetade dokumentationen var ett helt kapitel om Motion Design. Användandet av smartphones, tablets och andra mobila enheter har inte bara revolutionerat hur vi ser på yta och layout inom design, även interaktioner som de plattformarna gjort möjliga (ex Tap, Drag, Swipe osv) har kommit att revolutionera hur vi designar appar och webbplatser.

 

 

Vi på Odd Hill arbetar mer och mer med animation i våra designprojekt, och för att kunna presentera detta för kunder, utvecklare och andra stakeholders måste vi skapa animerade prototyper. Ibland handlar det om korta videosekvenser och ibland handlar det om klickbara prototyper.

Vi har dock länge varit bakbundna av den i sammanhanget ganska avancerade mjukvara som krävts för att arbeta med Motion Design. Arbetet har varit tidskrävande och dyrt, och arbetsmomentet i sig har länge ansetts vara “finputsning”, något man kan arbeta med i efterhand om tid finns. Därmed har vi designers, som lägger merparten av vår tid i ett projekt precis i starten, sällan fått möjligheten att påverka hur applikationen vi själva designat beter sig.

Men inte längre

Nya prototypverktyg som Framer, Origami, Adobe XD, Flinto, Atomic och Principle har precis som InVision (se ovan) – med hjälp av en låg inlärningströskel och mjukvara som är enkel att använda – satt prototyper på kartan igen för vår bransch. Vi kan nu arbeta iterativt med motion design precis som vi tidigare kunde med våra visuals och skisser.

 

Animerat inloggningsflöde byggt i Framer

Animerat inloggningsflöde byggt i Framer

 

Kundnytta

Tack vare utvecklingen och den rimliga prissättningen av mjukvara kan vi nu fokusera på nyttan av prototyper istället för kostnaden. Detta i sin tur leder till att vi i större utsträckning aktivt designar för våra användares upplevelse av vår produkt, vilket leder till en högre kundnöjdhet. Goda nyheter med andra ord för alla oss som nu får chansen att designa verkligt speciella upplevelser, och goda nyheter för alla er som får chansen att uppleva dem :)

 

Fler inlägg i serien

 

Har ni frågor om design eller vill prata om ett designprojekt?
Maila mig på calle.tuvesson [at] oddhill.se så bokar vi ett möte!