From Things and Stuff Wiki
Jump to navigation Jump to search


See also Computing#History, GUI, WM, DE, Design

  • https://en.wikipedia.org/wiki/Interaction_design - often abbreviated as IxD, is "the practice of designing interactive digital products, environments, systems, and services." Beyond the digital aspect, interaction design is also useful when creating physical (non-digital) products, exploring how a user might interact with it. Common topics of interaction design include design, human–computer interaction, and software development. While interaction design has an interest in form (similar to other design fields), its main area of focus rests on behavior. Rather than analyzing how things are, interaction design synthesizes and imagines things as they could be. This element of interaction design is what characterizes IxD as a design field as opposed to a science or engineering field. While disciplines such as software engineering have a heavy focus on designing for technical stakeholders, interaction design is geared toward satisfying the majority of users.

  • https://en.wikipedia.org/wiki/Widget_(GUI) - sometimes called a control in a graphical user interface is an element of interaction, such as a button or a scroll bar. Controls are software components that a computer user interacts with through direct manipulation to read or edit information about an application. User interface libraries such as Windows Presentation Foundation, GTK+, and Cocoa, contain a collection of controls and the logic to render these.

Each widget facilitates a specific type of user-computer interaction, and appears as a visible part of the application's GUI as defined by the theme and rendered by the rendering engine. The theme makes all widgets adhere to a unified aesthetic design and creates a sense of overall cohesion. Some widgets support interaction with the user, for example labels, buttons, and check boxes. Others act as containers that group the widgets added to them, for example windows, panels, and tabs. Structuring a user interface with widget toolkits allows developers to reuse code for similar tasks, and provides users with a common language for interaction, maintaining consistency throughout the whole information system. Graphical user interface builders facilitate the authoring of GUIs in a WYSIWYG manner employing a user interface markup language. They automatically generate all the source code for a widget from general descriptions provided by the developer, usually through direct manipulation.

  • https://en.wikipedia.org/wiki/Fitts's_law - a model of human movement primarily used in human–computer interaction and ergonomics that predicts that the time required to rapidly move to a target area is a function of the distance to the target and the size of the target. Fitts's law is used to model the act of pointing, either by physically touching an object with a hand or finger, or virtually, by pointing to an object on a computer monitor using a pointing device. It was proposed by Paul Fitts in 1954.

  • Reducing User Interface Friction - Whether you call it cognitive load, a sequence of hurdles, interface overhead, or just plain excise, it all adds up to the same thing: interface friction for the user. Sand in the gears of their mind. One more unnecessary thing they have to think about before using your application.How many steps does it take to do something in your application? Have you counted? Have you thought about ways to reduce or eliminate those steps for your users? If not, you absolutely should be. Fire up your application and start counting as you click and type through the most common user scenarios. I think you'll be unpleasantly surprised.


  • Words - "This is a web page."
  • Usability First - We want to provide valuable information about usability for anyone interested in the design of software or websites, from beginners to experts, in academia or in industry.
  • Accessites.org - We aim to prove that accessible, usable web sites built with universality and standards in mind need not be boring. We will show you artfully crafted sites made by some of today’s most progressive web developers.
  • http://en.wikipedia.org/wiki/Information_foraging - applies the ideas from optimal foraging theory to understand how human users search for information, based on the assumption that, when searching for information, humans use "built-in" foraging mechanisms that evolved to help our animal ancestors find food
  • http://en.wikipedia.org/wiki/Choice_architecture - describes the way in which decisions may (and can) be influenced by how the choices are presented (in order to influence the outcome)

User Interface

User Experience (UX)

  • http://en.wikipedia.org/wiki/User_experience - involves a person's behaviors, attitudes, and emotions about using a particular product, system or service. User experience includes the practical, experiential, affective, meaningful and valuable aspects of human-computer interaction and product ownership

  • UX Movement - a progressive user experience blog devoted to promoting usable and intuitive user interface design. We publish practical and insightful articles that show designers better and innovative ways to design for their users.
  • UX Magazine is a central, one-stop resource for everything related to user experience. We provide a steady stream of current, informative, and credible information about UX and related fields to enhance the professional and creative lives of UX practitioners and those exploring the field.

Information Architecture

