Designing Search User Interfaces

(1)

Designing Search User Interfaces

Anders Salander

April 3, 2011

Master’s Thesis in Computing Science, 30 credits Supervisor at CS-UmU: Lars-Erik Janlert

Examiner: Jerry Eriksson

Ume˚ aUniversity

Department of Computing Science SE-901 87 UME˚ A

SWEDEN

(2)

(3)

Abstract

Searching for information has become a natural task in today’s society. Nowadays more than 2 billion people are connected to the Internet and using some kind of search functionality for finding information is a central activity. The amount of digital information that is produced puts high constraints on the design of search interfaces.

This master thesis report presents a proof-of-concept design and implementation of a search user interface. The main focus of the project is usability, especially in the aspects of navigation and content presentation. There are many features that can support the user during the search activity and this interface has been developed on the basis of these features.

The report describes an iterative user-centered design process that served as the foundation during the proof-of-concept development. The target user group has been involved throughout the project and the design has been evaluated on several stages in the design process and the proposed interface was well received by the target users. An interactive high-fidelity prototype was implemented in Adobe Flex 3 for the purpose of evaluation and demonstration.

(4)

(5)

List of Figures

2.1 The usability framework. The figure shows factors that may influence the

usability of a product. Adapted from [2] . . . 7

2.2 The figure shows the important stages of the information seeking task. Adapted from [25] . . . 10

2.3 The figure shows H¨olscher and Strube’s model and process with probabilities calculated over both research groups. (a) Overview of the information seeking process (b) Close-up of direct interaction with a search engine. Adapted from [14] . . . 11

2.4 A categorized result list (left) and a common result list (right) [6]. . . 15

3.1 The figure shows an overview of the iterative user-centered design process [34] 20 4.1 Vertical workflow layout . . . 32

4.2 Horizontal workflow layout . . . 33

4.3 Pop-up workflow layout . . . 33

4.4 Wireframe overview of the in-depth paper-prototype layout . . . 34

4.5 First version of High-fidelity prototype . . . 36

5.1 POC application overview . . . 40

5.2 Component details overview . . . 41

5.3 Search results presentation . . . 42

5.4 Non-empty result set. If the search query string returns an empty result set the POC application automatically reformulates the query until the result set is non-empty . . . 43

5.5 Historical view over the 10 most recent searches . . . 44

5.6 Path Breadcrumbs (within a search for: mp4) . . . 44

5.7 Search term suggestions. The list is continuously filtered according to the query string . . . 45

vii

(10)

(11)

List of Tables

I.1 The scores for each evaluated part for respective prototype version. The maximum score is 8,00 for each column . . . 80

ix

(12)

(13)

Chapter 1

Introduction

This chapter gives an introduction to the master thesis project through a short background description, followed by a presentation of the task and its limitations.

1.1 Background

Searching is a central part of many computer systems today. Typically, systems need to have the ability to find and display different kinds of information. A major challenge is that a search via a web-search engine, such as Google, can result in a span of zero to millions result hits. However, many systems are used to find specific information through a company database instead of information over the Internet. Typically, this limits the amount of information to some degree but there are still challenges and difficulties that must be overcome. A user needs to know what kind of information one can search for, be able to formulate a proper query, interpret the result list to find the expected information as well as being able to reformulate the query if no proper result was found. There are ways to simplify the search process to better support the users in their searching task.

Saab Security and Defense Solutions is a high-technology company that develops complex military products and systems. One of their commitments to their customers is to provide the products with support, such as spare-parts. Some of their products have a lifecycle of more than 30 years; hence, it is important for them to know exactly what components that a product consists of as well as which products an individual component is a part of. The component hierarchy tree looks like this:

– Project. This is the root of the component tree. A project can consist of systems, products, and components.

– System. This is a collection of a large set of compound parts. The parts can consist of other systems, products, and components.

– Product. This is a collection of a reasonable amount of compound parts. The parts in a product may be other products and individual components.

– Component. Typically, these are the leaf nodes in the component tree. However, some components may consist of other components as well.

1

(14)

The information need is the same for every node type, that is, every node is handled like an individual component no matter if it is a project, system, product or component. Hence- forth the term component will be used for these node types, however, to avoid confusion some of the above node labels may be used as a clarification when necessary.

The organization has an existing computer-based desktop system for this. However, the lack of usability makes the system inefficient and results in user frustration.

1.2 The eX-IFS application

The initiator to this thesis project is the Through Life Support (TLS) department at Saab Security and Defense Solutions in Sweden. This is a company within the Saab Group and the TLS department’s main responsibility is after-sales errands on naval military systems.

They have a need to develop a new web-based system for managing their customers’ naval products and systems.

A system may consist of 50.000+ components at different hierarchical levels within the system; the department must be able to get information regarding every significant part in the system in case of a failing component. Their existing system does not match the usability needs of the users, hence the initiative for this project. The users’ everyday work with the existing and desired system is mainly based on searching and finding information regarding the components.

1.3 Target group

The target group of the eX-IFS application is primarily personnel working at the Through Life Support (TLS) department at Saab Security and Defense Solutions, Sweden. The users share a common set of characteristics, these are:

– They use this kind of application frequently in their everyday work.

– Their knowledge of the problem domain is very large; hence they are regarded as expert users.

– Searching is a central part of their work assignments.

– Typically, they know what to search for, that is, they use known-item search.

The target group wants a more usable application for support in their everyday work, in comparison to their existing system.

1.4 Assignment

The primary focus in this thesis project is to design and develop a Graphical User Interface (GUI) for the eX-IFS application prototype. The GUI should provide the ability to easily perform searches over a collection of delivered systems in order to get information regarding the current status of a system and its embedded parts.

The entire project is divided into two separate master thesis projects; one regarding database design and searching and one regarding the development of a usable graphical user interface (GUI) of a proof-of-concept (POC) application. The latter is the basis for this master thesis project.

(15)

1.5. Method and Results 3

