Dynamics in Search User Interfaces Marcus Nitsche, Florian Uhde, Stefan Haun and Andreas Nürnberger Otto von Guericke University, Magdeburg, Germany {marcus.nitsche, stefan.haun, andreas.nuernberger}@ovgu.de, florian.uhde@st.ovgu.de ABSTRACT knowledge available online. Therefore, a proficient tool to anal- Searching the WWW has become an important task in today’s in- yse the structure of the web and to provide guidance to specific formation society. Nevertheless, users will mostly find static search sources of information is needed. This task is accomplished by user interfaces (SUIs) with results being only calculated and shown modern search engines like Google2 , Bing3 , Yahoo4 and other lo- after the user triggers a button. This procedure is against the idea cal or topic centred search engines. By the increase of computa- of flow and dynamic development of a natural search process. The tional power in smart phones and wider access to online resources main difficulty of good SUI design is to solve the conflict between the demand for these search tools has risen and the quality of the good usability and presentation of relevant information. Serving a search terms has changed. Instead of single-query-searches, users UI for every task and every user group is especially hard because tend to request complex answers5 , trying to learn about topics in of varying requirements. Dynamic search user interface elements deep. While the need for information and the expectations of users allow the user to manage desired information fluently. They offer increased, matching the broader knowledge base contained in the the possibility to add individual meta information, like tags, to the Internet in the last few years. About 300 Mio. websites were added search process and enrich it thereby. in 20116 . Search engines mainly remain the same. This leads to the fact that a “significant design challenge for web search engine de- Keywords velopers is to develop functionality that accommodates the wide va- Search User Interface, User Experience, Exploratory Search. riety of skills and information needs of a diverse user population” [1]. Therefore, this paper proposes the concept of using dynamic elements in SUIs, that focus on fluent work flow characteristics, a Categories and Subject Descriptors high grade of interactivity and an adequate answer-time-behaviour. H.3.3 [Information Storage and Retrieval]: Information Search and Retrieval.; H.5.2 [Information Interfaces and Presentation]: User Interfaces. 2. INFORMATION GATHERING Looking at users’ habits in search, they no longer perform sim- ple lookup searches. There is an increasing need to answer com- General Terms plex information needs. Therefore, we mainly consider informa- Design, Human Factors, Management. tion gathering processes, searches where users are not familiar with the domain. Users need to refine search queries, branch out into 1. MOTIVATION other queries to gain additional understanding and collect results to Since the launch of the WWW, users accumulated a vast amount of merge them into a single topic. This kind of search process is called information. With broadband technologies becoming a part of ev- exploratory search and is contrary to a known-item search task as eryday life1 the WWW offers a great opportunity in terms of learn- stated in [2]. Exploratory search processes “depend on selection, ing and education. University courses, for instance, are available navigation, and trial-and-error tactics, which in turn facilitate in- online and nearly every topic is handled somewhere in the great creasing expectations to use the Web as a source for learning and amount of blogs, Q&A pages, fora, web pages or databases. Yet exploratory discovery” [3]. Search tasks are fragmented, consist- there is no map, no guide leading through this vast amount of in- ing of single queries and search requests. The search requests may formation. Users need to search for information, to locate the bits yield additional data or parts of the final information which in the fitting to their specific information need, indexing the amount of end form the information requested by the user. While perform- 1 ing such a complex search task, a pattern called berry picking [4] http://www.internetworldstats.com/images/ can be observed. While reading through a source of data, looking world2012pr.gif, 02.05.2013 for qualified information the user discovers new traces leading to other sources, which have to be handled one after the next. By re- 2 http://www.google.com, 02.05.2013 3 http://www.bing.com, 02.05.2013 4 http://www.yahoo.com, 02.05.2013 5 see the 2009 HitWise study for more details: http: //image.exct.net/lib/fefc1774726706/d/1/ Presented at EuroHCIR2013. Copyright c 2013 for the individual papers SearchEngines_Jan09.pdf, 10.07.2013 6 by the papers’ authors. Copying permitted only for private and academic http://royal.pingdom.com/2012/01/17/ purposes. This volume is published and copyrighted by its editors. internet-2011-in-numbers/, 02.05.2013 fining the search and gaining deeper information the user satisfies synonyms. By adding and linking those parts the user constructs the initial need for it. These different traces span a map in the end, a boolean query which will be submitted to the Google search en- representing the whole search and its processing. When someone gine. Boolify was built for children and elderly. Tests in a third is learning about something this map is refined and expanded. The grade technology class showed that children without any knowl- learner may track back to a certain node and deepen the understand- edge of boolean queries were able to construct complex queries ing about it by adding new queries, and therefore new branches. Or just by pulling them together piece by piece9 . A similar approach he may discard a whole part of the map because it turned out that was implemented at SortFix10 . This tool offers the user the “abil- the contained information was not relevant to him. When the user ity to drag and drop search terms in between several buckets” [6] is satisfied with the gained information this map is encapsulated to in- and exclude them in the query. With a Standy Bucket users and represents the whole development of this complex information. are “able to keep track of all [their] inspirations and alternative According to this concept the result is not a single object. It is a set search words off to the side, ready to be dragged and dropped into of sources, representing the learning process for a specific user. your search box if needed.” [6] Another possible use of dynamic interface elements is the weighting of search terms based on their Looking at the current process of information gathering in the In- font size as used at SearchCloud.net11 . The ranked keywords are ternet there are only two places. The Internet itself, containing the shown in a Tag Cloud like manner and additionally the site shows, pool of existing information, in an unstructured form and a mental based on the ranking, “the calculated relevance score for each [re- model about the information (space) that is constructed. This sys- sult]” [6]. Not only the query building process can be enchanted tem may work perfect when dealing with short, exact search queries by dynamic elements, also the presentation of the result can benefit like postal code New York City, but when it comes to complex in- from it. Dynamic side loading can provide the user a lens like view formation needs, where the user needs to access a lot of information to parts of the result where keywords occur. Microsoft’s WaveLens and generate more detailed search queries while looming through “[...] fetches a longer sample for the page containing your key- pages this system reaches it boundaries. The user might retrieve words, without you having to download it.” [8] Microsoft Research only partial facts. For example, if the user needs explanation of a shows that in a study using WaveLens, presenting the participants term used in its initial query. The user is now in need of another with a normal interface and two versions of WaveLens’ UI (instant place, where he can store information, reorder it and put it into the zoom and dynamic zoom), “participants were not only slower with context of other information pieces. the normal view than the other two, but they were more than twice as likely to give up” [9]. Another way of result presentation was shown at SearchMe12 : “Fragmentation into multiple sites, domains 3. STATE OF THE ART and identities becomes a huge distraction. User don’t know which Looking at Google, the most used search engine today [5], the user site to visit for which purpose, and the lack of consistent, intuitive interface of a modern search engine is mostly static. Google’s fea- inter-site search and navigation makes it hard to find content [..]” tures include some dynamic elements like real time search. For [6]. All these dynamic features can be used as a mask over tradi- example “[..] Google Suggest which interactively displays sugges- tional SUIs to extend them. By hiding the dynamic part, dynamic tions in a drop-down list as the searcher types in each character of elements can be added to an existing search engine and let the user his/her query. The suggestions are based on similar queries submit- make a choice which part should be shown and used. The proposed ted by other users.” [1] Dynamic previews of results will be offered concept is similar to Byström & Hansen’s approach in [19]. when clicking on the double arrow beside a result. But the core of the interface has not changed a lot since its launch in 19977 . While Issues. Comparing the state of the art with the process of infor- adopting fast to new information sources like Facebook and Twitter, mation gathering some issues appear, which may be resolved or at Google discarded the adoption of new HCI methods in favour of a least damped by using of dynamic elements. While collecting in- clean, slim interface. With increasing touch support on the devices, formation pieces for solving complex questions the user discovers a richer user interface can be designed to provide the user with new sources, containing more information. These sources may not immediate feedback and allows haptic interaction with the search form a linear search process every time. Sometimes there will be a process. Some mobile clients take advance of the additional in- split and the user needs to decide which trace to follow first. This formation available, like the iOS search client, which switches to issue is also noted in [10]. Today’s search engines offer only little voice queries when the phone is lifted to the head, but there is no support for this. The user needs to save web pages to favourites or full extension of Google’s search services. While Google is an ad- organize them himself for later reading. Searching different terms equate tool for short queries and queries calling for a direct answer, one by one allows users to follow new pages like traces through features for deep research on complex topics are missing. the Internet. By connecting these traces and setting them into re- lation the user can retrieve the whole information needed to cover One way to integrate dynamic elements into existing SUI infras- his query. Most modern search engines discard this feature, it is tructure is to build an overlay. Thereby, dynamic UI utilize existing, again something the user needs to do by himself. This leads to well known search engines and provide a benefit by enriching them. another more general problem, the enclosing of search queries. This approach is shown in the Boolify8 search engine, which pro- Google for example handles every search term as a new opera- vides a dynamic drag and drop interface on top of Google’s search tion. Data is stored, but contains only general information about engine. This engine is relatively new and was build to promote the the user, queries are not related to each other and therefore miss- understanding of boolean queries. Users build a query by drag- ging jigsaw like parts onto a search surface. These parts contain 9 http://ed-tech-axis.blogspot.de/2009/03/ words (general or exact) and linkers like AND and OR. Additional boolified.htm, 02.05.2013 10 parts have been added to provide search on a specific page or for SortFix.com, offline since 11/2011, Firefox plugin: https://addons.mozilla.org/en-us/firefox/ 7 addon/sortfix-Extension, 02.05.2013 http://www.google.com/about/company/ 11 history/, 02.05.2013 http://searchcloud.net/, 02.05.2013 8 12 http://www.boolify.org/, 02.05.2013 http://www.searchme.com, offline since 2009 holds an array of parameters, which is used to evaluate every item. Possible criteria are Accuracy, Clarity, Currency and Source Nov- elty. These and more criteria are mentioned and explained in [14]. When a user reorders items to fit his preferences the search engine may use the information provided by this ranking to weight the ex- isting parameters to yield better results in the future. The engine will be able to present results ranked according to the user’s prefer- ence. This can be done for all users and also search process wide, as some search tasks require documents and papers while others may Figure 1: Data flow while refining during search. focus on web pages or media. This addition to classical user inter- faces can make great use of the up-trend for touch based devices, in 2012 89% of mobile phones and smart-books support touch [15]. ing its broader context. But when learning about a complex topic Designing the SUI responsive to touch and gesture is maybe one refining the search query is more important to the user. In the iter- of the most natural solutions for human computer interaction and ation of search processes, to narrow down the mass of information adds an amount of possible actions based on gestures. and to tap new sources, the searcher needs to rewrite and modify the query, to link it to other related search tasks. Building a con- Workbench. The workbench targets the issue of loosing informa- nection between parts of information and evaluating it against each tion while switching between different searches. It adds a third other is a core principle of learning. This leaves the user targeting place to the proposed search process, located outside of the search a broader, intense search, in the need to build a custom solution to scope but still related to it. The user may drop queries here to keep extract knowledge and manage it. This is strictly against the guide- them throughout the whole search process. When entering a query, line for online interfaces which suggests to “[..] not require users indicators show how relevant items on the bench are. This allows to remember information from place to place on a Web site” [11] as the user to classify new results in terms of integrity towards already this is a distraction from the main process of searching and destroys selected snippets. The workbench acts as a buffer between search the interaction flow triggered by the search process. queries, adding a broader context to every entry. Like a frame, it contains information exclusively attached to the current search pro- 4. COMPOSING A DYNAMIC SUI cess, leading to the possibility of customization and user centred search environments. When the user switches between queries he The proposed approach shows a design based on today’s search en- can immediately determine how well the new results fit into already gines, enriched with dynamic UI elements to provide a plus for the selected items. This allows identifying false positive as well as ex- user. The design includes principles to form web based learning ap- ploratory search [16] results. Users may just enter queries that lead plications [12] to focus on the completion of complex search tasks. to a peripheral topic and check the indicators whether the result is By adding dynamic elements internal states can be visualized for relevant to his initial information. the user to give a better overview about the current position in the search process. Furthermore it will allow the serialization of search Tag Cloud. The tag cloud is another feature to guide the user in the processes and to step in at every point of the process later on. As search process. As shown in [17] a tag cloud supported retrieval stated in Beyond Box Search “different interfaces (or at least dif- system can increase the find rate of adjacent data nodes by nearly ferent forms of interaction) should be available to match different 15%. When adding an item to the workbench its most relevant tags search goals” and “[t]he interface should facilitate the selection of are extracted and visualized in the tag cloud. It is able to show how appropriate context for the search” [13]. Both of this quality mea- often a tag occurs and how different tags are related to each other. surements should be regarded when conceptualizing a SUI. The When entering a new search query the tag cloud displays the rele- first point will be covered by a modular UI, the user may move, vant tags and reorders the cloud to revolve around the current tags. hide and scale elements to fit his current need. The second point By combining distance and size of the entered tag with their direct is strongly bounded to the use of dynamic items in the UI design. neighbours the user can directly spot how homogeneous its current By giving immediate feedback to the user it is easier to classify query is in terms of the whole process. The tag cloud can also use the current results. The context of the whole search process will the existing tags to show the user other closely related tags and sug- be persistent over multiple search queries and provide a method of gest query refinement based on tag proximity. Colours can indicate accumulation parts of the search process into a single object. the state a tag is currently in. A possible color scheme for western culture can be based on the three colors used in traffic lights. The Four features are proposed and explained in this paper, showing a concept of three-coloured traffic lights also work for color-blind use-case for dynamic search interfaces and giving a suggestion how people, since they do have a given position. Therefore, we also use this can be accomplished. Together these features build up a mid second coding paradigm: form. A green triangle is proposed for instance to accumulate into a bigger context for a search process. tags resulting from the current query, which are contained in the This clipboard (Fig. 1) reshapes the search process and provide the overall tag cloud spanned by the workbench. An orange circle in- place to store information between search queries. Instead of trying dicates a warning for tags, either in the current query result or the to accumulate knowledge and information directly the user is able bench, which are not related to the rest of the cloud. A red square is to construct a solution of the search query in this buffer and save it avoided for the reason that uncontained tags may not be bad, they as a complete collection of the information retrieval process. can lead to a new direction or add a reasonable value to the whole search process. The tags are scaled depending on their frequency. Reordering. Giving users the opportunity to reorder and therefore When the user selects any item from the bench or the search re- to rate a search result is an important step towards dynamics in sult the corresponding tags are centred. The other tags are located SUIs. Every result is handled as a single item and can be picked based on their coherence with the selected tags; closer means the by the user and dropped in another place. The other items reorder tag is in a direct relation to the selected item. A user can quickly fluently, giving user feedback while the user moves on. The SUI Starting as overlays and additional feature of existing search en- gines may develop and emerge into independent solutions. Acknowledgement Part of the work is funded by the German Ministry of Education and Science (BMBF) within the ViERforES II project (01IM10002B). Figure 2: Search map, representing the search process. 6. REFERENCES [1] Sandvig, J. C., Deepinder B.: User Perceptions of Search check the integrity of his search process by looking at the tag cloud. Enhancements in Web Search. In: J. of Comp. Inform. Syst. A slim, packed cloud means the results are all related to each other, 52, no. 2, 2011. an open, wide cloud indicates a broad result field, covering many aspects. False positives may be filtered out, when enough items ex- [2] White, R. W., Marchionini, G.: A Study of Real-Time Query ist, as they stick out the rest of the cloud. Expansion Effectiveness. In: SIGIR Forum 39, 2006. [3] Marchionini, G.: Exploratory Search: From Finding to Search Map Support. The search map (Fig. 2) acts as a representa- Understanding. In: Comm. of the ACM 49, 4.2006. tion of the whole search process, by storing every query and follow- [4] Bates, Marcia J.: The design of browsing and berrypicking ing up querying and visualize it in a chronological order. The user techniques for the online search interface. Univers. of Calif. may select single nodes in the map to get into the state of search at L.A., 1989. process at this moment and refine it. The map provides a kind of top [5] Purcell, K., Brenner, J., Rainie, L.: Search Engine Use 2012. view to the path of the search and shows where the user branched In: Pew Internet & American Life Project, 2013. out into new queries. It allows the user to cut off nodes and whole [6] Bates, M. E.: Make Mine Interactive. Vol. 31, Issue 10, p. 63, branches if they are not needed any more to fulfil the need for in- 12/2008. formation. As it contains every action and some data in the current [7] Heer, J., Viégas, F. B., Wattenberg, M.: Voyagers and search process, the search map might be serialized and stored to re- voyeurs: Supporting asynchronous collaborative trieve the search process later on. With this map at hand a user can visualization. In: Commun. of the ACM, 52, No. 1, pp. save whole search tasks just like he saves favourite web pages. He 87–97, ACM, New York, NY, USA, 01/2009. can step back into the process at any time and reconstruct the whole [8] MS Research: Cutting Edge. New Scientist 181, no. 2434, learning process or correct parts of the search which has proven to 2004. be not correct. This kind of Story Telling helps to visualize the [9] Paek, T., Dumais, S., Logan, R.: WaveLens: A new view given data, “[...] lead to findings, which prompt actions [...] [and] onto Internet search results. In: Proc. of the SIGCHI can indicate the need to forage for new data.” [18] The search map Conference on Human Factors in Computing Systems (CHI [7] features two ways of expanding. The user may follow a result to ’04), pp. 727–734, 2004. expand it vertically. The result is added as a new node and resides [10] Morville, P., Callender, J.: Search Patterns - Design for in the map until it is processed further. When the user selects an Discovery. In: O’Reilly, 2010. existing node he steps back to the vertical position of this node and [11] U.S. Department of Health and Human Services, can now branch out horizontally. This deals with an issue of berry- Research-Based Web Design and Usability Guidelines. picking [4], where the new sources has to be processed one by one. Washington, D.C.: GPO, n.d. While not abolishing this the search map provides a visual repre- sentation to simulate parallelism. The map also allows scoping of [12] Jayasimman, L., Nisha Jebaseeli, A., Prakashraj, E.G., the analysis by creating a horizontal or vertical bound. Only tags Charles, J.: Dynamic User Interface Based on Cognitive and items inside this bound will be considered, the rest is greyed Approach in Web Based Learning. In: Int. J. of CS Iss. out. This allows the user to dig deep into a certain topic (small (IJCSI), 2011. vertical bounds) or create a better understanding of a certain term [13] Buck, S., Nicholas, J.: Beyond the search box. Reference & and add more results to a certain query (horizontal boundary). This User Services 51(3), pp. 235-245, 2012. can help the user to concentrate on smaller pieces of a big search [14] Beresi, U. C., Kim, Y., Song, D., Ruthven, I.: Why did you process and to narrow down problems one by one. pick that? Visualising relevance criteria in exploratory search. In: Int. J. on Dig. Lib. 11 (2), pp. 59–74, 2010. [15] Lee, D: The State of the Touch-Screen Panel Market in 2011. 5. CONCLUSION In: Walker Mobile, LLC, SID Information Display This paper has shown certain design flaws of today’s search engines Magazine, 3.2011. and some proposed dynamic design principles to counter them. The application of the envisioned elements can extend a search engine [16] White, R. W., Kules, B., Drucker, S. M., schraefel, m. c.: towards a software capable of complex research tasks. With the Supporting Exploratory Search. In: Comm. of the ACM 49, current up-trend of online learning this unlock a new way of using 4.2006. them. The surplus resides not only in the dynamic and vivid inter- [17] Trattner, C.: QUERYCLOUD: Automatically linking related face, it prepares a whole new tier of online search solutions. The documents via search query (Tags) Clouds. In: Proc. of the process of learning can be preserved and shared with others. One IADIS Int. Conf. on WWW/Internet, 2010. can come back at any time, jump right into the saved search process [18] Mackinlay, J. D.: Technical Perspective: Finding and Telling and reconstruct the development of certain knowledge. With this Stories with Data. In: Comm. of the ACM 52, 2009. tool chain at hand learning becomes a social and an integrative part [19] Byström, K., Hansen, P.: Conceptual framework for tasks in of the WWW. The next step in deploying dynamic elements into information studies: Book Reviews. In: J. Am. Soc. Inf. Sci. search user interfaces would be prototyping them. Design snippets Technol., Vol. 56, 10, pp. 1050–1061, John Wiley & Sons, need to be tested for usability and acceptance in the real world. Inc., New York, NY, USA, 2005.