Big Data - Small Device: A Mobile Design Concept for Geopolitical Awareness when Traveling

Transcription

1 Big Data - Small Device: A Mobile Design Concept for Geopolitical Awareness when Traveling Sabina Sonning September 24, 2013 Master s Thesis in Interaction Technology and Design, 30 credits Supervisor at TFE-UmU: Håkan Gulliksson Examiner: Thomas Mejtoft Umeå University Department of Applied Physics and Electronics SE UME? SWEDEN

2

3 Abstract This work explores an application concept for small mobile devices, displaying structured Big Data based on human web reporting. The target user is a traveler interested in geopolitical events in the visited region and the concept focuses on high level signals to describe the situation and allows for following up, down to original reporting sources. Interviews and a survey was used to investigate the target user group s current behavior and needs while traveling and in unstable regions. The design process is described in reference to interaction design practices and successful applications on the market today, resulting in a concept presented in the form of high fidelity sketches, well documented interaction style and transitions, and a clickable low fidelity prototype. The work can be used as a reference document for further development.

4 ii

5 Contents 1 Introduction Purpose Background Big Data Design Field for Small Mobile Devices Recorded Future Method Design Process Data Collection Sketching and Prototyping Limitations Results and Analysis: Pre-study Mobile Recorded Future Reaching New User Groups Designing for Foregin Travelers Interviews and Survey Target User Group Identified Problems and Needs of Target Users Suggested Core ffnctionality Result and Analysis: Application Design Concept Development I am Local and Now One Signal Dealing with the Future and the Past Interaction and Navigation Aesthetics, Trend and Personality Design Description iii

6 iv CONTENTS Start level (top) Event type level (first) Event list level (second) Event level (third) Cache and Data Traffic Settings) First time User Experience Results and Analysis: User Tests Scenario Testing User Test Results Discussion Pre-study Design Process and Resulting Concept Data Quality Event Report Clustering Reporting Density in relation to Location and Location type Relevance and Impact Conclusions Project The Users The Concept For Future Work References 45

7 List of Figures 2.1 Illustration of diverese human reporting scanned by Recorded Future Illustration of entity and event extraction. The text is analyzed to identify entities like people, locations, organizations, companies, products and more. The relationship between entities is extracted as events, describing for example a person traveling to a location or a product being released by a company Illustration of time, sentiment and source extraction. The events are given a time or time period based on analysis of publications dates and human reporting on time, like the products release being expected next month or this week. The text is further analyzed for indications of sentiments, like positive or neutral opinions on the matter or mentions of violence in the context of the event Screenshot of Recorded Future Analyzer Timeline view. The timeline here is an example of a plot of protest events all over the world, from July 31 to Aug , split on countries. Every ball represents a registered event and the size indicates reference volume Screenshot of Recorded Future Analyzer Map view. The same time frame and protest events shown in Figure 2.4 here plotted on a world map. Events locations show pie charts of events and size indicate reference volume. As the split is done on countries, the pie charts have only one event type. The view can be adapted to show more information in this view by for example splitting on source type, sentiment or something else, to use the pie chart map capacity fully Screenshot of Recorded Future Analyzer Network view Traveler activities, presented as a mind map Traveler problems, presented as a mind map Time and location axis Time, location and information resolution axis Signals and examples of event types triggering each signal v

8 vi LIST OF FIGURES 5.4 Information resolution level description, top level from left, drill down steps consecutively to the right Information resolution level description, top level from left, drill down steps consecutively to the right Information resolution level description, top level from left, drill down steps consecutively to the right Menu sliding in. From the left: Gmail, Facebook, Yahoo wather and Feedly applications Content placed horizontally and accessed by swipe. From the left: Gmail, Week Cal and Yahoo weather applications Content and navgiation axis as navigation model Content canvas with the screen as a window focusing on just part of the canvas To the left: Skeumorphism,heavy gradients, detailed icons and Arial regular font in native iphone application. Three images to the right (Gmail, Yahoo weather and Feedly): Flat design, simplistic icons, condensed lightweight fonts Application hierarchy Signal section switching Location history switching Day view to Week view toggle with horizontal flip Timeline scrolling Menu sliding in from left Information drill down from top layer Aggregated information toggle with horizontal flip Information drill down from first layer Information drill down from second layer Back navigation Back navigation

9 Chapter 1 Introduction The web has existed for less than one and a half decade and continues to grow at tremendous speed. The last five or so years here has been an explosion of social and news media activity reflecting every aspect of human life, from large political happenings and natural disasters to what someone is having for breakfast and how they are feeling today. Devices, not just phones, but sneakers, fridges and cars, are increasingly connected to the Internet while companies capture every transaction and interaction with customers and both personal and professional file storage is moving to the cloud. Many governments, municipals and organizations today give the public open web access to information ranging from bus tables to population records and as the IT infrastructure develops with improved speed and capacity more space consuming multimedia formats are used in every context from entertainment to the medical sector. With this vast documentation the primary challenge no longer seem to be about getting access to enough information, but rather to make sense and full use of that data. 1.1 Purpose The purpose of this work is to create an application concept for small mobile devices, displaying structured Big Data based on human web reporting in a meaningful and accessible way. The concept will consider mobile device limitations and opportunities, adhere to existing technologies and usability guidelines to offer a realizable and enjoyable design suggestion in the form of descriptions, sketches and lo-fi prototypes as direction for future work in the area of Big Data on small mobile devices. The key questions are: Who are the users of this type of application? How could such an application look like and function in an acceptable way on a concept level? 1

