Knowledge Basev.0000786 (work in progress!)

Topic: User Interface


Article Title: Visual Vocabulary for Information Architecture

Intro: Overview of organizational modules of a page and site

Excerpt: Diagrams are an essential tool for communicating information architecture and interaction design in Web development teams. This document discusses the considerations in development of such diagrams, outlines a basic symbology for diagramming information architecture and interaction design concepts, and provides guidelines for the use of these elements.

Excerpt: Relationships between elements are depicted with simple lines or connectors. These conceptual relationships will inevitably translate into navigational relationships -- but not all navigational relationships will appear in the diagram. In the case of information architecture, these relationships are commonly reflected through a hierarchical organization of pages into trees.

Article Title: Taxonomies and Trees

Intro: On use of trees generally

Excerpt: We are discovering that traditional knowledge hierarchies that have served us so well are unnecessarily restricted when it comes to organizing information in the digital world.

Excerpt: In the physical world, a fruit can hang from only one branch. In the digital world, objects can easily be classified in dozens or even hundreds of different categories. In the real world, multiple people use any one tree. In the digital world, there can be a different tree for each person. In the real world, the person who owns the information generally also owns and controls the tree that organizes that information. In the digital world, users can control the organization of information owned by others.

Excerpt: But traditional taxonomic trees aren't something we can throw away without a thought. They are an amazingly efficient way of organizing complexity because they enable us to focus on one aspect (e.g., that's an apple) while keeping a universe of context (it's a fruit, part of a plant, a type of living thing) in the background, ready for access. Tree structures are built into our institutions. They may even be built into our genes. So we are in a confusing and fertile period as we try to sort out what works and what doesn't. Without trees, how would we organize college curricula, business org charts, the local library, and the order of species? How will we organize knowledge itself?

Excerpt: When text search isn't the right solution — for example, at e-commerce sites where people may not know the names of the products they're looking for — a more dynamic way of creating and presenting trees, called faceted classification, is coming into its own. Invented in the early 1930s by Shiyali Ranganathan, an Indian librarian, it applies a pre-defined set of parameters (or facets) to its objects.

Excerpt: Because they are unambiguous, trees work well where information can be sharply delineated and is centrally controlled. Users are accustomed to browsing trees, so little or no end-user training is required. But trees are expensive to build and maintain and require the user to understand the subject area well... Faceted systems work splendidly where an application is being used by such a wide range of users that no one tree is going to match everyone’s way of thinking. They are also easier to maintain than trees because adding a new item requires only filling in the information about the facets, rather than having to make a decision about exactly which category it should go into. Tagging systems are possible only if people are motivated to do more of the work themselves, for individual and/or social reasons. They are necessarily sloppy systems, so if it's crucial to find each and every object that has to do with, say, apples, tagging won't work. But for an inexpensive, easy way of using the wisdom of the crowd to make resources visible and sortable, there's nothing like tags.

Article Title: Digital Web Magazine - User-Centered Design for Large Government Portals

Excerpt: The bottom-up approach starts by detailing the metadata "facets" used to describe content items. The facets are useful for creating more flexible navigation schemes. While, a navigational tree structure limits content to one location within the hierarchy, faceted navigation allows content to live dynamically within the system and to be accessed from a number of different perspectives.

Excerpt: For improved experiences, designers and project teams must consider tailoring search results to their audiences. A few options to improve search for government sites include: Segmenting results sets: Present results as sets of digestible chunks, like Top Text results, Top Image results, Top Help/FAQs, and Most Popular searches. Show categorical relationships: For user orientation, indicate the relationship of individual search results with the navigation scheme of the web site. For example, Business > Commerce > Forms Departmental affiliation: Governments will continue to be divisional creatures. Indicate departmental ownership of services and information even if users have navigated by non-divisional means. Integrated search results and indexes--by topic, division, or alphabetically--give users options for quick access to services and information. These and other utility features should be anchored within a navigation header always accessible to users.

Article Title: Functional Requirements for Trees

Intro: Listing of components for tree view

Excerpt: Basic Concepts & Terminology as related to trees shall be introduced. Types of Trees: An overview of the species of trees shall be presented. Traversal : The purpose of tree traversals shall be covered with an emphasis on recursion. Breadth first traversals of a general tree shall be illustrated followed by depth first traversals of binary search trees, including in-order, pre-order and postorder algorithms.


Term Definition Event
Tree A non linear data structure which allows information to be retrieved rapidly No event.
Subtree A tree whose root is a child of another tree The tree formed by 33-34-18 shall be highlighted in blue.
Ancestor The parent of a node and all of the ancestors of the parent Nodes 18-34-53 shall be highlighted in blue and a text box with the word “Ancestor” shall appear next to each node. A text box shall appear next to node 4 with word “Descendent”.
Descendent The children of a node and all of their descendants All of the nodes to the right of node 53 shall be highlighted in blue and a text box next to each shall appear with the word “Descendent”. A text box shall appear next to node 53 with the word “Ancestor”.
Parent The immediate predecessor of a node Node 94 shall be highlighted in blue and a text box shall appear with the word “Parent”. Nodes 23 and 88 shall have a text box appear with the word “Child”.
Child The root of a subtree of a node Nodes 94, 19 and 45 shall be highlighted in blue and shall have a text box appear with the word “Child”. Node 21 shall have a text box appear with the word “Parent”.
Sibling Two nodes that have the same parent Nodes 18 and 33 shall be highlighted in blue and shall have a text box appear with the word “Sibling”. Node 34 shall have a text box appear with the word “Parent”.
External Node or Leaf A node that has no children Nodes 33, 4, 23, 88, 19 and 45 shall be highlighted in blue and shall have a text box appear with the word “Leaf”.
Internal Node A node that is not a leaf Nodes 18, 34, 21 and 94 shall be highlighted in blue and shall have a text box appear with the word “Internal Node”.
Root The node at the first level Node 53 shall be highlighted in blue and shall have a text box appear with the word “Root”.
In Order Predecessor The left most node on the right side of the root in an ordered tree The tree in Figure shall be replaced with that of Figure Node 46 shall be highlighted in blue and shall have a text box appear with the words “In Order Predecessor of Root”.
In Order Successor The right most node on the right side of the root in an ordered tree The tree in Figure shall be replaced with that of Figure Node 57 shall be highlighted in blue and shall have a text box appear with the words “In Order Successor of Root”.
Degree of a node The number of children for a node Node 21 shall be highlighted in blue and shall have a text box appear with the words “Degree 3”.
Level The number of ancestors of a node plus one A horizontal line through Node 53 shall be identified as “Level 1”, a horizontal line through Nodes 34 and 21 shall be identified as “Level 2”, a horizontal line through Nodes 33, 18, 94, 19 and 45 shall be identified as “Level 3” and a horizontal line through Node 4, 23 and 88 shall be identified as “Level 4”.
Height The number of items along the longest path from a root to a leaf Nodes 53, 21, 94 and 23 as well as their links shall be highlighted in blue and shall have a text box appear with the words “Height = 4”.
Size The number of items in the tree A text box shall appear with the words “Size = 11”.

Article Title: Alternatives to Trees

Intro: I have grown to conclude that trees (hierarchies) have been over-used and misused in computer science and software-engineering. Don't get me wrong, trees are a very powerful and concise concept. However, they also have practical limitations in many situations. I will explore their application to file directories and product (commerce) taxonomies.

Excerpt: Trees have been over-used as an organizational tool in many computer applications, especially with regard to categorization of large numbers of items. Past a certain collection size, trees create many organizational management problems. Set-based approaches are often more appropriate, but they have not been popular primarily because of the lack of decent user interface conventions to manage sets. It is time to revisit and explore alternatives, such as sets and set-based user interfaces.

Article Title: Treemaps

Intro: TreeMap Tutorial

Excerpt: Treemaps [Shneiderman,1992b] trace their ancestry to Venn diagrams [Venn,1971]. They are designed to display a special class of trees such as directory trees. Associated with each node in a directory tree is a numeric value giving the size of the files contained in the subtree rooted at the node. Each node is displayed as a rectangle proportional to its value. All descendents of the node are displayed as rectangles inside its rectangle.

Article Title: Treemaps for space-constrained visualization of hierarchies

Intro: Tree structured node-link diagrams grew too large to be useful, so I explored ways to show a tree in a space-constrained layout. I rejected strategies that left blank spaces or those that dealt with only fixed levels or fixed branching factors. Showing file size by area coding seemed appealing, but various rectangular, triangular, and circular strategies all had problems. Then while puzzling about this in the faculty lounge, I had the Aha! experience of splitting the screen into rectangles in alternating horizontal and vertical directions as you traverse down the levels. This recursive algorithm seemed attractive, but it took me a few days to convince myself that it would always work and to write a six line algorithm.

Excerpt: The 5 treemap algorithms implemented are: BinaryTree - Partially ordered, not very good aspect ratios, stable Ordered - Partially ordered, medium aspect ratios, medium stability SliceAndDice - Ordered, very bad aspect ratios, stable Squarified - Unordered, best aspect ratios, medium stability Strip - Ordered, medium aspect ratios, medium stability

Article Title: Degree-of-Interest Trees: A Component of an Attention-Reactive User Interface

Intro: This paper proposes Degree-of-Interest trees. These trees use degree-of-interest calculations and focus context visualization methods, together with bounding constraints, to fit within pre-established bounds. The method is an instance of an emerging "attention-reactive"? user interface whose components are designed to snap together in bounded spaces.

Excerpt: The strategy is the Attention-reactive User Interface (AUI). Such an interface consists of two parts. One part is a method for continuous prediction of the user's instantaneous Degree-of-Interest (DOI) over items in the field of information. The other part is a dynamic visual dis- play of the information that uses the DOI calculation to reduce the time cost of information access or to manage attention. DOI cal- culations could be used to allocate display resources, decide which elements to display, change representation, highlight, or take initiative in a mixed-initiative dialogue

Excerpt: Good visualizations of hierarchical information would (1) allow adequate space in nodes to display information, (2) allow users to understand the relationship of a node to its surrounding context, (3) allow users to find elements in the hierarchy quickly, and (4) fit into a bounded region. This last requirement is desirable in order to insure information fits on a display or that it can compose together with other display elements in an application without the need for scrolling

Excerpt: The Intrinsic Importance of a node is its distance from the root and the Distance of a node is the number of nodes that must be traversed by following parent and child links from the node of interest until reaching the subject node.

Excerpt: The degree of interest calculation is expanded beyond that used by Furnas. Whereas Furnas's calculation assigns all siblings the same distance from the focus node and hence the same DOI value, our calculation treats the children of a parent node as or- dered and assigns fractional DOI offsets to the children based on order distance from the focus node. The farther the sibling from the focus node, the more the fractional decrement in its DOI (but the decrement is always less than 1). This allows the visualiza- tion part of the program to decide which sibling nodes to com- press and how to compress them. Whenever the user clicks on a tree node, that node becomes the focus node, DOI values are re- computed for each node of the tree, the tree is laid out again, and an animated transition moves to the next layout. Multiple-foci can be determined by values of the data or hits in a search.

Excerpt: The last two goals make DOI Trees a modular system component to use in the construction of attention-reactive user interfaces for systems involving access to or sensemaking of large collections of information. The DOI Trees presented are particularly simple instantiations of the attention-reactive user interface idea. More complex dynamic calculations are possible that handle other sources of context or that take over automatically handling other overhead tasks for the user as the user's attention progresses.

Article Title: CSS Trees with LI

Intro: w/o classes, using inheritance, pure CSS

Excerpt: I've managed to resolve my issue without resorting to cluttering the mark-up with presentation-specific content.

Article Title: JavaScript tree CodeThatTree is advanced, cross-browser, state-of-art JavaScript tree control ::

Intro: js, css, standard free for non commercial

Excerpt: CodeThatTree is an advanced javascript tree menu control with the support of many tree types and styles. Tree fully supports CSS customization, XML and database integration, explorer-like tree.

Article Title: JavaScript Tree Menu

Intro: css & javascript. Cross-browser, free

Excerpt: Tigra Tree Menu is a free JavaScript DHTML navigation system for web sites and web applications. Product looks and acts exactly as Microsoft Windows Tree Control. Offering the best performance on the market, script can manage hierarchies containing thousands of items.

Article Title: Graded Browser Support

Intro: Senior Web Developer at Yahoo! Inc. on browsers

Excerpt: Graded Browser Support offers two fundamental ideas: * A broader and more reasonable definition of “support.” * The notion of “grades” of support.

Excerpt: Graceful degradation prioritizes presentation, and permits less widely-used browsers to receive less (and give less to the user). Progressive enhancement puts content at the center, and allows most browsers to receive more (and show more to the user). While close in meaning, progressive enhancement is a healthier and more forward-looking approach. Progressive enhancement is a core concept of Graded Browser Support.

Excerpt: C-grade C-grade is the base level of support, providing core content and functionality. It is sometimes called core support. Delivered via nothing more than semantic HTML, the content and experience is highly accessible, unenhanced by decoration or advanced functionality, and forward and backward compatible. Layers of style and behavior are omitted. C-grade browsers are identified on a blacklist. Approximately 3% of our audience receives a C-grade experience.

Excerpt: A-grade A-grade support is the highest support level. By taking full advantage of the powerful capabilities of modern web standards, the A-grade experience provides advanced functionality and visual fidelity. A-grade browsers are identified on a whitelist. Approximately 96% of our audience enjoys an A-grade experience.

Excerpt: Tim Berners-Lee, inventor of the World Wide Web and director of the W3C, has said it best: “Anyone who slaps a ‘this page is best viewed with Browser X’ label on a Web page appears to be yearning for the bad old days, before the Web, when you had very little chance of reading a document written on another computer, another word processor, or another network.”

The Baseball Project: Steve Wynn, Linda Pitmon, Peter Buck, Scott McCaughey
| lhw | hg | The Real Estate Pros on TLC
The Marley Brothers