Do not Break Rules, Reinvent Them
Mensen bouwen websites om vele redenen: om een breder publiek te bereiken; verkopen, promoten of uitdrukken; om groepsdruk te kalmeren. Noviteit is sinds 2001 geen reden meer. In plaats daarvan hebben we natuurlijk: natuurlijk een website; je moet natuurlijk een Facebook-muur, een Twitter-account, een LinkedIn-profiel of een Pinterest-bord hebben; natuurlijk hebben we allemaal e-mail.
En, natuurlijk, webdesign maakt gebruik van HTML en CSS - twee talen waarmee browsermakers en ontwerpers elkaar vinden. Maar veel webontwerpers creëren verbazingwekkende variatie met dezelfde taalregels door te vragen wat als, in plaats van natuurlijk te vervallen .
Anderen houden vast aan wat werkt.
Degenen die de conventionele wijsheid volgen, gebruiken niet alleen de taal maar dezelfde zinnen - in webtermen, niet alleen HTML / CSS, maar Arial en Georgia, 960-pixel brede lay-outs of onderstreepte blauwe links. Het gebruik van dergelijke conventies is niet verkeerd. Maar ontwerpers die er niet voor kiezen gevestigde patronen te gebruiken - die de conventionele wijsheid volgen zonder te vragen waarom - missen kansen.
De standaardstructuur
De standaard structuur op één niveau heeft praktische voordelen. Het is eenvoudig en eenvoudig is goed voor deadlines. Wat nog belangrijker is, is het bekend. Zowel de openbare als de webontwerpers op internet hebben een onuitgesproken overeenkomst over hoe websites werken. Het volgen van het home / services / about / contact-patroon dient zowel ontwerpers als publiek door aan hun verwachtingen te voldoen.
Andere begrippen zijn zo voor de hand liggend dat ze gemakkelijk over het hoofd te zien zijn:
- Mensen verwachten dat het klikken op het woord 'contact' e-mail- of telefoongegevens zal bevatten.
- Ze weten dat ze een link naar de startpagina in de linkerbovenhoek van een pagina zullen vinden. In combinatie met een logo natuurlijk.
- Ze zien auteursrechtverklaringen in het voetgedeelte, vaak aan de linkerkant, met een jaar.
- Ze weten dat websites op en neer scrollen, niet zij aan zij.
Bovendien zorgt catering voor aangeleerd gedrag voor minder wrijving. Maar ontwerpers die conventies volgen, met of zonder het te beseffen, versterken de conventies zelf.
- Klik op het logo en ontvang een contactformulier? "Dat is niet wat ik verwachtte."
- Klik op een link die zegt "lees meer" en ontvang een betaalmuur? "Geef me gewoon het artikel."
- Horizontaal scrollen in plaats van verticaal? "Dat is vreemd. Het is kapot?"
- Meest prominente afbeelding onderaan een pagina? "Het staat ondersteboven."
Het is gemakkelijk om de voor de hand liggende conclusie te trekken: Break-conventie en het vervreemden van mensen.
Toch zijn niet alle conventies absoluut. De meeste websites volgen de regels met hun eigen stilistische verschillen. Niet elke link op elke site is onderstreepte blauwe tekst. Niet elke foto heeft hetzelfde formaat. Niet elke lay-out gebruikt dezelfde indeling van kolommen. Mensen passen zich aan omdat variaties van conventies zelf conventies zijn. Mensen verwachten gekke dingen te vinden tussen sites.
Hoe komen in dat geval onconventionele websites weg met het breken van rang? Hun ontwerpers bedenken nieuwe conventies die gemakkelijk te leren zijn.
Adaptief denken
Het oude gezegde "breek niet wat niet kapot is" is een goed advies totdat iemand de definitie van "gebroken" verandert.
Sinds het begin van het web konden ontwerpers erop vertrouwen schermen die ten minste 640 pixels breed zijn . Meer recent zijn 1024 pixels en meer normaal. Vanaf 2007 kleingadgets zet websites in handen van mensen. Plotseling ontwerpen voor 320 pixels was in de mode .
Maar gedwongen te veranderen en te kiezen om te veranderen zijn verschillende attitudes. Creativiteit is niet bang om een pad van grotere weerstand te volgen.
De Roberts Group Website-experimenten met een op rasters gebaseerde lay-out. Gebruikers navigeren op hun site met een "letterlijke sitemap". Tekstlinks bieden een terugval voor gebruikers die zich niet op hun gemak voelen bij het raster.
Hoe conventies te doorbreken
Niet elk risico loont. De meeste onconventionele webontwerpen mislukken niet omdat ze patronen breken, maar omdat ze niet in staat zijn nieuwe beloftes te communiceren. De kunst is om vast te stellen waarom de conventies zijn ontstaan.
1. Plaats een link naar huis met een logo in de linkerbovenhoek
Probleem: bezoekers van een complexe site kunnen verloren raken. Een betrouwbare link naar de startpagina fungeert als de resetknop van de site.
Conventioneel denken: elke pagina wordt geladen boven aan een pagina. Omdat de meeste weblay-outs naar beneden scrollen, is de bovenkant van elke pagina de meest logische plaats voor een betrouwbare knop.
Onconventioneel denken:
- Gebruik positie: vast om een startknop op dezelfde plaats te houden in de browsers van bezoekers, niet alleen op de pagina
- Moedig mensen aan om door content te bladeren met een prominente link naar het begin van de pagina's
- Verwijder de startpagina ten gunste van een rijke navigatiebalk
2. Een lijst met artikelen maakt hun titel, afbeelding of "lees meer" klikbaar
Probleem: mensen hebben duidelijke aanwijzingen nodig om informatie te verkrijgen die titels en beschrijvingen beloven.
Conventioneel denken: titels en miniaturen vertegenwoordigen de inhoud die zij beschrijven het best. De kortste route naar 'Ik wil er meer over lezen' is om het klikbaar te maken. Maak titels en miniaturen daarom klikbaar.
Onconventioneel denken:
- Maak de volledige teaser - afbeelding, titel en beschrijving - klikbaar. Links met meer oppervlak zijn goed voor mobiel ontwerp en eenvoudig te maken met CSS
- Zet het ondersteboven: leid met een of twee dwingende zinnen, en zet de klikbare titel eronder in kleinere tekst
- In plaats van 'deze nu lezen', kunnen gebruikers artikelen aan een wachtrij toevoegen om ze op hun gemak te lezen in de volgorde waarin ze kiezen
3. Ontwerp een sjabloon voordat u de inhoud schrijft
Probleem: esthetiek, geen code of semantiek, maakt de eerste indruk van een site.
Conventioneel denken: ontwerp eerst de uitstraling van de site. Laat ruimte over voor inhoud.
Onconventioneel denken:
- Gebruik typografie en kleur om de inhoud zelf te doordrenken met stemming, stem en karakter. Ontwerp vervolgens elementen die dat karakter versterken, indien nodig, zoals achtergrondstructuren en zijbalken.
- Maak het achtergrondgedeelte van de inhoud. Wijzig de kleuren per pagina om de stemming, het onderwerp of de functie weer te geven.
- Verberg of verlaag sidebar-informatie totdat de gebruiker ervoor kiest er aandacht aan te schenken.
Verhalen op Longboard World niet alleen tart de "teasers moet tekst" regel, maar leert een les van Wet van Fitt door de hele notecard klikbaar te maken.
Richtlijnen voor regels
Om het geleerde gedrag van het publiek te doorbreken, moet je terugvallen op een belofte. Conventies zijn synoniem voor vertrouwen. De beste manier om gevestigde regels te doorbreken is dan niet om ze te verbreken, maar om ze te vervangen.
1. Vervang, breek niet, regels
Om de conventie te veranderen, moeten we respecteren waarom oude regels werkten.
- Vroege browsers moesten koppelingen duidelijk maken, dus onderstreepten ze de aanklikbare tekst.
- Lijnen tekst die breder is dan 400 pixels zijn moeilijk voor mensen om regel na regel te volgen. Niet alleen verkorten kolommen regels, maar ze zorgen ook voor een meer horizontale organisatie.
- Content-rijke websites zorgen voor organisatorische problemen. Met zoekhulpmiddelen kunnen mensen op zoek naar een specifieke uitdrukking in plaats van willekeurige categorieën te doorzoeken.
2. Houd je aan je eigen regels
Zodra mensen bijvoorbeeld oranje vakjes associëren met links, mag het ontwerp niet afwijken van die belofte. Telkens wanneer er op een oranje vakje wordt geklikt, worden mensen naar een nieuwe pagina geleid. Die regel wordt versterkt. Elke oranje doos die anders doet, zal de regel degraderen.
3. Geef het tijd
Zowel de publieke als de terughoudende site-eigenaren winnen vertrouwen door exposure. Ontwerp kan dat helpen door de leercurve te verlagen - door de regels duidelijk te maken.
4. Gebruik doelen
Conventies werken. Ze zijn eenvoudig voor ontwerpers en voor het grote publiek. Ze doorbreken omwille van verandering, niemand heeft er baat bij. Probeer de problemen eerder te overdenken.
- Populaire consensus is tegengesteld aan deze wetgevende macht. Als mensen de website bezoeken, hebben we minder dan een seconde om ze te winnen. Hoe kunnen we gedachten zo snel veranderen?
- We willen meer dan 200 foto's laten zien. Hoe kunnen we dat gemakkelijk maken voor mensen om te navigeren?
- Onze producten zijn veilig, maar we hebben de reputatie niet voor het milieu te zorgen. Persberichten betekenen niets. Hoe kunnen we oprechte bezorgdheid tonen in een subtekst?
- We hebben een overvloed aan inventaris. Niemand koopt. Hoe kunnen we dat in ons voordeel veranderen?
Evolutie van het web durft de "rechter vouw" van de browser te verbreken door zich zijwaarts uit te strekken. Animatie aan het begin toont aan gebruikers wat ze krijgen voor side-scrolling.
Naarmate het webontwerp evolueert, is het gehoorzamen van conventies riskanter dan experimenteren. Wanneer het publiek onconventionele ontwerpen opmerkt die goed werken, mobiel of niet, zullen ze ook bewust worden van websites die zich beperken tot de conventies van gisteren. Ontwerpers die dit erkennen, kunnen grote stappen zetten in het bouwen van betere websites.
Breek je regels of speel je veilig? Welke regels voor webdesign zou je willen herschrijven? Laat het ons weten in de comments.
Uitgelichte afbeelding / thumbnail, onconventioneel beeld via Shutterstock