Designing a User-Centered Auto- tagging Demo Interface for ...1452799/FULLTEXT01.pdf · to keep and...

Linköpings universitetSE–581 83 Linköping+46 13 28 10 00 , www.liu.se

Linköping University | Department of Computer and Information ScienceMaster thesis, 30 ECTS | Datateknik

2020 | LIU-IDA/LITH-EX-A--20/049--SE

Designing a User-Centered Auto-tagging Demo Interface for BothTechnical and Non-TechnicalUsersDesign av en Användarcentrerad Autotaggningsdemo-gränssnitt för Både Tekniska och Icke-tekniska Användare

Hans Tchou

Supervisor : Sahand SadjadeeExaminer : Erik Berglund

External supervisor : Christoffer Nilsson

http://www.liu.se

Upphovsrätt

Detta dokument hålls tillgängligt på Internet - eller dess framtida ersättare - under 25 år från publicer-ingsdatum under förutsättning att inga extraordinära omständigheter uppstår.Tillgång till dokumentet innebär tillstånd för var och en att läsa, ladda ner, skriva ut enstaka kopior förenskilt bruk och att använda det oförändrat för ickekommersiell forskning och för undervisning. Över-föring av upphovsrätten vid en senare tidpunkt kan inte upphäva detta tillstånd. All annan användningav dokumentet kräver upphovsmannens medgivande. För att garantera äktheten, säkerheten och till-gängligheten finns lösningar av teknisk och administrativ art.Upphovsmannens ideella rätt innefattar rätt att bli nämnd somupphovsman i den omfattning som godsed kräver vid användning av dokumentet på ovan beskrivna sätt samt skydd mot att dokumentet än-dras eller presenteras i sådan form eller i sådant sammanhang som är kränkande för upphovsmannenslitterära eller konstnärliga anseende eller egenart.För ytterligare information om Linköping University Electronic Press se förlagets hemsidahttp://www.ep.liu.se/.

Copyright

The publishers will keep this document online on the Internet - or its possible replacement - for aperiod of 25 years starting from the date of publication barring exceptional circumstances.The online availability of the document implies permanent permission for anyone to read, to down-load, or to print out single copies for his/hers own use and to use it unchanged for non-commercialresearch and educational purpose. Subsequent transfers of copyright cannot revoke this permission.All other uses of the document are conditional upon the consent of the copyright owner. The publisherhas taken technical and administrative measures to assure authenticity, security and accessibility.According to intellectual property law the author has the right to be mentioned when his/her work isaccessed as described above and to be protected against infringement.For additional information about the Linköping University Electronic Press and its proceduresfor publication and for assurance of document integrity, please refer to its www home page:http://www.ep.liu.se/.

© Hans Tchou

http://www.ep.liu.se/

http://www.ep.liu.se/

Abstract

The modern design of web-based tools derives from well-established patterns and designprinciples that lead to the desired UX in form of comprehension and intuition. The intu-itive impression is usually obtained from previous experience, however, from the use ofother similar web-based tools. This thesis is conducted in collaboration with iMatrics AB.One of iMatrics ambitions is to build a long-term sustainable demo tool which is to be in-tegrated into their web portal where their products and services are accessible from. Toachieve a satisfying user experience, a large focus on the design and the needs is requiredto keep and increase the number of users. First impressions, intuition, usability, and overallsatisfaction in terms of usability are all important factors of an interface. This paper aimsat studying is the perception of these factors in a user-centered scope from both technicaland non-technical users’ perspectives where remote contextual inquiry with applied de-sign thinking will be conducted. Interviews, use case studies and surveys will be part ofthe data gathering process. Initially, the current autotagging demo will be studied and anew demo will be developed, evaluated and compared to the current demo. This studyinvolves a total of 8 participants with a customer or employee relationship with iMatrics.Eventually, this study will point out the overall improvements in the new demo comparedto the current demo and also suggest UX features benefiting for both technical and non-technical users.

Acknowledgments

First of all, I want to distribute big special thanks to Christoffer Nilsson, iMatrics, and everyone at iMatrics for giving me the opportunity to be a part of their team with this thesis andfor all the help and support that was provided to me. I also want to thank all the partici-pants who helped me with the research, for taking part in the interviews, use case studies,and survey studies. Furthermore, I also want to thank Sahand Sadjadee who was my super-visor and Erik Berglund who was my examiner for providing feedback and engaging in theproject. Eventually, I want to thank my opponents, Cornelia Aksell and Rebecka Lindskogfor taking part as opponents and providing value in form of constructive feedback during theopposition session. It has been a pleasure working with every one of them.

iv

Contents

Abstract iii

Acknowledgments iv

Contents v

List of Figures vii

List of Tables viii

1 Introduction 11.1 Motivation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11.2 Aim . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21.3 Research Questions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21.4 Delimitation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

2 Background 32.1 iMatrics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32.2 Literature Study . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42.3 Research Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82.4 Interview Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92.5 UX Analysis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

3 Theory 153.1 Pre-study . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153.2 Collecting Usability Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163.3 Design Thinking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173.4 First Impression Study . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173.5 Product Implementation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183.6 Evaluation Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

4 Method 224.1 Development Phases . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224.2 Developing the New Demo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274.3 Studying the Demos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

5 Results 315.1 Current Demo Findings from Technical Users’ Perspective . . . . . . . . . . . . 315.2 Current Demo Findings from Non-technical Users’ Perspective . . . . . . . . . 355.3 New Demo Findings from Technical Users’ Perspective . . . . . . . . . . . . . . 415.4 New Demo Findings from Non-technical Users’ Perspective . . . . . . . . . . . 445.5 Result of the UX Survey . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

6 Discussion 52

v

6.1 Results . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 526.2 Overall Satisfaction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 556.3 Method . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 566.4 Work in a Wider Context . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 566.5 Future Work . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

7 Conclusion 59

Bibliography 61

A Requirements Specification 65

vi

List of Figures

2.1 A brief overview of the system architecture . . . . . . . . . . . . . . . . . . . . . . . 42.2 An overview of the funnel model for interviews . . . . . . . . . . . . . . . . . . . . 102.3 An overview of the learning loop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

4.1 An overview of the study structure of the project . . . . . . . . . . . . . . . . . . . . 234.2 A simple illustration of the use case study . . . . . . . . . . . . . . . . . . . . . . . . 264.3 An overview of iMatrics’ current demo . . . . . . . . . . . . . . . . . . . . . . . . . 284.4 An overview of iMatrics’ new demo . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

5.1 The users’ screen journey for accessing the demo . . . . . . . . . . . . . . . . . . . . 495.2 The users’ interaction structure in the use case study . . . . . . . . . . . . . . . . . . 505.3 The rating of the user experience of the demos . . . . . . . . . . . . . . . . . . . . . 51

6.1 Logout button placement in the current and new demo in the right side of the screen 54

vii

List of Tables

5.1 Positive features from technical perspectives on the current demo . . . . . . . . . . 395.2 Positive features from non-technical perspectives on the current demo . . . . . . . 395.3 Desired features from technical perspectives on the current demo . . . . . . . . . . 405.4 Desired features from non-technical perspectives on the current demo . . . . . . . 415.5 Positive features from technical perspectives on the new demo . . . . . . . . . . . . 485.6 Positive features from non-technical perspectives on the new demo . . . . . . . . . 49

A.1 Functional requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65A.2 Non-functional requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

viii

1 Introduction

This thesis project aims at improving iMatrics’ current autotagging web demo with a focuson user experience (UX) and user interface (UI) involving the perspectives of both technicaland non-technical users. In simple words, the demo is a tool that can be seen as a text editorwith auto-tagging artificial intelligence (AI) integrated which operates on a web platformthat generates tags by analyzing clean text. iMatrics uses this demo for visually presentingand demonstrating their autotagging service for their potential customers. In this project,a redesign with the goal of attempting to improve the overall UX of iMatrics current au-totagging demo will be conducted with the purpose of making it more modern, intuitive,interactive, usable, and easy to use as well as facilitate the understanding of tagging for bothtechnical and non-technical users. This means that a new demo will be developed wherea comparison will be conducted between the current demo and newly implemented demowhere both demos will be tested and evaluated by the users. This study focuses on theusers’ first impressions, intuition, usability, and overall satisfaction. For the study, contextualinquiry and design thinking will be used for obtaining user-centered data which involvesconducting interviews and use case studies. Furthermore, a survey will be sent out forenhancing and verifying the result. Eventually, the result will be discussed and conclusionswill be drawn.

This chapter introduces the motivation, aim, research questions, and delimitations of theproject.

1.1 Motivation

The design of modern web-based tools derives from well-established patterns and designprinciples that lead to the desired UX in form of comprehension and intuition. The intuitiveimpression is usually obtained from previous experience, however, from the use of othersimilar web-based tools. One of iMatrics’ ambitions is to build a long-term sustainable demotool which is to be integrated into their web platform where their products and services areaccessible from. To achieve a satisfying user experience, a large focus on the design andthe needs is required to keep and increase the number of users. First impressions, intuition,usability, and overall satisfaction in terms of usability are all important factors of an interface.What this paper aims at studying is the perception of these factors from both technical and

1

1.2. Aim

non-technical users perspective within a user-centered scope.

It’s believed that one thing that cannot be afforded by IT companies is to provide informationwith a lack of usability to obtain information. A common practice is to understand existinguser experiences in order to design and implement a user interface as intuitive and easy touse as possible.

1.2 Aim

The goal of this project is to design and develop iMatrics current autotagging demo to fitfor both technical and non-technical users. To achieve this, studies will be conducted onthe customers and employees of iMatrics involving technical and non-technical users thatwill be determined by their demographics, such as age and profession. The gathered user-centered data will be applied in the implementation and evaluation processes. Studies ofwell-established modern patterns and design principles will be conducted in order to under-stand and improve the design of the interface in terms of intuition and usability.

1.3 Research Questions

The process of reaching the goal of this thesis project can be boiled down to answering the fol-lowing research questions. The research questions invoke a clear strategy for any preemptiveresearch gathering as well as concluding methodologies.

1. How can the first impression of iMatrics current auto-tagging demo be improved forboth technical and non-technical users?

2. How can iMatrics current auto-tagging demo be improved in terms of intuition andease of use for both technical and non-technical users?

3. How can the ease of understanding of iMatrics current auto-tagging demo be improvedfor both technical and non-technical users?

4. Did the overall satisfaction improve in terms of user experience in the new demo com-pared to the current demo?

1.4 Delimitation

This thesis project is conducted in collaboration with iMatrics AB and the development pro-cess will be conducted within their framework. The thesis is based on already well-articulatedand defined strategies as well as established web portals which means that it will be boundby already existing limitations. Fewer efforts will be made to further advance new usabilityand user experience features. The project will not consider web security such as verificationand validation methods. Furthermore, the assessment will be narrowed down to a limitedamount of users where these users are customer of iMatrics which their user experience andperception of user interface will be studied. Also, the chosen programming languages, de-sign of the system, source code, and code optimization of the implementation will not bemotivated.

2

2 Background

Tools, concepts, and other related entities are described in this chapter. Every topic men-tioned, discussed, or otherwise investigated is introduced here in order to facilitate or gain ageneral understanding of this thesis.

2.1 iMatrics

This thesis project is conducted in collaboration with iMatrics AB where this thesis projectwill focus on their autotagging demo which is an interface to represent their autotaggingservice. The project aims at improving this demo and identify the user experience betweentechnical and non-technical users. The autotagging demo is limited to their customers andpotential customers, and by improving their autotagging demo it is hoped to achieve anincrease in overall user satisfaction for the stakeholders, both internally as well as externally.

iMatrics was established at 2015 and strive to make the media industry data-driven. AsiMatrics are aware that they can’t change the behavior of the users, they can at least adapt tothem. iMatrics work intimately with their customers and values them dearly. It is hoped thatby involving the customers of iMatrics in this project would lead the demo to new heightsand also keep it from lagging behind the modern-day’s web applications. [3]

Autotagging Demo

In simple words, the autotagging demo can be described as a web tool with a text editor thatanalyses the inserted text or article and generates tags as a result. For the text analysis, thedemo uses a semantic AI solution that is integrated which basically provides the autotaggingservice. By inserting texts or an article, relevant categories, topics, and entities are generatedand displayed with a weight indicator representing the tag relevancy. Furthermore, entitiescome in three different types representing a person, place, or organisation. This data can beused for readership optimization as well as for search engine output optimization. Moreover,this service helps promote more productive writers and contribute to increased quality ofarticles.

3

2.2. Literature Study

Framework

iMatrics have an existing web portal, and have provided an architecture of the frameworkwhere the new demo will be integrated consisting of three main modules; a client-side, mid-dleware server, and API server. The client-side presents the user interface developed in React.The middleware is a two-way communication GraphQL server that receives requests fromthe client-side and passes it forward to the API server and returns the response received fromthe API server to the client-side. A brief overview of the system is shown in the figure below,see Figure 2.1.

Figure 2.1: A brief overview of the system architecture

Moreover, the styles such as color, fonts, use of the logo, etc. are all predefined and providedin iMatrics brand identity manual. However, as mentioned earlier, this project will not studythe chosen programming languages nor the design of the system related to the project, andwill therefore not be described nor explained any further. This project will solely focus onthe design of the client-side and the user experience of the current demo and new demo,respectively.

2.2 Literature Study

Literature study is part of the pre-study which is undertaken before the larger main study.Information are obtained for understanding concepts and definitions related to the project.

Requirements Engineering

A well-written requirements specification is important for both developers and users. It isimportant in the way it provides developers a "what to build" and for users or customers a"what to expect". Projects usually fail and the usual reason is that developers do not alwaysreally understand the real requirements of the users and their environments. To understandrequirement elicitation, key players and their functions have to be considered such as buyers,end-users, and software engineers.

Buyers refer to the people that pay for the software system and also hold responsible for con-tracting. End-users are the people who will use the developed system. This group is mostlyconcerned with the system’s usability, reliability, and availability. They hold the greateststake concerning issues related to the user interface and documentation of the user guide.Software engineers are the people holding competence in software design constraints, pro-totyping, and technical feasibility and usefulness. [51]

4


User Experience and Usability

So, what are user experience (UX) and usability? Several definitions have been named tospecify the term UX. According to the ISO standard 9241-110, the definition of UX refers tousers’ perceptions and responses concerning their interaction with a system or product. UXassociates with quality attributes expressed by the feelings and emotions of users and bringforth aspects in aesthetic, pleasure, and personal growth.

On the other hand, usability express the quality in ease of learning and usefulness of a prod-uct.[47][42] It refers to how quick users can learn how to use a product, the efficiency, in-tuition, and satisfaction of it [19]. In other words, defined by ISO / IEC 9126-4, usabilityrefers to "the extent to which a product can be used by specified users to achieve specifiedgoals with effectiveness, efficiency, and satisfaction in a specified context of use". Basically,usability emphasizes on these following three factors:

• effectiveness

• efficiency

• satisfaction

Effectiveness represents the accuracy and completeness with which users achieve specifiedgoals. To measure the effectiveness of a system, one may, for instance, study how manypassed a given task.

Efficiency represents the resources used in connection to the accuracy and completeness withwhich users achieve the specified goals. Performing an efficiency test, one could study, forinstance, how many clicks or time it took to perform a given task.

Satisfaction represents the comfort and acceptability of using a service or product. To mea-sure the satisfaction level, questions after a given task may be raised, such as asking the userto rate the difficulty of the task in overall. [46][41]

Tullis and Albert (2013) explained the difference of usability and user experience as follows:”Usability is generally considered the user’s ability in using something to accomplish atask successfully, while user experience has a broader view, looking at the full interactionof the individual, as well as their thoughts, feelings, and perceptions that result from thisinteraction”. [53]

