Webben som medium Sus Lundgren

Webb: Fördelar Lätt & snabb publicering Information lättillgänglig & föränderlig Dynamiskt medium Inga begränsningar avseende Sidantal Färger Bilder Hypermedia tillåter korsreferenser etc  Har man jobbat med tryck är allt detta en lättnad!!!

Webb: Nackdelar Ingen kontroll över läsordning – svårt att skapa en helhet Hypermedia Spaghetti! Länkar till och från andra webbplatser Informationsröta Trovärdighet Olika utseende för olika användare Begräsningar i form av Bandbredd Webbläsarinställningar

Webb: Utmaningar! Hur anpassar man designen till olika inställningar? Upplösning Skärmstorlek Fönsterstorlek Vilka minimikrav kan man ställa? Insticksprogram (Flash, PDF-läsare, Java-stöd etc...) Webbläsare & operativsystem Bandbredd – vad är ”maxväntetid”

Webb: Utmaningar! Vilken är målgruppen/-grupperna? Hur skall man ”fånga” besökarna Unikt innehåll Unika tjänster Hur skiljer man sig från liknande webbplatser?

Webb: Designfrågor Webbdesignerns viktigaste fråga: Vad vill jag ha sagt och till vem? En webbplats kan/bör innehålla Information Tjänster Underhållning Innehållet måste anpassas efter målgruppen och i viss mån avsändaren Glöm inte att anpassa språket! Utseendet måste anpassas efter innehållet, målgruppen och avsändaren Det måste vara konsekvent och ge en tydlig ”look & feel”

Webbdesign: Tänk på! Fokusera på målgruppen Personas/intervjuer/fördomar (bättre än att utgå från sig själv?) Om det finns flera målgrupper skall de rangordnas! Navigationsstrukturen skall vara Tydlig/begriplig Konsekvent Ett nyckelord för god webbdesign är konsekvens I navigation och funktionalitet I utseende I språk

Informationsdesign Hur skall informationen struktureras? Hur återspegla innehåll och budskap? Vilken uppdelning är mest logisk och mest lättnavigerad? Grund och bred eller smal och djup struktur? Vana ”surfare” föredrar breda men grunda strukturer med många förstahandsval Ovana ”surfare” vill ha djupa steg-för-steg-strukturer Hur mycket ”hopp” mellan grenarna skall tillåtas?

Men hur gör man? Bestäm vilka sidor som skall finnas och vad de skall innehålla Bestäm utifrån detta hur strukturen på webbplatsen skall se ut Bestäm utifrån detta hur navigationen skall se ut och fungera

Men hur gör man? Skapa innehåll, och/eller webbanpassa befintligt material Gör några utkast till grafisk design Tänk på uttryck och kontinuitet! Finns det olika typer av sidor (ex. ”vanliga sidor och sidor som beskriver projekt) som kräver olika layout? Vilken tabellstruktur har de? Skapa en mallsida och idiotkolla att allt stämmer på den Skapa nya sidor utifrån mallsidan Fyll dem med innehållet Testa att alla länkar etc fungerar

Navigation Skall återspegla informationsdesignen Skall vara konsekvent Ska indikera systemstatus: var är jag? Kan göras på flera sätt Breadcrumbs, ex ”Produkter – böcker – thrillers” Överskrifter Grafiskt: Ikoner / Färger

Navigation i praktiken Gruppera element mha Närhet Likhet i form eller färg Jämn fortsättning (rader el kolumner) Vi kan hålla 5 – 7 ”informationsbitar” i minnet MEN... Vi kan känna igen fler val Flera bitar kan ”chunkas” till en (ex 2,8,4,7,7,3 kan slås ihop till 28, 47, 73) Glöm inte att testa! Exempel...

Utseende Färgval Illustrationer Glöm inte ”luft”; vita ytor Hellre för få färger än för många Om färgkodning bär navigationen måste man färgblindstesta Illustrationer Försök använda en typ av bilder; foton (svartvita?!) eller teckningar eller akvareller eller...! Glöm inte ”luft”; vita ytor Det är vanligt att man skapar webbdesignen i något ritprogram innan man ger sig på att HTML-koda den

