User Experience and App Design Guidelines

Good user experience and design is crucial to the creation of a high quality app. Without a compelling and easy to use interface, users will simply not use the app no matter how functional it is under the hood.

User Experience

In general, apps:

  • Need to be easy to use 
  • Have a logical application flow 
  • Should provide a compelling experience that could be interesting or exciting to the user
  • Need to look professional, fun, visually stimulating from a graphics perspective.

Visual Quality

The application should display graphics, text and other UI elements without noticeable distortion, blurring or pixilation. 

The application should provide high-quality graphics for all targeted screen sizes and form factors, including for larger-screen devices such as tablets.

There should be no visible aliasing at the edges of menus, buttons and other UI elements.

The application should display text and text blocks in an acceptable manner. 

Composition should be acceptable in all supported form factors, including for larger-screen devices such as tablets.

There should be sufficient spacing between text and surrounding elements.

Multiple display format handling

Where the device and application can display in multiple formats (e.g. portrait / landscape, internal , the elements of the application should be correctly formatted in all display environments, with the application displaying correctly without obvious errors in all formats. 

If the application is supposed to be used ONLY in landscape mode, then the application should be forced so that it cannot be rotated to portrait mode. The same applies to applications intended to be run in ONLY portrait mode.

Differing screen sizes and device formats

 Where the application is designed to work on multiple devices it must be able to display correctly on differing screen sizes. In particular, tablet devices now offer a significantly larger range of screen sizes and also the likelihood of the user predominantly using the device in landscape mode, so developers should make use of the following detailed recommendations.

Optimise layouts and other UI components for each targeted screen configuration. Take full advantage of the additional screen area available on tablets.

Initially adjust layout, fonts and spacing to help your existing layouts work on smaller tablets.

Redesign the UI with a multi-pane layout, improved navigation and additional content for larger tablet displays 

Provide custom layouts for larger screens, detect the screen

Provide custom layouts for larger screens, detect the screen size where possible and load them based on detecting the screen size or shortest dimension.

For tablet devices with larger screens used in landscape orientation, adjust the positioning of UI controls to be near to the sides of the screen within easy reach for the user (for example; consider thumb radius of movement for controls when a tablet is held in both hands).

Padding of UI elements needs to be larger on tablet screens for optimum appearance.

Make sure content is adequately padded to keep it away from the edges of the display on tablet size displays. 

Avoid layouts that look stretched on widescreen format landscape displays: 

Work to an absolute maximum of 100 characters per line, but bear in mind that

best results will come from targeting 50 – 75 characters per line.

Lists and menus should not use the full screen width.

If padding of onscreen elements does not prevent a stretched appearance, switch to a multi-pane UI for large landscape screens. 

When adopting a multi-pane UI, look at information you might have displayed in sequential screens on a smaller display, and see whether that information would be suited to displaying in separate panes of a new UI on a large landscape display.

Use alternative bitmap assets (e.g. icons) to give the best results on different screen

densities. Icons that will appear in OS areas outside the app itself, such as launchers and notification areas, should:

  1. Meet any recommended design guidelines for the platform.
  2. Be of a size matching other icons deployed in these areas on the platform.
  3. Appear similar in size and design whether the icon is viewed on a large or small.

Note: If the user experience is sufficiently divergent across devices, then you need to create different games to accommodate the devices. 

Spelling errors

The Application should be free of spelling or language errors unless they are part of a deliberate design concept

Technical text errors

The text in the application should be clear and readable. The application should be free of technical text display issues such as: Text cut off / Text overlapping, and all text in each target language should be displayed without corruption, distortion or other display problems.

Problems to avoid are:

  • Menu item text labels incorrectly aligned with cursor.

  • Button text label over-running the button area or truncated such that its meaning is not clear.

  • Text over-running or being truncated in other bounded text display areas (e.g. speech bubbles, user interface elements etc.).

  • Multiple pieces of text overlapping each other, or text overlapping user interface elements.

  • Text being cut horizontally.

Application stability

The application should not crash, unexpectedly close, freeze or otherwise behave abnormally at any time while running on any targeted device.