Design for ikke-designere 4

Jobber du med web, er du designer. Selv om det ikke står på visittkortet ditt at du er det. På en eller annen måte er du likevel uunngåelig med på å forme brukeropplevelsen. Dessuten er det heller ikke alltid prosjektet involverer en «ekte designer». I mangel på en slik «ekte designer», kan du likevel komme langt med estetikken hvis du følger noen enkle designprinsipper.

Værsågod, her er ti-punktlisten over de viktigste grepene du som ikke-designer kan benytte deg av når du skal mekke noe – og samtidig er livredd for at designet skal ende opp som noe arngren.net-greier:

1. Gi ting plass (eller ta det bort)

Hvis et budskap er viktig nok til at det skal bli kommunisert, er det også viktig nok til å ta plass. Gi innholdet luft så det får puste. Luft er “gratis” og fungerer like bra (om ikke bedre) som å gjøre innholdet stort. Godt design skal løfte frem innholdet. Sier du for mye, oppnår du ingenting. Det er grenser for folks persepsjon. Altså: Si mindre på større plass, og ikke vær redd for at brukeren må scrolle: brukere scroller faktisk.

2. Design innholdet, ikke boksen

Konsentrer deg om budskapene. Det er budskapene som skal fremheves. Ikke lag pynt som leder folks oppmerksomhet bort fra kjernebudskapet. En fin boks formidler ikke nødvendigvis budskapet noe bedre. Bruk i stedet luft. Du oppnår det samme, oftere på en renere og penere måte.

3. Less is more

Gjør tingene så enkelt, tydelig og slagkraftig som mulig. Tenk eksformasjon som en motsetning til informasjon. Det vil si: Kvitt deg med all uvesentlig informasjon som ikke interesserer folk, men tvert om leder oppmerksomheten over på uvesentlige ting. Still alltid spørsmålet: Trenger folk egentlig dette? Styrker det budskapet, eller er det en omvei?

Bli bedre ved å gjøre mindre

4. Vær konsekvent

Gjenbruk er en god ting når det handler om design. Ikke finn på nye elementer hver gang du vil si noe. Bruk fargepaletten, fontene og størrelsene du har til rådighet om du har det. Små og utydelige forskjeller skaper visuelt støy. Lag enkle og logiske regler for hvordan designet skal fungere, og følg dem!

5. Alle detaljer må rettferdiggjøres

Hvis det ikke er en god grunn til at noe skal være med, så ta det bort. Design er ikke pynt, det skal gjøre budskapet tydeligere. Hver eneste lille detalj som skal være med, må være nøye gjennomtenkt og må ha mål og mening.

6. Design for handlingen som skal utføres

Hva vil du at folk skal gjøre? Hva er viktigst å få frem? Fremhev alltid det som er viktig, og gi øyet noe å hvile på. Ikke la elementene på siden konkurrere om oppmerksomheten. Prioriter handlingene du vil at brukeren skal gjøre (eller budskapene du vil få frem).

7. (Web)design handler om typografi

Typografi er vanskelig, samtidig som det er det viktigste du har for å formidle noe. Spesielt på webben. En grei regel er å ikke bruke mer enn to fonter, en for overskrifter og en for mengdetekst. Det finnes mange unntak her. Men skal du bruke flere fonter må det være gjennomtenkt, og fontene må spille forskjellige roller. Jo flere fonter, desto vanskeligere er det å jobbe med typografien. Sørg for at overskriftene (1, 2, 3 osv) skaper et hierarki med tydelige forskjeller. Ikke bruk fontstørrelser som er nesten like, det fremstår som forvirrende.

Prøv også å generelt unngå å gå lavere enn fontsize 16 (px). Dette er nettleserens standardstørrelse for mengdetekst når man ikke har kludret med det, og det er slik av en grunn. Husk det første prinsippet; Gi ting plass (eller ta det bort)

8. Sørg for at ting er på linje

Følg et rutenett (grid), gjerne et rutenett med tolv seksjoner siden dette kan deles både på 4, 3 og 2. Det er slitsomt for øyet når ting ikke går på linje. Det skaper visuelt støy og er unødvendig. Vær også konsekvent med hvor mye luft du gir ting slik at du slipper problemer med at ting ikke ligger på linje. Og skal noe først bryte, så gjør det skikkelig slik at det blir tydelig. Tommelfingerregel: Følg prinsippet for øyets bevegelse, altså: Start oppe til venstre, avslutt nederst til høyre.

9. Styrk merkevaren

Godt design styrker merkevaren. Ikke finn på nye farger, fonter og elementer som bryter med den fra før av grafisk uniformerte merkevaren. Stick to the consept, som amerikanerne sier.

10. Bilder er ikke pynt