See also ontology in general.

  • Information Architecture - The importance of having a well-structured website comes from how information and data is related to each other. The thorough planning and gathering of ideas to form a structured and meaningful arrangement of this data is Information Architecture.
  • So what’s an Information Architect?
    • study of information structure for a defined purpose
    • define the architecture of content relative to database construction and user-interaction
    • organize and qualify the appropriate use of metadata schemas, controlled vocabularies, folksonomies, ontologies etc.
    • articulate and produce meaningful information visualizations
    • help to structure information for easy digestion in digital applications


  • UX Myths collects the most frequent user experience misconceptions and explains why they don't hold true. And you don't have to take our word for it, we'll show you a lot of research findings and articles by design and usability gurus.





UI markup

  • https://en.wikipedia.org/wiki/User_interface_markup_language - a markup language that renders and describes graphical user interfaces and controls. Many of these markup languages are dialects of XML and are dependent upon a pre-existing scripting language engine, usually a JavaScript engine, for rendering of controls and extra scriptability. The concept of the user interface markup languages is primarily based upon the desire to prevent the "re-invention of the wheel" in the design, development and function of a user interface; such re-invention comes in the form of coding a script for the entire user interface. The typical user interface markup language solidifies often re-used program or script code in the form of markup, making it easier to focus upon design of a user interface in an understandable dialect as opposed to focus on function.

User interface markup languages, like most markup and programming languages, rely upon sub-application runtimes to interpret and render the markup code as program code that can be processed and put out in the desired form. In XML-based user interface markup languages, which tend to rely upon a web browser's layout engine as a runtime, most of the code is re-interpreted to the layout engine as JavaScript; this means that JavaScript can be used to extend the user interface markup languages to extents that are not covered by the present functionality of the layout engine.

  • FAQ - CEGUI Wiki - Crazy Eddie's GUI System (Open Source) - CEGUI stands for Crazy Eddie's Gui System; a free library providing windowing and widgets for graphics APIs / engines where such functionality is not natively available, or severely lacking. The library is object orientated, written in C++, and targeted at games developers who should be spending their time creating great games, not building GUI sub-systems!


  • https://en.wikipedia.org/wiki/XUL - ZOOL, which stands for XML User Interface Language, is a user interface markup language developed by Mozilla. XUL is implemented as an XML dialect, enabling graphical user interfaces to be written in a similar manner to web pages. XUL can be used to write cross-platform applications. The most prominent example is the Firefox web browser with its Gecko layout engine that renders both web pages and the XUL browser interface. In the past, Firefox permitted add-ons to extensively alter its user interface via custom XUL code, but this capability was removed in Firefox 57 and replaced with the less-permissive WebExtensions API. However, three forks of Firefox continue to support add-ons with custom XUL code: Pale Moon, Basilisk, and Waterfox.


  • https://en.wikipedia.org/wiki/QML - a user interface markup language. It is a declarative language (similar to CSS and JSON) for designing user interface–centric applications. Inline JavaScript code handles imperative aspects. It is associated with Qt Quick, the UI creation kit originally developed by Nokia within the Qt framework. Qt Quick is often used for mobile applications where touch input, fluid animations (60 FPS) and user experience are crucial. QML is also used with Qt3D to describe a 3D scene and a "frame graph" rendering methodology.

A QML document describes a hierarchical object tree. QML modules shipped with Qt include primitive graphical building blocks (e.g., Rectangle, Image), modeling components (e.g., FolderListModel, XmlListModel), behavioral components (e.g., TapHandler, DragHandler, State, Transition, Animation), and more complex controls (e.g., Button, Slider, Drawer, Menu). These elements can be combined to build components ranging in complexity from simple buttons and sliders, to complete internet-enabled programs. QML elements can be augmented by standard JavaScript both inline and via included .js files. Elements can also be seamlessly integrated and extended by C++ components using the Qt framework.

QML is the language; its JavaScript runtime is the V4 engine; and Qt Quick is the 2D scene graph and the UI framework based on it. These are all part of the Qt Declarative module, but the technology is no longer called Qt Declarative. QML code (including its JavaScript parts) can get compiled into native C++ code through the Qt Quick Compiler. Alternatively there is a QML cache file format which stores a compiled version of QML dynamically for faster startup the next time it is run.


