terface

Complete lecture notes with examples, princ

references
Contents
3.1 Graphical & Web User Interfaces
3.2 Interaction Styles
3.3 Principles of UI Design
3.4 Graphical User Interface — Deep Dive
3.5 UI Design Process
3.6 Human Considerations in Interface Design
3.7 Technological Considerations in Interface Design
Section 3.1

Graphical & Web User Interfaces

Understanding the two dominant paradigms of modern user interface design

DEFINITION

A User Interface (UI) is the space where interactions between humans and machines occur. It
includes all visual, auditory, and tactile elements that a user interacts with to operate a system.
The UI acts as the translator between human intent and machine action.

Graphical User Interface (GUI)

A Graphical User Interface uses visual components — windows, icons, menus, and pointers
(WIMP) — to allow users to interact with electronic devices. GUIs replaced command-line
interfaces for most consumer applications because they are intuitive and require no memorization
of commands.

■ EXAMPLE

Real-world examples: Microsoft Windows desktop, macOS Finder, Android home screen, GNOME
on Linux. When you drag a file to the trash or click a button to save — that is GUI interaction.

Characteristics of a GUI
• WIMP paradigm: Windows (rectangular panels), Icons (symbolic representations), Menus (lists of
commands), Pointer (cursor for navigation)

• Direct manipulation: Users directly interact with visual representations of objects

• Immediate feedback: Every action produces an immediate visible response

• Metaphor-based: Uses real-world metaphors (desktop, folders, trash can) to ease learning

• Event-driven: System responds to user-initiated events (click, drag, keypress)

Web User Interface

A Web User Interface (Web UI) is a type of GUI that operates within a web browser. It uses
HTML, CSS, and JavaScript to render interactive elements. Web UIs are platform-independent —
they run on any device with a browser.
 ■ EXAMPLE

Examples: Gmail, Google Docs, Trello, Amazon. All of these are fully functional applications living
inside a browser tab.

Platform Always Updated Shareable via URL Requires Network

Independent
Updates happen Any interface state can Traditional web UIs
Works on Windows, server-side. Users be bookmarked and depend on internet;
macOS, Linux, mobile always see the latest shared — impossible in PWAs can work offline
— any browser-capable version native GUIs
device

GUI vs Web UI Comparison

Feature GUI (Desktop) Web UI

Platform OS-specific Cross-platform (browser)

Performance Higher (native) Lower (interpreted)

Installation Required None needed

Updates Manual / auto updater Automatic

Offline Access Full support Limited (PWA)

Hardware Access Full (files, webcam, GPU) Restricted (sandboxed)

Sharability Limited URL-based sharing

Section 3.2

Interaction Styles
Five fundamental paradigms through which humans command and communicate with
computer systems

Interaction styles define how a user communicates intent to the system. Each style has evolved in
response to limitations of the previous one, representing progressive improvements in usability.

1. Command Line Interface (CLI)

The user types text commands directly into a terminal/console. The system interprets the
command and returns text output. This was the dominant paradigm from the 1960s through the
1980s.

■ EXAMPLE

Example: ls -la /home/user/documents (lists all files with details in that directory).
Used in: Unix/Linux system administration, Git version control (git commit -m 'message'), database
management with SQL, DevOps pipelines, Docker container management.

Advantages Disadvantages

Extremely powerful for experts. Supports Steep learning curve. Commands must be memorized.
scripting/automation. Low system overhead. Precise No visual feedback. Hard to discover features.
control.

2. Menu Selection
The system presents a list of options (menu) and the user selects from them. This eliminates the
need to memorize commands — the user simply recognizes and selects an appropriate option.

Menu selection includes: pull-down menus (revealed on click), pop-up/context menus

(right-click), cascading menus (hierarchical submenus), and menu bars (persistent top-level
navigation).

★ KEY POINT

Menu selection follows the principle of recognition over recall — users don't need to remember
commands, they only need to recognize the correct option from a visible list. This is far easier
cognitively.
3. Form Fill-in
The interface presents a structured form with labeled fields, and users fill in the required data. This
style is ideal for data entry tasks where the system needs specific, structured information.

■ EXAMPLE

Examples: Bank account opening forms, government e-services (passport application), hospital
patient admission, university examination forms, e-commerce checkout pages.

Design principles for forms:

• Group related fields together visually

• Clearly mark required fields (asterisk * convention)

• Use appropriate input types (date picker for dates, dropdown for fixed options)

• Provide inline validation and error messages immediately

• Use logical tab order matching reading direction

4. Direct Manipulation
Users interact directly with visual representations of objects using physical actions. First described
by Ben Shneiderman (1983), it is the dominant paradigm for modern GUIs, touchscreens, and
gaming interfaces.

DEFINITION

Shneiderman's three principles of direct manipulation: (1) Continuous representation of objects

and actions; (2) Physical actions (drag, click, swipe) instead of complex syntax; (3) Rapid,
incremental, reversible operations with immediate feedback.

■ EXAMPLE

Examples: Dragging files between folders. Pinch-to-zoom on a map. Rotating an image with two
fingers. Resizing a window by dragging its corner. Dragging a file icon to the trash can to delete it.

■ IMPORTANT

Direct manipulation can be slow for expert users who perform repetitive operations. A power user
may prefer typing a command to clicking through menus. Hybrid interfaces (keyboard shortcuts +
GUI) solve this by catering to both novice and expert users.
5. Anthropomorphic Interface
These interfaces give the computer human-like characteristics — speech, conversational
language, and personality — to make interaction feel more natural and social. Dramatically
amplified by AI assistants.

■ EXAMPLE

Examples: Apple Siri, Amazon Alexa, Google Assistant, ChatGPT, virtual customer service agents,
animated help wizards (like Clippy in early Microsoft Word), voice-controlled smart TVs.

■ IMPORTANT

Design trap: Anthropomorphic interfaces can create false expectations. If a chatbot seems too
human-like, users may be surprised when it fails to understand nuanced requests. Always set
appropriate expectations about what the system can and cannot do.

Interaction Styles — Summary Comparison

Style Skill Required Learning Curve Speed (Expert) Best For

Command Line High (syntax) Steep Very Fast Sysadmin, developers

Menu Selection Low Gentle Moderate General users, apps

Form Fill-in Low Minimal Moderate Data entry, registration

Direct Manip. Low (intuitive) Very gentle Moderate Creative tools, touch
apps

Anthropomorphic None None Varies Accessibility, AI

assistants
Section 3.3

Principles of UI Design
Foundational design laws that separate good interfaces from frustrating ones

Good UI design is not accidental — it follows well-established principles derived from cognitive
psychology, usability research, and decades of empirical testing. These principles act as design
guardrails.

1. Consistency 2. Visibility

Similar actions produce similar results. Same colors, Important functions must be visible. Hidden features
layouts, and terminology throughout the system. cause confusion — if not visible, users won't find it.

3. Feedback 4. Simplicity

System should always inform users about what is Reduce cognitive load. Remove unnecessary
happening — loading spinners, confirmation elements. Perfection is achieved when nothing else
messages, error alerts. can be removed.

5. Affordance 6. Flexibility

Elements should visually suggest how they are used. Support both novice and expert users. Keyboard
A button should look pressable, a link clickable. shortcuts for power users, clear menus for beginners.

7. Accessibility

Design for all users, including those with visual, motor,

or cognitive disabilities. Follow WCAG guidelines.

Shneiderman's 8 Golden Rules of Interface Design

Ben Shneiderman formulated these eight rules (published in Designing the User Interface, 1986)
that remain the most widely cited principles in UI design.

1. Strive for consistency

Consistent sequences of actions in similar situations. Identical terminology in prompts, menus, and
help screens. Example: 'Save' should always be in the same menu location across all application
modules.

