Design = Følelser + Brugbarhed
Mens kunst er et subjektivt felt, er grafisk design mere formel i sine fundamentale. Et effektivt design skal få folk til at føle en bestemt måde og tage en vis handling . I denne artikel vil jeg gerne dele Gravity Switch's webdesign principper og vores tankegang bag dem.
Disse regler er: definere mål først; fokusere på brugere anden; design til følelser; Følg reglerne for visuelt design opbygge et klart, visuelt hierarki være konsekvent; bryde reglerne (når det er nødvendigt); ikke overbrug gimmicks; og endelig test, måle og forbedre.
1. Definer mål først
Jeg vedder på, at du troede, jeg skulle sige "fokusere på brugere først", det er hvad mestmenneskersige. Glem det, lad os starte med dine mål. Begynd hvert website design projekt med en brainstorming session, der beskriver klare, realistiske webstedsmål, der styrker dine forretningsmål .
For bedre at illustrere dette lad os se på Amazon. Deres mål er at maksimere produktsalg. Gennem "upselling" og "cross-selling" kan de maksimere købekraften for hver bruger, men for at få succes i dette, sænker de købsprocessen. I modsætning til mange af deres konkurrenter har Amazon ikke en "buy now" -knap i deres søgeresultater. Brugere skal besøge en mere side (med potentielle upsells), før de køber. Dette er et perfekt eksempel på, hvordan et webstedsdesign kan opfylde klare forretningsmål.
De fleste moderne e-handelssites har fjernet "buy now" -knappen fra deres søgeresultater, selv om nogle mursten- og mørtelforretninger stadig har det.
2. Fokusere på brugere andet
Med dine klare målsætninger skal du definere og prioritere brugere . Vær så specifik som muligt. Nogle eksempler på spørgsmål at spørge er:
- Mand vs kvinde nedbrydning?
- Uddannelsesniveau?
- Steder i landet?
- Relaterede hobbyer?
- Indkomst beslag?
- Hvem driver børneproduktkøb? Børn? Forældre? Bedsteforældre?
Det centrale punkt er, at designere skal være opmærksomme på brugerne, så de kan sikre, at deres designs ikke blokerer nøglebrugerveje.
3. Design for følelser
Vær sikker på at du forstår hvilke følelser dit brand skal indebære . Brainstorm. Stil spørgsmål. Få aftale. Og muligvis vigtigst af alt, fokus på disse følelser, når du præsenterer tilbage til dine kunder. Spørg aldrig om din klient "kan lide" et design. Når du leverer designs, skal du i stedet stille spørgsmål som "Hvilke af disse får dig til at føle sig mest professionelle?" Eller "Når du sammenligner disse to designs, vil du se, at denne er mere moderne, mens denne er mere dynamisk. Det var begge følelser, der var vigtige for dig, nu hvor du ser dem visuelt, hvilket tror du er den vigtigste følelse for dig at præsentere for din målgruppe? "
Hvilke af disse organisationer er sjove? Slapper af? Innovativ? Travl? Ægte? (Designs af @JessicaShiner og Christine Mark)
4. Følg reglerne for visuelt design
Der er mange små elementer, som brugerne af hjemmesiden bevidst og ubevidst bruger til at afgøre, om de vil stole på et websted. De vigtigste er:
- Beskæring: Valg af fotos er kun halvdelen af kampen, og beskæring af fotos er, hvad der laver eller ødelægger et sidelayout.
- Negativt rum: Vær opmærksom på margener, polstring og linjens højde er forskellen mellem ligner New York Times vs et high school nyhedsbrev.
- Skrifttyper: Alle elsker at vælge skrifttyper, men en stor designer kan hurtigt se en professionel skrifttype og har fastholdelsen for at holde antallet af skrifttyper på hjemmesiden til 1-2 (ikke tæller logoet, der ofte er dets egen skrifttype).
- Farver: Farver er en af de sværeste ting, designerne kan bruge effektivt. Der er så mange regler at vælge en god farvepalet, og mens det er fristende at bruge online farvepaletgeneratorer , brug tid til at designe din egen farvepalet.
- Layout: lav en god visuel side "flow", så brugerens øjne går, hvor du vil have dem til at gå på siden uden andre elementer, der visuelt fortolker dine mål.
5. Byg et klart visuelt hierarki
Website besøgende skimme. De læser ikke. Grib deres opmærksomhed og få dem til de vigtigste oplysninger med et klart defineret, gennemtænkt visuelt hierarki . Et gennemtænkt design - side> side> sektion - fører brugeren gennem siden som du vil. Brugere skal kunne se på din side og forstå det i et delt sekund.
Se på det følgende eksempel på en artikel og læg mærke til, hvordan det er svært for øjet at fortælle, hvad siden handler om, eller hvor artiklen starter!
Nedenfor er en mockup, jeg lavede ved at ændre omkring et dusin linjer af CSS for at skabe et klarere visuelt hierarki på denne side på følgende måder:
- Artikeltitlen skal være det mest fremtrædende element på siden. Det er for tiden en mindre skriftstørrelse end overskriften længere nede på siden! Så jeg øgede størrelsen på artikeltitlen og reducerede størrelsen af overskrifterne.
- Overskriften længere nede på siden blev også afbrudt fra det indhold, det var en overskrift for visuelt, så jeg også strammet afstanden under overskriften, mens du forlod rummet over overskriften for at lade brugerne vide, at det er en overskrift til stykket under det .
- Jeg flyttede også det lille billede til højre for titlen i stedet for venstre, så når en bruger scanner ned på venstre side af siden for at orientere sig, er artikeltitlen i deres vision.
- Jeg fjernede grænsen og baggrundsklasserne på den blå blurb, så den ikke længere konkurrerer med overskriften og fjernet topmargenen. Der var allerede en klasse på plads for at gøre den grå, hvilket virker fint i dette tilfælde.
- Jeg fjernede også den distraherende tekst og billede, der fremhæver, at dette er en genoptryk artikel samt nogle tomme afsnit og
tags.
Jeg forsætligt efterladt alle annoncer, da de oprindeligt blev kodet, forudsat at det er en kritisk del af denne side.
6. Vær konsekvent
Forveks ikke med dine brugere. Links bør være konsekvente og tydelige. Skulle du vælge at bruge ikoner, billeder og illustrationer hele tiden, skal du sørge for at de ser ud som de tilhører som et sammenhængende sæt. Uoverensstemmelser vil distrahere din bruger og skjule din besked. Brug ikke mere end 3 skrifttyper - det er bedst, hvis de alle er i samme familie. Begræns dig til 5-6 farver (Bemærk: logo kan være en anden skrifttype, og skal ofte være).
7. Bryd reglerne (når det er nødvendigt)
Hvis der er noget særligt unikt eller vigtigt , du skal fremhæve, skal du muligvis "bryde reglerne." Du kan bruge en eller to kontrastfarver til at hjælpe elementet til at skille sig ud. For eksempel understreger UK-webstedet nedenfor skatteprocenten ved at gøre dette til et større element med en farvefarve.
Når folk besøger info siden om Moms skat, designerne af gov.uk sørgede for, at de oplysninger, de fleste mennesker har brug for, er front og center.
8. Må ikke overbruges gimmicks
Gør dit design sjovt, men sørg for, at disse elementer understøtter det, du forsøger at opnå på webstedet. For eksempel Inze site er smuk at se på og vidunderlig på mobil, men da jeg besøgte den på min stationære computer var jeg tabt. Det viser sig, at navigationen er skjult, indtil du begynder at rulle, som desværre tog øje med nederst på siden. Som følge heraf bemærkede jeg ikke engang den subtile navigation, der vises øverst. Jeg rullede mest af vejen til bunden, selv før jeg indså, at der endelig var en navigation på toppen. Den "skjulte" navigation er en pæn effekt, men "design" forhindrede mig i at tage den ønskede handling. I sidste ende giver det et forvirrende, sjusket mærkebillede.
Sammenlign Inze med hvad der sker rigtigt i denne artikel her Web Designer Depot når du ruller over et link på din stationære computer. Vi har en pæn effekt, men det skaber ikke en "barriere" for brugere af hensyn til en gimmick. Det nedbryder også yndefuldt, så det vil ikke brydes på mobile eller ældre browsere.
9. Test. Måle. Forbedre
Websites udvikler sig. Design for fleksibilitet og tilpasningsevne. Indsamling og analyse af løbende testdata vil drive konstant forbedring. Husk, det drejer sig om at skabe et design, der opfylder dine mål.
Ved omhyggeligt at måle resultaterne fra en række mindre designændringer til den oprindelige destinationsside (venstre), kom vi op på et nyt design (højre), der øgede procentdelen af tilmeldinger med 60%!
Husk
Effektiv grafisk design skal følelsesmæssigt forbinde brugeren med mærket, samtidig med at de får det til at gøre, hvad du vil. Det kan gøres.
Er du enig i disse regler for design? Vil du tilføje mere? Lad os vide dine synspunkter i kommentarerne.
Fremhævet billede / miniaturebillede, følelsesbillede via Shutterstock.