Informationsarkitektur

Dette er 8. uges opgave på kurset i brugervenlighed og grafisk design på Akademiuddannelsen i IT.

Udvikl informationsarkitektur samt en wireframe til en online kogebog

Nedbrydning af informationshierarkiet

Det centrale dokument i denne løsning er opskriften. Den befinder sig altid nederst i navigationshierarkiet. Alt andet er navigation og handler om, hvordan man finder frem til opskriften. Mængden af hierarkisk ordnede, statiske sider er lille og begrænser sig til "kontakt" og “om os”.

Der er således brug for kategorier, alternative indgange såsom emneord og ingrediens-lister samt et alfabetisk register med opmærksomhed på synonymer. Søgefunktionalitet er også centralt. Jeg har prøvet at analysere mig frem til hvilke typer information, en opskrift består af, samt hvordan man finder frem til den:

Hvad indeholder en opskrift?

  • Tidsangivelse
  • Antal personer
  • Ingredienser, klikbare
  • Fremgangsmåde
  • Popularitet (stjerne-ratings)
  • Navigation: Hvor hører opskriften til?
    • Emneord
    • Kategorier

Hvor finder man en opskrift?

  • Søgeresultat
  • Emneord
  • Kategorier
  • Tidsangivelser
  • Ingredienser
  • Alfabetisk opslag
  • Forsiden

Sitemap

Jeg er kommet frem til følgende struktur:

Informationsarkitektur til en kogebog
Som det fremgår, er der mange måder at nå frem til en opskrift. Det er nødvendigt, fordi brugerne af denne type website kan komme med mange forskellige mentale indgangsvinkler. Det kan være tidsangivelser (skal det gå stærkt?), ingredienser (hvad har jeg i køleskabet?), kategorier (højtider, hverdagsmad mv.) eller søgning.

Wireframe

Jeg er nået frem til at en wireframe til forsiden kan se således ud:

Wireframe forside kogebog

Denne artikel er seneste opdateret 3 oktober 2024

Morten Brunbjerg Bech

Frontend webudvikler, designer, fritids-illustrator, bibliotekar og far til to.

Arbejder med udvikling, design og web-grafik hos TV MIDTVEST. Særligt interesseret i stramt struktureret og effektivt informationsdesign, der gør budskaber lette at forstå, serveret i en grafisk brugergrænseflade, der er nem at bruge.

Tools of the trade: Statamic, VueJS, Nuxt, Tailwind, HTML, CSS, SCSS, JavaScript, Photoshop, Illustrator, Adobe XD, etc.