WD406F - Interaktiva medier I 7,5hp Moment: Web Usability Inlämningsuppgift 1ab. Wynona Ekesrydh 2010-12-13



Relevanta dokument
Webbteknik. Innehåll. Historisk återblick Teknisk beskrivning Märkspråk Standardisering Trender. En kort introduktion

En snabb titt på XML LEKTION 6

Anmälan till Swedbanks kontoregister via e-legitimation

Wordpress och Sociala medier av Sanna Ohlander STAFFANSTORP Framtidens kommun

CHECKLISTA. För dig som vill göra information och kommunikation tillgänglig

Användbarhet. Bryt rätt regler. Nils Ehrenberg

VIDEODAGBOKEN. Individuellt Mjukvaruutvecklingsprojekt. En dagbok i videoform online. Robert Forsgren (rf222ce) UD

Läkarintyg för sjöfolk. Hur gå vidare?

Kort om World Wide Web (webben)

Net id OEM Användarhandbok för Windows

Adobe. Dreamweaver CS3. Grundkurs.

Frågor och svar - Diagnostisk prov ht14 - Webbutveckling 1

D I G I TA LT S K A PA N D E

Så får du maximal nytta av Evernote

Introduktion. Markera den gröna bocken. Skriv in URL:en Klicka på knappen Platser.

Att eventuellt lägga in en extra gäst föreläsning med någon aktiv i arbetslivet som arbetar med animering i webb miljö.

Brandsäker i handeln Brandfarlig vara i handeln. Till dig som ska introducera webbutbildningarna

Nya Veckans AffArer VÅRA LÄSARE RÄCKVIDD & UPPLAGA

Labbrapport: HTML och CSS

create+ Interactive Scene Redaktörshandbok episerver

HANDLING TILL. Från tanke. Metodblad: Påverka på webben

Valet 2010 på facebook!

Hur hänger det ihop? För att kunna kommunicera krävs ett protokoll tcp/ip, http, ftp För att veta var man skall skicka

Skriva och skapa med datorn

SDC Violweb Kom-igång-guide. En instruktion för användare version 2.5 (mars 2016)

Projektplan för Website Project Japan

Enkla texter passar alla

Sammanfattning av enkäten en till en projektet

Teknikprogrammet, inriktning informations- och medieteknik

Valet 2010 på facebook!

Beställnings- och installationsguide av Dubbelskydd

ProReNata Journal. Snabbstart

It-politik Fakta i korthet

Brandsäkerhet i hemmet SFI Handledarmanus

SpellRight. för Google Docs. Manual för SpellRight för Google Docs

Introduktion till Community i Mediekatalogen SLI

En liten introduktion till SLI Community

NT- GYMNASIET TEKNIK 1 RAGNE.WAHLQUIST@JARFALLA.SE

Manual för deltagare kursen Bakgavellyft Så går du kursen Bakgavellyft

Projektspecifikation för Cv på webben

07/12/2015. Stilmallar. - styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. iecept.html frukt.html grönsaker.html

Användarmanual för Hemsida

Struktur och innehåll Laboration 2

Studie av gränssnittsprototyp i projektet Webbklustring - användarupplevelsen

Tips och idéer för Chrome OS och Google Dokument

Lathund för webbredaktörer. Så skriver du på webben

Användarmanual HOIF.org

INT 3 F3. En texts läsbarhet. Teckensnitt. Medieteknik Del1. Färger, teckensnitt och bildformat

Redovisa i e-möten via Adobe Connect

Acrobat version Du behöver ha Acrobat Pro installerat på din dator för att signera planer i Atlas. Däri finns funktion för certifiering/signering.


Macromedia. Flash 8 Grundkurs.

Materialspecifikation för desktop och mobil

SCHOLA COMAI ELEV WEBBKALENDER / SCHEMA VERSION 1.1. [Skriv text]

Inlämningsuppgift 2. DA156A - Introduktion till webbutveckling Teknik och samhälle, Malmö högskola Oktober 2012

För sökande: Vanliga frågor om e-tjänsten 4/2011

Laborationer i kursmomentet Datoranvändning E1. Laboration nr 5: Mer om FrameMaker

Elisabeth Bejefalk IT-Assistent Avesta kommun