The vision is to develop a functional application with real data that can be used in the TLS departments’ everyday work. The goal is to provide a partly functional prototype for the application to serve as a POC for future development and implementation.

The selected platform for the prototype was an Adobe Flex front-end with a .NET WebService back-end; the latter is out of scope of this thesis project. That is, the author of this thesis report was responsible for the usability and design of the front-end as well as the POC implementation of the GUI.

1.5 Method and Results

In order to accomplish the specified goals of this thesis project, three primary areas where identified and explored. These are:

– An in-depth research and exploration study regarding the research area of how to design usable Search User Interfaces.

– An iterative and user-centered approach to develop the design.

– A proof-of-concept implementation based on the research.

The in-depth study of Search user interfaces (SUI) was conducted with the purpose to get a deeper understanding of the problem domain. The result of this research study is a chapter regarding certain important aspects and characteristics of SUI’s.

In order to develop a design proposal that is accepted by the target-group, a user-centered approach was adopted. Real users from the target-group were available throughout the entire thesis work. This resulted in a design that was developed through continuous collaboration with the target-group.

The implementation of the proof-of-concept (POC) application design was based on the results of the previous iterations of the design process. The application should be a web- based solution; hence a Rich Internet Application (RIA) prototype was developed. The chosen platform was Adobe Flex, a common RIA-platform. The main goal was to develop a POC interface that was intuitive and supported the users’ everyday tasks.

1.6 Limitations

The assigned task has a limited timeframe of 20 weeks for one person. This implies that several important areas and aspects regarding design, evaluation and implementation of the eX-IFS POC have been omitted during the thesis project. It is important to mention that the implemented POC application is not a fully functional application. This should be regarded as a concept proposal for further development. Due to the time constraints, no account was taken of graphical design, underlying algorithms or system architecture.

1.7 Report outline

– Chapter 2. Designing usable Search user Interfaces. This section is an in-depth literature study of Search user interface usability. The chapter touches different aspects of search user interfaces such as how users perform searches as well as what kind of functionality to incorporate to support the search process.

(16)

– Chapter 3. Method. This chapter introduces the scientific techniques and methods that were used throughout this thesis project. This includes a brief description as well as pros and cons of the methods.

– Chapter 4. Accomplishments. This chapter presents a chronological overview of the different phases performed during the development of the eX-IFS GUI prototype. Each section and subsection touches important areas and aspects of the development.

– Chapter 5. Results. This chapter gives a more detailed description of the results for each section. The individual results formed a basis for the final conceptual GUI prototype.

– Chapter 6. Discussion and conclusion. This chapter focuses on personal reflection and discussion by the author regarding the thesis work. Some suggestions of future developments will conclude the chapter.

(17)

Chapter 2

Designing usable Search user interfaces

This chapter is a literature study and aims to explain the concept of Search User Interfaces (SUI) with the focus on how to successfully design the user-interface for such applications.

2.1 Introduction

The fast paced development of the Internet has had a great impact on today’s society. In the beginning the Internet was primarily used by computer enthusiasts but now ordinary people use the Internet as an integral part of their everyday life, at home, at work or at school [40]. People tend to turn to the Internet in order to find information and the use of search-engines is now the second most frequent activity on the Internet [12], only beaten by e-mail.

A major problem today is that information management makes the everyday life more complicated, this is due to the vast amount of information we encounter and process each day. The information management problem entails a high burden on our physical and cognitive resources. There are more choices to make, more information to search through and information is deliberately intended to influence our behavior. This complicates our information retrieval process. Electronic systems for information seeking must improve and have a high usability in order to better support users during information seeking tasks [25].

A research survey performed in December 2009 by PEW [5] showed that 74% of the American adults use the Internet. The survey also revealed that 88% of these users have the main goal of finding information through a search engine. One indication of the importance of a successful and usable Search Interface is shown in a study by Forrester Research, where 76% of firms considered search as “extremely important” while only 24% of them considered their own web site’s search functionality to be “extremely useful” [13].

According to [9] the total amount of searches performed worldwide on the Internet was over 131 billion during December 2009. This indicates an increase of 46% on the amount of searches compared to the corresponding period in 2008. During this period there was approximately 0.2 billion new Internet users registered, resulting in a total of about 2 billion Internet users worldwide [16]. How can one design a user interface that can handle the amount of information we use and produce today, and still maintain a high usability level?

The aim of this literature study is to present different aspects of design and development

5

(18)

of search user interfaces. The study will not cover all details or aspects; instead it should be seen as an overview and a starting point for further research for those interested.

The study is organized as follows: First a section regarding the history and recent developments in the concept of Search-user interfaces is explained, followed by a section about general usability. Then a section regarding the search process, design guidelines and important characteristics of SUI’s is presented. Finally, the chapter concludes with a section that contains a discussion of SUI characteristics.

2.2 History and recent development of Search user in- terfaces

The usage of Search User Interfaces has drastically changed since the advent of the Internet and World Wide Web. Previously searching was mainly performed by trained professionals such as librarians, researchers and journalists. The wide spread use of the Internet led to the development of search engines such as AltaVista, Yahoo and Google [12].

The development of search interfaces is not limited to only the target group. The user- interfaces, the searchable information as well as the nature of the queries have all changed over the last years. Early systems were often closed, that is, non-public and content- monopolized. Unfortunately this discouraged the development of usable interfaces since there was a lack of competition amongst content-providers. Usually the interfaces were command-line based and the searcher had to learn and remember complex search-operators in order to perform successful searches [12].

It was uncommon to be able to search over full text articles; the searchable information usually consisted of abstracts, metadata and values such as titles. The main goal of these kinds of searches was often to find the name and location of the physical full text version [12]. However, since the general public got access to the amount of information available on the Internet, the importance of functional search interfaces has become crucial. The interfaces today are quite simple and new features for supporting the user in the search process are constantly being developed.

Full-text searches are now common since the web often provides full text documents.

Modern search user interfaces commonly have very advanced algorithms underneath the graphical surface. One powerful advantage of modern systems is that users have the ability to use both keyword based searches and in some cases even natural language in their queries [12].

2.3 Usability

Usability is about understanding how to design interactive systems to best support the users. However, it is not as simple as that. One must understand what the users want and need as well as how to best match these requirements in order to be able to design a UI with high usability. Beside this knowledge a usability expert or interaction designer must also have knowledge of the users’ work situation and the environment in which the system will operate [34].

There are many aspects of usability and the concept is somewhat subjective. Hearst [12]

and Nielsen [30] refers to usability as how easy a user-interface is to use [12] while Faulkner [11] has a slightly different description and refers to usability as how satisfying the interface is to the users and how comfortable they are using it. The International Organization for Standardization (ISO) defines Usability as follows in ISO DIS 9241-11 [2]:

(19)

2.3. Usability 7

Figure 2.1: The usability framework. The figure shows factors that may influence the usability of a product. Adapted from [2]

“The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use”

In their definition, ‘effectiveness’ means whether or not the user successfully can carry out the intended tasks. The time of accomplishment is not regarded in this definition in contrast to an early definition by Shackles who included both speed and performance in

‘effectiveness’. That is, a system was considered effective only if the users were able to perform the intended tasks within specified time limits [11].

However, in ISO’s definition one dimension of time is included in ‘efficiency’. If one should compare two systems and one of them is faster than the other in performing the task, then the faster system is more efficient. Shackle make no distinction between ‘effectiveness’ and

‘efficiency’, instead he defines usability in terms of ‘effectiveness’, ‘learnability’, ‘flexibility’

and ‘attitude’ [11].

Bevan [2] points out that a strength of ISO’s definition is the flexibility in that it also accounts for the context of use. The context of use consists of the users, the tasks, and the equipment in use as well as the physical and organizational environment. Figure 2.1 shows that all these factors may influence the usability of a product.

More recently Nielsen [30] identified five core components that defines usability, these are:

– Learnability. How fast a user can understand the GUI and accomplish the intended tasks the first time a user encounters the design.

– Efficiency. The improvement in time to accomplish tasks when a user has learned the GUI.

(20)

– Memorability. How fast a user can reestablish proficiency when the user returns to the design after some time of not using it.

– Errors. The amount and severity of the errors a user encounters as well as how fast the user can recover from them.

– Satisfaction. How pleasant it is to use the design.

Nielsen disregards ISO’s broad description of context of use. Instead he focuses more on the system and the interface itself. Although he accounts for some context of use in the sense that he argues that in order to improve usability, one should evaluate new designs with a number of actual users.

Preece et al. [34] complements Nielsen’s list with utility, meaning how well the system provides the right functionality according to what the users need or want to do.

2.4 Designing a search interface

It is hard to define the characteristics of a good UI for an information seeking system. It is highly dependent of the kind of answers users are looking for. A SUI must in some sense try to adapt parts of the UI, such as the presentation of search results, based on the question at hand. That is, different types of questions might benefit by formatting and displaying the search results with an appropriate representation. An example of this is a question regarding the current weather; this kind of question could benefit from a graphical representation instead of a text-based representation.

Typically, web based search engines must often be able to handle a wide range of query types. They must support both known-item search and searches that aim to answer diffuse and complex problems [13]. Some example queries could be:

– How is the weather in Stockholm right now?

– What are some good examples of graphical design?

– What are some promising untried treatments of breast cancer?

Lee at al. [23] highlights the complexity of the definition for known-item search. An issue that complicates the concept of known-item search is that one could discuss the amount of knowledge the user must have regarding the known-item. Typically, researchers tend to articulate their own definition of the concept as well, to suit their particular research context.

The definition used in this thesis is formulated by Kim and Allen [18]:

“...to find a piece of information that is known to exist and to give a specific answer to the question...”

However, it is not enough to just support these different types of questions, the system must also be able to produce and present a result set that is relevant to the users’ query and information needs [13]. Moreover, users with varying levels of computer skills will most certainly use the SUI differently; hence the system UI must support both expert-users as well as novices [14].

A SUI should be a tool that supports the users during the entire search process. It should be able to help users to concretize the information need, formulating the queries, help users understand the search results as well as showing the status and progress of the information seeking effort [12].

(21)

2.4. Designing a search interface 9

When discussing information retrieval systems, two terms are frequently used to char- acterize the quality of the search results, these are: precision and recall. The definition of these terms is [37]:

– Precision. The ratio of relevant documents that “should” have been retrieved in relation to the total number of retrieved documents.

– Recall. The ratio of relevant documents retrieved in relation to all relevant documents in the database.

Typically, using phrased queries increases the precision at the expense of recall. That is, a search for “air pollution” is likely to generate a result set with less irrelevant documents than a search for “air” and “pollution”. However, the phrased query might overlook important results such as documents containing information regarding air quality or other topics related to air pollution [37].

One difficult decision a SUI designer has to make is how much automation the interface should provide. An interface might have multiple levels of automation at the same time depending on the complexity of the interface [1]. Bates [1] highlights that much research is focused on how to develop “optimal” information retrieval systems with completely automated search functionality. However, she argues that not all users would appreciate this kind of system since some users want to do and direct their own search. Users tend to want the speed and power of an automated system, but they want to feel in control of the system.

This is supported by a study by Koenemann and Belkin [19] on how users experienced an information retrieval system with different levels of relevance feedback on novice searchers.

The results showed that the users achieved better results when they had more control over the queries than the automated system. Bates [1] stresses that a designer should thoroughly think about the question of what capabilities the user should be able to exercise as well as what the system should be designed to do.

2.4.1 Understanding the search process

Marchionini [25] describes the information seeking process as a kind of problem solving activity. The basis for this claim is that either or both of the information sought (problem) or the search process (solution path) may be complex. The author presents a model consisting of five basic components. Even though the information seeking task is an iterative process the model is visualized in a non-linear fashion since there are several possible paths between the definition of a problem and the solution. A rough overview is illustrated in figure 2.2 and the five main components from [25] are described briefly below.

– Define problem. This is the initial step in the information seeking task. The definition of a problem can vary much in complexity, a known-item search is often much simpler than for example trying to find information that supports an argument. Moreover the problem definition evolves during the whole problem solving activity as the problem may branch into different sub-problems.

– Select Source. Regardless if the problem definition is simple or complex, a user must always select a source to begin the search process. It is shown that end users primarily tend to start with sources that have proved to be successful for them in the past.

– Articulate problem. In order to perform a successful search the defined problem must be articulated. This often means that an end user must formulate a query or determine a starting point for the search in the system.

(22)

Figure 2.2: The figure shows the important stages of the information seeking task. Adapted from [25]

– Examine results. A system typically responds with a set of hits as a result to a user query. This list might be represented either graphically or in textual form as for example a ranked list. Based on the result set the user must make a decision regarding which function to call next. This is typically to view more detailed information regarding one (or more) of the result hits. It is crucial to the examination of results that full text information or images can be displayed since primary information is of high importance for the users.

– Extract information. After the examination of results a user must extract and manage relevant information in order to be able to verify that it can be applied to the defined problem. Some examples of managed tasks are copy, cut and paste as well as save or print the information.

The information seeking task presented above is described from a user perspective as it includes cognitive processes such as problem definition. However, this can be matched to other studies with a more systematic perspective.

H¨olscher and Stube [14] performed a set of research studies aiming at finding a common model for information retrieval via search engines. The study included two research groups, one with computer experts and one with novice computer users. Their findings showed that their model (illustrated in figure 2.3) could be applied to both user research groups.

According to their study there was a probability of 81% that a user in any of the research groups would use a search engine to try to find the answer to a question. It also indicates that search engine interaction is a somewhat iterative procedure during information seeking (figure 2.3a); this is supported by a 42% probability of query reformulation when a user examines the page results. The study also highlights some important differences in search engine usage between the expert and novice users, this is however out of the scope of this thesis and readers are directed to [14] for further details.

Nielsen [28] advises not to provide users with advanced search functionality since users often use it incorrectly. However, H¨olscher and Strube’s study shows that expert users tend to use advanced search techniques continually [14].

(23)

Figure 2.3: The figure shows H¨olscher and Strube’s model and process with probabilities calculated over both research groups. (a) Overview of the information seeking process (b) Close-up of direct interaction with a search engine. Adapted from [14]

2.4.2 Design guidelines

In 1997, Schniderman et al. [37] found a problem with SUI’s. The UI’s was unnecessarily complex and there was no consistency in how different SUI’s were designed. This resulted in a paper with a presentation of eight guidelines that targets SUI usability. These guidelines along with a brief explanation are presented below:

– Strive for consistency. Designers should pay careful attention to details such as layout, fonts, terms used in the UI and colors [37]. Hearst [12] stresses that SUI’s often show rich information of complex nature and that changing small details in the design can result in severe effects on the user-experience.

– Provide shortcuts for skilled users. The design of a SUI should allow skilled users to work efficiently by implementing shortcuts to relevant functionality [37]. Some examples of such shortcuts could be to support immediate answers to directed and focused questions or to provide deeper level site links in the result-list (see section 2.4.3 for more details) [12].

– Offer informative feedback. A user should be informed of all aspects regarding the current search, such as displaying what is being searched for and showing the sources [37]. Hearst [12] presents a number of suggestions of valuable features that can be used to increase the user-experience by providing efficient and informative feedback.

This includes showing search results immediately, highlight query terms, show query terms suggestions, allow sorting and support rapid response.

– Design for closure. It should be possible for a user to see and understand things such as when all results in the list have been viewed or whether or not the search was made over the entire database [37]. Findings in [12] show how important the graphical design of the UI is. Good designs that appeal to the users seem to raise the overall acceptance of a site as this correlates to their perceptions of the UI quality and the user satisfaction. Users also tend to persist longer in search process in an appealing

(24)

interface [12]. However, a good graphical design is not enough the interaction design is also very important [34] and the UI should support the users’ actions and give valuable feedback [12].

– Offer simple error handling. A user should be able to easily update their search terms and parameters. If an error occurs it is important to present a concise and easy to understand error message with as little technical details as possible [37]. A few suggestions in order to improve the error handling are to not display empty result sets and to address the vocabulary problem. A more detailed description of these can be found in [12].

– Permit easy reversal of actions. A user should be able to go back to a previous action or state; this means that every action should be reversible. An easy way to accomplish this is to offer some kind of history mechanism in the UI that allows a user to re-issue a previously issued query [37].

– Support user control. A good design UI allows the user to always feel in control.

Constraints in the UI like forcing a user to enter search parameters in a specific order should be avoided. Instead the user should be given the control over the UI and it is the user that should initiate actions [37]. However, Hearst [12] argues that there must be a balance between user control and system automated action. She mentions two important functions that should be considered, even though they might imply a tradeoff between opaque system control and transparent user control, when designing a SUI. These are rank ordering and query transformation.

– Reduce short-term memory load. The human short-term memory (STM) is activation based, that is, information of this kind is easily lost [10]. In order to avoid unnecessary load of the STM a SUI should support functionality such as recent search history and compact presentation [37]. Two other examples of functionality that might help reduce the STM load is to suggest search action in an entry form and to integrate navigation and search. This can be accomplished by using for example a watermarked textbox and faceted navigation [12].

Although several researchers have proposed guidelines for search interfaces, Hearst [12]

argues that even if guidelines might be helpful in interface design, guidelines alone are not enough. The main argument for this claim is that guidelines can be hard to follow.

Guidelines often overlap and conflict with each other and they seldom provide concrete solutions on how to achieve the guidelines’ goals.

2.4.3 Interface features

This section is not supposed to cover all aspects of Search-user Interface features; instead it aims to highlight some important characteristics that might improve the usability of a SUI.

History management

Research has shown that people tend to have a need to revisit previously viewed information.

A study by Cockburn and McKenzie [8] shows that approximately 81% of the URL’s that a user visit is in fact revisits. This behavior is also common in SUI’s where users tend to re-send search queries [12]. History is a common feature in web-browsers, SUI’s can benefit from this functionality as well by for example providing a list of the current user’s recent search-terms [12].

(25)

Komlodi [20] claims that improved history functionality in UI’s can be beneficial for users, since it would enable users to:

– Get an overview of the search process – Better ability to manage tasks – Compare and relate result sets – Collect documents and information

A number of researchers [21] present suggestions of important features in search history representation. One suggestion is that the history feature should be able to handle parallel tasks as users tend to switch task continuously. Results by Cockburn and Jones [7] show that the common functionality of history navigational aids in web browsers, that is the back and forward button, mismatch the mental model of the users regarding the session history.

A browser’s history is typically stack-based, that is, it does not reflect the user’s actual history. If a user hits the back button a number of times and then follows a link from the current page, the browser overwrites the previous forward history with the new target page.

Furthermore the screen real estate is important; a basic idea is that the history functionality should support the users’ task. Although the history is likely to grow over the session, its screen real estate should not be dominant. It should be constrained properly in relation to other parts of the UI [21].

Providing Suggestions

Hearst [12] discusses several possible solutions for providing users with suggestions to enhance the SUI experience. Two variants, with different purposes in the search process, are briefly presented below:

– Query specification in entry forms. There are several ways to provide suggestions to the users via an entry form. One common approach is to use watermarked text blocks, that is, the text block shows a short description of the type of query or query terms a user is expected to use. When the text block gets focus the watermark disappears and the user can type instead [12]. Another approach is to give users alternatives of possible and popular query refinements based on the typed query. The refinement suggestions may be presented as a list somewhere in the UI. This kind of feature has proved to be useful and appreciated by users [41].

– Query specification with dynamic term suggestions. Dynamic term suggestions mean that users get some kind of real-time alternatives during their query specification.

White and Manchionini developed an Interface where the system generates a list of suggestions of possible relevant alternatives for the next query term. The suggestions were based on the users previous query terms and the list updated and displayed when a user pressed the space-key. The results showed that some users thought it was a huge time saver [42].

Another possible way of displaying suggestions is to use auto-complete functionality, like the SUI Live Search from Microsoft. Auto-complete is a way to show possible query term suggestions on a letter-by-letter basis. According to Hearst it is likely that this kind of functionality will become increasingly useful as the development of modern and more responsive term-suggestion features progress [12].

(26)

Result presentation

The presentation of search results is very important in a SUI. A few aspects of result presentation are discussed below.

– Results per page and search result ordering. Typically, search engines display about ten hits on the search results per page [12]. In a usability study from Google [26]

they found that speed was of great importance to the user. They experimented with displaying a list of thirty search hits instead of ten. Analysis showed that there was an average of 0.5 second delay when displaying thirty hits. This rather small delay had a huge impact on the user experience as Google detected a 25% reduction in traffic on the site over a six-week period.

Studies have shown that the ordering of the search results is crucial. A study by Joachims et al. [17] shows that users tends to primarily explore the first and second search result; beyond that there is a significant drop in interest for the user. Nielsen [28] found that people almost never look at the second page of search results. A consequence of a user not finding relevant information on the first result page could result in the user giving up or having to reformulate the query [12]. According to [28]

the latter has proved to be difficult since a query reformulation often leads to even worse search results.

– Search result presentation. Some of the challenges that search engines faces is that words used as search terms can have several diverse meanings [39] and that documents and web pages often discuss several different topics interchangeably [12].

Paek et al. [32] studied what kind of impact different summary lengths of result hits have on user performance. Three interface variations were tested, these were:

• Normal view. A simple listing of search results, where a mouse click opens up the full text document.

• Instant view. A mouse click expands the summary information with additional sentences, containing query terms, from the full-text document.

• Dynamic view. As long as the mouse hovers over a particular result hit the summary expands a few words at a time to display more information.

Their study showed that users performed faster and produced more accurate results using the instant view than with the other two.

A common strategy for presenting search results is a common ranked list [39], that is, a list of ranked results. The ranking is based on relevance of the search hit calculated by some underlying algorithm. However, several studies [39] [6] have shown that one can improve the user experience by either using clustering or categorization techniques.

Categorization is a technique for ordering search results in a logical and systematic manner. The basic idea is that one uses pre-defined categories to organize the information into different groups or topics [6]. A drawback with categorization is that it often requires a high amount of manual work with category assignment in order to successfully implement categorization [12]. However, Chen and Dumais [6] present a more automate solution using an on-the-fly web directory as source for the categorization.

Figure 2.4 shows an example of a UI using a categorized search result list.

A problem with assigning documents to a single category is that they often discuss many different topics that may fall under different categories. One way to solve this

(27)

Figure 2.4: A categorized result list (left) and a common result list (right) [6].

problem is to use faceted navigation, that is, one can use metadata such as tags in order to categorize documents into different topics. This would allow a user to find the same document under several categories relevant to its content [12].

Clustering is a technique that orders results based on internal similarities, such as words or phrases [12], that is, clustering is a way to organize information based on keywords in content itself [39]. An advantage with clustering is that it is highly automatable and requires little manual work. However, the advantage also has a downside since clustered search results do not have as high accuracy as categorized results [12]. Wang and Zhai [39] present a solution where they use query logs from past searches in order to cluster the information. Their findings show that their technique performs more accurately on average than ordinary clustering techniques.

Both categorization and clustering outperforms an ordinary ranked list, both in speed and user experience [12].

Other interface features

Hearst [12] presents several features that may increase the user experience of a SUI. A few of these are shortly presented below:

– Query-term highlighting. A feature that has proved to be very useful for increasing the user experience in search-result presentation is to highlight the query-terms in the result hits. The highlighting can be done in several ways, such as reverse video, bold text or with a colored background. It can also be implemented so it is shown both in the short summary below the search hit as well as in the complete document that is displayed when a user navigates to a specific search hit.

