LESSON 2: THE DESIGN PROCESS
LESSON 2: The Design Process
ITEC 80 – Human Computer Interaction II
LESSON 2: THE DESIGN PROCESS
LEARNING OBJECTIVES:
In this module, students will acquire a knowledge to:
1. Understand the Design Process
2. Identify Key Principles of Interaction Design
3. Evaluate Emotional Design
4. Apply Iteration and Prototyping Techniques
5. Examine Navigation Design Principles
6. Assess Screen Design and Layout
7. Implement User-Centered Design Practices
8. Understand the Role of Visual Cues in Navigation
LESSON 2: THE DESIGN PROCESS
THE DESIGN PROCESS
The design process refers to the steps or stages that designers go through to create a
solution to a problem or develop a product. It's a structured approach that ensures the final
outcome meets the needs of the users or stakeholders.
The Basics of Interaction and Design
Goal-Driven Design - Interaction design is focused on helping users achieve their goals efficiently.
Designers must understand user needs and create experiences that are aligned with their
expectations and desires.
Usability - The product must be easy to use, with a clear and simple interface. Usability ensures
that users can navigate the system or application without confusion, and it reduces errors.
Feedback - Interaction design provides feedback to users as they interact with a system. This could
be visual (changing colors), auditory (sounds), or haptic (vibration). Feedback reassures users that
their actions have been registered and helps guide them through the interaction.
Visibility - Important information, buttons, or controls must be easily visible and accessible. Users
should not have to search or guess where to go next. Clear labeling and intuitive layouts are key.
Consistency - Consistency across the interface helps users predict what will happen and how
things work. Using the same design patterns, terminology, and layout conventions allows users to
feel more confident when navigating the system.
Affordances - Affordances are clues that show how an object should be used. For example, a
button looks clickable, or a slider looks like it can be dragged. Good interaction design makes it
clear what actions can be taken.
Mapping - Mapping refers to the relationship between controls and their effects. A well-designed
system makes it obvious how actions translate into outcomes (e.g., turning a volume knob to the
right makes the sound louder). Natural mapping reduces cognitive load by making the system
intuitive to use.
Error Prevention and Recovery - Designers anticipate potential user mistakes and build
safeguards into the system to prevent errors. If an error occurs, users should be able to easily
recover, such as by undoing an action or receiving helpful error messages.
User Control and Freedom - Users should always feel in control of their experience. This includes
giving them the ability to undo or cancel actions, providing flexible navigation options, and not
locking them into a specific workflow.
LESSON 2: THE DESIGN PROCESS
Emotional Design - A great interaction design considers the emotional response it elicits from
users. Positive interactions can make the product more enjoyable and engaging, while frustrating
interactions can drive users away.
Iterations and Prototypes
Iteration involves repeatedly refining and improving a design based on feedback and
testing. The goal of iteration is to gradually improve the product or design by addressing issues
and enhancing usability, functionality, or aesthetic appeal. After each test or feedback session,
changes are made to the design, and it is tested again. This cycle continues until the design is
optimized. Iteration allows designers to learn from mistakes and adapt their designs to meet user
needs more effectively. It reduces the risk of launching a product that doesn't work well for users.
Prototype on the other hand, A prototype is an early sample, model, or version of a
product that is built to test ideas, functionality, and design concepts before final development.
Types of Prototypes
1. Low-Fidelity Prototypes - Simple, rough versions of the design, such as sketches or
wireframes. These focus on the basic layout and functionality without detailed visuals.
2. High-Fidelity Prototypes - More polished versions that closely resemble the final product
in terms of visuals and functionality. These may include clickable elements, animations, and
more refined user interactions.
The Role of Prototypes in Iteration
Quick Feedback - Prototypes help designers get early feedback from users without needing to
fully develop the product, making it easier to identify flaws or areas for improvement.
Cost-Effective - By testing ideas through prototypes, teams avoid expensive mistakes during full
development.
User-Centered Design - Prototyping allows designers to involve users early in the process,
ensuring that the final product meets their needs and expectations.
Continuous Improvement - With each iteration, the design gets closer to the optimal solution.
Prototypes serve as a practical way to refine and validate the design during each iteration cycle.
LESSON 2: THE DESIGN PROCESS
NAVIGATION DESIGN
Navigation design refers to the process of creating interfaces that help users move through
an application, website, or system efficiently and intuitively. A well-designed navigation system
ensures that users can find the information they need quickly and complete tasks with ease.
Principles and Elements of Navigation Design
1. Clarity
• Navigation should be clear and easy to understand. Users should instantly recognize the
purpose of each link or button. Labels, icons, and menu items must be self-explanatory to
reduce confusion.
2. Consistency
• Keeping the navigation structure consistent across all pages ensures that users don't get
lost or confused. Elements like menus, icons, and buttons should appear in the same place
and function in the same way throughout the interface.
3. Hierarchy
• Effective navigation design uses a clear hierarchy to show users what is most important.
Organize content into categories and subcategories in a way that makes sense logically,
helping users to drill down into more specific content.
4. Feedback
• Navigation design should provide users with feedback to confirm their actions, such as
highlighting the current page or showing hover effects on clickable items. Breadcrumbs,
for example, show users their path through the site and help them understand where they
are in the system.
5. Simplicity
• Avoid overwhelming users with too many options. Minimal and simplified navigation
menus make it easier for users to make decisions. Hide or group less important options
under secondary menus to keep the primary navigation focused on key tasks.
6. Responsiveness
• Navigation should be optimized for different devices, ensuring a smooth experience on
desktops, tablets, and mobile phones. Mobile navigation often involves collapsing menus
into hamburger icons or swipe gestures, adapting the interface to smaller screens.
7. Accessibility
LESSON 2: THE DESIGN PROCESS
• Navigation design must consider users with different abilities. Ensure that menus are
usable with screen readers, keyboard navigation, and other assistive technologies. Use
proper contrast, font size, and intuitive language to make navigation elements easy to
perceive and understand.
8. Visual Cues
• Use visual indicators such as underlined links, bold text, or different colors to distinguish
clickable elements from static content. Icons and buttons should be easy to spot and
should align with users' mental models (e.g., a home icon for the homepage).
9. Search Functionality
• For complex systems or websites with a lot of content, search bars provide a quick and
efficient way for users to find what they are looking for. Ensure the search function is easy
to locate and offers features like auto-complete or filters to refine search results.
10. Flexibility
• Provide users with multiple ways to navigate the content. For instance, include a global
navigation bar, sidebar menus, and footer links. Flexibility ensures that different types of
users can find the information in the way that suits them best.
Common Types of Navigation
Global Navigation - A set of primary links available on every page, often found in the header or
sidebar, guiding users to key sections of the site.
Local Navigation - Used for specific sections within the site, allowing users to explore related
content within a category.
Breadcrumbs - A secondary navigation system showing users their path from the homepage to
their current location, helping them easily backtrack.
Hamburger Menu - A compact menu represented by three horizontal lines, often used in mobile
design to save screen space.
Tab Navigation - A horizontal set of tabs used to switch between different views or sections within
the same page or app.
LESSON 2: THE DESIGN PROCESS
SCREEN DESIGN AND LAYOUT
Screen design and layout involve organizing visual elements on a user interface to make it
easy to interact with. The goal is to create a visually appealing and functional layout that helps
users achieve their goals efficiently. Below are the important aspects of screen design and layout,
including principles, grouping and structure, and the use of white space.
Principles of Screen Design and Layout
Simplicity
• Keep the design straightforward, avoiding unnecessary elements. Simple layouts reduce
cognitive load and make it easier for users to navigate.
Consistency
• Maintain consistent design patterns, colors, fonts, and interaction styles throughout the
interface. This helps users quickly learn how to interact with the system.
Visual Hierarchy
• Organize elements to guide users' attention to the most important content first. Larger
fonts, bold colors, or highlighted areas can help prioritize information.
Balance
• Distribute elements evenly across the screen to avoid clutter or imbalance. A well-
balanced layout feels organized and professional.
Contrast
• Use contrast (color, size, texture) to differentiate elements and make important items
stand out. High contrast improves readability and accessibility.
Affordance
• Ensure that interactive elements (e.g., buttons, links) visually indicate how they should be
used. For instance, buttons should look clickable, and sliders should look draggable.
Accessibility
• Ensure that your design is usable by people of all abilities. This includes providing readable
text, appropriate contrast, and ensuring that screen readers can interpret content
properly.
LESSON 2: THE DESIGN PROCESS
Feedback
• Provide visual, auditory, or haptic feedback when users interact with the interface (e.g., a
button changes color when clicked). This reassures users that their actions have been
registered.
Grouping, Structure, Order, and Alignment
Grouping
• Elements that are related should be grouped together to make the interface more intuitive.
• How to Group? Use proximity (placing related items near each other), common colors, or
similar shapes to indicate relatedness.
• Example: Grouping form fields (e.g., name, email, password) in a registration form makes
it easier to process.
Structure
• The overall structure of the screen should be clear and organized.
• How to Structure: Divide the layout into meaningful sections, like headers, footers,
sidebars, and main content areas.
• Example: On an e-commerce site, the structure might include a top navigation bar, a
sidebar for filtering products, and a central area for product listings.
Order
• Arrange elements in a logical flow that mirrors how users process information.
• How to Order: Place the most important information at the top or in the center, where
users' eyes naturally go first. Less critical information should be placed further down.
• Example: In a checkout process, the order typically starts with shipping information,
followed by payment details, and ends with a confirmation screen.
Alignment
• Proper alignment ensures a clean, organized appearance.
• How to Align: Use a grid system to align elements consistently. Left-align text for
readability, and ensure buttons or icons are aligned for a balanced look.
• Example: In a form, aligning input fields and labels vertically or horizontally ensures visual
neatness and helps users move through the form more efficiently.
LESSON 2: THE DESIGN PROCESS
Use of White Space (Negative Space)
White space, also called negative space, refers to the empty space around design
elements on the screen.
Importance of White Space
• Improves Readability - White space makes text easier to read by providing breathing
room around it.
• Increases Focus - By separating elements, white space helps users focus on individual
components without feeling overwhelmed.
• Enhances Aesthetic - White space gives the layout a clean, modern look, which enhances
overall user experience.
• Organizes Information - White space helps to visually separate unrelated elements,
improving the clarity and organization of the interface.
LESSON 2: THE DESIGN PROCESS
REFERENCES:
The Design Process Overview: [Link]
the-design-thinking-
process#:~:text=?%E2%80%9D%20for%20instance.-,Stage%203:%20Ideate%E2%80%94Challeng
e%20Assumptions%20and%20Create%20Ideas,problem%20statement%20you've%20created.&t
ext=During%20the%20third%20stage%20of,are%20ready%20to%20generate%20ideas.
Principles of Interaction Design: [Link]
of-interaction-design/
Emotional Design: [Link]
design?srsltid=AfmBOoobL-QKULxYRFHPca4Ytz6lVmSoP5Aix6kJfbK_b50LkHtsNWsv
Prototyping in Design:
[Link]
20broader,to%20become%20a%20final%20product).
Navigation Design Principles: [Link]
Screen Design and Layout: [Link]
User -Centered Design: [Link]
design#:~:text=User%20experience%20(UX)%20design%20is,and%20relevant%20experiences%2
0to%20users.
Visual Cues in User Interfaces: [Link]
cues#:~:text=Visual%20cues%20are%20elements%20such,intuitive%20and%20easier%20to%20
navigate.