Du er bare ny brukar ein gong

I foredraget snakka dei om kor viktig det er å forstå korleis brukaropplevinga på nettstaden din er for ein heilt ny brukar. Då funkar det ikkje å følgja designsfilosofien til Jason Fried i 37signals: “We design for ourselves first”. 

Skal du få til å designa for førstegangsbrukarar må du bruka dine empatiske evner til å setja deg inn i den nye brukaren sin situasjon.

1. La brukaren koma i gang før du krev noko av dei

For å motivera brukarane bør du få fram kva som er det unike med løysningen din. Du må vidare sørgja for at dei skjønar at det som skjular seg bak innlogginga er verdt å få med seg. På nettstaden Geni (digitalt familietre) får du ei forklaring på kva som skjuler seg av funksjonar lenger inn i løysninga med ein kort filmsnutt. Og sjølv om ein ikkje startar filmen gir startbiletet eit godt inntrykk av kva det dreier seg om.

Det er ikkje fokus på registrering på førstesida, men fokus på å koma i gang. Det står ikkje “logg inn” eller “opprett brukar” på knappen, men “Start my family tree!”. For å ikkje mista det ein har begynt på kan ein leggja til eit passord i etterkant.

Registreringssida til Geni.com

2. Design for “A-ha”-augneblinken -  augneblinken der brukarane dine forstår kva som gjer løysninga di unik.

Registreringsprosessen til FaceBook vart brukartesta. Ein brukar hadde masse trøbbel med å registrera seg og skjønte ikkje heilt vitsen. Først då ho kom til steget “Finn folk du kjenner” og fekk opp bilete og namn på folk ho hadde gått på barneskule med – då gjekk lyset opp for ho. Dess tidlegare du klarar å gi folk denne opplevinga dess større sjanse er det for at dei vil fortsetja. Etter brukartesting flytta FaceBook dette steget lenger fram i prosessen.

3. Motiver brukaren din undervegs – når dei gir deg informasjon, gi dei noko tilbake.

Her kan du henta inspirasjon frå speldesign: når brukarane prøver litt, gi dei meir informasjon/funksjonalitet. I registreringsprosessen hos Mint (budsjettside) får du betryggande tilbakemeldingar steg for steg. Dersom du skal leggja inn all informasjon om kontoane dine etterpå så kan det vera greit at dei framstår som om dei er til å stola på.

Mint

4. Gjer opplæringa til ein del av opplevinga.

Google gjer dette i for eksempel Google Calendar. I staden for å laga manualar eller ta deg til ei eiga side som forklarar nye ting, så legg dei informasjon og tips om nye funksjonar rett inn i skjermbileta.

Google Calendar

Eit anna eksempel kjem frå bloggverktøyet Tumblr. Der kjem du i gang ved kun å oppgi epost, passord og ønska url. Straks du er inne kjem du i gang med å laga bloggen din. Det er ingen vegvisar, men opplæringa skjer gjennom at du tar i bruk bloggen og lagar den slik du vil ha den.

Bloggverktøyet Tumblr(

Forøvrig var konferansen Frontend2010 òg ei første brukaroppleving. I regi av våre venner i iXD, vart konferansen for første gang arrangert i Oslo denne veka. Det var eit godt stykke arrangement, så eg lurar på om dei hadde sniklytta på foredraget først:-)

Korleis møter du dine brukarar for første gong?

1. Få orden på referansenumre, billetter og adresser

Jeg greier aldri å huske på få med meg alle utskrifter av billetter og referansenummere når jeg skal på tur. Et helt uvurderlig verktøy er TripIt, som holder orden på alle detaljene for turen din. Du videresender kvitteringen du har fått på e-post, så blir detaljene for flybilletter, hoteller, billeie etc. samlet på ett sted. Du slipper å rote gjennom gamle e-poster på flyplassen når damen i skranken spør pent om adressen til hotellet du skal bo på.

Tripit har egne apper for iPhone, Android og Blackberry, slik at du alltid har med deg det du trenger

2. Lesestoff på turen

