Human-Computer Interaction Lecture 6

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