UNIT 3: INTERACTION STYLES, PARADIGMS & DESIGN PRINCIPLES
3.0 Introduction to Interaction
-
Defining Interaction: The cyclical communication between a user and a system to achieve a goal, involving both input (user → system) and output (system → user).
-
Norman's Action Cycle (Seven Stages):
-
Goal formation.
-
Intention to act.
-
Action specification (planning).
-
Execution of the action.
-
Perception of the system state.
-
Interpretation of the perception.
-
Evaluation of the outcome against the goal.
[!TIP] Exam questions often ask to map a user's problem (e.g., "can't save file") to a breakdown in this cycle (e.g., poor feedback in stage 5).
-
-
The Interaction Framework:
| Component | Description | Examples | | :--- | :--- | :--- | | User | Human with intentions, goals, capabilities. | User wants to edit a photo. | | Input | How user communicates with system. | Keyboard, mouse, touch, voice. | | System | The computer/application processing input. | Software executing a "crop" command. | | Output | How system communicates back to user. | Visual display, sound, vibration. |
3.1 Interaction Styles & Paradigms
| Interaction Style | Core Characteristics & Examples | Key Advantages | Key Limitations |
|---|---|---|---|
| Direct Manipulation | 1. Continuous Representation of objects.<br>2. Physical actions (not syntax).<br>3. Rapid, reversible, incremental effects.<br>4. Visibility of objects & actions.<br>Examples: GUI, drag-and-drop, sketching. | Intuitive, learnable, reduces error (reversible), user in control. | Can be inefficient for expert tasks (no shortcuts), not suitable for abstract data. |
| Menu Selection | Hierarchical or flat lists of options.<br>Types: Linear, Hierarchical, Pie, Toolbars, Ribbons. | Low learning curve, prevents syntax errors, discoverable. | Can be slow (deep hierarchies), consumes screen space, limited expressiveness. |
| Form Fill & Dialogue | Structured data entry via fields, labels, defaults, validation.<br>Used for: Configuration, Wizards. | Good for predictable, structured data. Ensures data completeness. | Can be rigid, tedious for free-form input, poor for exploration. |
| Command Language | Textual, syntax-based commands.<br>Types: Natural, Pseudonatural, Formal (SQL, shell). | Concise, composable (combine commands), powerful for experts, automatable. | Steep learning curve, memorization required, high error rate for novices. |
| Conversational / NL | Dialogue-based (chatbots, assistants).<br>Challenges: Ambiguity, Context, Turn-taking, Error recovery. | Feels natural, hands-free, good for simple queries. | Brittle, poor at complex tasks, requires robust error handling, privacy concerns. |
| 3D / VR / AR | Interaction in immersive 3D spaces.<br>Nav: Flying, walking-in-place.<br>Selection: Ray-casting, hand tracking. | High sense of presence, intuitive for spatial tasks. | Cybersickness, expensive hardware, imprecise input, design complexity. |
| Tangible / Gestural | Physical objects or body motions as input.<br>Touch: Pinch, swipe.<br>In-air: Leap Motion. | Can be very intuitive, engaging, leverages real-world skills. | Discoverability is low (no visible cues), fatigue, precision issues, no "undo" metaphor. |
[!TIP] Key Contrast: Direct Manipulation (exploratory, reversible, visual) vs. Command Language (concise, composable, syntax-based). Exams love this comparison.
3.2 Fundamental Design Principles
A. Usability Goals & Nielsen's Heuristics (10)
| # | Heuristic | Meaning & Example |
|---|---|---|
| 1 | Visibility of system status | Keep user informed (e.g., loading spinner). |
| 2 | Match between system & real world | Use user's language, familiar metaphors. |
| 3 | User control & freedom | Clear "exit" (e.g., undo, cancel). |
| 4 | Consistency & standards | Same action → same result (internal & external). |
| 5 | Error prevention | Better than good error messages (e.g., disable invalid buttons). |
| 6 | Recognition rather than recall | Make options visible (menus vs. commands). |
| 7 | Flexibility & efficiency of use | Accelerators for experts (keyboard shortcuts). |
| 8 | Aesthetic & minimalist design | No irrelevant information. |
| 9 | Help users recognize, diagnose, recover from errors | Plain language error messages, constructive. |
| 10 | Help & documentation | Easy to find, task-focused, not too long. |
B. Core Interaction Principles (Don Norman)
-
Affordance: Perceived & actual properties that suggest how to use an object (e.g., a button looks pressable).
-
Signifier: A mark or signal that communicates where the action should take place (e.g., a label, an arrow).
-
Feedback: Immediate, informative response to an action (e.g., button press animation).
-
Mapping: Relationship between controls and their effects (e.g., spatial mapping: left/right arrows move object left/right).
-
Constraints: Limits on possible actions (Physical: size of button; Logical: only numbers in a field; Cultural: red means stop).
-
Consistency: Similar operations use similar elements (Internal: within app; External: across platform).
C. Cognitive Principles
- Fitts's Law: Time to acquire a target is a function of target size (W) and distance (D).
$$T = a + b \cdot \log_2\left(\frac{D}{W} + 1\right)$$
> **Implication**: Make frequent targets larger and closer.
- Hick's Law: Decision time increases logarithmically with number of choices.
$$T = k \cdot \log_2(n + 1)$$
> **Implication**: Simplify menus, group options, prioritize.
-
Miller's Law: The number of objects an average person can hold in working memory is 7 ± 2.
Implication: Chunk information (e.g., phone numbers: 555-555-5555).
-
Gestalt Principles (how we group visual elements):
-
Proximity: Objects near each other are grouped.
-
Similarity: Objects that look similar are grouped.
-
Continuity: We prefer smooth, continuous paths.
-
Closure: We fill in gaps to see complete shapes.
-
Figure/Ground: We separate foreground from background.
-
3.3 Designing for Specific Input & Output Modalities
| Modality | Input Devices & Techniques | Output & Display |
|---|---|---|
| Keyboard | Text entry, shortcuts (Ctrl+C), chords (Ctrl+Alt+Del). | N/A |
| Pointing | Mouse, touchpad, stylus. Trade-off: Accuracy vs. Speed vs. Fatigue. | Cursor, selection highlight. |
| Speech | Dictation (continuous) vs. Command (discrete). | Speech output (TTS), auditory cues. |
| Sensors | Accelerometer (tilt), GPS (location), Camera (vision). | Visual overlays (AR), vibration alerts. |
| Visual | N/A | Layout (grids, alignment), Color (contrast, meaning), Typography, Animation (feedback, orientation), Alerts (modal vs. non-modal). |
| Auditory | N/A | Earcons (abstract sounds), Speech (concise), Sonification (data-to-sound mapping). |
| Haptic/Tactile | N/A | Vibration (alerts), Force Feedback (resistance), Braille (displays). |
[!TIP] Multimodal Interaction: Combining input (e.g., touch + speech) or output (visual + sound) can leverage strengths and compensate for weaknesses of single modes.
3.4 Prototyping Interaction
| Fidelity | Purpose | Techniques & Tools | Focus |
|---|---|---|---|
| Low-Fidelity | Explore structure, flow, content quickly & cheaply. | Paper prototypes, storyboards, wireframes (sketches). | What content? Where on screen? What sequence? |
| High-Fidelity | Test detailed visuals, micro-interactions, look-and-feel. | Interactive mockups (Figma, Adobe XD, Sketch). | How does it look? How does it animate? What is the pixel-level detail? |
| Wizard-of-Oz | Simulate intelligent system behavior (e.g., AI, speech) with a hidden human. | User interacts with "system," experimenter manually provides responses. | Testing interaction logic before the technology exists. |
| Video Prototyping | Demonstrate a complex, future scenario (e.g., mobile AR). | Storyboard → shoot video of a simulated interaction. | Communicating vision, evaluating concept in context. |
3.5 Evaluating Interaction Styles
-
Inspection Methods:
-
Heuristic Evaluation: Experts review interface against Nielsen's 10 Heuristics. Find: Usability problems, not solutions.
-
Cognitive Walkthrough: Step-by-step analysis of a task. Ask: Will the user know what to do next? Will they see the correct action? Will they understand the feedback?
-
-
User-Based Testing:
-
Quantitative Metrics:
-
Effectiveness: Error rates, success rates.
-
Efficiency: Time on task, time to first action.
-
Learnability: Improvement over repeated trials (learning curve).
-
-
A/B Testing: Randomly show users two variants (A & B) of an interaction style. Compare key metrics (e.g., conversion rate, task time).
-
-
Qualitative Methods:
-
Questionnaires: System Usability Scale (SUS), User Experience Questionnaire (UEQ).
-
Interviews & Think-Aloud: Rich insights into user's mental model and frustrations with the interaction style.
-
[!TIP] Choosing an Evaluation Method: Use Heuristic Evaluation early for cheap, quick problem finding. Use User Testing later to validate with real users and measure performance.