Om du vill hitta tillbaka till din sektion klicka på fliken i huvudmenyn som heter organisation.

Att använda Stava Rex i Word 2007

Guide för Google Cloud Print

Språk för webben introduk4on 4ll HTML

En liten introduktion till Community på GR-SLI

Checklista med Tips & råd för din webbplats

Del 1 och 2 HTML/CSS. Webbutveckling Laboration 1 Nicklas Bostedt

Vetenskapliga affischer

Handbok Företagsinteckning

Detta sätt lämpar sig bra om man bara kort vill kommentera den inlämnade uppgifter som helhet. Gör så här:

10 smarta appar som ger Chrome mer muskler

Innehåll. Introduktion Min Stora Sorg. Diskussionsfrågor. Bildanalys. Analysera musiktexter. Tips på ytterligare fördjupning

Checklista för kognitiv tillgänglighet

Designmanual. Lunds Kommuns Fastighets AB

Föreningarnas nya sidmall. Version 4,

Prova på-laboration i PHP Johan Sjöholm johsj@ida.liu.se Institutionen för datavetenskap, Linköpings universitet

Laborationsanvisning. HTML5 Laboration 6. Författare: Johan Leitet Version: 1 Datum:

LAJKA-GUIDE. 8 smarta tips som gör dig till. Dropbox-kung. 7 Dela filer som länkar 7 Höj säkerheten 7 Förhandsgranska dokument och fem andra tips

Elektronisk hantering, förvaring och delning av examenstillfälles specifika bedömningsmaterial (dokument, video) på Office 365

RAPPORT: ATT UPPLEVA EN UTSTÄLLNING HELT I LJUD. FÖR UTSTÄLLNINGEN VÄRDEFULLT. BAKGRUND..s 2 METOD...s 2 RESULTAT...s 3 9 ANALYS AV WORKSHOP...

För att skriva CSS-kod använder man sig av olika kommandon. Ett exempel på hur man kan skriva kod för att ändra textfärg kan vara:

Policy för kakor. Inledning Om kakor

Systemkrav myschenker.se

Snabbgenomgång. Windows Live Movie Maker

Övning (X)HTML 2. Sidan 1 av

Tärna Folkhögskola IT-pedagogutbildningen Individuellt fördjupningsarbete Vt IT I FÖRSKOLAN. Författare:Tove Andersson

Sammanställning av webbenkät december 2015

Tillgänglighetskrav på teknik Dessa krav baseras på WCAG 2.0,

KOMMUNLEDNINGSKONTORET / IT-AVDELNINGEN. Office 365. Lathund

Slutrapport för JMDB.COM. Johan Wibjer

Kom igång manual. För att starta behöver du registrera dig och din förening:


Guide för pdf-formulär

Stilbyggar-manual. Logga in. Vad betyder knapparna? Välj stil & Duplicera

Introduktion till Adobe Acrobat Connect. I denna guide beskrivs hur man använder Adobe Connect samt användning av headset och webbkamera.

Korma [Tiedoston otsikko] Ssähkno Maija VIPU-ANVÄNDARENS ANVISNING. ELEKTRONISK STÖDANSÖKAN 2014 Huvudstödsansökan

Appar eller mobilwebb? Vad är bäst för bibliotekets tjänster?

Kontakta oss. Carl-Anton Johansson. Daniel Gunnarsson. Webbstrateg. Webbutvecklare

Uppdaterad: Lathund. Nyheter och nyhetslista

LEFI Online. Anslutningsinformation

The Pirate Bay-rättegången, dag 6 Fritt nedtecknat

Unga och Internet Sektionen för förebyggande arbete

Transkript:

Här följer min reflektion över innehållet i Jonathan Lazars bok Web Usability, kapitel 1 2, 6 7. Webbanvändbarhet För att infrastrukturen ska fungera behövs system som på ett enkelt och effektivt sätt kan hjälpa till att skapa ordning och reda. Med tiden stabiliserades dessa system och från och med mitten av 90 talet blev det allt vanligare att omsätta information till webbaserade sajter. Ett gigantiskt nätverk spred sig över hela världen och samhället påbörjade en ny era av teknologiska möjligheter. Det som tidigare tog lång tid att informera om, kunde nu delges på bara någon sekund. Utvecklingen gick i rask takt och med tiden utvecklades en interaktivitet mellan dator och användare (människan), med ett enkelt musklick kunde man förändra det man såg på skärmen. I stället för att bara informera, kunde man även roa sig på nätet med bl.a. spel, musik, resor, handel osv. För vem? - Användarens behov! I dagsläget har de flesta företag, organisationer, skolor, föreningar och även privatpersoner en egen hemsida. Här gäller det som webbdesigner att skapa en sajt som tillgodoser användarens behov så att denne stannar kvar men också få ut den information som t.ex. företaget står för. Sidan ska vara enkel att använda, navigationen ska vara tydlig och man bör även som webbdesigner plocka bort onödig information som tar plats. När det gäller användarvänlighet så ska man tänka på att nyttja sådant som användaren känner igen, t.ex. metaforer som en kundvagn för att handla på nätet, brevsymbol för e laeslogg_wynona_ekesrydh.docx 1 (9)

post, tydligt utmärkta länkar och knappar osv. Kortfattat kan man beskriva det som att det ska gå fort, vara effektivt och framförallt enkelt. Involvera användarna En annan viktig aspekt när man designar hemsidor är att involvera användarna, kan de vara med och påverka innehållet på ett sätt som passar dem, kommer hemsidan att hålla i längden. Ett bra exempel på detta är Facebook och här rekommenderar jag att man ser filmen The Social Network av David Fincher, för att få en förståelse för hur system kan ta form. Filmen handlar om grundarna av det sociala nätverket Facebook. Ett annat bra exempel på webbanvändning är när man ska ut och resa. I dagsläget kan man hemifrån via t.ex. SAS hemsida både boka biljett, bestämma var i planet man kan sitta, betala biljetten samt skriva ut boarding card. På så vis minskas kön vid incheckningen och det går snabbare att komma ombord, man kan komma 20 minuter innan planet går. Jämför man med före 90 talet, så var man tvungen att själv ta sig till en resebyrå alternativt flygplats för att få en biljett, sen var man tvungen att åka till flygplatsen ett antal timmar innan så att man hann checka in. Den nya lösningen för användarna är mycket effektiv, speciellt för de som reser ofta samt att det underlättar en hel del för personalen på flygplatserna. Här kan man ju diskutera om man rationaliserar bort personalen på dessa ställen, men det är en annan fråga som inte kommer att tas upp här. Webbläsare Det finns ett flertal olika webbläsare i olika versioner att använda sig av för att navigera på nätet, t.ex. Internet Explorer, Mozilla Firefox, Google Chrome och Opera. Detta är något som laeslogg_wynona_ekesrydh.docx 2 (9)

webbdesignern måste ta hänsyn till, annars kan sajten visas på ett olämpligt sätt som inte tillfredsställer användarens behov eller webbplatsens syfte. För att vara helt säker på att sajten ska fungera i samtliga webbläsare, kan man med hjälp av ett JavaScript visa ta reda på vilken webbläsare användaren har och vidare visa en fil som är specialanpassad just till denna webbläsare. Typ av webbsidor För att kunna designa en webbsida måste designern anpassa utformningen efter målgruppen (användarna). Ett bra tips i utvecklingsarbetet är att låta användarna ha synpunkter på hur webbsajten ska användas, dessa synpunkter har stor betydelse eftersom det är användarna som ska nyttja systemet. Tas ingen hänsyn till användarnas synpunkter så kan resultatet bli förödande och mycket kostsamt. De vanligaste typerna av webbsidor enligt Lazar (Web Usability, sid. 10) är i dagsläget: Elektronisk handel, typ webbutik som H & M och IKEA. Informationssidor, typ olika kommuners och föreningars hemsidor. Underhållningssidor, typ spel, musik film och bloggsidor (Spotify, YouTube). Communities, där användarna som har gemensamma intressen diskuterar specifika saker som t.ex. hur man arbetar i Adobe Photoshop CS3. Interna nät, typ information/kommunikation inom företag och skolor. Elektronisk legitimation Här skulle jag vilja lägga till en ny typ av webbsida, nämligen bankärenden, apoteksärenden, deklarationer, alltså sidor som kräver elektronisk legitimation för att kunna hantera tjänsterna. Elektronisk legitimation kan man få via banker och Telia. Krav är dock att man är mantalsskriven i Sverige och har ett laeslogg_wynona_ekesrydh.docx 3 (9)

