UI Elements

  • Graphical User Interfaces research has developed a “grammar” of user interactions. Lots of them use real life metaphors (buttons, toggles, etc) and need to be chosen carefully in a way that is consistent and clear to the user.

Input Elements

Informational Elements

Containers and Layouts

  • When dealing with a GUI library, it is always important to keep attention to layout elements. See, for example, GUIZero guidelines.

Auto-layout parameters

Keep an eye on:

  • Component sizes (width and height);
  • Aligning (center, top, bottom, left or right);
  • Filling (through all width, height, or both);
  • Their behavior when the screen is resized (always test that!)

Grids

Usually you also have the option to specify a virtual grid in which you can position your elements.

This can be very useful when aligning items in a form, for example:

Boxes

Finally, it is also possible to create groups of elements inside boxes. This helps organizing them, which helps both developers and users.

See, for example, how they are used in GUIZero: