Perceived User Experience of Interactive Animated Transition

 

Perceived User Experience of Interactive Animated Transitions in Mobile User

Interfaces and Visualisation

 

Animated transitions hold an important part of graphical user interface design practice. They can help to guide users’ attention and highlight changes in the interface. Also Information visualisation research has concentrated thus far on desktop PCs and larger displays while interfaces for more compact mobile device have been neglected. The aim is to investigate how user experience in mobile applications are perceived by different animation principles for animated transition and their visualisation before designing. In addition, the issue of visualisation is addressed by developing a set of low-level interface design guidelines for mobile information visualisation development. This is done by considering a basic set of interactions and relating these to mobile device limitations. The results of various tests on suitability of different animated transitions for the study are reported. The findings provide insights in users’ perception of animation styles, therefore having implications for graphical user interface design practice along with the interface visualisation for different displays.

KEYWORDS

Interface design, visualisation, animation transition, user experience

The beginning of the 21st century has been marked by the proliferation of increasingly powerful mobile computing devices. There are currently over 2.23 billion mobile phone users and over 1.75 billion smartphone users worldwide

meaning that a remarkable 31% of the global population now own a mobile phone and around 25% already have a smartphone [Lee and Lee 2014].Moreover, after Chang and Ungar promoted the use of animation for user interface (UI) design, a controversial debate on its influence on user experience (UX) emerged. Animation has become a standard design element in User Interfaces and figure in design guidelines of leading software companies such as Microsoft, Google and Apple after more than 20 years.

Information visualisations help us to think using data. Information visualisation techniques have been found to be particularly useful for the analysis of large-scale data and complex data in areas such as gene expression analysis and financial data analysis. Indeed, this push towards larger scale data and more complex data analysis is a possible reason why information visualisation research has focused on larger displays, since larger displays are inherently more suitable for larger datasets. Also, Disney’s cartoon animation principles are comparable to design guideline rules and help designing the style of an animation. To evaluate their influence on UX some of these principles have been investigated experimentally.

The perception that there is essentially a proportional relationship between the amount of information that can be displayed in an interface, or at least an interface that is comfortable to use, and the dimensions of the display space. This leads some authors to conclude that a smaller display can only be used effectively for aggregates and overviews of the data [Chittaro 2006]. Animation can be applied to various design cases in User Interfaces. However, only appropriate use can enhance the experience. Different states of a User Interface are connected through the use of animation transition which are considered to be effective in guiding attention and explaining change.

While there is certainly a strong case for limiting our expectations of what can be achieved on mobile devices, it is felt that this needs to be balanced by a realistic evaluation of the potential benefits of mobile device information visualisation and the opportunities to improve mobile interfaces through inventive and thoughtful design. While mobile devices, by their very nature, will continue to have limited display space. Other device limitations such as limited processing and graphics capabilities are rapidly disappearing. And other useful features such as global positioning, tactile feedback and voice recognition are being added. Moreover, the natural application domain of mobile devices has expanded from activities that need to be performed on a mobile device. People are now using increasingly sophisticated applications on mobile devices and application developers need to either cater to this trend or find themselves left behind. This undoubtedly includes information visualisation developers who need to leverage new and improved device capabilities to support mobile visualisation.

To summarize, UX can be influenced positively by animations in User Interfaces, but the perception of it may depend upon its purpose and animation style. A wide range of animation styles are used in the literature on animation and UX which varies in design purpose used in the experimental tasks. With regard to UX within a constant design purpose, thorough comparisons of different animation styles are missing, making it difficult to distinctively evaluate the influence on UX. The changes in perception of UX would be clarified by conducting such a comparable study with animation style. There are indeed a number of researchers who recognize the potential of mobile visualisation and have proposed some useful general guidelines for their design. These tell us that the interface should be simple and user should be able to interact more directly with the data rather than have to operate menus and controls [Lee et al. 2012]. Others suggest that interaction should be fluid and flow seamlessly between different functions

[Robertsetal.2014].

2     EXPERIMENTAL DETAILS, RESULTS AND DISCUSSION

For the underlying study, UX can be defined by relying on the working model as proposed by Hassenzahl. Hassenzahl developed the 2 questionnaire in order to measure perception of users of digital products with regard to pragmatic and hedonic quality as well as the overall goodness and beauty which is called attrakdiff. The attrakdiff lite version, a shortened questionnaire consisting of 10 items is used for the study. Each item consists of adjective pairs that represent opposite poles. 7point Likert-type scale ranging from -3 to +3 is used for rating items.

In the planned study it is sought to clarify how different animation styles influence the perceived User Experience. The research in this area either failed to investigate only parts of objective User Experience or to examine this relation due to its methodological approach. Furthermore, there is very little knowledge about the principles of exaggeration in interface design. Therefore it can be keenly seen whether different animation styles differ in their effect on UX. Further, it has been sought to investigate whether the animation style or its combination with an animated transition are responsible for possible differences in UX.

Also, in this paper guidelines are used to build some case study applications by taking a lower-level approach to consider how specific aspects of information visualisation design should be implemented on mobile devices. This allows us to draft a set of guidelines that can be used to either adapt existing information visualisation applications for mobile use or begin considering which techniques to employ in the design of new applications.

Issues considered while implementation of interaction for development of a set of draft guidelines for mobile visualisation interface design are as follows:

1. Inspection
2. Selecting an object
3. Selecting an area
4. Moving an object
5. Scrolling
6. Entering text

• Be aware of the situations in which the application is likely to be used and  adapt the interface accordingly for sporadic, hands-free or one handed use.
• Use techniques that make more efficient use of available screen space or do not require accurate selections.
• Keep text and selection targets above a constant device specific minimum size and scale other elements of these constraints.
• Don’t display too much information on the screen at the same time.
• Use virtual buttons to switch between different types of selection.
• Don’t allow important information to be hidden by the user’s finger during interaction.

By conducting this study is sought to contribute to the research on User Interface animation with several insights. It is hoped to indicate whether users generally perceive differences in User Experience depending on animation style; know to which dimensions of User Experience, the compared animation styles may contribute; and find whether the animation itself or its combination with a transition is responsible for the evaluation of User experience. Furthermore, it is expected to provide implications for interface design. The insights into the perception of animation could help interface designers to apply animation principles more purposefully to their aim. Our findings could further contribute to the understanding of widespread animated transitions and indicate whether their perception differs between users of different mobile operating systems. Last, it is expected that this study to set the scene for related research on animated transitions, animation style and User Experience in graphical User Interfaces. Also, a set of guidelines for the design of mobile information visualisation applications has been drafted through an analysis of different forms of interaction and device limitations. These guidelines are applied to the design of various applications which use visualisation techniques that can be applied with inaccurate touch-screen selection and, crucially, make the display more interactive to allow the user to view more of the data over time without saturating the limited display space. The additional cognitive load of having to interact more with the data and having less of the data shown at any one time is reduced by using animation to smooth the transition between successive views. These early results suggest that information visualisation on mobile devices can be more capable than it was previously imagined and that interaction and animation will be a key part of the implementation of effective information visualisation interfaces for more challenging data-sets and more demanding user requirements.

UI: User Interface

UX: User Experience

1. Benedikt Merz, Alexandre N. Tuch, Klaus Opwis. Perceived User Experience of Animated Transitions in Mobile User Interfaces(Santa Clara, California, USA-May 07, 2016)
2. Paul Craig. Interactive Animated Mobile Information Visualisation(Kobe, Japan-November 02-06, 2015)
3. Emerging Guidelines for Communicating with Animation in Mobile User Interfaces(Silver Spring, MD, USA-September 23-24, 2016)