Navigationsmönster för responsiv utveckling till mobil webb

Storlek: px
Starta visningen från sidan:

Download "Navigationsmönster för responsiv utveckling till mobil webb"

Transkript

1 Examensarbete 15 högskolepoäng, grundnivå Navigationsmönster för responsiv utveckling till mobil webb Navigation patterns for responsive development towards mobile web Jakob Ebbinger Robert Karlsson Examen: Kandidatexamen 180 hp Examinator: Andreas Göransson Huvudområde: Datavetenskap Handledare: Göran Hagert Datum för slutseminarium:

2 Sammanfattning Uppsatsen undersöker fyra navigationsmönster som kan tillämpas på responsiva webbsidor. Ett navigationsmönster består av själva placeringen av en webbsidas navigationsmeny samt eventuell interaktion en användare måste göra för att få tillgång till denna. Frågeställningen ämnar att utröna vilket av dessa fyra mönster som är bäst lämpat för att implementeras på webbsidor vars menyalternativ även har underkategorier. Studien använder sig av fritt tillgängliga mönster som modifieras och implementeras i fyra webbsidor, en för vardera navigationsmönster. Resultaten utifrån de intervjuer och observationer som utförts visar på att fliksystemet som finns i Paneled prototypen är det navigationsmönster som majoriteten av användaren upplevde som minst tidskrävande och mest överskådligt. I slutsatserna diskuteras det att det inte är optimalt att använda navigationsmönstret Paneled i e-handelssyfte utan ytterligare modifiering p.g.a. av användbarhetsproblem. Abstract This essay examines four navigation patterns that can be applied to responsive websites. A navigation pattern consists of the placement of a website's navigation menu as well as any interaction a user must do to gain access to this. The posed question aims to determine which of these four patterns that are best suited for implementation on websites whose menu items also have subcategories. The study makes use of freely available patterns that are modified and implemented in four websites, one for each navigation pattern. The results from the interviews and observations shows that the tab system that's included in the "Paneled" prototype is experienced as least time consuming and most orderly. In the chapter of conclusions it is stated that it isn't optimal to use navigation pattern "Paneled" for e- commerce purposes without further modification due to usability problems. Keywords: RWD, Responsiv, Navigation, Meny, Mobil, Webb

3 Innehållsförteckning Figurförteckning... 1 Begreppsförklaring Inledning Bakgrund Problemdiskussion Syfte och frågeställning Fokus och avgränsning Metod Litteraturstudie Användartester Testmiljö Intervjuer Testets utformning Metoddiskussion Teori Tillgänglighet Navigering på webbsidor Användbarhet Mobil teknik Responsiv webbdesign Media queries Layoutalternativ Användbara riktlinjer Navigationsmönster Bottom Nav Layout Top Nav Layout Paneled Sidebar on Mobile Only Design Design för små skärmar Navigationsdesign Empiri Bottom Nav Layout Top Nav Layout Paneled Sidebar on Mobile Only Summering Intervjuresultat Analys Bottom Nav Layout Top Nav Layout Paneled Sidebar on Mobile Only Slutsatser Referenser... 22

4 Figurförteckning Figur 1. Illustration över navigationens positionering i Bottom Nav Layout. Figur 2. Illustration över navigationens positionering i Top Nav Layout. Figur 3. Illustration över navigationens positionering i Paneled Layout. Figur 4. Illustration över navigationens positionering i Sidebar on Mobile Only Layout. Figur 5. Totaltid för samtliga utförda uppgifter i Bottom Nav Layout. Figur 6. Sammanställning av testpersonernas uppfattning av navigationsmönstret. Figur 7. Totaltid för samtliga utförda uppgifter i Top Nav Layout. Figur 8. Sammanställning av testpersonernas uppfattning av navigationsmönstret. Figur 9. Totaltid för samtliga utförda uppgifter i Paneled. Figur 10. Sammanställning av testpersonernas uppfattning av navigationsmönstret. Figur 11. Totaltid för samtliga utförda uppgifter i Sidebar on Mobile Only Layout. Figur 12. Sammanställning av testpersonernas uppfattning av navigationsmönstret. Figur 13. Totaltid för samtliga utförda uppgifter i de olika navigationsmönstren. Figur 14. Sammanställning av testpersonernas uppfattning av de olika navigationsmönstren. Begreppsförklaring Tredimensionellt navigationsdjup - Navigationsstruktur i tre nivåer. T. ex. Datorer Laptop Tillverkare URL - Uniform Resource Locator, texten som utgör en webbadress så som UX - User Experience. Interaktionsdesign med syfte att främja användarupplevelse. Dragspelsmeny En meny med utdragbara poster. Varje element i posterna kan antingen agera som en länk till en destination eller dras ut på nytt för att utgöra ytterligare en underkategori. Swipe - En dragrörelse i sidled som utförs med ett eller flera fingrar. 1

5 1.0 Inledning Allt fler människor använder sin mobil för ärenden på internet. I slutet av 2012 bestod 13% av all internettrafik av anrop från mobila enheter såsom mobiltelefoner och surfplattor [17]. Jämför man den siffran med tre år tidigare då mobila internetanrop endast tog upp 1% av internet trafiken så ser man den intensiva utveckling som råder. 15% av svenska konsumenter köpte något online via sin mobil under 2012 [3]. I takt med att användarna besöker webben oftare med hjälp av sin mobiltelefon så börjar verksamheter anpassa sina sidor därefter [18, 16, 8]. Detta sker eftersom det nu finns teknik för att hemsidor anpassar sig efter vilken plattform den besöks ifrån utan att en separat sida som är utvecklad speciellt för mobilanvändning skall behöva anropas. Den här tekniken kallas responsiv webbdesign och är något av ett nybyggarområde. Här råder det inga standarder än utan experimentlustan, kreativiteten och idéerna flödar på många av webbens utvecklarbloggar och särskilt vad gäller navigationsmönster. Den svenska webbsidan Responsivelistan listar svenska responsiva webbplatser och har i skrivande stund 138 länkar. Av dessa är det endast sju stycken webbsidor vars menyer innefattar ett tredimensionellt navigationsdjup eller ett större navigationsdjup än så [22]. 1.1 Bakgrund Wrobleski har identifierat fem stycken layoutmönster som han finner vara de oftast förekommande bland responsiva webbsidor [25]. Dessa mönster har som uppgift att strukturera om innehållet på en webbsida i förhållande till den skärmstorlek på vilken den projiceras. Valet av layoutmönster återspeglas i navigationsmönstret, då sidans layout redan ska ha anpassat sig så pass mycket vid storleksförändringen innan koden tillhörande varje media query initieras. Koden som tillhör en media query bestämmer utseendet på webbsidan för det storleksformat som media queryn är satt till. Den kod som initieras behöver således inte fokusera på att arrangera om befintliga element. Koden ska istället lägga fokus på att framhäva interaktionsmöjligheterna i den nya storleken. Detta görs genom att anpassa interaktionsområden såsom knappar i enlighet med Fitts lag [14] samt att implementera en lämplig navigationstyp. Flertalet navigationsmönster finns redan och nya tillkommer [4, 5]. De navigationmönstren vi avsett att undersöka i den här studien är utvecklade av Luke Wrobleski och Jason Weaver efter Wrobleskis observationer gällande layout mönster [25, 26]. 1.2 Problemdiskussion Då allt mer informationsrika sidor anpassas till en mindre skärmyta desto viktigare blir det att användarens interaktion med webbsidan leder till det för användaren förväntade målet. Navigering blir således väldigt viktigt att ha i åtanke vid responsiv utveckling då användaren förväntar sig ett effektivt gränssnitt för att kunna utföra sitt ärende. Men vilket av de vanligt förekommande navigationsmönster inom responsiv webbdesign är effektivast? 2

6 1.3 Syfte och frågeställning Syftet med vår undersökning är att vi, utifrån den teori vi hittat om responsiv navigering och design skall utröna vilken navigationsmetod som är effektivast vid mobil navigering i ett tredimensionellt navigationsdjup som återfinns på e-handelssidor. Frågeställningen lyder följaktligen: Vilket navigationsmönster för mobilwebb är att föredra vid utveckling av en responsiv e-handelssida? 1.4 Fokus och avgränsning Studiens fokus är lagd på navigation och interaktionen mellan användare och gränssnitt vid responsiv webbdesign för mobil användning. Då den befintliga mängd navigationsmönster som finns, vida överstiger den tid som är avsatt för den här studien, så har vi valt att avgränsa vår studie genom att undersöka fyra stycken navigationsmönster. De fyra mönstren vi har valt har Luke Wrobleski och Jason Weaver tagit fram till ramverket Foundation [28]. Däremot så är ej navigationsmönstren unika för Foundation utan de återfinns även i andra ramverk för webbutveckling. Koden till navigationsmönstren har modifierats för att passa vår studie då syftet är att skapa en simulerad e- handel att utföra användartest på. 2.0 Metod I detta avsnitt redogör vi för de metoder vi valt som tillvägagångssätt med syftet att uppnå godtyckligt resultat. De metoder vi har använt för att komma fram till ett resultat är följaktligen litteraturstudier, observationer och intervjuer. 2.1 Litteraturstudie För att hitta relevant teori till den här studien har vi använt oss främst av litteratur som behandlar navigationsmönster för responsiv utveckling till mobil webb. Mycket litteratur har varit av digital karaktär som tex Kindle och PDF men det har även förekommit tryckt litteratur. Då tekniken är så ny och föränderlig så utgör internetsidor en del av referensmaterialet, då denna information ej var tillgänglig i andra format. En bra källa hittades för mobil användarbarhet och denna användes som guide för att hitta de riktlinjer som gällde mobilt användande. För den responsiva delen av teorin så hittades information om olika områden som webbdesign, navigationsmönster och layoutmönster. Litteraturen användes även för att förklara vad användbarhet är och hur viktigt just detta är för att användaren skall få en bra upplevelse vid interaktion. Exempel på sökord som använts: Responsive web design, webnavigation, navigationpatterns, layoutpatterns, usability, mobile web 3

