Transcript Vad bör vi tänka på?

Vad bör vi tänka på?
Enkelhet & Användarvänlighet






Hjälp användaren att hitta
- Sökfunktion
- Överskådlig meny
- Överskådlig information
- Fånga användaren direkt genom att visa den viktigaste informationen snabbt, på
så vis stannar användaren istället för att gå till nästa sida i Googles sökresultat.
- Visa användaren vart hon/han är, genom brödsmulor eller tydlig markering i
menyer
Tekniska faktorer
- Använd komprimerade bilder som inte tar för stor plats för att undvika långa
laddningstider.
- Se till att hemsidan fungerar i alla webbläsare
Länkning
- Hjälp användaren att hitta med länkar i texten
- Länka från andra relevanta sidor
Färgval
- Använd inte för många färger och se till att färgerna passar bra ihop
- Använd färger med bra kontrast för att lättare kunna läsa text (tänk här även på
färgblindhet)
- Tänk på vad du vill framföra, färgen hjälper att förstärka känslor!
Informativa bilder med bildtexter
- Använd ”talande” bilder och lägg bildtexter/alternativtexter till bilden för de som
använder uppläsare.
Genomtänkt struktur
- Tänk på linjer så att ”blocken” ligger i samma nivå
- Använd luft för att hjälpa användaren att scanna texten
- Strukturera html-dokumenten med en logisk struktur

Tänk på att skriva dina texter med rätt rubriknivåer enligt en bra hierarki (h1->h2 > h3 o.s.v.)
- Se till att användaren lär sig att navigera på hemsidan genom att ha konsekvent information
enligt en bra menystruktur.
- Låt användaren hitta informationen där man ”bör” hitta den (Gruppera därför liknande
information).
Tänk på tillgänglighet för alla (WCAG - Web Content Accessibility Guidelines)

Riktlinjer för användarvänlig design (Nielsen usability guidelines)
1. Enkel och naturlig dialog. Dialoger bör inte innehålla irrelevant eller sällan använd
information då denna tävlar med den relevanta informationen och minskar dess
relativa synlighet. All information bör komma i en naturlig och logisk ordning.
2. Använd ett naturligt språk. All text bör utformas i ord, fraser och begrepp som är
bekanta för användaren istället för i systemorienterade termer.
3. Minimera användarens minnesbelastning. Gör valbara objekt och funktioner
synliga. Användaren ska inte behöva komma ihåg information från en del av
produkten till en annan. Instruktioner för användning av systemet ska vara synlig
eller lätt att få fram.
4. Enhetlighet. Användare ska inte behöva fundera över om olika ord, situationer
eller handlingar i systemet betyder samma sak. Följ plattformsspecifika riktlinjer.
5. Förse användaren med återkoppling. Systemet ska inom rimlig tid informera
användare om vad som sker i systemet.
6. Förse användaren med klart markerade funktioner för att avbryta dialogen.
Användare väljer ofta systemfunktioner av misstag och behöver en klart markerad
”Nödutgång” för att hitta tillbaka. Gör det möjligt att ångra och repetera.
7. Effektiv användning. Kortkommandon snabbar ofta upp interaktionen för
experten. På så sätt kan systemet tillgodose både oerfarna och erfarna användare.
8. Bra felmeddelanden. Bra felmeddelanden uttrycks i ett enkelt språk, som klart och
tydligt indikerar vad som är fel och föreslår en lösning på problemet.
9. Förhindra fel. Bättre än ett bra felmeddelande är att utforma produkten så att
problemet inte uppstår.
10. Hjälp och dokumentation. All hjälp och dokumentation ska vara lätt att söka i,
fokuserad på användarens uppgift, lista konkreta arbetssteg och inte vara för
omfattande.
Vad vill du förmedla?




Tänk på vilken som är din profil.
Anpassa innehållet efter din målgrupp – det finns ingen hemsida som är den perfekta
hemsidan för samtliga branscher.
Tänk på hur du vill kommunicera med din målgrupp i tal och använd även detta språk i dina
texter.
Tänk på hur du framför informationen, betona informationen med typsnitt, storlekar i
måttliga mängder.
Vilken funktionalitet behöver just du?