10 2 Chapter 1. Introduction

11 Chapter 2 Background This section covers the background for this project, giving a brief description of Big Data, the interaction design literature used for reference and how the web application Recorded Future works. 2.1 Big Data The term Big Data emerged to describe collections of data sets so large and complex they were difficult to process with available database and application technologies. Gartner formulates a widely used definition called The 3Vs High-volume, high-velocity and highvariety information assets that demand cost-effective, innovative forms of information processing for enhanced insight and decision making [1]. As data management strategies and infrastructure has caught up and is starting to get a grip on storing and sorting, the focus is shifting to what additional value can be found when analyzing the huge volumes and how that value can be exposed in applications. 2.2 Design Field for Small Mobile Devices Many of the widely used guidelines for interface and interaction design predates when smart phones started to become popular, but still holds: Jakob Nielsens ideas on usability [2] and Ben Shneidermans eight golden rules of interface design [3] still provides a backdrop for modern interface design. We will also look at the updated interpretation with seven additional rules by Gong and Tarasewich, written with special regard to mobile interfaces [4]. For current practices in mobile development we look at Google [5], Microsoft Windows Phone [6] and Apple [7] as direction for app and web development in their respective environments. Yvonne Rogers et al [8] give an overview of the field in planning the design process and Jonathan Lazar et al [9]suitable research methods for the pre-study. 3

12 4 Chapter 2. Background Nadav Savio and Jared Braiterman [10]have influential ideas for mobile interaction and Josh Clarks [11] directional work on design is a collection of important lessons learned from the last years of touch interface products. For more thoughts on the relationship between function and form, we reference Donald Norman s [12, 13] ideas about usability and aesthetics. 2.3 Recorded Future Recorded Future is a web intelligence company with focus on human reporting on the web. They continually scan tens of thousands of news publications, blogs, public niche sources, government web sites and more in several languages and analyze what is written there (see Figure 2.1). Figure 2.1: Illustration of diverese human reporting scanned by Recorded Future Entities like people, organizations, companies and places are identified, as well as events, like product releases, floods, protests and elections (see Figure 2.2). The events are positioned in time or time periods, wether past, present or predicted and each reference links back to the original source, scored with analytics including positive and negative sentiment (see Figure 2.3). This structured data is then exposed through analysis tools in a web application, where keywords, event and entity categories, time periods, different means of visualizations and more allow users to investigate the content from different angles and discover patterns and relationships (see Figures 2.4, 2.5, 2.6). The company also tailor applications for specific use cases like corporate security, cyber intelligence and defense intelligence with notification systems for monitoring interest areas [14].

13 2.3. Recorded Future 5 Figure 2.2: Illustration of entity and event extraction. The text is analyzed to identify entities like people, locations, organizations, companies, products and more. The relationship between entities is extracted as events, describing for example a person traveling to a location or a product being released by a company. Figure 2.3: Illustration of time, sentiment and source extraction. The events are given a time or time period based on analysis of publications dates and human reporting on time, like the products release being expected next month or this week. The text is further analyzed for indications of sentiments, like positive or neutral opinions on the matter or mentions of violence in the context of the event.

14 6 Chapter 2. Background Figure 2.4: Screenshot of Recorded Future Analyzer Timeline view. The timeline here is an example of a plot of protest events all over the world, from July 31 to Aug , split on countries. Every ball represents a registered event and the size indicates reference volume.

15 2.3. Recorded Future 7 Figure 2.5: Screenshot of Recorded Future Analyzer Map view. The same time frame and protest events shown in Figure 2.4 here plotted on a world map. Events locations show pie charts of events and size indicate reference volume. As the split is done on countries, the pie charts have only one event type. The view can be adapted to show more information in this view by for example splitting on source type, sentiment or something else, to use the pie chart map capacity fully.

16 8 Chapter 2. Background Figure 2.6: Screenshot of Recorded Future Analyzer Network view

17 Chapter 3 Method This section covers the main structure of the design process used as a method to design a smart phone concept for structured Big Data based on human reporting on the web. 3.1 Design Process The process was planned based on designer s and stakeholders experience in concept development, influenced by interaction design field practices as covered by Rogers et al [8], Nielsen [2] and Lazar et al [9]. Nielsens usability engineering cycle in particular, focuses on development of new systems, and based loosely his steps we formulate our own process frame to fit the scope of this project. Nielsen usabilty cycle [2] 1. Know the user Individual user characteristics The user s current and desired tasks Functional analysis The evolution of the user and the job 2. Competitive analysis 3. Setting usability goals Financial impact analysis 4. Parallell design 5. Participatory design 6. Coordinated design of the total interface 7. Apply guidelines and heuristic analysis 8. Prototyping 9

