Ontwerp = Emoties + Usability
Hoewel beeldende kunst een subjectief veld is, is grafisch ontwerp meer een standaard in zijn grondbeginselen. Een effectief ontwerp moet ervoor zorgen dat mensen zich op een bepaalde manier voelen en een bepaalde actie ondernemen . In dit artikel wil ik Gravity Switch's delen webdesign principes en ons denken achter hen.
Die regels zijn: definieer eerst doelen; focus op gebruikers als tweede; ontwerp voor emotie; volg de regels van visueel ontwerp; een duidelijke, visuele hiërarchie opbouwen; wees consistent; de regels overtreden (indien nodig); gebruik gimmicks niet te veel; en ten slotte testen, meten en verbeteren.
1. Definieer eerst doelen
Ik wed dat je dacht dat ik ging zeggen: "focus eerst op gebruikers", dat is wat meestmensenzeggen. Vergeet dat, laten we beginnen met uw doelen. Begin elk websiteontwerpproject met een brainstormsessie waarin duidelijke, realistische websitedoelen worden geschetst die bijdragen aan uw bedrijfsdoelstellingen .
Laten we, om dit beter te illustreren, naar Amazon kijken. Hun doel is om de verkoop van producten te maximaliseren. Door "upselling" en "cross-selling" kunnen ze de koopkracht van elke gebruiker maximaliseren, maar om hierin succesvol te zijn, vertragen ze het koopproces. In tegenstelling tot veel van hun concurrenten, heeft Amazon geen "koop nu" knop in hun zoekresultaten. Gebruikers moeten nog een pagina bezoeken (met potentiële upsells) voordat ze een aankoop doen. Dit is een perfect voorbeeld van hoe een siteontwerp kan voldoen aan duidelijke bedrijfsdoelen.
De meeste moderne e-commercesites hebben de knop 'Nu kopen' uit hun zoekresultaten verwijderd, hoewel sommige winkelcentra nog steeds beschikken over.
2. Focus op gebruikers als tweede
Met je heldere doelen als topprioriteit , moet je gebruikers definiëren en prioriteiten stellen . Wees zo specifiek mogelijk. Enkele voorbeelden van vragen die u kunt stellen zijn:
- Uitsplitsing van man vs. vrouw?
- Opleidingsniveau?
- Locaties in het land?
- Gerelateerde hobbies?
- Inkomensschijf?
- Wie stimuleert de productaankopen van kinderen? Kinderen? Ouders? Grootouders?
Het belangrijkste punt is dat ontwerpers op de hoogte moeten zijn van gebruikers, zodat zij ervoor kunnen zorgen dat hun ontwerpen de belangrijkste gebruikspaden niet blokkeren.
3. Ontwerp voor emoties
Zorg dat u begrijpt welke emoties uw merk moet concretiseren. Brainstorm. Vragen stellen. Krijg overeenstemming. En misschien wel het belangrijkst, concentreer je op deze emoties wanneer je je presenteert aan je klanten. Vraag nooit of uw klant een ontwerp "leuk" vindt. Wanneer u ontwerpen aflevert, moet u in plaats daarvan vragen stellen als "Welke van deze dingen voel je je het meest professioneel?" Of "Als je deze twee ontwerpen vergelijkt, zie je dat deze moderner is, terwijl deze meer dynamisch is. Dat waren beide emoties die belangrijk voor je waren, nu je ze visueel ziet, waarvan denk je dat dit de belangrijkste emotie is die je aan je doelgroep kunt presenteren? "
Welke van deze organisaties zijn leuk? Ontspannen? Innovatief? Bezig? Real? (Ontwerpen door @JessicaShiner en Christine Mark)
4. Volg de regels van visueel ontwerp
Er zijn veel kleine elementen die websitegebruikers bewust en onbewust gebruiken om te beslissen of ze een website gaan vertrouwen. De belangrijkste zijn:
- Bijsnijden: het selecteren van foto's is slechts de helft van het gevecht, bijsnijden van foto's is wat een pagina-indeling maakt of verbreekt.
- Negatieve ruimte: met aandacht voor marges, opvulling en lijnhoogte is het verschil tussen het lijken op de New York Times versus een nieuwsbrief op de middelbare school.
- Lettertypen: iedereen houdt van lettertypen kiezen, maar een goede ontwerper kan snel een professioneel lettertype herkennen en heeft het terughoudendheid om het aantal lettertypen op de website op 1-2 te houden (afgezien van het logo dat vaak een eigen lettertype is).
- Kleuren: kleuren zijn een van de moeilijkste dingen die ontwerpers effectief kunnen gebruiken. Er zijn zoveel regels om een goed kleurenpalet te kiezen, en hoewel het verleidelijk is om online te gebruiken kleurenpalet generatoren , besteedt u tijd aan het ontwerpen van uw eigen kleurenpalet.
- Lay-out: maak een goede visuele pagina "flow", zodat de ogen van de gebruiker terechtkomen op de pagina zonder dat andere elementen uw doelstellingen visueel vertroebelen.
5. Bouw een duidelijke, visuele hiërarchie
Website bezoekers scheren. Ze lezen niet. Grijp hun aandacht en haal ze naar de belangrijkste informatie met een duidelijk gedefinieerde, goed doordachte visuele hiërarchie . Een doordacht ontwerp - site> pagina> - leidt de gebruiker door de pagina zoals u dat wilt. Gebruikers moeten in staat zijn om naar uw pagina te kijken en deze in een fractie van een seconde te begrijpen.
Bekijk het volgende voorbeeld van een artikel en merk op hoe moeilijk het is om te zien waar de pagina over gaat of waar het artikel begint!
Hieronder is een mockup die ik heb gemaakt door een tiental regels CSS te wijzigen om op deze pagina een duidelijkere visuele hiërarchie te creëren op de volgende manieren:
- De titel van het artikel moet het meest prominente element op de pagina zijn. Het is momenteel een kleinere lettergrootte dan de kop verderop op de pagina! Dus ik heb de titel van het artikel vergroot en de koppen kleiner gemaakt.
- De kop verderop op de pagina was ook losgekoppeld van de inhoud waar het visueel naar toe was gegaan, dus heb ik ook de ruimte onder de kop aangescherpt terwijl ik de ruimte boven de kop achterliet om gebruikers te laten weten dat het een kop is voor de alinea eronder .
- Ik heb ook de kleine afbeelding rechts van de titel verplaatst in plaats van de linkerzijde, zodat wanneer een gebruiker de linkerkant van de pagina scant om zich te oriënteren, de titel van het artikel in hun visie staat.
- Ik heb de rand- en achtergrondklassen op de blauwe blurb verwijderd, zodat deze niet langer concurreert met de kop en de bovenmarge heeft verwijderd. Er was al een klasse aanwezig om hem grijs te maken, wat in dit geval prima werkt.
- Ik heb ook de afleidende tekst en afbeelding verwijderd die erop wijzen dat dit een herdrukartikel is evenals enkele lege paragrafen en
-tags.
Ik heb opzettelijk alle advertenties achtergelaten zoals ze oorspronkelijk waren gecodeerd, ervan uitgaande dat dit een kritiek onderdeel van deze pagina is.
6. Wees consistent
Verwar uw gebruikers niet. Links moeten consistent en verschillend zijn. Als je ervoor kiest pictogrammen, foto's en illustraties overal te gebruiken, zorg er dan voor dat ze er uitzien als een samenhangende set. Inconsistenties leiden de aandacht van uw gebruiker af en verdoezelen uw boodschap. Gebruik niet meer dan 3 lettertypen - het is het beste als ze allemaal van dezelfde familie zijn. Beperk jezelf tot 5-6 kleuren (Opmerking: de logo kan een ander lettertype zijn, en zou dat ook vaak moeten zijn).
7. Breek de regels (indien nodig)
Als er iets bijzonders of belangrijks is dat u moet benadrukken, moet u mogelijk de regels overtreden. U kunt een of twee contrasterende kleuren gebruiken om het element te laten opvallen. De Britse website hieronder benadrukt bijvoorbeeld het belastingtarief door van dit een groter element met een vleugje kleur te maken.
Wanneer mensen de infopagina over de Btw, de ontwerpers van GOV.UK hebben ervoor gezorgd dat de informatie die de meeste mensen nodig hebben, centraal staat.
8. Gebruik gimmicks niet te veel
Maak je ontwerp leuk, maar zorg ervoor dat die elementen ondersteunen wat je op de site probeert te bereiken. Bijvoorbeeld de Inze site is prachtig om naar te kijken en geweldig op mobiel, maar toen ik het op mijn desktopcomputer bezocht, was ik verdwaald. Het blijkt dat de navigatie verborgen is totdat je begint te scrollen, wat me helaas naar de onderkant van de pagina bracht. Als gevolg hiervan merkte ik niet eens dat de subtiele navigatie bovenaan verschijnt. Ik scrolde het meeste van de weg naar de bodem voordat ik me realiseerde dat er (eindelijk) een navigatie aan de top was. De "verborgen" navigatie is een leuk effect, maar het "ontwerp" heeft me verhinderd de gewenste actie te ondernemen. Op het einde draagt het een verwarrend, slordig merkimago.
Vergelijk Inze met wat hier in dit artikel precies gebeurt Web Designer Depot wanneer u een link op uw computer omdraait. We hebben een net effect, maar het creëert geen "barrière" voor gebruikers omwille van een gimmick. Het degradeert ook sierlijk zodat het niet zal breken op mobiele of oudere browsers.
9. Test. Maatregel. Verbeteren
Websites evolueren. Ontwerp voor flexibiliteit en aanpassingsvermogen. Het verzamelen en analyseren van doorlopende testgegevens zal een constante verbetering betekenen. Vergeet niet dat het allemaal gaat om het maken van een ontwerp dat voldoet aan uw doelen.
Door de resultaten van een reeks kleine ontwerpwijzigingen op de originele bestemmingspagina (links) zorgvuldig te meten, kwamen we met een nieuw ontwerp (rechts) dat het aantal aanmeldingen met 60% verhoogde!
Onthouden
Effectief grafisch ontwerp moet de gebruiker emotioneel met het merk verbinden en tegelijkertijd laten doen wat u wilt. Het kan worden gedaan.
Ben je het eens met deze regels voor ontwerp? Zou je nog meer toevoegen? Laat ons uw mening weten in de opmerkingen.
Uitgelichte afbeelding / thumbnail, emotie afbeelding via Shutterstock.