Universal User Interface (UUI)
<?xml version="1.0" encoding="UTF-8"?> | |
<!--Xholon Workbook http://www.primordion.com/Xholon/gwt/ MIT License, Copyright (C) Ken Webb, Fri May 16 2014 11:29:59 GMT-0400 (EDT)--> | |
<XholonWorkbook> | |
<Notes><![CDATA[ | |
Xholon | |
------ | |
Title: Universal User Interface (UUI) | |
Description: | |
Url: http://www.primordion.com/Xholon/gwt/Xholon.html?app=bf9f46947af55015be4a&src=gist&gui=none | |
InternalName: bf9f46947af55015be4a | |
Keywords: | |
My Notes | |
-------- | |
To run this app (assuming you are using editwb.html to view this workbook): | |
- Click the "none" button above | |
- A Xholon runtime page will open in a separate tab or window | |
- It will execute the app defined in this workbook | |
- The page will include a D3 Circle Pack SVG image | |
- Hover above each node to see its tooltip | |
- Any node referenced by that context node will be displayed with an orange background | |
- Any node that references that context node will be displayed with an orange border | |
- Click each node to see it's brief description in the out tab | |
- Right-click each node to see it's context menu | |
You can also run the app directly: | |
http://www.primordion.com/Xholon/gwt/Xholon.html?app=bf9f46947af55015be4a&src=gist&gui=none | |
I already have an informal concept of a Universal User Interface (UUI), and many examples. | |
In this workbook I explore a bit more of what a UUI is. | |
The basic idea: | |
- all systems are structured as one or more graphs and/or trees | |
- Xholon makes these structures explicit, but not necessarily visible | |
- a UUI makes these structures visible | |
- all nodes | |
- all relationships between parent and child nodes | |
- all other graph relationships between nodes | |
- a UUI allows users to request any and all functionality these systems provide | |
- the same type of UUI can be used for any system | |
a previous coworker mentioned usability and functionality? | |
- I'm interested in a UUI that offers basic funtionality | |
- that can then be extended to provide better usability | |
- a minimal UI that provides just enough to allow for the intended functionality | |
- a solid base for building a UI with high usability | |
Some implementations of a UUI: | |
- D3 Circle Packing | |
- HTML div structures | |
- indentation, such as in the Xholon classic GUI | |
- paired parentheses | |
- | |
The Xholon D3 Circle Packing GUI is a good example of a UUI: | |
- at any given time, one node is the context node | |
- external nodes have a single letter (with no circle) | |
- instead of including the complete name of the node | |
- all external node circles are the same size, just large enough to contain a single letter or symbol or icon | |
- internal nodes have a circle with one or more other nodes inside, but no letter | |
- adjacent nodes (nodes that the context node points to) are highlighted when the user hovers over a node | |
- instead of using lines to show these graph relationships | |
- nodes that point to the context node are optionally highlighted in a different way | |
- the node's complete name is shown as a tooltip when the user hovers | |
- left-click any node to see it's toString() value in the out tab | |
- right-click any node to get a context menu | |
- tens or hundreds of thousands of nodes can be packed onto a computer screen | |
- structure is of primary importance, not the names of things | |
- the positions of things are always the same, from one run of the app to another | |
- the node's color can show what type of node it is | |
- clonons[18] are visible by their recurring shape | |
- any Xholon app, and any part of any Xholon app, can be displayed using D3 circle packing | |
- the result is a nicer presentation than with popular force-directed visualizations | |
- two-dimensional circle packing could be extended to three-dimensional sphere packing | |
- D3 uses Scalable Vector Graphics (SVG), which allows objects to be arbitrarily and vanishingly small | |
- so the only limit to how nodes can be on the screen is the amount of memory in the computer | |
- a circle packing can be updated in-place each time step while an app is running | |
- or a new circle packing can be displayed each time step, allowing comparison | |
- the evolving circle packing can be written to a video file for subsequent replay | |
- | |
Xholon example apps that demonstrate particularly well the D3 Circle Pack GUI: | |
http://www.primordion.com/Xholon/gwt/Xholon.html?app=Cell&gui=d3cp | |
http://www.primordion.com/Xholon/gwt/Xholon.html?app=GameOfLife&gui=d3cp | |
http://www.primordion.com/Xholon/gwt/Xholon.html?app=Life&gui=d3cp | |
http://www.primordion.com/Xholon/gwt/Xholon.html?app=7888333&src=gist&gui=d3cp | |
http://www.primordion.com/Xholon/gwt/Xholon.html?app=11358183&src=gist&gui=d3cp | |
Ideas: | |
* our eyes only focus on a very small part of any diagram at any instant | |
- the circle packing GUI would work well in a system with a camera that watched as our eyes move around on a page | |
- the GUI would change as your eyes move | |
- use of saccades | |
- there's no need to present complete names of things on the screen until the user is looking directly at them | |
- I could position the mouse at a context node, which would cause other nodes to become highlighted | |
- as my eyes move around, I would see information about all the highlighted nodes | |
- perhaps when my eye rests on a highlighted node, what it's connected to would also temporarily highlight | |
- you could quickly glance about to see the overall connections | |
* need a good way to zoom in on a small part of a large circle packing without feeling sea sick | |
* use hardware acceleration; WebGL | |
- circle packing with threejs ? | |
References (in no particular order) | |
---------- | |
(1) Knuth, Donald (1973) The Art of Computer Programming, 2nd ed | |
volume 1, section 2.3 Trees | |
(2) David Harel, "On Visual Formalisms" paper | |
(3) David Harel, "Statecharts: A visual formalism for complex systems" paper | |
(4) google: Universal User Interface | |
there doesn't seem to be anything that corresponds directly to what I'm looking for | |
(5) http://andrewdoble.blogspot.ca/2013/07/the-universal-user-interface.html | |
(6) http://en.wikipedia.org/wiki/Usability | |
Usability is the ease of use and learnability of a human-made object. | |
(7) www.jeffreynichols.com/papers/a17-nichols.pdf | |
Creating a Lightweight User Interface Description Language: | |
An Overview and Analysis of the Personal Universal Controller Project | |
(8) http://en.wikipedia.org/wiki/Tree_%28data_structure%29 | |
(9) http://d3js.org/ | |
(10) http://bl.ocks.org/mbostock/4063530 | |
D3 circle packing | |
(11) https://github.com/mbostock/d3/wiki/Pack-Layout | |
"Enclosure diagrams use containment (nesting) to represent the hierarchy. The size of each leaf node’s circle reveals a quantitative dimension of each data point. The enclosing circles show the approximate cumulative size of each subtree, but note that because of wasted space there is some distortion between levels; only the leaf nodes can be compared accurately. Although circle packing does not use space as efficiently as a treemap, the “wasted” space more prominently reveals the hierarchy." | |
(12) http://en.wikipedia.org/wiki/Circle_packing | |
(13) http://en.wikipedia.org/wiki/Sphere_packing | |
(14) notes in my paper notebook: April 28, May 7 | |
(15) google: open source eye tracking software | |
(16) http://labs.unwieldy.net/moocirclepack/ | |
https://code.google.com/p/moocirclepack/ | |
Canvas-based JavaSript library from 2008 | |
(17) http://www.primordion.com/Xholon/webEdition/HTModL/ | |
"HTModL is valid HTML repurposed for modeling and app (web application) development, rather than HTML in its traditional role as markup." | |
(18) http://metapatterns.wikidot.com/bkgd:metapatsoverview | |
clonon vs holon | |
]]></Notes> | |
<_-.XholonClass> | |
<UuiSystem/> | |
<Node> | |
<InternalNode/> | |
<ExternalNode/> <!-- leaf node --> | |
<AdjacentNode/> <!-- a node that's part of a graph --> | |
</Node> | |
</_-.XholonClass> | |
<xholonClassDetails> | |
<AdjacentNode xhType="XhtypePureActiveObject"> | |
<port name="port" index="0" connector="../InternalNode/ExternalNode"/> | |
</AdjacentNode> | |
</xholonClassDetails> | |
<UuiSystem> | |
<InternalNode> | |
<ExternalNode/> | |
</InternalNode> | |
<AdjacentNode roleName="one"/> | |
<AdjacentNode roleName="two"/> | |
</UuiSystem> | |
<ExternalNodebehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[ | |
var node; | |
var beh = { | |
postConfigure: function() { | |
node = this.cnode.parent(); | |
node.println("I am a " + node.xhc().name() + ", also known as a leaf node."); | |
$wnd.xh.param("MaxProcessLoops","1"); | |
$wnd.xh.param("AllowConfigSrv","false"); | |
this.cnode.remove(); | |
$wnd.xh.xport("_d3,CirclePack", $wnd.xh.root().first()); | |
} | |
} | |
]]></ExternalNodebehavior> | |
<SvgClient><Attribute_String roleName="svgUri"><![CDATA[data:image/svg+xml, | |
]]></Attribute_String><Attribute_String roleName="setup">${MODELNAME_DEFAULT},${SVGURI_DEFAULT}</Attribute_String></SvgClient> | |
</XholonWorkbook> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment