For an e-commerce business to grow, there are many ways one could try to improve the business in order to gain greater reach and increase sales. One of the main goals of such businesses is to convert as many visitors as possible into customers. Even though many e-commerce businesses already have web analytics tools installed, e-merchants find difficulty in identifying where to start optimizing, what data to extract from analysis reports, and how to make use of such data in order to produce a successful design that will increase the conversion rate. The purpose of this thesis is to (without spending resources on marketing-related factors) guide companies to find a low cost and efficient way to increase the conversion rate by creating well-thought-through designs based on analytic data, qualitative research, and human-computer interaction principles. Google Analytics, a web analytics tool, was used in identifying high-valued pages to optimize and to identify demographics/target groups, while qualitative e-commerce related research was used to shape design-proposal hypotheses. This, along with two A/B tests conducted using Optimizely, is the basis for the guidelines and conclusions. The results of both A/B tests showed an increase in conversions with designs highlighting: evidence of a secure shopping environment, incentives that will attract visitors to buy, and by removing auxiliary navigation elements at the check-out page. The evaluation of the results and its statistical significance was done using both Optimizely’s statistical engine and null hypothesis testing. The increases in conversions were not statistically significant per Optimizely; however, they were significant using traditional statistics. In conclusion, using metrics such as high exit-rates combined with many page views and high revenue-generating pages will allow e-merchants to identify where to start their optimization process. Furthermore, to know what valuable data needs to be extracted, one should seek the data that needs to be inserted into HCI concepts, such as personas and scenarios. This, along with qualitative research allows designers to create well-thought out design-proposals that will potentially lead to an increased conversion rate. / För att få en e-handelsbutik att växa finns det många arbetsområden man kan försöka förbättra för att nå ut till fler samt öka försäljning. Ett av huvudmålen för dessa butiker är att konvertera så många besökare till kunder som möjligt på sin hemsida. Även om många e-handelsbutiker redan har webbanalytiska redskap till sitt förfogande, har många tjänsteleverantörer svårigheter med att fastställa var på hemsidan det skall optimeras, vilken data som ska hämtas från analysrapporter, och hur man använder sig av dessa data för att skapa en lyckad design som kommer öka konverteringsgraden. Syftet med avhandlingen är att, utan marknadsföringsrelaterade investeringar, vägleda företag till billiga och effektiva sätt att öka konverteringsgraden. Detta ska uppfyllas genom att skapa väl genomtänkta designer grundade på analytisk data, kvalitativ forskning, samt människa-datorinteraktions principer. Webbanalysverktyget Google Analytics användes för att identifiera högt värderade sidor att optimera och demografier/målgrupper medan kvalitativ e-handels-relaterad forskning användes för att forma hypoteser kring designförslagen. Detta, tillsammans med två A/B tester som genomfördes med hjälp av Optimizely, är grunden till riktlinjerna och slutsatserna. Resultaten från båda testerna visade en ökning i konverteringar med designer som framhäver; övertygande eller bevis för en säker handelsmiljö, incitament som kommer locka besökare att handla, och genom att ta bort extra navigeringselement vid kassasidan. Utvärdering av resultaten och dess statistiska signifikans gjordes med Optimizelys statistiska motor såväl som egen nollhypotes prövning. Ökningarna av konverteringar var inte statistiskt signifikanta enligt kalkyl från Optimizely, men lyckades nå signifikans enligt traditionell statistik. Sammanfattningsvis, med hjälp av mätvärden så som höga utgångsfrekvenser i kombination med högt antal sidvisningar samt höga intäktsgenererande sidor, kan tjänsteleverantörer nu identifiera var man kan påbörja optimeringsprocessen. För att veta vilken värdefull data man bör extrahera skall man ta reda på vilken data som behövs för att stoppa in i Människa–datorinteraktion (MDI) koncept, som personas och scenarier. Detta, tillsammans med kvalitativ forskning, tillåter webbdesigners att skapa väl genomtänkta designförslag som förhoppningsvis leder till en ökad konverteringsgrad.