18 10 Chapter 3. Method 9. Empirical testing 10. Iterative design Capture design rationale 11. Collect feedback from field use The cycle in this thesis Formulate goals with stakeholders Perform pre-study of potential target user group and content applications Sketch on paper for divergent ideation Sketch digital mockups for design convergence Apply guidelines and heuristic evaluation of sketches and ideas Re-design iteratively Implement low fidelity prototype based on final mockups User test prototype As the concept is based on a new possibility rather than an expressed need, the process will be mainly explorative and a user centered design approach applied, involving potential users and stakeholders before, during and in the end of the project to try out and evaluate ideas and concepts throughout the different stages. 3.2 Data Collection One of the central questions posed in user centered interaction design is what the user needs are. As Rogers [8] points out, this is not always known, even by the users themselves. Asking users what they need, she argues, will often give answers limited by what they and the designers can imagine at the time. Instead, we want to try to understand the characteristics and capabilities of the users, what they are trying to do, how they do it today, and wether they would do it more effectively if they had other tools to do it. Justin LaFayette, former Vice President of Strategy for Information Platform and Solutions with IBM Software group, forecasts that the future of Big Data lies in the applications, not the infrastructure that has been getting all the focus so far [15]. He lists three patterns he thinks are key for future success in the area, as there so far are few examples of actual applications on the market. First that they need to be driven by the answers required by the user, not the data currently available. Second that it should be available and consumed by the widest number of people to be powerful, not just the data elite. And lastly, that a strong understanding of Information Rights is coupled with development. The last point refers to considerations regarding sensitive or private information and how to manage viewing and sharing rights, an aspect not relevant for this project as the data used is public. With this in mind, we designed the pre-study to be very open and aimed at non professionals, in hope to catch the problems and required answers of the participants without coloring them by the potential of the underlying data.

19 3.3. Sketching and Prototyping Sketching and Prototyping White board, paper and pen was used in the first stages of the design to focus on concept rather than details, and produce sketches in quick iterations. This cheap way of demonstrating information structure, flow and basic concepts can be used to discover usability issues early, without heavy investment, and as Virzi et al show in a study comparing issues discovered by hi-fi and lo-fi prototyping of the same concept, with almost the same results [16]. Other arguments for this strategy is that users are more comfortable criticizing an unfinished product, making feedback more direct, and that designers are less open to scrap a bad idea that they spent a lot of time designing and implementing [17]. As the main structure of the concept was laid out, the sketches were reproduced in a higher graphical fidelity to address readability, information density and style. The sketches were then connected in a clickable prototype with a small assortment of transitions to help understand and evaluate navigation, overall system behavior, look, feel and interaction style. 3.4 Limitations The focus of the thesis is interaction design, graphical design and the concept of viewing complex data on a small screen. Because of time restraints, developing a prototype using live data was judged too time consuming. Actual harvested data from a specific date and place available through the Recorded Future API will however be used to simulate relevant content in the design. Also, the low fidelity prototyping tools available for smart phones today do not support gesture based interaction. As this is a big part of any current design, some aspects of the concept can not be fully evaluated within the scope of this project. We draw the conclusions possible from the user test and comment on those affected by gesturing. Recorded Future asked for a native approach to the design and we chose to work with the 1136x640 pixel iphone 5 format as it was one of the newer models at the start of the project. The concept is stand alone and not visually nor navigationally strongly associated with any specific environment and could thus be translated as it is, only adjusted for ratio if considered for other smart phone brands.

20 12 Chapter 3. Method

21 Chapter 4 Results and Analysis: Pre-study This section covers the direction from the stakeholders and a pre-study of the intended users. 4.1 Mobile Recorded Future The interface of the web application Recorded Future is developed for desktop sized screens and offer visualizations like maps and timelines with labels, overlay text boxes and many small clickable graphical elements, making use of large canvases and hit areas fitting for the precision of a mouse pointer. Currently the application is designed to scale for smaller screens but in practice it is not well suited for interaction with fingers instead of a mouse on a small screen (see Figures 2.4, 2.5, 2.6) The general and continuing trend of increased smart phone use [18] and shift from desktop to mobile browsing [19] supports the endeavor to explore how users can access Recorded Future services in a mobile context. The possibilities and restraints of the mobile experience, with gesture and touch interaction, a smaller screen, location awareness, mobility, a limited power source and varying bandwidth encourages a new approach to the underlying data, rather than a direct translation from desktop to a mobile application. This is especially so since the desktop applications relies so heavily on screen space for visualizations. The new concept will still be designed in relation to available data from the Recorded Future API but focus on situated use and a current and modern approach to mobile interface design Reaching New User Groups One design approach discussed was to extend the desktop experience for currently active users of Recorded Future, the majority somehow connected to the analytics field. Large parts of the product in its today form is still available to the public for free, but much of the recent development has been targeted at professional users with analytical expertise, with 13

