SVENSK FILMINDUSTRIS WEBBPLATS



Relevanta dokument
- en expertanalys. av Anna Olvenmyr

ZZZVIVH HQXWYlUGHULQJ

ANALYS AV EN WEBBAPPLIKATION

Projektspecifikation för Cv på webben

Pagineringsgadget Ordlista Scen Spellista Slide Mall Innehållselement Gadget... 27

Grafisk profil till Dear Area

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:

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

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

Introduktion till Blästadsgatans diskussionsforum. Inledning. Layout ej inloggat läge

Easy Planning blir med dessa funktioner ett mycket kraftfullt verktyg för planering. Vi hoppas att våra kunder ska få stor nytta av programmet.

Analys av com hems startsida

Delmoment 2: Skapa nyhetsmallen (om det inte redan finns en nyhetsmall)

Administrativ manual RiksSvikt 3.7.0

SLALOMINGÅNGAR hur svårt kan det vara?

Copyright 2008 Pausit AB medföljer programvaran pausit. Pausit version 1.2 Användarmanual

1.2 Logotypens färgsättning

Förord. Umeå i april Anders Hanberger Projektledare för utvärderingen UCER, Umeå universitet

Manual Behörighetsadministratör

Användarmanual Cartesia GEO Manager

RödGrön-spelet Av: Jonas Hall. Högstadiet. Tid: minuter beroende på variant Material: TI-82/83/84 samt tärningar

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

Lathund. Administratörshantering. Kapitalflytt ITPK

Jenny Dafgård, Fredrik Johansson, Nils Järgenstedt, Yael Katzellenbogen och Klara Mälarberg. IT-Universitetet i Göteborg, HT03

Microsoft Publisher. Laborationskompendium för digital behandling av publikationer. Detta exemplar tillhör:

Handledning. Biträdessidan. Handledning till Biträdessidan, 2013 version 1.0 :

Föreningarnas nya sidmall. Version 4,

IT-universitetet, Chalmers Grafiska Gränssnitt, 6p Kursansvariga: Staffan Björk, Sus Lundgren

Struktur och innehåll Laboration 2

Netwise CMG Voice , Rev 1.0, CJ 1(16)

Användarmanual. 1.0 Login

UTVÄRDERING AV GÖTEBORGS STADSMUSEUMS HEMSIDA

Widgets i DynaMaster 5 Golf

Användarmanual Skolrapport.se. Vårdnadshavare

ANVISNING FÖR FUNKTIONER PÅ STADENS WEBBPLATSER OCH E-TJÄNSTER

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

Färgklövern. Färgklövern är gjord 1998 i samarbete mellan Datateket i Linköping och Hargdata AB i Linköping.

KeyControl Sök person, nyckel eller cylinder

Analys av webbplatsen csn.se Personlig uppsats i kursen Interaktionsdesign Grafiska gränssnitt, hösten 2003

Användarhandledning Rapportgenerator Version: 1.1

Bildslinga Användarguide

create+ Interactive Scene Redaktörshandbok episerver

Manual. Användargränssnitt

IdrottOnline-appen Du kan installera appen från Google Play store för Android och Appstore för iphone. Sök på IdrottOnline så bör den komma fram.

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...

Sammanställningar av djupintervjuer

Journalhanteringssystem för World Scout Jamboree 2011

Manual Introduktionskurs SiteVision

Instruktion för att slutföra registreringen

Snabbgenomgång. Windows Live Movie Maker

Diagram. I detta kapitel lär du dig: m Diagrammets beståndsdelar. m Att skapa både inbäddat diagram och diagramblad. m Att ändra diagramform.

SurveyXact version 6.10

Lära känna skrivbordet

Projekt 2 Informationsvisualisering av släktträd

Användarguide Flexconnect.se Mobil Anknytning

Slutrapport: Informationsvisualisering av släktträd

MBX Mobilapp. Inloggning. Mobilapplikationens huvudmeny. MBX Mobilapp

Projektarbete 2: Interaktiv prototyp

En liten introduktion till SLI Community

RSI Road Status Information A new method for detection of road conditions

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

Elektronisk budbok för tidningsbud

Business Online Generellt

Handledning Historiska Kartor

Classfronter Vägledning för Studenter (version 1.1)

Att använda talsyntes i en lässituation

Section Divider. Skapa nytt utskick

Instruktion Tibropresentation

Användarinstruktioner Ofelia Återrapportering

Manual för Kalmar kommuns Nya intranät. piren.kalmar.se

MANUAL. Weblink WebCall

Sida 1 av 12. WSB Biodling. Manual V

Lathund GUL Lärare. Allmänt. Hur du presenterar Dig själv för kursdeltagarna. Hur du lägger upp din kontaktlista

VÅR GRAFISKA PROFIL.

Scribus fortsättning

Inspelning, redigering, publicering med Camtasia 7

B = Bokad tid. T = Tillfälligt bokad tid. L = Ledig tid. X = Spärrad tid

Guide till Lidingö stads app (Netpublicator) för digitala nämndhandlingar

Lathund. Skolverkets behörighetssystem för e-tjänster. Rollen huvudman

E-post för nybörjare

LÄSLANDET - BOKSTÄVER OCH ORD

Manual. Logga in. OBS! Kontrollera så att korrekt epostadress finns ifyllt. Ändra inga andra uppgifter!

Möteshandlingar via ipad

Elisabeth Bejefalk IT-Assistent Avesta kommun

19. Skriva ut statistik

Clicker 5. Lathund kring de vanligaste och mest grundläggande funktionerna för att komma igång med Clicker. Habilitering & Hjälpmedel

Seriehantering. [En enkel guide för hur du som serieadministratör använder SVEMO TA.]

Lathund för redaktörer. Lokala webbplatser Sacoföreningar, Sacoråd och Akademikerföreningar

En liten introduktion till Community på GR-SLI

Språkäventyret. Mål. Verktyg. Inledande arbete

Handledning Miljömanualen på webben

Tempsensor för Energikontrollen. Användarmanual

Planering av egen cup - Steg 4: Under cupdagarna

Guide för pdf-formulär

Lathund till Dexter IUP

Administration - Skapa och administrera användare. Din roll som administratör 1. Meny och huvudfunktioner 2-4. Skapa en användare...

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

Kommunikationsstrategi Studentboet

Slutrapport Fästanordning för fordons specifik bilbarnstol i framsätet

Innehållsförteckning

Transkript:

EXPERTANALYS AV SVENSK FILMINDUSTRIS WEBBPLATS JENNY DAFGÅRD MDI.INTERAKTIONSDESIGN GRAFISKA GRÄNSSNITT 23 OKTOBER 2003

INNEHÅLLSFÖRTECKNING INLEDNING...4 SVENSK FILMINDUSTRIS WEBBPLATS...6 ÖVERGRIPANDE ANALYS AV SF:S WEBBPLATS...6 FÖRSTA INTRYCKET...6 Startsidan...6 Huvudsidan...7 HUR ÄR INFORMATIONEN PÅ WEBBPLATSEN KATEGORISERAD?...8 Kategorisering av länkar i den horisontella menyn...8 Kategorisering av länkar i den vertikala menyn...10 WEBBPLATSENS STRUKTUR OCH PRIORITET...10 NAVIGERING, SYNBARHET OCH SYSTEMSTATUS...11 INFORMATION...12 INTERAKTION MELLAN WEBBPLATSEN OCH ANVÄNDARE...13 DESIGN- OCH INTERAKTIONSOBJEKT...13 Typsnitt och läsbarhet...14 Logotyp...15 Bilder...15 Knappar och pekare...16 ANALYS AV FUNKTIONEN BOKA BILJETTER...17 CENTRAL FUNKTION...17 KÖPA BILJETT...18 RESERVERA BILJETT...19 DJUP STRUKTUR...20 INSTRUKTIONSGIVANDE ANVÄNDARMODELL...20 INMATNING OCH PRESENTATION AV INFORMATION...21 TOOL-TIP...21

SAMMANFATTNING...22 KÄLLFÖRTECKNING...24 LITTERATUR...24 ELEKTRONISKA KÄLLOR...24 BILAGOR...25 BILAGA 1: STARTSIDA...25 BILAGA 2: HUVUDSIDA...26

