Webben som medium Sus Lundgren.

En presentation över ämnet: "Webben som medium Sus Lundgren."— Presentationens avskrift:

1 Webben som medium Sus Lundgren

2 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!!!

3 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

4 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”

5 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?

6 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”

7 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

8 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?

9 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

10 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

11 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

12 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...

13 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

14 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.

15 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

16 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

17 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 

18

19

20 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

21 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

22 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

23 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?

24 Bra-ha-länkar Basics i HTML Dreamweaver
basics.html Dreamweaver Macromedias egen tutorial: dreamweaver/productinfo/tutorials/gettingstarted/

25 Bra-ha-länkar Om webbdesign Usability
Web Page Design for Designers (i synnerhet högerspalten): Vincent Flanders’ avskräckande exempel: Usability Jakob Nielsen: Usable Web, länksamling: