Syftet med denna C-uppsats var att implementera ett visualiseringskoncept för att presentera data i ett tidslinjegränssnitt med hjälp av Font Awesome-ikoner inom A4Cloud-projektet. Den huvudsakliga målgruppen utgör personer som främst arbetar inom A4Cloud-projektet. För att kunna belysa brister i visualiseringskonceptet genomfördes användartester där testpersonerna fick använda sig av det upprättade tidslinjegränssnittet samt en konstruerad plattform för att besvara ikoners betydelse. Både kvalitativa intervjuer samt statistiska framställningar genomfördes under studien. De slutsatser som kan dras från denna studie är att några element var svåruppfattade som interaktiva element och svåra att åtskilja från resten av gränssnittet. Testpersoner, blev under studien, tillfrågade under intervjun om de kunde tänka sig använda tidslinjegränssnittet i sin vardag. Orosfaktorn verkar inte ha spelat någon roll när testpersonerna besvarade tidigare nämnda intervjufråga, utan behovet att vilja ha koll på sina delningar med diverse tjänster verkar vara det som avgör. / A4Cloud

Web pages are visited through a variety of different devices with varying screensizes. One method for adaptingweb pages to this variety is called responsive design. Geographical information, often in the form of embeddedmaps, is common on the web. The combination of responsive design and geographical information has beenshown to lead to interaction problems and is therefore assumed to need special considerations. This thesisexamines this combination and investegates how presentation of geographical information can be adapted toresponsive web design. Two versions of the same web page is built, a responsive base version and an adaptedversion designed to alleviate interaction problems with responsive maps. The two versions are comparativelyevaluated to determine the successfulness of the adaptions. Thus, the study shows a solution for building andtesting of a responsive web page with geographical data. The result is presented as recommendations for how aresponsiv web page with geographical information can be designed. / Webbplatser besöks idag genom ett flertal olika enheter med varierande skärmstorlekar. En metod för attanpassa webbplatser till den variation som finns kallas responsiv design. Geografisk information, ofta i form avinbäddade kartor, är ett vanligt inslag på webben. Kombinationen responsiv design och geografisk informationhar visat sig kunna leda till ett antal interaktionsproblem. Uppsatsen undersöker denna kombination ochutreder hur presentation av geografisk information kan anpassas till responsiv webbdesign. Två versioner avsamma webbplats byggs, en responsiv basversion och en anpassad version där hänsyn tagits till problem som kanuppkomma för responsiva kartor. Dessa versioner jämförs med varandra i en utvärdering i syfte att ta reda påom anpassningarna lyckats lösa de interaktionsproblem som påvisats. Studien presenterar således en lösning fördesign och utvädring av en responsiv webbplats för geografisk data. Uppsatsens resultat visas i form avdesignrekommendationer för hur en responsiv webbplats med geografisk information kan utformas.

I detta dokument gestaltas arbetet med att utveckla ett internt administrationssystem till e-handelsföretaget Ehandelssupport. Detta är ett uppdrag i skarpt läge och grundas i företagets behov av att få bättre och mer användaranpassade webbapplikationer som syftar till att underlätta, förenkla och effektivisera vissa frekvent återkommande arbetsuppgifter. Detta innefattar exempelvis en applikation som kan generera prislappar baserat på produktinformation som lagras i webbshoppen Alfahobbys databas. Det inkluderar också en användarvänlig och effektiv lösning för att kunna skapa och skicka ut digitala nyhetsbrev till företagets kunder. Den färdiga applikationen för prislapparna uppfyller de grundönskemål om funktionalitet som företaget hade på denna samtidigt som den nya lösningen medför en rejäl tidseffektivisering i handhavandet med att skapa prislapparna eftersom datat hämtas direkt från databasen via ett nyimplementerat API. Applikationen använder också ramverket jQuery Mobile vilket stödjer responsiv webbdesign. Arbetet med lösningen för de digitala nyhetsbreven resulterade i ett förslag till företaget som innebär att börja använda verktyget Mailigen, detta skulle både förenkla det redaktionella arbetet och förbättra användbarheten för kunderna exempelvis genom att nyhetsbreven får en responsiv webbdesign. Några områden för eventuell framtida vidareutveckling är exempelvis att för applikationen för prislappar lägga till ytterligare kontroller som förhindrar att användaren skriver in fel värden i vissa funktioner. När det gäller nyhetsbreven skulle fortsatt forskning rörande möjligheten att kunna infoga produktinformation direkt från webbshoppens databas vara aktuellt.

