1. CS 352: Software Engineering-3 Mobile Software Engineering Mobile User Interface Design

2. Software Engineering in Mobile Computing
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
Software Engineering in Mobile Computing

4. 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
Software Engineering in Mobile Computing

5. 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
Software Engineering in Mobile Computing

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
Software Engineering in Mobile Computing

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
Software Engineering in Mobile Computing

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
Software Engineering in Mobile Computing

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
Software Engineering in Mobile Computing

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
Software Engineering in Mobile Computing

11. 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
Software Engineering in Mobile Computing

12. Designing for Gestures
Kamil Cichoń, Janusz Sobecki, and Jerzy M. Szymański 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. 
Software Engineering in Mobile Computing

13. 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
Software Engineering in Mobile Computing

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
Software Engineering in Mobile Computing

15. 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
Software Engineering in Mobile Computing

16. 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.
Software Engineering in Mobile Computing

17. 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
Software Engineering in Mobile Computing

18. 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
Software Engineering in Mobile Computing

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

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

21. Software Engineering in Mobile Computing
Navigation - Tab View
Software Engineering in Mobile Computing

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

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
Software Engineering in Mobile Computing

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

25. Nielsen’s Usability Heuristics
Jakob Nielsen and Rolf Molich 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,  
Software Engineering in Mobile Computing

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

27. Thank you for
your attention.