User Experience/Grand Concept/GUI
Contents
Radical new GUI Designs
- Improving the GUI
- STILL A LOT TO DO/WRITE
Intro
Most of the GUI is based on archaic concepts. Many new developments in the field can radically improve user's experience. Special emphasis should be put into the new web technologies, especially with regards to interactivity and functionality.
Downside of Existing GUI
- many functions are non-intuitive
- poor interactivity
- many prominent functions/buttons/menus are rarely used or useless (see Useless GUI Elements)
- much wasted space, especially in dialogs
- many areas are badly organized, making the dialog poorly functional, instead of organizing the dialog into functional areas
- often used features should be grouped together
- dialogs are monochrome, although the human being has a color vision (see Colour Vision)
- the human eye is most sensitive to the colour green
Colour Vision
The human eye is adapted to colour vision. It is therefore strange that so many programs use a monochrome GUI.
While it is true, that colour blindness can impede optimal viewing of a coloured GUI, there are some elements that need to be discussed:
- red-green colour blindness is the most frequent form, affecting ~4% of males (different values for different populations and an order of magnitude less in women)
- there are many other forms of colour blindness, including any of the 3 basic colours and any combination thereof (although less often)
- Vitamin A deficiency:
- giving poor vision in the dark (poor monochromatic vision)
- probably quite often encountered in developing nations
- the human eye is most sensitive to the colour green (for people without a green-blindness)
- colour vision is also affected by the brightness: in a dim environment, human vision will behave monochromatically (see scotopic vision
- Why a monochrome GUI?
Obviously, one size fits it all cannot be applied in this situation, but why limit the GUI to a monochrome interface, when the vision of >90% of people is best suited for colour vision, especially for the colour green.
Therefore, it is wise to offer alternative GUIs:
- a monochrome version for colour-blind people
- a monochrome high-contrast version
- colour version: using a lot of red and green
- colour high-contrast version
- option to customize
Menus
Toolbars
Dialogs
Intro
Current dialogs are based really on old concepts. Therefore:
- much space is wasted (dead space)
- user clicks only on very small areas of the dialog and everything else just fills the area
- big dialogs often overlap the document/program
- impaired users find it difficult to click on a very small button/item
- visually impaired users have difficulty viewing some of these small elements inside the dialog
- some parts of the dialog get highly cluttered
Radical New Design
The following radical new design tries to solve all these problems. Please note, this is work in progress and far from complete.
- 1. Dead Space
Most space inside dialogs is dead space:
- it does NOT convey any information
- it does NOT convey any function (the user can click on it and nothing happens)
- SOLUTION/CONCEPT
- Everything is a BUTTON!
Similar to the UNIX concept, Everything is a file!, every area of the new dialog will behave like a button:
- the user can click everywhere and the specific action will be performed
- NO dead space, everything is funcitonal
- 2. Travel Distance
The travel distance in many existing dialogs is quite huge. There are 2 solutions to this problem: the previously mentioned Everything is a button-concept and a new arrangement of the GUI-elements.
- SOLUTION/CONCEPT
- Pie/Round Dialogs
The smallest travel distance can be found for radially-arranged items.
- 3. Selection Accuracy
Many disabled people find it very difficult to click on the very small buttons and check buttons commonly employed inside dialogs.
- SOLUTION/CONCEPT
- Pie/Round Dialogs
The added benefit of a circular arrangement (pie), is the significant increase in the area available for clicking. This area increases with the distance from the center. A disabled person will more readily click inside the correct pie-segment, than hitting a very small button. A more versatile user will use the small area more closely to the center, while the less versatile people can move the mouse to the outer 3rd of the pie and have instantly a much wider selection/clicking area.
- 4. Default Options
Often, one has to select some option from many items. Drop-down lists containing dozens of items are encountered frequently, although most users will mostly use only 2-3 items for >90% of the time.
- SOLUTION/CONCEPT
- Sensible Defaults
Every such item/options-list should have 2-3 sensible defaults. When the user clicks on the corresponding pie-segment, the option should toggle between these 2-3-(4) defaults, then returning to the first default. IF a user needs in a rare instance another option, then he will access the corresponding drop-down list, but most of the time he will be able to click just 2-3 times (on the same area!) and get the wanted option.
If users need regularly more than 4 options, then something is wrong with the design of the dialog, and the list should be probably split into 2 or more controls.
Example
A very artistic version of the Radial-Menu concept is posted on the GIMP UI-brainstorming page.
My appreciation for whomever created that mockup.
For a less artistic mockup of a 'Print-Dialog' using these new concepts see issue 85309. Please note this is work in progress and far from complete. The current mockup is cluttered, but in reality, there is NO need to have ALL pie-dialogs open. Only one should open, and IF the user needs more advanced options, then he would click on one of the pie-segments to get additional options/pie-dialogs.