Jeg finner ofte artikler som jeg har lyst til å lese, men det passer aldri når man sitter på jobb og har andre ting å gjøre. Instapaper gjør jobben. Instapaper formaterer artiklene i et behagelig leseformat, og gjør at du kan laste ned artikkelen til mobiltelefonen din når du er hjemme. Du slipper dessuten å betale for svinedyr datatrafikk når du er i utlandet, ved at artiklene lagres på mobilen din.

Når du finner en interessant artikkel å lese, bookmerker du den med en bookmarklet fra Instapaper. På jakt etter gode features å lese? Sjekk ut www.longform.org som er en samling gode artikler som oppdateres daglig. Er du på jakt etter fagstoff, kan jeg anbefale å se gjennom Karis supre oversikt over 78 UX-blogger det er verdt å følge

3. Hvor mye koster leiebilen?

Med de siste valutasvingningene er det ikke så lett å finne ut hvor mye middagen eller leiebilen kommer til å koste. Google har noen fine funksjoner her. Hvis leiebilen koster 400 dollar, skriver du “400 usd in nok” og Google finner de siste valutakursene og regner om for deg. Husket du ikke at Ringgit er myntenheten i Malaysia? Google fikser det også: Bruk f.eks 400 malaysian money in norway money, så finner den svaret allikevel.

Har du flere ferietips?

Vi intervjuet Vitor live på Twitter 21. mai. Han svarte på våre og andres spørsmål om hans tanker om design og hvordan han har forbedret Twitter.

Her er Twitterviewet i sin helhet:

webdagene: Please tell us who you are – in 140 characters.

vl: I’m a Product Designer. I’ve been working @Twitter for the last 2 yrs, helping change the world 140 chars at a time

webdagene: When did you start doing design?

vl: Around 10 yrs ago. I started designing personal sites just for fun, and never planned to pursue this as a career.

webdagene: Then what made you turn this into a career?

vl: I really loved what I was doing. When I was 18, I joined the major media company in Brazil and after that, Yahoo!

webdagene: And then you went on to Twitter after that?

vl: Exactly. I started consulting for Twitter, and later on joined as a full-time employee and moved from Brazil to SF.

dnmack: how he feels about twitter is the most popular social network?

vl: I don’t see Twitter as a social network. It can be social too, but it’s a real-time information network.

webdagene: Please tell us, what is most important to you when creating a great design?

vl: Scannability. If people can scan through your page for key points, they may decide to stay and use your product.

webdagene: How do you design for scannability?

vl: Be visual, but avoid unnecessary decoration. Use large typography and keep concise paragraphs.

webdagene: You may already have answered this in a way, but what is a great design to you?

vl: A great design/interface is the one that fades gracefully, allowing *content* to be in the very front row.

webdagene: That’s interesting, esp. as many attendants at Webdagene are primarily working with content. Why should design be important to them?

vl: No one picks up a boring book cover. Design generates interest & plays a primary role in the interpretation of a msg. Design should be created around content, not the other way around. Requires collaboration between designers & editors.

webdagene: Can you tell us a little about how you have improved Twitter through your design?

vl: We’ve been listening to users carefully, polishing things, adding new features but trying to keep the core simplicity.

aregh: how do you maintain the core simplicity when everyone is crying for more feautures?

vl: Follow Maeda’s mantra “SHE” (Shrink, Hide, Embody), so you can add more things, but keep the core elegant and easy to use.

aregh: Shrink, Hide, Embody? Please elaborate

vl: Shrink what’s less relevant, hide what’s not needed all times and group things together so they look like just 1 element. That’s basically designing around reduction, organization and efficiency. Example: see how we hide the tweet actions until you hover over a tweet? This helps keeping the overall page simplicity.

aregh: Sweet! I think you need to go in more detail about this when you get her in september

vl: Sure, will do!

aregh: Twitters 140chars is an extreme constraint – how do you deal with constrains when designing?

vl: Constraints are everything. They help me a lot. Design is more about problem solving than blue-sky thinking.

webdagene: What are your thoughts on design and marketing?

vl: The best marketing strategy is to have a remarkable/viral product. Build a purple cow and people will talk about it.

Mr_Rollo: which designers would you recommend following on twitter?

vl: I have a design list with great recommendations. Check out http://twitter.com/vl/design

khamnes: What are your thoughts on culture in design? Do users in different cultures use twitter in different ways?

vl: We try to come up with more universal solutions, but there’re differences around language, color interpretation, etc. There are also behavioral differences. Twitter is very open/public by nature. And we’re big in Brazil, for instance.

webdagene: What are your thoughts on having culture-specific versions of a site like Twitter vs. one site that should fit all?

vl: It’s crucial to at least support users native languages. That’s why we’re internationalizing the whole site.

webdagene: Many sites come in a regular and a mobile version, as do Twitter.com. What do you think of this practice?

vl: It’s critical, as more and more consumers rely on their mobile device as their primary Internet browsing device. And mobile also means tablet devices. Touch is far superior than trackballs/keypads. We should embrace that on the web.

webdagene: In what way do people’s use of Twitter.com on a mobile device differ from how they use it in a desktop browser?

vl: Twitter on mobile is a great way to learn more about what’s happening *around* you, using geo tweets for example. And we’ve been mobile since day one (SMS). It’s definitely part of Twitter’s DNA.

aregh: What are the key differences when designing for touch?

vl: Everything can be more familiar. You can interact with the UI/content the same way you interact with real world objects. For instance, the fact that you don’t need UI controls to scale up a photo or video is a breakthrough.

aregh: So u’re saying that the constraints of touch forces us to simplicity? That sounds promising

webdagene: As we increasingly use networks as Twitter to seek information, what do you think’ll be the role of web sites in the future?

vl: Websites can give you a more immersible experience by grouping things together and providing clear start points. But it’s more important to focus on social media presence: listen to what people are saying about you & engage.

webdagene: Finally, can you give us a short teaser for what you will be talking about at Webdagene?

vl: I’ll talk about how Twitter changed the way we communicate and how design played a primary role in that

webdagene: Sounds great! Maybe you’ll touch upon the principles for simplicity we talked about today as well? Looking forward to it!

vl: Will do. And maybe a couple of more things. Looking forward to the event!

Hør mer fra Vitor på Webdagene…

Design with Intent

Design with Intent er 101 kort som hvert illustrerer måter å påvirke folks interaksjon med produkter, tjenester, omgivelser eller hverandre. De ulike kortene er uformet som spørmål, og er ment for å provosere frem nye ideer og måter å se designet på. Kortene kan lastes ned gratis, og det vil også bli mulig å bestille ferdig printede kort på et senere tidspunkt. Design with Intent er laget av doktorgradsstipendiat Dan Lockton ved Brunel University.

Mental Notes

Stephen P. Anderson har laget et sett med 50 kort som beskriver menneskelig oppførsel og hvordan man kan benytte seg av dette i design av nettsteder og applikasjoner. Kortene er ikke ferdige ennå, men kan forhåndsbestilles.

Stephen P. Anderson kan du  forresten høre snakke om overbevisende design under Webdagene i september.

Kjenner du til flere verktøy for hjelp i kreative prosesser?

Designstrategi er kort fortalt den svært viktige – men altfor ofte fullstendig neglisjerte – overgangen mellom strategi og design.  En av de helt sentrale komponentene i en designstrategi er fokus – det å fatte veloverveide avgjørelser om hva prosjektet skal omhandle og hva det ikke skal omhandle.

Er prosjektet ditt uten fokus er det dessverre lett å se det i ettertid, men kanskje vanskelig å gripe årsaken når du er midt oppe i det.

Her er noen symptomer på at prosjektet ditt er uten fokus:

Prosjektet vårt skal Fikse Alt

Skippertaket er en urnorsk arbeidsform som også sniker seg inn i prosjektarbeid og design. En alt for typisk situasjon er at man har latt nettstedet, applikasjonen eller intranettet ligge urørt i åresvis, men så får man et plutselig anfall av dårlig samvittighet og skal Fikse Alt På En Gang (TM). Nytt publiseringssystem, nytt design, ny webstrategi, nye funksjoner og nytt innhold.

Problemet med dette er at resultatet sjelden blir bra når man gaper over alt for en gang – det må tas for mange beslutninger på for mange nivåer som man mister oversikten over og dermed kan kvaliteten på sluttresultatet synke dramatisk.

En mye bedre måte å jobbe på er som regel å identifisere mindre, overkommelige deler av løsningen som kan håndteres hver for seg. Produktevolusjonsplanen vil være et sentralt hjelpemiddel i en slik prosess, en metodikk/leveranse jeg kommer tilbake til i en senere bloggpost.

Vi skal bli Google/Amazon/Apple for <bransje>

Dersom du hører noen si: Vi skal bli Google/iphonevarianten av…, er det et annet symptom for manglende fokus. En slik uttalelse er heller ikke et strategisk mål, fordi det sier ingenting om hva man skal oppnå.

La deg gjerne inspirerer av andre, men det er ikke lik suksessen til en løsning lar seg kopiere over til en annen.

Man kan godt la seg inspirerer av andre tjenester, men disse må vurderes ut fra prosjektets klare strategiske føringer. Og dersom man ikke kjenner egne behov, så må man finne ut av det først. Gå tilbake til start og tenk på det først.

Å være ”best” er ikke noen strategi!

Jeg har vært i altfor mange prosjekt der målsettingene blir formulert med at vi skal bli verdens beste eller europas beste i et eller annet.

Men slike målsettinger sier ingenting om hva prosjektet skal oppnå. Og når slike målsettinger får blir stående i prosjektet, så er også det et symptom på manglende strategisk fokus i designprosess.

Har prosjektet ditt en slik målsetting, bør du ta et skritt tilbake og heller stille spørsmål ved:

• Hva som er virksomhetens forretningsmål eller som gir verdi?
• Hva er virksomhetens særegenhet – hva skiller den fra andre?
• Hva er bra praksis de i dag?
• Hva er dårlig praksis i dag?
• Hva er unikt og hvordan vi kan fremheve dette?

Strategisk fokus handler om å si nei

Det er et kjent ordtak som sier: ”til lagts åt alle kan ingen gjera” og det gjelder også for digitale løsninger. For lang behovsliste er også et gjenkjennelig symptom på dårlig fokus og årsaken er at det ikke er gjort prioriteringer.

Når ingen sier nei i et prosjekt og man har hatt et forløp i prosjektet der alle i organisasjonen få være med å bestemme, endre man opp med en lang liste med konkurrerende behov.

Og uten prioriteringer ender man opp med en vassen løsning der alt i beste fall blir halvveis bra.

Det er bedre å velge ut et par behov og trekke opp disse. To enkle og tydelige mål er så uendelig mye bedre å forholde seg til enn en lang liste. Og løsninger med klart fokus er så uendelig mye bedre enn de som skal være litt for alle.

Her er nokre av dei sidene og designarane eg synst har fått det til:

Mike Kus frå Carsonified / Carsonified si nettside

Klar og reindyrka fargebruk der kvart menyområde er i kun to fargar; ein lys og ein sterk farge. Eg tilrår å gå inn og klikka på dei ulike toppmenyvala; det er veldig stilig. Den enkle fargebruken gjer at det ser ryddig og oversiktleg ut og tillet at det er ein relativt kompleks illustrasjon midt på.

_______

Mike Kus frå Carsonified / The Mattinator

The Mattinator er ei teneste frå Carsonified og som gir deg mogleiken til å twitra på fleire kontoar samtidig. Friske fargar, handteikna element, litt humor og likevel oversiktleg og enkelt.

_______

Vitor Lourenço, produktdesignaren til Twitter / Twitter

Vitor Lourenço har jobba som produktdesignar for Globo, Yahoo og no for Twitter (han kjem òg på Webdagene 2010 og fortel meir om godt design av innhald). Designet til Twitter er reint og enkelt samtidig som det ser koseleg ut. Det er ikkje så mange ekstra element og det er i hovudsak innhaldet som er designa.

_______

Jason Santa-Maria frå Happy Cog / Happy Cog si nettside

Sida er godt organisert og framhevar innhaldet. Dei gjer det ved først og fremst designa teksten og la det vera det viktigaste.

_______

Jason Santa-Maria frå Happy Cog  / Typekit