Överdriv inte med funktioner som du inte ens behöver.
För mycket information kan göra användaren förvirrad.
Det senaste och coolaste kanske inte passar din hemsida.
Gör det enkelt för både dig och användaren, mindre funktioner innebär mindre kostnader
och mindre underhåll samt att användaren hittar enklare.
Håll dig uppdaterad för att se om det finns funktioner som skulle underlätta för dig eller din
användare eller helt enkelt öka antalet besökare.
Fånga användarens intresse


Håll informationen uppdaterad, en återkommande användare är a & o.
Skapa någonting som gör din hemsida speciell och som får användaren att trivas. Använd
färger och positiva bilder, eller varför inte ett oslagbart erbjudande?
Undvik distraherande objekt



Håll det stilrent, användare stör sig i regel på för mycket rörelser.
Användaren kan missa viktig information, tänk på om det är viktigt att ha rörelser på sidan?
Men Aftonbladet då?, dem lever på sin reklam - tänk på hur du vill göra din verksamhet
lönsam och om det är värt att visa reklamen framför din verksamhet.
Tänk på hur besökarna hittar just din sida?



Sökmotoroptimering (se föreläsning eller punkten nedan)
Marknadsför din hemsida på utskick och annat material.
Sprid ut information om hemsidan i sociala medier som Facebook eller Twitter.
Använd sökmotoroptimering!


Använd Offpage-metoder – Länka från andra sidor/forum med bra ankartext, Använd delning
i sociala medier, skriv om eller låt andra skriva om din sida i bloggar eller från sidor som har
relevant information om din verksamhet.
Använd Onpage-metoder – Använd bra html-struktur, Använd nyckelord i rubriker, text och
meta-taggar, använd interna länkar mellan sidorna, skapa bra menyer eller ”sitemap”
innehållandes ett länkträd över alla undersidor på din hemsida, använd text som innehåll då
sökmotorer inte kan läsa bilder, om du har bilder så bör du använda bildtexter innehållandes
nyckelord.
Tänk på hur sociala medier kan hjälpa dig?




Använd delning.
Använd ”gilla”.
Integration med hemsidan.
Läs på om sociala medier eller gå andra kurser inom sociala medier.
Välj rätt leverantör





Välj en leverantör som har bra verktyg (CMS - uppdateringsverktyg)!
Välj en leverantör med bra referenser.
Ställ frågor om de klarar att uppfylla dina krav.
Välj ett pris som passar beroende på hemsidans storlek och komplexitet.
Se till att dem har en bra plattform.
Ordlista

Html – Hypertext Markup Language
Ett uppmärkningsspråk som vi använder för att strukturera informationen på hemsidan, Här
jobbar vi med:
- Taggar <p>Lite text i ett stycke</p> p-tagg






- Attribut <a href=”www.minsida.com/sida2”>Sida 2</a> href-attribut
- Element <a href=”www.minsida.com/sida2”>Sida 2</a> a-element
- Block <div></div>
- Information hittar vi på www.w3schools.com
Css – Cascading Style Sheets
Används för att lägga på designen på informationen (HTML), Vi sätter egenskaper på varje
tagg som gör att vi kan stila sidan
ex:
body
{
background-color: #dddddd;
}
- id-attribut skrivs som #MittElement
- class-attribut skrivs som .mittElement
Hexadecimal färg
- #ffffff
- Finns att hämta i färgpalett i ex GIMP eller på www.colorzilla.com/gradient-editor
CMS – Content Management System
Låter oss uppdatera genom att logga in och uppdatera informationen på sidan utan att skriva
HTML eller CSS
Gränssnitt
Det du interagerar med hjälp av, det vill säga en plats/yta där du har alla knappar och verktyg
som du styr med. Det kan vara ett administrationsgränssnitt där du har verktygen för att
uppdatera hemsidan eller själva hemsidan som dina besökare möter som också är ett
gränssnitt.
SEO – Search Engine Optimization (Sökmotoroptimering)
- Använder vi konstant för att förbättra vår position I sökmotorer när användare söker på
termer som du vill synas på.
- Finns Onpage-metoder och Off-pagemetoder det vill säga metoder du använder på sidan
eller på andra sidor (länkning) som gör att du hamnar bättre i sökmotorer.
Sociala medier
- Facebook, Twitter, Google+ etc