– Sitelinks. A feature that has increased in popularity is to present links to popular subpages of a search-hit. The subpage-links are often indented directly below the main

(28)

search-hit link. This kind of implementation might speed up the users’ navigation to the subpage presenting the desired information.

– Shortcuts. Some search-engines try not only to find results where the answer to the query might be, they also try to answer directed and focused questions such as “what’s the weather in X” directly by displaying for example weather information in the result- list.

– Blended results and media types. Modern search engines find different kind of media content related to the search query. It is common to display diverse content types, such as images, in the search-result list.

– Previews of document content. Recent development in some search engine’s search- result lists include the ability for the user to preview a thumbnail image of the result target, without having to leave the search-result page.

Navigation

Navigation is an important part of a SUI. Nielsen [27] claims that even though interfaces, in his example a website, implement search functionality the UI still needs navigation and a strong sense of structure in order to be usable. During his research he found some important characteristics in order to enhance the user-experience and the use of search; some of these are:

– Search should be a box. Usability studies [28] have shown that users often look for

“the little box where they can type”. When Nielsen updated the search functionality on his website by exchanging a link with a search-box the search engine use increased by 91%.

– Search should be easily available on every page. If a user feels lost on a webpage they tend to use the search functionality in order to get on the right track again. Since it is impossible to predict where and when a user will be lost the search functionality should be visible and available on every page in the structure so they don’t have to search for the search [27].

A common navigational aid in UI’s is breadcrumbs. These are often thought of as a secondary navigational feature, although its popularity increases. Critics argue that breadcrumbs have the disadvantage of taking up screen real-estate; however, they bring several advantages to a UI. Some advantages are that they show the current location, they allow users to navigate to higher navigational levels with one click and they take up very small amount of screen real-estate compared to many other navigational aids [31].

A study by Rogers and Chapparo [35] indicates that users tend to get a better understanding of a website’s structure if the site in question implements breadcrumbs. Instone [15] identifies three different types of breadcrumbs:

– Location. This type of breadcrumb reflects a page’s relative position in the overall navigational structure, that is, where the user is.

– Path. This type of breadcrumb reflects the users’ actual path to the current location.

This can be useful in dynamically generated pages where a single page can be reached by different routes.

(29)

2.5. Discussion 17

– Attribute. These types of breadcrumb do not reflect either the path or location of a page. However, this is commonly used by e-commerce sites for describing characteristics of a product by using meta-data.

According to Nielsen [31] the proper way to implement breadcrumbs is by implementing the Location-based type. The argument for this is that breadcrumbs should reflect the site’s navigational structure instead of the users’ history.

2.5 Discussion

There is no doubt that search user interface design and development is a very complex task.

Many factors of highly different nature must be taken into account in order to succeed. The task gets even more complex by the fact that there are large uncertainties, like key factors such as the user’s computer skill-level and the different types of queries needed. This implicates that several tough design decisions often must be made based on assumptions.

Section 2.4.2 presented a set of guidelines in SUI development; these guidelines will not be discussed further. Readers interested in details regarding those guidelines are referred to the sources; these can be found in the reference section.

This section aims at highlighting some important aspects of SUI’s based upon the research literature presented in this chapter. All aspects will not be discussed here since this is a rather large area with many different approaches. This section focuses on important characteristics of SUI’s and should serve as a guide for those looking beyond the general guidelines presented earlier.

Design and optimize for efficiency. A responsive interface is very important for a good user experience, SUI’s is no exception as speed seems to be an important factor for users during their information seeking task. A designer should also be aware that small UI changes can result in severe consequences for the business. As previously mentioned, Google [26]

became aware of this during one of their user interface experiments, they lost a significant amount of traffic over a short period of time because of a small change in the UI.

Another angle of efficiency is that the design of the SUI should support and guide users to find the answer to the query at hand. A good design should therefore try to use visualization techniques such as categorization or clustering since they often increase the efficiency for the users. A carefully designed SUI should also have an appealing graphical design; this is not only a way to increase the acceptance among users [12], one can also use graphics to guide the users during the search process.

Get to know your user task and their domain of interest. Far from all SUI’s have to be as flexible as web search engines such as Google or Yahoo. The characteristics of the users’ information need within the domain could highly influence the SUI design. Known- item search queries are enough in many websites and applications and the UI should be adapted to such prerequisites. The presentation of search results for directed queries could (and should) probably be designed much better if a designer adapted the design to the information at hand, the user needs and the domain instead of blindly follow guidelines.

Many company SUI’s seem to lack this understanding since there is a large gap between the perceptions of the importance of searching compared to their own website’s usability [13].

Always think about the users, not the cool-factor. The basic idea with a SUI is to support the users during a very complex task. Even though there are many features that are cool and innovative from an interactive perspective, designers should always be aware of the users and

(30)

think twice regarding the functionality. Features that distract the users and dissipate their attention should be disregarded while features such as query term highlighting or instant view that clearly benefit the users should be considered in the design process.

(31)

Chapter 3

Method

The project was performed using an iterative user-centered approach and this chapter provides a detailed description regarding the methods and technique used during the thesis.

First is a section presenting an overview of the user-centered design processes, followed by a few sections that discuss the methods and techniques used in more detail. These are presented in chronological order with respect to the design process for this thesis, starting with techniques for gathering information, followed by sections for prototyping and evaluation.

The chapter concludes with a section regarding details of the implementation.

3.1 Design process overview

Interaction design is about investigating the usage of a product and the problem domain;

this is typically done by utilizing a user-centered approach on development. A user-centered approach is goal-driven in the sense that the users’ needs form the basis for the development process [34]. However, interaction design is also about trade-offs. That is, to balance the conflicting requirements and constraints [34]. This is supported by L¨owgren and Stolter- man [24] who argue that every design process is unique and somewhat unpredictable. The authors’ main argument is that there are three variables that differ from project to project, these are: those responsible for the job, the conditions and constraints regarding time and resources, and the current situation.

