Designing Technology

for People: Purposeful UI

Usability-first, user-centered practice
Chapter 15 frames UI design as iterative, user-centered, and
essential across devices and systems.

NARENDRA U P
Dept of ISE, MITE Moodabidri
 The Golden Rules of UI Design
Three guiding principles that shape usable interfaces

01 02 03

Place the user in Reduce the user’s Make the interface

control memory load consistent
Give users clear choices, Keep information visible, Reuse patterns, labels, and
undo options, and use recognition over recall, layouts so users learn once
predictable responses. and simplify tasks. and apply repeatedly.

NARENDRA U P Dept of ISE, MITE Moodabidri 2

 Place the User in Control — Principles & Examples
Mandel’s interaction principles with concise practical examples

Easy to enter and exit Flexible input modalities Interruptibility and undo
Clear start and stop actions for features so users can begin or leave quickly Support keyboard, mouse, touch, and voice so users can choose what fits them Global undo like Ctrl+Z or an app-level undo stack for quick recovery
Escape or close visible on every modal to allow immediate exit Allow paste, drag and drop, and forms for convenient data entry Immediate cancel for long operations to avoid blocking work
Progress saved on exit where appropriate to prevent data loss Provide alternative input for accessibility and diverse needs Confirm destructive actions when needed to prevent mistakes
Offer lightweight onboarding to help users start without friction Let users choose preferred interaction to suit their workflow Recoverable states and version history to restore prior work

Customization and macros Hide internals for casual users Support direct manipulation
Allow keyboard shortcuts and macros to accelerate frequent tasks Provide simple defaults and guided modes so novices aren’t overwhelmed Drag, drop, resize, and direct edits for intuitive control
User-configurable layouts and themes for personal efficiency Advanced settings tucked away for users who need them Immediate visual feedback on actions to confirm results
Save and reuse common workflows to streamline repeated work Progressive disclosure of complexity as users gain proficiency Objects remain visible and editable so users can iterate
Expose preferences for power users while keeping defaults sensible Tooltips and contextual help available for quick guidance Make results tangible and reversible to reduce fear of change

NARENDRA U P Dept of ISE, MITE Moodabidri 3

 01 02 03 04
Reduce short- Prefer Establish Define
term memory recognition meaningful intuitive
demands over recall defaults shortcuts
Keep choices Use menus, lists, Preselect Expose common

Reduce the User's visible; avoid

forcing recall
and visual cues sensible options
to speed tasks
shortcuts and
show them inline

Memory Load 05 06 07 08
Principles and practical hints to lower short-term Use real- Show state Progressive Provide inline
memory demands world and history disclosure for guidance
metaphors Make recent complexity Tooltips, inline
Leverage familiar actions and Reveal advanced defaults, and
objects to aid current state options as visible
understanding visible needed affordances

NARENDRA U P Dept of ISE, MITE Moodabidri 4

 01 02 03 04

Consistent Constrained Consistent Meaningful

presentation input navigation context
Uniform visual mechanisms Stable navigation indicators
language reduces Limit input types aids orientation Clear cues reduce
cognitive load and
speeds
to prevent errors
and speed task
across tasks and
sessions.
confusion and
help users know
Make the Interface
Consistent — Rules
recognition. completion. where they are.

and Rationale
05 06 07
Practical consistency rules and what breaks when

Product-line Respect de Consequences they are ignored

consistency facto of violations

Shared patterns standards Expect increased
enable transfer of Follow common errors, slower task
learning across conventions to time, and user
apps. avoid user frustration.
frustration and
errors.

NARENDRA U P Dept of ISE, MITE Moodabidri 5

 Usability: Definition, Core Questions, and Benefits
What usability means and why it matters

01 Definition by Constantine and 02 Core questions: Can users learn 03 Key attributes: learnability,
Donahue: ease and efficiency of it? Can they use it efficiently? efficiency, error tolerance,
human interaction Can they recover from errors? satisfaction
Preserves original definition Are users satisfied? Four measurable usability dimensions
Essential usability evaluation questions

04 Measurable benefits: increased 05 Validation: validate via usability

sales, higher customer tests
satisfaction, reduced support Confirm improvements with users
and training costs
Business outcomes tied to usability

NARENDRA U P Dept of ISE, MITE Moodabidri 6

 Interface Analysis and the Four Models
Align user expectations, design intent, and technical reality

User Model 01
Who the users are: goals, skills, context and observable
behaviors.

02 Design Model
How the interface communicates tasks, flows, and controls
to users.
03
Implementation Model
How the system actually behaves and is built under the
hood.

04
User Mental Model
Users' internal expectations about how the interface works.

NARENDRA U P Dept of ISE, MITE Moodabidri 7

 The UI Design Process: Spiral Model
Iterative cycle of analysis, design, prototyping, and validation

Interface Analysis and

Interface Construction
Modeling
(Prototyping)
Define user needs, context, and
Build prototypes from low to higher
interaction models to set scope and
fidelity; prototype early to learn fast
risks

Interface Design Interface Validation

Create layouts, flows, and Usability testing and evaluation
interaction rules; favor simple, milestones drive decisions for next

NARENDRA U P Dept of ISE, MITE Moodabidri 8

 Interface Analysis: Users, Tasks, Content,
Environment
Concise checklist for usability research and design decisions

Users (personas) Tasks (workflows) Environment

(constraints)
Persona attributes: goals, Primary use cases and
skills, demographics, critical paths
Physical: lighting, noise,
accessibility needs
mobility, device posture
Task frequency and task
Experience level and mental criticality
Social: collaboration, privacy,
models
interruptions
Success criteria and error
Stakeholders and decision recovery
Technical: connectivity,
makers
hardware limits, platform
Inputs, outputs, and handoffs
Frequency of use and device between steps
Regulatory and accessibility
preferences
constraints