I forskningen behandlas valet av teknik för mobil presentation. Uppsatsen lyfter fram faktorer, vilket behöver diskuteras i samband med ett val. De olika teknikerna som diskuteras i uppsatsen är främst responsiv design, webbaserad applikation och nativ applikation. I samband med ett intresse ifrån SLU (Sveriges Lantbruksuniversitet) används organisationen som exempel i uppsatsen, vilket är tänkt att ge ett förslag på hur informationen i uppsatsen skulle kunna relateras till en verklig situation. Arbetet är byggt på en stor samling av tidigare studier, detta för att stärka den information som presenteras i uppsatsen. Intervjuer med anställda på SLUs IT-avdelning har bidragit med en rik insikt i hur verkligheten skulle kunna se ut inom en organisation som denna. Studien bidrar med att lyfta fram faktorer, vilka är viktiga för valet av teknik och hur detta val skulle kunna diskuteras. Detta användes för att ge en rekommendation till SLU, vilket är ett exempel på hur denna uppsats resultat kan användas.

Den här rapporten förklarar tillvägagångssättet för framtagningen utav en responsiv design till webbplatsen Projects & Staff, en webbplats som tidigare hade en fixed design. Projektet består utav två leveranser, hi-fi prototyper skapade i Adobe Illustrator och Adobe Photoshop samt en färdig mobilversion utav webbplatsen, utvecklad med CSS3. Under projektets gång har jag designat för användarupplevelse och användbarhet, två områden som är viktiga inom responsiv webbdesign. Jag har utfört en förstudie i form av en webbplatsanalys, gjort en PACT-analys samt användarintervjuer. Detta för att definiera behoven som fanns för en responsiv design, samt att få en tydlig bild av användare och deras vanor. Målet med projektet har varit en responsiv webbdesign som representeras väl på olika enheter, speciellt smartphone, ett mål som jag lyckats bra med att uppnå. / This report explains the approach for the making of a responsive design to the website Projects & Staff, a website that previously had a fixed design. The project consists of two parts, hi-fi prototypes created in Adobe Illustrator and Adobe Photoshop as well as a complete mobile version of the website, created with CSS3. During the project I have designed for user experience and usability, two areas that are important to responsive web design. I have conducted a feasibility study in the form of a website analysis, made a PACT analysis and user interviews. This to define the needs that existed for a responsive design, and to get a clear picture of the users and their habits. The goal has been a responsive web design represented well on different devices, especially smartphones, a goal that I have done well with achieving.

Fler går över till att använda mobila enheter för att besöka webben samtidigt som e-handelsmarknaden växer. Till skillnad mot fysiska butiker så saknar ofta butiker på nätet möjligheten till att ge tillräcklig information om produkterna. Bilder blir därmed en viktig nyckelfaktor för att ge kunder möjligheten att undersöka produkterna innan köpbeslut fattas. Problemet med bilder är att de bidrar till långsam sidladdning framförallt för de mindre enheterna som används vid e-handel vilket påverkar användbarheten negativt. Studien i projektet undersöker två olika bildimplementationstekniker, en villkorsbaserad bildteknik och flexible image för att undersöka skillnaderna i laddningstid. Prestandamätningarna visade att en villkorsbaserad bildteknik presterar bäst på mobila enheter medans det inte går att säga om det finns någon skillnad mellan bildteknikerna på desktopenheter. För framtiden kan även en webbserver användas istället för en lokal server för att skapa ett mer verklighetsbaserat resultat och fler optimeringar kan göras på bilderna för att utvärdera laddningstiderna ytterligare.

Att göra webbsidor tillgängliga för olika sorters enheter är ett område som har uppstått i och med smartphonens utveckling. Mängden enheter har under de senaste åren ökat stort och det är inte längre endast laptops och datorer som används. Då enheternas skärmupplösning skiljer sig krävs en anpassning beroende på enhet för att ge en bra användarupplevelse. För att identifiera tillgängliga tekniker har en kvalitativ undersökning genomförts. Undersökningen består av en genomgång av utvald litteratur samt intervjuer med utvecklare på företagen Nethouse och Laget.se utförts. Detta för att inhämta information om användandet av tekniker, undersöka om det finns något framträdande tankesätt samt undersöka för- och nackdelar med teknikerna. Slutsatsen är att alla tekniker har sina användningsområden eftersom de har olika styrkor och svagheter. Resultatet från denna studie presenteras som en genomgång av de befintliga teknikerna och deras potentiella användningsområden för att vägleda valet av teknik. / Making web pages available for different types of devices is an area that has arisen with the development of smartphones. In recent years it has become a major increase in units and there are no longer only laptops and computers that are being used. Since there is a size difference between the different devices there is need for adjustment depending on the device to provide a good user experience. The study was carried out as a qualitative study to identify available technologies. A review of available literature and interviews with developers at the companies Nethouse and Laget.se was conducted to obtain information on the performance of the techniques, if there is any way of thinking and if there is advantages and disadvantages of the techniques. The conclusion is that all technologies have their uses as they have different strengths and weaknesses. The results from this study are presented as a review of the existing technologies and their potential uses to guide the choice of technology.

Digital technology is used today to help consumers in everyday life for example, webpage design and appearance for different devices such as computers, smartphones and tablets. Homepages for all devices can be based on a specific coding called "Responsive Web Design" (RWD).From a social and literary point of view, it appears that RWD in its current form has some problems while transitioning from computer displays to tablets and smartphones. Using the common base that RWD allows for equivalent design expression to different screen sizes should be created by all devices. Although this possibility exists today, there are often differences in navigation that can confuse the user. A consistent design expression facilitates the recognition of the navigation. Additionally, the user experience (UX) through the visual expression can enhance the experience of a webpage or medium used and thus create a whole.This study describes how users look at how the implementation of RWD affects two webpages main menu for computer and smartphone devices. The focus has been on studying the user experience in relation to visual expression. The problem is that RWD in different contexts means that visual expression may be less important and thus changing the user experience. With qualitative interviews, four informants have studied two webpages on both computer and smartphone and expressed their own thoughts. The result of the study shows that the differences between webpages on the computer and smartphone devices do not cause difficulties in the use, but if the similarities between the devices are the same, it creates a more positive user experience. / Digital teknik används idag för att hjälpa konsumenter i vardagen t.ex. hemsidors utformning och utseende för olika enheter så som dator, smartphone och läsplattor. Hemsidor för olika typer av enheter kan göras utifrån en specifik kodning som benämns “responsiv webbdesign” (RWD). Utifrån ett samhälls- och litteraturperspektiv framgår det att RWD i sin nuvarande utformning har en del problematik i övergången från dator till läsplattor och smartphones. Med hjälp av den gemensamma basen som RWD möjliggör för anpassning av samma designuttryck till olika skärmstorlekar ska ett konsekvent uttryck skapas genom alla enheter. Även om denna möjlighet finns idag är det ofta skillnader i navigeringen som kan förvirra användaren. Ett konsekvent designuttryck underlättar igenkänningen av navigationen. Till detta kan användarupplevelsen (UX) genom det visuella uttrycket förbättra upplevelsen av en hemsida eller det mediet som används och därmed skapa en helhet. Denna studie beskriver hur användare ser på hur implementeringen av RWD påverkar två hemsidors huvudmenyer för enheterna dator och smartphone. Fokuset har varit att studera användarupplevelsen i förhållande till det visuella uttrycket. Problemet är att RWD i olika kontext, medför att det visuella uttrycket kan få mindre betydelse, och då ändra användarupplevelsen. Med kvalitativa intervjuer har fyra informanter med sina egna tankar studerat två hemsidor på dator och smartphone. Resultatet i studien visar på att olikheter av hemsidor på enheterna dator och smartphone inte skapar svårigheter i användningen, men om likheten mellan enheterna är densamma skapar det en desto mer positiv användarupplevelse.

För att spara tid och ändå få en responsiv webbplats, kan med fördel ett responsivt front-end ramverk användas. Ett responsivt front-end ramverk kan använda olika angreppssätt: desktop-first och mobile-first. Påverkar front-end ramverkens angreppssätt (approach) något på en webbplats svarstider? Eller finns den stora betydelsen var webbplatsen renderar data, som hämtas från en databas? Ett experiment lämpar sig för att testa studiens hypotes. Utvärdering av studiens fyra olika webbapplikationer och analysering av mätningarna finns, för att få fram slutsatsen som är: Det finns ingen större skillnad mellan front-end ramverken, den stora betydelsen finns på val av rendering. Hypotesen motbevisas, då klientapplikationerna är snabbare än serverapplikationerna på alla plattformarna. Mätningar av svarstider finns och vid ett fortsatt arbete är det intressant bland annat också mäta batterimängden och plattformarnas minne. Implementera fler webbapplikationer, som använder andra front-end ramverk, där mätningarna kan exekveras på fler plattformar, webbläsare och scenarier.

To a large extent, business-customer interactions are acted out on digital meeting places. When the possibilities for businesses to engage in face-to-face interactions decrease, relationship building and customer service becomes more of a challenge. Digital services are easily duplicated by competitors and with standardization of interfaces and products, customers tend to switch more frequently between providers. One area where the creation and maintenance of loyal customers appears to be highly relevant is the domain of e-banking. Studies have shown that by personalizing the experience for the user, customer loyalty can be enhanced. Existing methods of interface adaptation shifts the responsibility for the resulting user experience design from the designer to either the user or the system. However, research shows that handing over responsibility for the design to the user can damage the user experience. Furthermore, we argue that as long as computers cannot translate the meaning of what a human communicates, and understand the motivation that lies behind her actions, human designers and researchers need to own the responsibility for designing user experiences. Responsive web design differ from the concept of user responsiveness in the way that it is not truly responsive to the user but to the technical device that is used. Following a design science research methodology, this paper presents the development of a conceptual framework for user responsive user experience design (URUXD) that aims to strengthen the bond between user and provider by enabling a more relevant and personalized user experience. The conceptual framework introduces a way to design user responsive information systems that could be useful in domains where the user audience is large and diverse, as in the case of e-banking. A personalized user experience is enabled by transcending the current use of personas as design tools to also involve them in categorizing real-time users through the use of personas as mapping tools. Multiple persona sets are incorporated in the framework which gives the user experience designer the possibility of designing a holistic user experience for each persona set. The framework thus enables the incorporation of multiple GUI designs in an information system that is user responsive, without the risk of violating usability principles. / Interaktionen mellan företag och kund sker nuförtiden oftast på digitala mötesplatser. När möjligheten för företag att träffa kunden öga mot öga minskar blir det en utmaning att skapa nära affärsrelationer och förmedla bra kundservice. Med konkurrenter som enkelt kopierar digitala tjänster och med en standardisering av gränssnitt och tjänster tenderar kunder att oftare byta leverantör. Inom e-banking framstår därför skapande och upprätthållande av lojala kunder som högst relevant. Genom att personifiera användarupplevelsen kan kundlojaliteten förbättras. Befintliga metoder för gränssnittsadaption lämnar över ansvaret för den resulterande designen från designern till antingen användaren eller systemet. Men, om ansvaret för designen tilldelas användaren kan resultatet bli i en skadad användarupplevelse. Så länge datorer inte kan översätta meningen bakom vad en människa kommunicerar eller skapa en förståelse för en användares bakomliggande motivation till varför hen utför handlingar, måste mänskliga designers inneha ansvaret för designen av användarupplevelsen. Vidare skiljer sig responsiv webbdesign från konceptet användarresponsivitet i meningen att responsiv webbdesign inte är direkt responsiv mot användaren utan snarare mot den tekniska apparat som används. Genom att följa en design science forskningsmetodik utvecklades ett konceptuellt ramverk för design av användarresponsiva användarupplevelser (user responsive user experience design (URUXD)). Målet var att stärka bandet mellan användare och leverantör genom att möjliggöra en mer relevant och personifierad användarupplevelse. Det konceptuella ramverket introducerar ett sätt att designa användarresponsiva informationssystem vilket kan vara användbart i domäner där användargruppen är stor och heterogen, vilket är fallet för e-banking. En personifierad användarupplevelse möjliggörs genom att utöka det befintliga användningsområdet för designverktyget personas till att även inkludera dem som mappningssverktyg för att kategorisera användare i realtid. Multipla persona sets införlivas i ramverket vilket skapar möjlighet för designern att skapa en holistisk användarupplevelse för varje enskilt persona set. Det konceptuella ramverket möjliggör därigenom för multipla gränssnittdesigns för ett informationssystem som därmed blir användarresponsivt, utan att underminera principer för användbarhet.