Information visualisation andinterfaces for

Mobile Devices

Over the last few years, we have seen the emergence of the smartphone as not just a communication device but an information provider and personal manager.

Over the next few years, we can expect these types of phone to become the basic devices of tomorrow. The mobile is changing how people interact with each other both at work and in their leisure.

Contents

• Introduction:– visualization and mobility;– distinctive aspects of the mobile context

• Designing mobile visualizations:– Steps of the design process;– Typical issues;– Research results.

• Future Trends.

• Visual Interfaces for the mobile design process.

Visualization andMobile Devices

• People are used to relying on visualizations to better understand problems and to take better decisions in less time.

• Visual interfaces have an increasingly important role in most computing application domains.

• It is natural to think about bringing visual interfaces to mobile devices such as PDAs and mobile phones to harness the power of visualizations “anytime, anywhere”.

• Unfortunately, limitations of mobile devices and distinctive aspects of the mobile context make it impossible to follow a traditional design approach.

Mobile visualizations:what is different between PC’s and PDA’s?

PDA’s:– Limited displays (small size, low resolution, less colors,…)– Different Width/Height ratio– Less powerful hardware (CPU, memory,...)– Limited input peripherals (keypad, joystick, rollers,…)

– Different input techniques (Hand-writingrecognition software, “point-and-click” on touch-screens,…)– Slower connectivity– Limited hardware and software support for graphicsSome of these limitations are not likely to disappear in the near future because mobile devices need to remain compact in size and energy efficient.

Mobile visualizations:Issues to consider

– Extremely variable physical environment;

– Different or new applications and services needed;

– Scarce attention, interruptions, using the device is typically not the primarytask (users have less cognitive resources available);

– “Interaction in 4-second bursts”

– Safety issues, e.g. risks of distraction caused by mobile devices to drivers

Traditional design issues v. mobile device design issues

Traditional strategies in safety-critical domains (aviation, nuclear power,…):

Change the user: NO!• Skill acquisition, training can be arranged

Change the task: YES, but…

• Change the display design to suit the user

What about the mobile devices domain?We need interfaces that require very little training and can be used by the general public. Design for limited displays.

The Visual Display of Information on Mobile Devices

• The design of a mobile visualization must be a disciplined process

• MAPPING• SELECTION• PRESENTATION• INTERACTIVITY• HUMAN FACTORS

Checklist for Visualization

• MAPPING: How should we visually encode information?

• SELECTION: among the data available, what is relevant tothe chosen task?

• PRESENTATION: How should we lay out the visualizationon the available display space?

• INTERACTIVITY: What tools should we provide to exploreand rearrange the visualization?

• HUMAN FACTORS: Are we taking into account humanperception capabilities? Are we taking into account whatmental models our users easily develop? Are we taking into account users prior experiences?

• EVALUATION: How should we test that the visualization isreally effective with users on the considered task?

MappingMAPPING: How should we visually encode information?

• Examples of possible visual features:

– Type of Object - Color– Length - Intensity– Width - Transparency– Depth - Icon– Size - Movement– Position - Speed– Orientation - Flicker– Curvature - Animation

Simple Mapping Example

Point Of Interest IconPOI Location Position

Mapping

• Two common failures:– Fancy, impressive graphics… that nobody understands;– Apparently intuitive graphics… that mislead users.

• Two general principles:– A precise mapping between data objects (+ theirrelations) and visual objects (+ their relations) must be explicitly defined and consistently applied throughout the application.

The Selection problem

SELECTION: among the data available, what is relevant to the chosen task ?

• Example: mobile city guides

The Presentation Problem

Too much data for too little a display area !!

The Presentation Problem

Losing global context when examining details

Possible Solutions

PRESENTATION: How should we lay out the visualizationon the available display space ?

• Scrolling: the trivial solution; it has serious navigationproblems and completely hides context.

• Abstraction: provides context but hides details.

• Switching among multiple screens: navigation problems,either context or details are shown.

• Overview + Detail approaches: provide two separate viewssimultaneously, one for the context, one for the details.

Overview + Detail

Is Overview + Detail useful on Mobile Devices?

• Overview + Detail is useful on desktop systems, see e.g.Google Maps, Google Earth,…

• Limited screen space of mobile devices could seriously limit the effectiveness of Overview + Detail in the mobile context:– the overview could be too small– the overview could be difficult to read– a larger overview would subtract precious space to thedetail view.

Results of user tests carried out with Maps, Web Pages and Diagrams.

• Maps: Overview + Detail significantly improved user’s performance with respect to a single view• Web Sites and Diagrams: no significant differences in performance• Users preferred to have an overview on Maps and Diagrams

InteractivityINTERACTIVITY: What tools should we provide to explore and rearrange the visualization ?

Example: visual dynamic queries– The visualization is updated in real-time as the user specifies/changes preferences by pointing, dragging and tapping

“Designing user interfaces for mobile devices poses unique challenges relative to design for traditional desktop applications. The most significant of these is reduced screen size.”

To maximize the number of questions and solutions visible at one time on a small display, we created a summary "reasoning" screen with abbreviated questions and solutions.

The abbreviated questions provided enough detail for physicians to answer most questions directly, without having to access the full text of the question (a tap away).

Research showed that users of a related desktop application got more value from the tool, if multiple questions and solutions were displayed simultaneously.

New trends for Mobile Visualization and PDA Design

• Mobile Visualization has so far mostly concentrated on the struggleagainst the issues described in the previous slides, tackling typicalproblems of the Information Visualization area (InfoVis), but in amore complex setting

• However, Mobile Visualization should also explore aspects whichare not typical of InfoVis, for example on a PC, but are crucial for mobile users, e.g.

– Designing for the masses. Unlike PCs, mobile phones areregularly used by almost everybody. A generic mobile user is not likelyto be attracted by (or even be able to use) visualizations whichare instead considered effective in traditional InfoVis settings

– Aesthetics, Fun, Engagement. Mobile phone users are notlooking for efficiency and effectiveness only. They are looking for a fun, cool experience too!

http://www.youtube.com/watch?v=K0Ta-wAdvh8&feature=player_embedded

http://www.youtube.com/watch?v=24r6q4clez8

Sprint HTC EVO 4G Android WiMax Smartphone Demo at CTIA (7 mins)

InvenSense MotionProcessing™ Technology Demo (3 mins)

Mobile devices and HCI - Where is it all going?Some interesting ideas: