Share
Ontwerpen voor de 'vouw' is al lang een prioriteit voor veel webontwerpers, maar met zoveel apparaten die uw website kunnen weergeven, hoe weet u in hemelsnaam waar deze is? Moeten we ons zorgen maken? Dit artikel vraagt hoe belangrijk de 'vouw' eigenlijk is, de variabelen die spelen, veranderende surfgewoonten en wat u eraan kunt doen. De dood van de vouw is eindelijk op ons!
Browsen op het World Wide Web is niet langer een taak die beperkt is tot desktopcomputers. Mobiel browsen lijkt van dag tot dag toe te nemen en veel meer apparaten zoals televisies die klaar zijn voor gebruik van internet komen gemakkelijk beschikbaar. Brandon noemde het voor het eerst in zijn grote jaarlijkse webtrends post, The State of Web Design Trends: 2011 Annual Edition? "The Death of the Fold" zoals hij het noemde, komt eindelijk bij ons op.
Maar wat betekent dat eigenlijk??
Omdat het traditionele? Scherm? dat mensen het web doorzien heeft een explosie van verscheidenheid ondergaan? we kunnen niet langer verwachten dat web-surfers op iets dichtbij een 19 "-monitor zitten met een resolutie ergens tussen 1024? 768 en 1280? 700. Schermen zijn tegenwoordig in alle soorten en maten, van iPhones (en kleinere telefoons) tot 60" HDTV's. Het is niet alleen een resolutie die enorm kan variëren; de beeldverhouding van een scherm (zelfs op hetzelfde apparaat als de iPhone) kan veranderen met één beweging van de pols. Natuurlijk krijgen webontwerpers altijd het advies om de belangrijkste berichten van een site bovenaan te houden, maar met zoveel nieuwe manieren waarop websurfers het web kunnen bekijken, is er geen gedefinieerde hoogte meer waar inhoud boven moet staan.
Voordat we echter voorop lopen, laten we dit artikel beginnen met een reis terug naar de oude school?
"Het ideale gebied om gedurfde introducties, essentiële informatie, verleidelijke beelden en call-to-action-elementen te plaatsen, ligt boven de vouw?"
Als u een opleiding grafisch ontwerpen hebt gehad, zult u waarschijnlijk bekend zijn met de term 'boven de vouw'. Zo niet, laten we een kort moment nemen om het uit te leggen.
De term werd voor het eerst gebruikt in verwijzing naar traditionele media, kranten om precies te zijn. De gedachte is dat kranten vaak worden opgevouwen of weergegeven en dat het gebied 'boven de vouw' de eerste is die de lezer ziet en het daarom een prominente en belangrijke locatie is. Opvallende krantenkoppen en opvallende beelden worden vaak weergegeven om de aandacht van de lezer te trekken.
De zinsnede was natuurlijk overgedragen aan het veld van Web Design toen het populair werd in de laatste 90's. Het is min of meer hetzelfde concept, behalve het gebied boven de vouw is in plaats daarvan het gebied dat de gebruiker onmiddellijk kan zien zonder te scrollen (niet zo pakkend, toch?). Dit gebied is het ideale gebied om gedurfde introducties, essentiële informatie, verleidelijke beelden en call-to-action-elementen te plaatsen. Het is ook de voorkeursruimte voor alle advertenties.
Het gebied boven de vouw is het bovenste deel van een webontwerp dat de gebruiker onmiddellijk kan zien zonder te scrollen.
Het belang van het gebied boven de vouw lijkt te worden ondersteund door de 'vijf-secondenregel' die vaak wordt aangehaald in Web Design; waarin staat dat gebruikers een oordeel vellen over een site binnen de eerste vijf seconden na het bezoek. Usability-expert Jakob Nielsen heeft ook gesuggereerd dat gebruikers tot 80% van hun tijd besteden aan het bekijken van informatie boven de vouw.
Het belang van de "vouw" in het afgelopen decennium kan niet overdreven benadrukt worden in zijn historische context? In veel ontwerpstudio's en marketingbureaus werden er hevig aangevochten discussies gevoerd over waar, precies, de plooi was. Er werd veel geld uitgegeven aan marktgegevens om de optimale plaatsing van advertenties te voorspellen, en hele ontwerpen werden uit het venster gegooid omdat ze het gebruik van de "boven de vouw" -ruimte niet maximaliseerden. De almachtige vouw, ter hoogte van het belang ervan, werd gedefinieerd als een van de drie horizontale lijnen bij 570, 590 en 600 pixels.
Alles onder de 600 pixels was niet relevant, second-tier content? niet de moeite waard voor een waardige webontwerper om zich zorgen over te maken.
Nu, op dit punt kunnen sommigen van jullie denken, of zelfs schreeuwen (gezien de hoeveelheid debat die dit onderwerp lijkt te veroorzaken) dat de 'vouw' niet relevant is en elke bespreking ervan zou beperkt moeten blijven tot de geschiedenisboeken. Het idee dat een webdesigner beperkt tot een klein deel aan het begin van het scherm is absurd. We willen graag geloven dat alle internetgebruikers scrollen en dat we de vrijheid hebben om onszelf uit te drukken en een ontwerp te maken in zoveel ruimte als nodig is. Sommigen hebben zelfs behoorlijk creatief getoond door aan te tonen dat mensen bereid zijn te scrollen.
Er is ongetwijfeld veel discussie geweest tussen een webontwerper en hun klant over het belang van de 'vouw' en dit heeft mogelijk bijgedragen aan de enigszins slechte reputatie die het heeft. Een klant, die het belang van de vouw overschat, kan alles en de gootsteen vragen om geperst en gepropt te worden in die relatief kleine ruimte en de webontwerper zal gefrustreerd blijven dat ze hun bekwaamheid voor positie, uitlijning en subtiel gebruik van wit niet kunnen aantonen. ruimte.
De sleutel tot dit probleem is, net als bij veel andere ontwerpaspecten, het bereiken van een balans. Het is duidelijk dat je jezelf beperkt tot een klein deel van het scherm, je creativiteit en ontwerpopties zou beperken. Aan de andere kant zou het negeren van het idee van de 'vouw' geheel een vergissing zijn en zou u een potentieel krachtige ontwerptechniek missen, zoals we hieronder zullen zien.
De prachtig vormgegeven website voor de Kaleidoscope-app is een uitstekend voorbeeld van ontwerpen met 'de vouw' in gedachten. De grote titel, een inleidende paragraaf, een opvallende afbeelding en call-to-action-elementen zijn allemaal direct zichtbaar en beschikbaar voor de gebruiker. Merk op hoe aanvullende informatie onder het kopje 'Meer informatie' onder het afkappunt valt. De 'vouw' is duidelijk meegenomen in het ontwerp van deze website, maar naar beneden scrollen zal een enorme hoeveelheid informatie en veel meer gedetailleerde ontwerpelementen onthullen. Het is duidelijk dat de ontwerpers van de website nog steeds verwachten dat gebruikers gaan scrollen.
U zult vergelijkbare ontwerppatronen vinden die op veel grote websites zijn geïmplementeerd. Het belang van die eerste indruk wordt erkend, maar een veel groter gebied wordt volledig benut om een verhaal te vertellen en de informatie te communiceren die ze nodig hebben. Het gebied 'boven de vouw' wordt vaak gebruikt om de gebruiker verder naar de pagina te leiden en naar de gebieden te leiden die de ontwerper de gebruiker wil laten zien. Het is inderdaad een belangrijke vaardigheid om te hebben, om de aandacht van een gebruiker te trekken, maar ze toch geïntrigeerd te houden om op de site te blijven en eigenlijk nieuwe informatie en inhoud op te zoeken..
Het is altijd een tweede natuur om de belangrijkste berichten en call-to-action-materiaal boven aan een site-ontwerp op te nemen? maar dogmatisch proberen inhoud boven de vouw te persen, is niet langer een strategie die je ontwerpen zou moeten verkorten.
Als je de Kaleidoscope-website echter zelf bezoekt, krijg je meer dan waarschijnlijk een enigszins ander beeld. Mogelijk ziet u meer of minder van de website - en hier is het probleem waarmee elke webdesigner wordt geconfronteerd. Hoe kun je ontwerpen voor de fold als je niet weet waar het voor een bepaalde bezoeker is? Er zijn veel verschillende factoren die samen de fysieke grootte van het gebied 'boven de vouw' bepalen.
Webontwerpers zijn er goed aan gewend dat ontwerpen met browsers constant in overweging wordt genomen. De vele eigenaardigheden en inconsistenties hebben ons jarenlang gefrustreerd en spelen ook een rol in dit raadsel. Elke individuele browser neemt een ander deel van het scherm op, afhankelijk van de grootte van de browser U.I en eventuele extra werkbalken. De trend met moderne browsers lijkt echter positief, omdat ze minder ruimte innemen dan voorheen. De ontwikkelaars van Google's Chrome, Safari en Internet Explorer 9 hebben zich gerealiseerd dat er een betere browse-ervaring is wanneer er weinig is om gebruikers af te leiden van de website zelf.
Tegenwoordig is er ook zoveel verschillende beeldschermgrootte en schermresolutiecombinaties dat het vrijwel onmogelijk blijkt voor een 'one size fits all'-webontwerp. Vele jaren geleden werd vastgesteld dat 1024x768 de meest gebruikelijke schermresolutie was en dit lijkt te zijn waar de meeste ontwerpers nog steeds voor ontwerpen. De resolutiestatistieken van WebDesigntuts alleen tonen de omvang van het probleem voor ontwerpers.
Laten we snel een kijkje nemen naar de statistieken voor browserresolutie voor de Webdesigntuts + -site voor een snelle casestudy:
"Je kunt niet garanderen dat ze überhaupt een traditioneel beeldscherm gebruiken."
De afbeelding laat zien dat er momenteel een grote verscheidenheid aan resoluties wordt gebruikt met een meerderheid van gebruik verspreid over zes verschillende grootten. Zoals u kunt zien, telt de schermresolutie van 1024x768 nu slechts voor een klein percentage, hoewel dit recentelijk is toegenomen vanwege de beslissing van de IPad om deze resolutie te gebruiken.
Als het niet genoeg is dat je niet echt een idee hebt van welk formaat monitor een webgebruiker had, kun je nu niet garanderen dat ze een traditioneel beeldscherm gebruiken. De leeftijd van mobiel browsen is goed en waarlijk op ons en er zijn veel verschillende apparaten die momenteel worden gebruikt. Laten we de analytische statistieken voor Webdesigntuts opnieuw bekijken:
Zoals je kunt zien, worden er veel verschillende besturingssystemen gebruikt en kunnen platforms zoals Android op verschillende apparaten worden geïntegreerd. Browsen op basis van tablets, die zijn ontploft met de release van de IPad, zal alleen maar populairder worden door de release van veel verschillende tabletcomputers. Mobiele apparaten van allerlei soorten vormen ook een unieke uitdaging voor webontwerpers omdat ze kunnen worden gebruikt in landschaps- of portretmodus - een beslissing die de positie van de vouwlijn enorm zou veranderen. Veel websites proberen nu om 'geoptimaliseerd' te worden voor apparaten zoals het Ipad.
Dus met al deze variabelen, hoe in hemelsnaam is het mogelijk om te weten waar de 'vouw' is?
De waarheid is dat je dat niet kunt. Met zoveel variabelen in het spel is het bijna onmogelijk om precies te weten waar de vouwlijn zal zijn. Fast-forward slechts een of twee jaar en we zullen waarschijnlijk nog meer veranderingen in de schermomgeving zien. Dit alles betekent gewoon dat er niet meer vertrouwd kan worden gemaakt op het eerdere advies om binnen de eerste 600px te ontwerpen. Het lijkt erop dat het streven naar pixelperfectie je alleen gefrustreerd zal maken.
Een meer verstandige benadering zou zijn om te ontwerpen voor algemene, op verhoudingen gebaseerde vouwen die zowel landschaps- als portretgeoriënteerd browsen in overweging zouden nemen?
Dit zou betekenen dat niet alleen de traditionele vouw moet worden ontworpen, maar ook een tweede vouw verderop op de pagina. Zo'n vouw zou niets afwijken van een conventioneel ontwerp, maar zou een toegevoegde bonus zijn voor degenen die mobiele apparaten en tabletcomputers gebruiken. Door een geschatte verhouding te gebruiken in plaats van te vertrouwen dan vaste pixelmetingen, terwijl het zeker minder nauwkeurig zal zijn, zou je toch relatief veilig moeten blijven.
Wij geloven dat de sleutel hier niet is om te veel op de 'vouw' zelf te focussen, maar eerder om je kernboodschap binnen een 'veilige zone' te houden met behoud van een kwaliteitsontwerp in het algemeen. Idealiter zou je ontwerpen op mobiele apparaten moeten testen, maar er zijn veel simulators beschikbaar als dat niet altijd mogelijk is.
De best mogelijke ontwerpstrategieën die zich aanpassen aan een groot aantal monitoren, zijn die met een gevestigd gevoel van hiërarchie over het hele ontwerp. Dit betekent dat de kernboodschap van een site duidelijk moet zijn van zowat elke "schaling" van die site - en meer gedetailleerde informatie en inhoud moet leesbaar zijn in volgorde van zijn belang op de pagina.
Andere ontwerpprincipes zoals typografie, kleurentheorie, lay-out en gestalt spelen ook allemaal een grote rol, dus webontwerpers zouden er goed aan doen om deze gevestigde praktijken op te poetsen. Inderdaad, misschien een van de geweldige nieuwe kansen die de "dood van de traditionele vouw" ontwerpers biedt, is een terugkeer naar kernontwerpprincipes? het achterlaten van starre, dogmatische en onzinnige noties van lay-out ten gunste van eeuwenoude ontwerptheorieën.
"In de studie ontdekten ze dat 76% van de gebruikers scrolde en dat een groot deel van hen scrolde helemaal naar de bodem, ondanks de hoogte van het scherm."
De statistieken voor Webdesigntuts-site alleen zijn nuttig om naar te kijken (vooral omdat we zulke gedetailleerde gegevens hebben), maar het vertegenwoordigt zeker niet het hele internet, toch? Zelfs wanneer we kijken naar de officiële statistieken van de browserdisplay van de officiële W3 Schools-site, komt er een soortgelijke trend naar voren.
Zeker, de gegevens van alleen deze twee sites vertegenwoordigen niet het geheel van het internet browsing publiek? maar door naar het schrift op de muur te kijken, kun je gemakkelijk vaststellen dat dit niet zomaar een randvoorval is, maar een nieuw patroon dat opkomt. Combineer dit met de verkoop van nieuwe apparaten en de groei van de monitorindustrie, en het is rotsvaste munitie voor iedereen die de mythe van de traditionele vouw wil verdrijven..
Verder zijn er veel onderzoeksstudies uitgevoerd die het belang van de vouw ontkrachten, zelfs wanneer die bestond. De conclusies: zelfs wanneer u een vaste beeldschermgrootte gebruikt (dwz: 1024 x 768), kijken mensen die op internet surfen niet alleen onder de vouw? ze brengen daar vaak het grootste deel van hun tijd door!
We hebben veel besproken in dit artikel, dus laten we enkele belangrijke punten bespreken.
Het traditionele concept van ontwerpen voor de 'vouw' lijkt enigszins verouderd te zijn als het gaat om modern webdesign. We hebben gezien dat een combinatie van variabelen en een verandering in de browse-methoden van veel mensen betekent dat een vaste positie van de 'vouwlijn' niet veilig kan worden vastgesteld. Webgebruikers zijn ook erg bereid om te scrollen; vooral met multi-touch-apparaten zoals de IPad die de taak zeer intuïtief maken.
Dit betekent echter niet dat de 'vouw' volledig genegeerd moet worden. De 'vouw' kan nog steeds een effectief element in elk ontwerp zijn. Er kan geen twijfel over bestaan dat eerste indrukken inderdaad meetellen in webdesign en deze ruimte kan worden gebruikt om niet alleen uw publiek te vangen, maar ook om ze verderop in de pagina te lokken. Reserveer dit gebied voor uw meest essentiële informatie terwijl u uw klanten geruststelt dat bezoekers die alinea nog steeds op hun geschiedenis verderop in de pagina zullen zien.
Zonder tekenen dat mobiel browsen vertraagt, kan ook een argument worden aangevoerd voor het ontwerpen van een tweede 'vouwlijn' voor diegenen die browsen met een portretgericht apparaat. Het mag op geen enkele manier nadelig zijn voor uw ontwerp en alleen degenen die dergelijke apparaten gebruiken een extra bonus geven.
Wat denken jullie? Probeer je nog steeds voor de vouw te ontwerpen? Is het een geval dat wij ontwerpers al op de hoogte zijn van dergelijke veranderingen en of dit de klanten zijn die we moeten opleiden?
Accentsconagua