GUI design
Summary
When designing user interfaces, prioritize fundamental principles: maintain consistency, favor simplicity, reduce visible complexity, and make interfaces smaller for ease-of-use. Understand human interaction stages: forming goals, specifying actions, perceiving system states, and evaluating outcomes. Assist users by making system states clear, allowing exploration with fast responses and unlimited undo, and giving them a sense of control. Minimize user cognitive load by reducing memory demands, enabling easy resumption of tasks, and maintaining consistency. For displaying data, employ high-density strategies like tabular, hierarchical, or graphic arrangements, and low-density strategies like step-by-step interactions, on-demand details, and minimizing irrelevant information.
User interface design principles
This is the basics to think about when designing a GUI, a website, any software with a user interface. See also the very good book “The Design of Everyday Things” by Donald A. Norman, ISBN 0-262-64037-6. I’m not an expert on UI design, so if you can help out please do by adding comments at the foot of the page.
Fundamental principles:
- Consistency is next to godliness
- Simpler is better
- Visible complexity is bad
- Smaller equals easier to us
How humans interact with a system
- Form the goal and the intention
- Specify and execute the action
- Perceive and interpret the system state
- Semantically evaluating the interaction outcome.
Assist the user
- Make the system state explicit: The inner workings of software are hidden from end users who have to figure out the internal state from only a few hints.
- Users act in cycles of action and evaluation.
- Encourage exploration with short response times and unlimited Undo
- Provide end-users with the sense of control.
Minimizing the load on users
- Reduce memory and cognitive load
- Allow a work session to be easily interrupted and resumed without any loss of work (web session timeout for ex making sure all info is on the url)
- Preserve consistencies
Two strategies for displaying data: High density and Low density
High-density
- Tabular arrangement: spreadsheet style
- Hierarchical organization: tree-like hierarchy as in file system graphic representation
- Graph: Data is represented graphically, like a chart or a diagram.
Low-density
- Step-by-step interaction: Wizard style interface
- Details on demand: Some optional data can be shown on user request. Use with care because users feel uncomfortable with a GUI that changes its appearance too much.
- Disable/minimize irrelevant information. There are many ways to minimize data; for example, shading it.