Nettsteds konseptualisering og informasjonsarkitektur (IA)

Jobber du på et nytt nettsted, en redesign, eller kanskje har du et komplett nettstedoverhalingsprosjekt med en forestående milepæl? Mange nye nettsteder blir bygget og eksisterende blir oppdatert og blir levende uten mye tanker om konsept, design eller hvordan informasjonen skal organiseres og få tilgang til. Dette innlegget vil få deg og teamet ditt på rett vei, hjelpe deg med å skjerpe visjonen og få informasjonsarkitekturen (IA) på sporet med interessentene.

La oss først se raskt på hva IA betyr. Definisjonen som den gjelder i dette tilfellet er kunsten og vitenskapen om å organisere og merke nettsteder, intranett, online fellesskap og programvare for å støtte funnevne og brukervennlighet . Det er også kombinasjonen av å organisere søke- og navigasjonssystemer på nettsteder og intranett.

Tips for å oppnå god IA

Velg et designmønster

IA-modeller er et verktøysett av grunnleggende mønstre som beskriver flere løsninger på vanlige IA-oppgaver. Du kan oppleve at ett eller flere av disse mønstrene naturlig kan gjelde for ditt spesifikke nettstedsprosjekt; noen fungerer som sokkeløsninger, eller kan gi et utgangspunkt eller snarvei til designprosessen. Flere modeller er kort beskrevet nedenfor:

  • Alt i én modell : Dette setter alt innholdet ditt på en enkelt hjemmeside. Denne tilnærmingen ser ut til å ta på seg noe trekkraft, spesielt med nettsteder som bruker Parallax-rulleeffekten.
  • Flat modell : Mønsteret som plasserer websider som rettpersoner fra den andre, hver side har navigasjon som lenker til den andre, og det er ingen undersider eller underordnede sider.
  • Indeksmodell : Et system der websider er oppført i et sett med indeksering, som ligner på en telefonbok eller ordbok, der data blir bestilt på en bestemt måte. Og eksempel på en indeksmodell vises i figur A nedenfor.
  • Streng hierarkimodell : En struktur der det kun er tilgang til undersider eller barnesider fra dens overordnede side. Et strengt foreldre-til-barn-forhold eksisterer for eksempel på fora, tavle-tråder og bloggkommentarer.
  • Flerdimensjonalt hierarkimodell : Denne modellen gir mange måter å få tilgang til og bla gjennom etter innhold. Flere hierarkier vil eksistere og overlapper hverandre slik at innholdet kan vises i forskjellige former avhengig av hvordan søket ble startet. Denne typen organisasjoner kan finnes på nettsteder som Amazon.com der søk kan organiseres etter emne, forfatter, emne, tittel, sjanger eller nøkkelord.

Figur A

Visuelle nettstedskart

Før du setter en finger på redigering av indekssiden på nettstedet ditt, bør du lage et visuelt nettstedskart med kjernestrukturen til innholdet nettstedet ditt vil gi.

  • PowerMapper tilbyr en prøveversjon på nettet som vil kartlegge opptil 10 sider av det eksisterende nettstedet ditt gratis. Den fullstendige versjonen har en 30-dagers prøveversjon, og en enkelt lisens er $ 149. Selv om PowerMapper bare fungerer for live-nettsteder, er det et godt utgangspunkt for eksisterende nettsteder som er under redesign. Eksemplet på det visuelle nettstedskartet i figur B nedenfor viser et typisk e-handelsnettsted med indekssiden, undersider og underordnede sider på hver underside.

Figur B

  • Et annet alternativ er å bruke Microsoft Visio eller til og med Excel for å lage et nettkart. Stephen Turbek har en kort tutorial, "The Lazy IA's Guide to Making Sitemaps, " hvor han inkluderer trinnvise instruksjoner om hvordan du lager sitemaps med Excel og Visio på Windows PC-er, og Word og Inspiration for Mac OS og Windows. Mens skjermbildet kan være litt utdatert, er teknikkene fremdeles nyttige i gjeldende applikasjoner.
  • Concept Sketches: Kanskje du får den fantastiske ideen til det store nettsteddesignprosjektet, og alt du har på deg er en blyant eller penn og et middagsserviett. Ikke noe problem, husk å tegne de viktigste punktene, og utvid og bygg videre på den første ideen når du kommer tilbake til kontoret eller den bærbare datamaskinen. Dokumenter alltid de tilfeldige tankene og ideene når de dukker opp i tankene dine; du kan glemme dem senere hvis du i det minste ikke legger ned noe for å jogge minnet senere. En rask skisseprøve fra serviettskonseptet vises i figur C. Eller, enda bedre, hvis du tilfeldigvis har en smarttelefon, kan du gjøre din iPhone eller Android om til en skisseblokk med My Sketch-appen eller Sketch Book Express-appen.

Figur C

  • Wireframe it: En av de mest underutnyttede teknikkene for planlegging og skissering av et nettsted, ved å lage en grunnleggende form for den typiske nettsidemalen og dens undersider, kan du starte prosjektet og hjelpe til med å kartlegge nettstedets struktur. Og sammen med wireframe, kan du lage flere mock-up-sider med samme malkontur og sette opp en prototype-plassering slik at teamet kan se det og sprette av ideer, avsløre potensielle feil eller feil tidlig i designen. Ulike alternativer for å lage wireframes inkluderer PhotoShop, Visio eller grafikkdesignprogramvare eller applikasjon. Denne opplæringen, "Grunnleggende: Design en nettsteds wireframe i Photoshop, " gir deg en trinnvis prosess med å lage et nettsted wireframe ved bruk av Photoshop. Figur D viser et eksempel på wireframe laget i den opplæringen.

Figur D

Hvilke IA-teknikker bruker du i organisasjonen din? Hvilke IA-metoder hjalp deg med å få nettstedet ditt til en gjennomtenkt struktur?

© Copyright 2021 | pepebotifarra.com