 |
 |
||
Design Tidbits
Tools for Design and Visualization
- Eurovision Song Contest 2011 and NodeXL: A Perfect Match – Part I
- Eurovision Song Contest 2011 and NodeXL: A Perfect Match – Part II
- Eurovision Song Contest 2012 and NodeXL: A Second Brief Encounter
- 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
- Password Usability: To Protect or Prohibit? new
- How to Increase Online Sales? new
- Progressive Disclosure
- User Experience and Experience Design
- A Humanistic Framework for 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
- Introduction to Design Thinking
- 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
- Responsive (Web) Design
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
- Designing for a Workforce That Acts More Sustainably – Part 1: Action Fields for Designers
- Designing ... Sustainably – Part 2: Action Items for Designers
- Designing ... Sustainably – Part 3: Designing for Remote Collaboration and Communication
- Designing ... Sustainably – Part 4: Using Ambient Media to Support Awareness of Remote Colleagues
- Designing ... Sustainably – Part 5: Using Persuasive Design/Technology
- Designing ... Sustainably – Part 6: Replacing Physical Objects with Virtual (Digital) Ones
- Using Ambient Media to Support Awareness of Remote Colleagues – Part 1: Examples and Proposals
- Using Ambient ... Remote Colleagues – Part 2: Ideas
- A Proposal for Playful Interactive Persuasion: The "Employees' Commute Calculator" (ECC) – Part 1: The Easy ECC (E2C2)
- A Proposal ... (ECC) – Part 2: Ideas for a More Advanced Version
Links & More
Appendix: Fighting (with) Hierarchies – Presentation Techniques II
By Gerd Waloszek, SAP AG, SAP User Experience
WebToc | Box Notations | Hyperbolic Browser
See standard presentation techniques
This page shows examples of new presentation techniques for hierarchies. Some one them are already available as commercial products.
WebToc
Applications
- Displays the contents of a web site, classified by type of information
Authors
- David Nation, Ben Shneiderman, a.o. (University of Maryland, HCIL)
Links
Remarks
- Participated in the browser competition
Box Notations
Treemap
Purpose
- Treemap is a hierarchy-viewing object that displays up to thousands of elements at once showing multiple attributes. By recursively partitioning an element's rectangle among its children, a treemap presents the "big picture" of a hierarchy giving users X-ray vision into their mountains of data. Zooming, enter/leave notification, select actions, and much more are supported.
Applications
- Display of large tree structures in WinSurfer (Windows) or TreeViz (Macintosh) as found in Web sites
Authors
- Ben Shneiderman, a.o. (MIT)
Links
- http://www.cs.umd.edu/hcil/treemap/index.shtml
- Overview article "Treemaps for space-constrained visualization of hierarchies" (Ben Shneiderman): www.cs.umd.edu/hcil/treemap-history/index.shtml
TreeViz
Basis
- TreeMap technique
Applications
- Displaying the contents of a web site or directory structure, classified by type of information (Macintosh version)
- See also: WinSurfer (Windows version)
Authors
- Ben Shneiderman, a.o. (University of Maryland, HCIL)
Links
- TreeViz: http://www.cs.umd.edu/hcil/pubs/treeviz.shtml
- WinSurfer: http://www.cs.umd.edu/hcil/pubs/winsurfer.shtml
WinSurfer
Basis
- TreeMap technique
Applications
- Displaying the contents of a web site or directory structure, classified by type of information
- See also: TreeViz (Macintosh version)
Authors
- Ben Shneiderman, a.o. (University of Maryland, HCIL)
Links
- WinSurfer: http://www.cs.umd.edu/hcil/pubs/winsurfer.shtml
- TreeViz: http://www.cs.umd.edu/hcil/pubs/treeviz.shtml
Remarks
- Participated in the browser competition
Hyperbolic Browser
|
|
|
Figure 1: An older version of the hyperbolic browser
|
|
Figure 2: An older implementation of the hyperbolic browser, marketed by InXight
|
 |
||
Figure 3: Current implementation of the hyperbolic browser, marketed by InXight and called star tree; click image for larger view |
||
Purpose
- Focus+Context technique for displaying large tree structures. The current node is displayed enlarged while peripheral nodes are displayed smaller but still provide the context for the current node. A geometric transformation into the hyperbolic plane and then into a circle is used for this purpose.
Applications
- Display of large tree structures, such as directory trees, web site structures etc.
Commercial Marketing
- Now marketed by InXight, a Xerox offspring
Authors
- Lamping, J., Rao R. & Pirolli, P. (1995). A focus+context technique based on hyperbolic geometry for visualizing large hierarchies. Proc. ACM CHI '95 Conference, 401-408.
- Rao, R. & Card, S.K.(1994). The table lens: Merging graphical and symbolic representations in an interactive focus+context visualization of tabular information. Proc. ACM CHI '94 Conference, 318-322.
Links
- InXight: http://www.inxight.com/
Remarks
- Participated in the browser competition (winner)
