Session 1: Introduction to UI Design

Study Notes

UI is the means by which users interact with computers.
It encompasses both software and hardware.
UI elements include textual, graphical, and auditory information, as well as control sequences.
An example of a common UI is an Automatic Teller Machine (ATM).

Input Controls:
Buttons: Clicking performs an action.
Radio buttons: Select one item from a set.
Checkboxes: Select one or more options from a set.
Text fields: Basic text entry control.
Dropdown lists: Select one item, similar to radio buttons but more compact.
Dropdowns: Display a dropdown list of items.
List boxes: Display a list of selectable items.
Navigational Components:
Search fields: Return results using keywords.
Breadcrumbs: Track location within a program.
Pagination: Divide content into pages.
Tags: Find content in the same category.
Icons: Intuitive symbols for navigation.
Image Carousels: Browse and select items.
Informational Components:
Tooltips: Used with a cursor, usually a pointer.
Notifications: Update messages.
Progress Bars: Indicate a user's progress through a process.
Message Boxes: Prompt users for action.
Modal Windows (pop-ups): Require user interaction before returning to the parent application.
Containers:
Accordions: Vertically stacked list of items, with show/hide functionality

Structure principle: Overall UI architecture; visually, theoretically, and linguistically clear, with paths to useful information.
Simplicity principle: Simple to learn and use; includes only important elements, making common tasks easy, and providing shortcuts.
Visibility principle: All tasks visible; avoid confusing users; provide a straightforward interface for navigation.
Feedback principle: Inform users of ongoing processes, actions, and results; display feedback on success, changes, and errors/exceptions.
Tolerance principle: Design prevents errors, allowing users to learn; informs users about errors.
Reuse principle: Use internal and external components and behaviors to maintain consistency.

Command Language-based Interface: User issues commands in text form (e.g., MS-DOS).
Menu-based Interface: User accesses commands through menus (e.g., cashpoint machines, iPods, mobile phones).
Natural Language Interface: Users interact verbally with the system (e.g., speech recognition software).
Touch Sensitive Interface: Uses touchscreen displays as input/output devices (e.g., smartphones, POS machines).
Web-based Interface: Accepts input from keyboard and mouse; output generated via web pages; viewed using a web browser.
Graphical User Interface (GUI): Input through keyboard and mouse, output on screen; common elements include windows, menus, icons, and pointers/cursors.

Interface Analysis: Defining the requirements and goals of the design.
Interface Design: Creating the initial design concepts.
Interface Construction/Implementation: Building the actual interface.
Interface Evaluation: Iterative testing and adjustments based on user feedback.

User Model: User's existing knowledge and skills.
Mental Model: User's internal representation of a system during interaction.
Design Model: Result of requirements analysis.
Implementation Model: System representation (how it works).

Traditional Color Theory: Scientific method for ascertaining complementary colors.
Modern Color Theory: Mixing colors by adding/subtracting base colors.
Subtractive Color Theory: Some colors are absorbed and some reflected when mixing colors.