INFORMATION IN CROSS-MEDIA: FROM DESKTOP TO MOBILE The case of marine traffic: Designing a website for mobile phones !
UNIVERSITY OF THE AEGEAN DEPARTMENT OF PRODUCT & SYSTEMS DESIGN ENGINEERING
user!!interaction!! ultimate!! people!! news!!!
micro-blogging!!effectively!!mobile!one!! thorough!!grounding!! achieved!! online!!making!! prototyping!! Applications!! knowledge!!!internet!!! industries!!! render!!!poor!!!usability!!! needs!!! life!!!! every!!!! style!!!!draws!!!! devices!!
against!
needed!
new! users!majority!products! problem! technology!evaluate!position!communication!Technology-first!many!Cross-Media!versions! anymore!networking!need! establish!propose!
collect!space!contributed!design!sites!approach!blogging!evolution!context! content!countries!identify! current!affordable! gathering!principles!used!concept! Real! Web!increased!designing! offer!Time!existing!mobility!Phones!order!different!developed!Indisputably!moment!focused!produce!handle!information!map! goal! able! find!others!established! kind!traffic!designs! solutions!finding!requirements!nowadays! rapid! show! protocols!constrains!creation!much!methods!project!marine!anywhere! population! thesis! created!User-Experience!understanding!providing! experience!service!usability!solution!alternative!optimal! Human-Computer!social! use!accessible!medium! process!
penetration!
satellite!
services!trends! finds! User-centered!searching!
possibilities!

! 2 2
UNIVERSITY OF THE AEGEAN DEPARTMENT OF PRODUCT & SYSTEMS DESIGN ENGINEERING

Undergraduate thesis for the Department of Product & Systems Design Engineering B.Eng. degree:
INFORMATION IN CROSS-MEDIA: FROM DESKTOP TO MOBILE The case of marine traffic: Designing a website for mobile phones by Papadopoulou Anastasia-Evangelia




Supervisor: Jenny Darzentas
Examiners: Jenny Darzentas Dimitrios Lekkas Evangelos Vlachogiannis



Syros 2010

! 3 3
!!!!!!!!!!!! In the end there was no possible reason for anything…

! 4 4
ABSTRACT
Current web trends such as social networking, blogging, micro-blogging, news trackers and many others have led to the creation of the “Real Time Web”. “Real Time web is the concept of searching for and finding information online as it is produced.” The marine traffic web-service is considered to be a project of this kind, providing information about current vessels position in real time visualized in a map. Indisputably, rapid technological evolution in mobile phone industry, communication protocols, wireless LANs and satellite services, has contributed to a new life style, where mobility is apparent in every single moment. Both mobile devices and services are affordable nowadays to the majority of the population in developed countries, making information accessible anywhere and at any time. People do not have to find information anymore, information finds them… but how much of it can they handle? The need for mobile versions of existing web sites and services has arisen with the increased penetration of mobile devices. However, findings show that many mobile sites offer poor designs suffering in usability. This is mostly because, until recently, the mobile industries have created those products with a “technology-first” approach. A more “user-centered” approach is used in the current thesis in order to render the user able to collect, process and disseminate needed information to produce understanding. Thus a better user experience is achieved. This thesis draws on the knowledge of established technology s possibilities, constrains, and design principles in order to conduct a user survey using gathering methods to provide a thorough grounding in information design and information architecture for a mobile website design of the marine traffic project. It is focused on understanding the problem space and users in order to identify needs for the use of an existing service (marine traffic) on a different medium (mobile phone) modelling the possible critical contexts of use. The ultimate goal is to collect data from the survey, analyse them effectively and interpret them in a way that can lead to establishing requirements, approaching an optimal solution to the problem, laying the foundations for a future implementation and revealing new issues to be explored.
KEYWORDS: Information Design, Interaction Design, Design, User-Experience, User-Centered Design, Human-Computer Interaction, Mobile Phones, Mobile Web, Mobile Internet Applications, Cross-Media

! 5 5
TABLE OF CONTENTS
COPYRIGHTS ______________________________________ 14!STRUCTURE ______________________________________ 15!INTRODUCTION ____________________________________ 16!THESIS STATEMENT 17!CASE STUDY: “MARINE TRAFFIC” OVERVIEW 18!MOTIVATION & CHALLENGES 20!OBJECTIVES 21!RESEARCH METHODOLOGY 22!DATA ACQUISITION | METHODS & TOOLS USED 23!CASE STUDY S FRAMEWORK 24!BASIC CONCEPTS 27!USER EXPERIENCE 27!INFORMATION DESIGN 29!INFORMATION ARCHITECTURE 31!WAYFINDING ON WEBSITES: NAVIGATION 32!ANALYSING THE PROBLEM SPACE THROUGH LITERATURE _____ 33!THE MOBILE ECOSYSTEM 34!THE WEB, THE MOBILE WEB AND THE VISION OF “ONE WEB” 34!WHAT IS A MOBILE DEVICE 35!MOBILE PHONE TYPES 36!OTHER MOBILE DEVICE TYPES 37!TYPES OF MOBILE APPLICATIONS 38!THE NATURE OF MOBILE COMPUTING 40!THE MOBILE CONTEXT 48!MOBILE USERS IN THE WILD 55!THOSE STRANGERS 55!MOBILE USER CHARACTERISTICS 55!WHAT REPORTS SAY ABOUT MOBILE USERS 57!WEB INFORMATION CLASSIFICATION 62!INFORMATION NEEDS ON-THE-GO 64!TASKFLOW IN MOBILE DEVICES 69!INFORMATION MANAGEMENT ACROSS MULTIPLE DEVICES 70!
1!
2!

! 6 6
TOWARDS A SOLUTION 71!PROBLEMS DERIVING 71!OVERCOMING LIMITATIONS 75!DESIGN GUIDELINES | BEST PRACTICES 84!ANALYSING THE CASE STUDY __________________________ 88!SIMILAR APPLICATIONS 89!ON THE WEB 90!ON THE MOBILE WEB 91!ON THE WEB AND THE MOBILE WEB 95!INTERFACE WALK-THROUGH 97!REPRESENTATION 97!STRUCTURE 100!NAVIGATION 105!CONTENT 109!UNDERSTANDING THE USERS 118!IDENTIFYING & ANALYSING STAKEHOLDERS ‒ USER GROUPS 119!WEB ANALYTICS 120!SEMI-STRUCTURED INTERVIEWS 121!QUESTIONNAIRE 126!CONCLUDING & DISCUSSING FURTHER __________________ 140!CONTEXTS OF USE 141!MODELLING CRITICAL CONTEXTS 141!RE-DESIGN ISSUES 145!SUMMARISING MARINE TRAFFIC SITE S USAGE 145!SUGGESTED STRUCTURE & NAVIGATION 149!SUGGESTED CONTENT 150!SUGGESTED REPRESENTATION 153!FINDINGS 154!CURRENT THESIS OVERVIEW 154!FURTHER RESEARCH 155!THE FUTURE OF MOBILE COMPUTING 156!


3!
4!

! 7 7
ANNEXES FAQ ABOUT MARINE TRAFFIC ________________________ 157!AIS (AUTOMATIC IDENTIFICATION SYSTEM) 158!LAW REGULATION, MARITIME SECURITY 161!INTERVIEWS _____________________________________ 162!RESPONSES 163!QUESTIONNAIRE __________________________________ 175!RAW DATA 176!ANALYSING COLLECTED DATA ________________________ 204!AFFINITY DIAGRAM 205 APPENDICES TERMS _________________________________________ 206!ABBREVIATIONS 207!GLOSSARY 208!RESOURCES _____________________________________ 210!REFERENCES 211!BIBLIOGRAPHY 219!TOOLS 227!HEATMAP ANALYSIS 227!MOBILE-READY TESTING TOOLS 227!MOBILE ECOSYSTEM 227!ONLINE QUESTIONNAIRES 227!SIMULATION TOOLS 227!WEB ANALYTIC TOOLS 227!WIREFRAMING 227!
A!B!C!D!
"!
""!

! 8 8
LIST OF FIGURES
Figure 1: How the MarineTraffic site collects its data 18!Figure 2: Marine Traffic home page 19!Figure 3: User Centered Design Process 22!Figure 4: Garrett s 2002 elements of user experience 24!Figure 5: Morville s 2004 user experience honeycomb 28!Figure 6: Information design hierarchy of needs 30!Figure 7: IA: Users, Content and Context 31!Figure 8: Example of a native mobile application 38!Figure 9: Example of a mobile web application 39!Figure 10: Example of an sms mobile application 39!Figure 11: Model of mobile informatics 49!Figure 12: Context feature space 49!Figure 13: The structure of context of mobile internet 50!Figure 14: 3D context space 50!Figure 15: The overlapping spheres of mobile interaction 51!Figure 16: User Context 52!Figure 17: Context Space 52!Figure 18: Three kinds of mobile modalities 53!Figure 19: Generation Y chooses the mobile web Q1 57!Figure 20: Generation Y chooses the mobile web Q2 57!Figure 21: Generation Y chooses the mobile web Q3 58!Figure 22: Generation Y chooses the mobile web Q4 58!Figure 23: The composition of the wireless population 59!Figure 24: Travel activities initiated from mobile devices 59!Figure 25: Mobile Web users distribution by age 60!Figure 26: Mobile web users distribution by gender 60!Figure 27: The three mobile data user segments 61!

! 9 9
Figure 28: Web information classification 62!Figure 29: Online behaviour in 2010 63!Figure 30: Mobile web usage clustered around two contexts 64!Figure 31: Relationship between topics and goals/intent. 66!Figure 32: The effect of network types on mobile web usage 67!Figure 33: Visualizing points of interest for mobile maps. 74!Figure 34: Google s Mobilizer 77!Figure 35: Marine Traffic through Google s mobilizer 77!Figure 36: Opera mini content adaptation 78!Figure 37: Marine Traffic viewed in fullscreen 79!Figure 38: Desktop screen resolutions comparison 80!Figure 39: Desktop vs. mobile screen resolutions 82!Figure 40: Css media queries example 83!Figure 41: Example of responsive web design 83!Figure 42: Live train map for the London Underground 90!Figure 43: Tube map (iPhone app). 91!Figure 44: Augmented reality iPhone ship app. 92!Figure 45: Ship Tracking app 93!Figure 46: Real-Time Social Media with location 94!Figure 47: Fightradar app 95!Figure 48: Google maps with current location and POIs 96!Figure 49: Mobile Google maps with current location 96!Figure 50: Marine Traffic s Heat-Map 97!Figure 51: Marine Traffic s mobile version overview 98!Figure 52: Notation & Display options of Marine Traffic 99!Figure 53: Marine Traffic s Wireframe 100!Figure 54: Marine Traffic s Interface | Home Page 101!Figure 55: Marine Traffic s Interface | Vessels Page 102!Figure 56: Marine Traffic s Interface | Ports Page 103!Figure 57: Marine Traffic s Interface | Gallery s Page 104!

! 12 12
LIST OF TABLES Table 1: Methods Used (Maguire s 2001 taxonomy) 23!Table 2: Comparing mobile to desktop computing 41!Table 3: Modalities and technologies 53!Table 4: The dimensions and perspectives of mobility 54!Table 5: Mobility tasks vs. mobile HCI tasks 54!Table 6: Web goal-based time spend using a desktop 63!Table 7: Associating goals/intent with location context 65!Table 8: Reason for use of mobile phone 67!Table 9: Location of mobile use 67!Table 10: How mobile needs are addressed 68!Table 11: Why postponing to address mobile needs 68!Table 12: Why mobile needs are not addressed 68!Table 13: Managing task disruptions 69!Table 14: Better phones perform better 72!Table 15: Marine Traffic s navigational and search options 106!Table 16: Marine Traffic s content priorities 150!Table 17: Group 1 – Travel Agencies Responses 163!Table 18: Group 2 – Non-Frequent Travelers - Responses 166!Table 19: Group 3 – Frequent Travelers - Responses 170!Table 20: Raw data, Step 1, Q1 176!Table 21: Raw data, Step 1, Q2 177!Table 22: Raw data, Step 1, Q3 178!Table 23: Raw data, Step 1, Q4 179!Table 24: Raw data, Step 1, Q5 180!Table 25: Raw data, Step 1, Q6 181!Table 26: Raw data, Step 2, Q1 182!Table 27: Raw data, Step 2, Q2 183!Table 28: Raw data, Step 2, Q3 184!

!! 14
COPYRIGHTS
The Department of Product and Systems Design Engineering (University of the Aegean, Greece) currently hosts the project of Marine Traffic. The project can be found in: http://www.marinetraffic.com/ (English version) http://syros-observer.aegean.gr/ais/ (Greek version) Contact e-mail:
marinetraffic@aegean.gr Google Group public discussion: http://groups.google.com/group/marine-traffic

Read about Terms of Use and Copyright: http://www.marinetraffic.com/ais/terms.aspx

PART 1: INTRODUCTION
! 18 18 18
CASE STUDY: “MARINE TRAFFIC” OVERVIEW Marine traffic is an academic, open, community-based project. It is dedicated in collecting and presenting data about ship routes and ports, which are presented to the public in real-time through a web site, visualized with the help of Google Maps. The incentive behind this site was the Automatic Identification System (AIS), a system originally created to aid in ship navigation and collision avoidance, as well as assist port authorities to better control sea traffic. However, as AIS transponders that most vessels are required to carry, include a Global Positioning System (GPS) receiver, which collects position and movement details, AIS can serve other uses, too. As vessels and base stations are able to receive data transmitted by any AIS transponder, marine traffic eventually expanded over numerous AIS receivers offered by supporters of the project around the world, and finally managed to be able to receive data from ships almost in every spot of the sea.
Figure 1: How the MarineTraffic site collects its data Vessels with an AIS transponder can send encoded messages that include:
Dynamic information: vessel position, speed, status, course and rate of turn.
Static information: vessel name, dimensions, IMO number, MMSI number.
Voyage-specific information: destination, estimated time of arrival (ETA) and draught.
How data “travel” from a vessel to marine traffic s web page.
Thesis Statement

PART 1: INTRODUCTION
! 19 19 19
The data collected are stored inside data bases in real-time and after process are displayed in the web site pictured below:
Figure 2: Marine Traffic home page SITE OBJECTIVES The main intention of marine traffic is to provide information to travellers, observers or any other party interested. Internet users can only use data provided for informational reasons but by no means to ensure safety of navigation. Due to the real-time nature of the project, information provided may be incomplete, obsolete or contain errors, and, thus, cannot substitute the on-board safety equipment and of course, good seamanship. The system is exclusively based on information received by vessels, as transmitted by their AIS transponders. Consequently, correct configuration of AIS transponders by the crew is very important. Specifically, the officer who is responsible for the operation of the AIS transponder can significantly help in the correct presentation of the vessel's information, by updating and checking all info transmitted. Therefore information published by marine traffic over the web cannot and should not be used to enhance safety at sea [Marine Traffic 2008]. (See Appendix A for law regulations and technical information related to the marine traffic project.)
The front page of the Marine Traffic web site retrieved June 10, 2010 from: http://www.marinetraffic.com
Thesis Statement