Syftet med denna uppsats är att identifiera den mest effektiva egenskapen av en text eller sida för att uppnå visuell hierarki, som är ett verktyg för att få det önskade flödet av uppmärksamhet i en sida eller webbsida genom att ge vissa element en viss vikt i kontrast, storlek och placering. Vi vill ge en möjlighet för vidare forskning snarare än att ge en slutsats som ger ett slutgiltigt svar på frågeställningarna. Det finns fler sätt att manipulera text för att uppnå önskad visuell hierarki men vi valde de vanligaste. Detta arbete är baserat på ett experiment som görs på 50 deltagare med ett onlinefrågeformulär och tre självgjorda bilder där vi kan utvärdera resultaten, jämföra dem med andra teorier och beräkna den mest effektiva uppmärksamhetsgivaren. Vi har också utvecklat en hypotes om vad resultatet kommer att visa. Vår studie föreslår att kontrasten i färg kan vara den viktigaste faktorn för att uppnå och upprätthålla visuell hierarki. / The purpose of this paper is to identify the most effective property of a text or a page to achieve visual hierarchy, which is a tool for getting the desired flow of attention in a page or a web page by giving certain elements a degree of weight in contrast, size and positioning.We want to give an opportunity for further research rather than an absolute conclusion of how it really is. There are more ways to manipulate text to achieve the desired visual hierarchy but we choose the most common. This paper is based on an experiment involving 50 participants with an online questionnaire and three self-made pictures where we will evaluate the results, compare them with other theories and calculate the most effective enhancer of attention. We have also developed a hypothesis on what the results will show. Our study proposes that contrast in color might be the most important factor to achieve and maintain visual hierarchy.

Målet med detta praktiska examensarbete var att ta fram ett färdigt förslag på en ny startsida åt en idrottsorganisation för dess webbplats byggd på WordPress. Detta har åstadkommits genom att ha analyserat den befintliga startsidan samt fyra utomstående idrottsorganisationers webbplatsers startsidor. Analysen resulterade i en Low-Fidelity Wireframe över flödet på den nya startsidan, samt en hårdkodad High-Fidelity Prototyp. Det hela mynnade ut i ett WordPress Child-tema till idrottsorganisationens webbplats befintliga Parent-tema som var väl anpassad efter idrottsorganisationens önskemål och krav, samt byggd med responsivitet i åtanke för att möta den växande skara besökare på mobila enheter. / The goal with this practical thesis was to develop a finished proposal of a new home page to a sport organization for its website built on WordPress. This has been achieved by analyzing the existing home page, as well as the home page of four external sports organization’s websites. The analysis resulted in a Low-Fidelity Wireframe showing the main flow of the new home page, as well as a hard coded High-Fidelity Prototype. It all resulted in a WordPress Child-theme to the existing Parent-theme for the sport organization’s website that was well adapted to the organization’s wishes and demands, and built with responsive web design in mind to meet the growing group of visitors on mobile devices.

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.

