Future Insights Live 2013 dag 1: Workshops

A.k.a What Happens in Vegas ends up at the Vertica blog part 1

MGM Grand - hotellet set fra konferenceområdet

MGM Grand – hotellet set fra konferenceområdet

Så er Future Insights Live konferencen i Las Vegas godt i gang, og 1. dag bød på heldags-workshops – for mit vedkommende en workshop med det mundrette navn “Designing an elegant mobile user experience across multiple devices and platforms”. Oplægholderen Erik Loehfelm med titlen “EVP of User Experience at Universal Mind” førte os igennem workshoppen som indeholdt oplæg/slides og diskussion krydret praktiske øvelser og små underholdende indslag. Jeg undskylder at blogindlægget her er endt med at blive forholdsvist langt og med en gennemgang af det meste af workshoppen, men der blev vendt rigtig mange spændende problemstillinger, teorier og processer som hver især kunne fostre adskillige blogindlæg.

Konferencen finder sted på MGM Grand, som man nok ikke kan betegne blot som et hotel, men mere som et grotesk kompleks indeholdende ca 5.000 værelser (det 3. største hotel i verden), kasino, butikscenter, restauranter og konferenceområde. Så der skal kalkuleres med ca et kvarters målrettet gang fra værelse til konferenceområdet.

USA er jo forskellenes land, hvilket åbenbart lod sig bemærke på temperaturerne. Udenfor skinnede solen fra en skyfri himmel med 37°C og indenfor sad vi og klaprede tænder i et alt for koldt lokale, hvor airconditioningen øjensynligt ikke kunne justeres.

Workshoppen tog os igennem processerne og arbejdsgangene der benyttes i (mobil)designfasen hos Universal Mind, med en lang række praktiske eksempler, indhold og teori bag de forskellige faser. Eriks grundholdning er at design er et middel til at formidle indhold, med brugeren i centrum og i den rette kontekst – noget man næppe kan være uenig i – men som alligevel er værd at huske på igennem hele processen. Designernes og udviklernes job er ikke at lave apps eller web, men det er at hjælpe brugeren – et mantra der gik igen. Features skal komme fra analysen, ikke omvendt. Teknologien skal vælges på grundlag analyse- og designfasen og ikke omvendt. “Don’t care about the technology – care about the user” er hans holdning.

Foruden den mere kendte UX (User Experience) tilgang som Erik definerer som noget der primært drejer sig om det fysiske produkt, blev CX (Customer Experience) ofte nævnt. CX er ikke kun oplevelsen ved det enkelte produkt, men hele situationen, brugerens følelser og perception omkring fx købssituationen. “Make things that people love”. Her blev Apple og Zappos (atter) nævnt som gode eksempler.

Design- og analyseprocessen for et givent projekt og kunde hos Universal Mind kan nedbrydes som følger:

1. “Understand people, content and context”

Nøgleordet her er empati. Hav empati og forståelse for brugeren. Design til den gennemsnitlige bruger med en margin lidt under og lidt over. Pas på med at falde i feature-fælden. Her var eksemplet Photoshop, som om noget må være et feature-monster. Der blev spurgt ind til hvor mange der dagligt brugte fx 3D-funktionen af programmet. Ingen hænder. Kend og forstå brugeren. Du har brug for ham.

2. “Document their journey”

“From documentation comes opportunity”. Universal Minds bruger en næsten matematisk, analytisk tilgang til dokumentationen. Her tegnes tegninger og flow-charts og brugeren, scenarierne og konteksten analyseres. Analytics gennemgåes. Brugere observeres og deres handlinger analyseres. Et værktøj de ofte bruger i denne fase er “Journey Maps”, som dokumenterer den følelsesmæssige oplevelse af en given situation/flow/whatever. Handlinger nedbrydes til mikrohandlinger, og følelser (illustreret vha. smileys) sættes på. De sure smileys er muligheder og steder der med fordel kan sættes ind. Fra Journey Maps opstår features – derfor skal man ikke starte med at diskutere features.

Stemning

3. Wireframes

Denne del indeholdt en del underpunkter og en del teori der ligger til grund for arbejdet med wireframes. Hos Universal Mind er wireframes ikke synonym med prototyper, men mere en måde at få ideerne ned på papir(!) hurtigt og dermed billigt. Wireframen er ikke klikbar, men hænges op et sted hvor kollegerne passerer igennem dagligt, og man derfor hurtig kan lave en ad-hoc brugertest og få kommentarer (“Braindumps”) på det (noget vi faktisk også selv har diskuteret muligheden for med det grafiske design). Wireframen kan lynhurtig smides væk ændres, da den kun er på papir. “That’s the power of wireframing”.

