CS454: Software Engineering-3 Mobile Software Engineering Mobile User Interface Design

1. CS454: Software Engineering-3 Mobile Software EngineeringMobile User Interface Design

2. Introduction Designing an appealing, simple and easy to use user interface is very important for the success of a mobile application. Mobile applications user interface have many peculiarities that don’t exist in desktop and web-based applications. Small screen size, different resolutions and touch and hardware gestures It is important to design a mobile application to be as accessible as possible. Software Engineering in Mobile Computing

3. Software Engineering in Mobile Computing List of topics Effective use of screen real estate Understanding mobile application users The social aspect of mobile Designing for Gestures Accessible mobile GUI Mobile GUI design patterns Nielsen’s Usability Metrics

4. Software Engineering in Mobile Computing Effective use of screen real estate • Embrace Minimalism • Limit available features on screen • Use small, targeted design features • Explain why a feature is taking up its screen space • Use a Visual Hierarchy • Create a hierarchy with position, form, size, shape, color, and contrast • Draw attention to the most important content with visual emphasis • Stay focused • Avoid taking too long for screen loading • Avoid using text-heavy screens

5. Software Engineering in Mobile Computing Understanding mobile application users • Gestalt Principles • Theories of visual perception developed by German psychologists in the 1920s • Describe how the human mind perceives and organizes visual data • Key Principles • Proximity • Closure • Continuity • Figure and ground • Similarity

6. Software Engineering in Mobile Computing Proximity • Objects placed near each other are perceived in groups • Icons with similar tasks may be organized with proximity • Descriptive text should be placed next to graphics

7. Software Engineering in Mobile Computing Closure • Incomplete shapes will be perceived as complete • Used frequently to avoid including unnecessary details • Create icons with a strong primary silhouette, without overloading users on pixelated and overdone details

8. Software Engineering in Mobile Computing Continuity • Viewer’s eye will automatically follow a continuous line • Smooth visual transitions can lead users through a mobile application • A link with an indicator pointing toward the next object and task

9. Software Engineering in Mobile Computing Figure and ground • Mobile applications user interface must separate clearly between the foreground and background • It is recommended to use highly contrasting colors

10. Software Engineering in Mobile Computing Similarity • Similar elements are grouped according to the strong visual perception of color, form, size, and other attributes • Dissimilar objects are emphasized • Layout should encourage proper grouping of objects and ideas

11. Software Engineering in Mobile Computing The Social Aspect of Mobile • Most users want to be connected, and to share something with the world • Support connectivity with existing social networks • A single “Share” button which opens a pop-up box with sharing options is sufficient

12. Software Engineering in Mobile Computing Designing for Gestures KamilCichoń, JanuszSobecki, and Jerzy M. Szymański. 2013. Gesture tracking and recognition in touchscreens usability testing. In Proceedings of the International Conference on Multimedia, Interaction, Design and Innovation (MIDI '13). ACM, New York, NY, USA, , Article 9 , 8 pages. 

13. Software Engineering in Mobile Computing Designing for Gestures • Developers spend time in developing gesture-activated features • Provide an easy way to discover gestures, otherwise average users will be missing them out • Provide a pop-up box to announce the first time each gesture-prompted feature becomes available • Avoid swipe ambiguity: user error rates will be higher if the same swipe gesture can prompt multiple actions on the same screen

14. Software Engineering in Mobile Computing Accessible Mobile GUI • The degree to which an application is useable by people with limited abilities. • Designing accessible applications increases its user base. • Consider the following limited abilities in design: • Hearing • Vision • Speech • Dexterity: difficulty in dealing with fine controls • Cognition: amount of information users must hold in their memory while using the app

15. Software Engineering in Mobile Computing Accessibility - Design • Extraneous information affects accessibility negatively • To minimize the cognitive load for a user, user interface components should be grouped according to common functionality or common usage • The same component must always be used for the same function • For example, when choosing a component that initiates an action, either buttons or hyperlinks should be used, but not both • In components with multiple items to select from, set as a default item the item that a user is most likely to select

16. Software Engineering in Mobile Computing Accessibility - Navigation • If a keypad is present or motion actions are available, users should be able to use them to initiate common actions. • For example, pressing the Enter key or shaking the handset to select a menu item. • In case of a lengthy process with multiple steps, each step should display a list of all steps indicating the completed, in progress and not yet started steps.

17. Software Engineering in Mobile Computing Accessibility – Text, Color and Images • Messages text should be as specific as possible • For example, error messages should indicate the error and actions needed to remedy it • Using colors to indicate meaning is not enough and symbols are better. For example, red exclamation mark for errors. • Colors with higher contrast such as white, yellow, blue and black are preferable • Pictures should be accompanied with textual information that communicates the meaning and context of the picture

18. Software Engineering in Mobile Computing Design Patterns - Views and Navigation • A mobile application is a set of navigable views • A view is a typically rectangular shape that contains user interface elements. • Navigation • Single-view • Navigation bar • Tab view • Search-driven navigation • Gesture-based navigation

19. Software Engineering in Mobile Computing Navigation - Single-view

20. Software Engineering in Mobile Computing Navigation - Stacked Navigation Bar

21. Software Engineering in Mobile Computing Navigation - Tab View

22. Software Engineering in Mobile Computing Navigation - Search-driven Navigation

23. Software Engineering in Mobile Computing Mobile GUI Styles • Skeuomorphic Style • Create applications that mimic existing products • Example: a camera application on most platforms. When a photo is taken, a sound that emulates a camera shutter is played • Note-taking applications that usually designed to look like a pad of papers • Flat style • Tend to remove all decorative elements in the user interface • Produces applications with the minimum number of necessary components

24. Software Engineering in Mobile Computing Mobile GUI Styles – Flat Style

25. Software Engineering in Mobile Computing Nielsen’s Usability Heuristics Jakob Nielsen and Rolf Molich. 1990. Heuristic evaluation of user interfaces. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (CHI '90), Jane Carrasco Chew and John Whiteside (Eds.). ACM, New York, NY, USA, 249-256. 

26. Software Engineering in Mobile Computing References • Chapter 4 -Professional Mobile Application Development, Jeff McWherter and Scott Gowell, John Wiley & Sons, Inc., 2012

27. Thank you for yourattention.