Furthermore, they stress that a designer’s primary assignment is to develop a “good- enough” design given the constraints for the project. Designers continually switch between overview and detailed features; they often have an understanding of what should be done and have a set of creative solutions for the problem at hand. However, they often face a situation that is both chaotic and concrete. This implies that thinking on various levels simultaneously is necessary and a designer cannot rely entirely on a rational model or framework [24].

A general lifecycle model for the interaction design process is presented by Preece et al.

[34]. This model identifies four basic activities in user-centered design (see figure 3.1), these are:

– Identifying needs and establishing requirements. In order to design a system that supports the target users, one must know who the users are and how an interactive product could support them best. The users’ needs form a basis for the product’s requirements and the following design and development activities.

19

(32)

Figure 3.1: The figure shows an overview of the iterative user-centered design process [34]

– Developing alternative designs. During this stage several alternative suggestions and ideas that meet the target-users’ requirements are presented. This is the core activity of designing and it can be divided into two separate sub-activities; conceptual design and physical design. A conceptual design includes a conceptual model that focuses on what the product should do, what it should look like as well as how it should behave. The physical design goes more into details of the product and describes design attributes such as colors, sounds, menu design and what images to use.

– Building interactive versions of the design. A natural part of user-centered design is to let the users evaluate a set of design alternatives. The development of interactive prototypes facilitates the collection of feedback since many UI problems can be found by watching users interact with the prototypes. There are different levels of interactive prototypes; paper-based prototypes are fast and easy to develop while software-based prototypes are more complex and time-consuming to develop. However, each type of prototype serves its own purpose in the design process.

– Evaluating designs. The process of interaction design requires a high level of user involvement throughout the entire process. In order to ensure that the users’ needs and requirements are met, the product must be evaluated in various stages during the development process. The evaluation focus on the users and their tasks, one typically studies criteria like the amount of errors, how appealing it is and how well it matches the specified user requirements.

Preece et al. [34] present three important key characteristics of the interaction design process. These are: focus on users, specific usability criteria, and iteration. The user focus is crucial in user-centered design since their needs form the basis for all stages throughout the entire design and development phases.

A set of specific usability criteria should be identified at the beginning of the project.

These criteria guide the designer in the process of choosing between ideas, solutions, and different design alternatives. It is important to incorporate an iterative process. This is the key to the possibility of evaluations on different levels as well as refinements to the design based on user feedback. A greater understanding of the users and their environment is

(33)

3.2. Research 21

gained throughout the entire user-centered process; this is a powerful tool for developing a system that has high acceptability among the target-users [34].

3.2 Research

A usability expert or interaction designer (henceforth referred to as a designer) often find themselves in a situation where they need to design a product or a system that is to be used in an area of which they have no prior knowledge. However, a prerequisite for a successful design is that the product or system is tailored to fit the intended usage area.

Hence, designers need to research the problem domain. This is usually done by collecting information regarding the intended users and the operational environment, a necessity for the development of a system that efficiently helps the users achieve their goals and fulfill their needs [11].

According to Preece et al. [34] it is crucial to understand the problem domain or else usability goals may be overlooked. This can be avoided by clarifying the usability and the user experience goals. L¨owgren and Stolterman [24] argue that it is not unusual that a designer has to answer questions regarding what can be done and what should be done. In order to answer that question the designer must rely on the knowledge gained through the research phase. The authors present two approaches of research:

– Exploration. The search for several different alternatives and ideas in order to solve the problem.

– Investigation. The search for one solution by focusing on the current situation.

Typically, both of these methods are used somewhere in the design process since they serve two different purposes. Exploration allows a designer to examine several different aspects and solutions to the problem. However, almost every design process ends with investigation, since the ultimate goal is to develop a product, system or specification that focuses on a specific problem [24].

The design process described in Section 3.1 is a basis for the research phase in this thesis project. Section 3.3 present methods for identifying users’ needs and establishing requirements. Techniques used to develop alternative and interactive versions of the design are presented in Section 3.4. During the research for this thesis project, the investigation part consists of observations, user interviews and focus groups sessions. The exploration part of the thesis is a literature study regarding search user interfaces (Chapter 2 - Designing usable Search user interfaces).

3.3 Gathering Data

The foundation of user-centered design is to know the users, their environment and what they are trying to do. Usability is not about providing the easiest solution; it is about providing the most appropriate solution for the users and their task at hand [11]. The following sections present a set of methods that can be used to collect valuable information for a forthcoming design.

3.3.1 Contextual inquiry

Contextual inquiry is an ethnographic approach used for design. The method is based on collaboration between a user and a designer [34]. Beyer and Holtzenblatt [3] introduced

(34)

contextual inquiry with the goal to strengthen the relationship between the user and the designer. Their model builds on an apprenticeship relation model, that is, the user serves as the master and the designer serves as the apprentice. In order to collect as valuable information as possible the apprentice observes the master while performing their natural working activities. However, the observation is not passive, instead the master explains what they are doing and why, in parallel with performing the activity. The apprentice can at any time interrupt the activity by prompting questions regarding some aspect of the task.

There are many benefits with contextual inquiry [3]; some of these are presented below:

– Doesn’t require teaching ability. Many users lack a teaching background. However, they are often experts on their natural working activities. The master-apprentice relation allows a designer to get a better understanding of the natural activities in the problem domain.

– Reveals what matters. Often users are not aware of everything they do. How they perform an activity can be based on years of training and some sub-tasks are obvious to them due to their experience. Since the designer is allowed to put questions, the user can be forced to reflect over why they do these automated tasks. This may lead to more efficient workflows in the new design.

– Reveals details. Important characteristics of the users’ activities can be revealed by contextual inquiry. This is due to the fact that the users perform and explain the task simultaneously. This prevents the user from generalizing the task to other similar tasks.

