Det har aldrig varit lika viktigt som idag att ta hänsyn till internetanvändarens flyktiga uppmärksamhet. Konsten att bevara denna uppmärksamhet är lika komplex som den är ung, och varje dag formuleras nya verktyg för just detta ändamål. Denna rapport ämnar undersöka hur man som webbdesigner kan utforma en webbapplikation som uppnår bra navigerbarhet och därmed god användbarhet, i syfte att inte förlora användares uppmärksamhet. Författarna av denna text utvecklade en webbapplikation i syfte att skaffa sig ett verktyg att kunna nyttja i experiment som ämnar svara på frågan. Efter en serie experiment med användare som testar webbapplikationen har författarna lyckats påvisa och mäta värdet hos webbapplikationselement såsom navigeringsfält, tilläggslänkar och sökfunktioner och deras effekt på webbapplikationen.

Ung Företagsamhet (UF) erbjuder ungdomar i gymnasiet möjligheten att testa på hur det är att driva ett företag under ett års tid. Enligt en enkätundersökning, som utfördes på studenter från Linköpings Universitet och på olika gymnasieskolor, framkom det att den största försäljningen av UF-produkter sker på fysiska marknadsplatser. Enkäten visade även att det fanns ett intresse för en extern e-marknadsplats där UF-företag kan utöka sin försäljning. I det här projektet har Xpanda utvecklats för att möta detta behov med fokus på att försöka skapa en webbapplikation som har hög användbarhet för UF-företag och är lättnavigerad för alla användare. För att uppnå dessa kriterier togs det fram vetenskapliga källor som låg till grund för utformandet av webbapplikationen. Projektet arbetade efter de agila metoderna och var uppdelat i tre iterationer, även känt som sprintar. Efter varje sprint utvärderades resultatet av den dåvarande applikationen med hjälp av användartester. Testgruppernas åsikter samt kommentarer värderades och ledde till förändringar av applikationen för att främja frågeställningen. Prioriteringar behövde göras i utvecklandet, vilket diskuteras i rapporten. Slutsatsen av rapporten är att det är möjligt att utveckla en webbapplikation som upplevs som användbar och lättnavigerad av dess användare. / Ung Företagsamhet (UF) gives youths in high school the possibility to try what it is like to run a business for one year. According to a survey conducted on students at Linköping University and various high schools, it was clear that the majority of sales of UF-products takes place at physical marketplaces. The survey also concluded that there is an interest for an external e-marketplace where UF-companies can expand their sales. In this project, Xpanda has been developed to meet this need with focus on trying to create a web-based application with high usability for UF-companies and has high navigability for all users. In order to achieve these criteria, scientific references were gathered which lay the foundation for the development of the web application. The project worked according to agile methods and the project was divided into three iterations, also known as sprints. After each sprint, the results of the current application was evaluated through user tests. The test groups opinions and comments were evaluated and in some cases led to changes in the application to work towards answering the key questions of the report. Certain priorities had to be made during the development, which is discussed in the report. The conclusion of the report is that it is possible to develop a web application that is perceived as usable and navigable for its users.

Syftet med rapporten var att undersöka hur en e-­butik för matvarupaket kunde utformas och implementeras för att vara användbar avseende navigerbarhet, samtidigt som den inger förtroende hos användaren och uppmuntrar till kundengagemang. Utifrån en förstudie kartlades intresset för produkten. Därefter utvecklades en prototyp och webbapplikationens design utformades. Utvecklingen skedde genom ett iterativt arbetssätt och frågeställningens beståndsdelar testades kontinuerligt i form av användbarhetstester. Rapporten presenterar och diskuterar webbapplikationens design och hur den använts i försök att uppfylla syftet. Även tekniska lösningar avseende utformandet av webbapplikationen diskuteras och motiveras. Slutligen argumenterar rapporten för hur feedback och tydliga knappar gör webbapplikationen förtroendeingivande och navigerbar. Slutsatser kring huruvida webbapplikationen uppmuntrar till kundengagemang har varit svåra att dra och författarna har därför avstått från detta. / The purpose of the report was to examine how an online store selling dinner kits could be designed and implemented to be usable in reference to navigability while inducing trust and encouraging customer engagement. A pre-study was used to determine the interest for the product among the target audience. Thenceforth a prototype was developed and the design of the web application was formed. An iterative process was used during the development of the application and through usability testing the elements of the scientific question was evaluated. The report presents and discusses the design of the web application and how it has been used to fulfill the purpose of the report. Technical solutions regarding the modeling of the web application are discussed and motivated. Finally, it is argued that feedback and distinct buttons make the application trustworthy and easy to navigate over. Conclusions about customer engagement were difficult to make.