2. Seek universal usability

Design for diverse users — novices to experts, young to elderly, different languages and abilities.
Example: Both 'File → Save' menu AND Ctrl+S keyboard shortcut available simultaneously.
 3. Offer informative feedback
Every user action should have a system response. Frequent minor actions get modest responses;
infrequent major actions get substantial ones. Example: Progress bar during file download, 'File saved
successfully' toast notification, error messages on invalid input.

4. Design dialogs to yield closure

Sequences of actions should be organized into groups with a clear beginning, middle, and end.
Example: E-commerce checkout — cart → delivery details → payment → order confirmation with clear
progress indicators.

5. Prevent errors
Design the system so users cannot make serious errors. Disable unavailable options, confirm
irreversible actions, validate input in real time. Example: Graying out 'Undo' when there's nothing to
undo. Confirmation dialog before permanently deleting a file.

6. Permit easy reversal of actions

Actions should be reversible wherever possible. This encourages exploration by reducing fear of
mistakes. Example: Ctrl+Z (Undo) in any text editor or design application.

7. Support internal locus of control

Experienced users want to feel in control. Avoid surprising system-initiated actions; make the user the
initiator. Example: Don't auto-navigate users to a new screen without their action. Avoid auto-playing
videos.

8. Reduce short-term memory load

