Analys av webbplats

"Vad gör en webbsida tilltalande? Idag är Internet en stor del av vår vardag. Vi utför bankärenden, skickar e-post, läser nyheter och handlar på Internet. Internet har blivit en marknadsplats där fler och fler företag försöker sprida sina produkter och tjänster. I och med det växande utbudet har det också blivit allt mer viktigt med förmågan att locka till sig nya besökare, att stå ut från mängden av alternativ. Vad är det då som ligger till grund för vad vi uppfattar som tilltalande? Och i förlängningen: hur bär man sig åt för att utveckla tilltalande hemsidor?"

(källa )

Analys av webbplats / En webbplats ska...

• En webbplats ska ha en snygg layout, därefter kommer innehållet. En webbplats ska alltså utgå ifrån form - därefter kommer innehåll. Om en webbplats är "ful" får den färre besök.
  
• En webbplats ska ha ett bra innehåll, layout kommer senare. En webbplats ska alltså utgå ifrån innehåll - därefter kommer form. Om en webbplats är "ful" spelar mindre roll och påverkar inte antalet besökare.
  
• En webbplats ska främst ha ett användarvänligt gränssnitt. Sidan ska vara lättnavigerad och den tilltänkta målgruppen ska behöva göra så få klick som möjligt. Om en webbplats är svårnavigerad får den färre besökare.
  
• En webbplats ska utgå ifrån funktion, inte utseende och innehåll. Om en webbplats har funktioner som är krångliga eller inte fungerar får den färre besök.
  

Analys av webbplats / Övningar

Övning 1 - Webbplats

1. Vad är en webbplats?
   
2. Varför ska man ha en webbplats? Vilka användningsområden finns?
   
3. Leta rätt på tre webbplatser som du tycker är bra gjorda och motivera.
   
4. Leta rätt på tre webbplatser som är dåligt gjorda och motivera.
   
   

Övning 2 - Webbanalys

1. Välj tre valfria sidor på nätet och beskriv dem både utifrån utseende och vilka fuktioner som finns.
   
2. Se till den grafiska designen: hur ser bildinnehållet ut? Finns det en logga?
3. Och finns det en banner? Finns loggan och bannern bara på startsidan eller på alla sidor? Hur är färgsättningen och är färgpaletten konsekvent hållen?
   
4. Har sidan en viss "profil"?
   
5. Finns det en tipsa/dela funktion?
   
6. Finns koppling till sociala medier? t.ex. facebook-integration?
   
7. Finns det en webbshop? Och hur ser den ut?

 

Analys av webbplats / Länkar

Bildanalys

Analys av webbplats / Innehållsförteckning

• Introduktion
• En webbplats ska...
  
• Övningar

Obearbetat material

En webbsida har inte bara i uppgift att se tilltalande ut och förmedla ett budskap, den ska även gå att använda.

AnvändbarhetTexten på sidan är lätt att läsaDet är lätt att navigera mellan sidans olika delarDet är lätt att hitta det man sökerSidans funktioner är lätta att använda

Grafisk designSidans innehåll är välstrukturerat och lätt att överskådaSidan känns visuellt tilltalandeFärgvalet passar in på sidans karaktär.

En viktig del av att utforma en användbar webbsida är kontinuitet.

När man döper länkarna i sin navigation är det vikigt att användaren förstår dem. Döp inte länkarna till ”Klicka här”.

Länkar ska vara blå och understrukna (en standard). Blåa länkar kanske inte alltid är det optimala valet för alla sidor då det kanske inte alltid passar in i designen. I dessa fall finns det annat som visar på klickbarhet, t.ex. fet text och länkar som ändrar färg när muspekaren förs över.

Undvik att överbelamra en sida med bilder, texter osv. Undvik också plottrig bakgrund.

konstrast mellan text och bakgrund

användare blir irriterade på rörlig text

Välj rätt typsnitt, helst utan seriffer, t.ex. Arial, Georgia och Verdana. Avänd så få olika typsnitt som möjligt.

Det främsta man bör ha i åtanke när man designar en webbsida är besökaren. Designen ska förmedla samma budskap och känsla som innehållet. Designen ska förstärka webbsidans budskap. För att gör en design lätt att ta till sig, bör den vara så enkel som möjligt.

