[Graphical User Interfaces: Crash Course Computer Science #26, https://youtu.be/XIGSJshYb90](https://youtu.be/XIGSJshYb90)

Graphical User Interfaces: Crash Course Computer Science #26, https://youtu.be/XIGSJshYb90

Back in 80s, user interface research led to the birth of Xerox Star, the first WIMP (windows, icons, menus, and pointers) user interface, or more commonly known as Graphical User Interface (GUI) (Preece et al., p.161). This opened up new possibilities for users to interact with a system visually. And since 2000s, mobile devices have become pervasive, with people using them in all aspects of their everyday and working lives (Preece et al., p.191).

In this module, we will learn terminologies and design heuristics for mobile user interface, which complements the heuristics that we have already learned in 8. Inspection Methods .

Display and Graphic

Figure 1. Human Interface Guidelines, Adaptivity and Layout (Apple, https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/). Mobile device is pervasive. People could access online contents from their smartphones, tablets, or laptops. Design the user interface to accommodate the diverse devices.

Know the following terms:

Resolution: Resolution means a number of pixels in a given physical space. For instance, screen resolution means how many pixels are placed on a display. A commonly used unit of resolution is pixels per inch (ppi).
Aspect ratio: An aspect ratio is the ratio of the width to the height of an image or screen.
Responsive design: An online document that adheres to responsive design adjusts the placement of its contents depending on the width of the browser window.

Mobile Devices

Image from https://www.interaction-design.org/literature/article/adaptive-vs-responsive-design.

In addition to considering heuristics like error preventions and design simplicity, designing for mobile devices demands us to think in what context people would interact with the user interface. For example, people might use a mobile device while walking or during shopping, and in conjunction while using a laptop computer. Commanding interaction would be different as they would use touch and tap on a display instead of mouse clicks on a laptop computer.

Jenny Gove at Google I/O 2016. Principles of mobile app design: Delight users and drive conversions

In the presentation above, Jenny Gove touches on some good practices for designing mobile applications from Principles of Mobile App Design.

Provide Text Labels and Visual Keys to Clarify Visual Information. Visuals and iconography makes the design of app look appealing and helps some users in their information seeking. But add text labels for consistent and proper interpretation.

Be responsive with visual feedback after significant actions. Provide animation and other types of visual feedback to signify the fact that the system received the command from the user. The heuristic that we have learned earlier (i.e., visibility of system status) already pointed this out, but this is particularly important for a mobile user interface where we cannot assume people's full attention and more error-prone input method (e.g., due to fat-finger problem and occlusion).

Let the user control the level of zoom. Mobile devices have smaller screen real estate compared to laptop and desktop displays. Provide zoom features and let the user control the zoom level.