Typekit er ei abonnementsbasert teneste som gir deg mogleiken til å lenkja til fontar (på den måten kan ein bruka andre fontar enn dei som finst som standardfontar på datamaskinen i webdesignet). Sjølve websida brukar i hovudsak teksten som design og det passar jo veldig godt når det er det det dreiar seg om.

_______

Jason Santa-Maria frå Happy Cog / A list apart

Godt typografisk handtverk gjer at det ser oversiktleg ut sjølv om det er store mengder tekst. Den duse fargeprofilen forsterkar det lette uttrykket.

_______

iA / informationarchitects.jp si nettside

Mange av oppdraga til iA er på design av nettaviser. Og det skin kanskje gjennom i designet av deira eiga nettside? Designet er i hovudsak basert på tekst, og eit stramt og gjennomtenkt oppsett gjer at det ser ryddig og elegant ut.

_______

iA / Zeit Online

Ei av dei mange nettavisene som iA har designa. Eg synst dei er veldig flinke til å få store mengder tekst til å sjå ryddig og strukturert ut. Godt bruk av grid og justering av linjer på tvers av spalter forsterkar det ryddige inntrykket.

Eg har sikkert ikkje fått med meg alle kule og brukarvenlege design der ute, så om du har tips eller innspel blir eg glad for det!

Steg 1: Hva trenger jeg?
Først og fremst papir og et par tusjer. Størrelsen på papiret spiller mindre rolle – bruk det du føler deg komfortabel med, og som gir nok spillerom i forhold til hvor detaljert du ønsker at skissen skal være. Når det gjelder tusjer bør du gå til innkjøp av følgende:

Med 5 ulike skisse-tusjer kommer du langt!

• 1 “ultra fine” (tynnere enn medium) sort tusj
• 1 medium sort tusj
• 1 “fine point” (tykkere enn medium) sort tusj
• 1 tykk, lys grå tusj
• 1 “fine point” gul tusj

For beskrivelse av hvilke farger og tusjer du skal bruke til hva, se punktet “Farger og skyggelegging” under Steg 3.

Steg 2: Hvordan være kreativ og skape idéer ved hjelp av penn og papir?
For å være kreativ er det viktig å la tankene løpe og eksplorere flere idéer. Den beste måten å gjøre dette på er å benytte en “6-up template”. Denne lager du selv ved å tegne opp to rader med tre like rektangler per rad, totalt seks rektangler. For hvert rektangel skisserer du opp én unik idé for hvordan en spesifikk oppgave kan løses (eks: ulike måter å utføre et søk på). På denne måten skaper du flere idéer fremfor å låse deg til én unik løsning.

Eksempeler på "6-up template" og "1-up template".

Skissene du lager ved hjelp av en “6-up template” er kun grove skisser, og skal ikke inneholde detaljerte beskrivelser (dette begrenser seg selv med tanke på plassen du har til rådighet per rektangel). For hver skisse lager du en tittel (med minst ett verb) som beskriver hva en person skal gjøre på siden. På denne måten sikrer du at hver skisse dekker et konkret brukerbehov.

Når du har fyllt ut alle rektanglene med ulike idéer, velger du ut én av disse som du tegner opp på et nytt hvitt ark (“1-up template”). Nå som du har mer plass på siden kan du rafinnere skissen og gjøre den mer detaljrik. Husk imidlertid på at skissen skal fokusere på et konkret brukerbehov; detaljene i skissen skal vise hva en person kan gjøre på siden. Øvrige side-elementer  som topp- og bunn-navigasjon kan gjerne være med (i form av enkle elementer), men skal ikke vise detaljert innhold.

Steg 3: Hvilke teknikker kan jeg bruke for å få folk til å forstå?
Følgende råd og tips er med på å gjøre din skisse forståelig:

1) Titler og overskrifter

Eksempel på bruk av tittel, overskrifter, tekst og beskrivelser.

Hver skisse skal ha en beskrivende tittel. De ulike elementene på siden navngis ved hjelp av overskrifter. Skille mellom ulike nivåer av overskrifter (h1, h2, h3…) gjøres ved bruk av over- og understreking, versaler eller fet skrift (tykkere tusj).