Design Patterns
En stor del af denne gennemgang indeholdt teori og praktiske eksempler på design patterns. Et design pattern kan vel defineres som et generelt (og af brugeren kendt) mønster / løsning på givne situationer, fx. navigation. Patterns er en måde at levere indhold på. Formålet med at forstå designpatterns er at få dem koblet på wireframen. Eksempler på mobile designpatterns er fx. “off-canvas”-navigation, som efterhånden må betegnes som et konventionelt designpattern, hvor fx. navigation eller sekundært indhold “glider” ind fra siden, toppen eller bunden, men bevarer konteksten. Og som Erik så rigtigt pointerer (og som også er min kæphest) er animation et særdeles vigtigt redskab til at underbygge en brugeroplevelse. Animation er ikke (bare) lir, men et nyttigt redskab til at brugeren kan forstå hvor han kommer fra og hvor han skal hen. “Animation adds context”. Et andet eksempel på design patterns er tabelvisninger, som også benyttes til navigation på mobile enheder. Andre eksempler som article patterns og form patterns blev også gennemgået. Brug den fornødne tid på formularer, lav valideringen instant og lad brugeren komme hurtigt i gang hvis der skal oprettes bruger. Oplægget omkring design patterns førte til spørgsmålet omkring hvorvidt disse mønstre er platformsuafhængige, eller skal tage hensyn til patterns gængse på den enkelte platform. Det klare svar her (som så mange andre steder i web og app verdenen) er: “It depends”. Karuseller er fx mere eller mindre universelle, det samme er off-canvas navigationen. Men fx. tabbed navigation er typisk placeret forskelligt afhængig af device (iPhone i bund, Android i top).

Metaphor patterns (og skeumorfismer)
er egentlig også et design pattern. En skeumorfisme er et designprincip der afspejler virkeligheden. Et eksempel fra vores egen verden er fx. iPhone-appen “føtex Indkøbshjælp”, hvor indkøbslisten er lavet som en linjeret blok man kan skrive på og overstrege. Det er en kunst i sig selv at bruge skeumorfismer rigtigt, da det nemt kan overgøres. Der skal være en kobling til virkeligheden. Som gode eksempler nævntes en app til at holde styr på dit vinlager – her var designet naturligvis vinflasker på en hylde. Af de (mange) dårlige og groteske eksempler der blev vist, var bla. et vejr-app som af uvisse årsager var på en baggrund af denim, komplet med lynlåsnavigation. Bottom line er at skeumorfismer skal have en berettigelse, men er en god hjælp til at lave et motiverende design.

UX Sketching på papir (og iPad)

Eksempel på Doug Chiang artwork.

Eksempel på Doug Chiang artwork. Kilde: http://www.tumblr.com/tagged/doug%20chiang

Som nævnt tidligere er Erik stor fortaler for at lave wireframen på papir, da det er vigtigt at få ideen så hurtigt på papir som muligt. Her er det vigtigt at forstå at det ikke er et spørgsmål om at skulle være god til at tegne, det er ikke det væsentlige. (“It’s just lines. That’s it”). Universal Minds benytter en metode at sketche på, som Doug Chiang – ophavsmanden bag en del af Star-Wars universet – benytter til sine artworks. Her går det ud på at starte med at sketche med en helt lysegrå farve til de grundlæggende linjer, og så arbejde sig mere og mere konkret med mørkere nuancer for til sidst at bruge sort til de vigtigste elementer og grå til at underbygge UI’et – fx. skygger. På denne måde fremhæves vigtige emner og indhold prioriteres blot ved at iterere sig igennem forskellige nuancer af sort. Selv interaktion kan sketches på denne måde ved at tilføje dybde ved hjælp af farvebrug. Som alternativ bruger Erik også iPad-appen “Paper” til at lave sketches. Her fik vi et live-eksempel på ovenstående sketching-metode hvor der på få minutter blev frembragt et eksempel på et sketchet skærmbillede. Helt sikkert en metode der skal afprøves.

Delivery Options
Efter en 3-retters(!) frokost fortsatte workshoppen med at gennemgå de forskellige muligheder for at formidle indholdet. Det sædvanlige spørgsmål om teknologivalg blev diskuteret. Mobile web vs desktop web, responsive web vs mobile web, web app vs native app vs wrappet osv. Et matrix med pris, kompleksitet og fleksibilitet blev gennemgået – og Erik havde rigtig nok placeret Responsive som både tidskrævende og komplekst hvis man vel og mærke skal sikre en god oplevelse, men mere omkring det senere. Pointen omkring platformsvalg var – som jeg er enig i – fra et renyrket CX-synspunkt hvor det eneste der betyder noget er en god brugeroplevelse, er der kun ét valg som verden er lige nu: Native. Efterfølgende var der en lidt mere generel gennemgang af graceful degredation, progressive enhancements og nogle generaliseringer omkring skærmstørrelser og klienter.