According to Heimgärtner et al. (2014), usability engineering is about developing usableproducts for a specific user group in a specific context to ensure a good usability[29]. This in-volves developing for learnability, efficiency, memorability, subjective satisfaction, and error-free use of a product or service[25].

User Interface

When talking about human-computer interaction, it is the interaction between the user (hu-man) and the computer. In order to allow communication, the user interacts with an interfacethat acts as a communication link. According to Brejcha (2014), a user interface can be per-ceived as an entrance into a simulated world and state of "being on the boundary". [31]

Technical Literacy

The information and communications technology (ICT) literacy varies between individualsand is dependent on the age of the user[28]. According to Crawford et al. (2005), the different

5


technical levels may vary depending on the age group and individuals with less knowledgein computer interaction. [6]

Web Standards

A web-based product is served through the World Wide Web (WWW). An operating sys-tem, web browser, and hardware technologies are requirements for providing a platform tooperate on. Standards allow for ease of identifying new quality issues and also boost the ef-ficiency of a web-based tool. Furthermore and more importantly, standards aid in promotingconsistency and quality in web-based tools making it easier to compare across studies. Thefact that web standards come with implemented designs and confirmed through empiricaltests. Standards will continue to grow and improve. The standard for web-based tools, forinstance, a survey can be classified into these four following categories:

1. screen design

2. questionnaire writing

3. respondent communications

4. process standards[6]

Regarding the design of the screen, it’s important to notice the human-computer interactionand the usability of websites. In the survey design, Crawford et al. (2005) divide the screendesign standards into the following five sub-categories:

1. general screen design

2. text

3. question/presentation

4. respondent input/response format

5. survey navigation/interaction[6]

Furthermore, there are design guidelines composed by Nielsen Norman Group which Cresto-dina defined for standards, conventions, and confusions based on thresholds in terms of webdesign. First, standard comprises of least 80% of websites with a similar design approach.Second, convention comprises of 50 to 79% of websites with the same design approach. Last,confusion comprises of 49% or fewer websites without any dominating design approach. [1]

According to the study, a collection of top 50 marketing websites was analyzed and concludedthe 10 most common design features they shared mentioned shown in the following list:

1. 100% have the logo in the top left

2. 44% have contact in top right

3. 88% have main navigation across the top

4. 32% have a home page slide show

5. 80% have value proposition high up on the home page

6. 78% have a call to action high up on the home page

7. 54% have a search feature in the header

6


8. 24% have a sign-up box in the footer

9. 72% have social media icons in the footer

10. 68% have a responsive design

As listed, the logo placement, the main navigation, and the value proposition can be judgedas standards. Besides these, there is no actual features that can be classified as web standards.However, the usefulness of these depends on the business and type of users the platforminvolves. [1]

UX Elements

According to the study of Lin et al. (2005), perceived usefulness is defined as the users’perception of the expectations of the tool. This could, for instance, be believed by the users:using the tool enables me to only focus on writing. In their article, they pointed out someelements to consider when designing for an intriguing interface; confirmation, perceivedplayfulness, satisfaction, and continuance intention.

Confirmation adopts users’ perception of the accordance between the expected use and theactual performance of the web-based tool. For instance, this could receive answers such as:my experience with the tool exceeded my expectations.

Perceived playfulness represents the users’ belief of the interaction with the tool fulfillsthe users’ actual motives. Answers here, for instance, could be: I was so focused thatit made me forget about the time. Satisfaction holds for the users’ emotions and feelingsprior to the use of the tool. An example here could be: using this tool made me feel contented.

Continuance intention for the users’ intention to keep on using the tool, and for instance,this could receive answers such as: I will continue to use this tool over the alternate ones. [11]

Information Visualization

Information visualization concerns the visual representation of complex data to enhance andfacilitate the understanding of specific data for humans. The purpose of this is to leverage thefunctioning of the human visual system to provide insight regarding abstract information.Information visualization contributes to resolving logical problems, thinking, reasoning, andprovides support in understanding data since visual perception is attuned to visual images,icons, and pattern recognition.

The use of icons is an effective way of for visualizing information and icons are often used toserve following different functions:

1. Access to a function or target destination

2. Indicator of system statuses

3. Changer of system behaviors

The user’s perception revolves around factors that make a web tool easy to understand suchas intuitive visual presentation, layman’s language, and recognizable iconography. For in-stance, the magnifying glass icon is used globally and represents "search". Because 99% ofall websites use this icon to represent "search", the users’ will perceive it as "search" on aplatform anywhere else. It is stated that The better the UX, the less need there should befor continuous support and training. This aspect could benefit resource-saving as the gainhas to be greater than the pain. The usability of icons is usually determined by findability,recognition, interpretation, and attractiveness which especially aid in responsive designs.

7

2.3. Research Methods

2.3 Research Methods

Design Thinking

Derived from both engineering and social-sciences, Design Thinking is known as a human-centered problem-solving process based on real-life data. According to Gabrysiak et al.(2012), Design Thinking is strongly dependent on the insights of the design challenge col-lected directly from the end-users interacting with the prototype or product.

This method is useful as it directly involves the users and brings designers to closer un-derstand and identify the human behaviors and cognitive capabilities[39]. Furthermore, itallows designers to detect issues in the early phase of development in a cost-effective andtime-saving way. Design thinking is characterized as a highly interactive and incrementalprocess that crucially requires to involve people with both different backgrounds and experi-ences to drive it. To widen the understanding and perception of users, this method accountsfor many user viewpoints when identifying the needs and building a common understand-ing between different stakeholders. [26]

Design thinking in product development includes the following three stages: inspiration,ideation, and implementation. Inspiration refers to understanding the problem, conductinga study, and organizing data synthetically. Ideation refers to generate or form a solutionand involves brainstorming, prototyping, testing as well as redesigning a product or service.Implementation refers to the execution of the solution idea. [2][26]

Contextual Inquiry

Contextual design is customer-centered and was developed to assure the right thing for thecustomers. Here a "customer" is regarded as anyone who uses or depends on a system. Itis about how to apply data for design in an organization. This approach defines softwareand hardware systems based on an integrated design process of multiple customer or user-centered techniques. Contextual design involves the issue of collecting data. The design ofthe system is decided by the collected user data. [17]

Contextual inquiry methodology is the first part of contextual design and is performedby researchers observing and interviewing participants in a natural state. This method isconducted to understand the users of a system, especially the users’ needs, desires, and ap-proaches to specific tasks. It is about understanding the users, who they really are, and howthey manage their daily basis activities. Researchers approach the participant by adoptinga collaborative relationship. This means that the researcher does not seek to consolidateseamlessly into the culture of the participants. Forming such a relationship is importantbecause it provides a framework for behavior and creates a model that naturally reveal rel-evant information from participants for research. The participants are allowed to talk abouttheir process as it occurs while explaining their thoughts and feelings. This differs from thetraditional way of interviewing where the researchers solely attempt to draw out and extractrelevant information. [17][38]

According to Phipps and Lanclos (2019), contextual inquiry approach is a standard practicewhen it comes to researching user experience [44]. This method is especially useful at thestart of design processes and is said to be most suited for use to understand how specificenvironmental factors influence or impact user behavior. [17][44]

Contextual inquiry focuses on collecting data from customers in the field among peopleactivities on a day-to-day basis such as working or living. Here a few selected individuals

8

2.4. Interview Techniques

are studied to arrive at a deeper and fuller understanding of the usage practice across everycustomer. Commonalities across the user base of a system are revealed. Contextual Inquiryincludes observing the work in the field while it happens, allowing researchers to collectdetailed design data. Contextual inquiry is based on four principles: context, partnership,interpretation, and focus. These principles lead the process of collecting data the most valueddata possible provided the constraints of the situation. According to Beyer and Holtzblatt(1998), the Contextual Inquiry methodology is based on the four following principles: con-text, partnership, interpretation, and focus. [17]

Context represents the study of the user workplace and observe them do their work.

Partnership motivates a conversation about their work and engage users to reveal unarticu-lated aspects of the work.

Interpretation engages a shared perception and understanding with the user about the as-pects of the work that actually matter and is of interest.

Focus directs the inquiry from a clear understanding of the researcher’s own purpose. [17]

Contextual Interviews

Contextual inquiry is performed in many different ways, sometimes, the simplest form issufficient such as the contextual interview. In a contextual interview, the interviewee is beingobserved and questioned from time to time regarding the work process that has been done.Contextual inquiry guides a way for the researcher to investigate specific work practice,however, it also helps IT organizations build new relationships with their customers. Itallows contact with customer’s daily basis work and enables understanding it in a wayneither one could before. The shared understanding and commitment are created from theconversation between the customer and the researcher. Seeing the work reveals details andhelps understanding the important points. By sharing the interpretation with the customerallows the customer to see the structure in the work and will not bias the data. [17]

2.4 Interview Techniques

According to Kylén (2004), the aim of conducting interviews is to extract and collect in-formation for the purpose of researching and suggested the funnel model for conductinginterviews. Interviewing a person certainly requires skills, and an interview session caneither be held long or short. Long interviews are usually 40-60 minutes long and usuallyclassified as non-structured. On the other hand, short interviews are usually approximately5-20 minutes long and usually enough to cover a few facts and dig deeper into a limitedsubject. Short interviews tend to be structured where questions are prepared beforehand andmade answered sufficiently in the interview.

The funnel model, see figure 2.2 are described as a guide for conducting an interview includ-ing 6 basic steps as following:

1. opening

2. free narration

3. specification

4. control

9


5. information

6. closure

Figure 2.2: An overview of the funnel model for interviews

Opening represents the introduction of the interview. The research subject, purpose as wellas the self-introduction of the interviewer are presented. In this step, the overview, theoutline, and the time estimation of the interview is presented to the interviewee.

Free narration should take around only a few minutes in short and structured interviews.The interviewee is allowed to answer the questions regarding the subjects. The key here isto leave more space for the interviewee to speak freely. It’s more likely that the intervieweetends to speak more when the more the interviewer keeps silent.

Specification concretizes the answers from the previous step. Focus is to deepen the un-derstanding of the research subjects and the interviewer may ask for exemplifications anddescriptions. Showing interest to the interviewee is the key.

Control verifies and complements the answers provided by the interviewee. Uncertaintiesor contrarious answers may be questioned, for instance, in the form of asking for furtherexemplifications or summarizing the given answers in the way the interviewer interpreted.

Information is the start to the end of the interview. A brief summation of the interpreteddata is skimmed and then, allows the interviewee to know more about the research and askquestions.

Closure is the step where the interviewer shows appreciation and thankfulness for the sup-port. The coming-ups or follow-ups are presented if there might be any. The interviewee maybe asked to be reconnected if some information deems to be missing or need clarification. Agood closure may bring positive effects for both the interviewer and the interviewee. [34]

Contextual Inquiry for Upgrading a System

When modifying or upgrading an existing system, the challenge here is to understand therequest and design a solution fitting the needs, keeps the practice of using coherent, and

10


preserve the integrity of the system design. Looking into the whole work process and re-lated tasks enable understanding of how the modification or upgrade may affect the workingprocess as a whole. [17]

Remote Contextual Inquiry

Remote contextual inquiry is the conduction of contextual inquiry on distance. This allowsthe researchers to remotely view the users interacting with software concerning the systemand the type of software customization that has been implemented. This usually takes placeafter a software deployment and enables researchers to pay attention to finding design op-portunities by learning about the tasks and processes that users attempt to accomplish andthe product usage training that was taught to them. For evaluating the usability of the soft-ware, this allows developers to understand the users’ interaction and prioritize features formodification as well as identifying improvement options or needs for further development.[24]

Diary Study Method

Diary study methodology that is commonly used to obtain understanding behavior, predict-ing behavior, or influence product design. The methodology proposes participants to logtheir own activities over a discrete period of time where they are requested to describe theiractivities, user needs, context information, and daily basis thoughts. [9]

Evaluation Technologies

Evaluating UX guides designers to understand the users and how they engage with the in-volved product. This concerns the interaction, thinking, and continuance use, experiencewith similar products, and other aspects of the product. [40] Studies of evaluation tech-nologies from the years 2010 to 2015 showed that quantitative data analysis has been out-numbering the qualitative approach[47].

The 5 Second Test

The first impression is strongly connected to the perceived quality and aesthete of a softwarescreen or web page which often occurs during the first 5 seconds of the encounter. This en-counter captures the very first moment of the human-computer interaction which determinesthe first impression. Furthermore, the first impression affects the entire period of interaction.The 5 Second Test method, performed by Gronier (2016), analyzed the perception of the pur-pose of the use of a web page. Elements such as color, fonts, icons play a major role thatgreatly influences the first impression of a software screen or web page. These elements helpcreates a hedonic user experience. It is said that the users first focus on aesthetic and attrac-tive during the first moment of interaction. The dominant color of a screen is the key factorin the exploration strategy of a software screen or web page. [27]

Lean UX Platform

Lean UX platform is a mix-method evaluation approach derived from combinations of obser-vational, self-reported, and physiological measurements. This method can evaluate overallUX over time by obtaining data of the user interacting with a product or service.

Observational Measurement enables detailed explanation of user behaviour. This involvesthe facial study of the user where the experience is considered according to the emotions. Forinstance, when a user smiles could represent joy or embarrassment. However, this methodmay not be able to describe the psychological state during interaction with the product.

11

2.5. UX Analysis

Information regarding user performance, efficiency and errors can be revealed from userobservation.

Self-reported measurement activates collecting data from users expressing their feelingsabout the product. For instance, data can be gathered from response to a stimulus by themouse movement in rating their emotions. A retrospective self-reported verbal or writtenquestionnaires are common when collecting data in emotional and cognitive aspects wherethe users are questioned about their experience regarding the product.

Physiological measurement enables physical information in the UX assessment process.Data can be obtained, for instance, through sensors such as eye tracker and combined withother methods such as "think-aloud". While observational and self-reported measurementsdon’t determine the users’ psychological state, physiological measurement is used to fill thishole for assessing the user experience. In reality, identifying, interpreting and explainingone’s feelings and thoughts when using or after using a product can be hard for the users.

Utilizing the mentioned measurements, the Lean UX Platform is based on the "Lean UX"learning loop, see figure 2.3. The point and focus of this are to measure and learn from theuser’s behaviors, assess and apply what’s learned to improve the product. [10]

Figure 2.3: An overview of the learning loop

2.5 UX Analysis

An approach for analyzing the UX phase may come in the form of a storytelling approachto improve the quality of developed concepts concerning UX. This supports designers in dis-covering and communicating their new concept ideas. Narrative methods are commonly ap-plied in the early stage of designing, for instance, designers collect data through observationsand interviews based on real user stories. This guideline serves as a support for elaboratingmostly on the qualitative requirements. Michailidou et al. (2014) recommend creating UXStories since it provides a memorable and understandable narration format. It allows under-standing the interaction and its context comprehensively while helping designers identifyingqualitative requirements and recognizing design targets. [30]

12

2.5. UX Analysis

Attitudinal vs. Behavioral Dimension

The attitudinal and behavioral dimensions can be interpreted as "what people say" respec-tively "what people do". Attitudinal research is usually conducted to understand or measurewhat users say or think and is widely used in marketing departments. When it comes tousability studies, researches should rely more on behavioral methods. [20]

Qualitative and Quantitative Dimension

Qualitative

Interviews, ethnographic field studies, and usability tests are types of qualitative methodsthat aim to get a deeper understanding of individual users’ experiences, motivations, andeveryday activities. Qualitative studies generate data about behaviors or attitudes based ondirect observations. These studies are a better fit for gathering information about why or howto solve a problem. [20]

