Att bygga ”Framtidens goda stad” (Arnold Vonkavaara, Trafikverket)
Att bygga en vettig webbstruktur
-
Upload
lilian-johansson -
Category
Technology
-
view
699 -
download
10
description
Transcript of Att bygga en vettig webbstruktur
![Page 1: Att bygga en vettig webbstruktur](https://reader035.fdocuments.net/reader035/viewer/2022062313/557d61e0d8b42abf3d8b521f/html5/thumbnails/1.jpg)
ATT
BYGGA E
N VETT
IG
WEBBSTR
UKTUR
LILIA
N JOHANSSON
![Page 7: Att bygga en vettig webbstruktur](https://reader035.fdocuments.net/reader035/viewer/2022062313/557d61e0d8b42abf3d8b521f/html5/thumbnails/7.jpg)
FORM & FÄRG
• Formens funktion
• Lyfta informationen•Hålla samman
•Undvik dekorationer• Var relevant
23-04-1
![Page 8: Att bygga en vettig webbstruktur](https://reader035.fdocuments.net/reader035/viewer/2022062313/557d61e0d8b42abf3d8b521f/html5/thumbnails/8.jpg)
BILDER
23-04-1
• Stämningsspridare
• Mänsklig anknytning
• Introduktion
• Igenkänning
• Förklaring
![Page 9: Att bygga en vettig webbstruktur](https://reader035.fdocuments.net/reader035/viewer/2022062313/557d61e0d8b42abf3d8b521f/html5/thumbnails/9.jpg)
EN BILD SÄGER MER ÄN TUSEN ORD…
23-04-1
• Bildtexter
• Upphovsrätt
• Ange ”källan”
• Alt-text
<Alt=”Katt av rasen ragdoll”/>
![Page 10: Att bygga en vettig webbstruktur](https://reader035.fdocuments.net/reader035/viewer/2022062313/557d61e0d8b42abf3d8b521f/html5/thumbnails/10.jpg)
TYPOGRAFI
• Läsbara typsnitt
• Dispositioner
• Använd rubriker/underrubriker
• Punktlistor/Nummerlistor
• Kontrastfärger
23-04-1
![Page 13: Att bygga en vettig webbstruktur](https://reader035.fdocuments.net/reader035/viewer/2022062313/557d61e0d8b42abf3d8b521f/html5/thumbnails/13.jpg)
TÄNK PÅ…
• Att inte starta direkt
• Möjlighet att stoppa
• Ge information
• Gratis läsprogram
23-04-1
![Page 17: Att bygga en vettig webbstruktur](https://reader035.fdocuments.net/reader035/viewer/2022062313/557d61e0d8b42abf3d8b521f/html5/thumbnails/17.jpg)
STRUKTUR - NAVIGERING
• Bunta ihop och döpa
• Konsekvens
• Textbaserat
• Tydliggör navigationsnivåerna
23-04-1
![Page 18: Att bygga en vettig webbstruktur](https://reader035.fdocuments.net/reader035/viewer/2022062313/557d61e0d8b42abf3d8b521f/html5/thumbnails/18.jpg)
STRUKTUR – STÖD FÖR NAVIGERING
• Avvikande färg
• ”Breadcrumbs” - StartFotoSommar2011
• Webbkarta
• A-Ö
• FAQ
• Sökfunktion
23-04-1
![Page 19: Att bygga en vettig webbstruktur](https://reader035.fdocuments.net/reader035/viewer/2022062313/557d61e0d8b42abf3d8b521f/html5/thumbnails/19.jpg)
STRUKTUR - LÄNKAR
• Självförklarande – ”Läs mer…”
• Understruken
• Färg
• Ankartext
• Dokumentlänkar
23-04-1
![Page 21: Att bygga en vettig webbstruktur](https://reader035.fdocuments.net/reader035/viewer/2022062313/557d61e0d8b42abf3d8b521f/html5/thumbnails/21.jpg)
INTERAKTION
• Formulär
• Knappar
• E-handel
• Skicka e-post
• Chatta
• Söka
23-04-1
![Page 24: Att bygga en vettig webbstruktur](https://reader035.fdocuments.net/reader035/viewer/2022062313/557d61e0d8b42abf3d8b521f/html5/thumbnails/24.jpg)
TÄNK OCKSÅ PÅ…
Webstandarder - Validering
World Wide Webb Consortium - www.w3c.org
23-04-1
![Page 25: Att bygga en vettig webbstruktur](https://reader035.fdocuments.net/reader035/viewer/2022062313/557d61e0d8b42abf3d8b521f/html5/thumbnails/25.jpg)
FÖRTROENDE & TILLGÄNGLIGHET
• Kvalité
• Tydlig avsändare
• Aktuell
• Design för ALLA?
23-04-1
![Page 27: Att bygga en vettig webbstruktur](https://reader035.fdocuments.net/reader035/viewer/2022062313/557d61e0d8b42abf3d8b521f/html5/thumbnails/27.jpg)
SLUTSATS
• Användaren i fokus!
• Tänk struktur!
• Färg & form ska lyfta informationen!
• Använd papper och penna!
• Fungerande gränssnitt A och O!
• Se över säkerheten!
23-04-1
![Page 28: Att bygga en vettig webbstruktur](https://reader035.fdocuments.net/reader035/viewer/2022062313/557d61e0d8b42abf3d8b521f/html5/thumbnails/28.jpg)
EXEMPEL PÅ DÅLIG WEBBDESIGN
• art.yale.edu
• www.siphawaii.com
• www.bearflagwine.com
• www.joneschijoff.com/JCV1.0/
• www.maisonmartinmargiela.com
• www.gotmilk.com
• www.hboemtb.com
23-04-1
![Page 29: Att bygga en vettig webbstruktur](https://reader035.fdocuments.net/reader035/viewer/2022062313/557d61e0d8b42abf3d8b521f/html5/thumbnails/29.jpg)
GODA EXEMPEL
• www.kostaboda.com/se/hem.html
• www.audiomostly.com
• www.umea.se/kommun
23-04-1
![Page 30: Att bygga en vettig webbstruktur](https://reader035.fdocuments.net/reader035/viewer/2022062313/557d61e0d8b42abf3d8b521f/html5/thumbnails/30.jpg)
BRA OM ANVÄNDBARHET
24-timmarswebben - eutveckling.se
Funka Nu - www.funkanu.se
Jacob Nielsen’s Website - www.useit.com
Don Norman’s jnd website - www.jnd.org
Användbarhetsboken - Tommy Sundström
Designing Easy-to-use Websites – Vanessa Donnelly
23-04-1
![Page 31: Att bygga en vettig webbstruktur](https://reader035.fdocuments.net/reader035/viewer/2022062313/557d61e0d8b42abf3d8b521f/html5/thumbnails/31.jpg)
TACK!
Lilian Johansson
Twitter @LilianJohansson
cotjorven.wordpress.com
23-04-1