Design = Følelser + Brukbarhet
Mens kunst er et subjektivt felt, er grafisk design mer formel i sine grunnleggende. En effektiv design bør få folk til å føle en bestemt måte og ta en viss handling . I denne artikkelen vil jeg gjerne dele Gravity Switch webdesign prinsipper og vår tenkning bak dem.
Disse reglene er: definere mål først; fokusere på brukere andre; design for følelser; følg reglene for visuell design; bygge et klart, visuelt hierarki; være konsekvent; bryte reglene (når det er nødvendig); ikke bruk for mye og til slutt teste, måle og forbedre.
1. Definer mål først
Jeg slår på at du trodde jeg skulle si "fokusere på brukere først", det er hva mestmenneskersi. Glem det, la oss starte med dine mål. Begynn hvert nettsteddesignprosjekt med en brainstormingsøkt som skisserer klare, realistiske nettsidemål som styrker dine forretningsmessige mål .
For bedre å illustrere dette, la oss se på Amazon. Målet er å maksimere produktsalg. Gjennom "upselling" og "cross-selling" kan de maksimere kjøpekraften til hver bruker, men for å lykkes i dette reduserer de kjøpeprosessen. I motsetning til mange av sine konkurrenter har Amazon ikke en "buy now" -knapp i søkeresultatene. Brukere må besøke en side (med potensielle upsells) før de kjøper. Dette er et perfekt eksempel på hvordan en webdesign kan oppfylle klare forretningsmål.
De fleste moderne e-handelsnettsteder har fjernet «buy now» -knappen fra søkeresultatene, selv om noen murstein og mørtelutsalg fortsatt har det.
2. Fokusere på brukere andre
Med de klare målene dine i tankene, må du definere og prioritere brukere . Vær så spesifikk som mulig. Noen eksempler på spørsmål å spørre er:
- Mann vs kvinne sammenbrudd?
- Utdanningsnivå?
- Steder i landet?
- Relaterte hobbyer?
- Inntektsbeslag?
- Hvem driver barnes produktkjøp? Kids? Foreldre? Besteforeldre?
Nøkkelpunktet er at designere bør være oppmerksomme på brukerne, slik at de kan sikre at deres design ikke blokkerer nøkkelbrukerbaner.
3. Design for følelser
Pass på at du forstår hvilke følelser din merkevare burde ha . Brainstorm. Stille spørsmål. Få avtale. Og muligens viktigst, fokus på disse følelsene når du presenterer tilbake til dine kunder. Spør aldri om din klient "liker" et design. Når du leverer design, bør du i stedet stille spørsmål som "Hvilke av disse gjør at du føler deg mest profesjonell?" Eller "Når du sammenligner disse to designene, ser du at denne er mer moderne, mens denne er mer dynamisk. De var begge følelser som var viktige for deg, nå som du ser dem visuelt, som tror du er den viktigste følelsen for deg å presentere til målgruppen din? "
Hvilke av disse organisasjonene er morsomme? Slapper av? Nyskapende? Opptatt? Ekte? (Design av @JessicaShiner og Christine Mark)
4. Følg reglene for visuell design
Det er mange små elementer som brukerne av nettstedet bevisst og ubevisst bruker til å bestemme om de skal stole på et nettsted. De viktigste er:
- Beskjæring: å velge bilder er bare halvparten av kampen, beskjæring av bilder er det som lager eller ødelegger et sidelayout.
- Negativ plass: Vær oppmerksom på marginer, polstring og linjehøyde er forskjellen mellom å se ut som New York Times vs et videregående nyhetsbrev.
- Skrifter: alle elsker å velge skrifttyper, men en flott designer kan raskt se en profesjonell skrifttype og har fastholdelsen for å holde antall fonter på nettstedet til 1-2 (ikke tellingenes logo som ofte er sin egen skrifttype).
- Farger: Farger er en av de vanskeligste tingene for designere å bruke effektivt. Det er så mange regler å velge en god fargepalett, og mens det er fristende å bruke på nettet fargepalettgeneratorer , bruke tid på å designe din egen fargepalett.
- Layout: Lag en god visuell side "flyt" slik at brukerens øyne går der du vil at de skal gå på siden uten at andre elementer visuelt overspliser målene dine.
5. Bygg et klart, visuelt hierarki
Nettsted besøkende skummer. De leser ikke. Ta tak i deres oppmerksomhet og få dem til den viktigste informasjonen med et klart definert, gjennomtenkt visuelt hierarki . Et godt gjennomtenkt design - side> side> seksjon - fører brukeren gjennom siden slik du vil. Brukere bør kunne se på siden din og forstå det i en delt sekund.
Se på følgende eksempel på en artikkel og legg merke til hvordan det er vanskelig for øyet å fortelle hva siden handler om eller hvor artikkelen starter!
Nedenfor er en mockup jeg laget ved å endre om et dusin linjer med CSS for å skape et klarere visuelt hierarki på denne siden på følgende måter:
- Artikkeltittelen skal være det mest fremtredende elementet på siden. Det er for tiden en mindre skriftstørrelse enn overskriften lenger ned på siden! Så jeg økte størrelsen på artikkeltittelen, og reduserte størrelsen på overskriftene.
- Overskriften lenger ned på siden ble også koblet fra innholdet det var en overskrift for visuelt, så jeg skjønte også avstanden under overskriften mens du forlot rommet over overskriften for å la brukerne vite at det er en overskrift for avsnittet under det .
- Jeg flyttet også det lille bildet til høyre for tittelen i stedet for venstre, slik at når en bruker skanner ned på venstre side av siden for å orientere seg, er artikkeltittelen i deres syn.
- Jeg fjernet grensen og bakgrunnsklassene på den blå blokken slik at den ikke lenger konkurrerer med overskriften og fjernet toppmargenen. Det var allerede en klasse på plass for å gjøre den grå, noe som virker bra i dette tilfellet.
- Jeg fjernet også den distraherende teksten og bildet som fremhever at dette er en utskriftartikkel, så vel som noen tomme avsnitt og
tags.
Jeg forsettlig forlot alle annonser som de var opprinnelig kodet, forutsatt at det er en kritisk del av denne siden.
6. Vær konsekvent
Ikke forveksle brukerne dine. Lenker skal være konsekvente og tydelige. Skulle du velge å bruke ikoner, bilder og illustrasjoner, må du sørge for at de ser ut som de tilhører som et sammenhengende sett. Uoverensstemmelser vil distrahere brukeren din og skjule meldingen. Ikke bruk mer enn 3 fonter - det er best hvis de er alle i samme familie. Begrens deg til 5-6 farger (Merk: logo kan være en annen skrift, og ofte bør det være).
7. Bryt reglene (når det er nødvendig)
Hvis det er noe spesielt unikt eller viktig som du må markere, må du kanskje "bryte reglene." Du kan bruke en eller to kontrasterende farger for å hjelpe elementet til å skille seg ut. For eksempel understreker den britiske nettsiden nedenfor skattesatsen ved å gjøre dette til et større element med en fargefarge.
Når folk besøker info siden om Moms skatt, designerne til GOV.UK sørget for at informasjonen de fleste trenger, er foran og senter.
8. Ikke bruk mye gimmicks
Gjør designen morsom, men sørg for at elementene støtter det du prøver å oppnå på nettstedet. For eksempel Inze Nettstedet er vakkert å se på og fantastisk på mobil, men da jeg besøkte den på min stasjonære datamaskin, ble jeg tapt. Det viser seg at navigasjonen er skjult til du begynner å rulle som dessverre tok øye med bunnen av siden. Som et resultat så jeg ikke engang merke til den subtile navigasjonen som vises øverst. Jeg rullet mest av veien til bunnen før jeg skjønte at det var (endelig) en navigasjon på toppen. Den "skjulte" navigasjonen er en fin effekt, men "design" hindret meg fra å ta den ønskede handlingen. Til slutt gir det et forvirrende, slurvet merkebilde.
Sammenlign Inze til hva som skjer riktig i denne artikkelen her Web Designer Depot når du ruller over en lenke på din stasjonære datamaskin. Vi har en fin effekt, men det skaper ikke en "barriere" for brukere på grunn av en gimmick. Det degraderer også grasiøst, slik at det ikke vil bryte på mobile eller eldre nettlesere.
9. Test. Måle. Forbedre
Nettsteder utvikler seg. Design for fleksibilitet og tilpasningsevne. Samle og analysere pågående testdata vil drive konstant forbedring. Husk, det handler om å skape et design som oppfyller dine mål.
Ved å nøye måle resultatene av en serie mindre designendringer til den opprinnelige destinasjonssiden (til venstre), kom vi opp med et nytt design (høyre) som økte prosentvis registreringen med 60%!
Huske
Effektiv grafisk design trenger følelsesmessig å koble brukeren til merkevaren samtidig som de får det til å gjøre det du vil. Det kan gjøres.
Er du enig i disse reglene for design? Vil du legge til noe mer? Gi oss beskjed om dine synspunkter i kommentarene.
Utvalgt bilde / miniatyrbilde, følelsesbilde via Shutterstock.