Explore

Unit 3: User-Centered Web Design

Last edited 551 days ago by Makiel [Muh-Keel].

User-centered design is about keeping the user's needs in mind when designing and developing a solution. This could mean keeping the user in mind when designing the solution or involving them in the process altogether.

What is user-interface design?

The process of designing the visual and interactive aspects of a digital product. It involves creating the layout, color schemes, typography, buttons, icons, and other elements that users interact with. The goal of UI design is to ensure that the interface is visually appealing, easy to use, and consistent with the brand's identity

Module 9

Benefits of user-centered design:

With the user's involvement throughout the process, products are more likely to meet the user's expectations and requirements.

This could lead to increased sales and lower costs incurred by customer support.

Interface designers generally create products for people in specific contexts and with specific tasks. Including users throughout the design process reduces the chance of a situation occurring with a high risk of human error.

This means the creation of safer products.

Putting designers in contact with users allows a more profound sense of empathy to emerge.

This is critical in creating ethical designs that respect both privacy and the quality of life.

By focusing on all users of a product, designers can recognize the diversity of cultures and human values—a step towards creating sustainable businesses.

10 User-Centered Design Principles

1. Design for users and their tasks

The developer needs to consider the audience, users, application, and characteristics. Most users adopt various systems to support themselves in performing some form of tasks.

2. Maintain consistency

As users navigate through a site, it can become confusing if buttons begin working differently than expected, or radical changes in the design of the site appear. In other words, the behavior of the site elements should remain consistent.

3. Use simple and natural dialogue

The application should be simple in that the only information displayed should be relevant and essential to the task. The language itself should be plain English when possible (when the audience is English-speaking) and ensure the vocabulary is relevant to the target audience.

4. Reduce unnecessary mental effort by the user

If users are trying to perform a task, they are likely to be less worried about the tool and more concerned about the outcomes. Making an interface too complicated can become frustrating because it distracts the end users. Make the interface as intuitive as possible and provide instructions when something needs to be complex.

5. Provide adequate feedback

Anytime a user completes or does something on the site, there should be some form of feedback. No one likes to buy something or submit a task with no assurance that what they did was successful. If the operation takes a little longer, consider adding a progress bar.

6. Provide adequate navigation mechanisms

Being able to navigate cleanly and with ease is another critical consideration. On smaller sites, this could include ensuring that pages or links are named the same, and on larger sites, this could include a navigation map. It is essential to provide clear routes between different windows and to ensure users can exit a page or return to the beginning if they get lost.

7. Let the users take charge

The user understands what they need the most. The system is there to provide information or perform a task.

8. Present information clearly

How the information is arranged is essential. This is usually accomplished by the way a site is designed. This could include proper boxes, spacing, tables, etc.

9. Offer assistance

Sometimes the information will be clear and proper navigations will be in place, but the users will still need assistance. It is important to provide informational tips and icon-labeled buttons when possible to provide this assistance. Any instructions that are provided should be self-explanatory to allow the user to keep moving forward.

10. Error-free

Lastly, ensure the site is free of errors and is navigating users in a way that minimizes errors. This could be accomplished by doing simple things such as incorporating data validation to any type of input.

Phases of User-Design Process

Specify the context of use

Identify the product users, what they will be using it for, and under what conditions.

Specify requirements

Identify any requirements or goals that need to be met for the interface to be successful.

Create design solutions

This phase builds through the interface until there is a complete design.

Evaluate designs

Actual users should be performing usability testing within this phase.

What is the key principle of user-centered design?

If you incorporate data from users, you’re more likely to create designs that fit their needs.

Why is it hard to turn empathy-based concepts into something systematic?

Empathy involves understanding and resonating with the emotions, experiences, and perspectives of others.

Human emotions are complex and nuanced, making it difficult to create systems that adequately address or replicate the depth of human empathy.

What are the results of applying user-centered design?

Helps you translate the wants and needs of end-users into technological solutions.

Participatory Design

An approach to design attempting to actively involve all stakeholders (e.g. employees, partners, customers, citizens, end users) in the design process to help ensure the result meets their needs and is usable.

One of the key benefits of this process is its ability to create an immediate feedback loop by pairing users with the designers and developers.

Mainly suitable for smaller companies.