Quantitative

Quantitative studies generate data based on indirect observations, for instance, surveys, ana-lytic tools, or formal experiments are types of quantitative methods that aims to collect aspectand behavior data of users. This data can be quantified and set for statistic use. Quantitativestudies are better fit when it comes to answering questions regarding "how many" or "howmuch". [20][23]

Prototyping

A prototype is a model of something that’s not yet built to present the future in the presentaccording to Valentine (2013). Prototypes act as a thinking tool [15] and the purpose ofprototyping is to illustrate the final product and allow designers to realize needed changesand manipulations to achieve a product that successfully understands and navigates all thecomplexities of the modern world. [37]

Paper prototyping, also known as offline prototyping, possibly in the form of paper sketchesor illustrated storyboards are mostly created to receive quick and direct feedback. It is oftendeveloped in the early stage of the design process to help reveal and collect information aboutusers and their using processes relevant to the usability. [15] In the context of requirementsengineering, prototyping enhances the understanding of issues and identifies applicable aswell as feasible external behaviors for addressing solutions. According to Andriole (1994),the main point with prototyping is to quickly and simply get something running, and get ittested on users. [51][50]

Related to prototyping, constructing a Minimum Viable Product (MVP) simply means learn-ing and understanding, see figure 2.3. If potential customers desire your product by imple-menting the core features of the product. MVP is said to be far different from traditionalproduct development where a prototype is constructed to simulate and show potential cus-tomers the future product. MVP is constructed before developing solutions, and constructingan MVP requires iterative research and validation which can be achieved through the DesignThinking or contextual inquiry method, for instance. [36]

Card Sorting

Card sorting is a usability study method used to aid design or evaluate the informationarchitecture of websites. Participants are allowed to categorizes topics according to theirsenses. By conducting this study help researchers to understand users’ expectations and

13

2.5. UX Analysis

how their own topics are perceived. This information is useful for developers in a sense ofdesign for building the structure of the website, decide page content, and label categoriesand navigation. [32][56][55]

Solid results have been generated with card sorting conducted on 168 users. This exercisewas repeatedly conducted, but on smaller user groups of 20 with random subsets of the totaldataset. By doing this, an estimation of the average findings from testing a different numberof users was obtainable. Nielsen (2004) would usually recommend 5 test users for usabilitystudies, however, to reach a higher correlation requires more users. Therefore, a minimum of15 test users is recommended for conducting card sorting analysis sufficiently. [32]

This practice contributes to understanding users as it provides a deeper insight into theirmental models. Nielsen (2004) propose a combination of these two methods. First, use gen-erative study such as card sorting to set the direction of a design. Then draft up a design,preferably paper prototyping, and evaluate findings to refine the design. [32] [20]

14

3 Theory

This chapter presents previously done work such as guidelines and conclusions related to this project.Key concepts to the reader are illustrated to facilitate insight in the conducted project, and relatedworks are presented to provide a context frame to work within.

3.1 Pre-study

Usability Engineering Methods

The article by Böhm and Wolff (2014) presented a literature review of usability engineeringmethods in intercultural interaction design. It addressed interviews, thinking aloud, andquestionnaires as the top three most dominant evaluation techniques and most frequentlyused methods in evaluating websites. Other evaluation methods that also frequently ap-peared are performance measurement, collaborative design, and evaluation respectively ob-servation of users. [18]

Requirement Engineering

In the software development process, Saiedian and Dale (2000) stated that requirementsengineering is one of the most critical steps. They investigated different obstacles and thecurrent state of requirements elicitation. [51]

The article by Jamal et al. (2018) proposed a triangulation method approach for measuringoverall UX over time. It is said to provide more accurate and precise data of the user inthe interaction with a product. The analysis concerns data of beliefs, preferences, thoughts,feelings, and behaviors of the user. They introduced the "lean UX platform" that includes a"learning loop" which is a continuous product development procedure, see Figure 2.3. [10]This method is backed up by Levy and Calacanis (2015)[36].

Landa-Ávila and León (2014) presented a user study to discover whether there is a relation-ship between elements of usability and human emotions. They referred to ISO/IEC 9126 andemphasized on the following three internal and external attributes:

• Efficiency

15

3.2. Collecting Usability Data

• Effectiveness

• Satisfaction [46]

Identifying Ethical Regards

A useful approach suggested by Fogg (2003) is to conduct a stakeholder analysis and identifythose affected by persuasive technology. Each stakeholder is studied in the technology inorder to attempt to identify beneficial or non-beneficial factors. The purpose of conductingsuch an analysis is to identify ethical regards in a systematic way. [14]

3.2 Collecting Usability Data

Qualitative and Quantitative User Researches

Mortensen (2019) pointed out what it meant to be objective in qualitative user research duringthe process of collecting data, and also how to be objective in the research with the followingtop 5 practices:

1. Be open-minded and unbiased

2. Be aware of your own prejudices

3. Share and discuss your interpretation of data

4. Confirm your interpretations with other research participants

5. Adopt the most appropriate user research method

For quantitative research, the best practice is to collect unbiased objective measurements ofresearch hypotheses, presence, and personality. [23]

Tanvir et al. (1994) that illustrated the limitations and real-world scenario of developinga tribal-centered mobile application with both a quantitative and qualitative approach. AUX/UI was proposed that assist in developing a tribal-centered application for helping tribaland ethnic people by enabling the potential of smartphones. They concluded that the quan-titative approach allowed for collecting data concerning user interaction, on the other hand,the qualitative approach allowed for collecting data of the users’ mindset and expectationsabout mobile applications. [12] This is agreed by Hashizume and Maasaki (2013), statingthat applying a qualitative approach makes it possible to understand the users’ situationalstructure and their context of use. [28]

Researching users verifies the right thing to develop answering for "what to build". There aremany varieties of ways for verifying user needs, such as following traditional methods:

• ethnographic field studies

• contextual inquiries

• focus groups

• diaries and journals

• card sorting

• eye-tracking

16

3.3. Design Thinking

• personas[36]

In the book written by Beyer and Holtzblatt (1998) provided guidelines on how to conduct acontextual inquiry and how to perform it for modifying or upgrading an existing IT system.[17]

English and Rampoldi-Hnilo (2004) introduced the Remote Contextual Inquiry that allowedthe researcher to remotely observe how users interact with a system. This allowed designersto prioritize existing features for redesign and explain the needs for new features. Theyexplained in their article how to conduct a Remote Context Inquiry session and suggest someconsiderations when conducting this research study. [24]

Goode et al. (2014) proposed a mixed-method research approach of contextual inquirycomplemented with a diary study. Contextual inquiry is a research methodology based onobservations and interviews [9][44]. Kylén (2004) described ways to conduct an interviewin an effective way for extracting and collecting relevant data in a fashioned manner withregards to the funnel model of an interview[34]. Diary study allows participants to logtheir own activities over a discrete period of time where they are requested to describe theiractivities, user needs, context information, and daily basis thoughts. The results showedsuccess since data from the contextual inquiry was also obtained from the mixed method.However, the mixed-method approach was more time and resource consuming. Additionalcollaboration amongst researchers is necessary to make sure that data are collected anduniformly interpreted. [9]

“Data on UX is currently mostly collected with methods borrowed from traditional HCI” wasstated according to Robinson et al. (2018). Their study discovered that services, websites, andprototypes were the most commonly studied artifacts. Moreover, there has been an increasein quantitative and mixed-method studies remarkably since 2010. [48]

Chau et al. (2006) explained how they constructed a scientific knowledge web portal. Whatis interesting is that they specified, motivated, and evaluated their solutions. User-cases wereconducted in their evaluation study including a comparison with a similar web portal tocompare the usability. [5]

3.3 Design Thinking

A study by Steinart et al. (2012) described the involvement of developers in software redesignactivities and proposed a new concept and a prototypical implementation for programmingenvironments that facilitates for developers in both simplicity and consistency. Additionally,they also introduced a concept of continuous versioning that facilitates for recent changewithdrawals in programs which they negotiated that the practice of Design Thinking is asignificant interest in both software development in overall and program design activities.[13]

3.4 First Impression Study

Gronier (2016) addressed the importance of first impressions and measured the first impres-sion of users by conducting the 5 Second Test on a meteorological web application. He mea-sured the users’ recognition of the use which meant whether users’ could recognize the pur-pose of a page. The context was established and tasks were defined for the test users. It

17

3.5. Product Implementation

was concluded that the first impression is heavily based on specific elements of the interfacewhich included the color, fonts, icon, and other specific aesthetic elements, especially, duringthe first moment of interaction. Additionally, tips for usability practitioners was providedin the study, for instance, this method is not suitable for checking the usability issues of aninterface. [27]

3.5 Product Implementation

Three Development Phases

Rohrer (2014) stated that the product development phase and its associated objectives areimportant distinctions to consider the choice of research method. There are three phases ofproduct development described in the study; Strategize, Execute, and Assess. Strategize isthe first phase that is entered at the beginning of product development. Here new ideas andopportunities are generated. Execute is the second phase that is entered depending on thedecision of "go/no-go". Here the design direction is continuously being improved. Furtherresearch during this phase helps to reduce the risk of execution. Assess is the third phase thatis eventually entered only when the product is believed to be ready for use. Here informationregarding the product is collected from users to measure its success. [20]

Prototyping in the Designing Process

Bansemir et al. (2014) made a summary of paper prototyping an interface design process thatmay function and affect the development process. The design process of an interactive visu-alization introduced a user-centered design in the form of a paper prototype. This processwas put as a new approach to integrate into the software development procedure. The paperprototype was used as a tool for communicating and testing between different teams whereeach team had their own expertise. This approach showed positive results in benefiting thedesign process. [15]

A typical prototyping phase, according to Saiedian and Dale (2000), can be outlined as fol-lows:

1. Design a user interface. Apply the best assumption and develop a rough outline of thefunctionality of the interface.

2. Construct a "quick-and-dirty" system. Make the interface assessable for the users.

3. Allow users to use the prototype and prepare to collect user feedback.

4. Observe the users. Especially, pay close attention to the first reactions and impressions.

5. Collect user feedback. Question the users’ thoughts regarding the prototype and allowfor a comprehensive review.

6. Return to the sketch. Reconsider the interface according to the experience with theusers and redo from step 1. [51]

The book by Tidwell (2012) provided solutions to common design problems and attemptedto help designers by suggesting design options. What, use when, why, how and examples ofapplications are mentioned for different design features and patterns. [33]

18

3.5. Product Implementation

Interface Design Elements

Javier (2012) mentioned the importance of first impressions and the first crucial 5 secondswhen the users decide whether to stay or leave the website. It is especially dependent on thefollowing factors: structure, fonts, colors, spacing, symmetry, amount of content such as text,and more.

A study of how a user’s first impressions are influenced by visual complexity and prototyp-ical was conducted. Results showed that these factors are interrelated. Aesthetically, highvisual complexity is perceived as less beautiful, despite its familiar design. Meanwhile, lowprototypicality even worse, despite its simplicity in design. It’s concluded that users preferboth simple and familiar website design, therefore both visual complexity and prototypical-ity are to be considered. It’s suggested to design a simple and familiar web appearance forthe best first impression. [16]

Crawford et al. (2005) identified and proposed web-based survey design standards. Theymanaged to find what’s a good standard for web-based tools, in their case is a survey. Theymentioned, for instance in text, a good standard is to use black font color, 10 to 12 points insize, and Sans Serif or Arial, which was and still are popular fonts today. What they mean isthat font color, size, and style matter in a design. For emphasizing, they would prefer to usebold blue text and red for displaying errors. [6]

Passera (2012) studied visualization in objects and compared them to traditional text-onlyto find out which ones considered more usable and provided a better user experience. Theresult showed that the visualization of information enabled users to work faster and moreaccurate, hence, this seemed more usable. The visualizations inspired a predictable slightlyless difficult user experience than the text-only. [49]

Another similar visualization study by Patterson et al. (2014) focused on the human cognitionframework for information visualization in their paper. They described that direct contactwith cognitive processes enables the induction of insight, reasoning, and understanding.These factors can be considered in the design process for a better UX in a sense of intuition.It was concluded that a well-designed visualization enables control of the user’s attentionto important features of the screen, and also presents patterns inducing implicit learning forprocedural memory. Their paper provided a bridge between human cognition to informationvisualization with emphasis on top-down influence. [43] Related to information visualiza-tion techniques, Punchoojit (2017) provided a systematic literature review of the existingstudies on UI design patterns where the use of icons in interfaces was considered. The articlementioned the purpose and the benefit of using icons It was also addressed how the use oficons could benefit from responsive designs. [35]

According to an investigation by Lin et al. (2005) on including playfulness in a websiteshowed that the value of including playfulness convinced the users to stay and continueto use it. Their result pointed out that perceived playfulness, confirmation to satisfaction,and perceived usefulness contributed undoubtedly to the users’ intent of continual use of thewebsite. These following five constructs were measured:

1. perceived usefulness

2. confirmation

3. perceived playfulness

4. satisfaction

19

3.6. Evaluation Methods

5. continuance intention [11]

Furthermore, the study conducted by Cao and Wu (2016) showed that only a few universitiesin China adopted a responsive design in their web portals. They concluded that responsiveweb design is neither optimal nor the sole way in the future. [22]

3.6 Evaluation Methods

Rivero and Conte (2017) presented a study of UX evaluation methods and discovered thatUX evaluation methods mostly focus on the prototype. Most are analyzed with quantita-tive data. They suggest taking all existing aspects including qualitative data into account. [47]

Levy and Calacanis (2015) introduced in their book four tenets in their proposed methodof thinking in a UX strategic way. These four tenets comprise of Business Strategy, ValueInnovation, Validated User Research, and Killer UX Design. They state that the UX is thefeeling of a person when using an interface in an attempt to accomplish a task, but in reality,it refers to whether that person has a good or bad moment attempting to use the interface.Moreover, they state that continuous testing is crucial to make sure that the product willdeliver solutions people truly desire. [36]

Bulck et al. investigated a patient portal through feedback from cross-sectional surveyswhere they considered the needs, expectations, and attitudes from the users which are pa-tients, and described their process of evaluation and assessment. [8]

Ng and Wang (2018) proposed an evaluation method that they used in evaluating a cloudplatform service. They studied the service usability by implementing design thinking forintegration analysis. [42] They applied Design thinking in a learning loop which is said to behighly theoretical[36].

Brantley et al (2006) presented a study of four goals. The goals consist of determining theclarity of customization features and ease of navigation, collecting qualitative feedback onweb layout and content, identifying improvements, and measuring users’ perceptions of aweb tool. In their study, they included a screening survey to collect data from their users.What’s interesting is that they made use of administrative functions which showed to havethe greatest impact on evaluating a tool. [4]

Andrenucci et al. (2018) described the implementation and evaluation, with a mixed-methodapproach, a set of knowledge patterns as guideline for designing a mental health portal basedon following knowledge patterns:

• knowledge integration of language technology approaches

• experiments with language technology applications

• user studies of portal interaction

The mixed-method approach used formative workshops with experts within knowledgepatterns and summative surveys with experts within specific domains. [7]

Michailidou et al (2014) created a framework of selected methods in analyzing, creating, andevaluating UX. They analyzed the user’s impression and emotional impact of products andselected the most effective and applicable evaluation methods. [30]

20

3.6. Evaluation Methods

Silva et al. (2014) attempted to verify the suitability of different usability evaluation methods.Heuristic evaluation was first conducted; that is when professionals make individual evalu-ations of the usability of an interface. Thereafter, the verbal approach; interaction rehearsaltechnique, was conducted. This method was performed by first collecting demographic dataof each user and then allow the user to perform a verbalization of the meaning and use ofevery function of the interface presented. [21]

21

4 Method

This chapter describes how this project work was carried out and the methods that was used.

4.1 Development Phases

Three process development phases were considered in this project related to what Rohrer(2014) suggested. [20] These phases built the foundation of the process outline of the projectand are described in the following sections.

Phase 1: Strategize

This initial phase, strategize, included the pre-study process. During this early phase, plan-ning and obtaining information were the main objectives in focus. To achieve the goal, fol-lowing tasks were performed during this phase:

1. Study literature and earlier works related to this project

2. Specify requirements

3. Form use cases

4. Study users

5. Prototyping

6. Test the prototypes

7. Collect feedback

8. Repeat from step 4 if changes are required

9. Plan and prepare the development process

10. Decide on "go/no-go"

22

4.1. Development Phases

Pre-study

As shown in Figure 4.1, the pre-study phase consisted of studying literature, composing arequirements specification, and elaborating questions and a questionnaire for interviewees.The majority of the resources in this phase were spent on studying literature in which rel-evant previous works were reviewed. These studies were performed for the purpose ofensuring that no exact nor very similar studies had already been conducted, and for findinginspiration for the project as well. The data collected related to the development and eval-uation methods were compared to one another in order to find the most suitable method tofulfill the research task of this thesis project.

Following the guidelines of requirements engineering provided by Saiedian and Dale (2000)[51] mentioned the importance of understanding "what to build" and "what to expect". Toidentify customer needs and understand the true intention of the company, a requirementsspecification was composed with iMatrics consisting of both functional and non-functionalrequirements as displayed in table A.1 and table A.2. In this project, iMatrics was consideredas the buyer and their customers or employees as the end-users.

Study Structure

Following the guidelines mentioned above, the project was planned to be carried out in sev-eral processes illustrated in the following study structure, see figure 4.1.

Figure 4.1: An overview of the study structure of the project

Both the processes implement and evaluate included the lean UX learning loop that Jamal etal. (2018) described in their proposed approach which was supported by Levy and Calacanis(2015), see figure 2.3. [10][36]

A thorough literature study was conducted during the beginning of this pre-study phase inorder to seek inspiration and form a theoretical foundation of the project. The requirement

23


engineering process was considered for attempting to specify a well-written requirementsspecification and understand the users and their true needs. Different obstacles and currentstate of requirements elicitation were investigated during the interaction with the key users,such as iMatrics customers and employees, in the interview process. Additionally, to achievea sense of "what to build" and "what to expect" between developers and users, a use case wasperformed along with the interview that contributed to understanding the real requirementsof the users, their behavior, and the environment. Furthermore, by studying several differentstakeholders helped identify ethical regards in a systematic way based on the study by Fogg(2003)[14]. This project includes studying both internal and external users with differentexpertise in relation to iMatrics using the current demo. The external users involved in thestudy were the customers of iMatrics consisting of a journalist, data analyst, Chief DigitalOfficer (CDO), business developer as well as production developer. Meanwhile, internalusers consisted of an international business developer, Chief Revenue Officer (CRO) andChief Technology Officer (CTO) of iMatrics.

Additionally, this phase included gathering data about the current demo. As mentioned, in-terviews and use case studies were conducted in order to attempt for gathering user-centereddata in a deeper aspect from iMatrics customers and employees. The data of interest willmainly revolve around users’ experience, interaction, the user interfaces as well as userneeds and issues which provided the foundation for the following phase, the implementa-tion phase. The findings from the study were summarized and listed as to-do tasks wheresolutions were worked on and applied in prototypes in the form of sketches. Thereafter, thesesketches were worked together, realized, and implemented in iMatrics web portal during thefollow-up phase.

The remote contextual inquiry approach, described by English and Rampoldi-Hnilo (2004),along with the Design Thinking method, suggested by Steinart et al. (2012), was especiallyperformed for obtaining data strictly in a user-centered scope. [24][13] The main reason forapplying Design Thinking was to enhance the process of gathering user-centered data in apractical and iterative manner for both involving the users and maximizing user satisfaction.The collected data was primarily derived from the users through observing, listening, andinterviewing. Considering the setup of the interviews and the number of interviewees, thisapproach did not qualify as a quantitative approach, but as a qualitative one. The interviewswere held approximately from 30 to 45 minutes long for each session and revolved arounddetails in user interaction and experience. Alongside each interview, a use case study wasincluded where the interviewee was encouraged to perform a task they normally would doand provide comments on their thought and process when performing the task. The task setfor the use case study was to generate tags in the demo. The purpose of the use case studywas to understand the user in the way they perform their task and identify both positive andnegative characteristics and features in the demos. To clarify and enhance the verification ofthe results, a brief survey was constructed. The participants that conducted both the first andfollow-up study was sent this brief survey for rating their overall experience concerning thedifferent user experience and usability aspect of both demos.

Phase 2: Execute

The second phase, execution, was considered as the implementation phase which mainlyfocused on the product development processes.This phase was only proceed after the previous phase been performed and given the "go"-decision. Following steps was proceeded to:

1. Adapt to the standard of the organization

2. Study the development tools to use

24


3. Study the current tool to be developed

4. Develop the tool according to findings and needs

5. Test the developed tool on a few users

6. Collect feedback

7. Re-design or re-implement features

8. Repeat from step 4 if changes are required

Data Gathering

For implementing the new demo, the current demo was used as reference for gathering dataregarding the present user experience where the participants in the study represented thesource of data. Comparing qualitative studies and quantitative, qualitative studies was a bet-ter fit for collecting data regarding usability. Nielsen (2004) would recommend at least fivetest users for measuring usability. Following Rohrer’s (2014) descriptions and guidelines[20],this study was based on qualitative research where a total of 8 participants were introducedto. These participants were later classified in one of the following two user groups. One usergroup consisted of users possessing high technical competence and another of non-technicalusers. Age is a factor that potentially has an effect on one’s technical competence[6], thereforthe questionnaire will include both the age and current profession of the participants. Theinterviews and use case studies were conducted in one-to-one sessions following the guide-lines on how to conduct interviews provided by Kylén (2004)[34]. The objective of collectingthe demographic information of the participants was to help understand the different areasof use and focus in the demo while also contributing to determining whether the user can beclassified as a technical or non-technical user. The technical level of the participants was de-termined by the obtained demographic information which involved the following questionsduring the beginning of the interview sessions:

1. What’s your age?

2. What’s your profession?

3. What’s your experience on using web-applications or web-based tools?

• basic

• advanced

• expert

Connected to the user’s first impressions, the next following questions were asked in order toidentify and understand the user’s anticipation and expectation of the demos which allowedfor measuring the user’s first impression between the demos. The first impression was con-sidered the factors addressed by Gronier (2016), and moreover, also study the user behaviorof the demo [27]. These data were gathered by asking the following questions:

1. What’s your experience with iMatrics auto-tagging demo today?

2. What expectations did you have of the demo before you were a customer of iMatrics?

3. What expectations of the demo do you have today?

25


Before moving on with further questions, a use case study was conducted in the middle ofthe interview with the interviewee as the user where the user was encouraged to follow afew instructions to perform a task on iMatrics current demo. The objective of the chosen taskwas to auto-tag an article of their own choice. The figure below, see figure 4.2, illustratesthe main task of use case study in its simplest form. The purpose of this practice was toidentify and clarify the requirements, moreover, also maximized the flexibility of the designand implementation of new features.

Use Case: Autotag an articlePrimary Actor: Customers and employees of iMatricsScope: iMatrics autotagging demoLevel: User goalBrief: The participants performs the use of demo as they normally do and are allowed to useany other sources to fulfill the given objectivePreconditions: User is introduced to the demo and made certain to possess a login credential

Figure 4.2: A simple illustration of the use case study

Studying users’ interaction while they attempt to complete the specified task of the use casestudy helped to provide an insight into the navigation and interaction steps through users’experience. This made it easier to understand the users in a contextual aspect. Conductingthe studies from iMatrics office environment, and the users’ at their own choice of place, datawere collected through observation via video call and screen sharing technique where theinterviewee was encouraged to comment on their thought of the processes when performingthe task specified as following:

1. Log in to iMatrics autotagging demo

2. Insert an article in the editor

3. Explain the findings

4. Log out of iMatrics autotagging demo

After conducting the use case study, further questions were asked in order to confirm andfurther understand users’ thoughts as well as receiving feedback. The follow-up questionswere specified as follows:

1. What was the first impression of the demo?

2. Was the demo clear and easy to use (intuitive)?

3. Did the the demo make it easy to understand tagging?

4. What do you think can be improved for the users in terms of:

26

4.2. Developing the New Demo

• ease of use

• intuition

• interaction

• aesthete

• playfulness

5. What do you think can be improved to attract new potential customers?

6. What would make the demo more useful for you, any new wishes regarding the func-tionality of the demo?

Considering question 4, for avoiding stepping outside the research scope and focus more onthe concerning factors, following elements were taken into account:

• structure

• font

• size

• color

• spacing

• layout

• symmetry

• content

• navigation

• control functions

• responsiveness

After obtaining data regarding the current demo as mentioned above, sketches were drawnfor aiding the decision of the new design of the demo. The summary of the findings played asignificant role in implementing the new design. The sketches of the prototype were realizedin code adopting iMatrics standards and structures for code. The codes were written in Reactwhich is a JavaScript library for building user interface where JavaScript is a coding language[45][52]. However, instead of pure JavaScript, TypeScript was used which is a typed supersetof JavaScript that compiles to plain JavaScript[54]. Documents and codes, such as brandidentity guidelines, instructions for committing codes and code examples were provided byiMatrics where these was studied in order to understand and adopt the way of designingand implementing accordingly.

4.2 Developing the New Demo

This section covers the method used for developing the new demo. With the qualitativestudies conducted, the data collected regarding the current demo from users was applied inan attempt of adopting the most satisfying user experience in the new demo.

27


Studying the Current Demo

Before implementing the new demo, a study of the current demo was conducted on 8 partici-pants in total who were introduced by iMatrics with consideration of balancing the number oftechnical and non-technical users. The figure below shows the interface of the current demothat was studied first, see figure 4.3.

Figure 4.3: An overview of iMatrics’ current demo

The current demo has its editor displayed to the left side of the screen and the tags displayedto the right. The tags which are represented as categories, topics, or entities are only dis-played when tags are recognized in the inserted text or article.

The study of the current demo attempted to identify both the positive and negative meritsand include them in the new demo. The findings were summarized and concluded whetherto keep, modify, compensate, or remove. The features with positive merits were preservedand, on the other hand, the negative ones were either compensated with additional options,modified or deleted. The new styles and features were implemented based on the users’desire and preferences from the study of the current demo. The order of the implementationof the changes and features was based on the feasibility of the limited resource.

Implementing the New Demo

The figure below shows the result of the interface of the new demo that was studied as afollow-up of the current demo, see figure 4.4.

28


Figure 4.4: An overview of iMatrics’ new demo

The needs, desires, improvement suggestions, and solutions according to the users from thestudy of the current demo were strictly considered during the implementation of the newdemo. Furthermore, the requirements specification, see Appendix A, was used as a checklistfor keeping the project needs in the track. During the development of the new demo, webstandards or conventions was considered in the design and used as a support in the design-ing process. Not every standard or convention mentioned by Crestodina was applicable orrelevant in the new demo. However, it was believed that adopting the most common designfeatures accordingly would benefit the use of the demo in the sense of intuition[1].

Unfortunately during the process of the follow-up study, one of the technical intervieweescould no longer participate in the interview and use case study concerning the new demo.Therefore, this study ended up consisting of 3 technical and 4 non-technical participants.

Phase 3: Assess

This phase was considered as the evaluation or assessment phase and was aimed to sum-marize the finding of both the current demo and the new demo. The findings and resultsachieved from the new demo were compared to the current demo with a focus on the inter-face and user experience. To accomplish this, a follow-up interview and use case study wereconducted where the new demo was put into action similar to the previous study concerningthe current demo. This phase comprised of the following procedures:

1. Test the new demo with users

2. Collect information regarding the usability and user experience of the new demo

3. Summarize the needs, desires and improvement suggestions

4. Evaluate the new demo compared to the current demo

29

4.3. Studying the Demos

4.3 Studying the Demos

As mentioned, both the outline of the interviews and use case studies were similarly struc-tured and conducted on both the current and the new demo as mentioned above, see 4.1,targeting both internal and external users in relationship with iMatrics.

The current demo was first studied with the participants who voluntarily agreed to take partin this study. Regarding the choice of volunteers, the aim was to have a balanced amount oftechnical and non-technical participants. It was expected that these users had at least onceinteracted with the current demo before conducting the study.

The new demo was tested on the users who conducted the previous test on the current demo.Here, the users were continued to be encouraged to comment freely on the user experienceand the interface. Flaws on the positioning in the layout was studied by allowing the userto sort and position that component or element according to the user’s preference for un-derstanding the user and identify improvement suggestions. This UX study was performedsimilarly to the card sorting method mentioned by Nielsen (2004) and Usabilitest. [32][55]But instead of using paper cards when conducting the card sorting study, the users wereasked to vocally sort and place the element or component within the demo that they deemedmost satisfying.

To measure the overall usability of the current respectively the new demo, the participatingusers were studied during their interaction with the demos when conducting the use casestudy. The effectiveness, efficiency, and satisfaction were measured through observation andthe newly implemented features were answered whether it did improve the user experienceor not. [41] After the follow-up study, the participants were sent a brief survey through emailasking them to rate their overall user experience regarding both the current and the newdemo as following:

From a scale between 1 to 5 (1 = very negative, 5 = very positive), how would you rate thecurrent demo and the new demo regarding the

1. First impression?

2. Intuition (ease of understanding)?

3. Usability (ease of using)?

4. Overall satisfaction?

The survey was sent to enhance the results where the responses were used for clarifyingthe verifying the overall user experience of both the demos which answered for whether thenew demo succeeded in improving both the user interface and user experience or not. Moreimportantly, the responses were also used for measuring, comparing, and concluding thefirst impression, intuition, usability, and overall satisfaction of the demos.

The effectiveness was measured by quantifying the number of users that managed to com-plete the given task, which was to generate tags with the demo. The efficiency was measuredby studying the amount of time required to achieve a task. During the use case study, extraattention was paid to observe the amount of time needed for completing the use case task.The satisfaction was measured through the users’ rating on the demos and comments ontheir overall experience of the task and difficulty in completing the given use case task.

30

5 Results

This chapter presents the results obtained from the studies described in the previous chapter.The findings are revealed, summarized, and described based on the interviews and use casestudies. The findings of the study were extracted from a total of 8 participants consisting ofinterviews and use case studies regarding the current demo. Unfortunately, one of the par-ticipants could not attend the follow-up study resulting in 7 participants in total, 3 technicaland 4 non-technical users.

5.1 Current Demo Findings from Technical Users’ Perspective

This section covers the findings of the study conducted on 8 participants consisting of inter-views, use case studies regarding the current demo.

Interview with Persona 1

The first interview was conducted with a 27 years old female and expertise in data analystwhich is called Persona 1 in this study. Persona 1 is classified as an expert user of usinginternet and web-tools, therefore regarded as a technical user.

Interview Findings

Persona 1 stated that the current demo was well-implemented in general, however, thereseemed to be missing some buttons, which she meant that there is a need for additional func-tionalities. In overall, Persona 1 mentioned that the current demo fulfilled the expectationsshe had before becoming a customer of iMatrics.