Mikrobryggerier som brygger folköl kämpar idag med att nå ut med sina produkter till marknaden. Då e-handeln i Sverige växer kraftigt och befinner sig i en positiv trend skulle ett sätt att förbättra tillgängligheten till marknaden för mikrobryggerier vara att distribuera och marknadsföra hantverksfolköl via en webbapplikation. För att framgångsrikt lansera en sådan lösning och attrahera en stabil kundbas krävs att tilltänkta kunder finner den användbar. Denna rapport redogör för utvecklingsprocessen av en användbar webbapplikation ur ett navigerbarhets-, läsbarhets- och responsivitetsperspektiv. Rapporten tar stöd i teori baserad på vetenskaplig forskning om användbarhet i form av: navigerbarhet, läsbarhet och responsivitet. Programmeringsspråken Python och Flask har använts för serversidan. För klientsidan har HTML, CSS och Bootstrap använts. Vidare har JavaScript-biblioteket jQuery använts för kommunikation mellan klient- och serversidan. Efter utvecklingsfasen utvärderades webbapplikationen med hjälp av användartester. Utifrån presenterad teori och genomförda tester dras slutsatsen att webbapplikationen är användbar. Detta uppnås genom att användaren oavsett var på hemsidan den befinner sig kan navigera sig vidare till önskad del av webbapplikationen med maximalt tre klick. Färger, ikoner, textstorlek och typsnitt har valts så att innehållet är läsbart och slutligen har implementationen av CSS och Bootstrap gjort webbapplikationen responsiv. / Microbreweries producing medium-strong beer are struggling to reach out to their customers. With the help of e-commerce, microbreweries can increase their interaction with their target market. E-commerce in Sweden is a growing trend, but in order to succeed with increased customer relations using a digital platform the end users need to feel a certain degree of satisfaction. A contributing factor to the satisfaction rate is that the end user experiences usability. This thesis discusses the results and development process of a useful e-commerce platform from a navigational, readability and responsiveness perspective. The thesis foundation is based on scientific research on usability in terms of navigability, readability and responsiveness. During development the Python and Flask frameworks were used for server operations and the clientside uses HTML, CSS and the Bootstrap framework. Furthermore, the JavaScript library jQuery was used for communication between front- and back-end. After the development phase an evaluation of the web application was conducted using usability testing. Based on presented theory and conducted tests the thesis conclusion states that the web application is useful. This is achieved by the user, regardless of where on the web application it is located, to navigate to the desired part of the web application with a maximum of three clicks. Furthermore, the choice of colour, text size and font is contributing to readability and finally, the use of CSS and Bootstraphas made the web application responsive.

Today’s consumers increasingly choose subscription services, especially online. Despite this there is a relatively small amount of published theory on the subject of how you develop such a service with the aim of making it navigable and trustworthy. For this reason, it was examined how a subscription service of vinyl records could be developed with these qualities. The results in regard to navigability showed that clarity of links in the web application and a linear page structure had a particularly positive effect. The results as regards to trustworthiness was obtained through a survey where the respondents answered to how trustworthy they considered the web application to be based on pictures from different versions. The survey showed that the web application, in order to be trustworthy, should be implemented with an aesthetically pleasing design in the forms of well thought out colour choices of background and text, without adverts, with symmetrical content as well as with distinct differences in font size between headers and body text. Furthermore, it should be implemented without mistakes such as spelling errors and pictures that fail to load. The content of a web application in form of a subscription service of vinyl records should be relevant for the customer, but the result showed the content aspect did not affect the experienced trustworthiness to the same extent as designs and mistakes. / Dagens konsumenter använder sig allt mer av prenumerationstjänster, framför allt på internet. Trots detta finns det relativt lite publicerad teori för hur en sådan tjänst kan utvecklas med målen att den ska vara navigerbar och tillförlitlig. Med anledning av detta undersöktes hur en webbapplikation för prenumerationstjänster av vinylskivor kan utformas med dessa kvalitéer. För resultatet gällande navigerbarhet visade det sig att tydlighet av länkar i webbapplikationen och en linjär sidstruktur har en särskilt positiv effekt. Resultatet vad gäller tillförlitlighet erhölls genom en enkätundersökning där respondenterna besvarade hur tillförlitlig de ansåg webbapplikationen att vara baserat på bilder från olika versioner av den. Enkätundersökningen visade att webbapplikationen, för att vara tillförlitlig, bör implementeras med estetiskt tilltalande design i form av genomtänkta färgval av bakgrunder och text, utan annonser, med symmetriskt innehåll samt distinkta skillnader i textstorlek mellan rubriker och brödtext. Vidare bör den implementeras utan misstag som språkliga fel samt bilder som ej laddas in. Innehållet på en webbapplikation i form av en prenumerationstjänst av vinylskivor bör vara relevant för kunden, men resultatet visade att innehållsaspekten inte påverkade den upplevda tillförlitligheten i samma utsträckning som design och misstag.