Bilder En bilds storlek (i kb) beror av ”Fysisk” storlek Upplösning Antal färger Det är ”gratis” m.a.p. nedladdningstid att använda samma bild om och om igen på olika sidor. Webben stödjer tre filformat GIF: lämpligt för bilder med få färger och skarpa linjer, ex loggor. Stödjer transparens. JPEG: lämpligt för foton. Förstörande. PNG: ”mittemellan”. Stödjer transparens.

Text Grundläggande typografi för webb skiljer sig från den för tryck Tänk på att typsnitt blir olika stora beroende på webbläsare och operativsystem! Linjära typsnitt är att föredra Seriftypsnitt fungerar bara i stora storlekar Lugna, helst enfärgade bakgrunder som kontrasterar lagom mycket mot texten Länkar i en annan färg än brödtextens Blå är ”standard” länkfärg

Text i praktiken Texter bör generellt sett vara kortare på webben än i tryckta media Mindre tålamod hos läsaren Svårare att läsa på skärm Långa dokument i flera versioner Utskriftsversion Ankarlänkad innehållsförteckning Uppdelat på flera sidor

Tabeller Tabeller är det osynliga layoutverktyget Används för att… Skapa luft Positionera saker i förhållande till varandra Skapa spalter Man har ofta tabeller i tabeller De består av ett visst antal rader och kolumner En kolumn kan fårs att spänna över en eller flera rader och vice versa 

Gott & Blandat Håll koll på sidans storlek i kb Glöm inte att ge sidor titelrubriker Ange nyckelord som metainformation Underlättar för sökmaskiner Kontaktinformation skall alltid finnas lättillgänglig Namnge bilder Underlättar för blinda användare Extra viktigt om navigationen utgörs av bilder Ramar (”frames”/delfönster) eller inte? Lättare att underhålla Svårare att bokmärka

Webb: Funktionalitet Extranät, intranät och forum skiljer sig från ”vanliga” webbplatser genom att erbjuda mer funktionalitet De har ofta en annan typ av innehåll Nedladdningsbara dokument, filer etc Kan oftast läggas till av alla användare Flergångsanvändare mycket vanligare Det kan vara ok att lägga in komplex funktionalitet som är nyttig men tar tid att lära sig Ofta rättighetssystem Ofta olika målgrupper Ex säljare/ekonomer/administratörer etc

Webb: Funktionalitet Ofta vill man på något vis koppla en eller flera databaser till ett webbgränssnitt E-handel Publiceringssystem Användarrättigheter Dessvärre lämpar sig webben inte så väl för komplexa användargränssnitt där mycket information skall matas in Svårt att få exakt kontroll över layout Svårt vid omladdning av sidan Inga avdelare i dropdown-menyer Mycket begränsad mängd ”färdiga” objekt som kan användas

Webb: Programmering Funktionalitet medför programmering Java, PHP, VBScript, Python, Perl...! HTML-mallar för olika typer av info/sidor Mellanlager med kod som hämtar informationen och presenterar den Kräver insikt i hur de bakomliggande systemen fungerar Hur kommunicera med databasen? På vilket sätt skickas och bokförs exempelvis en order?

Bra-ha-länkar Basics i HTML Dreamweaver http://www.htmlgoodies.com/primers/ basics.html Dreamweaver Macromedias egen tutorial: http://www.macromedia.com/software/ dreamweaver/productinfo/tutorials/gettingstarted/

Bra-ha-länkar Om webbdesign Usability Web Page Design for Designers (i synnerhet högerspalten): http://www.wpdfd.com/index.htm Vincent Flanders’ avskräckande exempel: http://www.webpagesthatsuck.com Usability Jakob Nielsen: http://www.useit.com/ Usable Web, länksamling: http://usableweb.com/