22 14 Chapter 4. Results and Analysis: Pre-study the potential effect of the solution moving away from the first time and not so specialized user needs. We chose to attempt to reach a different group of consumers, partly to free ourselves from earlier design decisions made for experts and partly to cultivate the idea that the power of big data could, and should, be available to anyone. Combining the available content of news, when taking social media reporting into account, the possibilities suggested by a handheld device always on the user, the ability to sense location, and a user not strongly connected to the desktop product into account, we proposed a design targeted at foreign travelers. 4.2 Designing for Foregin Travelers Foreign travelers is a large and diverse group of potential users, with different reasons for being abroad and different expectations in what they need and want to know, and how. But tourists, journalists, activists and politically interested parties alike do face challenges abroad, simply by not being familiar with the surroundings, language and culture, as well as lacking the closeness to their familiar human networks and safety nets. Especially when social unrest, natural disasters and conflict strike, it is inherently more complicated knowing where to find reliable information and how to react in an already disruptive situation. This section covers the investigation of the travelers and the key findings regarding the problems, behavior and needs associated with that group, used to drive the user centered concept development Interviews and Survey To investigate the behavior and needs of the potential target users, nine persons living in Sweden owning a smart phone, with some or much experience of traveling abroad and some expressed geopolitical interest were interviewed or asked to answer a survey. Their backgrounds ranged from foreign conflict correspondents to pensioned bloggers and students with just a little traveling experience and aged between from where three were women and six men. The aim was to understand more about the procedures and tools used on their travels to support knowledge gathering, decision making and behavior when exposed to risk. We also wanted to find out what they experienced as challenging and collect ideas and insights about what they believe could enhance their experience and help with problems they often encounter. The interview and survey was based on a very vague scenario of being abroad, not knowing the language, trying to figure out what s going on in the region and reacting to a potentially risky situation. The participants were asked to remember or imagine being abroad, professionally or as a private person, and describe their daily routines, equipment and services used and their communication strategies and networks. They could reference own experiences in previous travels and emphasize those in unstable or unsafe environments, if any. After describing regular routines from morning to sleep they where challenged to imagine signs of social unrest in the form of people gathering on the streets, moving in different directions with worried or angry expressions and local news in a foreign language depicting protests of some kind. They were asked to describe how this changed their behavior and priorities and what worries and problems they would experience. In the end of the session they were asked for suggestions on how to improve their experience.

23 4.2. Designing for Foregin Travelers 15 The participants describe the routines when traveling as a very complex combination of many tasks, tools used, considerations and approaches: Most access the web and use applications several times during the day through their smart phone. Some travel with a laptop for more time consuming tasks, often work related. Most regularly browse news published in their home country and sometimes a couple of big international sources. Some take care to have access to local news in English. Some have access to specific channels for national news reporting, underground networks and mailing lists. All use some form of social media channel and mail to update the situation and keep contact with co-workers, friends and family when needed. Some use social media to follow happenings in the region through Facebook groups and Twitter hash tags. Almost all rely on wifi for data traffic to limit roaming costs. Some have foreign phone numbers to allow freer use of local 3G connections for data traffic. Those with a professional role in journalism in foreign countries make use of established human networks of co-workers and locals, sometimes employing a fixer with special knowledge of the area and activity. Most describe moving around city squares, markets, cafés and bookshops, observing and sometimes making contact with people there, or talking to hotel personnel and other guests as a normal strategy to learn more. All describe moving around by foot, sometimes by cab and local public transportation. Some have back up that offer extraction by bullet proof vehicles or planes if needed. Some carry additional tools like sound recording equipment, still and film camera. Mornings is for updating what has happened during the night and evening, where they are and around the world. Days are for experiences, collecting data, meeting people and observing the surroundings. Evenings and nights are for composing reports, editing and publishing material, contacting sources and collaborating with colleagues. see Figure ( 4.1) for a mindmap of the travelers activities Target User Group After talking with the participants we realized that journalists are analysts in some sense, with specialized methods, support and funding to do their research. We had tried to branch away from the experts but found another group of them in just another field. The freelancers

24 16 Chapter 4. Results and Analysis: Pre-study Figure 4.1: Traveler activities, presented as a mind map and bloggers though, lack the full support systems available for the foreign correspondents and leisure travelers are even more unprepared for unexpected events. Different Needs for Different Participants What seemed to separate the backed professionals, freelancers and leisure travelers wee resources, risk acceptance and motivation. Those employed professionally to cover a region would have a lot more backing from home and on site, both financially, in knowledge and socially. They have access to higher hotel standard, drivers, contacts, analysts, local phone numbers with lower rates, giving them more security and confidence in moving around. Not least did they describe a preparedness for different situations by researching before travels, having access to and knowledge of where to learn more on site, having previous experience in the areas they were visiting and holding high self confidence in handling potential problems. When presented with the scenario of escalated unrest the journalists said they would seek out trouble to report about, knowing escape routes, safe spots and what kind of dangers could be expected. The leisure travelers expressed more inclination to avoid such situations, although some said they would try to watch from a distance and monitor the development, assessing risk and preparing for problems. For a journalist it is part of the job description to be close to events, and therein lies a higher motivation to be exposed to possible harm as well as more experience in coping with difficult situations. Observing turbulent events was

25 4.2. Designing for Foregin Travelers 17 described as important and exciting by some of those abroad on private travels as well, but other matters like staying safe and enjoying the trip as planned had higher priority. Redefining the Target User Group Given what we had learned, we decided to focus on the group of users with less experience, limited resources and lower confidence and try to shrink the gap between the professionals and the leisure travelers. With aggregated data and the wide range of publications available through Recorded Future we hope to give some of the advantage achieved by analysts and established networks with a very low threshold to insight. The target user is traveling mainly for pleasure and discovery Is concerned with roaming costs and manage data traffic tightly Is not an expert user in analytics and research Is not an expert user of mobile applications but have some experience of personal use Has a small or no social network on place Identified Problems and Needs of Target Users Looking at general problems, cost and limited infrastructure were main expressed concerns, but also high roaming expenses, limited access to wifi, short battery time and unstable networks. Many said they usually adapt their behavior by limiting all data traffic to wifi access points to counter this problem, instead returning frequently to the hotel or an internet café to check in. Another problem was language and cultural barriers, making local media hard to consume and conversation with locals complicated. Only a few had access to translators and some felt hesitant to approach people because of their own lack of language skills. Some mentioned media quality, speed and bias problems. Social media was deemed quick but unreliable and sometimes outright misleading as a news source. Those using it effectively followed special users or groups that they had already formed an opinion about. Mainstream international media had higher perceived reliance but many said that the news were old before they reached the papers to be useful. Outside the regular channels of the preferred morning paper at home and a few international sources, most seemed to have little knowledge of where to find trustworthy information and described relying solely on what mainstream media choose to highlight. In the longer interviews a distrust regarding this selection was aired, fueled by reports on media skewing [20], that some topics and some regions might just be more likely to get more attention than other. see Figure ( 4.2) for a mindmap over the travelers expressed problems. Technology Limitations Many of the issues with technology mentioned problems are hard to do anything about. But the way the participants adapt to the situation is interesting. To manage roaming rates, low battery and low network stability users are less inclined to always be online and describe