The interviewee of technical competence showed an interest in new functionality in the demosuch as reducing the long-winded process of copying the text of an article from one sourceto another was desirable as well as guidelines and indicators were either absent or not clearat all which she would have wanted it. In terms of the first impression, the current demoshowed a very enthusiastic result. However, it was claimed that it was a bit rough in thebeginning because of the long-winding copy-pasting process, and then cleaning up the non-relevant text in the editor such as the author name, photographer name, and recommended

31

5.1. Current Demo Findings from Technical Users’ Perspective

articles, etc. This means that the user must manually remove some text resulted from thecopy-pasting process from a news source. This is important because it could affect the resultof the tags which may lead the auto-tagging to generate non-relevant tags. However, theexperience during the latter steps was smoother since the tool handled the rest of the work.Overall, the demo deemed both quite clear and intuitive in terms of simplicity on the screen.

Both yes and no was the answer regarding whether the demo made it easy to understandtagging. It was motivated that the categories did not have any mentions or other informa-tion regarding the relationship to the content of the article. There were some implementedfunctionality that she did not know was there to aid such as the navigation to a web-sourceexplaining the definition of the term displayed as an entity.

The interviewee explained, first and foremost, that guidelines and interactive feedback wereabsent which possibly affected the usability and perception of the usability. It was believedthat by implementing these functionalities could credulously attract new potential customersto iMatrics. Additionally, to increase the trust of the users, a link to iMatrics web page orsome sign of ownership was suggested to be displayed in the demo. Language referencingwas also something that could be considered in the new design.

Use Case Findings

During the use case of testing the usability, Persona 1 demonstrated how she normally woulduse the demo and commented on her thoughts throughout the process. The use case execu-tion is described as following:

1. User logs in successfully and proceeds to the demo by entering credentials

2. User switches tab

3. User selects an article from a news source

4. User copies the article by marking it and pressing the key combination of CTRL + C

5. User returns to the demo tab

6. User pastes the article in the editor by pressing the key combination of CTRL + V

7. User removes non-relevant text in the editor

8. User attempts to identify the generated non-relevant tags

9. User logs out successfully


In conduction of the interview with Persona 2, a 35 years old male, concluded that there isa need for guidelines and popover tooltips information in the demo to facilitate the under-standing of the different tags and the tag itself. Persona 2 works as a business developer andis classified as an expert in using the internet and web-tools, therefor regarded as a technicaluser.

Interview Findings

The interviewee stated that his experience with the demo is positive. However, he expectedthe demo to be less limited in accessibility which he meant that it was expected to be lessprivate and more open and accessible for other users and not solely for iMatrics customers

32


and employees.

Persona 2’s first impression revolved more around the layout of the design. He stronglyapproved the layout which elaborated from a standard design, however, he pointed out theissue of being anonymous. The demo did not display any mark of ownership nor matchthe brand identity of iMatrics which made the demo unrecognized or not really felt like aproduct of iMatrics. Comments on the layout and the typography indicated that there is roomfor improvement there, and furthermore, markup in the text for references was a feature hewould fancy.

Use Case Findings

The second use case with the second interviewee, Persona 2, was conducted as following:

1. User logs in successfully and proceeds to the demo

2. User opens up a new tab

3. User navigates to a news source and selects an article

4. User copies the article by marking it and pressing Ctrl + C

5. User navigates back to the previous tab with the demo

6. User pastes in the text by commanding Ctrl + V

7. User removes non-relevant text

8. User analyses the tags

9. User points out that there are some non-relevant tags



The interviewee, Persona 3, is a 52 years old male who works as a Chief Digital Officer (CDO).Persona 3 possesses professional experiences within IT systems and therefore is regarded asa technical user in this project.

Interview Findings

Persona 3 described that his expectations of the demo before becoming a customer of iMatricswere to quickly gain an insight and understand what an article is about with good precision,and a few errors. The demo is showing accurate tags, however, the work manually taggedby a human is still more accurate according to Persona 3. He expected the demo to show aresult of a minimum of 5% "bad" tagged articles with the auto-tagging service.

He stated that his first impression on the current demo was positive, it was quick and showeda large number of tags. However, sometimes the demo could tag in a too broad context whichwould include non-relevant tags. The demo is regarded as intuitive, easy to understand, use,and made easy to understand tagging.

An improvement in the demo he pointed out would be to uniquely tailor the output of tagsfor every customer according to their tagging preferences. Guidelines and instructions areneeds in the demo to facilitate the understanding of the demo for new users. Aesthetically,the demo has space for improvement in the visual design, such as adding spinners or colors.

33


Use Case Findings

1. User navigates to the demo login page

2. User logs in successfully and proceeds to the demo

3. User opens up a new tab in the web browser

4. User navigates to the Swedish news agency website https://www.tt.se

5. User selects an article

6. User marks the article text with the mouse

7. User copies the article by commanding CTRL + C

8. User navigates back to the demo tab

9. User pastes in the article in the editor by commanding CTRL + V

10. User experience no response from the demo

11. User logs out and in again of the demo

12. User pastes in the article text again by commanding CTRL + V

13. User analyses the displayed tags



The interview with Persona 4, 27 years old male, described several improvement opportu-nities in every aspect of the current demo throughout years of experience with it. Persona 4is a Chief Technology Officer (CTO) who works with software development and uses bothinternet on a daily basis and develops web tools. For those reasons, Persona 4 is classified asa technical user in this project.

Interview Findings

He revealed that the expectation and the point with the current demo were to build it assimple, clean, and aesthetic as possible that constitute a good user feeling. It was supposedto adopt as a sale support tool and clearly demonstrate the auto-tagging function and thebenefits of it. The current demo was also supposed to be an internal tool for testing as wellas troubleshooting.

Persona 4’s experience with the demo today is positive as it does its job. However, there aresome desires that have been identified during the journey of using the demo. The tool isstylistically pure but is missing identity, a theme that identifies it as a product of iMatrics wasmissing. Apart from that, there are apparently some bugs as well. In overall, the experienceis positive, and the demo met its expectation as it auto-tags articles, display relevant tags,and utilized as a sale support tool.

Persona 4 remembered his first encounter and the first impression of the demo was verypositive, stylistically pure, and way more aesthetic than the first version they used. For him,the demo felt intuitive and both easy to understand and use. However, he was aware ofthe absence of guidance which could cause some confusion for new users. For instance, notmany of their customers are aware of the lines that indicate the relevancy of the tags and ithappens that users interpret them as simple underlines. Moreover, not many are aware of

34

5.2. Current Demo Findings from Non-technical Users’ Perspective

the clickable entities which direct the user to a Wikipedia page. These features need to beexplained to potential customers including explanations of tags, what topics and entities are,and how they relate to each other. It was easy for Persona 4 to understand tagging, however,it might not always be as easy as it seems to understand tagging.

There are a few improvements suggestions according to Persona 4. The first improvement hementioned regarding the current demo is to implement a feature that allow users to adjusttags and report the adjustment. If the user is a customer, then the user may choose an articlein the customer’s article database and paste it to the editor where it gets tagged. Moreover,this allows the display of tags to be stored in a database and enables users to make changesmanually if desired with a feature that shows the suggestion of tags such as related topicsor entities that failed to show up as a tag through the auto-tagging function. Furthermore,hovering or clicking on tags should generate a popover description of the tag word and,eventually, display a statistic of how frequently the tag is used is desired also.

Regarding the appearance, the theme does not suit the organization, and which can beimproved by adopting iMatrics brand identity standards. As an internal user, Persona 4mentioned that he would like to have the authority to make changes in taxonomies throughan admin function in an admin interface. This includes authorization control to restrict somefunctions based on user privileges. For instance, only internal or specific users may accessthe admin interface.

As the demo acts as sale support, he believes by allowing customers to have more controlwould lead to greater satisfaction such as manually adjusting tags as mentioned. Addition-ally, the tonality and feel of the demo should represent iMatrics, and lastly, the editor couldbehave more similarly to a WYSIWYG editor with style elements for title and content.

Use Case Findings

1. User logs in successfully and proceeds to the editor


3. User navigates to the website of the news agency, Göteborg Posten

4. User marks the whole article and copies it by quick commanding CTRL + C


6. User pastes in the text in the editor by quick commanding CTRL + V


5.2 Current Demo Findings from Non-technical Users’ Perspective

This section summarized the findings from non-technical users’ perspective.


The interview held with the 54 years old male, Persona 5, showed a focus revolving thedisplayed tags. Persona 5 works as a production developer and was regarded as a non-technical user which he claimed in the interview that his technical level with internet usageand web-tools ranged between basic to advanced levels.

35


Interview Findings

Persona 5 stated that the demo was intuitive and easy to understand. The expectation ofthe tool was not high at all before becoming a customer of iMatrics. The old demo turnedout to be better than expected, however, he expected that it would turn out to be a bit morecomplicated. For instance, it was expected to include a filtering function, which he meantwould filter out non-relevant text when pasting an article in the demo.

The first impression of the old demo according to Persona 5 was the simplicity of it whichhe found very positive and contributed to the understanding of tagging. Overall, it wasintuitive and made easy to use and understand. What he desired implemented is the filterfunction as mentioned, and display of alternative matching tags to compare with the tag thatwas auto-generated.

Since the auto-tagging system is not always displaying relevant tags to the article, he desiredan improvement in the accuracy and precision in the tagging. Furthermore, whenever “bad”or non-relevant tags are displayed, he desires the ability to control it in form of reporting itby the click of a button, for instance, or simply removing the tag. Persona 5 also mentionedthat he would like to have a library of his own and be able to archive any tagged article withthe demo. He believes his wishes would also affect the potential of attracting new potentialcustomers as well.

Use Case Findings

The use case with the third interviewee, Persona 5, was conducted as following:

1. User navigates to the login page

2. User enters the given credentials and proceeded to the editor



5. User copies the article by pressing the right mouse button and selects copy


7. User pastes in the article by pressing the right mouse button and selects paste



The interview conducted with Persona 6, a 35 years old male, spoke the thoughts and feelingsof the demo from the perspective of a journalist who was classified as a non-technical userjudged from his background description.

Interview Findings

Persona 6’s first impression of the demo was positive in the sense that the demo actuallyfulfilled its job of generating relevant tags. However, the downside of the demo was theabsence of guidelines and explanations. For instance, the tags are understood, but the weightof the tags could solely be misinterpreted as underlines that serve no informative purpose atall. In overall, the demo was intuitive and easy to understand because it had a simple designand allowed users to start working immediately.

36


Persona 6 stated some suggestion on improvements such as implementing the strength ofrecommendation and other recommendation suggestion of tags. The suggestions of tags ap-plied in the early stage before an article is published make it hard to find the problem. Whena non-relevant tag is displayed, he would have liked to be enabled to report that in a quickand efficient way. The current way to report a "bad" tag is through email to iMatrics. Anotherimprovement involved the number of tags, which he wanted more “slimmed” to reduce thenumber of non-relevant tags displayed. The layout and the design were not bothering himat all, however, he believed that including an eye-candy such as colors in the design couldpotentially attract more new customers.

Use Case Findings

1. User navigates to the login page

2. User enters the given credentials and proceeded to the editor



5. User copies the article by marking it and pressing the quick command CTRL + C


7. User pastes in the article in the editor by pressing the quick command CTRL + V



This interview was conducted with Persona 7 who is 35 years old male and works as aninternational business developer, and was classified as a non-technical user in the research.This study showed the result from the point of view of a business developer.

Interview Findings

Persona 7 states that the demo was well-developed, but there is some space for improve-ment, especially the size of the tags. For instance, the title will be cut-off when the titleexceeds a certain length which sometimes makes it hard to understand and make use ofthat tag. For him who is very familiar with this demo mentioned that he is aware that therelevance/weight score is a bit fussy, which has to be explained for the new customers everytime. He would like the demo to be more interactive and “demoable” meaning that he wouldlike to be able to add and remove tags as well as hover on entities to acquire the source of thetag. The expectations he has on the demo is just displaying tags.

The very first impression Persona 7 had on the demo was that it was clean and quick. Hefinds the current demo both intuitive and easy to use, however, this could be the result of hiswith the product, and he could clearly understand the tags. He desired a new or developeddisplay of weight-feature such as a gradient indicating the relevancy of the tag, and he alsowants to be able to both remove and report “bad” tags. This is what he believed the customersalso would have liked.

Use Case Findings

1. User logs in successfully and proceeds to the editor by entering credentials

2. User switches to a new tab and navigated to a news source, Expressen

37


3. User copies an article by marking it and pressing the quick command CTRL + C.

4. User returns to the demo

5. User pastes in the article by pressing the quick command CTRL + V.

6. User removes non-relevant text such as “read more”-text and names of photographer

7. User explains the tags



This interview was held with a Chief Revenue Officer (CRO). The interviewee is a 29 yearsold female who mainly works with marketing and sale. She uses the internet daily but wouldclassify herself between basic and advanced in overall technical level. Persona 8 was thereforeregarded as a non-technical user.

Interview Findings

Before Persona 8 used the product for the first time, she remembered that she expected thedemo to be better than the prototype they had during that time, as well as it to be moremodern, faster, smoother, easier to use, clearer and cleaner. Her experience with the demotoday is both positive and negative. The positive attributes are that the demo is very intuitiveand easy to use. It’s scaled that customers understand that it is the service that they areselling, and not the editor itself. The font and size of the text are well managed, however, atag with a long title is cut-off and sometimes makes it hard to understand that tag and whatit references to. This is irritating she says.

After demonstrating the use case task, she remembers her that the first impression of thedemo was positive which the simplicity contributed to. It’s stripped, which meant that thedemo is very basic. By being very basic allowed a display of a clean screen without necessi-ties which could cause confusion. This demo is intuitive and easy to use. For iMatrics, thisdemo was a great victory to have.

She stated that the demo does not make it easier to understand tagging. Moreover, it illus-trates the difficulty of tagging and makes it easier to see the system. It does not provide anydirect answer to questions, but provide good support for answering questions. Despite thesimplicity and the functionality of the demo, there are some bugs that make her considershowing the demo to potential customers. She stated that she would prefer to instead showa video of the demo and its functionalities rather than demonstrating the demo because of abug she’s aware of. Furthermore, she would like an indicator that allows her to detect whenthe demo is under maintenance. This would make sure that the demo is functioning and puther at ease when demonstrating the demo to potential customers. Persona 8 mentioned thatit would be good to be able to sort entities in different orders such as tags of type person atthe top and limit the amount of entity or category tags to be displayed. The weight line inthe current demo is often misinterpreted and needs to be clearer. Even after explaining andpointing out the weight line to the customers, they still tend to forget about it.

Persona 8 pointed out two challenging features to look forward to. First, the visualization ofa category tree that shows where a tag is positioned in the tree and how it relates to other cat-egories. Second, the potential of translating articles in the editor. Persona 8 believes that byimplementing new features, improve the design of the demo, and make the demo more mod-ern would improve the overall image of iMatrics. This means that the demo also acts as proof

38


that presents the capability of iMatrics to potential customers displaying that iMatrics pos-sess high technical competencies and delivers quality. This potentially leads to increased trustfrom the customers. Additionally, for attracting more potential customers, entities should bemore self-explaining and reference to a source, and hovering the cursor on a tag should dis-play some general information of the tag from that source.

Use Case Findings

1. User logs in successfully and proceeds to the editor

2. User types something on the demo editor

3. User navigates to one of iMatrics potential customer’s article source

4. User marks the entire article with the mouse

5. User copies the article by pressing the quick command CTRL + C


7. User pastes in the text by commanding CTRL + V in the demo editor

8. User removes non-relevant text in the article


Summary of the Interviews

The interviews identified the user’s preferences and improvements. The features in the cur-rent demo that users showed positive expression to are listed in the following tables below,see table 5.1 and 5.2. The findings are divided into two separate groups, technical and non-technical perspectives.

Feature Description

Simple setup Ease of use and proceed with the demo

Intuitive The demo is easy to understand

Quick response The demo has a quick response time

Large variety of tags The demo displayed a broad variety of tags

Stylistic clean The demo shows no unnecessary styles or features

Table 5.1: Positive features from technical perspectives on the current demo

Feature Description




Table 5.2: Positive features from non-technical perspectives on the current demo

39


The user desires or improvement points extracted from the interview are listed in the follow-ing tables below, see table 5.3 and 5.4. These desires or improvement points were identifiedeither through the participants’ comments during the interviews or identified through theuser behavior during the use case studies.

Feature Description

Filter non-relevant con-tent The inserted article shall not include non-relevant text

Clear use guidance The users shall understand how to use and interpret the tool

Tag references The tags shall include references of its meaning

Brand identity The tool shall include the theme of iMatrics

Less anonymous The tool shall include the ownership and reference to it

Increase accessibility The tool shall be open for use for more than just customers ofiMatrics

Mark up reference The text in the tagged article shall be marked when referenced toa tag

Narrow tag context The relevancy of the tags shall be narrowed down and not in-clude a broad context

Eye candy The tool shall be more attractive in sense of aesthete

Interaction feedback The features shall be interactive such as including style uponhovering an element that indicates that it is interactive

Admin interface The user can enter an admin interface and perform admin func-tions

Admin functionality The user can in the admin interface submit changes to thedatabase

Improved weight indica-tor

The weight indicators of the tag shall be clear and easy to inter-pret

Interactive entities The entities shall be interactive and be interactive

WYSIWYG editor The text editor in the demo shall include style elements

Responsive content The demo shall be responsive and function for different screensize devices

Tag recommendation Recommended tags shall be suggested when user attempt to addtags

Table 5.3: Desired features from technical perspectives on the current demo

40

5.3. New Demo Findings from Technical Users’ Perspective

Feature Description

Filter non-relevant con-tent The inserted article shall not include non-relevant text

Article library The user shall have a database with articles stored

Archive tagged articles The user can save and archive tagged articles in a library

Tag references The tags shall include references of its meaning

Brand identity The tool shall include the theme of iMatrics

Improved weight indica-tors

The weight indicators of the tag shall be clear and easy to inter-pret

Text translation The text can be translated into different languages

Visualization of tag rele-vancy

The user can visualize adjacent tags related to a targeted tag, forinstance, in a tree structure

Tag description Tags should include a description of itself

Table 5.4: Desired features from non-technical perspectives on the current demo

5.3 New Demo Findings from Technical Users’ Perspective

This section describes the findings regarding the new demo from the perspective of eachtechnical user in a follow-up study.


Interview Findings

During the interview with Persona 2 regarding the new demo showed an improvementin it compared to the current demo, however, there were still some issues addressed. Thegraphical interface should be taken into consideration for further improvement includingthe spaces and colors. Compared to the current demo, the new demo kept its intuition, cleanlayout, performance, and simplicity. Even better, the new demo included the brand identitygiving the user a completely different feeling. It now feels like a product of iMatrics and theimplementation of the demo in a web portal inflicted some complications that included ad-ditional clicks to successfully navigate to the demo. It was stated that the WYSIWYG-editordid not affect the intuition, but was a bit over-engineered which brought some necessariessuch as the ability to style and insert images or video elements. It was claimed that thesefunctionalities were not necessary at all since it did not contribute or make any difference inthe results.

The new representation of the weight did not seem too intuitive and it was difficult to graspan understanding of its value unless the user managed to find the information description.Regarding the appearance of the tags, the contrast seemed low and could impact the inter-pretation, especially for color-blind users.

41


It was easy to understand the dashboard and keeping a homogeneous theme matters for thefirst impression. It was mentioned that the small device screens, such as the screen for laptopsoften could not fit the entire content. He liked the URL input feature and, in the future, hewould love to see that feature functioning and work for specific websites. Also, he expectsmark-up references to function in the future and the sorting of tags to feel more natural. Thehover popovers displayed a significant improvement in the ease of use. In overall, the newdemo adopted the old functionalities well and even provided a more modern feel.

Use Case Findings

1. User logs in successfully and directs to the dashboard

2. User access the demo by clicking the card


4. User searches for an article


6. User attempt to paste in URL

7. User switches tab and copies the whole article

8. User switches back to the demo

9. User pastes in the article

10. User cleans the text

11. User analyses the generated tags

12. User studies the demo



Interview Findings

Persona 3 had no new expectations of the new demo but a “demoable” product. The newview resulted in a positive first impression according to Persona 3 which he said appearedmore modern than the current demo and generated tags faster. The new demo had clearfonts and colors that contributed to the readability. The demo still being clear and intuitive,he suggested a clearer explanation of the tag icons representing an organization, person, orplace. He showed a high interest and focused more on the functionality and the taggingresults rather than the appearance. The use case study showed that Persona 3 was botheredby the non-relevant tags that were generated but were eased when he learned that he couldcommit tag changes that were appreciated. It is not always easy to identify the on-hover in-formation icon even though the hover popover is natural and intuitive, he commented. Also,it was suggested to try to keep the number of buttons relatively low in the demo interface.

The newly implemented search article function gave a good impression on Persona 3, but itdid not seem completely finalized. The features that required more attention and improve-ment would be the tag result and display the weight in a more intuitive and understandableway. Since this service has a great value in the news production business, the tags mustfunction and display a result as good as possible.

42


Use Case Findings

1. User logs in to the web portal successfully with the given credentials

2. User navigates to the web demo through the web portal

3. User switches tab and copies an article from the news source SKD’s website

4. User copies the text with CTRL + C


6. User pastes the text with CTRL + V in the editor

7. User failed to clean the text due to a bug

8. User cleared all data by pressing the “clear-all button”

9. User switches tab and copies a clean article from the news source SKD’s web archive

10. User pastes in the text




Interview Findings

Persona 4 mentioned that his expectations on the new demo were that it should be quick,smooth, nice and easy to understand how to use it. Additional guidelines, descriptions andnew cool functionalities were expected to be included as well as improvement in the tag ingeneral.

After revealing the new demo to Persona 4, he claimed that the outcome was positive. Thenew demo looked like the current demo, but more fashionable and developed. It was stillintuitive and user-friendly meaning that it was both easy to understand and use. However,there were issues where some features still seemed fuzzy and could need further improve-ments. Understanding the tags was easy, but the weight representation was still uncleardespite the changes. Furthermore, when adding a tag, more information regarding a tag wasdesired. One must find the information-icon in order to fully understand the tags. Therewas some unnecessary styling and insert functionalities regarding the editor, however, it feltgood in overall. Even with an increased number of buttons, the demo was still easy to use.

Compared to the current demo, it was still easy to understand tagging according to Persona4. This version gave the users more control of the tags, but one might not know what to doand accomplish with the tags.

Persona 4 had a few improvement suggestions regarding the new demo. He would like to seethe demo take new heights and not solely regarded as a demo, but more as a tool in additionto the demo in the future. By a tool, he referred to a functioning admin interface. He wantsto see the signals from the text analysis and have them indicated. This way he can showpotential customers the analysis and demonstrate an innovative technique on the leadingedge. Even emotional aspects were considered where the demo shows the user which kindof emotion a specific article may cause. Lastly, small details in the styling need adjustment, forinstance, the font size for larger screens and button colors need to be improved for increasingthe readability. Also, he found the styling of the sidebar menu positive, but he did not find theblurry bottom edge of the navigation bar comfortable which he preferred a sharp transitioninstead.

43

5.4. New Demo Findings from Non-technical Users’ Perspective

Use Case Findings

1. User logs in successfully

2. User navigates to the demo through the dashboard

3. User explores the interface

4. User commit to the search article button

5. User inserts an article from the search result

6. User analyses the tags

7. User removes tags

8. User add tags

9. User enters the admin interface

10. User explores the admin interface


5.4 New Demo Findings from Non-technical Users’ Perspective

This section presents the result of the follow-up interview and use case study regarding thenew demo which was conducted with the personas that also conducted the initial study. Notethat one participant of the technical participants could not attend the follow-up study.


Besides an improved version of the current, there were simply no other expectations on thenew demo according to Persona 5.

Interview Findings

Persona 5 stated that the new demo had a very welcoming interface, was intuitive andstylish which contributed to a positive first impression. The demo was still clean and intu-itive; however, he noticed the increased number of buttons on the interface and the process ofcleaning article text after pasting in. For instance, creating elements or style element buttonson the editor seemed unnecessary when the demo is made for analyzing data. Persona5 stated that one good reason to enable insert image would be for image recognition andanalysis. One setback with the new demo is that it had an increased number of buttons,but because these buttons were familiar, it did not impact the intuition. Another setbackis the lack of contrast in the colors, which affects the readability. On the other hand, theresponse time of the demo seemed faster which is an important factor, however, he experi-enced the animations quite slow and suggested speeding them up. Moreover, he was happyto see the tag suggestions feature, also there, he commented negatively on the unsorted order.

In general, the new demo seemed more modern and worked on compared to the currentdemo. He liked the alternative ways to insert an article such as entering an URL or searcharticle from a database and insert it. He suggested two new features; the first one is a functionthat would enable the user to input an article ID for retrieving an article which he claimedwould be a comfort as well. Another one is the feature that allows users to compare alreadytagged articles with the tags generated by the demo. Eventually, what Persona 5 truly desireis the ability to commit changes and manage entities in the entity database. He believedthat potential customers would have liked it too, but more importantly, have a smooth andcomfortable way of inserting a clean article.

44


Use Case Findings



3. User finds an article from their own organization’s dashboard

4. User marks the whole article

5. User copies the article with the quick command CTRL + C


7. User navigates to the demo through the web portal

8. User pastes in the text

9. User studies the tags

10. User attempts to search an article with the search function

11. User attempts to insert an article with an URL

12. User adds tags

13. User removes tags

14. User hovers the information icon

15. User hides/shows the tags



Interview Findings

There was no special expectation of the new demo more than it was expected to look andfunction quite similar to the current demo with some changes or new features added.

Persona 6 expressed a positive first impression of the new demo. He thought it had a visuallypleasing interface that looked more modern and intriguing compared to the current demo.He understood that the new editor was implemented to reflect the real working platform ofa journalist, however, it could cause some confusion, for instance, one could question thevalue of styling and inserting an image in the text. It is still easy to understand tagging,and he especially felt satisfied with the improvement of the tags and the tag evaluation bycolors. It was tricky to understand the meaning of the tag colors at first, but it became clearafter identifying the information icon which behaved naturally and intuitively. Moreover,it was wondered why entity tags did not have any relevancy evaluation with colors. Forfurther improvement suggestion for attracting new potential customers is to make it simpler,for instance, reduce the number of buttons. However, he would like to keep the insert URLfunction which he thought would be an effective way of inserting an article.

In overall, the demo became more modern and looked professional and qualified. He alsomentioned that the appearance affected the perception of the pricing which seemed to lookmore expensive.

45


Use Case Findings

1. User logs in successfully with the provided credentials



4. User navigates to the news agency Göteborg Posten’s website

5. User copies an article with the quick command CTRL + C


7. User pastes in the article with the quick command CTRL + V

8. User studies the generated tags

9. User adds tags

10. User removed tags



Interview Findings

Persona 7 started that his expectations of the new demo were that it should be more aesthetic,easier to understand and demonstrate the value of autotagging compared to the current one.The demo turned out to be adequate to his expectations.

The demo claimed to have successfully preserved its cleanliness and performance. The newinterface looks more modern the way it interacts with users which were affected by the newtag functions, animations, hover functions, modals, and admin interface. However, moreinformation regarding a specific tag is desirable where user can, for instance, see a statistic ofhow frequent that tag is being used and also support different languages.

The new information icon describing the weight deemed unclear according to Persona 7 ashe wanted the hover information to always be display. The demo is said to still be intuitiveand easy to understand tagging. There are further desires regarding new functionality in theadmin interface. Something desirable to have implemented is a solution to acquire historicalinformation of an article which the New York Times already has today.

Persona 7 pointed out that he liked the look of the new way of displaying the weight, butit was still unclear. To give their potential customers more freedom, Persona 7 suggests im-plementing a way to automate the creation of an account for demo purpose. Automatingthe account creation process this way should allow potential customers to set up their ownaccounts with minimum effort for everyone including the IT administrators.

Use Case Findings


2. User navigates to the demo through the dashboard of the web portal


4. User navigates to an article source

46


5. User copies the URL


7. User attempt to fetch the article by the URL with the “Insert URL”

8. User switches back to the news source tab

9. User copies the article by marking the article and pressing the command CTRL + C


11. User pastes in the article in the text editor by pressing the command CTRL + v

12. User inserts a video in the editor

13. User adds a tag

14. User removes a tag



Interview Findings

The expectation of the new demo according to Persona 8 was that it still should be fast andclean. It should be improved to be easier to understand, especially the weight value, andadopt additional features compared to the current demo. It should provide a more moderninterface. She is aware that all the desirable features might not be implemented yet but itshould still include the important and main features of the current demo.

Persona 8 judged the new version of the demo as a great improvement in overall whichexceeded her expectations. The visualization is still intuitive and clean. She commentedthat she liked the natural behavior of the new interface, especially the WYSIWYG-editorwhich is no longer row-based. However, the new tag-suggestion feature displayed the listof suggested tags in an unsorted order which stirred up some confusion. It was still easyto understand tagging and the new interface provided a way to make it easier to explaintagging. For internal users, new demo allowed a more perceptive way to demonstrate thepurpose of tagging to potential customers, she thought.

Although the new way of displaying the weight of tags claimed to be clearer, there is stillroom for further improvement. The access of the admin interface in the demo might not beoptimal to include when allowing customers to use the tool as it could signal users a sensethat prevents testing the demo with full potential. Moreover, it should be clear that the demois not the product customers buy, but the auto-tag service.

Use Case Findings

1. User logs in successfully with given credentials



4. User finds an article in an external source

5. User copies the article by commanding CTRL + C


47


7. User pastes in the article by commanding CTRL + V


9. User adds a tag

10. User explores the admin interface


Summary of the Interviews

This section presents the outcome of the user interface and usability evaluation of the re-sults from the interviews regarding the demos. The result proved that there are similaritiesbetween both technical and non-technical users, especially in the perception of the non-functional features. However, when it concerned the functional features, technical users’seemed to show more interest in them and tend to compare the features to other web plat-forms as well as provide improvement suggestions compared to non-technical users.

The new design of the new demo showed a more positive result and the participants agreedthat the interface looked more modern and finer. However, the implementation of new fea-tures added more buttons to the interface which caused slight confusion. The features inthe new demo that users showed positive expression to are listed in the following tables be-low, see table 5.5 and 5.6. The findings are divided into two separate groups, technical andnon-technical perspectives.

Feature Description



Enthusiastic The demo is intriguing and show great interest

Quick response The demo has a quick response time

Large variety of tags The demo displayed a broad variety of tags

Standard interface The view of the interface looks standard


Modernistic The demo have a fine and up-to-date appearance

Table 5.5: Positive features from technical perspectives on the new demo

48


Feature Description



Enthusiastic The demo is intriguing and show great interest



Modernistic The demo have a fine and up-to-date appearance

Table 5.6: Positive features from non-technical perspectives on the new demo

Summary of the Use Case Studies

This section presents the outcome of the user interface and usability evaluation of the resultsfrom the use of case studies regarding the demos. The simplicity in the task of the use casestudy leads to similar execution of the task during the study with the participants. Bear inmind that the demo is restricted to only customers of iMatrics meaning that only customerscan have an account and access the demo without the involvement of an employee. There-fore, the development phase did also include the implementation of the login and dashboardpage.