PART 1: INTRODUCTION
! 21 21 21
OBJECTIVES One of the main objectives is to produce understanding of the mobile web, its use and its users. Concepts and lines are vague, the myths around mobile web are many, and the first thing that needs to be done is to familiarize readers with the basic concepts used in this thesis so that we can have a common background for reference. With a review on literature, reports of current state and similar cases we can have an insight of who those users might be; why they access the web from mobile devices, what are they usually looking for, what they could possibly want in the near future to have and many more. As far as the case of the marine traffic project is concerned there are many things that need to be explored and understood. Marine traffic began as a very plain site built around a very simple idea – the exploitation of the AIS- transmitted data for a different purpose; an informational one. From the beginning of its existence until today many features were added; functionality, interface and information representation were changed and improved in many ways from the initial version. And despite the thousands of daily visits an evaluation of the site or a thorough study on why it is so successful, what are its weaknesses and its strengths, what users like about it –or what they don t- what they think of it and what they expect from its use, etc., were never conducted. All those are essential matters that we need to understand before we begin designing the mobile version of the site. We need to understand what needs are covered at the moment to examine afterwards if those needs are also crucial in a mobile context of use or in what way they vary. Understanding users behaviour and beliefs both in an “abstract” way (from reports and literature) as well as in an “applied” one (from findings in the particular case of the marine traffic) can lead to a set of functional specifications and content requirements capable of revealing potential issues for redesign a current website and the first steps to handle the design of the mobile website. The final objective is to ensure that data collected can be “translated” into usable guidelines that will in future work improve the current site and create a mobile version aligned to the desktop one. In conclusion findings are presented and discussed about the revealed context of use exploring possible cases generalization of the survey conducted may apply.
Thesis Statement

PART 1: INTRODUCTION
! 24 24 24
CASE STUDY S FRAMEWORK The “elements of user experience” [Garrett 2002] is a very useful framework specialized in a particular kind of product, namely, web sites and was used in the marine traffic s study in order to aid focus on users and information design during the design process. The importance of this framework lies in the way it guides you through its component elements to support conscious decisions with the intended impact on every action the user is likely to make on a site. By breaking down into those components and then fitting them all together, the problem is in the end better understood as a whole. Creating an experience instead of an artifact requires a deliberate way of thinking about design. Garret visualized the considerations that go into creating great user experiences as a set of five planes along a continuum, from abstract to concrete [Garrett 2006].

Figure 4: Garrett s 2002 elements of user experience Within each of these five planes, additional detailed considerations are taken into account, all dealing with the duality in the nature of the Web. Some products are primarily functional, existing to enable a user to perform a task or accomplish a goal; those considerations appear on the left, treating the Web as software interface. Other products are primarily informational, existing to communicate to a user; those elements appear on the right, treating the Web as hypertext information spaces. But a diverse and ever-larger group of web sites has both functional and informational aspects, such as –in our case– the project of marine traffic. In order to cover the questions posed by this thesis, understanding user needs is the main concern in order to observe the impact the upper planes will have while using a desktop computer versus a mobile device, especially in terms of information architecture, information design and navigation design.
The five planes –strategy, scope, structure, skeleton, and surface- consist the elements of user experience that provide a conceptual framework for talking about user experience problems and the tools used to solve them.
Research Methodology

PART 1: INTRODUCTION
! 28 28 28
Definition by interaction-design.org: "User Experience is the quality of experience a person has when interacting with a specific design” [Knemeyer and Svoboda 2007]. Wikipedia s Definition: “User experience is about how a person feels about using a system, product or service. User experience highlights the experiential, affective, meaningful and valuable aspects of human-computer interaction (HCI) and product ownership, but it also covers a person s perceptions of the practical aspects such as utility, ease of use and efficiency of the system. User experience is subjective in nature, because it is about an individual s performance, feelings and thoughts about the system. User experience is dynamic, because it changes over time as the circumstances change” [User Experience 2010]. Peter [Morville 2004] takes Garret s framework [Garret 2002] one step further, focusing on explaining user experience with facets referring to information:













Figure 5: Morville s 2004 user experience honeycomb Analysing what information design is in the next subchapter, it is becoming clear how user experience is related to information.
User Experience facets: Useful, Usable, Findable, Valuable, Credible, Desirable, Accessible information.
useful
usable ! !valuable!!"!findable!! !credible!!"!!
accessible !!
desirable!!
Basic Concepts

PART 1: INTRODUCTION
! 29 29 29
INFORMATION DESIGN Information design is an activity old as humanity but was new as an idea back in the 80 s introduced in fields of illustration, printing, advertising and publishing, requiring interdisciplinary skills, as today User Experience is for the digital world. Predictions then were highlighting the forthcoming importance of information design: “The new information age will require many information designers. They will have to be capable of taking into account information users as part of their professional activity” [Sless 1997]. As communication evolved and systems became digital, online, real-time or lately mobile, many things have changed, new constraints were added from 1985 onward and, still, there is no unified definition of information design. This is partly because it is a complicated process (nowadays included within the general design process) dealing with turning complex information to easier, an intermediary step between information and understanding; and partly because there are no standard or safe solutions that could work in every case. Definitions through time contain successively new notions, not only about media and technology but also about users:
“Information design is concerned with making all types of information accessible and usable by people” [Sless 1992].
“Information design should enhance our society s ability to:
collect process disseminate
and to produce understanding” [Jacobson 1999].
“Information is the result of processing, manipulating and organizing data in a way that adds to the knowledge of the person receiving it. Design is the identifying of a problem and the intellectual creative effort of an originator, manifesting itself in drawings or plans which include schemes and specifications. Accordingly, information design is the defining, planning, and shaping of the contents of a message and the environments in which it is presented, with the intention to satisfy the information needs of the intended recipients” [IIID 2000].
“In order to satisfy the information needs of the indented receivers information design comprises analysis, planning, presentation and understanding of a message –its content,
Information
Basic Concepts

PART 1: INTRODUCTION
! 30 30 30
language and form. Regardless of the selected medium, a well designed information set will satisfy aesthetics, economics, ergonomic, as well as subject matter requirements” [Pettersson 2002].
“Information design comes down to making decisions about how to present information so that people can use it or understand it more easily” [Garrett 2002].
“Information design is the skill and practice of preparing information so people can use it with efficiency and effectiveness. Where the data is complex or unstructured, a visual representation can express its meaning more clearly to the viewer” [Information Design 2010]. A number of attempts have been made in the past in order to come up with a set of attributes that would lead to high quality of information [Wang et. al 1996], [IIID 2000]. However this was before the existence of user experience. We could rearrange the proposed facets of [Morville 2004] into a hierarchy of importance, having in mind user s needs:









Figure 6: Information design hierarchy of needs In terms of web design, Information design, it is concerned with the clarity information and with enhancing the understanding of your site s navigation and content [Kalbach 2007]. Cooper et.al in their book take information design a step further introducing the term of visual information design4, in order to emphasize in web design. “Visual information designers are concerned with the visualization of data, content, and navigation rather than interactive functions” [Cooper et.al 2007].
VALUABLE DESIRABLE USEFUL CREDIBLE USABLE FINDABLE ACCESSIBLE
4
Although these are not the original meanings, many use the term of information design referring to visual layout whereas the term information architecture is used to address issues of content. [Fling 2009], [Garret 2002]
Moving (bottom-up) from basic requirements information must have to be accessed to the point where it becomes desirable and valuable. Based on design hierarchy of needs [Bradley 2010]
Basic functionality, information can be retrieved.
Users can find what they need by interacting with the site, through navigation and locatable objects.
Ease of use remains vital. Usability is necessary, but not sufficient.
Users trust and believe the information a site gives them.
Users will use the information.
Users want the information.

Design is perceived to be of the highest level. Ultimate goal INFORMATION:
Design perceived to have little to no value.
Basic Concepts

PART 1: INTRODUCTION
! 31 31 31
INFORMATION ARCHITECTURE Information architecture is the process of developing the information structure of the site, aiming at the creation of an effective system and a good user experience [Garrett 2002]. Mobile Information Architecture consists of four elements: Representation, Structure, Navigation, and Content: Representation refers to the visual presentation of information. It consists of several aspects such as how efficiently information is shown on the LCD panel of mobile devices, how easy it is to read the presented information, and how densely information is presented to the users. Structure means how well the Mobile Internet service is organized. It includes subcomponents such as the relevance of menu categorization, the appropriateness of menu labels, and the adequate order of menu sequence. Navigation indicates how efficiently the procedures of the Mobile Internet service are designed. The subcomponents of Navigation include how easy it is to learn the procedure, how easy it is to move services other than those available at the time. Content indicates how relevantly the information is provided under particular contexts. Sub-components of Content include how effectively the information is given, how reliable the information is, and how often the information is updated. [Kim et. al 2002] A more classic approach is that in order to define information architecture the three following areas have to be defined [Morville & Rosenfeld 2006]:







Figure 7: IA: Users, Content and Context
Basic Concepts
Users Content

Context
IA
Information Architecture areas of practice

PART 1: INTRODUCTION
! 32 32 32
WAYFINDING ON WEBSITES: NAVIGATION One important function information design and navigation design work together to perform is to support wayfinding. The idea of wayfinding may come from the design of public spaces in physical worlds but it also makes sense on websites through navigation. The navigation systems employed by a site not only have to provide access to the different areas of the site; they also have to communicate those choices successfully. Good wayfinding enables users to quickly get a mental picture of where they are, where they can go, and which choices will get them closer to their objectives. The information design component of wayfinding also involves page elements that don t perform a navigational function. Icons, labelling systems, and typography are other information design systems sometimes used to help reinforce a sense of “you are here” for users [Garret 2002]. People won't use a web site if they can't find their way around it [Krug 2000]. They won t use features they can t find and will not explore the potential of a site fully if they can t understand what actions are possible to be done from their current state; it s not only a matter of location.

Basic Concepts

PART 2: ANALYZING THE PROBLEM SPACE THROUGH LITERATURE
! 35 35 35
The Mobile Ecosystem WHAT IS A MOBILE DEVICE It is really difficult to categorize each mobile device under one specific type as many questions arise in the way: Is it a “feature” phone? Is it a smartphone? Is it a handheld? Is it a netbook? Is it a music player? Is it an e-book reader? Is it a tablet? And, finally, does the term mobile device have the same meaning today compared with when the first ones appeared? In 2002, Weiss wrote: “Handheld devices are extremely portable, self-contained information management and communication devices. A candidate must pass three tests to be considered a handheld device:
it must operate without cables, except temporarily (recharging, synchronizing with a desktop)
it must be easily used while in one s hands, not resting on a table
it must allow the addition of applications or support Internet connectivity [wireless application protocol (WAP), i-mode, or email] The tests eliminate laptop computers and non-computer portable consumer electronics devices such as MP3 players” [Weiss, 2002]. In 2006 Jones & Marsden declare: “Mobile means more than mobile phone : handhelds, wearables, badges, RFID tags and even implants will play an important part in the future” [Jones, Marsden 2006]. A much more recent approach to define what a mobile device is done by Firtman in 2010:
“a mobile device has the following features:
It s portable
It s personal
It s with you almost all the time
It s easy and fast to use
It has some kind of network connection” [Firtman 2010]. This kind of a definition eliminates several devices from being “mobile”. A netbook would require from someone to sit down and open it in order to use it, therefore it wouldn t be so easy and fast to use, plus, it isn t so portable. Somewhere in between would also be tablets, like the iPad; it s not so portable either. For the purposes of this thesis, let s consider only those devices you could carry in your pocket; the mobile phones.

PART 2: ANALYZING THE PROBLEM SPACE THROUGH LITERATURE
! 36 36 36
The Mobile Ecosystem MOBILE PHONE TYPES Until the end of the 1990s, there were two types of handheld device that supported quite different sets of user needs: there were the mobile phones, for communication, and PDAs or handhelds, for information management [Weiss 2002]. However with the new, sophisticated models of mobile devices, those two merged into one. Apart from making calls, mobile phones have other features too. According to those features and mainly web compatibility Firtman has proposed the most recent categorization in 2010: MOBILE PHONES There are still some old devices in the market that are just “mobile phones”, meaning they support only calls and sms. They don t have web browsers or connectivity, and they don t have any installation possibilities. These phones don t really interest us; we can t do anything for them. In a couple of years, because of device recycling, such phones will probably not be on the market anymore. LOW-END MOBILE DEVICES 5 Low-end mobile devices have web support, it is typically only a very basic browser, but this is the gross market. People who buy these kinds of devices don t tend to be heavy Internet users, but this may change quickly with the advent of social networks and the mobile web. They do not have touch support, have limited memory, and include only a very basic camera and a basic music player. MID-END MOBILE DEVICES5 Mid-end devices typically offer a medium-sized screen, basic HTML-browser support, sometimes 3G, a decent camera, a music player, games, and application support. One of their characteristics is that they don t have a well-known OSs; they have proprietary one. HIGH-END MOBILE DEVICES Originally the same category as smartphones, high-end devices are non-multitouch but have advanced features (like an accelerometer, a good camera, and bluetooth) and relatively good web support. They are better than mid-end devices but not on a par with smartphones. SMARTPHONES This is the most difficult category to define. Why aren t some mid-end and high-end devices considered “smart” enough to be in this category? The definition of smart evolves every
5
Many consider low-end and mid-end mobile devices to form only one category: the feature phone. These devices account for the vast majority of the market (at least 85% in some statistics). They offer horrible usability, enabling only minimal interaction with websites. [Nielsen 2009]

PART 2: ANALYZING THE PROBLEM SPACE THROUGH LITERATURE
! 39 39 39
The Mobile Ecosystem
! ! !


Figure 9: Example of a mobile web application On the other hand mobile apps need to be downloaded and installed, if supported by the users mobile device. In other words, they can not be accessed by all, contrary to the mobile web. Content is accessible on any mobile web browser and although supporting multiple devices can be challenging, it is not impossible, but it usually means sacrificing the optimal experience high-end devices can provide to support low-end ones [Fling 2009]. However the mobile web and installable applications are not enemies. In fact, when both supported, they work together very well complementary [Firtman 2010].
Figure 10: Example of an sms mobile application
Facebook as a web app has 3 different versions, with different URLs: (1) touch.facebook.com (2) m.facebook.com and (3) 0.facebook.com that is free of charge for most of the providers.
(1) (2) (3)
Facebook as an sms app on an iphone

PART 2: ANALYZING THE PROBLEM SPACE THROUGH LITERATURE
! 40 40 40
The Mobile Ecosystem THE NATURE OF MOBILE COMPUTING DEVICE LIMITATIONS Entering this new era of innovation, we also need to consider what is different when accessing the web with those small mobile devices that are small enough to fit in a pocket and may be used while simultaneously walking around and interacting with the world. There are some well-known constraints we must take into consideration when designing for the mobile world -mostly surrounding a device s form factor and physical user interface. In the next table all those constraints and new characteristics compared to what we knew about the desktop computing are gathered in order to understand the difference between those two media in terms of:
Addressable Users
Reasons of use
Form
Screen size
Screen Resolution
Internet Connection
Hardware
Input
Interaction
Available fonts and colours
Web Standards
Physical Constraints | Environment
Browsing
This table combines information from several resources; books written by: [Weiss 2002], [Jones & Marsden 2006], [Ballard 2007], [Moll 2008], [Fling 2009], [Gail & Lal 2009], [Firtman 2010], papers written by: [Chincholle et. al 2002], [Lee & Grice 2003], [Shrestha 2007], [Sohn et. al 2008], [Reichenbancher 2009], journals written by: [Jones 1999], [Aaron & Chen 2002], [Chalmers et. al 2004], [Freitas & Levene 2005], [Chittaro 2006], [Heeae et. al 2007], and numerous web pages, to mention just a few, written by: [Suda 2006], [Waele 2006], [Suda 2009] [Nielsen 2009], [Nielsen et. al 2009], [Nudelman 2010]. On the one hand some of the limitations mentioned in older resources are no longer valid for mobile devices produced today but do apply in some cases as a large portion of users possess old phones, or just feature phones6. On the other hand, some of these limitations are not likely to disappear in the near future because mobile devices need to remain compact in size and energy-efficient [DotMobi 2008].
6
However traffic share is reversely proportional to the number of those phones. Most traffic is generated by smartphones, by 46% in May 2010 [AdMob 2010]