Denna studie syftar till att utveckla tumregler för heuristisk utvärdering av typografi i responsiva gränssnitt. Genom att kombinera traditionella typografiska designprinciper med principer för responsiv webbdesign har tolv tumregler tagits fram. Dessa tumregler har i två heuristiska utvärderingar använts av grafiska designers och gränssnittsutvecklare. De båda grupperna har dessutom fått ge sin syn på upplevelsen av att använda tumreglerna. Tumreglernas förmåga att vägleda till hittade typografiska problem i två responsiva gränssnitt har analyserats och framförallt gränssnittsutvecklarnas resultat har varit i fokus, då målet varit att tumreglerna ska kunna fungera som ett verktyg för att skapa bättre design för gränssnittsutvecklare utan utbildning i ämnet. Resultatet har visat att trots att gränssnittsutvecklare inte hittade lika många problem som grafiska designers så hjälper tumreglerna ändå till att hitta problem. Detta indikerar att fler deltagare utan typografisk utbildning kan behövas för att komma upp i samma mängd hittade problem som en grupp med typografiskt utbildade deltagare. Resultatet visar också att utvärderingar av responsiva gränssnitt görs bäst genom att granska gränssnittet på flera enheter med varierande skärmstorlek. / This study aims to develop a set of heuristics for evaluating typography in responsive user interfaces. By combining traditional design principles for typography with principles for responsive web design, twelve heuristics has been created. This list of heuristics has been used by graphic designers and user interface developers in two heuristic evaluations. The heuristics ability to lead to finding typographic problems in two different responsive interfaces has been analyzed, and the results from the user interface developers has been in main focus, since the goal was to create a tool for developers with a lack of knowledge in typography to create interfaces with better design. The results has shown that even though developers struggle to find the samt amount of typography problems as graphic designers, the heuristics does help to find problem. Even so, this indicate that a heuristic evaluation with non-typographic experts may need a few more participants than an evaluation with only typographic experts. The results also shows that an evaluation of a responsive user interface is best made through evaluation of the same interface on different devices with different screen sizes.

Att köpa ekologiskt är ingen ny företeelse, men i takt med att både e-handel och efterfrågan på ekologiska varor konstant ökar så behövs det stöd för designers för att kunna möta dessa utmaningar. För att kunna designa e-handelswebbsidor med ekologiska valmöjligheter krävs förståelse för användaren och dess behov. Genomatt kartlägga målinriktade beteenden går det att påvisa när en användare är mottaglig för ett ekologiskt val på en e-handelswebbsida. En mental modell byggs utifrån användares målinriktade beteende och denna kan användas som stöd av designers för att förstå när en användare är mer mottaglig för ekologiska val på en e-handelswebbsida. Denna studie resulterar i en identifiering och kartläggning över när en användare är mer öppen för ekologiska val. / Buying ecologically not a new phenomenon, but as to both e-commerce and the demand for organic products is constantly increasing, so support is required for designers to meet these challenges. In order to design e-commerce websites with ecological options requires an understanding of the user and their needs. By mapping the targeted behaviors you can detect when a user is susceptible to an ecological choice for an e-commerce website. A mental model is built based onuser's targeted behavior, and this can be used to support the designers to understand when a user is more susceptible to ecological choices on an e-commercewebsite. This study results in the identification and mapping of when a user is more open to ecological choices.