26 18 Chapter 4. Results and Analysis: Pre-study Figure 4.2: Traveler problems, presented as a mind map a pattern of returning to the hotel or known cafés regularly to get updated and charge batteries. This suggests that better support for how and when data should download could be explored and that caching options could be an important part of the solution. Language Barrier The data delivered from Recorded Future comes from publications on many different languages, and the fragments of text mentioning entities and events is translated to English after processing, offering some small relief to the language barrier problems described. Source Quality The sources are labeled with language, origin and type, categorizing them into different niches like blogs, social media, news agency and more. Exposing this metadata in some form could help with assessment of source quality. As Recorded Future can cluster fragments of text into events, relating them to a geographical place and time, it is also possible that things happening in a place that might get little media coverage in Sweden but affect people in that area can be given a more prominent position within this concept, addressing the vague feeling of media skewing expressed by some in the study.

27 4.3. Suggested Core ffnctionality Suggested Core ffnctionality As the chosen group show other priorities when traveling than research and keeping up to date, we decided on a design approach similar to a weather application, but observing and forecasting geopolitical turbulence. The core functionality is to inform the user when there is instability of some sort, related to her location and the time. Just by looking at a very top level of the application, the user should be able to decide wether further investigation is needed to give support for decision making in preparation for the situation. It should support drilling down into data, finding the actual text that indicates instability, as well as any other geopolitical event happening near the user. The user should have some indication, on some level, how much data is behind an event, to help in evaluating media quality. Also, as to what type of sources are behind the data, in terms of social media, blogs, news agencies, niche reporting and mainstream media. When possible, English translations of text should be shown, independently of source original language. Some control over caching and data traffic should be considered.

28 20 Chapter 4. Results and Analysis: Pre-study

29 Chapter 5 Result and Analysis: Application Design This section covers the idea and design development process in relation to literature and existing applications as well as the final result. As the design process is iterative and builds on previous steps, ideas, results and analysis is weaved together to describe the flow of the development. 5.1 Concept Development Based on the core functionality we started ideation and step by step laid out the functions and features of the concept I am Local and Now A central quality with the mobile device is that it is almost always with the user and knows where that is. When narrowing the scope of the publications processed from all over the world we can use two parameters even before the user starts interacting with the content: Location and time. Clark claims there are three basic reasons people open a mobile application: Because they are bored, micro tasking or local, putting a finger on how being somewhere can be a great starting point for exploring [11]. The application development starts around this concept, that the user is at the intersection of what is written about specific place at the current time, and have access to everything written related to that point closest at hand (see Figure 5.1) One Signal The next dimension added is the level of abstraction, or information resolution (see Figure 5.2). We stated that the application should inform the user of potential instability, and we use aggregated data of all relevant publications around that time and place to model 21

30 22 Chapter 5. Result and Analysis: Application Design Figure 5.1: Time and location axis a signal that tries to answer that question by a glance. If there are large scale protests in the area, and different types of violence is mentioned together with that event, this would be cause for concern. If a legislation is being decided on, this might be of interest, but probably not something that a tourist would have to consider while traveling. So on the highest level we want to indicate the level of concern with very low information resolution and then step by step let the user enrich that signal with more context as needed, right down to a specific source and publication. With this approach we can easily adhere to guidelines that encourage top down interaction, breaking up the content in to smaller hierarchal pieces [4, 10] and let the interaction be very user driven, never imposing more than she is ready to absorb [10]. Notifying the user through push notifications was an option discussed, but since the pre-study participants expressed such restraint with allowing data traffic roaming abroad, it was decided that only new red events should push, and solely at the discretion of the user. Figure 5.2: Time, location and information resolution axis

