wiki:GUIGuide

Version 6 (modified by Luke, 9 years ago) (diff)

Add Finger Friendliness section, Do some formatting

[Rui]: THIS GUI GUIDE IS A DRAFT I'M WRITING, SHR HAS NOT SUBSCRIBED IT (BUT I HOPE IT WILL).

SHR GUI Guide

This guide has information on how to create graphical user interfaces for small screens, namely when the window manager behaves as Enlightenment (with Illume2).

Clear Design

Whenever possible, try to hide buttons, toolbars, and other unimportant GUI elements.

Focus on what your application is for, and use the screen as best as you can.

As an example, here's ElmDentica?'s main screen. ElmDentica is a StatusNet client application, mainly focused on Identica, which is a distributed and federated Twitter like clone, which is Free Software (yay).

ElmDentica's main window.

The *main* action most people do with such an application is not posting, (that's the second most important action) but reading, so the screen area is dedicated to showing as much as possible of the statuses list.

An image viewing program should display images on full window, preferably autorotating the image so it fits the best possible way to the screen's dimensions.

See Touching Events for some more suggestions.

No Close or Quit Buttons

Do not use a close button. It will only hurt the No UI Clutter principle. SHR has a softkey which will provide as a nice way to close windows. It's that X in the picture below:

SHR's Elm SoftKey

Do not use a quit button. Unless your application has several windows, they won't help a lot. If you do have one such button, make it really quit, not just close the window.


Touch

Finger Friendliness

Keep in mind that most handsets today (e.g. htcleo, nexusone in SHR) have capacitive touchscreen which require finger friendliness from the GUI. Please do not include very small surfaces and avoid surfaces that have small borders to neighboring surfaces. When developing on a device with resistive TS please do not forget that -it will allow for broader use of your program.

The current SHR on screen keyboards are a good example of what to not do. An additional keyboard layout must be created to suite the needs of devices with capacitive touchscreens. See this example: http://www.androidtapp.com/wp-content/uploads/2008/12/chompsms-on-screen-keyboard-type.jpg

Touch behavior

Use press and hold (click and hold) events for popping up stuff. Preferably contextual stuff to *where* one presses.

Use touch events (click) for showing up hidden stuff in certain areas (like No UI Clutter).

Gestures

When possible, use gestures that make sense (eg, viewing images, swipe in a direction for previous, the other for next).

Idea: Implement Ubuntu's gesture API

Attachments (2)

Download all attachments as: .zip