User Interface Design Criterions

By Xah Lee. Date: 2016-07-16. Last updated: 2021-02-05.

Here's some of the critical elements in user interface design.

The front window must be visually distinct from others. For example, have different color in title bar, or have colored border, or shadow.
UI elements must be clear that they are active clickable elements.
Radio buttons must be clear of its on/off state.
Checkboxes must be clear of its on/off state.
buttons must be clear if it is default action when pressing enter. For example: a dialog with cancel and appy buttons.

Bad Flat User Interface Design

These User Interfaces fails basic usability.

linux xfce x11 gui ThinIce Greybird 2016-07-16 — bad GUI. Linux Xfce ThinIce Greybird 2016-07.

Difficult to tell which window is in front.

Difficult to tell which tab is current.

Difficult to tell which is button, which is not a button.

Difficult to tell button's on/off status.

Flat Design of Original X Window System, Bad

This is bad, but excusable, because back in 1980s, computer resources are limited. You can't draw 3D widgets or shadows.

X Window System 2007 04 22 11965 — Appearance of the original X Window System, 1980s 〔image source 2017-08-30 ❮https://commons.wikimedia.org/wiki/File:X-Window-System.png❯〕

Grey Slab Design of Classic X11, Not Very Good

In 1990s, unix X11 (including Linux) sports a grey slab style. This is better than flat, but still hard to discern the various states of buttons or boxes.

DECwindows openvms v7.3 1, running on Solaris. (Year ~1998) Note the look of the scroll bar, the window border, and buttons. Why is it that way? because it's easy, simple, computationally less intensive, to write program to draw them that way and still get a 3D effect.

Firefox Certificate Manager 2012-10-22, using X11 1980's Grey drab slab style of Graphical User Interface.

xfce window manager gtk theme — xfce window manager GTK theme. Not good.

Microsoft Windows Metro Sucks

Metro Flat Design Sucks

Great User Interface Design

linux xfce x11 gui Adwaita Kokodi 2016-07-16 — Good GUI. Linux Xfce Adwaita Kokodi 2016-07.

Easy to tell which window is in front.
Easy to tell which tab is current.
Easy to tell which is clickable button.
Easy to tell button's on/off status.
Easy to tell radio button on/off status.
Easy to tell radio button on/off status.

Linux Xfce Good Theme Choices

appearance that has good GUI widgets:

adwaita
albatross
ambiance
bluebird
greybird
high contrast
numix
orion
radiance

bad x11 slabs:

clearlooks
crux
industrial
raleigh
redmond
thinice

Window Manager theme that has easily distiungished front window title bar:

daloa
abatross
kokodi
moheli