behövs för enhetlighet, tala samma språk, så att användaren kan lära sig och använda det vidare.

Transkript

1 1

2 2

3 3

4 Grafisk profil reglerar grunddragen i utseendet (logga, färger, typsnitt) en helhet skapas Vi ska känna igen oss, vi ska förstå vad som avsändaren vill kommunicera. Kan vara svårt att direkt applicera på webben som också handlar om hur lätt det är att hitt och använda det man hittar. Webbprofil: Grafisk design hur den ser ut Informationsdesign hur man hittar Interaktionsdesign hur man använder behövs för enhetlighet, tala samma språk, så att användaren kan lära sig och använda det vidare. 4

5 Hjälp ögat på webbsidan: skapa en visuell hierarki (gå från det viktiga till det mindra viktiga) hålla samman det som hör ihop & hålla isär från annat. (luft och linjer hjälper att hålla ihop och hålla isär) var konsekvent (upprepa färger hos liknande text, samma placering på exempelvis menyer från sida till sida) En psykologisk modell för HUR vi uppfattar vår omgivning. Användas för att analysera eller bygga en webbsida. Närhet Det som befinner sig nära varandra hör ihop (exempelvis grupperas information efter ämnesområde) Meny Område Det som är inhägnat hör ihop (exempelvis ramar och tabeller) Likhet Det som liknar varandra hör ihop (bakgrund, teckensnitt, färger mm) Orientering Ögat föredrar horisontella och vertikala linjer Stängd figur objekt i var sitt hörn kan tolkas som en enhet (ex hörnsoffa och soffbord!) Ögat vill skapa mönster även där sådant inte finns. Enkelhet Less is more konfliktsituation med antalet länkar! Lite på sidan men samtidigt få klick för infostrukturen Storlek och symmetri litet objekt på stort > ligger ovanpå ; symetriskt objekt på asymmetriskt > symetriskt ligger ovanpå 5

6 Sidans delar placera dem där användaren brukar leta efter dem De flesta webbplatser följer detta, kan vara värt att bryta mot dem för att skilja ut sig: *logotyp överst till vänster *rubrik framträdande element som berättar vad det handlar om, syfte *global meny navigation till webbens huvudavdelningar horisontellt nära sidans övre kant *huvudmeny överst i spalt till vänster, ibland höger *språkmeny sidans överkant *synlig sökväg ovanför huvudinnehållet *kontaktuppgifter underkant/vänsterspalt under huvudmeny tunnlar rensade så att användaren ej ska bli störd formulär 6

7 7

8 Webben domineras av text: Balans mellan så stor att den är bekväm att läsa och så liten att man har överblick överlåt till användaren Mått: px (pixlar), (relativa mått:) em, % (pt; punkter för utskrift) Olika varianter av sidan (stort och liten) i px (pixlar) användaren väljer med knappar. Rekommendation: Största storleken motsvara 24 pixlar. 8

9 Typsnitt: välj läsbart typsnitt inte göra något alls flera färdiga alternativ Styra typsnitt med formatmall, bör finnas installerat i alla datorer, Användaren kan själv välja typsnitt i webbläsaren, dålig lösning för majoriteten (times) 9

10 Styra typsnitt med formatmall, bör finnas installerat i alla datorer, verdana, georgia speciellt utvecklade för skärmen Kan vara svårt att följa grafiska profilen Times New Roman är framtaget för tryck, smala tecken innebär god läsbarhet och kompakt text (förr var tidningspapperet och trycksvärta dyrt). Ej optimalt för skärmen, men default samtliga MS produkter så även webbläsaren som är avsedd för skärmen. Andra typsnitt för brödtext/löptext: Tahoma, Trebuchet MS, Arial 10

11 Centreringar sänker läsbarheten! Spaltbredd: 8 9 ord ; vi läser ordbilder Bredare spalter öka radmellanrum i css ex: p with:25 em radbredd ändras m. teckenstorlek. Storlek fast i exempelvis pixlar (px). Dynamisk storlek i %, användaren bestämmer storlek i webbläsaren. Tabeller måste ha minst en kolumn flytande. 11

12 12

13 BILDFORMAT Liggande upplevs välkommnande Stående upplevs som trångt och ogeneröst, vanligt på webben pga spalter Kvadratiska statisk och ospännande, har luckrats upp pga CD formatet. Passar på assymetriska sidor. Bilder stämningsspridare mänsklig anknytning (porträtt) introduktion vi tolkar bilder snabbt, bra indragare till texten igenkänning skiljer ut istället för bara text förklaring Bildtext Ange bildskaparen 13

14 14

15 15

16 Sju modeller att strukturera data, består alltid av en av eller kombination av flera av dessa modeller! Linjär Exempelvis denna PPT presentation, bild 1, bild 2 osv (kan ha hopp till första sidan via loggan) Hierarkisk Vanligast! Typ släktträd, smart att ange sökväg Index > Om företaget > Om företagets grundare Parallell Ovanligt (om man bortser från Popups i reklamsammanhang), öppna flera webbläsare på en gång (Ex produktjämförelser) Zoom Exempelvis löpsedelsuppbyggda sidor med ingresser hos Aftonbladet! Nätverk Länkar utan struktur (Exempelvis Internet), svårt att göra detta bra. Varje länk bör skapas med omsorg! 16

17 17

18 Exemple ppå flera manyer: *global meny navigation till webbens huvudavdelningar horisontellt nära sidans övre kant *huvudmeny överst i spalt till vänster, ibland höger 18

19 19

20 Skärmstorlek Idealt göra webbsidor som anpassar sig till fönstrets storlek Målgruppen? Tänk på att det försvinner en del av hälden 600 pixlar syns av (1024*768) Lägg det viktiga överst så det syns utan att behöva skrolla. Se statistik. 20

21 21

22 22

23 23