Purpose – The purpose of this report is to find out which frameworks and methods are most popular and most widely used, as well as web developers' views on the hamburgermenu. Method – In order to answer the questions in our report we used the methods quantitative statistical processing, quantitative analysis of data collected via survey and qualitative interviews with web developers. The study was conducted to find out which frameworks and methods are most popular and used most, as well as how web developers look at the hamburgermenu. This was done by analyzing the popularity and usage of different frameworks as well as interviewing web developers who work with it daily. Findings – The results of the report are based on the data collected through the processing of the statistics, the analysis of the survey, and the interviews performed. The result shows which frameworks are most popular and those that are most used. The following list shows the ranking: Most popular: Bootstrap Semantic UI Materialize Material Design Lite Foundation Most used: Bootstrap Foundation Materialize Material Design Lite Semantic UI The results of the interviews showed that most of the web developers interviewed used a framework when they created a website, either an existing or one of their own. It was also a practice to use the same framework in the company, although the way it was used was different from developer to developer. All developers had a mobile-first thought in mind, although it was not always a priority. It was also found in the study that everyone had a basic idea behind the choice of framework, but only one who had performed a study on which one would suit them best. All web developers interviewed thought that the hamburger menu was boring and bad from a user experience perspective. But everyone also agreed that because it is so widely used and has been for a couple of years, users have learned what it means and therefore fulfills its purpose. Implications – The use of the results is primarily linked to individuals or companies that work with web development, but can also be used by private individuals. For the report's primary target group, the results will give an increased understanding of the most used framework and an increased understanding of why these are used. Private individuals can use the result in the same way. Limitations – The limitations we receive in this study are that we cannot make any conclusions about companies and web developers in other parts of the country using the same framework or methods as the local ones we interviewed. Nor can we make any conclusions about why Bootstrap is the most popular and most widely used framework. We can only speculate why with the empirical we gathered through the interviews. A major limitation is also the lack of interviews when we only got answers from 6 of the 10 companies we contacted, of whom 4 would like to participate in the interview. More general conclusions could have been drawn if more companies had been interviewed. Keywords – Framework, Web Development, Responsive Web Design, Interaction Design, User Experience, Bootstrap, Foundation, Materialize, Material Design Lite, Semantic UI / Syfte – Syftet med denna rapport är att ta reda på vilka ramverk och metoder som är populärast och mest använda, samt webbutvecklares syn på hamburgermenyn. Metod – För att besvara frågeställningarna används metoderna kvantitativ bearbetning av statistik, kvantitativ analys av data insamlad via survey samt kvalitativa intervjuer med webbutvecklare. Studien genomfördes för att ta reda på vilka ramverk och metoder som är populärast och används mest, samt hur webbutvecklare ser på hamburgermenyn. Detta gjordes genom att analysera olika ramverks popularitet och användande samt att intervjua webbutvecklare som arbetar med det dagligen. Resultat – Rapportens resultat är baserat på den data som samlats in genom bearbetningen av statistiken, analysen av survey, samt de intervjuer som utfördes. Resultatet visar vilka ramverk som är populärast samt vilka som används mest. Följande lista visar rangordningen: Populärast: Bootstrap Semantic UI Materialize Material Design Lite Foundation Mest använt: Bootstrap Foundation Materialize Material Design Lite Semantic UI Resultatet av intervjuerna visade att majoriteten av de webbutvecklare som intervjuades använde ett ramverk när de skapade en hemsida, antingen ett existerande eller ett eget skapat. Det var också praxis att använda samma ramverk i företaget, även om sättet man arbetade med det kunde skilja sig från utvecklare till utvecklare. Samtliga utvecklare hade ett mobile-first tänk i åtanke, även om det inte alltid prioriterades. Det framgick även i studien att samtliga hade en grundtanke bakom valet av ramverk, men det var endast en som faktiskt hade utfört en undersökning om vilket som skulle passa dem bäst. Samtliga webbutvecklare som intervjuades tyckte att hamburgermenyn var tråkig och dålig ur ett användarupplevelseperspektiv. Men samtliga tyckte även att eftersom den används så brett och har gjort i ett par år så har användare lärt sig vad den innebär och fyller därför sitt syfte. Implikationer – Resultatets användningsområden är främst kopplade till personer eller företag som arbetar med webbutveckling men kommer även att kunna användas av privatpersoner. För rapportens primära målgrupp kommer resultatet att ge en ökad förståelse för vilka ramverk som används mest samt en ökad förståelse för varför dessa används. Privatpersoner kan använda resultatet på samma sätt. Begränsningar – Begränsningarna som vi får i denna studie är att vi inte kan dra några slutsatser om företag och webbutvecklare i andra delar av landet använder sig av samma ramverk eller metoder som de lokala vi intervjuat. Vi kan heller inte dra några slutsatser om varför Bootstrap är det mest populära och mest använda ramverket. Vi kan endast spekulera om varför med hjälp av den empiri vi samlat in via intervjuerna. En stor begränsning är även bristen av intervjuer då vi endast fick kontakt med 6 av de 10 företag som vi kontaktade, varav 4 stycken ville ställa upp på att delta i intervju. Fler generella slutsatser hade kunnat dras om fler företag hade ställt upp på intervjuer. Nyckelord – Ramverk, Webbutveckling, Responsiv webbdesign, Interaktionsdesign, Användarupplevelse, Bootstrap, Foundation, Materialize, Material Design Lite, Semantic UI