Human-Computer Interaction Lecture 6

Study Notes

Human-Computer Interaction Lecture 6

The lecture explores the role of design in Human-Computer Interaction (HCI)
Students question the importance of design in the context of development-focused careers
Instructors clarify that the course aims to provide a holistic understanding of design, not exclusively to prepare students for design jobs.
Students should also understand the design process, even if aiming for development roles
Talented students may excel in design, not development
Developers often handle design when designers are absent
Understanding the design process helps developers collaborate effectively with designers
Interaction design is valuable for anyone involved in creating software or other interactive systems

Design-Development Process

The handoff process is a one-way transfer from design to development stages.
The handshake process is an ongoing feedback and iteration process between design and development

Wireframes

Wireframes are schematic outlines of screen layouts, using simple shapes like rectangles, circles, and lines, with placeholder text (e.g., "Lorem ipsum").
They prioritize structure over aesthetics.
They depict the basic elements and layout, serving as an early representation of the system architecture
Wireframes facilitate early feedback, communication and decision making before extensive design or visual details are included

Purpose of Wireframes

Wireframes help visualize the basic structure of a page, simplifying choices before adding design elements like colors and images
They help teams establish a shared understanding early, saving time and resources
Encourages feedback on structure and functionality, independently of visual aspects like color and typography
Helps prevent issues that arise from missing or disorganized elements early

Wireframes, When?

Create wireframes after initial user research findings, including site maps
As soon as possible after understanding users needs and site map

Wireframing "Industry Standards"

Text is generally represented by horizontal lines or placeholder text.
Images use rectangles or circles.
Calls to action are rectangles or circles
Proper annotation improves clarity

Wireframing Process, How?

Start with hand-drawn prototypes
Remember that a wireframes main function is to develop a solid design; no visual aesthetics are needed early in the process
Sketch at least five versions of each screen.
Implement iteration cycles to incorporate feedback when possible
The key is to quickly translate design ideas into a visual representation
Do not focus on details like straight lines, precise spacing, or alignment

Wireframing Tools

Wireframing software tools like Figma, Adobe XD, Sketch, Balsamiq, pencil-and-paper can aid the process after paper-based prototypes

Wireframing Example (Dog Walking App)

An example demonstrates how wireframes for a dog walking app are drawn and varied

Description

This lecture delves into the significance of design within Human-Computer Interaction (HCI). It emphasizes the necessity for all students, including those in development roles, to understand design processes to enhance collaboration and effectiveness in software creation.