HCIL MIDTERM

Interaction design

focuses on creating engaging interfaces with well thought out behaviors

Visibility

Users should easily see what actions are possible and what the current state of the system is

Feedback

Immediate and informative feedback should be provided for every action so that users know the result

Consistency

Interface elements should behave in a predictable manner. It helps users learn and adapt quickly

Affordance

Objects should suggest how they can be interacted with. For example, buttons should look like they can be clicked

Constraints

Limiting the range of user actions helps prevent errors. For example, graying out options that aren't available

Error Prevention & Recovery

Good design should prevent errors from occurring, but when they do, it should help users recover easily with clear messages or undo options

Information architecture

involves organizing and structuring content in a way that makes it easily accessible and understandable to users. The goal is to help users find the information they need quickly and efficiently

Hierarchy

Arrange content in a clear hierarchy, from general to specific

Labels

Use familiar and intuitive labels for navigation menus and categories

Search and Filter Options

Provide effective search tools and filtering to help users locate specific information quickly

Simplicity

Keep navigation simple and not overwhelming with too many options

User Flow

Design the navigation to follow logical paths that align with user goals, guiding them smoothly from one step to the next

Low fidelity prototypes

are simple, rough representations of a product. They are used to communicate design concepts without going into detail

Purpose

The main goal of low fidelity wireframes is to map out key features and user flow. They focus on structure, layout, and functionality, not on visual details

Speed

Low fidelity wireframes are created quickly using simple tools such as pen and paper or basic software like Balsamiq or Figma

Collaboration

These prototypes encourage feedback early in the design process from stakeholders and users, as they are easier to modify

Content Placement

They include placeholders for content (e.g., headlines, images, buttons) to define the basic structure of the interface without finalizing details

Define User Goals

Begin by understanding what the user is trying to achieve when interacting with your product

Sketch Ideas

Sketch rough ideas of key screens. Focus on layout and functionality rather than aesthetic details

Map User Flows

Create flowcharts or wireframes to visualize the path users take to accomplish tasks. Ensure that the navigation is intuitive

Iterate

Based on feedback from users or team members, quickly make changes and adjustments. Since it's low

Test with Users

Even low-fidelity prototypes can be tested with users to get early feedback on usability and navigation. This helps identify potential issues before investing too much in the final design

Interaction design patterns

are reusable solutions to common problems or challenges in user interface (UI) and user experience (UX) design

Navigation Patterns

help users understand where they are and where they can go within a digital product

Breadcrumbs

Show the user’s current location within the app or site hierarchy

Hamburger Menu

A hidden menu that expands when clicked, often used in mobile apps

Tab Navigation

Divides content into multiple sections or views, allowing users to switch between them

Form Patterns

are essential for collecting information from users, and the design of forms can significantly impact usability

Wizard (Multi step Form)

Breaks a long form into smaller, manageable steps

Inline Validation

Provides real-time feedback to the user as they fill out form fields, immediately highlighting errors or success

Dropdown with Search

For large sets of options, a searchable dropdown helps users quickly find the correct one

Feedback Patterns

provide users with immediate responses to their actions to indicate whether they are on the right track

Notifications

Brief messages that inform the user of changes, updates, or errors

Progress Bars

Indicate the completion status of a task or action, providing feedback and setting user expectations

Modal Dialogs

Temporary pop ups that require user action, used for important tasks like confirmation or warning

Content Organization Patterns

Organizing content in a way that makes it easy to find and interact with is critical for usability

Accordion

Allows users to expand or collapse sections of content, reducing information overload

Card Layout

Uses cards to organize related information into small, digestible pieces, often used in dashboards or content grids

Pagination

Breaks long lists or content into pages, making it easier to navigate large datasets

Action Patterns

guide users through interactions or tasks within the interface

Call to Action Buttons

Prominently placed buttons that encourage users to take the next step (e.g., "Sign Up," "Buy Now")

Drag and Drop

Allows users to move items around the interface, commonly used in file uploads or reordering lists

Undo/Redo

Provides users the option to reverse or reapply actions, ensuring they feel safe making changes

Streamlined purchasing

Amazon’s One-Click Checkout

Undo/Redo

Gmail’s Undo Send

Drag and drop

Spotify’s Playlist Management

Card layout + Drag and drop

Trello’s Card Layout

Infinite Scrolling

Facebook’s Infinite Scroll

Consistency

Patterns ensure that users encounter familiar elements across different parts of the interface, reducing confusion

Efficiency

Designers save time by reusing proven solutions instead of creating new ones from scratch

User friendly

Patterns are tested and validated, meaning they likely meet user expectations, resulting in better experiences

Scalability

Well designed patterns are adaptable across different devices, screen sizes, and contexts

Figma

is a cloud-based design and prototyping tool primarily used for user interface (UI) and user experience (UX) design

Design Tools

Figma offers vector-based design tools, which allow designers to create scalable graphics, icons, and layouts

Prototyping

Designers can link different frames and pages together to create interactive prototypes. This helps in visualizing how a design will function once it's implemented

Collaboration

Multiple users can work together on a design in real-time, offering feedback, suggestions, and even edits. Comments can be added directly to the designs

Cross Platform

Since it's cloud-based, Figma can be used on different operating systems like Windows, macOS, and even directly in the browser, which sets it apart from many other design tools that require dedicated apps

Version Control

Figma allows designers to track changes and maintain version control, so teams can always revert to an earlier version of the design if needed

Design Systems

It supports reusable components, styles, and shared libraries, which is essential for maintaining consistency across large scale projects.
Interaction design

Interaction designers

seek to create seamless experiences for users with interfaces across all device types and platforms

Visibility

the more visible a design element is, the easier it is for users to know and use it. This principle asks designers to prioritize what users need to see in order to achieve their goals and make those elements as clear, visible, and accessible as possible

Feedback

refers to when a design acknowledges a user’s action and makes clear the process that has been completed, conveying the results of the interaction in a clear and understandable way

Consistency

it requires designers to incorporate similar elements and interactions into their designs to improve findability and recognition, reduce the user’s cognitive load, and promote familiarity. Uniformity should be maintained across all versions of the interface, whether viewed on a tablet, laptop, or smartphone

Affordance

in interaction design is when users are directed or given an indication of how to use an item or object. With this in mind, the interaction designer designs objects with specific properties, characteristics, functional cues, or visual cues that imply how they can or should be used, usually without any additional instructions

Learnability

is an important element of interaction design and refers to the ease with which users can understand, accomplish, and become proficient in using a system or interface when they first encounter it

Flexibility

principle in interaction design focuses on providing users with options on an interface that enables them to tailor their experience to better meet their needs

User control

Great user experiences are defined by giving users the feeling of control over the interface they are interacting with. What this often means in practice is enabling them to correct mistakes or change their minds about decisions without consequence

Simplicity

With the goal of creating seamless, uncluttered interfaces that are easy to interact with, the simplicity principle in interaction design is key to creating positive user experiences, particularly for those with less technological experience or who are new to a website or app

Accessibility

in interaction design refers to the creation of interfaces that individuals of all abilities can use and enjoy. To create inclusive experiences for every user, designers need to take into consideration how users with visual, auditory, motor, and cognitive impairments can interact with the interface and enable features to assist them

Error prevention and recovery

This refers to anticipating and mitigating user errors that might occur while interacting with the interface, reducing the impact of those errors, and supporting users in their recovery from the same

Information Architecture

it is the art and science of developing structures and organization to present data and information

Findability

refers to how easily users can locate information, products, or services within a website, application, or search engine. Users can find the information they’re looking for

Navigation

System or process that allows users to move through a website, app, or other digital platforms to find information, products, or features. Users know where they are or easily locate what they need without confusion or frustration

User Experience

refers to the feeling users experience when using a product, application, system, or service

Usability

It refers to the ease with which users can interact with a product, system, or interface to achieve their goals effectively, efficiently, and satisfactorily

Low fidelity prototype

is a simple diagram of an early

Paper prototypes

involves sketching basic user interfaces onto a piece of paper or a whiteboard. Designers and key stakeholders use these low

Wireframes

uses simple blueprints of digital screens to capture basic layouts and content hierarchy. It can also show user interactions in a user flow, which can be helpful for usability testing

Low fidelity prototypes

capture design ideas in rough whiteboard sketches or simple wireframes.

High fidelity prototypes

have the look and feel of a finished product, with interaction designs that are practically pixel perfect they may include animations and clickable screens.