When thousands or millions of users may use a solution, it may not always be easy to implement participatory design with real accuracy.

The primary roles within participatory design are the designer, developer, and user.

The designer is the one who helps create the layout for the solution.

The developer helps the solution evolve.

The user guides and provides insight into the solution.

Ways for users to be involved in the participatory design process:

interviews

workshops

design clinics

street polling

design clinics

role-playing

Scenario-Based Design

Scenario-Based Design is a design methodology that describes a specific target user trying to achieve a specific goal or perform a specific task in a specific context.

For scenario-based design, the developers create scenarios. The concept of scenarios is used because scenarios were used to describe the outline of a play, but in general, it refers to an event, course of action, or situation.

Three-Phase Process:

analysis

design

prototype and evaluation.

Scenarios provide a thinking tool that help designers explore how design proposals might work in different contexts of use.

Scenarios can also be used as a communication tool as they can serve as a shared language for communication between design team members and between designers and other stakeholders.

Golden Path Scenario - a critical set of steps a user takes to find something valuable to them.

Persona

A fictional design that represented a specific portion of the potential user population.

A Persona is used to research and report about a type of user but not a specific person (Goltz, 2014).

This means that each persona represents a group of people. Once personas have been identified, understanding the use case approach, and engaging users, will become essential to the user interface.

Use Case

A Use Case is a written description of how users will perform tasks on your website.

Help show what a user wants to achieve and what they are expecting the interface to be able to do. Use cases can also help outline and identify the step-by-step instructions for how something should be performed.

Usability Testing

Usability Testing is the validation and verification processes that occur once the developers are done building the solution.

Usability is a quality attribute that assesses how easy user interfaces are to use. The word "usability" also refers to methods for improving ease-of-use during the design process.

Usability is defined by 5 quality components:

Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?

Efficiency: Once users have learned the design, how quickly can they perform tasks?

Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency?

Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?

Satisfaction: How pleasant is it to use the design?

Persona, Use Case, and Usability Testing in User Interface Design

Personas take groups of people and condense them into one singular person. By doing this, usability tests can be run against this one person as a representative of a larger group of people.

Personas and usability cases work together to ensure that a design's functionality is working as it should.

They also work together to ensure that the overall layout and usability are appropriate and adequate for the persona and the user group that it is representing.

Case Approach

A use case is when a group of users is told to try one of the features to see if it works.

The use case approach is a set of actions to get to the desired goal. A possible use case would be clicking on a sign-in button to have a user sign in to a website.

A use case approach needs to be done when something has already been developed, and it needs to be tested (Brake, 2017).

A use case allows users to test the system with set instructions to ensure that it does what it is designed to do.

A use case is expressed in simple, natural language rather than technical jargon. This enables the use case to be understood by a variety of audiences, e.g. customers, users, executives.

Diagrams Used

Swimming Diagram

UML Diagram

⁠

A scenario-based approach takes an already working system and leads users through the learning process with scenarios and other instructions.

The scenario-based approach should be used after all the program issues have been worked out, and it is time to train the rest of the company.

Use-Case occurs before the Scenario-based approach!

Verification and Validation Process

Design Verification is used to ensure that the output does what it should and meets the project's requirements (Guru99, 2019).

The data from the verification process is used to design tests in the validation phase, and it is used when comparing data from the final tests

There are five major parts to the design verification process (Guru99, 2019):

Identification and preparation

Planning

Developing.

Execution

Reporting

Design Validation comes into play when the final design is submitted.

The purpose of design validation is to test the software product after development to ensure that it meets the requirements in terms of applications in the user's environment.

Much of the testing done during the design validation phase is known as a per-user or group test

What's the difference between validation and verification?

Put simply, validation determines if you are building the right product. Does the device work as intended for the end users? Verification determines if you’re building the product right. Are design outputs matching design inputs?

Verification techniques do not involve code execution, while validation techniques involve code execution.

Accessibility

Knowing how to properly design a site accessible by all individuals on all platforms should be one of the ultimate goals for design and development teams.

Having a website with proper accessibility is essential for all users, regardless of disability or hindrance.

People with certain disabilities may have trouble using a website without proper help and specialized tools.

Tools for the vision-impaired, hearing-impaired, and any other disabilities ultimately make the website usable for all people.