7 2.2 Användartester Det finns olika anledningar till att göra ett användartest, ett av dessa är att hitta de problem som finns eller uppstår under användning [13, sid 414]. Det finns olika undersökningsmetoder att utgå ifrån om man vill göra ett användartest. I vår undersökning har vi valt en variant som kallas användbarhetstest [13, sid 15]. Detta då Lauesen menar att det är den mest effektiva metoden vid utvärdering av ett system ur aspekten människadatorinteraktion [1, loc 1695], i vilken användbarhet som begrepp ingår. Vad det gäller att välja hur många användare man skall utföra test på, så menar Lauesen att om användartesten utförs av noviser så bör man inte utföra test på fler än tre användare [13, sid 416]. Nielsen däremot säger att fem testpersoner är brukligt för att kunna utröna ett mönster och undvika redundans [21]. Amerikanska Department of Health & Human Services skriver i sin rapport om riktlinjer gällande användbarhet, att sex användare är tillräckligt för att identifiera problem med informationsarkitekturen vid navigering och andra övergripande design spörsmål [24]. Vi valde att utföra testerna på fem personer i två omgångar. 2.3 Testmiljö En mobil testmiljö skapas i form av en simulerad e-handelsida. De produktbilder som finns på sidan samt de produktkategorier som återfinns på sidans meny är hämtade ifrån den svenska hemelektronikbutiken Sibas webbsida. Utifrån den simulerade e-handelssidan skapas ett antal prototyper som får varsitt navigationsmönster implementerat. Samtliga navigationsmönster ges identiska menyer med samma innehåll. Prototyper är en lämplig metod för en sådan här studie eftersom de existerar för att antingen falsifiera eller validera designhypoteser [11, sid 263]. 2.4 Intervjuer För att få ytterligare förståelse för den data som samlas in genom användartesterna, så ämnas även kortare intervjuer att utföras med testpersonerna. Cooper, Reiman och Cronin har lagt fram åtta stycken riktlinjer för hur en kvalitativ undersökning skall utföras [1]. Fyra av dessa ansåg vi vara relevanta för vår undersökning. Återstoden av punkterna uppmuntrar användarens berättande under tiden testen utförs. Vi fann det mer intressant att låta användarna fokusera på uppgifterna som de tilldelats och agera instinktivt, än att de även skulle behöva tänka på vad de skulle säga. Därför ställde vi frågor efter testet var utfört. De fyra relevanta punkterna för undersökningen är: Utför intervjun där interaktionen utförs. Undvik ledande frågor. Undvik att göra användaren till en designer. Undvik tekniska diskussioner. 4

8 2.5 Testets utformning Sju slumpvist utvalda personer på Malmö Högskola samt tre utomstående utgör gruppen av testpersoner som ska utföra användartesterna. Testerna utförs i en vardaglig omgivning, där yttre faktorer kan påverka de olika resultaten i vår undersökning. Faktorer som kan vara påverkande kan t.ex. vara stress, oro, solljus och oljud. Samtliga användartester har utförts på en och samma smartphone, Apple Iphone 3GS. De fyra olika prototyperna laddas in i webbläsaren Safari. Samtliga testpersoner har vana av att navigera på webben med en mobil enhet. Åtta av de tio testpersonerna har erfarenhet av använda en Iphone, varav resterande två har endast erfarenhet av Android baserade smartphones. Testpersonerna får utföra samma fem uppgifter i samtliga prototyper, varför man får anta att inlärning genom återupprepning av uppgifterna kan ha påverkat tidsresultatet. Uppgifterna som skall utföras läses upp för vederbörande och ges även skriftligt. Testpersonernas interaktion med prototyperna har spelats in med mjukvaran Display Recorder för skärminspelning. Detta tillåter oss att återuppspela testtagnings förloppet för att kunna mäta av tider i syfte att sammanställa resultat och observationer. Efter att testen utförts har testpersonerna intervjuats där tonvikten legat på tre frågor som behandlade personernas uppfattningar om prototyperna de interagerat med. 2.6 Metoddiskussion I vår studie har vi valt att använda oss av kvalitativa undersökningar. De kvalitativa metodval som vi har valt är litteraturstudier, observationer samt intervjuer. Gulliksen och Göransson [7, sid 39-41] menar att en sådan triangulering ger ett mer heltäckande och bättre undersökningsresultat än vad en kvantitativ undersökning gör. Gällande våra metodval anser Cooper, Reimann och Cronin att de är bland de metoder som är mest användbara vid en kvalitativ undersökning [1, loc 1589]. De menar på att fördelen med att använda en kvalitativ undersökning är att det hjälper till att förstå domän, sammanhang och begränsningar av det som ska utvärderas. Författarna menar på att detta tillvägagångssätt ger en möjlighet att kunna identifiera olika mönster och beteenden mellan de potentiella användare av den produkt som skall undersökas på ett snabbare och enklare vis. [1, loc 1557]. 5

9 3.0 Teori I detta avsnitt går vi igenom relevant teori för att belysa vikten av att förstå tillgängligheten av information. Mobilanvändare har höga förväntningar om vad de skall kunna utföra på en mobiltelefon och vid mobilt webbsurfande. Användbarhet anses var väldigt viktig då det gäller interaktiva system då systemet skall vara ett stöd för användarna och kunna agera därefter. Syftet med att utveckla speciella webbsidor som är anpassade för mobil användning är att man skall kunna ta bort de funktioner som inte är nödvändiga vid mobil användning. Kapitlet tar upp vad responsiv webbdesign innebär då man optimerar en webbsidas layout efter skärmstorlek och dess skärmorientering. 3.1 Tillgänglighet Mobilanvändare har höga förväntningar om vad som skall kunna utföras på en mobiltelefon och vid mobilt webbsurfande [20, sid 21]. Användare utgår ifrån att det som kan utföras på en webbtjänst på en stationär dator, även skall kunna utföras ifrån en smartphone eller surfplatta. Att ta bort innehåll ifrån mobila webbsidor kan leda till tappat förtroende för tjänsten ifråga. Den stora utmaningen ligger då i att tillfredsställa användarens mobilsurfande genom att skapa en brytpunkt mellan de mobila och vanliga webbsidornas funktioner. Enligt Nielsens och Budius riktlinjer om mobil användbarhet så är det rekommenderat att en mobil webbsida har en länk till den vanliga webbsidan i de fall då det fattas innehåll som endast är åtkomligt på den vanliga webbsidan [20, sid 21]. Användaren bör ha tillgång till allt innehåll på en webbsida oavsett om innehåll har uteslutits på den mobila webbsidan. 3.2 Navigering på webbsidor En webbsidas navigation är kritisk för användarupplevelsen vid interaktion. Webbdesignern Tim Kadlec anser att en navigationsmeny bör uppfölja vissa kriterier [10, sid 87]. I dessa kriterier inbegrips att menyn är så pass intuitiv så att användaren känner att denna har kontroll. Och även att menyn bör kunna användas på olika enheter, dock med hänsyn till de olika enheternas begränsningar. Cooper m.fl. tar också upp detta då de skriver att navigation i form av en meny måste vara åtkomlig för alla och lätt att använda oavsett vilken storlek användaren har på sin skärm. Om en användare blir tvungen att navigera sig fram och tillbaka mellan olika fönster för att uppnå sina mål så leder detta till frustration över uppgiften som skall utföras. Om det finns för många fönster kan användaren komma att bli desorienterad och således tappar bort sig i gränssnittet, något som Cooper m.fl. kallar navigationstrauma [1, loc 5282]. För att förhindra detta så anser de att man bör tillhandahålla en översikt över de navigationsval som finns. Likaså bör man inventera antalet navigationslänkar för att reducera dessa till minsta möjliga antal för att användaren skall slippa navigera i djupa, komplexa trädstrukturer [1, loc 5357, 5580]. Garrett [6, loc 1447], känd inom UX är inne på samma spår då han skriver att navigationsdesignen måste kommunicera genom relationen mellan innehållet 6

10 och den webbsida som användaren tittar på, dvs kommunikationen hjälper användaren att förstå vilka av de tillgängliga navigationsval som finns och matchar det användaren söker. Detta belyser även Nielsen och Budiu [20, sid 73] då de påpekar, att det viktigaste med att länka information är att försäkra sig om att länkar och beskrivningar av kategorier beskriver vad användaren kommer att hitta vid slutet av länken. Då en användare navigerar ner på en webbsida så skall han/hon hela tiden veta under vilken kategori han/hon befinner sig. Zaphiris, Shneiderman och Norman [27, sid 13] skriver att navigationen bör utformas med minimalt djup och maximal bredd. Om det ej är möjligt så anser de att en meny av dragspelskaraktär bör endast användas upp till ett tredimensionellt navigationsdjup. Ett större djup än så minskar drastiskt på användarheten. 3.3 Användbarhet Användbarhet är tveklöst viktigt i ett interaktivt system som används dagligen. Systemet skall vara ett stöd för användarna och agera därefter [7, sid 56]. Detta definieras i ISO-standarden 9241 som Den grad i vilken användare i ett givet sammanhang kan bruka en produkt för att uppnå specifika mål på ett ändamålsenligt, effektivt och för användaren tillfredsställande sätt [9]. Detta överensstämmer med Allwoods [7, sid 57] definition av begreppet användarvänlig vilket innefattar aspekter som åtkomlighet, individualisering, hjälpresurser och förenligt med stöd för människans mentala funktionssätt. 3.4 Mobil teknik Mobila applikationer Enligt Nielsen och Budius så är mobila applikationer både effektivare och mer användarvänliga än mobila webbsidor. En mobilapplikation kan optimeras mer för ett specifikt ändamål än vad en mobilanpassad webbsida kan [20, sid 33-34]. Mobila webbsidor Syftet med utveckla webbsidor för mobil användning är att man ska kunna avlägsna innehåll som inte gör sig lika bra på en mobilenhet som på en stationär enhet. Detta inbegriper även de filer som laddas in, som då byts ut till filer av mindre storlek och upplösning. För att optimera sidan ytterligare så tas innehåll bort för att reducera antalet ord och sekundär information flyttas till andra sidor. Anpassning till den mindre skärmytan görs också genom att förstora upp interaktiva element enligt Fitts lag [14], för att användaren skall besparas från fat finger problemet [19, sid 20]. Utmaningen vid utveckling av mobila webbsidor ligger i att reducera innehållet utan att behöva begränsa samlingen av produkter. Det bör vara samma innehåll på den mobila webbsidan som det är på den konventionella webbsidan för att användaren skall få tillgång till samma produkter oavsett vilken plattform användaren nyttjar. Däremot bör en mobil webbsida ha mindre information om varje produkt och bistå med färre uppgifter om vad användaren kan göra med produkten. Detta är speciellt viktigt då det gäller innehåll på webbsidor som har e-handel [19, sid 2021]. 7

11 Mobila webbsidor tilldelas en egen url som skiljer sig ifrån sin stationära förlaga genom att mobilsidan läggs på en subdomän. Detta kännetecknas genom kontexten som deklarerar vilken typ av URL det är [2] kan ha namnet mobil. eller m. innan det ordinarie domännamnet. En mobil webbsida kan till exempel få en URL adress som eller Responsiv webbdesign Mobile browsing is expected to outpace desktop-based access within three to five years. Two of the three dominant video game consoles have web browsers (and one of them is quite excellent). We re designing for mice and keyboards, for T9 keypads, for handheld game controllers, for touch interfaces. In short, we re faced with a greater number of devices, input modes, and browsers than ever before. [15] I en artikel från 2010 myntade Marcott [15] begreppet responsiv webbdesign. Han lade fram en samling tekniker och tillvägagångssätt för utveckling av en webbsida med den unika egenskapen att den anpassar sig efter sitt sammanhang. Responsiv webbdesign innebär att man optimerar en webbsidas layout efter skärmstorlek och skärmorientering. De olika elementen på webbsidan placeras i en flexibel form bestående av kolumner. I dessa kolumner placeras webbsidans rutnät som kan omformas efter skärmens dimension. När sidan skalas nedåt i plattformsdimensioner mätt, faller de kolumner som finns och bildar en enkel kolumn i mobilens webbläsare. Därför lämpar sig responsiv design för webbplatser där det innehåll som finns på den konventionella webbsidan även skall finnas med på mindre enheter men utan att det sparas in på användbarheten [20, sid 27-28] Media queries Media queries gör det möjligt att definiera vilken designstil som skall användas under speciella förhållanden. Tekniken tillåter utvecklaren att ställa frågor till webbläsaren om ett visst uttryck är sant eller falskt, sedan kan olika stilar skapas för att laddas in utifrån de svar man får tillbaks ifrån webbläsaren [10, sid 64]. Ett exempel är att om mediatypen screen används, så kommer webbläsaren att ladda den bestämda stil som är deklarerad för just den skärmstorlek som den projiceras på. Media queries inbegriper fyra stycken baskomponenter: Mediatyp - vilken mediatyp som skall specificeras för en enhet. Mediauttryck - testar mot en funktion om uttrycket är sant eller falskt. Logiska nyckelord - and, or, not eller Only som låter en skapa komplexa uttryck. Regler - som låter en justera skärmen för hur innehållet skall visas [10, sid 65]. Alla media queries måste innehålla en mediatyp, annars så sätts alla som standard, men deras beteenden varierar beroende på vilken webbläsare som används. Media queries styrka ligger i att det går att testa om en enhet 8

12 använder ett uttryck och om detta uttryck är sant eller falskt [10, sid 66]. Media queries kan ligga i en intern eller extern stilmall, vilken stilmall som skall användas väljs utefter vilken typ av designval som skall göras, de båda stilmallarna har både fördelar och nackdelar. Fördelarna med externa mediafrågor är att filerna blir mindre vilket resulterar i att de blir lättare att underhålla. En annan fördel är att de enheter som inte har stöd för mediafrågor ej behöver påverkas då en separat css-fil kan skapas för dem [10, sid 72-73] Layoutalternativ Fixed width Den vanligaste metoden för att implementera bredden på en layout på webben är att använda sig av en fixerad bredd som vi hädanefter benämner fixed width. Då en fixed width används ger det utvecklare möjlighet att skapa livliga grafiska webbsidor då man vet den exakta storleken som skall visas. Detta gör att innehållet kommer att se nästan identiskt ut på olika skärmstorlekar. Då man skall bestämma hur bred webbsidan skall vara så försöker man att använda sig av den dimension som flest antal besökare använder [10, sid 23]. Det största problemet då man använder sig av en fixed width är att man måste arbeta under många antaganden så som besökarens plattform, skärmstorlek och skärmupplösning. Många av dagens telefoner och surfplattor zoomar ut webbsidornas innehåll så att de får plats på enheternas skärmar vilket inte är så behagligt för användarna [10, sid 23]. Fluid layouts Ett annat alternativ är att använda sig av en rörlig layout där anpassning görs procentuellt och inte efter pixelstorlek. Med detta menas att webbsidans element justerar sig efter bredden på webbläsaren oavsett om det är en datorskärm, surfplatta eller telefon. Då en rörlig layout används så undviks många problem som den fixerade layouten för med sig. De problem som undviks är att den horisontella rullistan i webbläsaren försvinner och att det blir en bättre anpassning av det tomma utrymme utanför sidans innehåll som annars kan uppkomma vid användning av en fixerad storlek. Då en rörlig layout används är detta inte tillräckligt för att layouten skall visas på ett bra sätt oavsett om det visas på en tv eller smartphone [10, sid 25]. Elastic layout Är av samma typ som fluid layout med den skillnaden att anpassningen inte utgörs av pixelstorleken utan måttenheten em. En em är lika med den definierade textstorleken, detta kan exemplifieras med att om en text skulle vara av storlek 16 pixlar så skulle 1em vara lika med 16 pixlar. Då en elastic layout används så skalar denna av webbläsarens textstorlek till en standardstorlek som är 16 pixlar, vilket går att ändra i webbläsarens inställningar om användaren vill. När en elastisk layout används anpassar sig de webbsidorna som besöks efter användarnas bestämda inställningar som är gjorda i webbläsaren [10, sid 25]. 9

13 3.5.3 Användbara riktlinjer Då man designar för en responsiv mobilwebbsida så är det viktigt att samla ihop relevant text och flytta sådan text som inte är ytterst väsentlig för användaren och i så fall länka till en ny sida där det ges möjlighet att läsa resten av texten. Nielsen och Budiu understryker vikten av att skala av innehållet så att det lämpar sig till den enhet som innehållet skall visas på [20, sid 33]. Kadlec har sammanställt följande sex faktorer man bör ta i beaktning inför utveckling av en responsiv webbsida [10, sid ]: Prestanda Är en integrerad del av användarens erfarenhet. Det som fungerar på en enhet kanske inte fungerar på en annan enhet. Sammanhang Användarens uppfattning av en webbsida beror på i vilket sammanhang den besöks. Olika enheter kan användas till olika ändamål och i olika miljöer. Val av innehåll Det är viktigt att omorganisera eller omstrukturera innehållet som skall visas för användaren så att det inte samlas under varandra i en kolumn, dvs om inte innehållet omstruktureras så kan hierarkin försvinna. Tidsinvestering Det tar längre tid att utveckla en webbsida med responsiv design. Innan utveckling kan börja så bör man kartlägga vad det finns för enheter, vilka enheter som webbsidan bör ha stöd för samt hur en användare med en viss enhet förväntar sig att webbsidan ska uppföra sig. Webbläsarstöd Många mobila enheter får problem då webbsidor skalas ner ifrån normal skärmstorlek till mobil storlek. Detta kan lösas genom att man utvecklar för den webbläsare med minst kompatibilitet först och sedan använder sig av media queries för att tillgodose de övriga webbläsare som innehar ett bättre stöd för moderna tekniker [10, sid ]. 10

14 3.6 Navigationsmönster Ett designmönster är en beskrivning av ett problem och grunden till dess lösning skriver Sommerville [23, sid 189] och ordet mönster menar på något återkommande eller kan tillämpas flera gånger så som en mall. Ett navigationsmönster är således ett mönster som består av själva placeringen av en webbsidas navigationsmeny samt eventuell interaktion en användare måste göra för att få tillgång till denna Bottom Nav Layout Figur 1. Illustration över navigationens positionering i Bottom Nav Layout. Navigationsmenyn är placerad på botten av sidan när man besöker sidan med en smartphone. Användaren förflyttas dit vid tryck på menyknappen som återfinns i headern. Menyknappen länkar till ett ankare som är fäst vid menyn i botten vilket gör navigations-mönstret väldigt snabbt. Däremot så kan användaren bli desorienterad av förflyttningen mellan övre och nedre delen av sidan [4]. Menyn i sig är av dragspelskaraktär för att kunna rymma det tredimensionella navigationsdjupet Top Nav Layout Menyn är dold ovanför sidan och fälls ner likt en rullgardin genom tryck på meny knappen. Menyn fälls ner där användaren trycker på menyknappen vilket gör att menyns position ej är desorienterande för användaren [4]. Menyn måste stängas manuellt med tryck på menyknappen. Likt Bottom Nav så är menyn i sig av dragspels-karaktär. 11

15 3.6.3 Paneled Ett fliksystem utgör ett steg av navigationen och vardera flik inne-håller i sig ytterligare en meny med två navigationssteg. Utifrån använda-rtester på webbsidor så anser Krug att fliksystemet är så visuellt distinktivt att det är svårt att mista för något annat än navigation [12, sid 80]. Cooper m.fl. tycker att flikar är ett sätt att lösa navigationsproblem, så länge de ej är för många eller att användaren anser att de är felplacerade [1, loc 5284]. Nielsen anser att flikar endast bör användas för att växla mellan vyer inom samma kontext och ej för att navigera till andra sidor [19] Sidebar on Mobile Only Figur 2. Illustration över navigationens positionering i Top Nav Layout. Menyn är likt Top Nav dold utanför skärmen men fälls in från vänster sida. Likt Bottom Nav och Top Nav så är menyn i sig av dragspelskaraktär. Detta navigationssätt återfinns i smartphoneapplikationer och kan således redan vara bekant för användare [4]. Menyn måste stängas manuellt med ett tryck på meny-knappen. Figur 3. Illustration över navigationens positionering i Paneled. Figur 4. Illustration över navigationens positionering i Sidebar on Mobile Only. 12

16 3.7 Design Enligt Nielsen och Budiu [20, sid 24] bör man designa ett användargränssnitt genom att betona styrkan i tillgänglig input och output i de olika enheterna och arbeta för att minska deras svagheter. Musen som interaktionsverktyg och det mänskliga fingret som touchskärmens input har olika styrkor vilket är en anledning till att skapa olika användargränssnitt till konventionella webbsidor och mobilwebbsidor. De viktigast permanenta objekten i en applikation är huvudfönstrets titel och menyrad. Om det skulle ske oväntade förändringar i en applikations meny så skulle detta resultera i att användaren skulle tappa förtroendet för applikationen, detta gäller för menyobjekt såväl som individuella menyer. Om en applikation har ett verktygsfält så bör det också ha en symbol som användaren känner igen [1, loc 5406] Design för små skärmar Att skriva och interagera med en liten tryckkänslig skärm kan vara svårt, speciellt om målet som man skall trycka på är för litet. Ju mindre ett tryckkänsligt mål är, desto svårare och mer tidskrävande är det för en användare. Enligt Nielsen och Budiu [20, sid 78] så är idealet för tryckkänsliga mål 1cm x 1cm. De anser att bredden har en större betydelse än höjden. Vid mobil utveckling så är det av stor betydelse att minimera de kognitiva kostnaderna som antal klick, scrollningar och förflyttningar som användaren måste göra för att interagera med gränssnittet [20, sid 80] Navigationsdesign Ett användargränssnitt på en stationär dator bör alltid ha ett enkelt navigationsutrymme som undviker en djup hierarki för att underlätta för användaren. Det begränsade utrymmet som en mobilenhet tillhandahåller måste därför vara väldigt välstrukturerat för att förhindra desorientering. Nielsen och Budiu [20, sid 26] anser att navigationsmöjligheterna ska reduceras för att det ej är möjligt att visa all information på varje sida. 13

17 4.0 Empiri I följande avsnitt återges de empiriska resultat för vart och ett av de fyra navigationsmönster som testats samt en summering av testpersonernas åsikter om de samma. 4.1 Bottom Nav Layout Utförandet av de tilldelade uppgifterna tar testpersonerna från 54,8 sekunder och upp till 238,2 sekunder (Figur 5). Testperson ett genomförde uppgifterna snabbast, och testperson sex tog längst tid på sig. Hälften av användarna börjar med att scrolla till botten och upptäcker på så sätt navigationsmenyn. Figur 5. Totaltid för samtliga utförda uppgifter i Bottom Nav Layout. I Figur 6 kan man utläsa att två användare är missnöjda med menyns placering. Två användare anser att de ej har en adekvat översikt över vart de befinner sig i gränssnittet när de utför uppgifterna. En användare anser att navigationsmönstret utgör ett markant problem vid navigation. Sex personer hittar navigationsmenyn genom att scrolla nedåt på sidan. Fyra stycken testpersoner använde menyknappen för att komma till menyn. Menyknappen fungerade ej för en användare varpå han scrollade nedåt och fann menyn. Figur 6. Sammanställning av testpersonernas uppfattning av navigationsmönstret. 14