2) Beskrivelser og tekst

Bruk snakkebobler eller bokser for å beskrive elementer i skissen. Beskrivelsene skal være utdypende nok til at utenforstående kan forstå skissen uten videre forklaringer. NB! Hvis du inkluderer tekst i skissen, er det viktig at denne er lesbar!

3) Farger og skyggelegging

Størrelsen og fargene på tusjene spiller en viktig rolle. Gult brukes for å fremheve interaksjon eller innhold som er viktig. Lys grå brukes for innhold som ikke er viktig, eller for å skape en bakgrunns- eller skyggeeffekt. Medium sort tusj brukes for å tegne skissens rammeverk og elementer på siden. “Ultra fine” tusj brukes for å tegne mindre viktige elementer på siden, mens “fine point” gir et element eller heading større kontrast/viktighet.

4) Mennesker, snakkebobler og uttrykk

Eksempel på hvordan mennesker og snakkebobler kan integreres i skissen.

Ved å tegne mennesker (i kontekst av bruksoppgaven som skal løses) gir du skissen verdifull tilleggsinformasjon i form tanker og/eller følelser. På denne måten blir det enklere å sette seg inn i hvordan en person ville tenkt/handlet under interaksjon med skjermbildet (eller delen av det) som du skisserer. For å uttrykke følelser kan du la menneskene “prate” i form av snakkebobler. Du kan også visualisere emosjoner i form av smilefjes (blid, sur og så videre), eller ved å visualisere håndbevegelser som tommel opp (positivt) eller tommel ned (negativt).

5) Bevegelse og dybde

Tegne-teknikker for bevegelse.

Tegne-teknikker for bevegelse og dybde gir en ekstra dimensjon til skissen. For bevegelse kan du benytte ulike typer piler (rette, kurvede, stiplede, hele), skyggekopier eller kurvede linjer. For å få frem dypbde kan du benytte effekter som skygge, refleksjon, relative størrelser eller perspektiv.

Sett igang
Kort oppsummert er designskisser en enkel, men effektiv måte å skape en felles forstålse for design. Ved hjelp av tusj og papir har du et billig og enkelt verktøy som kommuniserer design på en måte som alle kan forstå. Og det beste av alt: ALLE (enten de tror det eller ei) kan tegne, så det er bare  å sette igang!

Even og jeg er på UXLondon og får inspirasjon fra noen av ”guruene” innen User Experience. Peter Merholz var den først til å tale og her er noen av mine lærdommer fra hans foredrag.

Gode kundeopplevelser
En forutsetning for å oppnå gode kundeopplevelser er at man har fokus på tvers av organisasjonsenheter, og ikke bare i webteamet (og at ledelsen forstår verdien av dette:-). Det er mye mer krevende å oppnå gode webopplevelser dersom kommunikasjonen med kundene via andre kanaler ikke er god. Det må tenkes helhetlig.

Det nytter ikke å kjøpe seg til gode kundeopplevelser. Bedriften må lære seg å tenke på hvordan man kan nå fram hele tiden, i alle ledd. Den overordnede strategien må forstås av alle og gjennomsyre bedriftens arbeid. Kun når alle trekker i samme retning kan man lykkes.

For å oppnå dette bør du starte med å definere hvilke kundeopplevelser du ønsker at kunden skal sitte igjen med i steden for å starte med å utarbeide systemer eller prosedyrer for hvordan du skal forholde deg til kunder. Start i riktig ende av denne skalaen:
1.    opplevelser
2.    interaksjoner
3.    kontaktpunkter
4.    prosedyrer
5.    systemer

Microsoft ribbons
Microsoft gjorde ett grep(av flere) i forbindelse med redesignet av Word som man kan lære av. De utviklet noen overordnede dogmer som de styrte sine designbeslutninger etter. Disse var avgjørende for å få til en så radikal endring som ribbonsoppsettet var for Microsoft (Eidars kommentar: Men Word kan fortsatt bli bedre). For å lykkes med en så stor endring må man ha noe å styre etter.