INLEDNING Denna rapport innehåller resultatet av en expertanalys som är gjord på Svensk Filmindustris webbplats (http://www.sf.se). Analysen är genomförd av Jenny Dafgård i oktober 2003 och ingår som ett moment i kursen Grafiska Gränssnitt. Kursen är en del av magisterprogrammet MDI.Interaktionsdesign som ges av IT-universitet och ligger på Lindholmen i Göteborg. Precis som Jakob Nielsen skriver i Top Ten Guidelines for Homepage Usability så är ett företags webbplats oerhört viktig eftersom den fungerar som företagets ansikte utåt. SF:s webbplats är om än ännu viktigare eftersom det är tänkt att användare här ska kunna boka sina biljetter på ett tillfredsställande och smidigt sätt via Internet. Denna rapport syftar till att identifiera och dokumentera eventuella problem och bekymmer som användare kan tänkas uppleva för att därigenom kunna göra webbplatsen bättre och mer effektiv. Fokus under analysen har varit att se till användarvänlighetsaspekter och positiva egenskaper med SF:s webbplats. Vid granskningen har ingen hänsyn tagits till eventuella tilltänkta specifika målgrupper. Granskningar som denna kan lätt få en negativ klang, men det hänger ihop med själva syftet: att identifiera sådant som kan ställa till med problem för användarna. Som granskare tar man en objektiv ståndpunkt och ser webbplatsen i ett utanförperspektiv, från användarna sett att se för att hitta de problem som de kan tänkas ha med att hitta information eller utföra tänkta uppgifter. 4

Denna granskning har genomförts under kort tid och det har inte funnits tid till att föreslå åtgärder till alla de problem som har definierats. 5

SVENSK FILMINDUSTRIS WEBBPLATS Svensk Filmindustris (SF) webbplats är främst till för att ge information om aktuella och kommande filmer i form av ren fakta om handling, recensioner och filmtrailers. Användare kan även köpa och reservera biobiljetter på webbplatsen. I denna analys betraktas webbplatsen ur olika övergripande perspektiv för att sedan titta närmare på den centrala funktionen på webbplatsen - bokning av biljetter. ÖVERGRIPANDE ANALYS AV SF:S WEBBPLATS FÖRSTA INTRYCKET Användarens första intryck av en webbplats är oerhört viktigt. I många fall är det avgörande för om en användare väljer att stanna kvar på sidan. Nedan beskrivs hur startsidan och huvudsidan upplevs ur en användares perspektiv. Startsidan De första som möter användaren på webbplatsens är en startsida (Se bilaga 1) som består av en rullningslist med olika städer som valalternativ. För att komma vidare till huvudsidan kan man antingen välja vilken stad man vill gå på bio i eller klicka på länken Företagsbiljetter. Samtidigt som startsidan visas på skärmen börjar SF:s introduktionsmelodi att spelas. Melodin är den som brukar spelas innan en film börjar på biografen. Att använda tonerna på webbplatsen är ett 6

bra sätt för SF att skapa en stämning lik den i biosalongerna. Enligt Wickens är ljud som består av mjuka toner ett bra sätt att fånga användarens uppmärksamhet och ge positiv feedback (Björk, föreläsning 15 september). Användaren skapar sig förväntningar om att finna något speciellt och tilltalande på webbplatsen. Melodin sprider en känsla i kroppen, lik den som infinner sig innan en film börjar på bio, om att det nu äntligen börjar! Startsidan går till största del i svart och varm röd färg. Speciellt den röda färgen uppfattas som inbjudande och gör att användaren känner sig välkommen. Sidan signalerar värme och inger ett lugn vilket stämmer väl överens med vad människor brukar förknippa en biograf med. Nämligen att biografer är ett ställe där många människor sitter i en salong med sköna fåtöljer och skrattar och har kul tillsammans. Startsidan är spännande med den svarta bakgrunden och får användaren att vilja klicka sig vidare till huvudsidan. Huvudsidan Introduktionsmelodin, färgerna och logotypen på startsidan sänder ut signaler om vad webbplasten kan tänkas handlar om. Men för att förstå att sidan handlar om film krävs det att man känner igen logotypen eller melodin. Det är inte förrän man valt stad och kommit till huvudsidan (se bilaga 2) som det blir tydligt att det handlar om film. I inledande texten står det: Se vilka filmer som visas på SF bio idag. Här kan du även köpa biljetter direkt via nätet. Denna textrad klargör syftet med webbplatsen (kunna se vilka filmer som visas på bio idag), vad för slags företag som ligger bakom sidan (SF bio) och vad du som användare kan göra på sidan (boka biljetter). Texten är oerhört viktig för mindre företag där användare kanske inte känner till vad företaget 7

arbetar med eller deras syfte. Även för SF som de flesta användare känner till är det bra att den inledande texten finns. På huvudsidan finns mycket information som är grupperat på olika gråa plattor mot den svarta bakgrunden (se bilaga 2). Dessutom finns två olika menyer som länkar till andra sidor med ytterligare information. Huvudsidan, liksom de andra sidorna på webbplatsen, ger ett tämligen gott och enhetligt intryck. Huvudsidan har dock en tendens att till en början uppfattas som rörig med alla dess valmöjligheter. Det sammanfattande intrycket är ändå att informationen är viktig och relevant. HUR ÄR INFORMATIONEN PÅ WEBBPLATSEN KATEGORISERAD? Informationen som finns att tillgå på webbplatsen finner användaren med hjälp av de två olika menyerna. I båda menyerna används text som knappar. Om användarna själva hade fått gruppera informationen som de ville hade de antagligen inte valt att använda sig av två olika menyer. De hade nog grupperat informationen liknande som det är gjort i den horisontella menyn, fast använt sig av underlänkar för att få plats med alla länkar. Informationen som finns under respektive länk är vad användarna förväntar sig finna. Användarnas mentala modell av webbplatsen bör sannolikt vara överensstämmande med utvecklarnas. Kategorisering av länkar i den horisontella menyn Den horisontella menyn är en så kallad explicit meny (se nedan). Knappar na har Bild som visar horisontell meny. 8

fasta positioner och bildar tillsammans en menyrad (Björk, föreläsning 15 september). Länkarna är åtskilda med ett lodrätt streck vilket tydligt skiljer dem från varandra. Antalet länkar är även lagom många till antalet (6 stycken) och stödjer regeln om att användare klarar av att hålla 7 ± 2 informationsbitar i huvudet samtidigt (Lundgren, föreläsning 8 sep). 9

Kategorisering av länkar i den vertikala menyn Den vertikala menyn består av en rullningslist som rullas ut när användaren klickar på Innehåll eller pilen som pekar nedåt. Länkarna här innehåller genvägar till exempelvis Skicka vykort och Förmåner. Ben Schneiderman förespråkar genvägar för erfarna användare och han anser att det är en av de åtta gyllene regler för god interaktionsdesign (Björk, föreläsning 15 september). I listan har man kategoriserat (chunkat) huvudlänkar och underlänkar. Dessa åtskiljs med hjälp av separatorer i form av streckade vågräta linjer. Men antalet chunkade grupper är hela elva stycken och det överstiger regeln om att människan klarar av behandla 7 ± 2 informationsbitar åt gången. För att se alternativen längst ner i listan måste man scrolla. Det hade varit bra om användaren slapp Bild som visar förflytta vertikal meny (rullningslist). muspekaren för att scrolla och istället såg alla alternativ direkt. WEBBPLATSENS STRUKTUR OCH PRIORITET Strukturen på webbplatsen är lite förvirrande med de två olika menyerna. De knappar som finns i den horisontella menyn finns alla i rullningslisten till höger. Däremot finns ytterligare huvudlänkar med tillhörande underlänkar i rullningslisten. Det blir förvirrande för användaren eftersom han eller hon inte förstår varför dessa inte särskiljer sig helt eller är överensstämmande. 10

Rullningslisten innehåller förutom huvudlänkar även underlänkar och fungerar därför bra för den vane användaren. En van användare vill snabbt kunna ta sig dit han eller hon önskar. Den horisontella menyn är mer lämpad för den ovane användaren som kanske aldrig tidigare besökt webbplatsen (Lundgren, föreläsning 8 sep). Att webbplasten använder sig av två olika menysystem kan tyda på att man vid utvecklingen haft svårt att veta till vilken användargrupp man ska rikta sig till och därför försökt tillgodose en bredare målgrupp. Ett åtgärdsförslag är att använda sig av en av menyerna, förslagsvis den horisontella eftersom den lämpar sig för ovana användare. Sedan bör de två menyerna integreras med varandra. För att göra detta krävs att länkarna gås igenom och struktureras om på nytt. Det skulle fungera bra om man i den horisontella menyn använde sig av drop-down menyer. NAVIGERING, SYNBARHET OCH SYSTEMSTATUS Oavsett var i strukturen användaren befinner sig visas systemstatus mellan den horisontella menyn och texten (se bilden). Problem finns dock på vissa sidor eftersom det visar fel! Bild som visar systemstatus. Som exemplet visar så står det Här är du: Våra biografer >> Biografer i Stockholm. Under det står det att man befinner sig bland Göteborgs biografer. Ett annat exempel är när användaren klickat på Kontakta oss i rullningslistan. Systemstatus för Kontakta oss-sidan visar Här är du >> Information. Detta är inte konsekvent och information borde bytas ut till Kontakta 11

oss istället. Dessa fel kan göra användaren osäker och bör därför åtgärdas. På varje enskild sida finns ingen möjlighet att gå bakåt eller framåt. Användaren måste då navigera sig med hjälp av webbrowsern. Det hade varit bra om knappar för bakåt och framåt hade funnits men det fungerar som det är idag också, det är ett övervägande man får göra. INFORMATION Informationen på webbplatsen är lagom till mängden, seriös och trovärdig. Den är även relevant och anpassad efter mediet och målgruppen. Det är viktigt att kontaktinformation alltid finns tillgängligt från alla sidor (Lundgren, föreläsning 8 sep). Kontaktinformation finns att tillgå från SF:s alla sidor om man i rullningslisten scrollar sig längst ner till Kontakta oss. Här finner man information om biografens/-ernas postadresser, vägbeskrivning, kommunikationer, parkering, handikappsanpassning samt att man kan läsa om salongernas storlek och så vidare. Här finns all information man som användare förväntar sig förutom det kanske viktigaste, telefonnummer för de som inte vill boka via Internet utan ringa direkt till en säljare. För att finna ett telefonnummer måste man befinna sig på huvudsidan eller klicka på länken Hem längst till vänster i den horisontella menyn för att komma dit. Här finns telefonnumret inbakat i en text, vilket gör det svårt att urskilja trots att det står i fetstilt. Många användare vill kanske läsa om en film, se en trailer för att sedan boka biljetter per telefon. Många är idag rädda för att lämna ut uppgifter som sitt telefonnummer på Internet och föredrar att ringa istället. Därför borde SF:s telefonnummer synas bättre på huvudsidan och placeras även under Kontakta oss. 12

SF:s telefonnummer finns Bild som visar titelhuvudet med SF:s telefonnummer. även placerat i titelhuvudet på alla sidor (Se bilden). Det är en god idé, men telefonnumret måste framförallt synas på själva huvudsidan där de flesta användare förväntar sig att ett telefonnummer skall finnas. INTERAKTION MELLAN WEBBPLATSEN OCH ANVÄNDARE Interaktionen på webbplatsen sker linjärt och grundar sig på att användaren själv tar initiativ för att nå sitt mål. Information presenteras för användaren efter användarens initiativ. För att få information presenterad krävs ibland att användaren med hjälp av musen eller tangentbordet matar in efterfrågad information (exempelvis telefonnummer, bankomatkortsnummer). Mediet utnyttjas bra till att visa information, filmer och trailers, spela spel och delta i tävlingar. DESIGN- OCH INTERAKTIONSOBJEKT Designen på webbplatsen är tilltalande och stilren. Man förstår enkelt vilka element som är interaktiva (knappar, textinmatningsfält, ikryssbara fält). Designmässigt skiljer sig dock sidorna under länken Bioklubben i färger jämfört med övriga webbplatsen, men det är en smaksak. Färger Färgerna förmedlar en behaglig stämning och är väl överensstämmande med SF:s varumärke. Färgerna som används (svart, grå, vit, röd) är få till antalet och gör sig bra tillsammans. Bakgrundsfärgen på webbplatsen är svart. På bakgrunden finns gråa plattor där information presenteras. Övre delen av sidan, där den 13

horisontella menyn finns, har en vinröd bakgrund. En klarare röd färg har bakgrundsfärg i rullningslisten. Mot alla dessa bakgrundsfärger presenteras text i vit färg, både på rubriker och brödtext. Bakgrunderna som är lugna kontrasteras bra mot texterna (Lundgren, föreläsning 8 sep). Texter som fungerar som hyperlänkar är även de vita. En regel brukar vara att ha länkar i en annan färg än brödtextens (Lundgren, föreläsning 8 sep). Länkarna på SF:s webbplats är alltid understrukna vilket ger tydliga signaler till användaren och anses gott nog. Texterna är korta och utformade för att läsas på skärm, vilket är bra eftersom användare har mindre tålamod och svårare att läsa på skärm (Lundgren, föreläsning 8 sep). Typsnitt och läsbarhet Till brödtexten på webbplatsen används typsnittet Verdana och till rubriker används ett annat typsnitt med sanseriffer som skrivs i versala bokstäver. Det är bra att man inte har blandat så många typsnitt på sidan. En regel som Wickens ger är att inte använda sig av mer än tre olika typsnitt på en webbplats (Björk, föreläsning 15 september). Webbplatsen har god läsbarhet då man har eliminerat överflödig text på ett bra sätt samt att man använder sig av linjärer/sanseriffer vilket är lämpliga att använda på skärm (Lundgren, föreläsning 8 sep). Storleken på webbplatsens typsnitt är fast. Nackdelen med en fast storlek är att det då inte erbjuds någon möjlighet för användaren att själv öka eller minska teckengraden med webbläsarens inbyggda funktioner, för att öka sin upplevda läsbarhet på sidan, exempelvis om man ser dåligt. Detta är enligt Jakob Nielsen en brist i designen. Nielsen 14

anser att man måste respektera användarna och själva låta dem ställa in storlek på texten (Nielsen, 2002). Logotyp SF:s logotyp är på ett tydligt sätt placerad i övre vänstra hörnet av sidan. Logotypen har ingen ALT-text, det vill säga en text som dyker upp när användaren för muspekaren över bilden. Denna text används dels när användaren stängt av visningen av bilder men också för synskadade som får texten uppläst. Denna ALT-text bör med fördel läggas till. Logotypen är inte klickbar och leder inte användaren tillbaka till huvudsidan, vilket är vanligt. Istället har man en Hem-knapp i horisontella menyn som leder dit. Att rekommendera vore att även logotypen länkas till huvudsidan. Bilder Bilderna på sidan anges i Html-koden med specificerad bredd och höjd. Detta gör att layouten återges på ett bra sätt även under det att sidan laddar bilderna eller om användaren har bildvisning avstängd. Bilderna bör använda så kallade ALT-texter som nämndes ovan. Texten i ALT-taggarna visas när användaren för muspekaren över bilden och ger en förklaring av innehållet i bilden, exempelvis ett namn på en film. Bilder är klickvänliga, det vill säga att användare gärna klickar på bilder. Bilderna på webbplatsen är klickbara i de fall de utgör själva länken, men är inte klickbar när texten är hyperlänkad. För att göra det enklare för användaren bör både bilderna och texterna göras till länkar i alla läge. 15

Knappar och pekare Webbplastens knappar låter användaren aktivera funktionalitet. För att visa för användaren vilken funktionalitet knappen har ändras muspekaren till en hand i de fall muspekaren hålls över en länk (Björk, föreläsning 15 september). I de fall sidan laddas så indikeras det genom att muspekaren ändras till ett timglas. 16

ANALYS AV FUNKTIONEN BOKA BILJETTER CENTRAL FUNKTION Den viktigaste och mest använda funktionen på sidan är att köpa biljetter. Därför är det bra att funktionen har givits en central plats på webbplasten. I den horisontella menyn finns Biljetter direkt till höger om Hem-knappen och i den vertikala menyn finns Köp/reservera biljetter placerat högst upp efter Innehåll. Dock upplevs det som förvirrande att länkarnas namn är olika i de båda menyerna. Namnet Biljetter har antagligen valts i den horisontella menyn för att det inte är lika utrymmeskrävande som Köp/reservera biljetter som används i den vertikala menyn. För att vara konsekvent är ett åtgärdsförslag att ändra namnet i vertikala menyn till Biljetter. När användaren har klickat sig till sidan där man kan köpa biljetter och valt vilken tid, film och dag så kommer användaren till en sida där det finns två val att göra: Köpa- eller Reservera biljett (se nedan). Vi köp av biljett måste användaren först välja antalet biljetter som han eller hon vill köpa. Därefter kan betalsätt väljas genom att klicka på en utav de tre knapparna (Betala Bild som visar valmöjligheterna: köp eller reservera biljett. med presentkort, kontokort eller flera 17

betalmedel). Alternativt kan användaren Reservera biljett och väljer då antal biljetter och skriver sedan in sitt telefonnummer i textinmatningsrutan under. Därefter kan användaren klicka på Reservera-knappen. Om användaren inte angett något telefonnummer dyker en text upp som säger: Telefonnummer saknas. Färgen på texten är röd vilket förknippas med varningstext och ger tydliga signaler till användaren om vad som är fel. Det som skiljer de båda valen av biljett (köp respektive reservera) är att användaren i ena fallet får välja salongsplatser och i det andra får platser tilldelat (senedan). KÖPA BILJETT Användare som väljer att köpa biljett och har valt vilken biograf och vilken tid som han eller hon vill gå på bio kommer till en sida där biosalongen finns utritad. Salongsstolarna är utmarkerade och visar vilka som finns i salongen (gråa) och vilka stolar som är upptagna/bokade (röda). När användaren för muspekaren över salongen följer en inramning (Fisheye view) Bild som hur användaren själv kan välja salongsplatser. som visar vilka stolar som är möjliga att boka. De stolar som finns tillgängliga blir vita när muspekaren hålls över dem. Blir de istället vita med ett streck över så betyder det att kombinationen inte godkänns. Salongen är estetiskt 18

snygg, och det är bra att man har hållt sig till de färger som finns på webbplatsen i övrigt. Inzoomningsfönstret (Fisheye view) längst ner till vänster som visar ytterligare information som rad och stolsnummer. Det är en av Fisheyes grundidéer, nämligen att visa detaljinformation där användaren fokuserar (Björk, föreläsning 15 september). Vid inzoomingsfönstret visas även hur lång tid användaren har på sig att bestämma salongsplats. Tiden indikeras med en horisontell stapel som växer fram. Kopplingen mellan inzoomningsfönstret och helhetsbilden ger även ett micro, macro perspektiv. Makro är helhetsbilden och micro detaljinformationen som visas vid inzoomningen (Tufte, 1990). RESERVERA BILJETT Användare som istället för att köpa biljetter vill reservera biljetter ges ingen möjlighet att välja platser i salongen (se nedan). Istället blir man tilldelad de bästa biljetterna av de tillgängliga platserna, räknat från salongens mitt. Användaren vet alltså inte vilka övriga platser i salongen som är bokade eller lediga. Bild som visar hur användaren blir tilldelad en plats i salongen. ställer sig frågande till varför? Att denna funktion är olika på Köp respektive Reservera biljett har säkert sin förklaring, men användaren 19

En åtgärd hade varit att inledningsvis, på sidan där man väljer om man vill Köpa eller Reservera biljett, klargjorde att man har möjlighet att själv välja salongsplatser om man Köper biljett. DJUP STRUKTUR Strukturen för de båda tillvägagångssätten för att köpa/boka biljett är djupa. Användaren gör vissa val på en sida och kommer till en ny där nya val kan göras. Detta är bra eftersom det känns bättre för ovana användaren att göra fler, mindre val när det gäller exempelvis en betalning via Internet. En indikering på hur många steg som köpet/bokningen avser visas (se vänster). Ett problem är dock om användaren vill gå ett steg tillbaka. När användaren befinner sig i steg två av fem Bild som visar antal steg vid köp/bokning. och vill gå tillbaka till steg ett så går det inte att klicka på ettan. Siffrorna fungerar inte som knappar. På vissa av sidorna i de olika stegen har tillbaka-knappar, men inte alla och därför hade det varit bra om siffrorna fungerade som länkar INSTRUKTIONSGIVANDE ANVÄNDARMODELL När användaren köper/bokar biljetter ger användaren webbplatsen instruktioner. Denna form av förfarande kallas för instruktionsgivande användarmodell (Björk, föreläsning 15 september). Exempel är när användaren ber webbplatsen att plocka fram de två bästa platserna som finns tillgängliga i en salong. Webbplatsen utför förfrågan och visar för användaren vilka platser som finns att tillgå. 20

INMATNING OCH PRESENTATION AV INFORMATION När användaren ger webbplatsen instruktioner om vilken information som han eller hon vill ha presenterad så sker det med hjälp av tangentbordet eller musen. Med tangentbordet sker inmatning av text och siffror. I vissa fall finns en fördefinierad lista som användaren kan välja från. På så sätt är SF:s webbplats informativ när det gäller att visa statisk information och interaktiv eftersom användaren kan mata in och ta emot indata (Björk, föreläsning 15 september). TOOL-TIP Ett allvarligt fel på SF:s webbplats är att viktigt information som antalet lediga platser kvar till en föreställning ligger som en hjälptext (se nedan). Texten dyker upp om användaren håller muspekaren över knappen för att köpa biljett (Björk, föreläsning 15 september). Denna osynliga information tar således inte upp plats men går de flesta användare förbi. Informationen är inte Bild som visar hur många platser som finns kvar vid en nödvändig vid föreställning. köp/bokning av biljett, men ju fler platser kvar på en föreställning desto större chans till bra salongsplatser för användaren. En rekommendation är att göra en extra kolumn mellan salongsnamnet och knappen för köp/boka. Här skulle Antal platser kvar-information kunna placeras. 21

SAMMANFATTNING Svensk Filmindustri har en genomtänkt och tilltalande webbplats med relevant information och bra funktioner. På det hela taget upplevs webbplatsen positivt men skulle dock må bra av att med några enkla medel säkra vissa användbarhetsaspekter för att på ett bättre sätt stödja användaren när denne interagerar med webbplatsen. Både startsidan och huvudsidan ger ett bra och enhetligt intryck. Till en början har dock huvudsidan en tendens till att uppfattas som rörig med all dess information och valmöjligheter. Ett stort problem på webbplatsen är de olika menyerna (horisontell och vertikal). De är förvirrande för användarna att använda sig av två menyer som till viss del består av samma länkar. Dessa bör med fördel integreras i en horisontell meny. Vissa mindre allvarliga fel har identifierats såsom att systemstatus i vissa lägen visar fel, vilket kan göra användarna osäkra. SF:s telefonnummer bör synas tydligare på förstasidan och även finnas under länken Kontakta oss där användaren förväntar sig att det ska finnas. SF:s logotyp längst upp i vänstra hörnet är inte länkad till huvudsidan. Detta rekommenderas samt att logotypen får en ALT-text som gör att användare som stängt av bildvisningen vet som finns där. Vad gäller den centrala funktionen Köp/Boka biljetter på SF:s webbplats så bör det klargöras tidigt att användaren själv inte kan välja platser i salongen om han eller hon bokar biljetter. Detta kan endast ske vid av köp av biljett. För att se antal lediga platser kvar till en föreställning måste användaren hålla muspekaren över en knapp. En ALT-text dyker 22

då upp med informationen. Detta bör synliggöras bättre, kanske med en egen kolumn. 23

KÄLLFÖRTECKNING LITTERATUR Tufte, Edward (1990) Envisioning Information. Graphics Press. ELEKTRONISKA KÄLLOR Björk, Staffan (2003) Traditionella grafiska gränssnitt, Föreläsning 15 september. http://www.cs.chalmers.se/idc/ituniv/kurser/03/gg/forelasningar/traditio nella.grafiska.granssnitt.ppt Lundgren, Sus (2003) Webbdesign, Föreläsning 1 september. http://www.cs.chalmers.se/idc/ituniv/kurser/03/gg/forelasningar/webbd esigni.ppt Nielsen, Jakob (2002) Top Ten Guidelines for Homepage Usability. http://www.useit.com/alertbox/20020512.html Nielsen, Jakob (2002) Top Ten Web-Design Mistakes of 2002. http://www.useit.com/alertbox/20021223.html 24

BILAGOR BILAGA 1: STARTSIDA 25

BILAGA 2: HUVUDSIDA 26