The rise of e-commerce in combination with an increased interest in second-hand products have resulted in multiple marketplaces where buyers and sellers can meet. One area where marketplaces of this kind is used is course litterature, where students often buy and sell used books. The purpose of this report is to study how a web application for buying and selling second-hand course litterature can be designed to affect the perceived usability and trust mainly based on navigability. During the development stage, two user tests were conducted to study how the introduction of new functionality and design affected the usability and trust of the web application. The test results indicate that a website’s search functionality can affect its perceived navigability both negatively and positively depending on how well it meets the users’ expectations. Furhermore, the test results confirm the theory about the importance of link- and button-labels for website navigability. / Den växande e-handeln kombinerat med ett ökat intresse för begagnade varor har resulterat i flera marknadsplatser där köpare och säljare kan mötas. Ett område där marknadsplatser av detta slag används är kurslitteratur, där studenter ofta köper och säljer begagnade böcker. Syftet med detta arbete är att undersöka hur en webbapplikation för handel med begagnad kurslitteratur kan utformas för att påverka den upplevda användbarheten och tilltron med utgångspunkt i navigerbarhet. Under projektets utvecklingsfas genomfördes två andvändartester för att undersöka hur webbapplikationens användbarhet och tilltro påverkades av införandet av nya funktioner och designförändringar. Resultaten från användartesterna indikerar att en hemsidas sökfunktion kan påverka en hemsidas upplevda navigationsförmåga både negativt och positivt beroende på hur väl den möter användarnas förväntningar. Vidare bekräftar användartesternas resultat teorin om att tydliga länk- och knapptexter är av stor vikt för en hemsidas navigerbarhet

A market survey conducted at Linköping University showed that there is a great need for an online marketplace for used course literature. A majority of the survey participants found it difficult to find a counterparty when purchasing or selling used course literature and found the process complicated and time consuming. This laid the foundation for the work in this report which aim is to develop an online marketplace for used course literature with good usability and navigability for student course literature. Usability was evaluated with respect to number of clicks and subjective experience. Navigability was evaluated with respect to time and page views. The result of the study showed that the navigation bar is a critical component for navigability. The navigation bar should be placed at the top of the website and be visible from every subsite. Furthermore, the links with the highest impact were placed as high up as possible and they changed colour when the user hovered over them. The web application’s links and their placement, semantics and design were shown to have a large effect on usability and navigability. The links together with the navigation bar forms a global navigation system which facilitated the navigation for the user. The results also showed that notifications and feedback should be minimal and relevant to the user. / En marknadsundersökning vid Linköpings Universitet visade på att det finns ett stort behov av en marknadsplats online för begagnad kurslitteratur. En majoritet av respondenterna upplevde att de hade svårt att hitta en motpart vid köp och försäljning av begagnad kurslitteratur samt att det är krångligt och tidskrävande. Detta lade grunden till arbetet i denna rapport med syftet att utveckla en digital marknadsplats för begagnad studentlitteratur med god användbarhet och navigerbarhet. Användbarhet undersöktes med avseende på antal klick och subjektivupplevelse. Navigerbarhet utvärderades med hänsyn till tid och sidvisningar. Studiens resultat visade bland annat på att navigationsbaren är en kritisk komponent för navigerbarhet. Navigationsbaren ska placeras högt upp och ska vara synlig på varje undersida. Vidare placerades de viktigaste länkarna högt upp och de ändrade färg när användaren hovrade över dem. Länkarna med dess placering, semantik och design visade sig vara av betydelse för användbarhet och navigerbarhet. Länkarna tillsammans med navigationsbaren bildade ett globalt navigationsystem som underlättade navigeringen för användaren. Resultatet visade ̈aven att notifikationer och feedback ska vara minimal och relevant för användaren.