31 5.1. Concept Development 23 The metaphor of a road signal is used for the visualization of the different levels of concern, with green and the label clear for low concern, yellow with the label important for some concern and red with the label critical for high concern (see Figure 5.3). In essence, different types of events can be categorized to fall under either of these signals, sometimes in combination with reference or event volume, sudden outbursts of reporting in a region normally with low occurrences of that type and with sentiment analysis tracking phrasing regarding violence, lethality, negative attitudes and more. The metaphor is used lightly, with just a reference to known relations between these three colors as it is not actually a road signal, taking care not to over-extend its meaning, as Clark recommends [11]. Figure 5.3: Signals and examples of event types triggering each signal As the focus is things happening in a region at a time, the next level will handle types of happenings, here referred to as events. When a user wants to investigate the reason behind a signal, drilling down one level will expose categories of events that triggered them. This gives more context to if the event might affect the user while traveling, but still requires little focus. The user might already be aware that protests are ongoing and skip reading up on something they feel they covered, while another critical event type like a disease outbreak might be something they want to look into more. Next level breaks down event categories or types into events, listing all events registered under that category. Following that, the user view one event at a time, with higher detail and reference links leading to the actual published source (see Figure 5.4) Dealing with the Future and the Past At the idea stage, while working with the target user group and forming the first frames for the project, the inspirational parallel to a weather application was drawn. An important part of such an application is not only to be able to see what the weather is right now, but also sometime in the future. This is to some extent also possible with the data available for this project, as people write and publish on the web not only text about the past and the present, but of things happening in the future. Enabling the user to move the content intersection of here and now, to here and then, opens up the exploration possibilities, letting her look up what has happened in the region before, for more background, and forecast some

32 24 Chapter 5. Result and Analysis: Application Design Figure 5.4: Information resolution level description, top level from left, drill down steps consecutively to the right of what the future might hold, for preparation (see Figure 5.5, three leftmost images). When looking further forward or backward in time, the scope of one day at a time seem a little narrow. An alternative view common in calendar applications, showing a full week, was drawn up to support this use case (see Figure 5.5, rightmost image). Figure 5.5: Information resolution level description, top level from left, drill down steps consecutively to the right Following the same line of reasoning, the events taking place where the user is right now is prioritized, but a traveling person might well want to look ahead in planning the next stop at another location or just keeping track of their home town while away. On the horizontal axis the user can now navigate between the places of interest (see Figure 5.6).

33 5.1. Concept Development 25 Figure 5.6: Information resolution level description, top level from left, drill down steps consecutively to the right Interaction and Navigation There are so many possibilities today as to how an application can accept user input for interaction. Gong and Tarasewich think that speech input is a valid solution for devices with small screens [4] and Clarke points out that besides a GPS, a smart phone with a camera can accept image input to enhance location awareness [11]. Speech input technology is becoming more advanced but is still uncommon as a main control for users without visual deficiencies, probably because there are so many situations where speaking loud is inappropriate, like libraries. Gong and Tarasewich acknowledges this when speaking of design for multiple and dynamic contexts [4]. Not even counting accelerometers, ambient light sensors, magnetometers, proximity sensors and gyroscopes the multi touch screen has really widened the design space for designers with only the number of combinations of fingers, noses and tongues attached to users as a limit to what is possible. Clark go into depth about interaction with touch interfaces and advertises restraint when working with gestures, especially multi touch. He claims that screen interaction beyond tap, double tap and swipe go widely unused for a large group of people and that gestures involving more than one hand feels awkward to many, taking pinch versus double tap to zoom as an example. On top of this, it is generally more complicated to describe when to use a more complex gesture and what that gesture means to the user. The swipe gesture is not far from scrolling up and down on a desktop or flipping a page in a book, but the significance of a four finger swipe and the cue for that gesture is still hard to describe or imply with an icon, movement or metaphor [11]. A couple of popular applications with many users from Apples appstore, made for reading collections of text or looking up the weather, were investigated to find some good common solutions and influential legacy user models: Gmail (mail client) [21], Facebook (social media platform) [22], Yahoo weather (weather application, winner of Apple Design Award 2013) [23], Week cal (calendar) [24] and Feedly (niche news reader) [25]. This consideration is supported by Savio and Braitenman that emphasize that experiences from prior technologies affect user expectations [10] and by Shneiderman that describes a strive for consistency as a useful guideline when designing interfaces. This consistency should persist within an application, across platforms and to some extent across different

34 26 Chapter 5. Result and Analysis: Application Design applications [3]. With this said, if everyone adhered too strongly to existing solutions, nothing new would ever be created. Below we present some decisions around interaction style and navigation that can be related to above mentioned applications. Main Menu placement In the Gmail, Facebook, Yahoo weather and Feedly applications, the section navigation, settings and other options slide in from the left (see Figure 5.7). In all but Feedly, the shadows and movement of the overlaying objects suggest that the menu is hidden behind the other objects and revealed when those objects are moved. In Feedly the menu is pulled over and on top of the other objects. Clark calls this reducing chrome, where controls are hidden and pulled forth when needed, reducing clutter on the screen [11]. It is arguable wether this actually is a hidden control, and not just another view, as the major part of the screen is covered and the actions in the menu are taken outside the scope of the hidden view, not on it. It does support the user in staying in context, not really leaving what she was doing but putting it to the side while doing something else. All applications use the same kind of icon for this behavior and the menu can be opened by all except Yahoo weather both by tapping the icon and swiping from left to right, Yahoo weather only by tap. This is an example of applying Shnediermans idea of catering to universal usability, where a slightly more obscure but comfortable action used by proficient users like left to right swipe can be supported by another entry point like a tap on a button or icon, familiar to almost any user [3]. This behavior was something we used in our design for location management and settings, as it was the most prominent shared feature between the studied applications. Figure 5.7: Menu sliding in. From the left: Gmail, Facebook, Yahoo wather and Feedly applications. Horizontal Navigation and Swipe All of the investigates applications stack content laterally and let users scroll with swipe in that direction to see what can not fit into one screen. In Gmail, Week Cal and Yahoo

