UI

From Things and Stuff Wiki
Revision as of 23:16, 19 November 2019 by Milk (talk | contribs) (→‎Software)
Jump to navigation Jump to search


HCI

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.





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

Prototyping

  • https://en.wikipedia.org/wiki/Software_prototyping - the activity of creating prototypes of software applications, i.e., incomplete versions of the software program being developed. It is an activity that can occur in software development and is comparable to prototyping as known from other fields, such as mechanical engineering or manufacturing.

A prototype typically simulates only a few aspects of, and may be completely different from, the final product. Prototyping has several benefits: the software designer and implementer can get valuable feedback from the users early in the project. The client and the contractor can compare if the software made matches the software specification, according to which the software program is built. It also allows the software engineer some insight into the accuracy of initial project estimates and whether the deadlines and milestones proposed can be successfully met. The degree of completeness and the techniques used in prototyping have been in development and debate since its proposal in the early 1970s.


  • https://en.wikipedia.org/wiki/Website_wireframe - also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose. The purpose is usually being informed by a business objective and a creative idea. The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together. The wireframe usually lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content. In other words, it focuses on what a screen does, not what it looks like. Wireframes can be pencil drawings or sketches on a whiteboard, or they can be produced by means of a broad array of free or commercial software applications. Wireframes are generally created by business analysts, user experience designers, developers, visual designers, and by those with expertise in interaction design, information architecture and user research.



Paper

  • https://en.wikipedia.org/wiki/Paper_prototyping - a widely used method in the user-centered design process, a process that helps developers to create software that meets the user's expectations and needs—in this case, especially for designing and testing user interfaces. It is throwaway prototyping and involves creating rough, even hand-sketched, drawings of an interface to use as prototypes, or models, of a design. While paper prototyping seems simple, this method of usability testing can provide a great deal of useful feedback which will result in the design of better products. This is supported by many usability professionals.


Mockups and Stencils

Software

  • Pencil - built for the purpose of providing a free and open-source GUI prototyping tool that people can easily install and use to create mockups in popular desktop platforms. [13]


Service

  • Mockingbird - customisable grids(!), can't hide sidebar

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
  • Zenity is a tool that allows you to display Gtk+ dialog boxes from the command line and through shell scripts. It is similar to gdialog, but is intended to be saner. It comes from the same family as dialog, Xdialog, and cdialog, but it surpasses those projects by having a cooler name.
  • 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


Clutter

Qt

qtconfig qt4





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

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.

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.

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.

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.

TUI

curses / ncurses

  • https://en.wikipedia.org/wiki/curses_(programming_library) - a terminal control library for Unix-like systems, enabling the construction of text user interface (TUI) applications. The name is a pun on the term “cursor optimization”. It is a library of functions that manage an application's display on character-cell terminals (e.g., VT100).


  • Announcing ncurses 6.1 - new curses) library is a free software emulation of curses in System V Release 4.0 (SVr4), and more. It uses terminfo format, supports pads and color and multiple highlights and forms characters and function-key mapping, and has all the other SVr4-curses enhancements over BSD curses. SVr4 curses became the basis of X/Open Curses. In mid-June 1995, the maintainer of 4.4BSD curses declared that he considered 4.4BSD curses obsolete, and encouraged the keepers of unix releases such as BSD/OS, FreeBSD and NetBSD to switch over to ncurses.



  • npyscreen - python widget library and application framework for programming terminal or console applications. It is built on top of ncurses, which is part of the standard library.


Urwid


termbox


tcell

  • https://github.com/gdamore/tcell - Package tcell provides a cell based view for text terminals, like xterm. It was inspired by termbox, but differs from termbox in some important ways. It also adds substantial functionality beyond termbox.

gocui


Dashboard

blessed

termui


wtf

  • WTF - A Terminal Dashboard - a personal information dashboard for your terminal, developed for those who spend most of their day in the command line. It provides a framework for rapidly viewing important at-a-glance information easily. Keep an eye on your OpsGenie schedules, Google Calendar, Git and Github repositories, and New Relic deployments. See who's away in BambooHR, which Jira tickets are assigned to you, and what time it is in Barcelona. It even has weather. And clocks. And emoji. [18]
Retrieved from "https://wiki.thingsandstuff.org/index.php?title=UI&oldid=52763"