NARENDRA U P Dept of ISE, MITE Moodabidri 9

 Task Analysis: From Use Cases to Interface Objects
Practical flow for designers: use cases, tasks, objects, attributes

Write informal use cases

Elaborate tasks Prototype mapping
First-person scenarios capturing
Decompose each use case into Use objects and operations to design
goals, context, and success criteria
ordered subtasks and decision screens, controls, and interaction
(example: interior designer
points for interaction flow sequences
schedules client walkthrough)

Extract objects and Define object classes and

actions attributes
Map nouns to objects and verbs to Create classes with attributes and

NARENDRA U P Dept of ISE, MITE Moodabidri 10

 Request
Patient requests refill
Patient portal or phone request initiates
workflow

Clinician review
Clinician confirms medication Workflow and
Check dosage, interactions, and
authorize refill Hierarchical Task
Pharmacy processing Representation
Pharmacy verifies and dispenses
Role-based workflows and task breakdown for
Validate insurance, prepare medication,
prescription refills
record dispense

Completion
Patient notified and follow up
Notification, adherence checks,
schedule follow up

NARENDRA U P Dept of ISE, MITE Moodabidri 11

 Content Presentation Environment

Consistent Use high contrast Adapt layouts for

placement of core for readable text lighting and glare
elements
Apply color Support mobile
Partition content purposefully and and low-mobility Display Content
by task and priority check for color interactions
blindness and Environment
Label sections Prioritize critical
clearly and use Maintain legible content in Analysis
descriptive font sizes and constrained Design rules for consistent, accessible, and
headings spacing contexts responsive presentation

Scale elements Show errors with Provide offline and

responsively for clear messages low-bandwidth
screen sizes and recovery steps fallbacks

NARENDRA U P Dept of ISE, MITE Moodabidri 12

 Iterative Interface Design: Four Practical Steps
Apply the loop with the SafeHome example at each stage

01 02 03 04 05 06

Define Objects Identify Events Depict States Represent User Prototype and SafeHome
and Actions Map triggers that Draw key UI states for Interpretation Iterate Example Artifacts
List UI objects and change the interface each object after events Show how users Move sketches to low- Use case, object/action
allowed user actions. state, internal or occur. perceive state and map fidelity prototypes and list, and a screen sketch
Example: SafeHome external. to mental models; test early with users. embedded at each step.
objects and actions validate with users.
preserved from source

NARENDRA U P Dept of ISE, MITE Moodabidri 13

Design Pattern (when useful, Design Issue (problem,
example) mitigation)
1. Use for recurring interaction needs: 1. Response time: problem - user
CalendarStrip for compact date uncertainty; mitigation - set
selection

2. When to apply: consistency, proven

expectations and show progress

2. Help facilities: problem - users stuck;

Design Patterns and
affordance, predictable behavior mitigation - contextual help,
searchable docs
Key Design Issues
3. Example benefit: reduces learning
When to apply patterns and how to mitigate core
time and input errors 3. Error handling: problem - blame and
usability problems
confusion; mitigation - clear non-
4. Plan: adapt pattern to context; avoid
blaming messages and recovery
pattern misuse that forces workflows
steps

4. Command and menu labeling:

problem - ambiguity; mitigation - use
task-centered, consistent labels and
icons

NARENDRA U P Dept of ISE, MITE Moodabidri 14

 01 Anticipation: predict user needs 08 Metaphors: use familiar models 14

Web: show progressive disclosure Mobile: prefetch Web: real-world analogies Mobile: touch
minimal data metaphors that match gestures

02 Communication: clear feedback 09 Readability: clear typography

Web: inline confirmations Mobile: tactile and visual Web: scalable fonts and contrast Mobile: legible
cues sizes for small screens

Tools and
03 Consistency: uniform patterns 10 Tracking state: show progress and
Web: standard layouts and states Mobile: status
consistent gestures and icons Web: persistent indicators Mobile: concise status

Web/Mobile 04 Controlled autonomy: guide choices

badges

11 Visible navigation: clear paths

Interface Principles
Web: defaults and progressive paths Mobile:
simple decision steps Web: persistent nav bars Mobile: thumb-friendly
navigation
05 Efficiency: minimize effort
Design principles with one-line Web vs mobile
Web: keyboard shortcuts and shortcuts Mobile: 12 Latency reduction: optimize
application tips smart defaults and autofill responsiveness
Web: lazy load and caching Mobile: reduce round
06 Flexibility: support varied users
trips and bundle assets
Web: customizable views Mobile: adjustable
settings and modes 13 Reusable components: build systemized
UI
07 Focus: reduce distractions
Web: component libraries and tokens Mobile:
Web: decluttered pages Mobile: single-task
reusable widgets and patterns
screens

NARENDRA U P Dept of ISE, MITE Moodabidri 15

 Design Evaluation & Summary

Iterative cycle: prototype, evaluate, iterate Moderated usability tests

Repeat cycles from low- to high-fidelity to refine designs Observe representative users performing tasks to surface real issues

Paper prototypes Simple quantitative checks

Fast, low-cost sketches to gather early feedback Track task success and time-on-task qualitatively when formal
metrics aren't available

Heuristic evaluation
Use established heuristics to identify usability issues Chapter summary: UI is the user's window into
software
Evaluation ensures the UI effectively serves user needs

Cognitive walkthrough
Step through tasks from the user's perspective to find problems

NARENDRA U P Dept of ISE, MITE Moodabidri 16