Miller's Law: short-term memory holds 7±2 items. Use recognition rather than recall. Example: Show
cart contents on checkout page (don't make them remember). Recent file lists in applications.

Nielsen's 10 Usability Heuristics

Jakob Nielsen's heuristics (1994) are used for heuristic evaluation — expert-based usability
inspection.

# Heuristic Description

1 Visibility of system status Always keep users informed about what is happening, through
timely feedback.

2 Match real world Use words and concepts familiar to users. Follow real-world
conventions.

3 User control & freedom Support undo and redo. Clear 'emergency exits' from unwanted
states.

4 Consistency & standards Follow platform conventions. Same words should mean the
same thing throughout.
# Heuristic Description

5 Error prevention Better than good error messages: prevent the problem from
occurring first.

6 Recognition over recall Minimize user memory load. Objects, actions, and options
should be visible.

7 Flexibility & efficiency Shortcuts for experts (invisible to novices). Allow frequent
actions to be tailored.

8 Aesthetic & minimalist design Avoid irrelevant information. Every extra unit competes with
relevant info.

9 Help users with errors Error messages in plain language, precise indication,
constructive suggestions.

10 Help & documentation Even if system doesn't need docs, help should be easy to
search and task-focused.
Section 3.4

Graphical User Interface — Deep

Dive
Architecture, components, and design philosophy of the GUI paradigm

History and Evolution of GUI

1 Xerox PARC — The Original GUI
9 The Alto computer at Xerox PARC was the first computer with a GUI, bitmap display, and mouse.
7 Introduced the desktop metaphor, overlapping windows, and icons. Never commercially released but
3 hugely influential.

1
9
8
3
– Apple Lisa & Macintosh
8 Apple commercialized the GUI after Steve Jobs visited Xerox PARC. The Mac's GUI brought icons,
4 menus, and the mouse to mainstream consumers. Changed personal computing forever.

1
9
8 Microsoft Windows
5 Windows brought GUI to the IBM PC ecosystem. Evolved from tiling windows (3.0) to overlapping (95)
+ to flat design (8+) to modern Fluent Design. Dominates the enterprise market today.

2
Mobile GUI — iOS & Android
0
Touch replaced the mouse as primary input. New interaction vocabulary: tap, swipe, pinch, long-press.
0
7 Smaller screens required completely redesigned GUI paradigms — navigation drawers, tab bars,
+ floating action buttons.

Core Components of a GUI

Windows Icons Menus

Rectangular containers that hold Small graphical representations of Organized lists of commands by
application content. Can be files, folders, apps, and actions. category. Pull-down, cascading,
resized, moved, minimized, Should be universally context, and pie menus are
maximized, closed. Support recognizable. common types.
overlapping (Z-order).
Pointer / Cursor Buttons & Controls Toolbars & Status Bars

Visual indicator of current Interactive widgets: buttons, Toolbars = quick access to

position. Changes shape to sliders, checkboxes, radio common actions. Status bars =
indicate available actions (arrow, buttons, dropdowns. Each with current system state (word count,
hand, crosshair, resize, loading). specific affordances. zoom, connection).

GUI Design Patterns

Design patterns are reusable solutions to commonly occurring UI design problems, encoding
accumulated wisdom.

Pattern Description Example

Master-Detail List on left, detail view on right. Selecting list Email client (inbox + email
item updates detail panel. content)

Dashboard High-level overview of multiple data sources Google Analytics, hospital nurse
and KPIs on one screen. station

Wizard Multi-step process broken into sequential Windows installation, tax software
screens with Back/Next navigation.

Modal Dialog Overlay that demands attention before Confirmation dialogs, login
returning to main interface. prompts

Cards Contained blocks of information about a Pinterest, product listing pages

single entity, arranged in a grid.

Infinite Scroll Load more content as user approaches page Twitter/X feed, Instagram, TikTok
bottom, no pagination.
Section 3.5

UI Design Process
A structured, iterative methodology from problem discovery to polished product

UI design is an iterative process involving research, ideation, prototyping, testing, and refinement.
It typically follows the Design Thinking or User-Centered Design (UCD) framework.

Requirements Gathering & User Research

Understand who the users are, what they need, and the context of use. Methods: interviews, surveys,
1 observation, contextual inquiry, persona creation, journey mapping. Deliverables: User personas, user
stories, journey maps, requirements document.

Information Architecture (IA)

Organize and structure the content and features of the interface. Define the navigation system, page
2 hierarchy, and content relationships. Deliverables: Site map, navigation structure, content inventory,
card sort results.

Wireframing
Create low-fidelity skeletal blueprints of the interface. Focus purely on structure, layout, and
3 information hierarchy — no colors, fonts, or visual details. Tools: pen/paper, Balsamiq, Figma
(wireframe mode).

Visual Design & Mockups

Apply visual design — colors, typography, spacing, imagery — to the wireframe skeleton. Creates a
4 high-fidelity pixel-perfect static representation. Decisions: color palette, typography scale, icon library,
spacing system (8px grid).

Prototyping
Create an interactive, clickable version of the design that simulates the final product behavior. Low-fi
5 prototypes (paper) explore concepts quickly; high-fi prototypes (Figma, web) simulate the real product.
Used for user testing before code.

Usability Testing
Test the prototype with real users. Observe where they struggle, get confused, or make errors.
6 Methods: moderated sessions, think-aloud protocol, A/B testing, eye tracking, heuristic evaluation.
Nielsen's Rule: 5 users reveal ~85% of usability problems.

Implementation & Development Handoff

7 Designers hand off final specifications to developers. Design systems and tools like Figma provide
exact CSS values, assets, and measurements. Post-launch, UX metrics guide further iteration.
Section 3.6

Human Considerations in Interface

Design
How human perception, cognition, and psychology inform every design decision

Effective UI design demands understanding the human beings who will use the interface — their
perceptual limits, cognitive processes, mental models, and emotional responses. Ignoring these
leads to interfaces that are technically functional but humanly frustrating.

Gestalt Principles of Visual Perception

The Gestalt psychologists (1920s Germany) identified fundamental laws of human perception that
describe how we group visual elements:

Principle Description UI Application

Proximity Elements placed close together are Group related form fields together
perceived as a group.

Similarity Elements that look alike are perceived Same color = same category
as a group. (navigation items)

Closure We mentally 'close' incomplete shapes. Progress rings, logo designs, icon
outlines

Continuity The eye follows lines and curves. Charts, arrows guiding attention
through UI flow

Figure-Ground We distinguish subject (figure) from Modal overlays dim background to

background (ground). make modal the focus

Symmetry Symmetric compositions are perceived Balanced layouts for professional,

as stable. calm interfaces

Cognitive Laws
Miller's Law
DEFINITION
 George Miller (1956) demonstrated that human short-term memory can hold approximately 7 ±
2 chunks of information simultaneously. A 'chunk' is a meaningful unit — a digit, a word, or a
concept. Designers use this to limit choices and group information.

■ EXAMPLE

Application: Phone numbers formatted as 98-4123-4567 (chunks) rather than 9841234567.

Navigation menus ideally have 5–9 items. Longer option sets are broken into categories with
submenus.

Hick's Law
DEFINITION

Hick's Law: The time it takes to make a decision increases logarithmically with the number of
choices available. T = b × log2(n + 1), where n = number of choices. More choices = slower
decisions = more frustration.

■ EXAMPLE

Application: Amazon's checkout uses a single primary call-to-action 'Buy Now' rather than
presenting 10 purchase options simultaneously. Remote controls with fewer buttons are easier to
use.

Fitts's Law
DEFINITION

Fitts's Law: The time to acquire a target (click/tap) is a function of the distance to and size of
the target. T = a + b × log2(D/W + 1). Bigger targets that are closer = faster and more
accurate interaction.

■ EXAMPLE

Application: The macOS dock is at screen edge — instantly accessible. The Windows Start button
is in the corner (both X and Y approach zero). Primary action buttons should be large. Destructive
buttons (Delete) should be small and distant from common actions.
Mental Models
A mental model is a user's internal representation of how a system works. Good UI design aligns
the system's actual model with users' mental models, or gradually teaches the correct model
through consistent metaphors and feedback.

■ EXAMPLE

Example: Users expect a 'folder' to behave like a physical folder — you put things inside, and they
are contained there. When cloud storage shows the same file in multiple 'folders' (tags), it violates
this mental model and confuses users.

Accessibility Considerations (WCAG)

Approximately 15% of the global population lives with some form of disability. Accessible design is
both an ethical imperative and, in many jurisdictions, a legal requirement (WCAG 2.1 AA standard).

Visual Impairment Motor Impairment

Sufficient color contrast (4.5:1 for text). Don't use color All functions keyboard-accessible. Large touch targets
as only indicator. Support screen readers with (min 44x44px). Avoid hover-only interactions.
semantic HTML and ARIA labels.

Hearing Impairment Cognitive Impairment

Captions for all video/audio content. Don't use sound Plain language, clear instructions, consistent
as the only feedback mechanism. Transcripts for navigation. Avoid cognitive overload. Support reading
audio. aids.
Section 3.7

Technological Considerations in
Interface Design
How hardware, software, and emerging technologies shape and constrain interface
possibilities

The technology platform fundamentally shapes what is possible in UI design. A designer must
understand the capabilities and constraints of the target technology to create interfaces that are
both aspirational and achievable.

Input Technology Considerations

Mouse / Trackpad Touchscreen

Precise pointing device. Enables hover states, Direct finger/stylus input. No hover state. Min 44x44px
right-click menus, drag-and-drop. Hover = zero-cost targets. Multi-touch gestures (pinch, rotate,
preview (unavailable on touch). three-finger swipe).

Voice Input Gaze / Motion

Natural language commands. No visual interaction Eye tracking for accessibility and AR/VR. Motion
required — accessible eyes-free. Growing with AI sensors for tilt-based interaction. Emerging
assistants. paradigms.

★ KEY POINT

Critical design implication: Hover states are only available on mouse-driven interfaces. Any
information or control that appears only on hover will be completely inaccessible to touch users. All
critical functionality must work without hover.

Platform & OS — Human Interface Guidelines (HIG)

Each operating system has its own Human Interface Guidelines (HIG) — specifying standard UI
patterns, components, and behaviors that users on that platform have come to expect.

Platform Guidelines Design Language Navigation Pattern

iOS (Apple) Apple HIG Clean, minimal, depth/layers Tab bar at bottom, push
navigation
 Platform Guidelines Design Language Navigation Pattern

Android Material Design 3 Surfaces, color roles, motion Bottom nav, navigation
(Google) drawer

Windows (MS) Fluent Design Depth, motion, light, material Navigation view (left
sidebar)

macOS (Apple) macOS HIG Glass, depth, SF Symbols Sidebar, toolbar menus

Web No single Responsive, varies by framework Top nav bar, hamburger

standard menu (mobile)

■ EXAMPLE

Why guidelines matter: When an iOS app uses Android-style navigation, iOS users feel
disoriented because it violates their mental model. Cross-platform consistency within an app is
good; violating platform conventions creates a 'foreign' feeling that erodes trust.

Performance Considerations
• Frame rate: UI animations should target 60fps (16.67ms per frame). Below 30fps feels 'janky'. CSS
transitions on GPU-composited properties (transform, opacity) are faster than animating layout
properties.

• Loading time: First Contentful Paint should occur within 1.8 seconds. Skeleton screens maintain
perceived performance even when actual load is slow.

• Perceived performance: Optimistic UI updates and instant visual feedback dramatically improve
perceived responsiveness even without actual speed improvements.

• Network: Design for unreliable connections — offline states, error states, slow connection feedback. In
contexts like Nepal, significant user base may be on 2G/3G.

Emerging Technology Considerations

AR / VR Interfaces AI-Driven Adaptive UI

3D spatial UI design. No traditional screen. Interaction Interfaces that adapt to individual user behavior —
via gaze, gesture, or controller. Comfort, motion personalizing layout, shortcuts, and content. Raises
sickness, and depth perception are critical design privacy and transparency concerns.
constraints.

Wearables Voice-First / No UI

Extreme space constraints (320x390px). Glanceable Pure voice interfaces have no visual component. All
information. Interaction via swipes and voice. Haptic information conveyed through audio. Requires linear,
feedback replaces visual cues. not spatial, information architecture.
Quick Revision — Key Terms &
Authors
Essential facts and definitions for examination preparation.

Concept Definition Key Author / Origin

GUI Visual interface using WIMP elements (Windows, Xerox PARC, 1973
Icons, Menus, Pointer)

CLI Text-based command interface requiring Unix, 1969

command memorization

Direct Manipulation Users interact with visible representations using Ben Shneiderman, 1983
physical gestures

8 Golden Rules Foundational principles covering consistency, Ben Shneiderman, 1986

feedback, reversibility

10 Heuristics Expert-evaluation guidelines for identifying Jakob Nielsen, 1994

usability problems

Miller's Law Short-term memory holds 7±2 chunks; design George Miller, 1956
must not exceed this

Hick's Law Decision time increases logarithmically with William Hick, 1952
number of choices

Fitts's Law Target acquisition time depends on target size Paul Fitts, 1954
and distance

Gestalt Principles Laws of human visual perception (proximity, Wertheimer/Kohler, 1920s

similarity, closure, etc.)

Affordance Design property that suggests its own use to the James Gibson / Don
user Norman

Mental Model User's internal understanding of how a system Kenneth Craik, 1943
works

WCAG Web Content Accessibility Guidelines — W3C / WAI

international standard for accessible design

■ IMPORTANT
Examination tips: Know the full names of Shneiderman's 8 Golden Rules with examples. Know the
difference between GUI and Web UI. Be able to compare all 5 interaction styles with pros, cons,
and examples. Understand how Miller's, Hick's, and Fitts's Laws apply to real UI scenarios. Know
Gestalt principles and how they are applied in layout and visual design.

Unit 3: User Interface Design · Human-Computer Interaction · Tribhuvan University · 6 Hours