La presente investigación tiene como propósito explicar el diseño interactivo en la experiencia de usuario y así en la construcción del flujo de navegación de sitios web de las pymes del rubro de cómputo en el Perú. Para llegar a ello, se analizaron de manera descriptiva y objetiva la gráfica en dos páginas web pioneras del rubro C&C Computers y MemoryKings. Así mismo, se realizaron entrevistas a usuarios familiarizados en el tema, a un experto en UI&UX y diseño web, encuesta y escala likert para los usuarios que conozcan del rubro y además una ficha de análisis por cada sitio web. Entre los resultados se encontró que los conceptos teóricos de usabilidad, affordances y UI&UX son pilares fundamentales para su construcción y responden mediante el diseño a las necesidades del usuario. También, se pudo concluir que tanto los elementos gráficos, los conceptos teóricos y prácticos, así como el diseño centrado en el usuario trabajan de manera conjunta y mantienen al usuario informado sobre lo que sucede mediante la retroalimentación adecuada en un periodo de tiempo razonable. / The purpose of this research is to explain the interactive design in the user experience and thus in the construction of the navigation flow of websites of Pymes in the computer industry in Peru. To achieve this, we analyzed in a descriptive and objective way the graphics in two pioneering web pages of the category, C&C Computers and MemoryKings. Likewise, interviews were conducted with users familiar with the subject, an expert in UI&UX and web design, a survey and likert scale for users who know the field and also an analysis sheet for each website. Among the results it was found that the theoretical concepts of usability, affordances and UI&UX are fundamental pillars for its construction and respond through design to the user's needs. Also, it could be concluded that both the graphic elements, the theoretical and practical concepts, as well as the user-centered design work together and keep the user informed about what is happening through appropriate feedback in a reasonable period of time / Trabajo de investigación

This diploma Thesis deals with problematics of web design in civil engineering. Specifically, it focuses on the web design of a projective construction office. The basic concepts relevant to the problematics are defined in the theoretical part of this Thesis. The practical part begins with initial analysis which consists of an opening workshop with a client, a survey and competition research. Based on the analysis findings, target group and project direction are set. Following these steps, the web design is created. It consists of several parts – generation of ideas and possible solutions, information architecture, sketching, prototyping, prototype testing and graphic design itselfs, which is output of this diploma Thesis.

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.

The job market, technologies, and work methods have changed significantly. More businesses now lean towards low-code and no-code solutions to simplify web design and development. Companies are training their business professionals to become software developers due to a lack of resources. As a result, many websites are created by non-professionals, so-called citizen developers, using low-code and no-code tools. That raises concerns about whether such websites meet web accessibility standards. This study investigates the phenomena and spans results across three areas: the extent of compliance with accessibility guidelines (1), prevalent accessibility challenges (2), and optimal practices for accessibility enhancement (3). The research involves tasking five individuals with creating websites using different low-code and no-code tools: Wix, Webflow, WordPress.com, Weebly, and Google Sites. Then, the websites are objectively evaluated for accessibility adherence using Google Lighthouse Analytics and WCAG 2.2 criteria assessment. The results are then combined to compare the overall accessibility adherence. The research concludes that websites developed by citizen developers do not meet accessibility standards. Many websites struggle with the fundamental aspects of accessibility that are necessary for pleasant and comfortable use. To improve the situation, web developers—professionals and amateurs—should prioritise accessibility in web development and design. On the other hand, low-code and no-code platforms should try to implement accessibility features in their tools.

Denna studie utforskar användningen av scrollytelling, en metod inom digitalt berättande, i jämförelse med ett traditionellt statiskt webbformat. Studien syftar till att undersöka i vilken utsträckning interaktivt och multimedia-integrerat innehåll påverkar användarupplevelse, användarengagemang, kunskapsförståelse och retention. En prototyp för respektive format skapades för att genomföra den komparativa studien. Med en blandad metodansats som kombinerar ett kvantitativt frågeformulär och kvalitativa intervjuer, samlades data från en grupp unga vuxna inom en akademisk miljö. Utöver detta genomförde deltagarna även ett kunskapstest för att mäta kunskapsförståelsen och retentionen. Resultaten visar att scrollytelling ökar både engagemang och upplevd förståelse bland deltagarna, med en tydlig förbättring av användarupplevelsen jämfört med statiska formatet. Samtidigt som kunskapstestet indikerade på en aningen bättre retention av informationen som presenterades i det traditionella statiska format. Slutsatserna pekar på att scrollytelling erbjuder fördelar för digitalt berättande, där dess dynamiska och interaktiva format kan öka engagemanget och förståelsen i jämförelse med det traditionella statiska formatet. Men det går inte i denna studie att konstatera en direkt ökad retention av information. Studiens fynd understryker dock potential för scrollytelling i kontrast mot det traditionella statiska formatet, och därför rekommenderar ytterligare forskning att utforska dess optimala design och effektivitet över olika kontexter. / This study explores the use of scrollytelling, a method within digital storytelling, in comparison to traditional static web formats. The study aims to examine the extent to which interactive and multimedia-integrated content affects user experience, engagement, knowledge comprehension, and retention. A prototype for each format was created to conduct the comparative study. Using a mixed-method approach combining a quantitative survey and qualitative interviews, data were collected from a group of young adults in an academic setting. Additionally, the participants also took a knowledge test to measure their comprehension and retention. The results show that scrollytelling increases both engagement and perceived understanding among participants, with a clear improvement in user experience compared to the static format. While the knowledge test indicated slightly better retention of the information presented in the traditional static format. The conclusions suggest that scrollytelling offers advantages for digital storytelling, where its dynamic and interactive format can enhance engagement and understanding in comparison to the traditional static format. However, this study does not establish a direct increase in information retention. Nonetheless, the findings underline the potential for scrollytelling in contrast to the traditional static format, and therefore, further research is recommended to explore its optimal design and effectiveness across different contexts.

We are inundated by a constant feed of media that responds and adapts in real time to the impulses of our psyches and the dimensions of our devices. Beneath the surface, this stream of information is directed by hidden, automated controls and steered by political agendas. The transmission of information has evolved into a spiral of entropy, and the boundaries between author, content, platform, and receiver have blurred. This reductive space of responsive media is a catalyst for immense political and cultural change, causing us to question our notions of authority, truth, and reality.

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.