Things and Stuff Wiki - An organically evolving personal wiki knowledge base with a totally on-the-fly taxonomy containing topic outlines, descriptions and breadcrumbs, with links to sites, systems, software, manuals, organisations, people, articles, guides, slides, papers, books, comments, screencasts, webcasts, scratchpads and more. Use the Table of Contents to navigate on longer pages, use the Small-ToC and Tiny-ToC above on longer pages. probably not that mobile friendly atm. I am milk (or milkii) on Freenode IRC, give me a pm for feedback, or see About for login and further information. / et / em
- 1 HCI
- 2 Usability
- 3 Prototyping
- 4 UI markup
- 5 Widget toolkits
- 6 GUI builder
- 7 TUI
- 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.
- http://www.1up.com/news/playstation-1-design - C-f buttons
- Google Slides: programmer interfaces
- 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.
- useit.com: Alertbox - Jakob Nielsen's Current Issues in Web Usability articles
- 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)
- Userim - Usability Checklist
- UI-Patterns.com is the work of Anders Toxboe – a Danish web developer seeking to categorize what has before seemed like ad hoc approaches to developing web applications.
- Interaction Design Pattern Library - Welie.com
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 Crash Course: 31 Fundamentals 
- UX for the masses - These articles are written by Neil Turner - A UK based UX designer. I like to share, discuss and comment on UX ideas, tips, insights and practices that everyone can use to help design a better user experience for all.
- PDF: The User Experience Guide Book For Product Managers
- UX Archive - mobile UX pattern examples
- 25 Excellent Usability/UX Articles and Resources
- Ask HN: Recommendations for learning and improving UX/UI skills?
- Ask HN: What do you wish you knew about UI/UX design?
- 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.
- UX Strategy: The Heart of User-Centered Design
- Expanded user journey maps: combining several UX deliverables into one useful document
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.
- Design patterns search
- Pagination 101 
- What the hell does ≡ do, anyway?
- The Billion Dollar Mind Trick: An Intro to Triggers
- http://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus/ 
- Skeumorphism & Storytelling - "An interface that is not only easy to use, but fun to use, engages the user and creates an experience where obstacles are easier to overcome, and thus an experience where the product is easier and more effortless to use. Done right, skeuomorphism can retain the simplicity and ease of use of an interface while empowering users to act."
- Can We Please Move Past Apple’s Silly, Faux-Real UIs?
- http://news.ycombinator.com/item?id=5330998 - large menus, field focus, etc
- UICloud - search ui examples
- 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.
- 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
- http://kaioa.com/node/94 - inkscape
- http://www.fuelyourinterface.com/free-web-ui-wireframe-kit/ - psd
- http://www.dragnet.se/webbdesign/websitewireframes.html - fireworks
- http://www.uistencils.com/ - rl, $
- Mockingbird - customisable grids(!), can't hide sidebar
- http://placeit.breezi.com/ - screenshots in rl
- 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.
- YouTube: QML Qt 138 - Introduction to QML
- 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.
OPEN LOOK (XView)
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.
- 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.
- https://github.com/TomaszGasior/gtk3-mushrooms - GTK3 library patched for classic desktops like MATE/XFCE.
- https://github.com/mherrmann/fbs - Create cross-platform desktop apps in minutes, not months
- 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.
- https://github.com/ocornut/imgui - Dear ImGui: Bloat-free Immediate Mode Graphical User interface for C++ with minimal dependencies
- https://github.com/yue/yue - A library for creating native cross-platform GUI apps
- 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.
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.
- https://srs.gnu.moe/list/ - attempt at creating a categorized list of console/ncurses programs.
- 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 - Console user interface library for Python. Display modules include raw, curses, and experimental LCD and web displays
- 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.
- https://github.com/jroimartin/gocui - Minimalist Go package aimed at creating Console User Interfaces.
- https://github.com/chjj/blessed - A high-level terminal interface library for node.js.
- https://github.com/gizak/termui - Golang terminal dashboard
- 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.