PART 2: ANALYZING THE PROBLEM SPACE THROUGH LITERATURE
! 41 41 41
The Mobile Ecosystem Table 2: Comparing mobile to desktop computing
DESKTOP MOBILE
Addressable Users
3 billion mobile subscriptions worldwide 1 billion total netbooks, desktops and servers
Reasons for Use
Lengthy information processing tasks On-the-go lookup and entry of information. Quick communication, such as instant messaging and/or voice
Form Factor
Requires a table; best used while seated. Sometimes portable. Less than 10" 12". Can be used standing up without a table, typically fitting in a shirt pocket.
Screen Size
Large Screen (17”, 19”,21”, up to 30”)
Plenty of space for navigation
Desk-mounted monitor
Good quality screens (with many dots per inch-dpi)
“Landscape” width/height ratio
Small Screen (1”-3” inches)
Limited Navigation Space
Screen jolting around
Usually low quality screens (with limited pixels per inch-ppi), except for some high-end phones.
Mostly “portrait” width/height ratio, with latest devices having the ability to present a “landscape” one by rotating the device. Other phones have square screen

PART 2: ANALYZING THE PROBLEM SPACE THROUGH LITERATURE
! 42 42 42
The Mobile Ecosystem Screen Resolution
Nowadays desktop screens resolutions have been standardized:
o 600x800, 1024x768 or 1440x900 for small screens going up to
o 1680x1050, 1600x1200 or even 1920x1080 for HD resolutions of bigger screens, to list but a few
Mobile screens resolutions are not standardized yet (different combinations can be found beginning from 96x65 going up to 640x960 for latest high-end models). But if we talk about devices sold from 2007, we can separate most of them into four basic groups:
o Low-end devices: 128 160 or 128 128
o Mid-end devices: 176 220 or 176 208
o Mid-end devices and some high-end devices: 240 320
o Touch-enabled high-end devices and smartphones: 240 480, 320 480, 360 480, 480 800, 480 854, or 640 960
Internet Connection
Unlimited use
Fast Internet:
o High Bandwidth
o Reliable Internet Connection with no lag or connectivity issues
Cost per byte or per minute limits use
Slow Internet, but improving:
o Low Bandwidth
o Unreliable connectivity with possible lag or/and disconnections

PART 2: ANALYZING THE PROBLEM SPACE THROUGH LITERATURE
! 46 46 46
The Mobile Ecosystem
Physical Constraints | Environment
Have time to browse
Quiet Environment



Have pen & paper to take note
Sitting down
Have separate phone
Focused on task
People are used to the keyboard and mouse, having a better typing speed and accuracy than using phones
Artificially-lit environment
Don t have time to browse
Noisy, interruptible and easily distracting environment:
o even the device itself can interrupt the user from a specific task, with incoming calls or text messages
Hard to take notes
Standing or walking
Phone and web in same device
Multi-tasking
The lack of a standard keyboard and mouse has a significant negative impact on typing speed and accuracy
Various & usually unknown conditions affecting visibility and contrast:
o May be in strong sunlight
o May be in dark
This table shows how biased those two worlds can be. However that might not be 100% correct as the reverse in some cases is also true. For example people using desktop computers might be in a hurry, while sometimes people using mobile phones are idly sitting somewhere and have time to spare. Despite the very long list of differences and limitations, mobile computing also has a potential to satisfy needs which desktop computers couldn t. Those possibilities are discussed in the next sub-chapter, as both possibilities and limitations have implications on designing for the mobile web.
An extensive list of differentiating attributes between mobile and desktop computing

PART 2: ANALYZING THE PROBLEM SPACE THROUGH LITERATURE
! 49 49 49
The Mobile Ecosystem TOWARDS A CONTEXT MODEL The first, but so insightful and representative until today, attempt in modelling the mobile computing was made in 1998, reflecting the ways in which mobile computing differ from using information technology (IT) in stationary settings. Kristoffersen & Ljungberg with their empirical studies of mobile work lay foundation for the concept of context of mobile use raising issues about the suitability of adopting concepts from stationary computing in the design of mobile computing. [Kristoffersen, Ljungberg 1998]







Figure 11: Model of mobile informatics Schmidt et. al in order to structure the concept of context they propose:









Figure 12: Context feature space
Environment
Physical Surrounding Social Surrounding
Modality
Wandering Travelling Visiting
Mobile IT Use Application
Technology Data Program
The purpose of the model is to provide a framework of concepts to produce understanding on how people use the information technology in mobile settings. Environment and modality are used to explain the particularities of the mobile setting. Environment is the physical and social surroundings; modality is the fundamental patterns of motion.
Six categories are defined to provide a general structure for context. Within each category relevant features can be identified..

PART 2: ANALYZING THE PROBLEM SPACE THROUGH LITERATURE
! 51 51 51
The Mobile Ecosystem Savio and Braiterman visualize the mobile context with overlapping spheres of different elements appearing in previous work [Savio, Braiterman 2007].












! Figure 15: The overlapping spheres of mobile interaction Goker and Myrhaug published several papers while working on modeling with a UML approach. In general, they supported that we can speak of many different types of contexts, depending on the entity of actor the context is intended for:
Contexts describing a user’s situation should be named user context;
Contexts describing a software s situation should be named software context;
Contexts describing a document s situation should be named document context;
Contexts describing a network s situation should be named network context;
“In order to design for successful mobile interactions, we must understand the overlapping spheres of context in which they take place.”

PART 2: ANALYZING THE PROBLEM SPACE THROUGH LITERATURE
! 53 53 53
The Mobile Ecosystem MOBILITY One of the most crucial aspects of context in mobile computing is mobility itself, as it is a major difference between desktop and mobile computing. It is variable, complex, highly related to mobile computing, and maybe the most important contextual factor relevant to the user [Barnard et. al 2007]. We can assume there are two basic kinds of modalities in mobility: mobile (when you move) and stationary (when you don t move, e.g. when sitting in front of the computer). However this would be partially true, as it would leave several cases that don t fall under either of those two kinds out; in a scenario where someone is travelling inside a train, for example, would we say he/she is mobile or stationary? We usually sit when travelling so this modality could be characterized as stationary but the train itself during the trip is not stationary at all. For this reason, Kristoffersen & Ljungberg, distinguish three modalities in mobile computing: Travelling: the process of going from one place to another in a vehicle Visiting: such as when visiting someone else s place, where a coherent but temporal period of time may be spend stationary Wandering: which involves extensive local mobility/walking around within a building or small area [Kristoffersen, Ljungberg 1998]
! Figure 18: Three kinds of mobile modalities They also assign to these modalities the kind of the devices that could be used in each of them
Table 3: Modalities and technologies
Mobile Portable Desktop 1. Wandering ! ! !2. Travelling ! ! !3. Visiting ! ! !

Wandering Wandering
Travelling Visiting Visiting
Mobile modalities: Travelling, Visiting, Wandering
Combining typical situation with typical technology.
[Kristoffersen, Ljungberg 2000].

