UI

From Things and Stuff Wiki
Jump to navigation Jump to search


HCI

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



  • 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/User_interface_design - or user interface engineering is the design of user interfaces for machines and software, such as computers, home appliances, mobile devices, and other electronic devices, with the focus on maximizing usability and the user experience. In computer or software design, user interface (UI) design primarily focuses on information architecture. It is the process of building interfaces that clearly communicates to the user what's important. UI design refers to graphical user interfaces and other forms of interface design. The goal of user interface design is to make the user's interaction as simple and efficient as possible, in terms of accomplishing user goals (user-centered design).


  • https://en.wikipedia.org/wiki/Interaction_technique - user interface technique or input technique is a combination of hardware and software elements that provides a way for computer users to accomplish a single task. For example, one can go back to the previously visited page on a Web browser by either clicking a button, pressing a key, performing a mouse gesture or uttering a speech command. It is a widely used term in human-computer interaction. In particular, the term "new interaction technique" is frequently used to introduce a novel user interface design idea.


  • 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.







Usability

  • 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

Specifics

  • 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.


Reviews

Search

Navigation

Other



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!



XUL

  • 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.

QML

  • 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.


Programming





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

  • ....


Xt

  • 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)

OPEN LOOK (XView)

Sun Solaris

Motif (Xm)

Tk

1991

FLTK

1992

NTK

  • 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.

wxWidgets

1992

EFL

GTK+

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

Tools


  • 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!

Clutter

Broadway

  • 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 http://127.0.0.1:8080. 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+.

stlwrt

  • 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.

Glade

  • Glade - a user interface designer for GTK+ applications. It is used to rapidly prototype GTK+ and GNOME applications. It provides a framework that allows an application author to dynamically add, remove, and modify widgets. It is done in a very simple, yet powerful manner that lets even novice developers design a user interface in a short time.

Qt

  • Qt - All the tools you need for creating software applications or embedded devices, from planning and design to development, testing, and future-proofing your products.



  • Introduction to Qt - Qt 6 lets you develop applications with intuitive user interfaces for multiple devices and platforms, faster than ever before. Note: Qt 6 is highly compatible with Qt 5. Developers of Qt 5 applications can move seamlessly to Qt 6 while retaining the applications' functionality. Designing User Interfaces Qt offers two solutions for UI design: Qt Widgets and Qt Quick. Qt Widgets tightly integrates with desktop look-and-feel. Qt Quick UIs are dynamic with fluid animations and are optimal for touch interfaces. The User Interfaces page compares both Qt Quick and Qt Widgets technologies. Cross-Platform Qt is cross-platform. Qt modules are available on various devices and platforms. Developer tools like Qt Creator and Qt Design Studio are available for Windows, macOS, and Linux. Build tools like qmake and CMake seamlessly handle the platform-specific differences in the build process.


  • QML Applications - QML is a declarative language that allows user interfaces to be described in terms of their visual components and how they interact and relate with one another. It is a highly readable language that was designed to enable components to be interconnected in a dynamic manner, and it allows components to be easily reused and customized within a user interface. Using the QtQuick module, designers and developers can easily build fluid animated user interfaces in QML, and have the option of connecting these user interfaces to any back-end C++ libraries.
  • Qt QML - The Qt QML module provides a framework for developing applications and libraries with the QML language. It defines and implements the language and engine infrastructure, and provides an API to enable application developers to extend the QML language with custom types and integrate QML code with JavaScript and C++. The Qt QML module provides both a QML API and a C++ API. Note that while the Qt QML module provides the language and infrastructure for QML applications, the Qt Quick module provides many visual components, model-view support, an animation framework, and much more for building user interfaces.




  • Qt Quick - The Qt Quick module is the standard library for writing QML applications. While the Qt QML module provides the QML engine and language infrastructure, the Qt Quick module provides all the basic types necessary for creating user interfaces with QML. It provides a visual canvas and includes types for creating and animating visual components, receiving user input, creating data models and views and delayed object instantiation. The Qt Quick module provides both a QML API, which supplies QML types for creating user interfaces with the QML language, and a C++ API for extending QML applications with C++ code.
  • Qt Quick QML Types | Qt Quick - The Qt Quick module provides graphical primitive types. These types are only available in a QML document if that document imports the QtQuick namespace.


  • Qt Widgets - The Qt Widgets Module provides a set of UI elements to create classic desktop-style user interfaces. See the User Interfaces overview for more information on using widgets. Widgets Widgets are the primary elements for creating user interfaces in Qt. Widgets can display data and status information, receive user input, and provide a container for other widgets that should be grouped together. A widget that is not embedded in a parent widget is called a window.


  • Qt Creator Manual
    • https://en.wikipedia.org/wiki/Qt_Creator - a cross-platform C++, JavaScript, Python and QML integrated development environment (IDE, which simplifies GUI application development. It is part of the SDK for the Qt GUI application development framework and uses the Qt API, which encapsulates host OS GUI function calls. It includes a visual debugger and an integrated WYSIWYG GUI layout and forms designer. The editor has features such as syntax highlighting and autocompletion. Qt Creator uses the C++ compiler from the GNU Compiler Collection on Linux. On Windows it can use MinGW or MSVC with the default install and can also use Microsoft Console Debugger when compiled from source code. Clang is also supported.
  • Getting Started | Qt Creator Manual


  • Qt Designer Manual - the Qt tool for designing and building graphical user interfaces (GUIs) with Qt Widgets. You can compose and customize your windows or dialogs in a what-you-see-is-what-you-get (WYSIWYG) manner, and test them using different styles and resolutions. Widgets and forms created with Qt Designer integrate seamlessly with programmed code, using Qt's signals and slots mechanism, so that you can easily assign behavior to graphical elements. All properties set in Qt Designer can be changed dynamically within the code. Furthermore, features like widget promotion and custom plugins allow you to use your own components with Qt Designer.






GammaRay

  • GammaRay - consists of a number of specialized tools to inspect various aspects of Qt. You can select these using the tool selector on the left of the GammaRay window.


Python




GDK

  • 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.

SDL


gg

XForms

https://news.ycombinator.com/item?id=26314851

GVL

libui

Nuklear

  • 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

  • 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

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

d2tk

  • 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.

CTK

Redkite

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

yue

rutabaga

  • 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

  • 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.

Elements

Fox

chopsui

LittlevGL

  • 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.

UGUI

  • 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.

GuiLite

  • 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).

agar

ttauri


nativefiledialog/-extended


  • https://github.com/btzy/nativefiledialog-extended - A small C library with that portably invokes native file open, folder select and file save dialogs. Write dialog code once and have it pop up native dialogs on all supported platforms. Avoid linking large dependencies like wxWidgets and Qt. This library is based on Michael Labbe's Native File Dialog (mlabbe/nativefiledialog).

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.

Retrieved from "https://wiki.thingsandstuff.org/index.php?title=UI&oldid=64358"