Struktur: Cascade = Ju högre upp något befinner sig, eller ju större det är, ju viktigare är det.

En webbsidas focal point är det element som besökaren först lägger märket till.

Luft som en designkomponent

5.1Aftonbladet

5.1.1Expertutvärdering5.1.1.1AnvändbarhetNavigation och länkarHuvudnavigationen består av en vertikal lista till vänster på sidan och den är likadan på undersidor. Detta ger ett enhetligt intryck och göra det enklare för användaren att navigera sig genom webbplatsen. Länkarna i navigationen ändras och blir understrukna när muspekaren för över, vilket tydligt visar på klickbarhet. Övriga textlänkar på sidan är en tydlig blå färg och understrukna, vilket även det visar på klickbarhet. Även rubrikerna för artiklarna är länkar och blir understrukna när muspekaren förs över.ÖverbelamringSidan känns rörig och överbelamrad p.g.a. all reklam och rörliga bilder som finns.Texter och läsbarhetDen ljusa bakgrundsfärgen och den mörka texten ger en tydlig kontrast vilket gör att alla text blir lätt att läsa. För att öka läsbarheten ytterligare finns det även en möjlighet att välja på tre olika textstorlekar när man ska läsa de olika artiklarna. Detta gör sidan även mer användbar för människor med olika synskador. ScrollningSidan har många nyheter att visa och därför används scrollister. För att användaren enkelt ska kunna hitta de nyaste artiklarna finns dessa överst på sidan.
5.1.1.2Grafisk designFörsta intryckWebbsidan ger ett rörigt intryck då man möts av ett antal spalter med olika innehåll. Sidankänns överlag väldigt komprimerad och det finns inte mycket fri yta. Detta gör ett ganska överväldigande intryck och det kan vara svårt att överblicka innehållet på ett bra sätt.StrukturWebbsidan består av fem spalter, varav två helt ägnade åt annonser.Sidans faktiska innehåll, artiklarna, tar upp mindre än hälften av webbsidans totala bredd. Artiklarna står dock ut från det andra innehållet med p.g.a. stora rubriker och bilder.Grafisk profilWebbsidans statiska element har en ganska nedtonad roll och består av loggan, en meny och en sökrad. Resten av sidan domineras av innehåll. Vissa saker i innehållet går i samma stil som dessa statiska element men det finns många undantag och man använder ofta färger som inte ingår i sidans grafiska profil.5.1.1.3FlowInteractivityAftonbladet har ett antal interaktiva element. I högerspalten där man kan hitta länkar till deras webb-tv kan man t.ex. se klippet i miniformat genom att föra muspekaren över tumnageln. Omröstningar i samband med vissa artiklar bidrar också tillökad interaktivitet. De erbjuder även möjlighet att registrera sig för att kunna skriva kommentarer till tv-klipp, artiklar osv.SpeedSidan känns något långsam att använda, mest p.g.a. mängden innehåll som finns både på framsidorna och på undersidorna. Även när man befinner sig i en artikel så laddas en lång rad innehåll under denna. Även om annonserna tar en del extra tid att ladda in så påverkas inte resten av sidan av detta då det går att använda den även innan dessa laddats in. ComplexityWebbsidan använder sig av både text, bild och film för att förmedla innehåll till användaren och kan därför anses ha en hög complexity.NoveltyAftonbladet använder sig av en traditionell layout som i sig inte känns speciellt banbrytande. Ett modernt inslag är deraswebb-tv men som knappast kan klassas som nyskapande längre.

5.2 Dagens Nyheter