Studies show that web shops with a good design and easy-to-navigate structure positively affect the usability. To test this claim, LiU-store's current web shop was developed according to design and navigation principles and according to the wishes of the customer group. The purpose of the work is to determine whether a development of LiU-store's web shop, based on navigability and design, can appeal to university students. The web shop’s design was iteratively developed and implemented functionality was supported by the feasibility study as well as research in the area. Changes from the original webshop were implemented after an evaluation of functionality in the feasibility study and after further tests that were carried out during the work. A definitive test was performed to compare the developed website with the current one. The result showed that after the development, the usability of the web shop was perceived as 90 out of 100 on the System Usability Scale (SUS), while LiU-store's previous design was rated 61.7 out of 100. The factors causing the higher usability seem to be the presence of a search function, the presence of sorting and filtering functions and a site structure with few layers that minimizes the amount of clicks. / Studier visar att webbutiker med en god design och lättnavigerad uppbyggnad positivt påverkar användbarheten. För att testa detta påstående utvecklades LiU-stores nuvarande webbutik efter design- och navigeringsprinciper samt efter kundgruppens önskemål. Syftet med arbetet är att avgöra huruvida en utveckling av LiU-stores webbutik, med utgångspunkt i navigerbarhet och design, kan tilltala universitetsstudenter. Webbutikens design utvecklades iterativt och implementerad funktionalitet underbyggdes av förstudien såväl som forskning inom området. Förändringar från den ursprungliga webbutiken implementerades efter en värdering av funktionalitet i förstudien samt efter ytterligare tester som utfördes under arbetes gång. Ett slutgiltigt test utfördes för att jämföra den utvecklade hemsidan med den nuvarande. Resultatet visade att efter utvecklingen uppfattades webbutikens användbarhet som 90 av 100 på systemanvändbarhetsskalan SUS, medan LiU-stores tidigare design värderas till 61,7 av 100. De faktorer som orsakade den högre användbarheten tycks vara förekomsten av en sökfunktion, förekomsten av sorterings- och filtreringsfunktioner samt en sidstruktur med få lager som minimerar antalet klick.

Bland studenter på många av Sveriges Universitet är studentoverallen en vedertagen ägodel. Studenter gillar att utsmycka sina overaller med olika tygmärken och andra accessoarer, men tillgängligheten av dessa är i dagsläget begränsad.  Denna rapport presenterar utvecklingsprocessen samt resultatet av webbapplikationen ”PimpaOvven” – en e-shop med syfte att öka tillgängligheten av tygmärken och overallstillbehör. Utvecklingen har skett iterativt och fokuserats till att bygga en säker webbapplikation som genererar en användbar miljö i avseende till handlingsbarhet, navigerbarhet, säkerhet och inger ett säkert intryck. De metoder som använts och genererat den resulterande webbapplikationen utgör tillsammans med den teoretiska referensramen grunden för rapportens diskussion. Under projektets gång genomfördes även användbarhets- samt säkerhetstester, och utifrån dessa tillsammans med diskussionen drogs slutsatsen att en säker och användbar webbapplikation utvecklats. / Among students in many of Sweden’s Universities the student overall is an established possession. Many students like to decorate their overalls with embroidered patches and other types of accessories, the supply of these is however limited. This report presents the development process and result of the web application “PimpaOvven” – an e-shop with the purpose of increasing the accessibility of patches and overall accessories. The development has been iterative and focused on building a secure web application that generates a useable environment regarding actability and navigability that also provides an impression of security to the user. The methods used which generated the resulting web application together with the reference framework form the basis of the report’s discussion. During the project plenty of usability tests and security tests were conducted, from these tests together with the report’s discussion the conclusion was drawn that the produced web application was secure and useable.

This report covers a case study performed at Linköping University. The project consists of the development of a web application of type e-commerce, named Delish, which is a service for trading lunch boxes among students. The report treats the compilation of a theoretical framework, the development and its results followed by a discussion. The web application serves as a foundation in order to examine how an application should be designed to ensure high navigability and simplicity while establishing user trust. Information is gathered in order to define a theoretical and methodical framework. The development is accompanied by an evaluation of the products fulfilment of earlier set goals, by conducting market surveys and usability testing. Navigability is achieved through the implementation of different navigational systems and the application is perceived as simple as a result of effective use of colours and typography. Through the implementation of a ranking system and communication of data integrity, the application is perceived as trustworthy. / Denna rapport omfattar en fallstudie som genomförs vid Linköpings universitet. Under projektet utvecklas en webbapplikation i form av en e-butik vid namn Delish vilken tillhandahåller en tjänst för köp och försäljning av lunchmatlådor mellan studenter. Rapporten behandlar utvecklingsarbetet, dess teoretiska grund samt associerat resultat och diskussion. Webbapplikation används som bas för att undersöka hur en applikation av denna typ bör utformas för att uppfylla krav på hög navigerbarhet och enkelhet samt skapa ett förtroende hos användaren. Implementering föranleds av upprättandet av en teoretisk och metodisk grund för att säkerställa att frågeställningen uppfylls. Arbetet kompletteras genom undersökningar av applikationens fullföljande av tidigare nämnda målbilder. Detta görs bland annat i form av en enkätundersökning och användartester. Hög navigerbarhet uppnås genom implementering av olika navigationssystem och webbapplikationen upplevs enkel på grund av ett effektivt användande av färger och typografi. Implementeringen av ett betygsättningssystem samt tydlig kommunicering av datahantering gör den förtroendeingivande.