The use case study verified the user journey accessing the demo where the user wouldinevitably always the first face the login page before accessing the demo, see figure 5.1.

Figure 5.1: The users’ screen journey for accessing the demo

49

5.5. Result of the UX Survey

Noticeably, in the current demo, the user immediately proceeds to the demo after login whilethe user has to proceed through the dashboard in the new demo. According to the study, thisnavigation process was similar for all the participants. More importantly, the use case studyshowed the most common practice when accessing and inserting an article in the demo isthe process of switching tab and navigate to an external source. This process seemed like astandard process for both the user groups where the users performed a similar and logicalmethod. The use case study also showed that it is natural to mark the whole article andcopy it when proceeding with the demo. The study showed a similar interaction structurebetween the users illustrated below, see figure 5.2.

Figure 5.2: The users’ interaction structure in the use case study

5.5 Result of the UX Survey

The result of the rating acquired from the survey sent to the users that took part in both theinitial and the follow-up study, see Figure 5.3. By analyzing the total result of the survey,it was shown that the new demo was indeed improved successfully, especially the first im-pression. The intuition, usability and the overall satisfaction showed a slight improvement,however, the result of the first impression of the new demo dominated over the current demo.

50

5.5. Result of the UX Survey

Figure 5.3: The rating of the user experience of the demos

51

6 Discussion

This chapter contains a discussion of the achieved results and the methods conducted inthis study. Furthermore, this will also include discussion of the work in a wider context, thereliability, validity and replicability, ethical regards, and also potential future works.

6.1 Results

It’s probably noticed that iMatrics deals with various type of users involving both technicaland non-technical types. The interesting question for an UX/UI designer is how one candesign an interface as intriguing and satisfying as possible for both of them, will there be anycompromises or trade-offs between the different UX elements?

User-centered UX data was gathered through interviews and use case studies formulated inthe Method chapter 4. The UX study was performed 8 users which half of them were classi-fied as technical users. This means that the result was based on the opinions of four technicaland four non-technical users with either an internal or external relationship to iMatrics, suchas customers or employees.

First Impression

Based on the results achieved from the use case studies showed that the user interaction didnot differ much although it was shown that the behavior varied. The order of interactionwas identified showing that users would always first face the login page and then proceedto the demo. In order to improve the first impression and satisfy the whole user journey,not only did changes occur in the demo but also outside the demo scope which consideredthat the login screen must be kept consistent to the demo screen style-wise and even thedashboard as well where the user accesses the demo from. It was mentioned that the newdemo looked more modern and enthusiastic which felt that great effort had been put into it.The styling in overall felt pleasing and looked professionally which generated a positive firstimpression, however, the only drawback was the readability issue caused by the limitationof contrast and colors listed in the brand identity manual. This was clearly and disturbinglynoticed by the users’ comments on the green-colored "play demo"-button that mentioned that

52

6.1. Results

it did not fit well with its white text. The purpose of coloring the button green was to makeit noticeable as it was thought to stand out better. More interestingly, the finding showedthat the "play demo"-button was rarely used by the participants which were suspected thatit had no use for customers of iMatrics as they were already familiar with the usability of thedemo, but for internal users, it served as a function to introduce the demo for new potentialcustomers. According to the result of the survey, the first impression in the new demo showeda dominating increase in rating compared to the current demo. The possible reason why itincreased more there could be because of the deficiency and less effort put in the design. Thismeans that the current demo was more focused on functional aspect than the non-function,which probably resulted in less improvement concerning the usability, if there even was any.

Intuition

The findings from the interview and the use case study showed an already fair design inthe current demo which indicated that major change in the interface was not necessary.However, minimal changes were committed in the layout of the new demo, and by keepingthe changes minimal preserved its intuition which means that the users should not need tore-familiarize with the layout of the new demo.

It was expected from technical users to have a versatile perception of somewhat standardand intuitive design which they familiarized with from various web tools. This meantthat they were expected to experience fewer issues with the navigation and interaction, forinstance, through the dashboard in a web portal. Despite technical users adapting to thedesign with ease didn’t mean they were easy to convince of a fair design. They showedstrict judgements and qualifications of fair design, both in functional and non-functionalaspects. By analyzing the behavior, the technical users seemed happy to play around withthe new demo and see what it had to offer. They did not show any fear in trying out newfeatures and tended to provide constructive feedback by comparing the demo with otherweb tools as functionality engaged from other platforms are brought up and explained. The"Insert URL"-button seemed popular amongst the participants as they looked curiously atthat button, it especially attracted the technical users as they actively tried to discover themost efficient way of getting the job done. On the other hand, non-technical users preferredto start with the simple and intuitive way of achieving results as they tended to first attemptto generate result through the traditional method which meant that user switches tab, selectsan article from a news source and insert it in the demo by commanding copy and paste. Thisbehavior was perceived as a part of the interaction process and an intriguing characteristicthe editor provided. As non-technical users successfully managed to generate tags safely,they would happily explore the new features in the demo afterward. While non-technicalusers tend to accept and feel satisfied with the implemented features, technical users tend toquestion and start discussions about the new implementations and compare them to existingsolutions from other platforms.

The use case studies showed that the users tend to spend quite some time at an externalsource attempting to select and copy an article. To speed up and ease the process of insertingan article in the demo, different methods were considered for this process. For that purpose,features such as accessing an article from a database or directly insert the URL of the articlewas eventually implemented. However, the majority of the participants still preferred tostick to the old way of inserting an article. As guidelines were not clear enough in the newdemo but yet inspired by action-driven learning, by attempting to keep the demo as simple aspossible it was thought that once users learned about the new functionalities it was believedto be easily understood. However, managing the additional buttons, including the elementstyling features of the editor, served as a challenge which meant to design the demo to be as

53

6.1. Results

clean and simple as possible despite the increased complexity.

The first thing users laid eyes on was the text editor when first accessing the demo. A skepti-cal thought amongst external technical users concerning the new editor claimed that the textstyling and image insertion feature served no function at all regarding the tag results. More-over, this increased the number of buttons which in turn lead to the increased complexity ofthe demo. As the complexity increased didn’t necessarily mean that the difficulty in using thedemo also increased. However, the complexity affected the first impression and intuition asmore functionality and button spread across the content caused the user to start questioningand caused some confusion. Simplicity and intuition were considered as a work-around toguidelines and by learning the new features once and what these represented cleared the con-fusion. For instance, comparing the logout button in the current demo where it was directlydisplayed, the logout button in the new demo was placed in the user menu which was foundwithout any difficulties as expected as this is how modern web apps are designed nowadays,see Figure 6.1. The use case study showed that this was neither a challenge for a technical ornon-technical user. So referring to Gronier (2016)[27], regardless of how clean and useful thedemo might be, the first step will always be to catch the attention of the users during the veryfirst 5 seconds of the encounter. Else, one might wonder what the point is of improving thedemo if the user would not even bother to try out the tool at all?

Figure 6.1: Logout button placement in the current and new demo in the right side of thescreen

Usability

Some suggested solutions by the participants were contradictory, especially between externaland internal users. A good example concerns the WYSIWYG-editor and could depend onthe roles of the user and the plans they have of the demo. While the demo is mainly for rep-resenting the auto-tagging service, some prefer to use it as a tool. For the internal users, theWYSIWYG-editor was desired for the purpose of enhancing the demonstration experience.However, the external technical users tend to find it pointless as they focused more on theresults stating that the demo is just for analyzing data. But the internal users thought thenew editor provided them a way to demonstrate the new product to potential customers in away that is more likely reflecting the real working platform or environment of the end-users.

54

6.2. Overall Satisfaction

This new editor would prove its worth in the future and likely not be changed as it opens upvarious possibilities for future development such as image recognition feature. Additionally,the implementation of the new editor also seems to have increased the readability by itsability to separate the title and body text, and wrap them in different formats.

The unexpected improvement mentioned concerning the new demo was that it was expe-rienced to perform faster. This was not expected as a result which had an influence on theusability aspect which could possibly be caused by the design of the system. Even thoughthis study included scopes outside its purpose such as finding desires and flaws in thesystem functionality, useful data could be extracted and put into consideration related toUX and UI. Changes in the interface tend to occur when adding new functionality. Thiswas considered in the implementation of the new demo. By taking these new features intoaccount led to a slightly more complicated interface where additional buttons and displayview was included. The reaction and result of the new features were found both positive andnegative. For instance, despite being technical or non-technical, for the external users, thiswas found more negative compared to internal users as the increase of usability of the demowas desired and did not come in as a big surprise.

It was noticed that more functional feedback was provided than non-functional even thoughthe project aimed to study the user experience. Users showed a desire of inserting articles in asmooth way without the need of removing the non-relevant text that comes with the copyingand pasting process. Directly inserting an URL and let the system have the text parsed inthe editor was seemingly a new feature that the users truly desired. This was proven by thecomments and number of users attempting to use the "Insert URL"-button to fetch an articleduring the use case with the new demo.

6.2 Overall Satisfaction

Considering that the customers had already been demonstrated or even used the demo atleast once before, the number of participants passing the use case task was expected to berelatively high, and in fact, all of the participants did pass the task indeed. To enhance theverification of the demos a brief survey asking the participant to rate the demos were handedout after the follow-up study. This allowed the participants to take their time to reflect onthe demos and provide their true answer as it was aware that the presence of the researchercould affect the response. According to the survey, the new demo had a higher average ratingcompared to the current demo.

Interestingly, the technical user, interviewee Persona 2, stated that he was more satisfiedwith the current demo than the new demo in overall. He mentioned he had high demandin design and UX/UI was something he used to specialize in. It was motivated that thedissatisfaction was caused by the implementation of new features where these affected theintuition negatively, also some of the features did not completely work or fit in. However,this was understandable considering the future plans where the demo is in the stage oftransforming into an admin tool. Whereas the majority of the participants showed an overallimprovement of the new demo, it would be interesting to study user demographic related toUX/UI such as demographics similar to Persona 2 in order to truly verify the needs amongstthis specific user group, for instance.

55

6.3. Method

6.3 Method

By involving users directly and study their interaction with the software and behavior, itwas hoped that it would lead to achievement in improving the overall user experience ofthe current demo in a new version. This included improving the first impression of userswhich was attempted by styling the element and make the new demo as intriguing as pos-sible. This included a responsive design giving users the freedom of choosing the devicesto run on, whether it be a large screen or small screen device. This meant that by adoptinga responsive design in the new demo eliminated the specification of the size and resolutionof device users needed to operate on. This benefited greatly as this research was conductedremotely as it was assumed that every participant possessed a compatible device with aninternet connection. It was assumed that user’s possessed a camera. By enabling camera,screen sharing, and encouraging the users to comment on their thoughts during the usecase study provided ease of understanding users’ positive and negative expressions whileidentifying their thoughts on the features in the demo. Also, it was hoped by allowingthe users’ to choose their own article would minimize the restriction and give them the free-dom to conduct the use case task the way they normally would do in a more natural behavior.

One may wonder how the result obtained by conducting contextual inquiry at the actualplace of event or remotely. As this study concerned a software product, it did not feel nec-essary to be present at the work place of each participant. The work happens in a computerenvironment, and with today’s technology, interviews can be held through video calls withease, and use case studies can be observed through screen sharing which is very similar towatch the computer screen of the participant. In this case, the only difficulty is to observe theparticipant interacts with the hardware when conducting contextual inquiry remotely.

Features mentioned in the composed requirements specification, see Appendix A, and alsothe needs and difficulties identified in the initial study were highly prioritized during theimplementation of the new demo. Features that were not mentioned or commented on duringthe study of the current demo was interpreted as neutral or positive. This means that thesepositive features were attempted to be implemented in the new demo without change or withminimal modification to preserve the intuition as well as the user understanding of the demo.For instance, the layout and positioning of the elements were not specifically mentioned orcommented on.

6.4 Work in a Wider Context

Ethical and societal aspects are taken into account in the work. There are many advantages toinvolve a variety of stakeholders of iMatrics in the study. This provided a systematic insightof the use in different fields and allowed researchers to understand how the demo is beingused within a different organization and how to design and improve functionality for themwith less impact on one another.

The users in this study have all volunteered to participate in the research with the ability toskip any question or terminate any session at any point. The name of the users has been leftout in order to preserve their integrity. Names will only be mentioned if permission beengranted by the concerning persona. The users have clearly been informed of the outline aswell as the goal of the interview and the estimated duration of each study session. For anattempt to avoid uncomfortable emotions, each user was encouraged to show honest feelingsand behavior for reducing the affection of the result by being observed during each interviewand use case study.

56

6.5. Future Work

As the service is solely limited to customers, the login credentials must be kept safe andmanaged by the supervisor at iMatrics. Also, to avoid revealing confidential information, thiswork has been reviewed and accepted by the supervisor at iMatrics before being published.

6.5 Future Work

The new demo turned out to be more than just a demo and is now functioning as an actualtool for both internal and external use. This means that possible future work could includeoptimizing the back-end that may concern the perceived performance or design of the sys-tem, for instance. Also, the new demo has great potential for even more new functionalityboth for internal and external users.

With a number of only 8 participants and also the difference in demographics was not suffi-cient for accurately verifying the user true needs and conclude for a technical or non-technicaluser group. A challenge in this thesis project was to interpret data from the stakeholders’perspective and classify them either as technical or non-technical user as there are manyfactors related to the user’s background affecting the behavior of the user. For a completeuser experience study, further research needs to be conducted in order to spot and identifyneeds within a specific user group. For instance, a thorough study should be done withpeople within a specific age group or profession in order to verify the real advantages,difficulties, and needs of that group. Furthermore, to draw conclusions for these two usergroups require a significantly larger amount of participants in the research. As mentioned,the low number of participants and the various demographics creates an opportunity torefine the study by increase the number of participants or limit the demographic of theparticipants and focus on a more narrow specific user group. Repeating the demographicissue in this study caused by the differences in users’ backgrounds included the opinions ofa single individual within a field only. Alternatively, more precise data regarding needs canbe achieved by either involving only internal users or external users as this study showedquite some difference in needs between external and internal users. These needs includedboth functional and non-functional needs which also creates further study regarding this. Asthis study both considered the function as well as non-functional features, it was balancedmore to non-functional needs than functional. Therefore, a possible future work could beto involve and focus only on the functional needs which may involve the design of the system.

An important factor that was not covered or excluded in this study was the view from apotential customers’ perspective as this study solely included customers and not potentialcustomers. For a more complete product aimed at increasing sales is to also include potentialcustomers which are a follow-up task in the future. Also, the customers had already earlierexperience of the current demo, and the new demo is solely an attempted improvement ofthe current demo. It was believed that the earlier experience affected the usability study andthe first impression of the participants. Despite identifying user needs, this can not assumeas a complete study. For a complete improvement, it is also important to include potentialcustomers and first-time users of the demo or other similar tool for identifying the answer ofthe question why this service should be bought, or more interestingly why should it not.

An idea iMatrics have in mind is to take the demo to new heights and keep it sustainable.This means that the demo will not only act as a representation of the autotagging service butalso as an admin tool where changes can be committed to the entity database, for instance.This opens up the opportunity to study more regarding the functional aspect of the demoand how to transform the demo into an admin tool. Whether it be improving the interfaceor the system, this project is open for further research, and as it is involved in an iterativeprocess, there are further follow-ups to this study which can be to consider the results from

57

6.5. Future Work

the new demo and reimplement it according to user needs and preferences mentioned inanother follow-up study.

58

7 Conclusion