PART 2: ANALYZING THE PROBLEM SPACE THROUGH LITERATURE !
! 55
MOBILE USERS IN THE WILD THOSE STRANGERS Although mobile context and mobility have already been analysed, there is a fundamental question still unexplored: who are those mobile users and what information are they looking for through the mobile web? First of all we now know that desktop users have already become a subset of mobile users. Gail and Lal in 2009 mention that there are 3 billion mobile subscribers worldwide and 4.6 billion in 2010 but only 1 billion of notebooks, desktops and servers [Gail & Lal 2009], [Ingram 2010]. We can therefore safely assume that the mobile user is not an expert user [Ballard 2007]. On the same time mobile devices can do many things and users are starting to expect similar levels of functionality and experiences as they get on the desktop web [DotMobi 2008]. MOBILE USER CHARACTERISTICS MOBILE Mobile users are mobile. It is obvious. They are expected to have keys or wallets or bags in their hands or be in a rush, stuck in traffic or even in a silent room using their mobile device instead of their desktop computers…anything is possible. What it is not obvious is how they collect and process information in situations like that, without having present a pencil to write down notes, jumping from application to application on their phones, and how they use their memory with information and content stored on desktop computers that may or may not be remotely available [Ballard 2007], [Dearman &Pierce 2008], [Oulasvirta et. al 2005]. INTERRUPTIBLE AND EASILY DISTRACTED In a breakthrough article Oulasvirta et. al defined mobile interaction as four-second interaction bursts. The mobile user has fragmented attention as he has to perform many tasks, navigate through the physical world, managing obstacles and picking routes while, similarly, navigating through the virtual world, performing text entry, and reading text. Typically, a user attempting both simultaneously will end up performing the tasks in sequence, or in an alternating fashion (see Table 5). Shifting context and navigation conspire with other factors to make the mobile user more interruptible and easily distracted than desktop users [Ballard 2007]. In experiments, as expected, user attention turned towards the physical environment more often when users where under time pressure, or in more crowded places or moving throughout obstacles and busy streets [Oulasvirta et. al 2005]. Comprehension (reading time, response time, scrolling) and search were also affected [Barnard et. al 2007].

PART 2: ANALYZING THE PROBLEM SPACE THROUGH LITERATURE
! 58 58 58
Mobile Users in the Wild

!! Figure 21: Generation Y chooses the mobile web Q3

Figure 22: Generation Y chooses the mobile web Q4 Opera software highlights 2 major points of these results:
Members of Generation Y are not all the same, and cannot be described by simple generalizations. The diversity within Generation Y is especially evident when looking at members of that generation across multiple countries. It is also quite impressive that, except for Germany and Poland, they said they use Opera Mini (on a phone) more often that a desktop or laptop computer to access the Internet.
Would you consider it acceptable for your friends to browse or send text messages on their phones during a restaurant meal?
Which do you use more to access the internet? 10
10
Since all respondents of this survey are Opera Mini users, it is not surprising that many of them use Opera Mini as the most common way they access the Internet.

PART 2: ANALYZING THE PROBLEM SPACE THROUGH LITERATURE
! 60 60 60
Mobile Users in the Wild

Figure 25: Mobile Web users distribution by age
Figure 26: Mobile web users distribution by gender 30-49 year olds interact with content in Finance, Travel and Shopping more frequently than other age groups. This group, however, consumes content on a par with 18-29 year olds in the Media & Entertainment category. People in older age groups, that is, those between 50 and 64 years old access news and other information on a daily basis at a rate on par with 30-49 year olds [Adobe 2010] 12. MOBILE USERS SEGMENTATIONS According to Mace there are 3 groups of users:
Communication-centric
Information centric
Entertainment centric
Distribution of users spending 1 hour or more a week on mobile properties by age.
Distribution of users spending 1 hour or more a week on mobile properties by gender.
12
Survey results are based on online responses from 1,200 U.S. participants surveyed by Keynote Services between August 25 and 30, 2010.

PART 2: ANALYZING THE PROBLEM SPACE THROUGH LITERATURE
! 62 62 62
Mobile Users in the Wild



WEB INFORMATION CLASSIFICATION The Web, mobile or stationary, has drastically changed how we acquire and circulate information. However, as we still lack a solid understanding of the types of activities and tasks in which users engage on the Web, a few researchers began an attempt in order to classify the information people usually need on the stationary web followed later by a relative work for the mobile web. Kellar et. al in 2006, continuing work done by Sellen et.al in 2002, proposed a classification of web information in which information tasks derive from information goals in which users engage on the Web and deal with some aspect of information, from acquisition, consumption, and distribution of information.









Figure 28: Web information classification Information tasks classification is analysed below: Fact Finding consists of tasks in which the goal is to find a specific piece of information. Information Gathering consists of tasks in which the goal is to collect information, often from multiple sources, in order to write a report, make a decision, or become more informed about a particular topic. Browsing consists of tasks in which there is no specific information goal in mind other than, perhaps, entertainment or to see what is new.
Web Information Classification
Information Seeking
Information Exchange
Information Maintenance
Information Goals
Fact Finding
Info Gathering
Browsing
Information Tasks
Transactions Communications Maintenance
Information Goals: Information Seeking, Information Exchange, Information Maintenance Information Tasks: Fact Finding, Info Gathering, Browsing, Transactions, Communications, Maintenance

PART 2: ANALYZING THE PROBLEM SPACE THROUGH LITERATURE
! 63 63 63
Mobile Users in the Wild
Transactions consist of tasks in which an online action takes place, such as banking or a web purchase. Communications consist of tasks that facilitate web-based communication, such as email, online bulletin boards, or web-based publishing such as blog postings. Maintenance tasks generally consist of visits to web pages with the goal of maintaining web resources, such as to ensure that content appears as it should and, that links are working properly, as well as to update to user profiles. Most tasks of this nature occurred when users wanted to update or create new web pages. How time is spent among those information tasks changes from time to time due to various causes. In 2002 the eminent task was information gathering accounted for 53% of all web usage, while in 2006 communication and transaction tasks have become the most frequent task for stationary web users [Kellar et. al 2006], [Sellen et. al 2002]. Table 6: Web goal-based time spend using a desktop Goal 2002 (Sellen) 2006 (Kellar) 1. (Fact) Finding 12% 18.3% 2. Info Gathering 53% 13.5% 3. Browsing 16% 19.9% 4. Communication & 5. Transactions 4% & 2% 46,7% 6. Other (Housekeeping or Maintenance) 13% 1.7% !Things in 2010 have changed even more towards communications [TNS 2010]: !!!!!!!!!!!!!!!!!!! Figure 29: Online behaviour in 2010
Web goal classification and time usage by people in 2002 versus 2006.
% Doing activity daily Number of hours spent on activity per week

PART 2: ANALYZING THE PROBLEM SPACE THROUGH LITERATURE
! 65 65 65
Mobile Users in the Wild
active services was found to vary with pleasure, time on hand, distraction, and social situation. Participants using hedonic–active services such as mobile games more often reported highly pleasant feelings and used them more often when they were not pressed for time, when they were not distracted by external stimuli, and when they were in a private place. The use of utilitarian–passive services was found to vary according to duty, time on hand, distraction, and location. Participants used utilitarian–passive services, such as news reports, more often when they were off duty, when they lacked time, when many external stimuli distracted their attention, and when they were outdoors or on transport. Finally, the use of utilitarian–active services was found to vary with pleasure and duty. Participants using utilitarian–active services such as stock trading reported less pleasant feelings, and used them more often when they were on duty” [Lee et. al 2005]. MOBILE WEB INFORMATION CLASSIFICATION Many researchers, motivated by papers written about stationary web information-activities taxonomies, continued the research towards a classification on mobile web information and informational needs [Cui & Root 2008], [Sohn et. al 2008], [Verkasalo 2008], [Church & Smyth 2009], [Nylander et. al 2009]. Sellen et al in 2002 predicted the future of the mobile Web by examining stationary Web activity taxonomy and argued that Fact finding and Browsing could fit into mobile context, but Information gathering would be “entirely unsuitable” for mobile devices [Sellen et. al 2002]. However there are no relevant empirical researches to prove the prediction so far. Performing diary studies, Church and Smyth, compared goal-intent using a mobile device versus a stationary computer. One important finding that emerged was the importance of context and in particular the location and time of information needs, especially when the user are on the go. The results show that 75% of geographical diary entries are generated when the user is mobile, compared to just 25% when the user is in a non-mobile location context.
Table 7: Associating goals/intent with location context Goal Mobile Non Mobile 1. Informational 64% 36% 2. Geographical 75% 25% 3. Personal Information Management 65% 35% ! Non-mobile refers to entries generated while the user is at home, at work or in college while mobile refers to entries generated in all other instances, e.g. commuting, traveling, etc

