User Interface Design Lesson 01 – Importance of User Interface

Primary definition
- Point of human–computer interaction and communication within any digital device, website, or application.
- Manifests through both hardware (display screen, keyboard, mouse, touch surface, speakers, printer) and software (layout, navigation flows, dialogs).
Purpose
- Minimize a user’s effort while maximizing the desired outcome.
- Serve as the user’s perceptual and operational gateway into the system.
Judgment criterion
- Users routinely evaluate an entire system by its interface rather than by its deep functionality.
- A weak UI can overshadow strong underlying capabilities.

Risk of poor design
- Can induce data corruption or catastrophic errors.
- Often responsible for shelf-ware—software that is purchased but never used.
- Leads to aggravation, frustration, stress, and even permanent abandonment of the system.
Economic/time impact
- One extra second per screen ⇒ ≈ 1 additional year of cumulative processing time (large-scale operations).
- $20$ extra seconds per screen ⇒ $14$ additional person-years of labor.
Positive outcomes
- Better clarity = $\approx 20\%$ productivity gain (study on decluttering screens).
- Lower training costs, fewer help-desk calls, higher employee satisfaction, improved customer service.
- Indirect savings: fewer “broken PCs” replaced out of user frustration.
Philosophical maxim
- “The best interface is the one not noticed” – it fades into the background so users focus solely on the task/data.

Field definition
- Interdisciplinary study, planning, and design of how people and computers collaborate so user needs are met effectively.
Relationship to UI
- UI design is a subset of HCI; HCI provides theory, methods, and empirical findings guiding UI practice.
Why HCI now?
- Competitive advantage (Norman, $1990$ ) hinges on user-centered experiences.
- E-transformation investments are costly; ROI depends on usability.
- Users abandon bad interfaces, wasting capital and opportunity.
- Organizations must allocate resources efficiently—HCI reveals where to invest.

Basic goal
- Enhance human–computer interactions by making systems more usable and responsive to user needs.
Long-term goal
- Minimize the cognitive gulf between a user’s mental model and the computer’s model of the task.

Human factors
- Expectations, motivations, enjoyment, aesthetic preferences.
- Physical abilities/limitations (e.g., vision, motor skills, cognitive load).
- Human information-processing characteristics (memory, attention span, perception).
Technical factors
- Hardware constraints (screen size, input devices, processing power).
- Software constraints (performance, platform standards, APIs).
Design balancing act
- Must harmonize human desires/limitations with technical possibilities/limitations.

Two primary categories
- Input → How users convey intentions to the computer.
- Keyboard, mouse, trackball, touchscreen, stylus, voice, gestures, handwriting.
- Output → How the system communicates results and status to users.
- Visual display, audio (speakers), print, haptic feedback.
- Smell & touch output remain largely unexplored frontiers.

Well-designed mix of input & output mechanisms tailored to user needs, abilities, limitations.
Enables focus on content/task, not on the interaction mechanics.

During development
- Early usability fixes are cheaper than post-deployment patches.
- Avoids ripple costs of redesigning mature products.
Operational
- Lower support/training costs, faster onboarding, increased throughput.
- Employees gain satisfaction; customers receive better, faster service.
Strategic
- Competitive differentiation through superior user experience.
- Enhanced brand loyalty and market share.

Three universal levels
- Movement/gestures (lowest, most universal; e.g., pointing, waving).
- Spoken language (middle; most speak $1$ – $2$ languages).
- Written language (highest; fewer write fluently, even fewer type).
Paradox
- Computers historically demand the hardest form—typed input—despite human preference for gestures or speech.
Typing statistic
- Average typing speed ≈ $33 \text{ words/minute}$ .

Pre-1970s
- Rigid command-line dialogs (command language, Q&A, form fill-in) via keyboard.
1970s
- IBM CRT text terminals: monochrome (green on black), many cryptic fields, heavy memory load on users.
1980s
- Emergence of formal guidelines for text screens → grouping, alignment, clearer labels, reduced clutter.
1990s
- Advent of Graphical User Interface (GUI): Xerox Alto & Star introduce mouse-based pointing.
- Visual elements (windows, icons, menus, buttons), richer fonts, colors.
- New widgets: list boxes, drop-downs, spin boxes → reduce memory burden.
2000s & beyond
- Continuous refinement; convergence with mobile/touch, voice assistants, VR/AR.
- Maturing best practices rooted in research + evolving technology.

Mouse becomes primary input mediator.
Point-and-click paradigm nearly eliminates need to memorize command language.
Sparked mainstream adoption (Apple, Microsoft) and transformed everyday computing.

Research into gesture, voice, handwriting input strives to match innate human modalities.
Current systems exist but still lack the universality & richness of typed input in some contexts (accuracy, noise, context ambiguity).

Define HCI and its basic & long-term goals.
Define UI and its two components.
Describe the attributes of the best UI.
List the outcomes of a well-designed UI/website.
Name the three communication levels (gestures, speech, writing) and discuss their prevalence.
Identify the first systems to introduce the GUI.
Explain why screen designs of the $1990s$ were considered special.

"Online treasure hunt" activity leveraging smartphone cameras.
Designed to reinforce observation of UI/UX examples in the real world—learn by hunting and critiquing.