This thesis studied the perception of interface and user experience in a user-centered scopeof both technical and non-technical users. This involved redesigning and upgrading iMatricscurrent autotagging demo with deference to the user-centered data that was gatheredthrough remote contextual inquiry with applied Design Thinking consisting of interviewsessions, use case studies, and a survey. The current demo was evaluated and the feedbackfrom the users was considered in the implementation of the new demo. After the imple-mentation of the new demo, it was evaluated in a similar method to the evaluation of thecurrent demo and these demos were compared afterward where a survey was sent to theparticipants to enhance and verify the result. A total of 8 participants was involved in thestudy. Two interview sessions were conducted for each participant. Each interview sessionincluded a use case study. Unfortunately, one of the technical participants could not attendthe follow-up study, leaving a complete study of a total of 7 participants. A brief survey wassent out to the participants who completed both the initial and follow-up study for rating theoverall user experience of both the current demo and the new demo, respectively. Based onthe studied personas, it was difficult to draw an accurate conclusion between technical andnon-technical users. However, according to the studies, there were more similarities thandifferences in behavior between these groups where the study identified a slight differencein their interaction, behavior, and thoughts.

The reaction to new features in the new demo showed both positive and negative outcomes.The modern and onymous design, and the natural behavior of the new demo contributedgreatly to the overall satisfaction. Especially, the first impression was dominantly greaterin the new demo compared to the old demo which was mainly caused by the enthusiasmand intrigue of a modern design. Additionally, the transformation of the design adoptingiMatrics brand identity emitted a professional feel that greatly boosted the overall satisfac-tion positively. Moreover, regarding the intuition and usability of a tool; the users want to bemade crystal clear and aware of the functionalities. The similar layout and minor changesin the core provided non-technical users ease in using the demo in a sense of intuition thatkept the users still understanding how to use the demo without any need of putting effortinto understanding how to use it. If possible, it’s suggested for keeping non-technical userscomfortable after upgrading a system or interface is to keep the traditional way of using thetool as an alternative. Otherwise, a guideline is strongly recommended to have implemented

59

for pointing out the new usable features in an upgraded interface which was identified in thestudy.

Technical users tend to show positive emotion to modernization and adapt quickly to mod-ern computer interaction and interface designs. They showed no sign of fear in initiatingnew features and would gladly engage with them first. On the other hand, while technicalusers are more meticulous in the design, non-technical users tend to be more careful andtakes their time in exploring and familiarizing themselves with the new design. They wouldfirst initiate with a familiar method of completing a task in the demo, whereas technical userstend to search for a method that seemed most efficient and smooth, which is, for instance,inserting an article by using the "Insert URL"-function or search an article in the databasewith the "Search Article"-function that is available in the new demo. The perception of amodern interface did not differ between these two groups as they both found the new demomore modern compared to the current demo. The new demo was still experienced easy tounderstand and use as there were only minor changes committed in the usability whichrelieved the non-technical users. As technical users are more familiar with different typesof modern layout, they seemed to navigate more smoothly and freely in the new demowhile exploring it. Findings show that technical users adapt easier and faster to the newenvironment while they familiarize with the new features compared to non-technical users.

A clean and stylistic design was always preferred regardless of being a technical or non-technical user. However, the increased complexity impacted the user experience heavily inevery UX aspect. Keeping the demo interface as simple as possible was heavily favoredon both sides which affected the user experience positively, especially in sense of intuition.Adding new functionalities in the demo affected the ease of understanding negatively whichconfirmed the challenge of increasing usability while maintaining the intuition with minimaltrade-offs. Ideally, when speaking of designs, it’s especially important to keep the designsas modern, stylistic clean and visually clear (fonts, colors) as much as possible to maximizethe overall UX satisfaction. Eventually, the new demo in comparison to the current demo didsuccessfully come out improved with an increased total overall satisfaction in regards to theresearched UX aspects based on the achieved results.

60

Bibliography

[1] Crestodina A. Web Design Standards: 10 Best Practices on the Top 50 Websites. URL:https://www.orbitmedia.com/blog/web-design-standards/. (accessed:01.28.2020).

[2] Royalty A., Oishi L., and Roth B. ““I Use It Every Day”: Pathways to Adaptive Innova-tion After Graduate Study in Design Thinking”. In: Springer, 2012.

[3] iMatrics AB. Not Your Ordinary AI Company. URL: https://www.imatrics.com/.(accessed: 06.28.2020).

[4] Brantley et al. “Usability Testing of a Customizable Library Web Portal”. In: C&RL(2006).

[5] Chau et al. “Building a scientific knowledge web portal: The NanoPort experience”. In:Decision Support Systems (2006).

[6] Crawford et al. “Applying Web-Based Survey Design Standards”. In: Journal of Preven-tion & Intervention in the Community (2005).

[7] Andrenucci et al. “Knowledge patterns for online health portal development”. In:Health Informatics Journal (2018).

[8] Bulck et al. “Designing a Patient Portal for Patient-Centered Care: Cross-Sectional Sur-vey”. In: Journal of Medical Internet Research (2018).

[9] Goode et al. “A Mixed-Method Approach for In-Depth Contextual User Research”. In:Springer International Publishing, 2014.

[10] Jamal et al. “A Multimodal Deep Log-Based User Experience (UX) Platform for UXEvaluation”. In: Sensors (2018).

[11] Lin et al. “Integrating perceived playfulness into expectation-confirmation model forweb portal context”. In: Information & Management (2005).

[12] Tanvir Alam, Montaser Hamid, and Forhad Rabbi. “An Approach to Design and De-velop UX/UI for Smartphone Applications of Minority Ethnic Group”. In: IEEE Soft-ware (1994).

[13] Steinert B., Taeumel M., Cassou D., and Hirschfeld R. “Adopting Design Practices forProgramming”. In: Springer, 2012.

[14] Fogg B.J. “Persuasive Technology: Using computers to change what we think and do”.In: Morgan Kaufman Publishers, 2003.

61

https://www.orbitmedia.com/blog/web-design-standards/

https://www.imatrics.com/

Bibliography

[15] Lochner B. Bansemir B. Hannß F. “Experience Report: The Effectiveness of Paper Pro-totyping for Interactive Visualizations”. In: Springer International Publishing, 2014.

[16] Javier Bargas-Avila. Users love simple and familiar designs – Why websites need to make agreat first impression. 2012. URL: https://ai.googleblog.com/2012/08/users-love-simple-and-familiar-designs.html. (accessed: 01.28.2020).

[17] Holtzblatt K. Beyer H.R. Contextual Design: Defining Customer-Center Systems. MorganKaufmann Publishers, 1998.

[18] Wolff C. Böhm V. “A Review of Empirical Intercultural Usability Studies”. In: SpringerInternational Publishing, 2014.

[19] Kulpa C. C. and Amaral F. G. “Evaluation of Tablet PC Application Interfaces with LowVision Users: Focusing on Usability”. In: Springer International Publishing, 2014.

[20] Rohrer C. When to Use Which User-Experience Research Methods. 2014. URL: https ://www.nngroup.com/articles/which-ux-research-methods/. (accessed:01.27.2020).

[21] Silva M. C., Macedo Vanessa, Lemos Rafaela, and Okimoto L.R. Maria Lucia. “Eval-uating Quality and Usability of the User Interface: A Practical Study on ComparingMethods with and without Users”. In: Springer International Publishing, 2014.

[22] Wu Y. Cao S. “Responsive Web Design and Its Application in the Library Web Por-tal:Taking the Case of the Libraries of “Project 211” Universities”. In: Library and Infor-mation Studies (2016).

[23] Mortensen D. Best Practices for Qualitative User Research. URL: https : / / www .interaction-design.org/literature/article/best-practices-for-qualitative-user-research. (accessed: 01.31.2020).

[24] Rampoldi-Hnilo L. English J. “Remote Contextual Inquiry: a Technique to Improve En-terprise Software”. In: PROCEEDINGS of the HUMAN FACTORS AND ERGONOMICSSOCIETY (2004).

[25] Interaction Design Foundation. What is Usability Engineering? URL: https://www.interaction-design.org/literature/topics/usability-engineering.(accessed: 03.18.2020).

[26] Gabrysiak G., Giese H., and Beyhl T. “Virtual Multi-User Software Prototypes III”. In:Springer, 2012.

[27] Gronier G. “Measuring the First Impression: Testing the Validity of the 5 Second Test”.In: Journal of Usability Studies (2016).

[28] Masaaki K. Hashizume A. “Positive UX and Active Use of ICT Devices among theElderly”. In: International Journal of Informatics and Communication Technology (2013).

[29] Rüdiger Heimgärtner, Alkesh Solanki, and Bernd Hollerit. “Enhancing Usability Engi-neering in Rural Areas Using Agile Methods”. In: Springer International Publishing,2014.

[30] Michailidou I., Saucken C., Kremer., and Lindemann U. “A UserExperience DesignToolkit”. In: Springer International Publishing, 2014.

[31] Brejcha J. “Ideologies in HCI: A Semiotic Perspective”. In: Springer International Pub-lishing, 2014.

[32] Nielsen J. Card Sorting: How Many Users to Test. 2004. URL: https://www.nngroup.com / articles / card - sorting - how - many - users - to - test/. (accessed:01.27.2020).

[33] Tidwell J. Designing Interfaces. O’REILLY, 2012. ISBN: 978-1-449-37970-4.

[34] Kylén J.A. Att få svar. First Ed. Bonnier Utbildning, 2004. ISBN: 91-622-6577-6.

62

https://ai.googleblog.com/2012/08/users-love-simple-and-familiar-designs.html

https://ai.googleblog.com/2012/08/users-love-simple-and-familiar-designs.html

https://www.nngroup.com/articles/which-ux-research-methods/

https://www.nngroup.com/articles/which-ux-research-methods/

https://www.interaction-design.org/literature/article/best-practices-for-qualitative-user-research



https://www.interaction-design.org/literature/topics/usability-engineering

https://www.interaction-design.org/literature/topics/usability-engineering

https://www.nngroup.com/articles/card-sorting-how-many-users-to-test/

https://www.nngroup.com/articles/card-sorting-how-many-users-to-test/

Bibliography

[35] Punchoojit L. “Usability Studies on Mobile User Interface Design Patterns: A System-atic Literature Review”. In: Advances in Human-Computer Interaction (2017).

[36] Calacanis J. Levy J. UX Strategy : How to Devise Innovative Digital Products That PeopleWant. Sebastopol, CA : O’Reilly Media, 2015. ISBN: 9781449372866.

[37] Valentine Louise. Prototype : design and craft in the 21st century. International series ofmonographs on physics. Bloomsbury Academic, 2013. ISBN: 9780857857729.

[38] Arvola M. Interaktionsdesign och UX. Studentlitteratur AB, 2014. ISBN: 978-91-44-09764-0.

[39] Steinert M., Nugyen H., Currano R., and Leifer L. “AnalyzeD: A Virtual Design Obser-vatory, Project Launch Year”. In: Springer, 2012.

[40] Silva M.C. Macedo V. “Building a Semantic Differential Scale as Tool for Assisting UXEvaluation with Home Appliances”. In: Springer International Publishing, 2014.

[41] Justin Mifsud. CUsability Metrics – A Guide To Quantify The Usability Of Any System.URL: https://usabilitygeek.com/usability- metrics- a- guide- to-quantify-system-usability/. (accessed: 02.27.2020).

[42] Wang S. M. Ng K. H. “Design thinking for usability evaluation of cloud platformservice-case study on 591 house rental web service”. In: 2018 IEEE International Con-ference on Applied System Invention (ICASI) (2018).

[43] Robert E. Patterson, Leslie M. Blaha, Georges G. Grinstein, Kristen K. Liggett, David E.Kaveney, Kathleen C. Sheldon, Paul R. Havig, and Jason A. Moore. “A human cogni-tion framework for information visualization.” In: Computers Graphics 42 (2014), pp. 42–58. ISSN: 0097-8493.

[44] Lanclos D. Phipps L. “Trust, innovation and risk: a contextual inquiry into teachingpractices and the implications for the use of technology”. In: Irish Journal of TechnologyEnhanced Learning (2019).

[45] Pluralsight. JavaScript. URL: https : / / www . javascript . com/. (accessed:03.31.2020).

[46] Landa-Ávila C.I. León R.L. “Relationship between Elements of the Usability and Emo-tions Reported after Use: A Mexican Case”. In: Springer International Publishing, 2014.

[47] Conte T. Rivero L. “A Systematic Mapping Study on Research Contributions on UXEvaluation Technologies”. In: ACM (2017).

[48] Weber R. Robinson J. Lanius C. “The past, present, and future of UX empirical re-search”. In: Communication Design Quarterly Review 5 (Feb. 2018), pp. 10–23. DOI: 10.1145/3188173.3188175.

[49] Passera S. “Enhancing Contract Usability and User Experience Through Visualization -An Experimental Evaluation”. In: 16th International Conference on Information Visualisa-tion (2012).

[50] Andriole S.J. “Fast, cheap requirements prototype, or else!” In: IEEE Software (1994).

[51] Dale R. Saiedian H. “Requirements engineering: making the connection between thesoftware developer and customer”. In: Information and Software Technology (2000).

[52] Facebook Open Source. React. URL: https://reactjs.org/. (accessed: 03.31.2020).

[53] Albert W. Tullis T. Measuring the User Experience: Collecting, Analysing, and PresentingUsability Metrics. Morgan Kaufmann Publishers, 2013.

[54] typescriptlang. TypeScript. URL: https://www.typescriptlang.org/. (accessed:03.31.2020).

[55] Usabilitest. Card Sorting made easy (and affordable*). URL: https : / / www .usabilitest.com/card-sorting. (accessed: 02.26.2020).

63

https://usabilitygeek.com/usability-metrics-a-guide-to-quantify-system-usability/

https://usabilitygeek.com/usability-metrics-a-guide-to-quantify-system-usability/

https://www.javascript.com/

https://doi.org/10.1145/3188173.3188175

https://doi.org/10.1145/3188173.3188175

https://reactjs.org/

https://www.typescriptlang.org/

https://www.usabilitest.com/card-sorting

https://www.usabilitest.com/card-sorting

Bibliography

[56] Usability.gov. Card Sorting. URL: https://www.usability.gov/how-to-and-tools/methods/card-sorting.html. (accessed: 01.27.2020).

64

https://www.usability.gov/how-to-and-tools/methods/card-sorting.html

https://www.usability.gov/how-to-and-tools/methods/card-sorting.html

A Requirements Specification

RequirementNumber Type Description Priority

1 Original The tool must be developed in React 1

2 Original The tool must include a text editor 1

3 Original The tool must show different kind of tags such ascategories, topics, and entities 1

4 Original The entity tags must show persons, organisations,and locations including geo-data 1

5 Original Users must be able to add new tags 1

6 Original Users must be able to remove tags 1

7 Original Admin must be able to make edits in the taxonomy 1

8 Original Admin must be able to make edits in the tag-database 1

9 Original REST API must be integrated in the tool 1

Table A.1: Functional requirements

65

RequirementNumber Type Description Priority

1 Original The tool must generate a positive first impression 1

2 Original The tool must be modern 1

3 Original The tool must be innovative 1

4 Original The tool must be intuitive 1

5 Original The tool must be easy to use 1

6 Original The tool must provide ease of understanding tag-ging 1

7 Original The design of the tool must adopt iMatrics brandidentity 1

Table A.2: Non-functional requirements

66

Designing a User-Centered Auto- tagging Demo Interface for ...1452799/FULLTEXT01.pdf · to keep and...

Documents

Transcript of Designing a User-Centered Auto- tagging Demo Interface for ...1452799/FULLTEXT01.pdf · to keep and...