Designbeskrivelser
Merholz mener man tradisjonelt har hatt fire ulike måter å beskrive hva design er:
1.    Estetikk
2.    En bestemt rolle
3.    En ting
4.    En rockestjerne

Disse beskrivelsene er imidlertid ikke dekkende. Vi bør først og fremst se på design som en aktivitet hvor vi kan fasiliterer og inspirere bedriften i riktig retning. Det trengs besluttsomhet og ydmyket i organisasjonen, og her er det litt å lære fra en undersøkelse gjennomført av Bain & Company på 362 bedrifter i 2005. Av disse sa 95 % at de var kundefokuserte og 80 % at de tilbyr en overlegen brukeropplevelse. Samtidig var det bare 8 % av kundene til bedriftene som mente det samme (fra Bain & Company; Closing the Delivery Gap).

Visualisering og langsiktig arbeid for å nå fram

Poengene til Merholz er ikke nødvendigvis noe nytt, og løsningen for å lykkes er heller ikke så revolusjonerende.  Å nå gjennom til store bedrifter og organisasjoner dreier seg ofte om hardt og lansiktig hardt arbeid.  Men tålmodighet lønner seg nesten alltid.

Noe Merholz med flere andre foredragsholdere poengterer er at brukervennlighetseksperter har evene og muligheten til å visualisere komplekse beslutningsgrunnlag slik at ledere lettere kan få innsikten som kreves for å ta riktige beslutninger (dette snakket også Luke Wroblevski og Jeff Veen om senere på dagen). Dersom brukervennlighetsekspertisen og nettredaktører tar i bruk sin designkunnskap, kan de være med på å oppdgradere mandatet sitt fra å omhandle brukervennlighet til å omhandle helhetlige kundeopplevelser. Og det er dit vi alle vil, er det ikke?

Som designar er det desse 11 tinga du bør hugsa på å kommunisera til utviklaren:

1. Er layouten din fast eller flytande?
Fast layout er når designet er laga for å passa med ei bestemt skjermoppløysning. Fast layout gjer at ein har meir kontroll på korleis designet ser ut i og med at det ikkje strekk seg med nettlesarvindauget. Ofte er det òg enklare å koda.
Flytande layout fyller nettlesarvindauget og gjer at dei som har store skjermar/høg oppløysning får sjå sida di i stort format. Tekstlinjer kan bli veldig lange og vanskelege å lesa. Som Wikipedia eller Jakob Nielsen sin nettstad på ein brei skjerm.

2. Har du teke høgde for ekspandering av alle felt?
Det kan koma meir tekst og meir innhald enn det som er brukt som eksempeltekst i designet. Kva skjer med dei andre elementa om noko plutseleg vert større? Dette er særleg eit problem for alle dei som framleis brukar Lorem Ipsum tekst og ikkje reelt innhald i designet.

3. Er dei grafiske elementa laga slik at dei kan verta utvida?
Til dømes om overskrifta ligg i ein boks – kva skjer med boksen når teksten bryt over to linjer? Eksemplet er henta frå Gilde si framside – her vert boksen bak litt knapp når den nederste lenkja strekk seg over to linjer (i alle fall i FireFox på min Mac).

4. Har alle interaktive element ein status både med og utan JavaScript?
For dei brukarane som har JavaScript deaktivert bør det vera ei alternativ løysing. Til dømes om ei lenkje opnar ein lightbox må det kanskje òg finnast ei separat side som viser denne informasjonen.

5. Har kvart element ein status for både innlogga og ikkje-innlogga brukarar?
Dersom ein brukar loggar inn på nettstaden, får det konsekvensar for kva som vert vist på sida? Er det nokre element som kun skal visast for innlogga brukarar?

Eksempel frå Twitter som har denne toppmenyen når ein ikkje er innlogga:

og endrar til denne for dei som er innlogga:

6. Har du brukt nokon fancy skrifttypar som truleg treng ein eller annan teknikk for å bli vist rett i nettlesaren?
Dersom du har brukt ein av dei skrifttypane som ikkje finst på dei fleste maskinar må utviklaren nytta t.d sIFR for å visa dei. Har du vurdert konsekvensane av dette? Det er ingen garanti for at det vil fungera ut i frå tilgjengelegheitsomsyn, sjølv om det ser bra ut.