– Reveals structure. Since users communicate basic underlying strategies and structures for the activities by performing them, a designer can get a better understanding for the different aspects of the activities by observations. If a designer has the opportunity to observe multiple users and instances of the task, the designer can easier form an idea of how one could perform the activities in a different and more efficient way.

– Improves learning. Every event that happens while the designer is present is a starting point for discussions of past events. A designer often has a limited time to get an overview of the problem at hand; by using contextual inquiry a designer can take advantage of the user’s previous experience.

The typical form of contextual inquiry is by doing a contextual interview. This is a combination of observation, discussion and reconstruction of past events [34]. Snyder [38]

highlights the importance of watching the users in their natural work environment. She argues that contextual interviews are a very helpful method to get valuable information for the design task at hand.

3.3.2 Interviews

Preece et al. [34] describes interviews as a ”conversation with a purpose”. The arrangement of interviews can differ significantly. Which kind of approach and structure an interview session should have is highly dependent on what kind of questions to be answered, the adopted paradigm, and the session’s evaluation goals. There are four main types of interviews [34], these are:

– Unstructured. An unstructured interview can generate a lot of useful data since the arrangement is more like a conversation on a specific topic. That is, both parties have

(35)

3.3. Gathering Data 23

the opportunity to control the interview session. There is no explicit manuscript for the topic at hand, instead the questions are open-ended and the interviewee is free to answer the questions as thoroughly as he or she wishes. If one use an unstructured interview it is important to be organized and have a plan for the topics to be covered.

– Structured. The questions in a structured interview are predetermined and closed, like those in a questionnaire. This kind of interview works best if the goals are clearly understood and in order to work well the questions should be specific, short and clearly worded. All participants get the same questions and the questions often require a precise answer.

– Semi-structured. A semi-structured interview is a combination of features from both structured and unstructured interviews. The interviewer has a script with basic questions for guidance in order to cover the same topic among the participants. There is a mixture of both closed and open-ended questions, and the typical approach is that the interviewer starts with preplanned questions and then probe follow-up questions until no new relevant information is presented.

– Group. This kind of interview is based on a group of participants with representative users. The arrangement is that the whole group discusses the questions together. One popular variant of group interviews is called focus groups, and is discussed in more detail in section 3.3.4.

3.3.3 Brainstorming

Brainstorming is a technique for idea generation. A recommended group size of a brainstorming session is between five to fifteen people. The basic principle of brainstorming is that the participants collaboratively generate ideas on a specific topic or problem. One can generate ideas either by presenting a new idea or by further developing other participants’

ideas. It can be beneficial to have participants with diverse backgrounds or area of expertise in a brainstorming session; one idea can trigger new innovative ideas from participants with a different perspective on the current topic [33].

A prerequisite for a successful session is that one must create a relaxed environment where the participants feel comfortable. There are basically three rules that must be followed during a session [24], these are:

– No one is allowed to criticize someone else’s ideas

– One should not hold back or hide any thoughts; the goal for the group is to generate as many ideas as possible

– Participants should be encouraged to combine or improve other ideas

At the end of the session there is a need to systematize the results. One way to do this is to categorize the results collaboratively into suitable categories. During this process one should also clear repeated ideas and clarify under-specified notes into more concrete ones.

This results in a structured set of ideas [24].

A disadvantage with brainstorming is that the problem is often too complex and cannot be solved by idea generations alone [33]. Furthermore, there is no evidence that brainstorming generates more or better ideas or solutions than if each participant spent equal time individually on the problem [24]. However, the technique can be used to generate ideas either for sub-parts or to the entire problem as well as give directional hints toward a solution [33].

(36)

3.3.4 Focus groups

The purpose of a focus group is to take advantage of the possibility that a group has the capacity to become more than the sum of its individual parts [22]. A focus group consists of a selection of people that share certain characteristics, relevant for the topic of interest.

The size of a focus group can vary between three to ten people [34], however, Casey and Krueger [22] recommends a group size of six to eight people for best result.

Discussions among the participants form the basis for the session; hence it is crucial with careful planning of relevant questions before the focus group session is conducted.

Some important characteristics of a good questioning route are that the questions are open- ended, that they are sequenced and that they move from general to specific questions. That is, one question at a time is discussed and the questions should become more in-depth and detailed as the session progresses.

A skilled interviewer is in charge during the session, the main responsibility of the interviewer is to lead the group to get the answers to the questions of interest. It is important that the participants focus on the topic at hand and not discuss irrelevant topics; this can be constrained by the interviewer. There are primarily three stages during a development process where one can use focus groups successfully [22], these are:

– Early in the development. The main purpose is to gain a greater understanding regarding the problem domain. This is achieved by learning how the participants feel, think and talk about the area of interest. Designers can then use this information as a basis for the creation of prototypes of the program or product.

– In the middle of the development. Focus groups in this stage can give designers early feedback regarding if the design is on the right track. Participants are asked to evaluate the designs as well as to compare and contrast each option, that is, what they like or dislike between the prototypes.

– After release. The primary goal with a focus group in this stage of the development process is to evaluate the program. Questions regarding how one can improve the product and if it achieves the expected results is typically in focus during these sessions.

Several focus group studies can be conducted on a specific topic. This allows for more than one target group to be studied. The results can then be compared and analyzed among the groups in order to get an even better understanding of different aspects of the problem domain [22].

A disadvantage with focus groups is that it might be hard to find suitable time and place for the participants to meet. It is also crucial that the interviewer is skillful so that the time is used efficiently and not wasted on irrelevant topics or issues [34].

3.4 Communicating with prototypes

Prototypes are a good approach to test new ideas for a design as well as to solve and communicate problems and opportunities within the development team and other stakeholders.

The technique has proven successful since it allows a designer to evaluate multiple ideas in an early stage in the design process [38]. A benefit of prototyping is that it is fast and cheap in relation to the development of a fully functional system.

The characteristics of a prototype can differ substantially; a developer may develop a prototype in a programming language while a designer can use sketches instead. Typically,

Designing Search User Interfaces