10 saker som din designbyrå kanske har missat

Du står där med en glassig photoshop-fil som leverans från din designbyrå och startar gladeligen igång ditt projekt för att, några månader senare, upptäcka att antalet ändringar i projektet blev onödigt många.

Ju tidigare man kan fastställa utseende och funktionalitet, desto billigare blir det.
För handen på hjärtat, hur ofta kör man kundprojekt helt agilt -"Du kommer få en sajt... någon gång... med ett okänt antal funktioner och pris" ?

Vad är det då för områden man ofta glömmer eller hoppar över i designsteget?

Interaktionsdetaljer

Vad händer egentligen på sidan när...

  • ... jag trycker på köpknappen?
  • ... jag för musen över menyvalen?
  • ... jag skriver fel i kassan eller registreringssidan? Var visas felen?

Ett tips är att använda Mårten Angners Whiteportverktyg för snabba enkla handskisser som gör att man inte lika enkelt missar dessa detaljer.

Konceptförslag

Finns det bilder på alla komponenter och sidor? Om inte, och man väljer att starta projektet med det som finns, vad händer då om designen tillför nya funktioner?  Kanske kommer man under utvecklingens gång på att man vill flagga en produkt som en nyhet etc. Hur ska det hanteras i ett fastprisprojekt?

Navigering

Visar navigeringen tydligt var man är? Visas det tydligt med exempelvis hovring vad som är klickbart? Krävs det millimeterprecision? Skall bara produkttexten eller hela rutan vara klickbar?

Variation i information och innehåll

Vad händer om ett antal element ändras på sidan, som t.e.x. banners, tillbehörsprodukter m m. Produktnamn kan variera kraftigt i längd eller mängden data i tabeller kan variera kraftigt etc.
För mig handlar bra design om att utgå från informationen och designa runt den, inte tvärtom.
En hel del skisser man ser känns bättre lämpade för tryckt media än för webben.


Responsiv design för olika enheter

Hur skall en leverans för en responsiv site vara? Där allt skall vara procentuellt och inte millimeter-precision. Hjälper en Photoshop-fil då? Finns det bilder på hur siten skall se ut på mobila enheter och surfplattor?

Det känns inte hållbart att göra flera olika PS-skisser för samtliga vyer med tanke på den tid det skulle ta att skapa och ändra i dem. Vi tror mer på att börja med att skapa HTML-mockups och på så sätt prioritera information och funktionalitet. Parallellt med detta skulle man kunna arbeta med ex. style tiles för att fokusera mer på designspråk och individuella, återanvändbara komponenter, istället för kompletta sidor. Det skulle leda till att den grafiska designen bättre skulle följa den stildefinierande koden (css) – där strävar man ju efter att skapa återanvändbara moduler istället för att skriva unik css, sida för sida.

Vilka delar ska flyttas om och vilka ska krympas om man ändrar storlek på sitt webbläsarfönster eller byter mellan mobila enheter och datorskärm?

SEO och sökordsoptimering

Hur är siten enligt seo perspektiv? Finns det ett genomgående tänk?

Flöden för e-handel (och webb)

Är flödet för köp enklast möjliga, och snabbast? Hur hittar kunden sina produkter? När och var ser besökaren kampanjer?
Skissteknik och eye-tracking-studier är några av de metoder vi på Wipcore kan hjälpa er med för att komma fram till de mest lämpade flödena för era målgrupper.

Färgkoder

Finns det exakta färgkoder även för webb för att undanröja tvetydigheter? Ofta läggs det stor möda på att ta fram exakta färgkoder för tryckt media men inte sällan glöms webb-motsvarigheten av, eller kommer aldrig fram till de som ska utveckla webb-lösningen.

Typsnitt för texter

Finns det färdigt tänk för exakta typsnitt och storlekar på all text? Det är lätt att få texter att passa in på en given statisk bild men för e-handel och annan webb-utveckling krävs ett större perspektiv för att sätta profilen och hantera olika variationer i innehållet. Finns det färdiga stilar för exempelvis rubriker, bildtexter, tabelltexter, brödtext m.m?

Validering och varningar

Hur ska varningssymboler och felsidor se ut? Hur skiljer sig varningar och informationsmeddelanden? Är det tydligt för betraktaren vad som är vad?
Hur placeras sådan information i förhållande till vad som sker?
Vilka typsnitt, färgval och vilka symboler ska användas?

Och till sist, fast det snarare kanske borde stått som den första och viktigaste punkten - kommunicera och dra nytta av alla parters erfarenhet och kompetens så tidigt som möjligt. 

Kommunikation och prestigelöshet

Det är kunden som avgör hur detaljrik och exakt designen måste vara men att exempelvis göra runda hörn, toningar och skuggor i äldre webbläsare av Internet Explorer är tidslukande och kostsamma aktiviteter - fler grafiska element och mer kod leder till webbplatser som laddar långsammare och är svårare att underhålla och uppdatera. Det är också negativt ur ett sökmotorperspektiv, då Google premierar webbplatser som laddar snabbt.
 
Därför är det opraktiskt att sträva efter att försöka uppnå en design som är 100% identisk med en Photoshopförlaga och som ser likadan ut för alla besökare. Vi skulle hellre rekommendera att man lägger ett större fokus på användbarhet och bra funktionalitet.

I praktiken innebär detta ett progressivt förhållningssätt, där en besökare med en mer kapabel (modernare) webbläsare kommer att erhålla en grafiskt mer detaljrik upplevelse än en besökare som använder äldre teknik.

  • Pierre Setteskog
  • Tina Sjöstrand
  • Anders Kleve