7. Har du laga feilmeldingar/ bekreftingar der dette er aktuelt?
Korleis skal desse sjå ut og kvar skal dei plasserast? Dersom du ikkje lagar noko kjem utviklaren til å gjera dette sjølv, og det er det ikkje sikkert du vert fornøgd med

8. Alle skjemafelt skal ha ein ledetekst og kvart skjema skal ha ein eigen “Send inn”-knapp
I mi verd så vil sjølvsagt dette vera på plass allereie når den grafiske designeren mottek wireframen frå interaksjonsdesignaren. Men om det mot formodning ikkje skulle skje så bør den grafiske designaren ta ansvar og få det på plass.

9. Er PhotoShop-fila di godt dokumentert?
Har du rydda opp og laga gode og forståelege namn på laga dine, slik at det er mogleg for utviklaren å skjøna kva lag som skal av og på for å visa ulike tilstandar?

10. Har du laga pdf’ar for alle tilstandar?
Det kan vera ei utfordring for utviklaren å skjøna korleis alt skal vera, så det kan vera lurt å ha med eit flatt bilete som visar korleis det skal vera.

11. Har du lagt med ein fargereferanse for alle fargane du har brukt?
Dersom du gir fargepaletten med fargekodar til utviklaren og spesifiserer kvar dei er brukt så vert han/ho glad og det vert enklare å få rett farge på rett stad.

Har du nokre erfaringar eller tips frå overgangen mellom grafisk design og utvikling som du vil dela?

Hvor mye vekt man skal legge på det brukerne selv kommer frem til kan diskuteres. Mona har tidligere skrevet om det å ikke gjøre som brukerne dine sier, men jeg tror flere av disse spillene kan resultere i gode ideer og innspill. Som designer blir oppgaven å trekke ut de beste ideene og ta dem videre i prosessen.

Spill for brukere

Tegn den perfekte hjemmeside

Med penn og papir, la deltakerne selv tegne det de mener er den perfekte hjemmesiden til nettstedet, intranettet eller applikasjonen. På denne måten kan du få en indikasjon på hva som er viktig for dem.

Fordel ressursene

Lag en liste med egenskaper som den nye hjemmesiden skal dekke. Gi hver deltaker 1000 monopolpenger og be dem fordele pengene der de mener det trengs, med begrunnelse. Egenskapene som får mest ressurser gir en indikasjon på hva som er viktig for gruppen.

Metadatalek

Vis deltakerne en gjenstand tilknyttet nettstedet man jobber med, og be dem beskrive den med egne ord. På denne måten kan du avdekke hvilket språk brukerne benytter seg av.

Fri oppramsing

Gi deltakerne et bestemt tema og be de komme opp med så mange relaterte ord som mulig. Det viktigste kommer som regel først, og deltakerne har også en tendens til å gruppere ordene.

Kortsortering

Skriv nettstedets innhold på lapper, og la brukerne sortere kortene i grupper. Dette er en fin måte å lære om hvordan brukerne tenker rundt kategorisering av innholdet.

Se også Effektiv kortsortering med Delphimetoden

Spill for designteam

Idékort

Deltakerne i teamet trekker 3 til 5 kort fra en bunke kort med triggerord tilknyttet det man jobber med. De skal lage en løsning som tilfredsstiller alle ordene de har trukket. Dette tvinger deltakerne til å tenke nytt, og nye ideer kan komme frem som et resultat.

Omvendt tilnærming

Finn ut hvordan ting kan bli enda verre enn de er, og under foredraget til Donna fikk vi oppgaven å finne ut hvordan sikkerhetskontrollen på flyplasser kan gjøres virkelig ulevelig. Dette er en morsom lek, og ved å finne en måte å gjøre det motsatte, er det lettere å se de viktigste punktene hvor en løsning vil mislykkes. Leken bidrar også til at teamet tenker på hvordan en vellykket løsning ser ut, fordi det motsatte nå er klarere.

Se også flere designspill på Design Games.

Har du eksempler på leker og spill som har fungert godt i et prosjekt?