Widget toolkits

  • https://en.wikipedia.org/wiki/Widget_toolkit - widget library, GUI toolkit, or UX library is a library or a collection of libraries containing a set of graphical control elements (called widgets) used comprising the graphical user interface (GUI) of programs. Most widget toolkits additionally include their own rendering engine. This engine can be specific to a certain operating system or windowing system or contain back-ends to interface with more multiple ones and also with rendering APIs such as OpenGL, OpenVG, or EGL. The look and feel of the graphical control elements can be hard-coded or decoupled, allowing the graphical control elements to be themed/skinned.

  • https://en.wikipedia.org/wiki/Layout_manager - software components used in widget toolkits which have the ability to lay out graphical control elements by their relative positions without using distance units. It is often more natural to define component layouts in this manner than to define their position in pixels or common distance units, so a number of popular widget toolkits include this ability by default. Widget toolkits that provide this function can generally be classified into two groups: Those where the layout behavior is coded in special graphic containers. This is the case in XUL and the .NET Framework widget toolkit (both in Windows Forms and in XAML); Those where the layout behavior is coded in layout managers, that can be applied to any graphic container. This is the case in the Swing widget toolkit that is part of the Java API.

  • Survey of Widget Sets - This page serves as a survey of the various free widget sets written for the X intrinsics. Most of these widget sets are variations on the standard Athena widget set, Xaw.

  • https://wiki.archlinux.org/index.php/Uniform_Look_for_Qt_and_GTK_Applications - Qt and GTK+ based programs both use a different widget toolkit to render the graphical user interface. Each come with different themes, styles and icon sets by default, among other things, so the "look and feel" differ significantly. This article will help you make your Qt and GTK+ applications look similar for a more streamlined and integrated desktop experience.

qt5-styleplugins - QGtkStyle - This Qt style uses GTK+ 2 to render all components to blend in with GNOME and similar GTK+ based environments. Beginning with Qt 4.5, this style is included in Qt. It requires gtk2 to be installed and configured.

find $(find ~/.themes /usr/share/themes/ -wholename "*/gtk-3.0" | sed -e "s/^\(.*\)\/gtk-3.0$/\1/") -wholename "*/gtk-2.0" | sed -e "s/.*\/\(.*\)\/gtk-2.0/\1"/
  # find gtk/gtk3 themes

Good GTK2/GTK3 themes

  • ....


  • https://en.wikipedia.org/wiki/X_Toolkit_Intrinsics - also known as Xt, for X toolkit) is a library that implements an API to facilitate the development of programs with a graphical user interface (GUI) for the X Window System. It can be used in the C or C++ languages.

Most modern toolkits such as FLTK, GTK+, and Qt do not use the Xt library, preferring to use Xlib or even XCB directly.

Athena (Xaw)


Sun Solaris

Motif (Xm)






  • https://github.com/original-male/ntk - a fork of FLTK 1.3.0 which adds graphics rendering via Cairo, support for transparent/overlapping widgets, streamlining of internals, and some new/improved widgets.





Used by GNOME

  • libwnck is the Window Navigator Construction Kit, a library for use in writing pagers, tasklists, and more generally applications that are dealing with window management. It tries hard to respect the Extended Window Manager Hints specification (EWMH). The Inter-Client Communication Conventions Manual (ICCCM) is also a useful resource.

GTK2 theming


  • GtkOrphan (a Perl/Gtk2 application for debian systems) is a graphical tool which analyzes the status of your installations, looking for orphaned libraries. It implements a GUI front-end for deborphan, adding the package-removal capability.

GTK3 theming

  • https://github.com/lah7/gtk3-classic - contains patches to restore GTK3's look & feel reminiscent to earlier versions. With many enhancements such as disabled CSD headers, traditional dialog boxes and file browser improvements. These are designed to work on non-GNOME desktops (such as XFCE and MATE) as well as any other environment where GTK applications are used. Running on GNOME desktops is not recommended!



  • Using GTK+ with Broadway: GTK+ 3 Reference Manual - The GDK Broadway backend provides support for displaying GTK+ applications in a web browser, using HTML5 and web sockets. To run your application in this way, select the Broadway backend by setting GDK_BACKEND=broadway. Then you can make your application appear in a web browser by pointing it at Note that you need to enable web sockets in your web browser.You can choose a different port from the default 8080 by setting the BROADWAY_DISPLAY environment variable to the port that you want to use.It is also possible to use multiple GTK+ applications in the same web browser window, by using the Broadway server, broadwayd, that ships with GTK+.


  • https://github.com/thesquash/stlwrt - For anyone who does not know yet, STLWRT is the successor to GTK+ 2, originally based almost entirely on the original code from GTK+ 2. STLWRT has deviated from the GTK+ 2 code, however, and continues to deviate. Ultimately, the goal is to be able to run most GTK+ 2 and many GTK+ 3 applications using the same STLWRT library, while both types of applications keep a conservative, traditional GTK+ 2-esque look and feel.




  • https://en.wikipedia.org/wiki/GDK - GIMP Drawing Kit, a library that acts as a wrapper around the low-level functions provided by the underlying windowing and graphics systems. GDK lies between the display server and the GTK+ library, handling basic rendering such as drawing primitives, raster graphics (bitmaps), cursors, fonts, as well as window events and drag-and-drop functionality.








  • https://github.com/vurtun/nuklear - a minimal state immediate mode graphical user interface toolkit written in ANSI C and licensed under public domain. It was designed as a simple embeddable user interface for application and does not have any dependencies, a default renderbackend or OS window and input handling but instead provides a very modular library approach by using simple input state for input and draw commands describing primitive shapes as output. So instead of providing a layered library that tries to abstract over a number of platform and render backends it only focuses on the actual UI.


  • AVTK - a user-interface toolkit. The letters are short for the OpenAV ToolKit. It is focused on custom widgets, and making it really easy to code slick user-interfaces. Totally anti-aliased, and it redraws fast. This is the library OpenAV wish existed when starting to develop user-interfaces, that’s why we develop it! Note that it is currently still in development, and hence is not yet released.


  • Ganv - a Gtkmm widget for interactive graph-like environments, such as modular synthesizers or finite state machines.


  • d2tk - A performant, dyamic, immediate-mode GUI tool kit in C which partially renders on-change only by massively hashing-and-cashing of vector drawing instructions and on-demand rendered sprites.



OIU Blendish

  • https://github.com/AndrewBelt/oui-blendish - a small collection of drawing functions for NanoVG in a single C header file, designed to replicate the look of the Blender 2.5+ User Interface. You can use these functions to theme your UI library. Some metric constants for faithful reproduction are also included.

Dear ImGui



  • https://github.com/wrl/rutabaga - an openGL widget toolkit in early stages of development. it is built against the openGL 3 core profile (i.e. no fixed function pipeline), licensed under the 2-clause BSD license, and implemented in almost-standard C99 (uses the non-standard ms-extensions for anonymous structs because C11 anonymous struct sdon't work for our purposes). currently it provides the skeletal components: a basic scene graph, event dispatching, rudimentary run-time type information, FreeType font rendering, and indirect rendering for performance.there is support for X11 (tested on Linux and FreeBSD),OSX via Cocoa, and win32/win64. the windows support is currently unable to deploy stand-alone apps due to some event loop shenanigans, but plug-in UIs (i.e. VST) work just fine.


  • Nana - a C++ library designed to allow developers to easily create cross-platform GUI applications with modern C++11 style. Currently it can work on Linux(X11) and Windows. The nana repository contains the entire source of the library. You can browse the source code and submit your pull request for contributing.





  • LittlevGL - Open-source Embedded GUI Library
    • https://github.com/littlevgl/lvgl - provides everything you need to create a Graphical User Interface (GUI) on embedded systems with easy-to-use graphical elements, beautiful visual effects and low memory footprint.


  • https://github.com/achimdoebler/UGUI - a free and open source graphic library for embedded systems. It is platform-independent and can be easily ported to almost any microcontroller system. As long as the display is capable of showing graphics, µGUI is not restricted to a certain display technology. Therefore, display technologies such as LCD, TFT, E-Paper, LED or OLED are supported. The whole module consists of three files: ugui.c, ugui.h and ugui_config.h.


  • https://github.com/idea4good/GuiLite - the smallest GUI library with 5000 lines of code, could run on all platforms(e.g, iOS/macOS/WathOS, Android, Linux, Windows, Docker and MCU without OS), and work with many languages(e.g. Swift, Java, Javascript, C#, Golang).



GUI builder

  • https://en.wikipedia.org/wiki/Graphical_user_interface_builder - or GUI builder), also known as GUI designer, is a software development tool that simplifies the creation of GUIs by allowing the designer to arrange graphical control elements (often called widgets) using a drag-and-drop WYSIWYG editor. Without a GUI builder, a GUI must be built by manually specifying each widget's parameters in source-code, with no visual feedback until the program is run.

User interfaces are commonly programmed using an event-driven architecture, so GUI builders also simplify creating event-driven code. This supporting code connects widgets with the outgoing and incoming events that trigger the functions providing the application logic. Some graphical user interface builders, such as e.g. Glade Interface Designer, automatically generate all the source code for a graphical control element. Others, like Interface Builder, generate serialized object instances that are then loaded by the application.