Share
Het is waarschijnlijk het minst glamoureuze deel van webdesign, maar informatieontwerp is zeker niet het minst belangrijk. Het lokaliseren en consumeren van informatie is de ultieme webtaak, die het kopen, spelen en communiceren verre overtreft, die allemaal zelf een groot deel van het informatieontwerp bevatten. Hoe gebruikers vinden en dan gebruik maken van al die informatie wordt beïnvloed door hoe het is gestructureerd en gepresenteerd. Dus moet elke webontwerper uitgerust zijn om gekwalificeerde en geïnformeerde beslissingen te nemen over hoe dit te doen.
Informatieontwerp is een probleem dat steeds complexer wordt naarmate de website groter is. Maar zelfs een kleine website zal baat hebben bij een methodisch, stapsgewijs proces om uit te zoeken hoe de inhoud van de site wordt besteld en georganiseerd. Hier zijn enkele eenvoudige stappen die u mogelijk wilt nemen:
Dus voor een eenvoudig restaurantvoorbeeld zou je kunnen vinden dat je tekst hebt voor pagina's 1 tot en met 20, je weet dat gebruikers een bepaalde taak proberen uit te voeren, zoals het maken van een reservering. Je kunt ook zien dat de doelen van een gebruiker op de site zijn om uit te zoeken wat het restaurant serveert, waar het zich bevindt en of er tafels zijn en dan hopelijk een reservering maken. Tot slot kunnen de doelen van de klant zijn om de gebruiker te dienen, maar ook om ze te pushen naar een reeks specials die ze uitvoeren.
Zelfs met een eenvoudig voorbeeld, zoals onze restaurantsite, zijn er vele manieren om de informatie op te stellen. U kunt bijvoorbeeld specials meteen op de startpagina pushen, of u kunt ze in het reserveringsproces vastbinden, of u kunt ze in de menu's verwerken. Op dezelfde manier kunt u merken dat u, gegeven de doelstellingen van een klant, een andere prioriteit hebt op de pagina-inhoud. Misschien vertelt de klant je dat niemand dit restaurant ooit kan vinden, dus je moet een pagina Hoe te krijgen om hier te maken een hoge prioriteit geven.
Ontwikkel een sitemap of plan van hoe de informatie site op een erfelijke manier zal worden. Hoewel sitemaps meestal slechts een reeks vakken zijn die verwijzen naar pagina's, kunt u allerlei extra informatie gebruiken om uit te leggen hoe de site wordt opgezet, zoals zaken als snelkoppelingen van de startpagina, hoe verschillende secties samen kunnen komen en paden die een gebruiker via een sitemap kan nemen.
Sites met een redelijke mate van complexiteit kunnen worden herschikt en gereorganiseerd veel verschillende manieren. Een site die ik talloze keren heb beziggehouden met organiseren en reorganiseren is FlashDen. Ik ben de tel kwijt van het aantal keren dat ik naar dat menu heb gekeken en het opnieuw heb ingedeeld. In sommige gevallen verplaatsen we pagina's in verschillende sets en groepen, zodat ze logischer lijken, en in andere hebben we meer out-of-the-box denken geïntroduceerd.
Een paar maanden geleden werd het menu bijvoorbeeld te ingewikkeld, dus hebben we een hele hoop meer 'donzige' menu-items verwijderd en een blog gemaakt waarin nu wedstrijden, nieuwsbrieven, subsite-links en andere pagina's staan die het menu volproppen.
Onlangs hebben we ontdekt dat we veel van wat ik 'achterblijvers' noem - dat zijn pagina's zonder huis in het menu. Vanuit het oogpunt van informatieontwerp zijn achterblijvers verschrikkelijk - zelfs ik kan me niet herinneren hoe ik bij sommige van hen terecht kan komen! De oplossing is deze keer om een wiki-systeem te bouwen, content van topniveau naar het menu achter de schermen te pipen en vervolgens de wiki te gebruiken om dieperliggende informatie te huisvesten met zijn eigen zoek-, tagging- en categorisatiefaciliteiten..
Het punt van mijn ervaringen met FlashDen is dat het organiseren van informatie niet eens hoeft te gaan over het plaatsen van menu's en submenu's. Misschien vindt u dat bepaalde informatie niet op een site moet staan, of dat er een subsite voor nodig is, of dat u iets anders helemaal moet doen. Met FlashDen heb ik het voordeel dat het nu bijna 3 jaar geleden is dat ik naar de inhoud keek en dat ik tot op de dag van vandaag nieuwe arrangementen en oplossingen vind.
Om een effectieve informatieontwerper te zijn en om de meest optimale oplossingen te vinden, moet je vaak out of the box denken. Natuurlijk is 'denken buiten de gebaande paden' veel gemakkelijker te zeggen dan te doen! Soms zijn we beperkt in een doos die we niet eens kunnen zien. Enige tijd geleden hoorde ik een experiment waarbij een stel springbeestjes in een glazen doos werden geplaatst en in de loop van de tijd leerden om alleen zo hoog te springen. Toen het glazen deksel werd verwijderd, bleven de beestjes hetzelfde springen, beperkte hoogte, zelfs niet beseffend dat ze het zouden kunnen als ze eruit wilden.
Dus hoe overwin je een doos die je niet kunt zien? Eenvoudig! Met de hulp van anderen die niet beperkt zijn door dezelfde problemen die je hebt. Voor complexe informatieontwerpen zal ik vaak andere mensen om organisatorische ideeën vragen die hen alleen het ruwe probleem geven en niet mijn eigen permutaties. De ideeën van een programmeur of de mening van een gebruiker laten horen, zullen je vaak verrassen, omdat hun perspectieven compleet anders zijn dan die van jezelf en niet gehinderd door dezelfde set denkwijzen..
Wanneer je grote reeksen informatie organiseert, is een voor de hand liggende vraag die altijd rijst hoe diep of hoe breed je navigatie moet zijn. Diepte verwijst naar het aantal lagen van categorieën en subcategorieën dat er zijn, terwijl breedte betrekking heeft op hoeveel van elk niveau er zijn. De kunst is om de balans te vinden. Als er teveel items op één niveau zijn - vooral op het hoogste niveau - loop je het risico de gebruiker te verwarren. Aan de andere kant, als een gebruiker op veel niveaus moet klikken, loop je het risico ze kwijt te raken.
Een goede vuistregel is om het aantal opties op een bepaald niveau op 4 - 8 te houden. Als u 8 items op het hoogste niveau hebt, elk met 8 subcategorieën en elk met 8 sub-subcategorieën, heeft u voldoende ruimte voor een 512 pagina's tellende site. Natuurlijk komen zaken zelden zo goed overeen. Dus nogmaals, je moet oppassen dat je geen zware kant en een lichte kant hebt. Bijvoorbeeld, op een site met een paar honderd pagina's, als u ze plaatst contact ergens op het hoogste niveau, is de kans groot dat het geen 8 subcategorieën met 8 sub-subcategorieën heeft. Het is waarschijnlijker dat contact wordt een vrij eenvoudig onderdeel - zelfs voor een complexe site.
Aan de andere kant als je zoiets niet doet contact op het hoogste niveau kunt u een meer evenwichtige hoeveelheid informatie krijgen, maar u loopt het risico dat u geen belangrijke gebruikerstaak hebt voltooid omdat het moeilijk zal zijn om uit te zoeken hoe u de contactinformatie kunt vinden. Een eenvoudige oplossing voor dit specifieke probleem kan het toevoegen van 'snelkoppelingen' zijn, waarbij u een gebruiker een paar opties op de startpagina geeft om dieper in de structuur te duiken zonder op de gebruikelijke manier te navigeren..
Ik weet niets over u, maar het komt maar zelden voor dat ik ooit een webpagina volledig lees. Of het nu om het lezen van instructies, algemene voorwaarden of gewoon een gewone kopie is, meestal skim, scan en spring ik. Ervan uitgaande dat ik niet de enige ben die dit doet, is het zinvol om pagina's te ontwerpen om deze manier van consumeren van informatie te vergemakkelijken.
Wikkel geen belangrijke informatie in bundels tekst - markeer het. Geef eindgebruikers geen alinea's - verbreek ze met koppen, subkoppen, opsommingstekens, diagrammen, wat er ook voor nodig is! Bedenk hoe een gebruiker uw site gaat gebruiken en ontwerp deze om het gebruik ervan te vergemakkelijken.
Een goed voorbeeld van ontwerpen voor gebruikersgebruik is op onze zustersite NETTUTS, een site die, zoals de meesten van jullie weten, zelfstudies publiceert over onderwerpen voor webontwikkeling. Nu op NETTUTS merkten we al vroeg dat de meeste mensen, bij het eerste bekijken van een tutorial tot het einde doorgaan, waar ze een link naar een demo en / of broncode proberen te vinden, zodat ze kunnen beslissen of de tutorial het lezen waard is in de eerste plaats. Toen we ons dit eenmaal realiseerden, was het eenvoudig om speciale demo- en bronknoppen toe te voegen en deze consistent boven aan de tutorials te plaatsen. Deze eenvoudige aanpassing om ons ontwerp te matchen met gebruikersconsumptiepatronen heeft ons een lot van blije feedback.
Ik weet niet zeker of ik alleen maar ouder word, of als ik al mijn tijd voor een scherm breng, maakt me gewoon kieskeurig, maar de laatste tijd irriteert het me echt als ik een tekst krijg die me niet dwingt Lees het. Het doel van een site-ontwerp is meestal om informatie te verzenden en het grootste deel daarvan is geschreven tekst, dus de nadruk leggen op het goed weergeven zou een prioriteit moeten zijn.
Het gebruik van te kleine lettergroottes, een laag contrast tussen tekst en achtergrondkleur, of slecht met lichte tekst op een donkere achtergrond, zijn allemaal ontwerpzonden waar we allemaal schuldig aan waren (ik heb er vaak een bij)! er zijn andere manieren waarop uw ontwerp de bezoeker daadwerkelijk kan laten lezen. Streef ernaar zo te ontwerpen dat uw lay-out bezoekers op de kopie concentreert en deze naar voren brengt met titels, subkoppen, afbakeningen, pullquotes en andere technieken om de aandacht te trekken.
Eerder noemde ik gebruikerspaden - dat is ingesteld manieren waarop gebruikers de neiging hebben om een website te doorkruisen. Veel van deze zullen eenvoudigweg gebeuren door de manier waarop mensen zich gedragen, maar met planning kun je kiezen hoe een gebruiker wordt geleid door een enkele pagina en over meerdere pagina's. Zodra u specifieke paden kent, kunt u werken in visuele handleidingen en koppelingen om ze op dat pad te helpen.
Bijvoorbeeld op FlashDen, wanneer een nieuwe gebruiker arriveert, is het ons doel om ze te laten registreren, bestanden te zoeken, geld te storten en vervolgens die bestanden te kopen. Daarom geven we ze eerst een samenvatting van het proces in vier stappen op de startpagina. Bij elke stop zijn er aanwijzingen om de gebruiker naar de volgende stap te leiden. In ons volgende herontwerp hoop ik dit pad nog duidelijker te maken, omdat het essentieel is dat de site naar behoren werkt. Merk op dat het pad dat ik beschrijf niet 4 pagina's is, maar 4 taken. Het vinden van bestanden kan bijvoorbeeld inhouden dat de gebruiker tientallen pagina's bekijkt, maar het is een afzonderlijke taak. Gebruikerspaden hoeven niet via ingestelde pagina's te zijn, ze kunnen net zo goed ingestelde taken omvatten!
Het moet vanzelfsprekend dat eenvoudig is beter voor gebruikers dan gecompliceerd. Desalniettemin is het maar al te gemakkelijk om ontwerpen te ingewikkeld te maken. Ik weet dat ik de dingen vaak gecompliceerder laat lijken, zodat ik meer visuele elementen op een pagina heb om mee te werken (slechte Collis, slechte Collis!) Een andere overcomplicatiezonde is het gebruik van onnodige woorden op knoppen en oproepen tot actie. Steven Krug in zijn uitstekende boek Do not Make Me Think
geeft het voorbeeld van een hypothetische vacaturesite met een knop die luidt:
Een daarvan is duidelijk, de ene is redelijk voor de hand liggend, en de andere is - nou wie weet.
Als ontwerpers weten we meer dan de meeste mensen de waarde van een goed beeld. En er zijn genoeg mogelijkheden om een aantal gegevens, concepten of informatie te diagrammen of te visualiseren. Dit artikel, zoals u zich zult herinneren, begint met een zeer eenvoudig schema van hoe interfaceontwerp, informatieontwerp en esthetisch ontwerp met elkaar in verband staan. Deze beelden verbrokkelen niet alleen tekst, maar ze zijn ook meer gedenkwaardig en geven je de kans om een pagina tot leven te brengen.
DoshDosh heeft een interessant artikel over informatievisualisatie, diagrammen en wat de auteur infographics noemt die de moeite van het bekijken waard is, ook al is het alleen om de briljante grafische voorbeelden te zien.
Informatieontwerp is een van die dingen die moeilijk te krijgen is bij de eerste poging. Dus als je eenmaal een site hebt gebouwd, zou je deze moeten analyseren om te zien hoe mensen de informatie gebruiken en verwerken, hoe ze zich gedragen en waar je je ontwerp kunt verbeteren..
Een handige tool in dit opzicht is Google Analytics. Waar ik eerder gebruikerspaden eerder noemde, kunt u met Analytics paden bijhouden door pagina's met behulp van de functie Doelen. U stelt een reeks pagina's in en Analytics rapporteert de%'s bezoekers die doorkomen (en bij uitbreiding klikken) op elk punt.
Een andere analytische functie die u kunt gebruiken, is het bijhouden van zoektermen, waarmee u kunt zien waarnaar gebruikers op zoek zijn in het zoekveld van uw eigen site. Als u weet waar mensen naar op zoek zijn, weet u welke informatie sneller beschikbaar moet zijn!
Dit bericht is dag 3 van onze webdesignsessie. Sessiedag 2 sessie dag 4 van Creative Sessions
Accentsconagua