personnummer. Använder man sig av denna typ av legitimation i Sverige kan man känna sig säker (www.e legitimation.se 2010 12 30 12:23). Idag är det allt vanligare att man sköter sina privata affärer via nätet, allt för att man ska vara så effektiv som möjligt samt att det ska gå fort. Kan man dra slutsatsen om att man vill köpa mer tid genom att använda dessa typer av webbsidor? Definiera uppdrag och mål samt användarpopularitet För att skapa en bra webbsajt där användarna (målgruppen) är tillfredsställda måste sajtens mål preciseras och testas på användarna. Hoppar man över steget med att kommunicera med användarna vid utveckling, kan resultatet vara att sajten blir utan besökare och då mister sin funktion. En tidningsjournalist föreläste en gång på min arbetsplats och han nämnde tre viktiga aspekter som man kan ha i baktanke när man ska förändra eller berätta något: För vem ska du förändra/berätta? Här måste målgruppen definieras! Varför ska du förändra/berätta? Här måste ändamålet preciseras! Hur ska du förändra/berätta? Här måste resultatet preciseras (spel, animering, interaktivitet etc.). En webbsajts livscykel med användaren i fokus Lazar skriver i sin bok om att en webbsajts livscykel består av sju punkter. Här återknyter jag till aspekterna om för vem ska sajten anpassas till (1), varför ska sajten skapas (2) och till slut hur ska sajten skapas (3 5). När förarbetet är genomfört, lanseras sajten (6) och efter en tids användning utvärderas och förbättras sajten (7). laeslogg_wynona_ekesrydh.docx 4 (9)

Webbdesign 1. Definiera uppdrag och användare (målgrupp) Här startar livscykeln, både vid nyskapande av webbsajt och ombearbetning. 2. Samla in användarens behov Här sker research för att ta reda på vad användaren har för behov, detta är en viktig del om man vill tillfredsställa användarna så att de stannar kvar på sajten. 3 5. Skapa, förändra och testa designen Här skapas och förändras designen samt att designen testas på användarna. Denna procedur upprepas tills uppdraget har nått sitt mål och att användarna är nöjda. 6. Implementera och marknadsför webbsajten Här implementeras webbsajten på Internet och samtidigt marknadsförs den så att användarna hittar hit. 7. Utvärdera och korrigera webbsajten Här utvärderas och förbättras webbsajten. Nedladdningshastighet När man har kommit till skapandeprocessen av webbsajten måste man tänka på olika saker som kan påverka användaren. Det första man måste tänka på är nedladdningshastigheten, dvs. hur lång tid det tar att ladda sajten i användarens webbläsare. Använder man mycket grafik tar det garanterat längre tid att ladda innehållet jämfört med om man bara behöver ladda vanlig text. Ett sätt att lösa detta är att använda sig av webboptimerade bilder. Har man lite färg och form på grafiken kan man med fördel använda sig av gif bilder som kan lagra 256 färger och går snabbare att ladda. Använder man sig av bilder med mycket färg och form använder man med fördel jpg eller png bilder som kan lagra ca 16,8 miljoner färger, men dessa kan då ta längre tid att ladda. Webboptimerade bilder har olika komprimeringsmetoder, läs mer på http://home.hkr.se/~wyek0001/uppgift_02/index.html. Minnesplats När det gäller grafik på en webbsajt kan den utformas i en mängd olika skepnader, t.ex. animeringar gjorda i Flash, men för att dessa ska fungera måste användaren ha en flashplayer (insticksprogram) installerad på datorn och den måste vidare laeslogg_wynona_ekesrydh.docx 5 (9)

laddas i minnet, vilket också tar längre tid. Man kan generellt tänka så här: all data man använder tar plats i minnet, ju mer data man använder ju längre laddningstid och mer plats tar det i minnet och vise versa. Upplösning En sak man ska fundera över när man skapar sajten är att användarna kan ha olika upplösning på sina skärmar. Skapar man layouten med pixlar som mått, så kommer innehållet att visas i exakt de pixlar som är angivna oavsett skärmupplösning. Har man anpassat designen efter en upplösning på 1024x768 pixlar, vilken är relativt vanlig idag, får inte hela sajten plats om användaren har en upplösning på 800x600 pixlar och resultatet blir att användaren måste scrolla sig fram och tillbaka för att se innehållet. Scrollning är något man vill undvika i den mån det går för att det tröttar ut användaren. Ett hett tips är att man som designer testar sidan i olika upplösningar och gärna i mobiltelefonen. laeslogg_wynona_ekesrydh.docx 6 (9)

Layout och sammanhang För att få användaren att stanna kvar på webbsajten måste man ta hänsyn till vilken layout man skapar. Här gäller det att tänka på hur bakgrundsbilder och ev. mönster ska harmonisera så att användaren inte blir bortkollrad av allt lullull. En tydlig struktur ska finnas där menyalternativen är självklara för användaren. Typsnitt, storlek och färg Typsnitt, storlek och färg har också stor betydelse. På webben ska man helst använda typsnitt utan seriffer (sans serif), teckensnitt med seriffer har olika tjocklek på sina linjer och eftersom skärmen visar allt i s.k. ljuspunkter kan ljuset bli så starkt att de smala linjerna försvinner in i ljuset och då blir det grötigt för användaren att läsa. Lämpliga typsnitt på webben kan vara Arial och Verdana. Vill man använda sig av teckensnitt med seriffer, är Georgia ett alternativ som är specialanpassat för bildskärmen. Navigering Det är också mycket viktigt att menyer och innehåll har någon form av sammanhang så att användaren inte blir förvirrad. Tydliga rubriker som beskriver ämnet i korthet är att föredra. Kommunicera på webben Jag har som gymnasielärare satt ihop en föreläsning till mina elever om hur man kommunicerar på webben, se bilaga lagstiftning_typografi_bilder_dtr1210.pdf. Mångsidig användbarhet målgrupp I dagsläget måste man, när man skapar webbsajter, ta hänsyn till användarnas mångfald (pensionärer, ungdomar, kontorsarbetare, fabrikspersonal etc.). Ungdomar idag har en laeslogg_wynona_ekesrydh.docx 7 (9)

stor datorvana jämfört med äldre och här bör man då kompromissa sin teknik så att den passar båda parter. Handikapp En målgrupp man ska ta speciell hänsyn till är de som har någon form av handikapp. En blind person har oftast ett röstprogram som läser upp innehållet på sidorna, en döv person behöver information i form av text och bild där då ljud är uteslutet. För vem, varför och hur? Att designa till denna mångfald är en stor utmaning och här gäller det att ha klart för sig för vem man designar, varför man designar och hur man ska designa. Jag återknyter till mitt tidigare resonemang: det ska gå fort, vara effektivt och framförallt enkelt. XHTML språk och grammatik I Sverige är det Svenska akademin som bestämmer hur vårt språk ska stavas, skrivas och formas efter grammatiska regler. Vi har lexikon som vi kan slå upp ord i, för att vara helt säkra på att vi gör rätt. I dagens moderna IT system som t.ex. MS Word finns stavningskontroll som hjälper till med stavning och grammatik. Man kan enkelt sammanfatta det som att man har regler för att kommunicera korrekt. W3C World Wide Web Consortium När det gäller webbens språk XHTML så har W3C tagit på sig att standardisera regelverket. För att vi ska kunna kommunicera korrekt över vida världen, måste vi även här ha regler för hur grammatiken ska se ut, man brukar kalla det för att koden ska vara analyserbar. I HTML:s tidigare versioner bakade man in grammatiken i koden, men det var ganska förödande när man skulle ändra något om man hade många filer, det var både tidsödande och ineffektivt. I dagens XHTML standard ligger laeslogg_wynona_ekesrydh.docx 8 (9)

grammatiken i en DTD fil som analyserar koden för att kontrollera om den är korrekt kodad med rätt taggar i rätt ordning, även kallat validering. DTD Document Type Definition DTD filen beskriver ett sätt att strukturera ett SGML (Standard Generalized Markup Language, ett format för strukturerad text) och ett XML dokument. XML är en vidareutveckling av SGML. HTML har sitt ursprung i SGML. DTD filens anrop finns som en länk längst upp i HTML dokumentet: <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> laeslogg_wynona_ekesrydh.docx 9 (9)