35 5.1. Concept Development 27 weather there is also different ways of scrolling horizontally with swipe actions to reach content that have the same hierarchal position as the content viewed. In Gmail, the list of mail can be traversed with horizontal swipe when you open up the full text, with Week cal this is how you skip back and forth in time, and in Yahoo weather this is another way to switch location for the weather report. Week cal has discreet screen switching where the screens animate a horizontal movement as a reaction to a swipe, whereas the other two lets the user control the transition, actually gripping the canvases and moving them left or right with direct manipulation, an interaction term introduced and advertised by Shnedierman [26] (see Figure 5.8). Figure 5.8: Content placed horizontally and accessed by swipe. From the left: Gmail, Week Cal and Yahoo weather applications. The extensive use of swipe in general throughout these applications suggests that this is one of the main strategies for easy interaction, often supported with more classical button tap entry points. As Clark points out, fingers are not sharp tools compared to mouse pointers and it is easy to mistap even big enough buttons and hit areas. The swipe can be done with a one hand grip on the device and requires little precision [11]. Norman discusses the misuse of the term affordance in interface design claiming the digital world is mostly about conventions. He makes a distinction between different types of constraints and conventions: Physical, logical and cultural. A physical constraint can be restricting the user from moving a cursor outside defined screen location. A logical constraint is there to guide behavior, for example by letting text continue without a page break to indicate that scrolling will reveal more content further down. A cultural constraint or convention is something shared by a cultural group, something learned and accepted [27]. It is possible that the book metaphor of flipping pages applied to reading applications on devices like Kindle and ipad has helped making the horizontal swipe such a pervasive navigational gesture, now an example of a cultural convention. This interaction model goes well together with the dimensions time, place and information resolution presented in the earlier parts of this chapter. To keep screens very clean and uncluttered, as advised by Clark as well as Norman [11,27], we also decided to spread out content on the same hierarchal level on the horizontal axis together with location. To guide the users behavior with a logical constraint, we allow the content available on the horizontal axis to peek a little, hinting that it can be swiped into focus (see Figure 5.9). The location switch can be done by menu navigation as well as by swipe.

36 28 Chapter 5. Result and Analysis: Application Design Figure 5.9: Content and navgiation axis as navigation model Transitions and Layers to support Content Structure As mentioned in the section about the menu sliding in from the left, there are ways to signal what is considered on top or under something with shadows, what is hidden to the left or right with peeking elements and horizontal movement, and give a sense of direct manipulation with gestures. We argue that by designing transitions with care, we can enforce a relationship between the views and elements on those views, giving a spatial comprehension of the application content (see Figure). This theory is related to Shneidermans idea of supporting the internal locus of control, where actions are initiated by the users and have expected consequences, never leading into long input sessions, loops or dead ends [3]. We want the user to have an understanding of the content relationships and hierarchy after tinkering a while with the application. This conceptual model of a large canvas, but a small window centered on only parts of that canvas can be found in the guidelines for Windows Phone and Windows Metro development, a model designed with content applications in mind [6] (see Figure 5.10). Clark points out that most applications on handheld devices are for consuming content, not doing as with traditional desktop products, and that with this follows other priorities and opportunities. A content application is more about fresh content and smooth interaction [11] Aesthetics, Trend and Personality Donald Norman, that for years stresses that usability is the key for good product design has dedicated a whole book to the value of emotion, identity and visceral qualities in successful design [13], Gong and Tarasewich call it to design for enjoyment [4] and even Shneiderman suggests appropriate colors for interface design [3]. Design guidelines for iphone, Windows Phone and Google all discuss the importance of good looks but also the dangers with too much flair [5 7], or as Clark puts it: Personality is important but too much of it can be

37 5.1. Concept Development 29 Figure 5.10: Content canvas with the screen as a window focusing on just part of the canvas. really annoying [11]. What is considered beautiful, trendy, elegant and clean does not come with a recipe and does not always stay the same. When Apple released its first iphone it was well received and the native elements praised for look and feel. Now we would argue that Windows Phone and Android has a more modern take and Apple is soon to release a whole new look to keep up with consumers expectations or move ahead [28]. It is not easy to put a finger on what these qualities are, especially when talking about trend. The recommendations when developing applications are often to adhere to conventions and the native behavior and look of standard elements present in that environment [5 7]. At the same time, we see that neither of the applications developed for the iphone discussed in this chapter really look like Apple advertise an app in appstore should look like. One of the biggest differences when comparing those recommendations with the applications presented here is the use of heavy gradients, sometimes even skeumorphistic object representations, something that seem to be less popular today. With skeumorphistic we mean for example a digital notebook that look like a worn physical notebook with torn corners and page flipping animations, and as you can see in the figure below, the native iphone application Alarm has much bolder gradients compared to the other very flat buttons and menus (see Figure 5.11). One could argue that moving away from bold gradients that clearly resemble three dimensional objects that we know can be pressed and pushed is a purely aesthetically based choice, prioritizing prevalent trend at the expense of function. Even so, sexy trumps out dated in the design of this concept too. Another thing worth noting is the choice of font, where Gmail, Yahoo weather, Feedly

38 30 Chapter 5. Result and Analysis: Application Design and Facebook all use fonts that are more condensed and lightweight compared to Alarm and Week cal (see Figure 5.11). With higher resolution screens on the market, lightweight fonts are now more readable than they were when the first iphone was launched, perhaps a contributing part of that trend in fonts. Looking at the style of icons, Alarm has more detailed icons whereas the others use more stylistic, simple ones (see Figure 5.11). Clark observes however, that in the case of both native, widely used icons and custom made alike, many users misunderstand the meaning of them, suggesting direct interaction with content as often as possible. With this he means for example tapping on a picture to see a larger version instead of on a zoom-icon next to the image [11]. As controls and gestures were mapped out to reach all views and actions for this design, the early versions of the final icons were developed. This exposed an issue with the menu sliding in from the left. An icon to toggle between week and day mode already had its given place on the start screen and the stylistic three line icon for the sliding menu convention was hard to separate conceptually from any simplistic depiction of a week view. A map pin icon was placed in the top left corner instead of a three line icon, as most of the options and settings accessed were location oriented. The design sketches in the following sections are influenced by the above observations of gradient usage, iconography, typography and content interaction, but strives for a personality of its own. Figure 5.11: To the left: Skeumorphism,heavy gradients, detailed icons and Arial regular font in native iphone application. Three images to the right (Gmail, Yahoo weather and Feedly): Flat design, simplistic icons, condensed lightweight fonts. 5.2 Design Description Below a full description of the concept is presented from the top of the information hierarchy and down. See the hierarchy map for an overview (see Figure 5.12).

39 5.2. Design Description 31 Figure 5.12: Application hierarchy Start level (top) Starting the application the user see the signal and label representing the highest concern for the place she is in at that time. If that signal is red, that bar is visible in fullscreen. If additional events with lower level of concern has been registered, those events are placed under either orange or green sections, available for drill down after left to right swiping the bar or text area (see Figure 5.13). Figure 5.13: Signal section switching. The location is communicated with a label in the top menu and by a picture harvested from Flickr with tags near that position, newest available date and open distribution rights. Swiping left or right on the background image switches location if there is a location history (see Figure 5.14). The top right corner has a week icon animating a horizontal flip of the view, displaying

40 32 Chapter 5. Result and Analysis: Application Design Figure 5.14: Location history switching. the week view. From the week view the user can either tap the top right icon to toggle back to day mode or tap any of the weekdays displayed to toggle to that specific day (see Figure 5.15). Figure 5.15: Day view to Week view toggle with horizontal flip. The date is communicated with a label and the user can scroll back and forth in time to reveal past and future signals, in either day or week mode (see Figure 5.16). The top left corner has a map pin icon sliding a location managing tools and settings view from the left (see Figure 5.17).

41 5.2. Design Description 33 Figure 5.16: Timeline scrolling. Figure 5.17: Menu sliding in from left Event type level (first) To find out more about the signal, tap the signal to drill down. The signal bar slide up to reveal the event categories under that signal. On this layer, the user can swipe horizontally to find the event categories under the orange and green signal (see Figure 5.18). The thinner signal bars with event category labels are sized relatively to give a sense of the volume of events behind that signal. In the above figure, there are more events of the

42 34 Chapter 5. Result and Analysis: Application Design Figure 5.18: Information drill down from top layer. category armed attack than man-made disaster and violent protest. To see more information about the events grouped in the red signal, toggle the top right connections icon. For each event category a pie chart displays the distribution of social media and established source reports behind the events. Known entities like people, companies and organizations mentioned together with the event are listed with a link to Wikipedia, as well as the most used Twitter-hashtags and links to open Twitter with a search on that hashtag (see Figure 5.19). Figure 5.19: Aggregated information toggle with horizontal flip.

43 5.2. Design Description Event list level (second) To see each registered event under an event category, tap the event bar to drill down to a list with each event, first reporting sources named, number of references and one text fragment that was registered as this event. The events listed under the other event categories can be reached by swiping horizontally (see Figure 5.20). Figure 5.20: Information drill down from first layer Event level (third) To learn more about a specific event, tap that event to drill down to a list of sources, source type distribution pie chart and an additional text fragment in original publication langue if other than English. The twenty sources first to report the event are listed with direct links to each publication (see Figure 5.21). To navigate back from any drill down, tap the arrow icon in the top left corner of all sub levels or, when the view is scrolled to the bottom, scroll further to close that view layer. The signal bar and event bar have three states visualized with levels of opacity. Full opacity signifies new and not yet viewed events, medium opacity signifies updated events with new references and low opacity signifies viewed events. On the event list and event layer this information is supported with labels. This means that the user can look into events in the morning, turning some or all bars pale and viewed, and the next time they open the application, already on the first screen see if something new has happened (see Figure 5.22) Cache and Data Traffic Settings) From the top layer menu sliding in from the left, the user can access settings to cache some locations in the background when wifi is available. There is also the option to allow some locations to refresh via 3G (see Figure 5.23).

44 36 Chapter 5. Result and Analysis: Application Design Figure 5.21: Information drill down from second layer. Figure 5.22: Back navigation First time User Experience To introduce new users, a small walkthrough was designed for the user tests to simulate a first time user experience. On launch, the option to automatically fetch the current position or to manually fill it in is presented. Then a quick description of the signal, basic operations of content swiping, time swiping, location swiping and information drilling is showcased step by step. Together with the earlier mentioned options to tap or swipe to take the same action, for example when closing a view layer, this is a way to cater to universal usability as promoted by Shnedierman, a way to make expert as novice users comfortable in the system [3].

45 5.2. Design Description 37 Figure 5.23: Back navigation.