User InterfaceUser Interface

Articles

Article Title: Alternatives to Trees

Intro: A need for alternatives to over-used trees.

Excerpts:

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.
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 for space-constrained visualization of hierarchies

Intro: Different visualizations of trees.

Excerpts:

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.
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: 20 Awesome Pinterest Tools

Intro: Pinterest already offers users some great tools to help them get their accounts get noticed, including a Follow Button and Pin It button which can easily be installed on any website. But with such an active community, it’s no surprise that there are a ton of other interesting tools, apps, and sites which aim to enhance the Pinterest experience.

Excerpts:

WordPress plugins, Pinterest analytics, cool Pinterest layouts and hacks, and mobile access – Pinterest’s vibrant community has pretty much left no stone unturned.
For those truly addicted to the site, Pinterest has an official iPhone app which makes it easy to take your account with you everywhere you go. You can pin photos you’ve taken, or saved, through the app. Android users, however, aren’t as lucky. You can still access all of the site’s features using the HTML5 mobile version of the site in your browser, but have no uploading capability.
One major issue when it comes to using a service like Pinterest as a marketing tool is that you don’t have access to any sort of metrics tools. With Pintics, that’s exactly what you’re going to get. Currently in private beta, we’re going to take an in-depth look at this site very soon. For the time being, we can tell you that you can use the service to manage multiple accounts, and find out more about the traffic and sales your account is generating.

Article Title: Functional Requirements for Trees

Intro: Listing of components for tree view.

Excerpts:

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 3.1.10.5.2-1 shall be replaced with that of Figure 3.1.10.5.3-8. 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 3.1.10.5.2-1 shall be replaced with that of Figure 3.1.10.5.3-8. 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: Treemaps

Intro: TreeMap Tutorial

Excerpts:

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: Graded Browser Support

Intro: An overview of levels of graceful browser degradation in order to make pages more readable more broadly.

Excerpts:

Graded Browser Support offers two fundamental ideas:

* A broader and more reasonable definition of "support."
* The notion of "grades" of support.
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.
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.
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.
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."

Article Title: Information Architecture: The Backbone Of SEO & Usability

Intro: Discusses the importance of understanding user behavior and needs in site development.

Excerpts:

It was clear to me that dragging readers on a merry-go-round of content, with on and off page links and moving images might not be a great user experience. And without good user experience no amount of optimization is going to help a site’s rankings.
Understanding how people search online helps in developing your site’s information architecture. We like things offered in small chunks first. We want our online content delivered fast and simply. We like to stay on task
The issue with putting so much scattered or loosely related information on one page is that the core message is lost. Users want instant gratification. You lured someone to a page. What if they arrive and are met with a crowded noisy room of strangers rather than a calm host who knows why they came and what they want to do next?
Understanding user behavior

One of the clearest mistakes we make in web site development is not understanding the people who use them. Despite the help of personas, user testing, scenarios and marketing data in advance, even the big brand sites struggle to be user friendly. Why is this? One reason is the context in which pages and links are delivered. For findability to work properly, we need to know the words people use to communicate with their surroundings. This may be different online, especially in situations where we can “be anyone” and change who we are.
If Google does incorporate page load times as part of the search algorithm in 2010, this sends a clear message to site owners. If the site on “Peace Sign Painted VW Buses” with Flash, funky cool images and video takes too long to load, another content based site on the same topic may rank higher.

Article Title: Visual Vocabulary for Information Architecture

Intro: Overview of organizational modules of a page and site

Excerpts:

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.
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: Trees

Intro: On making a tree in code and sites

Excerpts:

In this article, I am going to give an introduction to trees. Trees are unique data structures that are used to store data in a tree-like shape. They have many useful applications, which include 3D programs, data compression, Web browsers and even dictionaries. All in all, trees are wonderful data structures.

Article Title: 14 awesome examples of illustration in web design.

Intro:

Excerpts:

Like minimalism, illustrative web design is a very distinct and impactful way to showcase a brand. Illustrations communicate personality, skill and creativity, and if done correctly, ultimately create a completely original presentation that can’t be replicated by other designers.
There are so many reasons to use illustration in your designs. As Webdesigner Depot explains, illustration in web design tends to serve three purposes: Concept reinforcement, decoration and mascots.

Article Title: CliffEberhardt.net | The Official Site of Cliff Eberhardt

Intro: Stop Designing Pages And Start Designing Flows

Excerpts:

For designers, it’s easy to jump right into the design phase of a website before giving the user experience the consideration it deserves.
Design flows that are tied to clear objectives allow us to create a positive user experience and a valuable one for the business we’re working for.
The next time you’re asked to create a new design, step back and ask yourself and your team what user flows you are trying to create through the website, and let that insight drive the design process.

Article Title: Taxonomies and Trees

Intro: On use of trees generally

Excerpts:

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.
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.
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?
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.
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: User-Centered Design for Large Government Portals

Intro: Outline of organizational scheme.

Excerpts:

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

Excerpts:

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
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
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.
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.
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: Without classes, using inheritance, pure CSS

Excerpts:

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

Article Title: JavaScript tree CodeThatTree

Intro: Javascript and css, standard free for non commercial use

Excerpts:

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

Excerpts:

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.

See Display Links
See Admin page
Hide Display Links
Hosted by Pair Networkspair Networks