18 4.2 Top Nav Layout Det sammanställda resultatet för Top Nav Layout visar att en majoritet håller sig under 75 sekunder (Figur 7). Testperson ett blir färdig på 49 sekunder och testperson tre tar längst tid på sig med 238 sekunder. Figur 7. Totaltid för samtliga utförda uppgifter i Top Nav Layout. Fyra personer tycker ej om menyns placering (Figur 8). En av de tio tillfrågade testpersonerna anser att översikten är undermålig och tre personer tycker inte att navigationsmönstret är lämpligt för uppgifterna. Figur 8. Sammanställning av testpersonernas uppfattning av navigationsmönstret. 4.3 Paneled Testperson sju utförde de tilldelade uppgifterna på 56.4 sekunder, vilket är den snabbaste tiden för navigationsmönstret. Testperson två var färdig efter 127 sekunder (Figur 9) och det är således den långsammaste tiden. 15

19 Figur 9. Totaltid för samtliga utförda uppgifter i Paneled. Vad gäller sammanställningen (Figur 10) av frågorna så kan det uttydas att, två personer har invändningar mot menyns placering. Däremot anser samtliga att de har god översikt medan fyra personer anser att navigationsmönstret ej är till belåtenhet. Det fanns användare som visade på fat-finger problemet då de skulle navigera i Paneled, då de tryckte med sitt finger uppe i headern i stället för att trycka på länken i menyraden. Observationerna visade också att en del personer använde webbläsarens tillbakaknapp för att navigera. Figur 10. Sammanställning av testpersonernas uppfattning av navigationsmönstret. 4.4 Sidebar on Mobile Only Den snabbaste tiden för de utförda uppgifterna är 78 sekunder och det är än en gång testperson sju. 169,8 sekunder är den långsammaste tiden och det stod testperson sex för (Figur 11). 16

20 Figur 11. Totaltid för samtliga utförda uppgifter i Sidebar on Mobile Only Layout. Fyra personer anser att menyns placering ej når upp till nivån godkänd. Likt Paneled så tycker alla testpersonerna att de har en god överblick men nio av tio tycker inte att navigationsmönstret lämpar sig i det aktuella sammanhanget (Figur 12). Majoriteten av användarna upplevde problem då de tryckte på menyknappen i navigationsmönstret. Vissa användare ändrade läge på telefonen ifrån porträtt till landskap. En användare tryckte på menyknappen för att öppna samt stänga menyn. En del personer drog (swipe) med sitt finger ifrån höger till vänster. Vissa användare tryckte till höger om menyn efter att de gjort sitt val vilket inte ledde till något resultat, en del av användarna scrollade ner på sidan. Figur 12. Sammanställning av testpersonernas uppfattning av navigationsmönstret. 4.5 Summering Paneled visar på den kortaste uppmätta tiden av uppgifterna som utfördes (Figur 13). Näst kortast tid gav Top Nav Layout. Sidebar on Mobile Only är den näst långsammaste uppmätta tiden. Bottom Nav Layout visar den långsammaste tiden för utförda uppgifter Intervjuresultat Det slutgiltiga sammanställda resultatet av intervjuerna visade att i navigationsmönstret Bottom Nav Layout var det endast två av tio personer som ansåg att placering på denna meny ej var godkänd. Två personer 17

21 upplevde att de hade en dålig uppfattning om vilket steg i menyn de befann sig i under interaktionen. Det var en person som upplevde navigationen ej var godkänd. Figur 13. Totaltid för samtliga utförda uppgifter i de olika navigationsmönstren. Top Nav Layout resultaten visade att det var fyra personer som upplevde att menyn var felplacerad. En person tyckte att de fick en dålig uppfattning om i vilket menysteg de befann sig i medan tre stycken upplevde att de hade navigationsproblem. Paneled resultaten visade att två personer upplevde att det var en dålig placering på menyn. Ingen av användarna tyckte att de hade en dålig uppfattning om i vilket menysteg de befann sig i medan det var fyra stycken som upplevde problem med navigationen. Sidebar on Mobile Only upplevdes av fyra personer som att menyn inte hade en bra placering. Det var ingen som tyckte att de fick en dålig uppfattning om vart de befann sig i menyn men det var endast en användare som upplevde navigationsproblem. Figur 14. Sammanställning av testpersonernas uppfattning av de olika navigationsmönstren. 18

22 5.0 Analys Vi har valt att analysera och presentera de faktorer och data som vi har samlat in ifrån våra observationer och intervjuer som vi utfört. I analysen har vi försökt att hitta olika mönster och samband mellan de olika navigationsmönsterna samt hur dessa påverkar de olika navigationsresultaten. Resultaten har visat att det finns en koppling mellan de resultat vi har fått ifrån intervjufrågorna och de olika navigationsmönsterna som vi har undersökt. 5.1 Bottom Nav Layout Då detta navigationsmönstret har uppmätt längst tider så är det lätt att tro att påståendet om desorientering som Frost [4] skriver om stämmer. Detta falsifieras däremot om man ser till vad användarna själva tycker, då åtta testpersoner anser att översikten är godkänd. Och nio personer anser att navigationsmönstret är bruksdugligt för uppgifterna. Skärminspelningarna visade att endast fyra personer använde sig av menyknappen. Sex personer började med att scrolla nedåt på sidan vilket ledde dem till navigationsmenyn. Menyknappen fungerade ej för en användare varpå personen scrollade nedåt och fann på så sätt navigationsmenyn. Inspelningarna visade även att tre personer använde sig av webbläsarens tillbakaknapp för att navigera tillbaka ifrån tidigare menyval. Vår bedömning av detta beteende är att dessa personerna är vana vid äldre Android versioner, då de har en fysisk tillbakaknapp för just det ändamålet. 5.2 Top Nav Layout Navigationsmönstrets tider har uppmätts till att vara det näst kortaste. Ändå ansåg fyra testpersoner att menyns placeringen ej var godkänd. Vi håller med Frost [4] angående mönstrets orienterande position och tror att statistikens utfall beror snarare på åsikter om menyns navigationsdjup, än dess placering. En meny med ett mindre djup hade säkerligen gett ett annat resultat. Skärminspelningarna visade att det var fyra personer som började med att scrolla upp och ner på sidan, troligtvis för att de först skulle få en överblick över sidan, först därefter så tryckte de på menyknappen för att komma till menyn. 5.3 Paneled Navigationsmönstret visar kortast tider av de fyra som utvärderats. Samtliga användare anser dessutom att överblicken är godkänd vilket gör mönstret anmärkningsvärt. Däremot så såg vi att flikarna var för smala på bredden pga deras antal, vilket Cooper m.fl. tar upp [1, loc 5284]. Detta uppdagades då två användare, vad vi utgår ifrån är feltryck från deras sida, tryckte på headern 19

23 istället för en av flikarna vilket visar på fat-finger problemet [20, sid 20]. Däremot tycker vi inte att Nielsens [20, sid 20] ideala mått för tryckkänsliga mål är realistiska för omfattande navigation på en webbplats som besöks genom en mobiltelefon, då de skulle ta för mycket plats i anspråk. Då samtliga testpersoner anser att överblicken är godkänd så är det tydligt att Krug har rätt [12, sid 80]. Flikarna är svåra att misstolka däremot förvånar det oss att fyra testpersoner ej anser att detta navigationsmönster är lämpligt för ändamålet. Ett förslag på något som kan göras annorlunda, då vår prototyp har statiska flikar är att just göra flikarna dynamiska. Dynamiska i den mening att den rad de befinner sig på hade varit swipe -bar vilket hade tillåtit både större storlek på flikarna samt fler flikar. Precis som i Bottom Nav Layout så visade inspelningarna att det fanns personer som använde sig av webbläsarens tillbaka-knapp för att navigera tillbaka ifrån tidigare menyval. Även i denna bedömning så anser vi att personernas är vana vid äldre Android versioner, då de har en fysisk tillbakaknapp för just det ändamålet. 5.4 Sidebar on Mobile Only Menyns placering är överlag godkänd vilket nog hänvisas till tidigare erfarenhet [4]. Däremot så bidrar avsaknaden av en tydlig stängningsknapp till att nio av tio ej fann navigationsmönstret godkänt. Testpersonerna visade på intressanta interaktionsbeteenden innan de kom fram till hur de skulle göra för att manuellt stänga menyn och nå sitt mål. Sju av dessa swipade fram och tillbaka för att försöka fösa undan menyn och två användare vände mobiltelefonen i landskapsläge, den ene som ett snabbt experiment, den andre tämligen mer ihärdigt. Vi har kommit fram till tre sätt som man kan gå tillväga för att göra vår prototyp mer tillgänglig. En tydlig stängningsknapp ovanför menyn. Att texten på den befintliga menyknappen ändras när menyn är utfälld. Eller att javascript nyttjas för att fälla undan menyn när val är gjort. 6.0 Slutsatser Vi har i den här studien undersökt navigationsmönster som tilldelats en meny med ett navigationsdjup i tre nivåer. Detta är något som i skrivande stund, inte förekommer ofta på responsiva webbplatser, åtminstone inte när sidan skalats ned till mobil nivå. Majoriteten av de responsiva navigationsmönster som finns idag är inriktade på ett endimensionellt navigationsdjup. Vi tror att så är fallet för att det upplevs som lättare och mer underhållande för utvecklare att experimentera med. Att tillsätta ytterligare navigationsalternativ i underkategorier på en begränsad yta kan komma att kräva helt andra lösningar än de som finns tillgängliga. Problematiken ligger då i att det mobila webbsurfandet har ökat markant och fortsätter att öka och att Responsiv Design är ett hett ord som ligger i tiden. Fler företag vill tillämpa denna webbdesignstrend på sina egna hemsidor och då känns det naturligt att även e-handel och andra företag vars sidor kräver en djupare navigation kan komma att göra det. Därför fann vi det intressant att titta på några av de vanligt förekommande mönster och se om de kunde användas för en djupare 20

24 eller mer omfattande navigationsmeny än de som blott innehåller en nivå av länkar. Av våra resultat att döma så är det fliksystem som återfanns i vår Paneled - prototyp både tidseffektivast och mest överskådligt av de vi utvärderat. Däremot så ställer detta navigationsmönster krav på utformandet för att enligt litteraturen, kunna klassas som användarvänligt. Flikarna får inte vara för många till antalet på skärmen samtidigt, eftersom det påverkar både storleken på den tryckkänsliga ytan och läsbarheten. Vår prototyp fallerade i det anseendet då den innehöll fem stycken flikar varav texten i den sista av dessa inte riktigt fick plats. Trots detta gav majoriteten av testpersonerna prototypen godkänt. Navigationsmönstret "Paneled" var även det enda som tvingades dela upp menyn i fler delar, vilket i detta fallet var två delar. Kategori ett utgjorde flikarna och de i sin tur innehöll en dragspelsmeny som innehöll kategori två som hade underkategori tre. Resterande navigationsmönster innefattade en dragspelsmeny som huserade samtliga tre kategorier. Denna uppdelning kan mycket väl vara en bidragande orsak till testpersonernas känsla av att ha översikt över var dom befann sig. Huruvida detta navigationsmönster är bäst lämpat för e-handel eller inte är svårt att ge ett konkret svar på, då det som nämnts ovan kräver ytterligare arbete för att göras användarvänligt. Så det är ej optimalt att använda det befintliga mönstret rakt av i sitt projekt. Däremot så är det i sin nuvarande form, otvetydigt det navigationsmönster som gett mest positiva resultat i vår undersökning. En mer omfattande studie hade kunnat tittat på om de användbarhetslösningarna vi föreslagit till "Paneled"-mönstret gett den effekt vi förutspår. Vidare så hade en sådan studie även kunnat inkludera surfplattsformatet och de eventuella riktlinjer det finns att följa där vid webbutveckling. Då den här studien utgått ifrån användartester utförda på en Apple Iphone så är ett förslag ifrån vår sida för framtida forsknings att utföra en studie där en Android baserad smartphone används och se om avvikelser i beteende och uppfattningar kan uttydas. 21

25 7.0 Referenser [1] Cooper, Alan & Reiman, Robert & Cronin, David. (2007) About Face 3: The Essentials Of Interaction Design [Kindle edition]. Wiley. 3 edition. Canada. ISBN: [2] Coulouris, George, Dollimore, Jean, Kindberg, Tim & Blair, Gordon. (2011) Distributed Systems - Concepts and Design, 5th edition, Boston: Addison- Wesley. [3] DIBS (2012) E-handelsindex. [Hämtad ]. [4] Frost, Brad. (2012) Responsive Navigation Patterns. [Hämtad ]. [5] Frost, Brad. (2012) Complex Navigation Patterns for Responsive Design. [Hämtad ]. [6] Garrett James Jesse. (2010) The Elements Of User Experience: User- Centered Design For The Webb And Beyond [Kindle edition]. New Riders. 2 edition. ISBN: [7] Gulliksen, Jan & Göransson, Bengt. (2011) Användarcentrerad systemdesign. Lund. Studentlitteratur. 1:8. ISBN [8] Ingre, Jorun (2012) Öresundskraft satsar på responsiv webbplats. [Hämtad ]. [9] International Organization for Standardization.(1998) ISO : Ergonomic requirements for office work with visual display terminals (VDTs) -- Part 11: Guidance on usability. csnumber=16883 [Hämtad ]. [10] Kadlec, Tim. (2012) Implementing Responsive Design: Building sites for an anywhere, everywhere web [Kindle edition]. United States Of America. New Riders. 1 edition. ISBN: [11] Koch, Peter-Paul, Rieger, Stephanie, Walton, Trent, Frost, Brad, Olsen, Dave, Kardys, Dennis, Clark, Josh (2012) The Mobile Book [e-book] Freiburg, Smashing Media GmbH. 22

26 [12] Krug, Steve. (2006). Don't Make Me Think: A Common Sense Approach To Web Usability. 2nd Edition, Berkeley: New Riders. [13] Lauesen, Soren. (2007) User Interface Design: A Software Engineering Perspective. Great Britain. Great Britain. Pearson Education Limited. 1:2. ISBN [14] MacKenzie, I. Scott. (2003). Motor behaviour models for humancomputer interaction. In J. M. Carroll (Ed.) HCI models, theories, and frameworks: Toward a multidisciplinary science, pp San Francisco: Morgan Kaufmann. [15] Marcotte, Ethan (2010) Responsive Web Design [Hämtad ]. [16] Marklund, Mikael (2013) NA:s webbchef om starten med responsiv design. [Hämtad ]. [17] Musil, Steven (2012) Mobile Internet traffic gaining fast on desktop Internet traffic. [Hämtad ]. [18] Myrén, Karin (2012) Mobil shopping pressar utvecklarna. [Hämtad ]. [19] Nielsen, Jakob. (2007) Tabs, Used Right. [Hämtad ]. [20] Nielsen, Jakob & Budiu, Raluca. (2012) Mobile Usability [Kindle edition]. United States Of America. New Riders. 1 edition. ISBN: [21] Nielsen, Jakob. (2000) Why you Only need to test with 5 users. [Hämtad ]. [22] Responsivelistan (2013) A till Ö. [Hämtad ]. [23] Sommerville, Ian (2011) Software Engineering, 9th Edition, Boston: Pearson. [24] The U.S. Department of Health & Human Services.(2006) Research-Based Web Design & Usability Guidelines. [Hämtad ]. 23

27 [25] Wrobleski, Luke. (2012) MultiDevice Layout Patterns. [Hämtad ]. [26] Wrobleski, Luke. (2012) Off Canvas MultiDevice Layouts. [Hämtad ]. [27] Zaphiris, P, Shneiderman, B, Norman, K (1999) Expandable Indexes Versus Sequential Menus for Searching Hierarchies on the World Wide Web. [Hämtad ]. [28] Zurb. (2012) Off Canvas Layouts. [Hämtad ]. 24

Introduktion Översikt av kursen och området webbteknik

Introduktion Översikt av kursen och området webbteknik 1ME321 Webbteknik 1 Kursintroduktion och lektion 1 Introduktion Översikt av kursen och området webbteknik Rune Körnefors Medieteknik http://medieteknik.lnu.se/1me321 1 2019 Rune Körnefors rune.kornefors@lnu.se

Läs mer

behövs för enhetlighet, tala samma språk, så att användaren kan lära sig och använda det vidare.

behövs för enhetlighet, tala samma språk, så att användaren kan lära sig och använda det vidare. 1 2 3 Grafisk profil reglerar grunddragen i utseendet (logga, färger, typsnitt) en helhet skapas Vi ska känna igen oss, vi ska förstå vad som avsändaren vill kommunicera. Kan vara svårt att direkt applicera

Läs mer

Responsiv Webbdesign är det framtiden?

Responsiv Webbdesign är det framtiden? Beteckning: Akademin för teknik och miljö Responsiv Webbdesign är det framtiden? Daniel Karlsson juni 2011 Examensarbete, 15 högskolepoäng, C Datavetenskap Datavetenskapliga programmet Examinator: Ann-Sofie

Läs mer

Sju riktlinjer vid utveckling av hemsidor för mobil och desktop

Sju riktlinjer vid utveckling av hemsidor för mobil och desktop Sju riktlinjer vid utveckling av hemsidor för mobil och desktop Denna artikel går igenom hur du gör en hemsida användarvänlig till både vanliga desktopdatorer och mobilanvändare utan att behöva ha två

Läs mer

Design för användbarhet Designexempel, hur tänkte man vid designen?

Design för användbarhet Designexempel, hur tänkte man vid designen? Design för användbarhet Designexempel, hur tänkte man vid designen? Bengt Göransson :: Användbarhetsdesigner Guide Redina AB :: Bengt.Goransson@guide.se Varför? Bengt Göransson, Guide Redina AB, 2005 http://www.guide.se/

Läs mer

Användbar navigering i mobila gränssnitt

Användbar navigering i mobila gränssnitt ! Examensarbete i Medieteknik Användbar navigering i mobila gränssnitt En studie med fokus på faktorer som kan underlätta navigeringen för oerfarna användare av mobila applikationer Författare: Sandra

Läs mer

Responsiv webbplats. Tips på hur innehållet ska ses över för en bra användarupplevelse på alla skärmstorlekar 2014-02-17 1

Responsiv webbplats. Tips på hur innehållet ska ses över för en bra användarupplevelse på alla skärmstorlekar 2014-02-17 1 Responsiv webbplats Tips på hur innehållet ska ses över för en bra användarupplevelse på alla skärmstorlekar 1 Vad är responsivt? Det betyder att webbplatsen känner av vilken skärmstorlek användaren surfar

Läs mer

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

Frågor och svar - Diagnostisk prov ht14 - Webbutveckling 1 Frågor och svar - Diagnostisk prov ht14 - Webbutveckling 1 Bilder och optimering --- Vilken upplösning är lämplig för bilder som ska användas på Internet? Sträva efter korta nedladdningstider. 72 ppi/dpi

Läs mer

Personalisering för mobila användare med avseende på användbarhet

Personalisering för mobila användare med avseende på användbarhet Personalisering för mobila användare med avseende på användbarhet Personalization for mobile users in terms of usability Lisa Enmark ME1401 Examensarbete för kandidatexamen i medieteknik, 15 hp 1. Sammanfattning

Läs mer

Mobile First Video on demand och livesändningar på Internet. Juni 2012

Mobile First Video on demand och livesändningar på Internet. Juni 2012 Mobile First Video on demand och livesändningar på Internet Juni 2012 1 Om detta dokument Marknaden och tekniken kring film (video on demand och livesändningar) på Internet utvecklas blixtsnabbt. Video

Läs mer

Widgetguiden Vad är Publits widgetshop?

Widgetguiden Vad är Publits widgetshop? Widgetguiden Den här guiden är till för dig som vill använda Publits widgetshop för att enkelt sälja böcker direkt på din egen hemsida, blog eller Facebook. Här går vi steg för steg igenom processen för

Läs mer

Skillnader mellan design för tryck och webbdesign

Skillnader mellan design för tryck och webbdesign Vad är en webbtext? Webbtexter är inte en specifik texttyp i likhet med protokoll, rapporter eller artiklar. Istället kan webbtexter vara precis vilken texttyp som helst, och det enda som förenar dem är

Läs mer

Konverteringsskola Del 3: Vad är användbarhet?

Konverteringsskola Del 3: Vad är användbarhet? Konverteringsskolans andra del behandlade vikten av att lära känna sina besökare. Vi kommer nu att arbeta vidare med besökarna i åtanke och fokusera på hur pass väl de kan använda webbplatsen. Om webbplatsen

Läs mer

Prototyper och användartest

Prototyper och användartest Föreläsning i webbdesign Prototyper och användartest Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se Prototyp för en webbplats! Utkast eller enkel variant av webbplatsen" Syfte"

Läs mer

Interaktionsdesign som profession. Föreläsning Del 2

Interaktionsdesign som profession. Föreläsning Del 2 Interaktionsdesign som profession Föreläsning Del 2 Vikten av att göra research Varför behöver vi göra research? En produkt blir aldrig bättre än den data som denna baseras på Men Vi har redan gjort en

Läs mer

Måldriven, informationscentrerad webbdesign

Måldriven, informationscentrerad webbdesign Måldriven, informationscentrerad webbdesign Linus Forsell Digitala Distributionsformer vid Högskolan Väst, Trollhättan, Sverige linus.forsell@student.hv.se 1 Abstrakt I den här essän kommer måldriven och

Läs mer

Checklista Mobila applikationer fo r bank och betalning

Checklista Mobila applikationer fo r bank och betalning Checklista Mobila applikationer fo r bank och betalning Checklistan nedan kan användas till att säkerställa att er mobila applikation för bank och betalning är tillgänglig för personer med funktionsnedsättning.

Läs mer

Avancerade Webbteknologier 2. AD11g Göteborg 2012 Mobilanpassning

Avancerade Webbteknologier 2. AD11g Göteborg 2012 Mobilanpassning Avancerade Webbteknologier 2 AD11g Göteborg 2012 Mobilanpassning Idag Reality Check Strategier för mobilanpassning Problem vid mobilanpassning Exempel på några ramverk Statistik Det finns väldigt mycket

Läs mer

Från Smart TV till Smartare upplevelse Av: Kim Huber och Connie Huanca

Från Smart TV till Smartare upplevelse Av: Kim Huber och Connie Huanca Från Smart TV till Smartare upplevelse Av: Kim Huber och Connie Huanca System vi undersökte Den system vi valde att undersöka var en av de senaste smart tv som finns i markanden och var nämnd till bästa

Läs mer

ActiveBuilder Användarmanual

ActiveBuilder Användarmanual ActiveBuilder Användarmanual Forfatter: TalkActive I/S Dato: Juli 2004 Version: R. 1.01 Sprog: Svensk Copyright 2004 - Talk Active - all rights reserved. Innehåll: 1. INLEDNING...2 2. SNABBSTART...3 3.

Läs mer

Optimering av webbsidor

Optimering av webbsidor 1ME323 Webbteknik 3 Lektion 7 Optimering av webbsidor Rune Körnefors Medieteknik 1 2019 Rune Körnefors rune.kornefors@lnu.se Agenda Optimering SEO (Search Engine Optimization) Sökmotor: index, sökrobot

Läs mer

PP7Mobile User s Guide

PP7Mobile User s Guide PP7Mobile User s Guide PP7 Mobile är en del i PP7s produktserie och är beroende av PP7 Pro Desktop för att fungera. Modulen är optimerad för användning på mobiltelefon och/eller tablet. För användning

Läs mer

www.grade.com LUVIT LMS Quick Guide LUVIT Composer

www.grade.com LUVIT LMS Quick Guide LUVIT Composer www.grade.com LUVIT LMS Quick Guide LUVIT Composer LUVIT Composer LUVIT Composer är ett verktyg för att enkelt skapa snyggt innehåll direkt i LUVITs kurser. Verktyget innehåller designade mallar som du

Läs mer

Utredning: Responsiv webbdesign (RWD)

Utredning: Responsiv webbdesign (RWD) Utredning: Responsiv webbdesign Sida 1 (8) Utredning: Responsiv webbdesign (RWD) Förbehåll Denna utredning fokuserar på det som är närmast relaterat till responsiv webbdesign. Med andra ord kommer inte

Läs mer

Föreläsning 10: Gränssnitt och webbdesign

Föreläsning 10: Gränssnitt och webbdesign Föreläsning 10: Gränssnitt och webbdesign FSR: 6 Att läsa: Kapitel 6 i Rogers et al.: Interaction Design 1501006 Gränssnitt och webb 2 Översikt Gränssnitt historiskt Kännetecken olika gränssnitt Designutmaningar

Läs mer

Nya Medier. Gränssnitt, Interaktivitet och Digital kod

Nya Medier. Gränssnitt, Interaktivitet och Digital kod Nya Medier Gränssnitt, Interaktivitet och Digital kod Människa-Dator: Gränssnittet Tre lager tas upp i boken: Fysiska apparaten som möjliggör för användaren att styra/använda datorn Mjukvara som organiserar

Läs mer

Klarspråk på nätet - Webbredaktörens skrivhandbok av Karin Guldbrand & Helena Englund Hjalmarsson

Klarspråk på nätet - Webbredaktörens skrivhandbok av Karin Guldbrand & Helena Englund Hjalmarsson Klarspråk på nätet - Webbredaktörens skrivhandbok av Karin Guldbrand & Helena Englund Hjalmarsson Klarspråk på nätet är en praktisk handbok för dig som någon gång skriver text för webb, surfplattor och

Läs mer

Innehåll. Styrdon (ej i boken) Fitts lag (sidan ) Natural user interfaces. Kap 6.2.9, , Kap

Innehåll. Styrdon (ej i boken) Fitts lag (sidan ) Natural user interfaces. Kap 6.2.9, , Kap Interaktion 2 Innehåll Styrdon (ej i boken) Fitts lag (sidan 527-528) Natural user interfaces Kap 6.2.9, 6.2.11, 6.2.12 Kap 6.3-6.4 Styrdon Styrdon Tangentbord Pekdon Tangentbord QWERTY-layout QWERTY-layout

Läs mer

Vilken version av Dreamweaver använder du?

Vilken version av Dreamweaver använder du? Sida 1 av 7 Lektion 1: sida 1 av 4 Till kursens framsida Sida 2 av 4» Lektion 1 Då ska vi sätta igång med den här kursens första lektion! Här kommer du att få lära dig hur man skapar och förbereder webbplatser

Läs mer

Föreläsning i webbdesign. Interak*onsdesign. Rune Körnefors. Medieteknik. 2012 Rune Körnefors rune.kornefors@lnu.se

Föreläsning i webbdesign. Interak*onsdesign. Rune Körnefors. Medieteknik. 2012 Rune Körnefors rune.kornefors@lnu.se Föreläsning i webbdesign Interak*onsdesign Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se Från föreläsning F1 Användarcentrerad design "Take the user into account every step of

Läs mer

Undersökning av navigationsmenyer i Android 4.4

Undersökning av navigationsmenyer i Android 4.4 Examensarbete 15 högskolepoäng, grundnivå Undersökning av navigationsmenyer i Android 4.4 Researching navigation menus for Android 4.4 Haavisto, Ville Petersson, Emil Kandidatexamen 180 hp Datavetenskap

Läs mer

Design av användargränssnitt

Design av användargränssnitt Design av användargränssnitt Jan Gulliksen Informationskodning Ge färger, former, fonter, platser betydelse Aktivt, valbart, ej valbart Avvikande data, relationer mellan data, kategorisera, etc.. Var konsekvent

Läs mer

Grundläggande funktioner i CMS ifrån Argonova Systems, 2011.

Grundläggande funktioner i CMS ifrån Argonova Systems, 2011. Grundläggande funktioner i CMS ifrån Argonova Systems, 2011. Syfte Detta dokument tar upp grundläggande funktioner i Argonova Systems CMS i syfte att förbereda och stödja användaren, vid sidan av och inför

Läs mer

Föreläsning 9: Gränssnitt och webbdesign

Föreläsning 9: Gränssnitt och webbdesign Föreläsning 9: Gränssnitt och webbdesign FSR: (1), 4, 6 Att läsa: Kapitel 6 i Rogers et al.: Interaction Design 160429 Gränssnitt och webbdesign 2 Översikt Gränssnitt historiskt Kännetecken olika gränssnitt

Läs mer

INDIVIDUELL INLÄMNINGSUPPGIFT

INDIVIDUELL INLÄMNINGSUPPGIFT INDIVIDUELL INLÄMNINGSUPPGIFT Sofia Aronsson ANVÄNDBARHET OCH GRAFISK DESIGN MIS 13, Nackademin Yrkeshögskola Lärare: Ellinor Ihlström Inledning... 3! Analys... 3! Hitta... 3! Förstå... 5! Använda... 6!

Läs mer

F Secure Booster är ett verktyg för att snabba upp och städa upp i din pc eller

F Secure Booster är ett verktyg för att snabba upp och städa upp i din pc eller F Secure Booster är ett verktyg för att snabba upp och städa upp i din pc eller Android enhet. För Android användaren finns möjligheten att öka batteritiden genom att stänga ner resurser som inte används.

Läs mer

Tentamen på kursen Webbdesign, 7,5 hp

Tentamen på kursen Webbdesign, 7,5 hp Högskolan i Borås Institutionen för data- och affärsvetenskap Malin Nilsson Tentamen Tentamen på kursen Webbdesign, 7,5 hp Tentamenstid: 2012-05-28, kl. 9-13 Hjälpmedel: Inga hjälpmedel tillåtna Betyg:

Läs mer

Slutrapport: Informationsvisualisering av släktträd

Slutrapport: Informationsvisualisering av släktträd Slutrapport: Informationsvisualisering av släktträd Grupp 11 Behzad Charoose, Johan Magnuson, Mikael Onsjö och Sofie Persson 2003-10-10 Göteborg, Chalmers/GU Innehåll 1. INLEDNING...3 2. SYFTE...3 3. METOD...3

Läs mer

GRÄNSSNITTSDESIGN. Ämnets syfte. Kurser i ämnet

GRÄNSSNITTSDESIGN. Ämnets syfte. Kurser i ämnet GRÄNSSNITTSDESIGN Ämnet gränssnittsdesign behandlar interaktionen mellan dator och människa med fokus på designaspekterna i utveckling av användbara, tillgängliga och tilltalande gränssnitt. Det innehåller

Läs mer

Oppositionsprotokoll-DD143x

Oppositionsprotokoll-DD143x Oppositionsprotokoll-DD143x Datum: 2011-04-26 Rapportförfattare Sara Sjödin Rapportens titel En jämförelse av två webbsidor ur ett MDI perspektiv Opponent Sebastian Remnerud Var det lätt att förstå vad

Läs mer

Utvärdering. Övergripande (1) Med/utan användare. Övergripande (2) Fredag 1 oktober F1. Ann Lantz - Anna Swartling -

Utvärdering. Övergripande (1) Med/utan användare. Övergripande (2) Fredag 1 oktober F1. Ann Lantz - Anna Swartling - Utvärdering Fredag 1 oktober 13-15 F1 Ann Lantz - alz@nada.kth.se Anna Swartling - ast@kth.se Övergripande (1) Av den verkliga världen: Hur agerar man, vad händer? Hur används teknik? Beteendevetenskapliga

Läs mer

Bygga kurser för mobila enheter

Bygga kurser för mobila enheter Bygga kurser för mobila enheter NETCOMPETENCE 2017-10-30 Innehåll Inledning... 2 Om Responsive Design och Adaptive Design... 3 Responsive Design... 3 Adaptive Design... 3 Exempel... 4 Tips och rekommendationer...

Läs mer

Rev Oct Användarguide Smartsign 9

Rev Oct Användarguide Smartsign 9 Rev Oct 2013 Användarguide Smartsign 9 Innehållsförteckning Inledning... 4 Arkitektur... 5 Smartsign Player... 5 Smartsign Server... 5 Smartsign Publisher Web... 5 Smartsign Media Server... 5 Smartsign

Läs mer

Responsive web design

Responsive web design IT 12 069 Examensarbete 30 hp December 2012 Responsive web design En studie i hur designkonceptet påverkar användbarheten hos en webbplats Sara Ingmar Institutionen för informationsteknologi Department

Läs mer

Utveckling av Läsaren

Utveckling av Läsaren Utveckling av Läsaren Projektet steg för steg Läsaren har utvecklats sucessivt till att bli den anpassningsbara och situationsoberoende tjänst den är idag. Tabellen nedan visar hur utvecklingen har skett

Läs mer

Formulär, textsträngar och en del annat

Formulär, textsträngar och en del annat 1ME322 Webbteknik 2 Lektion 6 Formulär, textsträngar och en del annat Rune Körnefors Medieteknik http://medieteknik.lnu.se/1me322 1 2018 Rune Körnefors rune.kornefors@lnu.se Agenda JavaScript Interaktion

Läs mer

FrontPage Express. Ämne: Datorkunskap (Internet) Handledare: Thomas Granhäll

FrontPage Express. Ämne: Datorkunskap (Internet) Handledare: Thomas Granhäll FrontPage Express I programpaketet Internet Explorer 4.0 och 5.0 ingår också FrontPage Express som installeras vid en fullständig installation. Det är ett program som man kan använda för att skapa egna

Läs mer

Kom igång. Readyonet Lathund för enkelt admin. Logga in Skriv in adressen till din webbsida följt av /login. Exempel: www.minsajt.

Kom igång. Readyonet Lathund för enkelt admin. Logga in Skriv in adressen till din webbsida följt av /login. Exempel: www.minsajt. Kom igång Logga in Skriv in adressen till din webbsida följt av /login. Exempel: www.minsajt.se/login Nu dyker en ruta upp på skärmen. Fyll i ditt användarnamn och lösenord och klicka på "logga in". Nu

Läs mer

Designmönster, introduktion. Vad är det? Varför skall man använda mönster?

Designmönster, introduktion. Vad är det? Varför skall man använda mönster? Designmönster, introduktion. Vad är det? Varför skall man använda mönster? Kent Petersson EMW, Mölndal Datavetenskap, Chalmers epost1: kentp@cs.chalmers.se epost2: kent.petersson@emw.ericsson.se URL: http://www.cs.chalmers.se/~kentp

Läs mer

Axalon Process Navigator SP Användarhandledning

Axalon Process Navigator SP Användarhandledning Axalon Process Navigator SP Användarhandledning Axalon Process Navigator SP 2013, senast reviderad: den 11 juni 2014 Innehåll Innehåll... 2 Om denna användarhandledning... 3 Syfte... 3 Vem är denna handledning

Läs mer

On-line produktion TDDC61

On-line produktion TDDC61 On-line produktion TDDC61 Förra veckan Kursupplägg HTML FTP Validering Laboration 1. Deadlines Laborationer: 12/10, kl 08 Lämna in efterhand ni blir färdiga Vi rättar inom 4 arbetsdagar Portfolio, tillfälle

Läs mer

Design för användbarhet Designexempel, hur tänkte man vid designen?

Design för användbarhet Designexempel, hur tänkte man vid designen? Design för användbarhet Designexempel, hur tänkte man vid designen? Bengt Göransson :: Användbarhetsdesigner Guide Redina AB :: Bengt.Goransson@guide.se Why? Bengt Göransson, Guide Redina AB, 2005 http://www.guide.se/

Läs mer

Manual HSB Webb brf 2004 03 23

Manual HSB Webb brf 2004 03 23 TERMINOLOGI I Polopoly används ett antal grundläggande begrepp för publicering och hantering av information, eller innehåll som det också benämns. Nedan följer en kort genomgång av denna grundläggande

Läs mer

IT och funk0onshinder

IT och funk0onshinder IT och funk0onshinder Jan Gulliksen Gulan Professor i Människadatorinterak0on, Uppsala universitet ( dec 2009) KTH (feb 2009 ) 1 MDI i Uppsala studerar datorstöd i arbetslivet Vård- och omsorgarbete Administrativt

Läs mer

Datavetenskap. Beteendevetenskap MDI. Design

Datavetenskap. Beteendevetenskap MDI. Design Designprocessen 1 Datavetenskap Beteendevetenskap MDI Design Två betydelser The final solution/plan (e.g. proposal, drawing, model, description) or the result of implementing that plan in the form of the

Läs mer

WEBB PRODUKTION. Tillgänglighet och Användbarhet. 2010 Thomas Mejtoft. Thomas Mejtoft 2010-12-13 2

WEBB PRODUKTION. Tillgänglighet och Användbarhet. 2010 Thomas Mejtoft. Thomas Mejtoft 2010-12-13 2 WEBB 2010 PRODUKTION Tillgänglighet och Användbarhet 2010-12-13 2 1 Tillgänglighet och Användbarhet Tillgänglighet (Accessibility) Användbarhet (Usability) 2010-12-13 3 Tillgänglighet och Användbarhet

Läs mer

1. Polopoly och webbpublicering på SU

1. Polopoly och webbpublicering på SU 1. Polopoly och webbpublicering på SU Den här guiden är en introduktion till webbpubliceringssystemet Polopoly 9.16 för dig som ska arbeta som webbredaktör vid Stockholms universitet. Här går vi igenom

Läs mer

1. (3p) Inom MDI-området framhåller man att människor lär sig via metaforer. Hur menar man att detta går till?

1. (3p) Inom MDI-området framhåller man att människor lär sig via metaforer. Hur menar man att detta går till? 1. (3p) Inom MDI-området framhåller man att människor lär sig via metaforer. Hur menar man att detta går till? Att lära sig via metaforer innebär att man drar nytta av kunskap som användaren redan har,

Läs mer

Användbarhet för webben MDI, Webb och speciella behov 1

Användbarhet för webben MDI, Webb och speciella behov 1 Användbarhet för webben MDI, Webb och speciella behov 1 Hur används webben? Webbsidor läses inte, de skummas! Således, designa för att de ska skommas scanability Vi gör inga optimala val, vi söker något

Läs mer

Webbutveckling Laboration 1: HTML5 och CSS3.

Webbutveckling Laboration 1: HTML5 och CSS3. Institutionen för 2015-11-30 Tillämpad fysik och elektronik Karin Fahlquist Webbutveckling Laboration 1: HTML5 och CSS3. Målsättning Att skapa en webbplats genom att först skapa en Lo-fi prototyp och sedan

Läs mer

QR-kodernas intåg för nytta och nöje!

QR-kodernas intåg för nytta och nöje! QR-kodernas intåg för nytta och nöje! Föredrag av Stig Ottosson om smarta "självlänkande" streckkoder som vi kommer att se alltmer av i framtiden. 2012-06-20 Något stort hände 2007 och 2010 2007 introducerades

Läs mer

Din manual ARCHOS 604 WIFI http://sv.yourpdfguides.com/dref/1227011

Din manual ARCHOS 604 WIFI http://sv.yourpdfguides.com/dref/1227011 Du kan läsa rekommendationerna i instruktionsboken, den tekniska specifikationen eller installationsanvisningarna för ARCHOS 604 WIFI. Du hittar svar på alla dina frågor i instruktionsbok (information,

Läs mer

Design av användargränssnitt. Processen snarare än produkten

Design av användargränssnitt. Processen snarare än produkten Design av användargränssnitt Jan Gulliksen Design och konstruktion av användargränssnitt 1MD113 Processen snarare än produkten Analys -> Design -> Utvärdering -> Återkoppling -> Iterativ Inkrementellt

Läs mer

Strukturering och Planläggning

Strukturering och Planläggning Strukturering och Planläggning 9 November 2005 I början av projektet försökte vi strukturera upp arbetet och få en bättre översikt över vad projektet innebar. Direkt satte vi igång med att producera hemsidan

Läs mer

Välkommen till Studiekanalen.se

Välkommen till Studiekanalen.se Välkommen till Studiekanalen.se Det här produktbladet beskriver besökarens (elevens) väg till utbildningen, hur de matchas mot rätt skola och utbildning. Det beskriver även hur utbildningsanordnaren kan

Läs mer

Interaktion 2 STYRDON, PEKDON OCH ANNAN INTERAKTION ATT RÄKNA MED

Interaktion 2 STYRDON, PEKDON OCH ANNAN INTERAKTION ATT RÄKNA MED Interaktion 2 STYRDON, PEKDON OCH ANNAN INTERAKTION ATT RÄKNA MED Sammanfattning Styrdon Tangentbord och textinmatning Pekdon Fitts lag GOMS-KLM Styrdon Tangentbord Pekdon Tangentbord QWERTY-layout QWERTY-layout

Läs mer

Projekt: Utveckling av ett användargränssnitt

Projekt: Utveckling av ett användargränssnitt Projekt: Utveckling av ett användargränssnitt Daniel Bosk interactivesys.tex 221 2017-09-25 14:46:14Z jimahl Innehåll 1 Introduktion 1 2 Syfte 2 3 Läsanvisningar 2 4 Genomförande 2 5 Examination 3 5.1

Läs mer

Förhandsvisning av Nya Aiai

Förhandsvisning av Nya Aiai Förhandsvisning av Nya Aiai I oktober träffades ett antal kunder för en förhandsvisning av Nya Aiai NYA AIAI Från vänster: Anastasia Georgiadou/Svensk Personlig Assistans Linda Tomtlund/Alma Assistans

Läs mer

ANVÄNDARTESTNING VID LULEÅ UB Ola Andersson Luleå universitetsbibliotek

ANVÄNDARTESTNING VID LULEÅ UB Ola Andersson Luleå universitetsbibliotek ANVÄNDARTESTNING VID LULEÅ UB Ola Andersson Luleå universitetsbibliotek 2017-11-08 ANVÄNDARTESTNING UPPSTART Olika metoder för att testa användbarheten Expertutvärdering -En utvärdering som utförs av ett

Läs mer

Mappar och filer för webbsidor

Mappar och filer för webbsidor Mappar och filer för webbsidor I de4a dokument illustreras det hur du kan arbeta med mappar och filer, då du skapar webbsidor och ska publicera dem för uppgi=erna. Det visas också hur du skickar in redovisningar

Läs mer

Författare: Juha Söderqvist IT-GUI. Version 1.0. Datum

Författare: Juha Söderqvist IT-GUI. Version 1.0. Datum Författare: Juha Söderqvist IT-GUI Version 1.0 Datum 2017-08-18 Innehåll 1. Introduktion... 3 Human-computer interaction... 3 Grafiska användargränssnitt... 4 Operativsystem... 4 Xerox Alto Executive file

Läs mer

QR-kodernas intåg för nytta och nöje!

QR-kodernas intåg för nytta och nöje! QR-kodernas intåg för nytta och nöje! Föredrag av Stig Ottosson om smarta "självlänkande" streckkoder som vi kommer att se alltmer i framtiden. 2012-05-04 Webbvärlden ur exponeringssynpunkt till ca 2010

Läs mer

Manual Anvisningar vid annonsering på startsida i Ratsit 3.0.

Manual Anvisningar vid annonsering på startsida i Ratsit 3.0. Version 2.0 onsdag 12 oktober 2016 1 av 8 Manual Anvisningar vid annonsering på startsida i Ratsit 3.0. Kort beskrivning Instruktioner: Nedan finner du instruktioner kring hur du skapar wallpaper för ratsit.se.

Läs mer

MANUAL FÖR JÄGAREFÖRBUNDETS KRETSAR

MANUAL FÖR JÄGAREFÖRBUNDETS KRETSAR MANUAL FÖR JÄGAREFÖRBUNDETS KRETSAR I följande dokument hittar ni information om hur ni administrerar er nya hemsida. Manualen går endast igenom grundläggande administration. För mer avancerad redigering

Läs mer

Föreläsning 3: Mer om utvärdering, Inspektionsmetoder kan man utvärdera utan användare?

Föreläsning 3: Mer om utvärdering, Inspektionsmetoder kan man utvärdera utan användare? Föreläsning 3: Mer om utvärdering, Inspektionsmetoder kan man utvärdera utan användare? FSR: (1), 2, 5, (6), 7 Att läsa: Kapitel 14-15 i Rogers et al.: Interaction design 160405 Mer om utvärdering 2 Översikt

Läs mer

http://office.microsoft.com/sv-se/word/ha100444731053.aspx

http://office.microsoft.com/sv-se/word/ha100444731053.aspx 1. Öppna Word 2007 i 97-2003 2. Vilken Explorer har jag 3. Inloggning med Explorer 8 4. Sökväg till sidan 5. Ha två fönster öppna 6. Stilar 7. Storleksändra 8. Inklistring av text 9. Bilder till startsidan

Läs mer

Labora&on 6 CSS och responsiv webbdesign övningar/uppgi:er

Labora&on 6 CSS och responsiv webbdesign övningar/uppgi:er Labora&on 6 CSS och responsiv webbdesign övningar/uppgi:er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument Till övningarna i denna labora&on

Läs mer

Människa-Datorinteraktion

Människa-Datorinteraktion Människa-Datorinteraktion Grundutbildnings-, forskarutbildnings- och forskningsämne som behandlar Gränssnitt och kommunikation människa-dator Kommunikation och samarbete människa-människa via (medierat

Läs mer

Sociala medier för företag

Sociala medier för företag Sociala medier för företag Utbildningen ingår i projektet Helikoopter vilket är ett kompetensutvecklingsprojekt som finansieras av Europeiska socialfonden och genomförs i Coompanion Norr och Västerbottens

Läs mer

Syns du, finns du? Examensarbete 15 hp kandidatnivå Medie- och kommunikationsvetenskap

Syns du, finns du? Examensarbete 15 hp kandidatnivå Medie- och kommunikationsvetenskap Examensarbete 15 hp kandidatnivå Medie- och kommunikationsvetenskap Syns du, finns du? - En studie över användningen av SEO, PPC och sociala medier som strategiska kommunikationsverktyg i svenska företag

Läs mer

Innehåll INNEHÅLL. Teckenförklaring... 2. Komma igång

Innehåll INNEHÅLL. Teckenförklaring... 2. Komma igång 2015 INNEHÅLL Teckenförklaring.... 2 Innehåll Komma igång Starta programmet.... 4 Ställ in skärm/projektor... 5 Slå på fönsterläge.... 5 Laddningsskärm.... 6 Ämnesmodul.... 7 Ämnesområde... 8 Ämnesdel....

Läs mer

Process- och metodreflektion. Grupp 3; Ida Gustafsson, Mikael Karlsson, Jonas Lind, Hanne Sundin, Maria Törnkvist

Process- och metodreflektion. Grupp 3; Ida Gustafsson, Mikael Karlsson, Jonas Lind, Hanne Sundin, Maria Törnkvist Process- och metodreflektion Grupp 3; Ida Gustafsson, Mikael Karlsson, Jonas Lind, Hanne Sundin, Maria Törnkvist Planeringen Redan från början av projektet bestämde vi oss i gruppen för att planera utförande

Läs mer

LUVIT LMS Quick Guide LUVIT Composer

LUVIT LMS Quick Guide LUVIT Composer www.grade.com LUVIT LMS Quick Guide LUVIT Composer LUVIT Composer LUVIT Composer är ett verktyg för att enkelt skapa snyggt innehåll direkt i LUVITs kurser. Verktyget innehåller designade mallar som du

Läs mer

Projekt: Utveckling av ett användargränssnitt

Projekt: Utveckling av ett användargränssnitt Projekt: Utveckling av ett användargränssnitt Daniel Bosk interactivesys.tex 157 2016-10-04 21:02:00Z jimahl Innehåll 1 Introduktion 1 2 Syfte 2 3 Läsanvisningar 2 4 Genomförande 2 5 Examination 3 5.1

Läs mer

Mus- och touchinteraktioner

Mus- och touchinteraktioner Mikael Samuelsson Mus- och touchinteraktioner för responsiv webbutveckling Mouse- and Touch Interactions for responsive web development Informatik C-uppsats Termin: 13-05-28 Handledare: Examinator: Lennart

Läs mer

Den kompletta studiehandledningen för kursen DT126G Användbarhet för mobila enheter

Den kompletta studiehandledningen för kursen DT126G Användbarhet för mobila enheter Den kompletta studiehandledningen för kursen DT126G Användbarhet för mobila enheter Daniel Bosk studyguide.tex 1577 2014-01-21 16:59:17Z danbos Innehåll 1 Mål 1 2 Kursupplägg 2 2.1 Schema................................

Läs mer

INTERAKTIONSDESIGN: VAD & HUR?

INTERAKTIONSDESIGN: VAD & HUR? INTERAKTIONSDESIGN: VAD & HUR? Interaktionsteknik & Design, HT-13 Evelina Fagertun evelinafagertun@gmail.com VAD? Vad är interaktionsdesign? HUR? Hur skapar vi bra design? INTERAKTION Wiki: Interaktion

Läs mer

Komma igång med Klassrum. En lärarhandledning om appen Klassrum för Mac

Komma igång med Klassrum. En lärarhandledning om appen Klassrum för Mac Komma igång med Klassrum En lärarhandledning om appen Klassrum för Mac Presentation av Klassrum för Mac Klassrum är en mångsidig app för ipad och Mac som hjälper dig att vägleda eleverna i lärandet, dela

Läs mer

Generella gränssnitt

Generella gränssnitt LINKÖPINGS UNVERSITET Generella gränssnitt En studie i att designa generella gränssnitt för mobiler, surfplattor och datorer Författare: Erik Claesson Kurskod: 729G30 Examinator: Magnus Bång Handledare:

Läs mer

Infomaker-appar med epaper-modulen Funktion och design, grundutförande

Infomaker-appar med epaper-modulen Funktion och design, grundutförande Infomaker-appar med epaper-modulen Funktion och design, grundutförande Mock-ups för att visa hur apparna ser ut och vad utgångspunkten är för vad som ingår i en Infomaker standard-app med epaper. Visar

Läs mer

Nya funktioner i InPrint 3

Nya funktioner i InPrint 3 Hemsida: www.symbolbruket.se Telefon: 013-712 70 E-post: support@symbolbruket.se Nya funktioner i InPrint 3 InPrint 3 är en helt omgjord version av det gamla programmet InPrint 2. Allt du gjorde i In Print

Läs mer

Läsa artiklar i artikeldatabaser med kompensatoriska hjälpmedel

Läsa artiklar i artikeldatabaser med kompensatoriska hjälpmedel Läsa artiklar i artikeldatabaser med kompensatoriska hjälpmedel en översikt Sammanfattning Idag finns det tillgång till en uppsjö vetenskapliga artiklar i form av e-text via artikeldatabaser, insamlade

Läs mer

Version: 1.0.1 Datum: 2012-05-23. DynaMaster 5 Golf Övergripande manual

Version: 1.0.1 Datum: 2012-05-23. DynaMaster 5 Golf Övergripande manual Version: 1.0.1 Datum: 2012-05-23 DynaMaster 5 Golf Övergripande manual Innehållsförteckning 1 Inledning 3 1.1 Systemkrav 3 2 Logga in 4 3 Översikt 5 4 Verktygsfält och funktioner 6 4.1 Översikt gränssnitt

Läs mer

Introduktion till MDI

Introduktion till MDI Introduktion till MDI Anna Swartling ast@kth.se Varifrån kommer MDI? Relativt ny vetenskap, håller fortfarande på och utvecklas Tvärvetenskapligt Kognitiv psykologi Datalogi Ergonomi Pedagogik Socialpsykologi

Läs mer

MÄRKSPRÅK OCH STILMALLAR II EXAMINATIONSUPPGIFT 2 HELENE BROGELAND

MÄRKSPRÅK OCH STILMALLAR II EXAMINATIONSUPPGIFT 2 HELENE BROGELAND MÄRKSPRÅK OCH STILMALLAR II EXAMINATIONSUPPGIFT 2 HELENE BROGELAND 1 Innehåll Inledning... 3 Framework... 3 Val av ramverk... 3 Arbetet med Bootstrap... 4 Preprocessorer... 5 Val av preprocessor... 5 Arbetet

Läs mer

Undervisningen i ämnet webbutveckling ska ge eleverna förutsättningar att utveckla följande:

Undervisningen i ämnet webbutveckling ska ge eleverna förutsättningar att utveckla följande: WEBBUTVECKLING Ämnet webbutveckling behandlar de tekniker som används för att presentera och bearbeta information i webbläsaren samt utifrån dessa tekniker skapa och vidareutveckla statiska och dynamiska

Läs mer

A" utveckla kartor med responsiv design. Johan Lah8 Geografisk IT- utvecklare Stadsbyggnadskontoret, Malmö stad

A utveckla kartor med responsiv design. Johan Lah8 Geografisk IT- utvecklare Stadsbyggnadskontoret, Malmö stad A" utveckla kartor med responsiv design Johan Lah8 Geografisk IT- utvecklare Stadsbyggnadskontoret, Malmö stad Innehåll 1. Vad och varför responsiv design? 2. Hur kan det genomföras? 3. Exempel (smap)

Läs mer

MULTI COMAI WEBBKALENDER

MULTI COMAI WEBBKALENDER 1 MULTI COMAI WEBBKALENDER 1.1 ANVÄNDARE utvecklar och säljer anpassningsbara smartphone 2 Innehåll 1 Inledning... 3 1.1 Terminologi... 3 1.2 Teknisk kravspecifikation... 4 1.3 Behörigheter... 4 2 Start...

Läs mer

Manual HSB Webb brf 2004 03 23

Manual HSB Webb brf 2004 03 23 NYHETER Manual HSB Webb brf 2004 03 23 Nu kan man sätta en hemavdelning på ett arbetsflöde, så att det bara blir synligt från den avdelningen och nedåt i strukturen under en förening. Ett arbetsflöde blir

Läs mer

PREMIUM COMAI WEBBKALENDER

PREMIUM COMAI WEBBKALENDER 1 PREMIUM COMAI WEBBKALENDER 2.0 ADMINISTRATÖR utvecklar och säljer anpassningsbara smartphone 2 Innehåll 1 Inledning... 3 1.1 Terminologi... 3 1.2 Teknisk kravspecifikation... 4 1.3 Behörigheter... 4

Läs mer