Bilder er viktig informasjon. De er der for å formidle noe, og for å gi budskapet oppmerksomhet. Ikke bruk stockphotos som fyll og pynt. Bilder som ikke er en viktig informasjon er bare å kutte.

Unngå for all del slideshows, med mindre du har tenkt å lage et galleri. Hvis du absolutt må lage et slidesshow, så ikke legg viktig informasjon i det. Slidesshow er som regel oppblåst selvskryt som brukerne ikke bryr seg om. Eller rettere: Det er autokommunikasjon i den forstand at man snakker med seg selv, ikke til publikum som har det travelt.

Fortsatt usikker på om du skal bruke slideshows?

Mer lesing om bilder:

Til slutt: En god tommelregel er å stille spørsmålet ”Hvorfor?” til du blir blå i ansiktet. Hvorfor skal vi ha med denne knappen? Hvorfor skal vi ha et bilde her? Du får sjelden et logisk svar på spørsmålet første gang du spør, og kanskje heller ikke andre gangen. Når du vet hva som er den egentlige grunnen til at du vil ha det med, bør du utfordre utførelsen og muligens løse problemet på en annerledes og bedre måte. Om svaret ikke er godt nok begrunnet, er det en fin anledning til å rydde opp.

Jørgen Blindheim

Flere artikler av Jørgen CV

4 kommentarer

  1. Vedig bra Jørgen. Det er ogs undersøkelser på at grotsque skrifttyper leses brdre når du har bakgrunsbelysning – også på webben ( som i bøker ) glipper øyet på 12,7 cm – derfor bør ikke linjene være bredere ( derfor er skriften i Pocketbøker aldri er mer enn 12, 7 ) om de er lenger må linjen leses 2 gg

  2. #1, #3, #4, #8 og #9 virker det som om de fleste designere, både gode og dårlige er enige om og praktiserer bedre enn nesten alle ikke-designere.

    # 5 Alle detaljer må rettferdiggjøres og #6 Design for handlingen som skal utføres virker det som om designere med bakgrunn i brukervennlighet og ux er gode på men ikke alle som jobber med design.

    Men punkt #2, #7 og #10 har jeg inntrykk av at personer som kaller seg designere følger disse reglene i stedet:

    #2 Husk å trekk bort oppmerksomheten fra det middelmådige produktet eller budskapet med pynt. Har du uninteressante tall, lat som om de er interessante ved å lage noen meningsløse såkalte infographics.
    #7 Bruk Lorem Ipsum-tulletekst og groteskfonter under designprosessen slik at ingen oppdager at sidene uleselige når ordentlige tekster settes inn i malsidene.
    # 10 Pynt opp nettstedet med amerikanske byråbilder av smilende dresskledde personer av alle hudfarger bak PC-skjermer for å fluffe opp et corporate image.

  3. Dessverre følger min arbeidsgiver – Universitetet i Oslo – noen av disse rådene selv om de passer svært dårlig for vår virksomhet – forskning og formidling av forskning.
    Råd 1 er ikke egnet: For mange av våre brukere er det nyttigere å få oversikt over flere temaer på første skjermbilde for så å velge å få mye informasjon på skjermen – det motsatte av å ‘ Si mindre på større plass,’
    Når det gjelder Råd 3: Less is more, kommer det i konflikt med brukervennligheten når fonten skal være så stor: brukerne av våre sider burde slippe å måtte scrolle ned forbi store headers for å komme fram til den informasjonen de leter etter.

    Men det blir vel nye idealer for web design etterhvert, kanskje til det bedre og kanskje til det verre..

  4. @anders: Har dere gjort noe research på at det er det brukeren vil hos UiO? Er ofte et stort skille mellom hva man vil si og hva brukeren er ute etter ref. autokommunikasjon.

    Stusser litt over formuleringen “skjermbilde”? Man har jo aldri kontroll over formatet/”skjermbildet” brukeren ser informasjon i; så målet må være å gjøre innganger og informasjon tydelige, og ikke minst ryddige. Et viktig virkemiddel her er å gi ting luft og plass, for det finnes grenser for hvor mye folk kan få med seg på en gang. Ting ser ryddigere ut om man har gitt det luft rundt og informasjonen blir derfor mer verdifull og tilgjengelig.

    Less is more har heller ingen ting med headerstørrelser å gjøre, det er en tankegang man bør ha når man designer noe: Så lite støy som mulig. Et vanlig fenomen er at det er en stor missmatch mellom hva man ønsker å si og hva folk ønsker/gidder å høre. Studier viser at brukere ikke har noen problemer med å scrolle på nettsider så lenge de forstår at det er noe lenger ned på siden av interesse. Eksempelvis ville jeg kanskje sagt at informasjonen burde få mere plass, ikke mindre. Og navigasjonen og alt rundt burde tones ned.

Skriv en kommentar

  • *

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>