Responsive Web Design
Præsentationen gik lidt mere over i snak omkring RWD, hvor Erik startede ud med et eksempel fra Disney-websitet. Ud fra et RWD- og contentsynspunkt fungerede det egentlig godt på tværs af enheder, men sitet manglede simpelthen brandet – selve Disneymagien. Her var teknologien mere til grund for designvalget end omvendt. Her var den konkluderende påstand at mobilt indhold ikke nødvendigvis er lig desktopindhold. Kontekst i stedet for content. En svær diskussion som der næppe er et entydigt svar på, men hvor jeg efterhånden selv hælder mest til at have alt indhold tilgængelig på mobilsitet også, blot organiseret optimeret til mobil og med hensyntagen til brugerens kontekst. I et RWD argumenterede Erik også for at der allerede i designprocessen skal tages hensyn til den frontendtekniske opbygning af indholdet. I’m all into that 🙂 RWD er ikke blot at ombryde indhold og lade det floate. Prioriteringen risikerer at forsvinde. Man er nødt til at reflowe og reorganisere indhold. Altså skal sitet opbygges fleksibelt. I virkeligheden er RWD ikke en teknisk løsning med lidt mediaquerys og et drys CSS man som kunde kan tilkøbe – men lige så meget et tæt samarbejde kunde og bureau imellem med at afklare design, arkitektur og contentprioritering. RWD er komplekst, og er ikke en teknisk løsning alene. Snap-points i stedet for fluid blev anbefalet, da man her har bedre kontrol med indholdet og placeringen/skaleringen af elementer.

Content Evaluation:
Denne øvelse går ud på at gennemgå sit website “from a bird’s eye view” og lave et content map. Identificér elementer der er “navigation/promotional”, “image supporting content” og “content” (som i “true content”). Det er overraskende hvor ofte selve det reelle indhold fylder meget lidt på et site. “Consider the content’s choreography as you design”.

Eksempler på øvelser med Content Evaluation og Mood Board

Eksempler på øvelser med Content Evaluation og Mood Board

4. Graphic Design

Dette område blev ikke gennemgået helt så grundigt, men er naturligvis også en stor del af Universal Minds’ designproces. Den overordnede overskrift var “GUI design isn’t just pixie dust” – godt design er ikke blot tryllestøv. Til de fleste løsninger benytter de sig af Mood Boards, som i bund og grund blot er en samling ideer for at – i samarbejde med kunden – skabe det overordnede designbudskab/feel for løsningen og for at opnå en fælles forståelse af dette. Farver, billeder, ikoner og typografi sammensættes på et virtuelt “board”, som så skaber et sammenkog som så gerne skulle blive det endelige grafiske udtryk og feel. Som designer kan det være en god hjælp for at komme igang og komme videre fra det “tomme kanvas”. Typografi er en vigtig del af et moodboard, og snakken førte også omkring forskelle mellem desktop og mobil på brug af typografi. Og som de fleste der har prøvet at designe til mobil nok kan nikke genkendende til, så er man nødt til at se designet og typografien direkte på en mobil device før man kan vurdere om man har ramt rigtigt.

5. Prototypes

Først på dette stadie i processen laves der mere organiserede brugertests (tanken var jo at de indledende tests og ad-hoc brugertestene skulle være klaret ved tavlerne på papirwireframesene). Desuden skal wireframes være så åbne for fortolkning at designeren ikke er begrænset. Derfor giver det mindre mening med organiserede brugertests på et tidligere stadie. Vi plejer også selv at sige at designet (eller værdien af designet) ligger i den færdige løsning, hvilket summen af Eriks pointer også understøttede. Under dette punkt blev forskellige værktøjer gennemgået for at hjælpe med at lave brugertests. Brugertests skal selvfølgelig udføres på den mobile enhed.

6. Test and iterate

Efter brugertests afklares de forskellige forbedringsmuligeder, “the common pitfalls” og “common wins”.

Opsummering

Processen hos Universal Mind starter altid analogt. Værktøjer skal ikke komme i vejen for den kreative proces. The creative process isn’t clean, it’s a dirty process. Get your hands dirty and dig in. Husk brugeren og vær empatisk.

Links

Skriv et svar

Udfyld dine oplysninger nedenfor eller klik på et ikon for at logge ind:

WordPress.com Logo

Du kommenterer med din WordPress.com konto. Log Out / Skift )

Twitter picture

Du kommenterer med din Twitter konto. Log Out / Skift )

Facebook photo

Du kommenterer med din Facebook konto. Log Out / Skift )

Google+ photo

Du kommenterer med din Google+ konto. Log Out / Skift )

Connecting to %s