Skrevet af den

Tænk design patterns ind i dit design

Når man laver interaktionsdesign til eksempelvis iPhone applikationer eller websites, støder man jævnligt på velkendte behov eller problemstillinger. Her er det naturligvis gavnligt at trække på en række løsninger – såkaldte design patterns – som er velkendte af såvel designeren som brugeren.

Hvad er et design pattern?

Design patterns på smartphones

Lidt simplificeret, så kan et design pattern inden for web- og applikationsdesign beskrives som en standardløsning på en velkendt udfordring, som brugeren kan se og interagere med. Begrebet er sammensat af Christopher Alexander i bogen A Pattern Language fra 1977.

Et velkendt design pattern på en webside er en søgeresultatvisning, som består af en liste med overskrifter, uddrag og stier. På denne side vil der typisk også være paginering øverst og nederst, som dog følger sit eget design pattern afhængig af type – f.eks. klassisk paginering eller infinit scrolling paginering.

Mange af disse design patterns har rødder langt tilbage i softwareudviklingen, men bliver som årene går videreudviklet som følge af nye muligheder og behov.

En søgeresultatside på en smartphone vil dermed typisk vise færre informationer og desuden tilbyde en større klikbar flade, ligesom paginering ofte overflødiggøres af søgning, sortering og filtrering, der naturligvis har sine egne design patterns.

Design patterns spreder sig også den anden vej – fra helt nye teknologier og til allerede etablerede teknologier.

Pull-ro-refresh design pattern

Pull-to-refresh design pattern

Et eksempel på dette er “pull-to-refresh”, som bl.a. er blevet kendt gennem den første officielle Twitter-app på iPhone, og som nu kan findes i et hav af applikationer – og også på visse mobiloptimerede websites.

Fordelene ved at benytte design patterns

Fordelene ved design patterns gælder hele vejen rundt for såvel brugeren og designeren som afsenderen.

  • Brugerne genkender design patterns lynhurtigt, og skal derfor bruge mindre tid på at afkode, hvilke muligheder der er, og hvordan man interagerer med elementerne i applikationen eller på websitet.
  • Designeren skal ikke opfinde den dybe tallerken igen, men kan kombinere forskellige design patterns og derigennem skabe en velfungerende brugsoplevelse. Med design patterns bliver det desuden nemmere at tegne wireframes samt at samarbejde og kommunikere gennem samme terminologi.
  • Afsenderen eller kunden sparer tid og penge på designfasen og sikrer sig i højere grad et produkt, som brugeren intuitivt kan benytte – hvis det hele er vel-implementeret, selvfølgelig.

Jamen, det er jo nemt at designe så?

At kende til design patterns gør det i hvert fald nemmere. Udfordringen ligger i at kunne afkode hvilke design patterns, der kan benyttes, og hvordan de skal spille sammen.

Derudover er verden ikke sort/hvid.

Godt nok findes der en (meget) lang række af design patterns, men ofte er der behov for at tilpasse et design pattern til den pågældende løsning. Her kan fokus på god UX (User Experience) og brugertest være nøglen til at skabe en løsning, som brugeren med det samme kan afkode, men som samtidig er modificeret og tilpasset omstændighederne. Derudover er der stor forskel på, hvor alment kendt et design pattern er, og om et givent design pattern passer til en given målgruppe.

Når først hele denne analyse har fundet sted, og det indledende arbejde med skitsere design patterns og øvrige elementer er overstået, kommer selve det grafiske arbejde. Et godt, gennemtænkt og brugervenligt design, er altså meget mere end en pæn overflade. Det hele skal hænge sammen.

Nyttige ressourcer

Her er en håndfuld nyttige links med masser af showcases for de forskellige design patterns. Kender du selv et godt link, er du velkommen til at lægge det i kommentarerne.

I næste uge skriver jeg lidt mere om design af iPhone-applikationer, hvor du kan se et par eksempler på velkendte iOS design patterns og ugen efter det, kan du læse en anmeldelse af bogen Mobile Design Pattern Gallery skrevet af Theresa Neil.