Information visualisation and interfaces for Mobile Devices

1. Information visualisation and interfaces for Mobile Devices

2. 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.

3. 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.

4. Visualization and Mobile 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.

5. 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-writing recognition software, “point-and-click” on touch-screens,…) – Slower connectivity – Limited hardware and software support for graphics 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.

6. 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 primary task (users have less cognitive resources available); – “Interaction in 4-second bursts” – Safety issues, e.g. risks of distraction caused by mobile devices to drivers

7. 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.

8. 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

9. Checklist for Visualization • MAPPING: How should we visually encode information? • SELECTION: among the data available, what is relevant to the chosen task? • PRESENTATION: How should we lay out the visualization on the available display space? • INTERACTIVITY: What tools should we provide to explore and rearrange the visualization? • HUMAN FACTORS: Are we taking into account human perception capabilities? Are we taking into account what mental models our users easily develop? Are we taking into account users prior experiences? • EVALUATION: How should we test that the visualization is really effective with users on the considered task?

10. Mapping MAPPING: 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

11. Simple Mapping Example Point Of Interest Icon POI Location Position

12. 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 (+ their relations) and visual objects (+ their relations) must be explicitly defined and consistently applied throughout the application.

13. The Selection problem SELECTION: among the data available, what is relevant to the chosen task ? • Example: mobile city guides

14. The Presentation Problem Too much data for too little a display area !!

15. The Presentation Problem Losing global context when examining details

16. Possible Solutions PRESENTATION: How should we lay out the visualization on the available display space ? • Scrolling: the trivial solution; it has serious navigation problems 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 views simultaneously, one for the context, one for the details.

17. Overview + Detail

18. 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 the detail 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

19. Interactivity INTERACTIVITY: 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

20. “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.”

21. Research showed that users of a related desktop application got more value from the tool, if multiple questions and solutions were displayed simultaneously. 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).

22. New trends for Mobile Visualization and PDA Design • Mobile Visualization has so far mostly concentrated on the struggle against the issues described in the previous slides, tackling typical problems of the Information Visualization area (InfoVis), but in a more complex setting • However, Mobile Visualization should also explore aspects which are 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 are regularly used by almost everybody. A generic mobile user is not likely to be attracted by (or even be able to use) visualizations which are instead considered effective in traditional InfoVis settings – Aesthetics, Fun, Engagement. Mobile phone users are not looking for efficiency and effectiveness only. They are looking for a fun, cool experience too!

23. Mobile devices and HCI - Where is it all going? Some interesting ideas: InvenSenseMotionProcessing™ Technology Demo (3 mins) http://www.youtube.com/watch?v=K0Ta-wAdvh8&feature=player_embedded Sprint HTC EVO 4G Android WiMaxSmartphone Demo at CTIA (7 mins) http://www.youtube.com/watch?v=24r6q4clez8