PART 2: ANALYZING THE PROBLEM SPACE THROUGH LITERATURE
! 67 67 67
Mobile Users in the Wild
Table 8: Reason for use of mobile phone Reason for mobile phone % No available computer 49% Convenience 24% Laziness 11% Other 5% Internet not working 5% Wanted to use phone 3% Restrictions at work 2% Computer occupied 1% ! Table 9: Location of mobile use Location % Home 31% Outdoors 23% In transit 23% Indoors 16% Work 8% !Much to the researcher s surprise, the most frequent location for mobile Internet access in two studies turned out to be at home even though all participants had a computer with Internet connection in their home. This suggests that, for our participants, the mobile phone has its own role as a device for Internet access. It is not only used in situations where it is impossible to get computer access. The mobile world extends well into the home [Verkasalo 2008], [Nylander et. al 2009]. This is also explained by Cui & Roto as a result of faster network speed [Cui & Roto 2008].
Figure 32: The effect of network types on mobile web usage
Reasons for choosing a mobile phone to access the Internet.
Locations for Internet access from cell phone.
Time Traffic

PART 2: ANALYZING THE PROBLEM SPACE THROUGH LITERATURE
! 69 69 69
Mobile Users in the Wild
TASKFLOW IN MOBILE DEVICES Interruptions in tasks and task switching are common even in desktop computing. Iqbal and Horvitz characterized four phases associated with interruptions to workflow and corresponding recovery and resumption; preparation, diversion, recovery, and resumption. They found that a user might need up to 15 minutes in order to resume an activity on the desktop computer after being interrupted [Iqbal & Horvitz 2007]. As it was not clear whether this model applies to disruption to mobile tasks or not, Karlson et. al conducted a survey for a better understanding of smartphone Taskflow in context by broadly sampling the moments during which flow, and possibly productivity, break down.
Table 13: Managing task disruptions
Follow-up Definition Count Mean Frustration (SD) Computer Moving to a computer to complete the task. 225 2.7 (1.4)
Mobile Persisting with the mobile device to complete the task at a later time. 105 3.7 (1.3)
Abandon Giving up on completing the task, usually because a time-sensitive task became irrelevant once a delay was encountered. 19 3.4 (1.4)
External Using non-technical means for completing the task (e.g. asking someone) 9 3.3 (1.2)

While it was expected from users to be frustrated when having to migrate to another device to complete their task, their data showed that users were in fact more frustrated when having to follow up on the smartphone later. These data reflect that users are more concerned about completing the task, rather than on which device they complete it. Perhaps users low expectations of what they can do on a smartphone blunt their frustration in having to move to a PC to complete the task, especially if a PC is nearby and they can work more efficiently on it. While users perform similar types of tasks on phones and PCs, evidence show that users partition stages of the same task across phones and PCs; and the fact that many of these switches are strategic suggests that they should be supported, not eliminated [Karlson et. al 2010].
Follow-up categories with their associated count and mean user frustration levels with (standard deviations - SD) 1=”Not frustrated at all, 5=”Very frustrated” 1=”No time pressure”, 5=”As soon as possible”

PART 2: ANALYZING THE PROBLEM SPACE THROUGH LITERATURE
! 73 73 73
Towards a solution
Navigation
The navigation structure of a desktop site (the number of items per page and the number of levels in that site) might be enough to cover the whole screen of the mobile phone.
In case content is divided into smaller displayable chunks, navigation steps will be more requiring from the user to move backward and forward [Parush & Nirit 2007]. Representation & Structure
Inconsistencies
Graphics and colours
Pagination issues Another important thing that needs to be taken into account is the existence of two main groups of users: expert and novice ones. Benbunan and Benbunanfich tested theories of Norman [Norman, 1981] and Reason [Reason, 1990] on human errors, where well designed artifacts reduce the need for users to remember large amounts of information, while poorly designed artifacts increase the demands on the users and therefore increase the likelihood of errors; but this time in the mobile context in order to understand mobile user s errors. In their research, two types of errors occur:
Mistakes due to a mismatch between the user s understanding of the artifact and the actual design of such artifact
Slips due to a deviation between the user s intentions and the execution of the correct action sequence. Consequently, for well designed applications:
Expert Users
o Make mostly errors that tend to be “action slips”, while
Novice Users
o Make mostly errors that tend to be “mistakes” [Benbunan, Benbunanfich 2007].

PART 2: ANALYZING THE PROBLEM SPACE THROUGH LITERATURE
! 74 74 74
Towards a solution
PROBLEMS IN MAP-BASED APPLICATIONS Maps are a different type of content that may not be accessible from all mobile devices as older or low-end devices do not support them and for those that are able to render them, a high-speed connection is needed to get them loaded. Navigating a map is often an issue as interacting with a map is different from browsing a site and findability might be a problem as search becomes more difficult. In the worst case scenario the user will have to “scan” a large area of a map to locate what he needs. In the best case scenario a search field, filters to display only certain type of information or/and the ability to find his/her current location will be available. In terms of presentation, maps in mobile devices may have more usability issues than maps appearing on the large screen of a desktop computer. A common problem in maps is that an icon might appear “almost” in the same spot with many others, creating overlays and making them very difficult to select without zooming-in. This problem is getting more serious in mobile maps due to the lack of space to display the icons. Moreover when you zoon enough in order to be able to click one of them, probably no other nearby icons will fit on the screen [Chittaro 2006], [Church & Smyth 2008], [Church 2010].
!!!!!!!!!! !!! Figure 33: Visualizing points of interest for mobile maps. Usual visualization issues in maps: (1) too many icons or (2) not enough icons.
(1) (2)

PART 2: ANALYZING THE PROBLEM SPACE THROUGH LITERATURE
! 76 76 76
Towards a solution
CONTENT ADAPTATION A straightforward approach to fit content on small screens would be to redesign and reconstruct Web pages. However, redesigning hundreds of web pages requires much time, skills and effort. That was the primary reason many [Rist & Brandmeier 2002], [Lee & Grice 2003], [Oquist & Goldstein 2003], [Chalmers et. al 2004], [Parush & Nirit 2004], [Heeae et. al 2007], [Chua & Choi 2008] have focused their research on finding an automatic way of adapting existing web pages from desktop presentation to mobile presentation. The main concept was to detect closely related content, each of which forms a topic within the Web page, and to reorganize those topics in a style suitable for mobile browsing [Ahmadi & Kong 2008]. In general, the related content detection approaches can be classified into two categories: (a) structure-based approaches that analyse the HTML elements and Web page structure [Chen et. al 2001], [Gupta et. al 2003], [Baluja 2006] [Maekawa et. al 2006], and (b) layout-based approaches that analyse the Web page layout [Yang et. al 2000], [Gu et. al 2002], [Burget 2005], [Chen et. al 2005]. After different topics are discovered, logically or semantically, the original layout can be adapted to a different presentation such as a long narrow layout or a set of small pages. One of the most known tools in this category is the mobilizer, provided by Google. Mobilizer is accessible by three ways:
by writing the url of the site that is needed to be mobilized after Google s url for this service: http://www.google.com/gwt/x?u=website address
by visiting mobilizer s page (see Figure 10.1)
by selecting the “mobile formatted” option in the list of results in a Google search (see Figure 10.2) However the results might not always be expected, depending on the page s compliance with web standards. “Weird layouts” or embedded “objects” that will delay a mobile presentation are also factors that make mobilizer return a non representative and difficult to use page. For example, marine traffic, is divided into 3 mobile web pages, or in an 1 with 3 parts when choosing the “zoom-out” option (see Figure 11.1); the whole page appears but a grey box takes the place of the map (see Figure 11.2).

PART 2: ANALYZING THE PROBLEM SPACE THROUGH LITERATURE
! 77 77 77
Towards a solution

Figure 34: Google s Mobilizer
Figure 35: Marine Traffic through Google s mobilizer
(1) (2)
(1) (2)

PART 2: ANALYZING THE PROBLEM SPACE THROUGH LITERATURE
! 81 81 81
Towards a solution
to be presented on different media: on the screen, on paper, with a speech synthesizer, with a braille device, etc. Different media are categorized by W3C as follows:
All: Suitable for all devices.
Braille: Intended for braille tactile feedback devices.
Embossed: Intended for paged braille printers.
Handheld: Intended for handheld devices (typically small screen, limited bandwidth).
Print: Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media for information about formatting issues that are specific to paged media.
Projection: Intended for projected presentations, for example projectors. Please consult the section on paged media for information about formatting issues that are specific to paged media.
Screen: Intended primarily for colour computer screens.
Speech: Intended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for this purpose. See the appendix on aural style sheets for details.
Try: Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities). Authors should not use pixel units with the "tty" media type.
Tv: Intended for television-type devices (low resolution, colour, limited-scrollability screens, sound available). However it turned out that media types could not solve the problem as in many cases were not supported by specific devices. For example apple s devices ignore print and handheld media declarations in css files, because they don t accept the definition of a handheld as a
“limited bandwidth” device; they believe those devices do not supply high-end web content [Apple Developer Library 2010]. Therefore the solution lies on screen media resolution by itself using media queries. A media query consists of expressions that check for the conditions of particular media features [W3C 2010].

PART 2: ANALYZING THE PROBLEM SPACE THROUGH LITERATURE
! 82 82 82
Towards a solution
Media features:
width
height
device-width
device-height
orientation
aspect-ratio
device-aspect-ratio
colour
colour-index
monochrome
resolution
scan
grid











Figure 39: Desktop vs. mobile screen resolutions Using media queries, mostly those that will take device s width and orientation, a responsively designed page will “adapt, respond, overcome” [Marcotte 2010]. Queries are usually declared in a way that resolutions for different screens can be grouped together, as for example in the following page13 especially made to demonstrate responsive design:
Designing for different resolutions: Desktop vs. Mobile. 1600x1200
1440x900 1024x768
600x800 320x480
240x320
120x160
13
example page can be found here:
http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html

PART 2: ANALYZING THE PROBLEM SPACE THROUGH LITERATURE
! 83 83 83
Towards a solution
Figure 40: Css media queries example




!!!!!!!!!!!!!!! Figure 41: Example of responsive web design
(1)
(2) (3)
Example of a responsive web page viewed in the following resolutions: (1) 1440x900 as a common widescreen desktop view (2) 1024x768 as a smaller non-widescreen desktop/laptop view, or the screen of an ipad (3) 320x460 as an iphone screen
@media screen and (max-device-width: 480px){ //alter representation //select to hide or show content }!!@media screen and (max-device-width: 960px){ //alter representation //select to hide or show content } @media screen and (max-device-width: 1920px){ //alter representation //select to hide or show content }
Mobile view
Small desktop, laptop, tablet view
Large desktop view
Changing representation and content using media device-width queries
e

PART 3: ANALYSING THE CASE STUDY
! 90 90 90
Similar applications
ON THE WEB There are numerous web sites with real-time information on traffic or public transport means: trains, busses, airplanes, ships etc. Most of them have a specific search field in order to find information relative only to one thing without being able to have an overview. However, recently, few of them combined data into a map allowing the user to get the bigger picture of the situation, but also interact with it, finding more information for a point of his/her interest. One neat site in this category is a live train map for the London Underground, visualizing stations (red) and moving trains (yellow) with from / to and expected arrival (minutes) on a certain station by clicking on a train.
Figure 42: Live train map for the London Underground PROS
Users can easily have a real-time overview of all trains in London s Underground. CONS
Without a search field it might be difficult to track down a specific route, especially if the user is not familiar with London s stations.
No mobile equivalent for this specific site. Note that sites with no mobile version equivalent are getting fewer over time.
http://traintimes.org.uk/map/tube/

PART 3: ANALYSING THE CASE STUDY
! 93 93 93
Similar applications
Ship tracking is an iPhone application that uses google maps to show location and destination of all ships in the selected area through AIS. Apart from the real-time map it has search options for ships by part of ship name, IMO or MMSI, and for ports by part of port name. Also, an add to “favourites” option is available for ships. By clicking on a ship detailed view is available with: name, type, draught, length, width, navigational status, rate of turn, speed, longitude, latitude, degrees, destination, ETA, Country, recent tracks, history, ship compass and statistics information.
!!! !!! Figure 45: Ship Tracking app PROS
Filters and “favourite ships” option in order to track down fast ships in frequent use.
Overall view in the real-time map
Search options CONS
Real-time map might need a while to load.
Detailed information might be more than needed for certain user-groups.
(1) (2) (1) Map View with real-time vessel s positions (2) Detailed info of a vessel http://itunes.apple.com/app/ship-tracking/id346794782

PART 3: ANALYSING THE CASE STUDY
! 96 96 96
Similar applications
Google, eventually, has integrated “current location” option, not only in google maps (desktop and mobile version) but also in its api, allowing all sites that use it to have similar functions. Pros and cons depend on the application that is based on a google map.
!Figure 48: Google maps with current location and POIs
!! !
Figure 49: Mobile Google maps with current location
(1) (2) (1) Mobile google maps asking to use current location (2) Mobile google maps current location
Google maps asking for current location in order to display nearby points of interest.

PART 3: ANALYSING THE CASE STUDY
! 97
INTERFACE WALK-THROUGH As defined by Garrett in terms of content and structure, interaction design and information architecture share an emphasis on defining patterns and sequences in which options will be presented to users. Interaction design concerns the options involved in performing and completing tasks. Information architecture deals with the options involved in conveying information [Garrett 2002]. Therefore, a first step of analysing the case study would be to analyse the interface and use the site in order to fully explore its potential in terms of representation, structure, content and navigation [Kim et. al 2002]. REPRESENTATION A fast way to check how information s structure affects representation when it comes to findability and attention, is to create a heatmap. A heatmap is a graphical representation of data where the values taken by a variable in a two-dimensional map are represented as colours [Heatmap 2010]. There are two ways to provide data in order to create a heatmap for a site: using eye-tracking while looking at the site or using algorithms to predict eye tracking by visually analysing the elements [Eye Tracking 2010]. For the purposes of this thesis, generating a heatmap using algorithms in order to locate the areas that visually attract attention would be enough.
Figure 50: Marine Traffic s Heat-Map Heatmap generated using http://www.feng-gui.com

PART 3: ANALYSING THE CASE STUDY
! 100 100 100
Interface walk-through
STRUCTURE Marine traffic pages, containing almost the same elements, are relatively consistent:
Home page | Live map,
Vessel s page,
Port s page,
Gallery page.
Figure 53: Marine Traffic s Wireframe
!Elements of each page are analysed in detail below. !!!
Logo Menu: 2nd level Menu: 1st level Main content Additional search/filter options Google Ads

1 2 3 4 5 6
Wireframes reveal the main structure of the site