5.2.1Expertutvärdering5.2.1.1AnvändbarhetNavigation och länkarHuvudnavigationen är placerad på toppen på sidan och lika på alla sidor, men beroende på vilkenlänk i menyn man valt så ändrar den färg på den. Detta gör det enkelt för användarna att skilja de olika undersidorna åt och de kan enkelt se vart de befinner sig. Länkarna i huvudnavigationen ändras inte när muspekaren för över, vilket inte visar på klickbarhet. Däremot visar länkarna i undermeny på klickbarhet då de blir understrukna när muspekaren förs över. Rubrikerna till artiklarna är länkar men det finns även en vanlig textlänk. Den vanliga textlänken är tydlig med blå färg som blir understruken när muspekaren för över, medan rubriken inte ändras allt. ÖverbelamringSidan ger ett rörigt intryck, då det finns många olika rörliga annonser och reklam på sidan som kan tar uppmärksamhet bort från nyheterna.Texter och läsbarhetI varje artikel kan man välja textstorlek genom att trycka på + eller -. Denna inställning finns sedan kvar oberoende på vilken artikel man är inne och läser på. Däremot ändras texten alltid tillbaka till den ursprungliga storleken när man är på startsidan. Den höga kontrasten mellan texten och bakgrunden gör texten lättläst.ScrollningSidan använder sig av scrollister. De senaste nyheterna hamnar genast längst upp på sidan vilket gör att användarna enkelt kan hitta de nyaste utan att behöva leta. 5.2.1.2Grafisk designFörsta intryckSidan har ett relativt luftigt och stilrent intryck. Många bilder och rubriker visar direkt vad det handlar om och drar till sig uppmärksamheten. Genom att ha en ganska bred spalt med snabb-innehåll separeras artiklarna något från annonsspalten vilket ger ett lite mindre rörigt intryck när man läser artiklar än om de hade legat närmare. Man har inte heller animerade annonser i samma utsträckning som t.ex. Aftonbladet, vilket gör dem lättare att ignorera.StrukturSidan använder sig av en enkel spaltstruktur med en toppmeny och innehållet längst till vänster. I mittenspalten ligger puffar till andra artiklar, webb-tv, omröstningar och liknande. Artiklarna avbryts ibland med listor över ”senaste nytt” och liknande länkar till annat innehåll. Detta förekommer dock inte så ofta utan man kan för det mesta läsa artiklarna oavbrutet. Grafisk profilWebbsidan har en enhetlig stil med återkommande färger, rubriker och grafik. Sidans profil är i sig ganska nedtonad mentydlig. Man har valt att färgkoda olika avdelningar genom att byta färg på menyn och byta ut loggan mot namnet på kategorin. Det återspeglas dock inte i innehållet. Innehållet består till största delen av rubriker, nyhetsbilder och korta ingresser med några undantag för omröstningar, läsarfrågor och liknande.5.2.1.3FlowInteractivityDen här webbsidans interaktiva element består, förutom sökfunktionen, mest av den menyrad som kan hittas längst ner på sidan. Där kan man välja om man vill prenumerera på vissa artiklar via RSS, e-post eller mobil samt skapa sökfilter som skickar nyheter baserade på sökord till din e-post.SpeedSidan känns snabb och sidans laddningstid påverkas inte märkbart av tunga annonser som behöver laddas. ComplexitySidan använder främst text och bild för att förmedla sitt innehåll men man har även en webb-tv där man kan se nyhetsklipp. NoveltyWebbsidan använder en ganska vedertagen design med spalter och toppmeny. Innehållet består enbart av text och bilder, samt webb-tv vilket som sagt känns som standard nu för tiden. Att få nyheterna skickade till mobilen och möjligheten att specificera egna sökfilter känns dock relativt nytt.

Välj en valfri sida på nätet och se till dess utseende och funktion.Se till den grafiska designen.

Har sidan en viss "profil"?
Finns det en tipsa/dela funktion?
Finns koppling till sociala medier? t.ex. facebook-integration?
Finns det en webbshop? Och hur ser den ut?

Formulär:

Vad heter du? Skriv både för- och efternamn

Vilken sida har du valt? Klistra in hela webbadressen.

JA eller NEJ
Finns det en logga?
Finns det en banner?
Finns det en koppling till sociala medier?

INTE - DELVIS - GANSKA MYCKET - HELT
Sidan ger ett trovärdigt intryck
Sidans innehåll är välstrukturerat och lätt att överskåda
Sidan känns visuellt tilltalande: den är snygg!
Texten på sidan är lätt att läsa
Färgvalet passar in på sidans karaktär
Det är lätt att navigera mellan sidans olika delar
Det är lätt att hitta det man söker
Sidans funktioner är lätta att använda
Man förstår direkt utifrån sidans design vilken typ av sida det är

Källa

Joni Stam (2016)