 |
|
|
Design Tidbits
Design Tools
- My Design Tools – Part I
- My Design Tools – Part II
- Using Prototypes
- UI Toolbox: Capturing and Editing Screenshots – Part I
- UI Toolbox: Capturing and Editing Screenshots – Part II
Simplification
- What Does "Simple" Mean?
- Anti-Simplification – How to Make Life Harder for Users
- Reducing Complexity
- Error Prevention Comes First
- Don't Let Your Interface Lie
- Don't Let Users Suffer from System Weaknesses
Interaction Design
- Bridging the Gap – Part I
- Bridging the Gap – Part II
- Bridging the Gap – Part III
- Did You Make Your Selection? – Part I
- Did You Make Your Selection? – Part II
- Did You Make Your Selection? – Part III
- Did You Make Your Selection? – Part IV
- The Software Works The Way I Think: Beyond Point and Click
- A Layman's View on Interaction Styles – Part I
- A Layman's View on Interaction Styles – Part II
- Selecting Objects By Attributes – Part I
- Selecting Objects By Attributes – Part II
Screen Design
- The Art of Hiding – Part I
- The Art of Hiding – Part II
- Screen Layout – Part I: General Considerations
- Screen Layout – Part II: Layout Hierarchy
- Screen Layout – Part III: Examples
Hierarchies
- Hierarchies - Categories vs. Vectors
- Fighting
(with) Hierarchies –
Part I: Basics - Fighting
(with) Hierarchies –
Part II: Presentation - Appendix: Fighting (with) Hierarchies – Presentation Techniques I
- Appendix: Fighting (with) Hierarchies – Presentation Techniques II
Visual Design
- Some Color Mysteries
- Some Mysteries of Colored Text
- Animation – The Chili Pepper of the Web
- Appendix: Definitions of the Most Common Types of Animation on the Web
Design Process
- The Construction Cycle – Another Way to "Organize" the Design Process
- User Feedback
- What Does User Integration Mean for Software Design?
- Mapping a Conceptual Interface to a Physical Interface
Web, Web Applications, Web Design
- The Web – A Short Introduction
- An Introduction to Designing User Interface Controls at SAP
- From Dropdown Listboxes to Comboboxes
- List Box Tweaks (Part II)
- Concept Statements and Website Messages – Part I
- Concept Statements and Website Messages – Part II
Performance
- Waiting at the Computer: Busy Indicators and System Feedback – Part 1
- Waiting at the Computer: Busy Indicators and System Feedback – Part 2
- Waiting at the Computer: Busy Indicators and System Feedback – Part 3
- Human Performance at the Computer – Part 1: Introduction
- Human Performance at the Computer – Part 2: Making Applications More Responsive
- Human Performance at the Computer – Part 3: Perceived Performance
- Human Performance at the Computer – Part 4: On the Way to Performance-Oriented UI Guidelines
- Addressing a "Design Issue:" Start-Up Time
- Examples of Poor Responsiveness
Miscellany
- Adding Value to Your Interface by Using Simple Math and Matching
- Refreshing Three HCI Laws: Fitts' Law, Hick's Law, and the Power Law of Practice
- How Much Documentation Do Applications Need? – A Simple Example
- Human-Computer Dialog: How Good Does "Good Enough" Need to Be to Appear "Perfect"?
- Narrative User Interfaces
- Golden Rules for Bad User Interfaces
- Universal Usability
- User Interface Controls and Interaction Techniques of Horror
Links & More
Appendix: Fighting (with) Hierarchies – Presentation Techniques I
By Gerd Waloszek, SAP AG, SAP User Experience
Windows Explorer | Macintosh Finder | Macromedia Dreamweaver – Site View | Hierarchical Browser | Text Notation vs. Box Notation – Lisp
See advanced presentation techniques
This page shows examples of current presentation techniques for hierarchies that are used in commercial products, such as operating systems.
Windows Explorer
Windows Explorer: The tree to the left displays nodes only; the contents of the selected node is displayed as a flat list to the right.
Macintosh Finder
List view in Mac OS: displays nodes and leaves, i.e. folders and files.
A windows for each directory level in the Mac OS: Each level may individually display the items on the respective level either as icon list, as flat list or as tree, depending on the users preferences.
Macromedia Dreamweaver – Site View
Site view in Macromedia Dreamweaver: Tree control displaying nodes and leaves, i.e. folders and files in one view
Hierarchical Browser
Left: The R/3 Session Manager uses an hierarchical browser to select and start an application. Right: The Masterfinder from Olduvai is an alternative to the Macintosh Finder and uses a hierarchical browser.
The hierarchical browser displays a path through a hierarchy, such as a hard disk directory. It also displays the nodes that reside on the same level as the folders on the path.
Text Notation vs. Box Notation – Lisp
Lisp is a programming language used in Artificial Intelligence (AI). Lisp expressions, although called lists, are trees, which are defined using pairs of brackets. The box notation to the right is formally equivalent to the text notation.
A Lisp function in textual notation
Note: The Treemap follows a similar principle when creating the box notation from a tree presentation. |
The same function in box notation ("GraL" = Graphical Lisp, Waloszek 1993) |
