Vittert vetande om webbdesign

En presentation över ämnet: "Vittert vetande om webbdesign"— Presentationens avskrift:

1 Vittert vetande om webbdesign

2 Innehåll Förarbete Utformning Användaranpassning Färg Bild

3 Förarbete Etablerade användningsområden: Marknadsföring Broschyrer
E-handel Communities Kundvård En bra webbplats är alltid bra marknadsföring (gemensamt för alla!) Broschyrer: I tidernas begynnelse, statiska webbsidor, nu räcker det inte bara med detta! E-handel, de som lyckats bäst med E-handel är oftast de som sysslat med postorder sedan tidigare. Inte bara webben, logistik och varumärke (exempel första floristen som gick på knä jmf med Clas Ohlsson) Skulle du våga köpa av vem som helst på webben? Communities: allt från ”mossornas vänner” till Lunarstrorm Kundvård: IKEA, Försäkringskassan och Riksskatteverket, den som lyckas har nöjdare kunder och lyckas nog samtidigt kapa kostnader? Eller sälja mer! Eftersatt område som antagligen kommer att växa…

4 Nödvändig – Användbar – Vacker
Målsättning Nödvändig – Användbar – Vacker ”En webbplats ska vara så utformad att den får besökaren att tycka om den som äger sajten” Webbdesign Del 1, Clas Kristiansson Datormagazine Nr Nödvändig – Användbar – Vacker, alla behövs med prioriteringen bör ligga i denna ordning! Fyller den något syfte? Har den något vettigt innehåll? Går den att använda sig av? För krånglig? Är den estetiskt tilltalande?

5 Nödvändig Nödvändig för vem? Nödvändig för oss? Vem är besökaren?
Vad kan vi erbjuda denne? Nödvändig för oss? Vem riktar vi oss mot? Vem är den genomsnittlige användaren? Ex webbplatsen och kommentarerna från mina kursare, aktiehandlare med modem! Vad säljer vi för produkt, tjänst? Rätt produkt/tjänst gör att användaren återkommer. Vad får vi ut av detta? Kan vi tjäna pengar på detta? Kapar vi kostnader? Eller vill vi bli en ny Linus Torvalds?

6 Utbud - Information, produkter, tjänster Utformning
Användbar Utbud - Information, produkter, tjänster Utformning - Användbarhet, informationsstruktur Användaranpassning Utformning hör till form men är lite svår att helt koppla från innehållet… Fysik institutionen har så bra utbildningar att de inte behöver marknadsföra sig. Tror ni på detta? Fysik är så himla intressant och studenterna så drivna att det inte behövs någon större pedagogisk färdighet och det spelar inte så stor roll i vilken ordning föreläsningar och laborationer kommer. Tror ni på detta? Traditionella kurser med föreläsningar, laborationer och slutligen en tentamen är den helt optimala undervisningsformen. Den passar alla lika bra! Tror ni på detta? Mejerivaror: Goda mejeriprodukter är givetvis inte helt oviktigt, men är det allt? Kan inte skruvlocket vara till fördel? Och Gräddförpackningar om både 3dl och 5dl Är det inte roligt att det finns olika smaktillsatser till Yoghurt, naturell skulle väl vara rätt trist i längden?

7 Söker användaren upplevelser eller information?
Vacker Söker användaren upplevelser eller information? Vad är egentligen snyggt? Ex eller Tidigare har webbsidor gjort av sådana som mig… HTML-programmerare *smile* Ingenjörer är kända för att vara fyrkantiga (medieingenjörer undantaget?) Agda 80, vad tycker hon är snyggt? Det vet jag nog inte. Raggar Roger? Häftiga tatueringar och bilder på läckra… bilar Eller Emma 4 år? Allt bara det är rosa.

8 Utformning ”Gestaltningslagar för perceptionell organisation”
”De sju reglerna för informationsstrukturering” ”Grafisk kommunikation” Webbdesign Del 2, Clas Kristiansson Datormagazine Nr Gestaltningslagarna baserar sig på hur vi uppfattar vår omgivning, delmängder av information klumpas ihop och tolkas som gestalter Grafisk kommunikation är vad många sammanknippar med Webbdesign – men webbdesign är ju mycket mer!

9 Gestaltningslagar Närhet Område Likhet Orientering Stängda figurer
Gyllene snittet Optisk mittpunkt Enkelhet med flera… Närhet – Det som befinner sig nära varandra hör ihop (exempelvis grupperas information efter ämnesområde) 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!) Gyllene snittet – Återkommer om detta Optisk mittpunkt – Återkommer om detta Enkelhet – ”Less is more” konfliktsituation med antalet länkar! Lite på sidan men samtidigt få klick för infostrukturen

10 Gyllene snittet A1 B C D E F G H 2 3 X 4 5 6 7 8 x
Sidan delas in i rutor (12.5% var annan 12% var annan 13%!), funkar utmärkt för ”relativa” webbplatser Undvik att använda den gula ramen Undvika att lägga något enbart i mitten, detta kommer att upplevas som något väldigt tungt! De gröna punkterna utgör centrum i 5/8-kvadranter dvs kvadranter 5/8 rutor bred och 5/8 rutor högx5, centrum i det gyllene snittet Ögat söker sig av vana till rad 3 och 6 och vertikala rader C och F Blåmarkerade områden är smarta att använda x Centrum i det gyllene snittet (5/8)

11 Optisk mittpunkt Denna teknik används vid ”fasta” webbplatser
Innehållet läggs innanför den gröna rutan Stjärningspukterna mellan de grå linjerna är de optiska mittpunkterna, röda linjerna blir stödlinjer Stjärningspunkterna för de 45 gradiga ”diagonalerna” utgör basen för de gröna stödlinjerna, dessa dras tills de träffar den sista grå linjen. Placerar man objekt i var sitt hörn typ så uppfyller man regeln för ”Stängd figur” Om det går bör man använda sig av röda och/eller gröna och/eller grå(dvs skärningspunkter) En linje kan med fördel agera övre kant i det ena fallet och i undre i det andra

12 Informationsstruktur
Linjär Hierarkisk Matris Parallell Lager Zoom Nätverk ”Optimal struktur innebär dessutom ett minimerat antal musklick!” 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 Matris – Ovanlig men smart, kräver lite extra av utvecklaren. Ex Programvarutillverkare med flera program och flera versioner av varje (Mac, PC, Linux) Parallell – Ovanligt (om man bortser från Popups i reklamsammanhang), öppna flera webbläsare på en gång (Ex produktjämförelser) Lager – Jätteovanlig, men kan vara rätt så smart… Exemplet med difusa reglage i kotrollrumskosoll!! 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! Gå in på Umeå universitets hemsida så hittar du skräckexempel på en mix mellan Hierarkisk och Nätverk där den senare krånglar till det något alldeles… farligt!

13 Grafisk kommunikation
Mål/Syfte Målgrupp Produkt Budskap Organisation Marknad Medium Tidsplan Budget Utvärdering - Varför? - För vem? - Vara, tjänst, ide, PR? Vad är det vi vill sälja eller ”sälja in”? - Vad vill vi förmedla? Vad vill vi säga om vår produkt? Idè? etc - Vem ligger bakom produkten? Idéen? Webbplatsen? - Hur presenterar konkurrenterna sig? Eller andra samfälligheter? Eller sportfiskeklubbar? - Tekniker? Flash? Stilmallar? DHTML? ASP.NET - Har vi någon deadline? - Vad får det kosta? Pris? (kan hänga ihop med deadline) - Hur blev det till slut? Blev det bra?

14 Rationella eller emotionella Informativa eller transforma
Budskapet Budskap kan vara: Rationella eller emotionella Informativa eller transforma Intygande eller jämförande Budskap kan ha: En eller flera målgrupper Teknisk biologi och genomik i Umeå har lärare från världstoppen inom sitt område Det är oerhört trevligt och stimulerande att läsa till Medieingenjör. Studietiden vid Umeå universitet är det bästa som hänt mig/ Malin Bergström Lärarna på ingenjörsutbildningarna vid Umeå universitet är mer pedagogiska än vid något annat lärosäte i landet! Arbetade med Teknats webbplats för rekrytering, fakultet, institutioner mm Vem är målgruppen? Lärare, prefekter och studierektorer? Redan studerande? Eller potentiella studerande? Jag ville renodla mot den sista gruppen då det upplevdes väldigt spretigt annars, men ibland kan man inte välja… Dra exemplet med Anna Bohlin och Fysik.

15 Använd två (maximalt tre) fonter Ersätt Times New Roman (default)
Typografi Använd två (maximalt tre) fonter Ersätt Times New Roman (default) Georgia (rubriker) Verdana (brödtext) Undvik understrykningar Undvik centreringar Spalta upp texten 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. Fonter kommer att behandlas i en senare kurs så fördjupa er inte allt för mycket i detta under denna… Centreringar sänker läsbarheten!

16 Anges hexadecimalt (00–FF)
Färg RGB 256 nivåer/färg Anges hexadecimalt (00–FF) Nyanser nära varandra ger harmoni, motsatsen disharmoni Varma och kalla färger Kontrast 00 = 0 och FF = 255 ex Röd = FF0000 Osv OBSERVERA! Använd inte Red, Blue etc det är bara Microsoft som håller fast vid detta!! Rött till gult = Varmt och Blått till grönt = Kallt, Blandas varma och kalla blir man orolig! Kontrast hänger ihop med ljushetsgraden (gråskalevärdet av en färg typ)

17 Bild Bildformat Bildval Bildanalys Glöm inte Liggande
Stående Kvadratisk Bildval Illustrativa Metonymiska Metaforiska Glöm inte upphovsmannarätten! Bildanalys Näranalys Intentionsanalys Receptionsanalys Näranalys: Vad för bildtyp? Dokumentär, faktabild eller bara dekoration…? Vilken teknik? Form? Dominerande element och färger? Innehåll? Intentionsanalys: Vem är avsändare och vad vill man förmedlan med bilden? Avsikten med bilden får inte vara dold! Receptionsanalys: Testa och utvärdera hur bilder tolkas! Mörkhyade och vita gamla och unga kan kanske Illustrera något? En motor i genomskärning likaså Metonymiska bildval förstärker det man vill säga. Exempelvis kan en jordglob förstärka budskapet av att ett företag arbetar globalt… Metaforiska typ ”liknelser” Hjärtan och änglar med pilar på en kontaktförmedlande site…

18 Användaranpassning Kontrast mellan för- och bakgrund
Ett urval av W3C:s rekommendationer: Kontrast mellan för- och bakgrund Ej färgberoende information Undvik blinkande och rörlig grafik Enkelt och relevant språk Lämnar en del av rekommendationerna som hör till designavsnittet men blir mer aktuella under senare kurser Vissa punkter är så logiska att de känns överdrivet att nämna dem… ex grammatik är viktigt. OBSERVERA! Glöm inte att ni har kompendierna under dessa kurser! Tänk på färgblinda… och dessutom är det trevligt om det syns något vid utskrift. Skriv Varning! Istället för att bara rödmarkera… Ska fungera även svartvitt, glöm inte utskrifter i gråskala!! Inte samma språk för skärmen som för papperet bör bantas till en tredjedel!! Max 1000 ord över ett dussin rader.

19 Användaranpassning forts.
Konsekvent navigation Använd stilmallar, men anpassade för äldre webbläsare Undvik ramar Textmotsvarighet för varje objekt Ej bilder i stället för text Ange språk i HTML-koden Sidan bör fungera även utan CSS-fil Bilder, Ljud och Video kompletteras med text för de som inte ser(text läses upp av dator) eller hör Texter i bilder ser bra ut men… sökmotorer, talsyntes Ange språk lang=”fr” uppläsningsprogram är språkberoende, svenska med engelskt program ger konstigt uttal!

20 Användaranpassning forts.
Skapa alternativ till script, applets, flash mm Undvik popup:s Undvik automatisk uppdatering och vidarepassning