wiki:GUIGuide

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

reinsert finger (un)friendly examples.

[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

Capacitative touchscreens -operated with a finger instead of stylus- are very popular today (probably more than resistive touchscreens). Please try to avoid including very small surfaces or surfaces that have small margins to neighboring surfaces. This will maintain usability of your GUI on machines with capacitive touchscreens.

Example for a finger friendly GUI element: captainigloo's new illume on screen keyboard with large buttons.
http://imagebin.org/142369

Example for a finger unfriendly GUI element: other illume on screen keyboards designed solely for resistive touchscreens (input with stylus)
http://www.linux-mobile.com/wp-content/uploads/2010/01/shr-freerunner.png

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). You can implement them yourself, or try using an API.

APIs:

  • Ubuntu utouch, but has a problem: patches appear require giving up your copyright to Canonical with a statement that they can be turned into proprietary software instead of promising to maintain it as free software. Complain to Canonical.
  • ...?

Attachments (2)

Download all attachments as: .zip