Book Image

UX for the Web

By : Marli Ritter, Cara Winterbottom
Book Image

UX for the Web

By: Marli Ritter, Cara Winterbottom

Overview of this book

If you want to create web apps that are not only beautiful to look at, but also easy to use and fully accessible to everyone, including people with special needs, this book will provide you with the basic building blocks to achieve just that. The book starts with the basics of UX, the relationship between Human-Centered Design (HCD), Human-Computer Interaction (HCI), and the User-Centered Design (UCD) Process; it gradually takes you through the best practices to create a web app that stands out from your competitors. You’ll also learn how to create an emotional connection with the user to increase user interaction and client retention by different means of communication channels. We’ll guide you through the steps in developing an effective UX strategy through user research and persona creation and how to bring that UX strategy to life with beautiful, yet functional designs that cater for complex features with micro interactions. Practical UX methodologies such as creating a solid Information Architecture (IA), wireframes, and prototypes will be discussed in detail. We’ll also show you how to test your designs with representative users, and ensure that they are usable on different devices, browsers and assistive technologies. Lastly, we’ll focus on making your web app fully accessible from a development and design perspective by taking you through the Web Content Accessibility Guidelines (WCAG).
Table of Contents (19 chapters)
Title Page
About the Authors
About the Authors
About the Reviewer
Customer Feedback

360° of UX

Now that we've covered the history of UX and understand the broad impact of UX as a usability measurement in a different context, we need to narrow it down to design thinking, human-centered design, and user-centered design as the core user-focused disciplines in which UX is rooted. At a quick glance, these disciplines all look the same, and they have similar steps and overlapping themes, but in essence, they have different outcomes. The type of project will determine the methodology used and required outcomes; there is no singular winning formula in UX.

Design thinking and human-centered design (HCD)

Design thinking is a methodology that was established in the late 60s to help businesses with creative problem-solving, and only became well known with the awareness of UX through IDEO, a global design company, during the early 90s. IDEO designed the first manufacturable mouse for Apple and was one of the market leaders in advancing HCD. According to IDEO, design thinking consists of five steps to creating anything of value (note that the focus is on anything of value, not necessarily a digital product, such as a website or mobile app).

  1. Empathize: Understand the users you are designing a product or service for.
  2. Define: From the research, define the user's needs.
  3. Ideate: Generate as many ideas as possible to encourage innovation to solve the problem.
  4. Prototype: Create a prototype to illustrate and test the idea.
  5. Test: Use the prototype to test the idea with real users.

Design thinking is a methodology used on which to base UCD principles (which we'll discuss in more detail in the following section) and assist in the iterative process to problem solve and ensure the user's needs are met. IDEO has also developed useful toolkits to simplify design thinking in which one is to create a memorable acronym for HCD that is hear, create, and deliver:

  1. Hear: It focuses on the people you're creating the solution for. What is it that the user desires? Is the proposed solution focusing on the needs of the user?
  2. Create: It relates to the long-term benefits for the business. Is the solution that's being built for the user a viable option that's not just profitable but also a sustainable business model?
    1. Deliver: It relates to technology and the business' operational strength to create the solution. Does the solution strengthen the company's core operational capabilities as well as advance other areas of the company that are not as developed?

The focus is always on human-centered innovation to create practical and workable solutions for the user. These solutions are not limited to a digital product, such as a website or mobile app, but can be applied to any possible product the user interacts with, such as a bicycle, chair, or hairdryer. The terms design thinking, HCD, and UCD are used interchangeably in the industry and are commonly seen as the same thing. Even though they have some major overlapping similarities, they are indeed different. We've already discussed design thinking, so let’s look at the definition of HCD before we dive into the UCD process.

Human-centered design (HCD) is an approach to interactive systems development that aims to make systems usable and useful by focusing on the users and their needs and requirements, and by applying human factors/ergonomics, usability knowledge, and techniques. This approach enhances effectiveness and efficiency; improves human well-being, user satisfaction, accessibility, and sustainability; and counteracts possible adverse effects of use on human health, safety, and performance. ISO 9241-210:2010(E)

HCD is the standard of usability based on the universal characteristics of people in general, while UCD is more focused on a segment of people and their personality traits and unique behavior.

User-centered design (UCD)

User-centered design (UCD) is the design philosophy that provides guidelines within the software development cycle to always focus on the user's wants, needs, and limitations to create the best possible end product for the user. This philosophy does not prescribe which tools to use and can thus be applied to waterfall or agile developments methodologies.

Even though many organizations adjust the UCD scope and the naming of steps, the basic foundation of the UCD PROCESS is always the same: RESEARCH, CONCEPT, DESIGN, DEVELOP, and TEST. After each cycle, iterations are made based on the users' feedback, thus improving the final product.

  • Research: Conduct in-depth research that includes competitor benchmarking, field studies, focus groups, contextual, and individual interviews, just to name a few of the research techniques available, and collect sufficient data and insight into the user’s needs to develop useful personas that will guide the rest of the UCD process.
  • Concept: The data collected in the research phase will define the scope and requirements of the project, while the personas will guide the usability goals and user scenarios for the user testing that will be performed using paper prototypes. Challenges will quickly be highlighted by the user’s interaction with the prototype and solutions can be proposed to streamline the concept.
  • Design: At the design stage of the UCD process, the concept will be pretty solid with user-testing to support the project requirements and direction. The technical and functional requirements can be fleshed out in more detail with task flows, user journeys, wireframes, and prototypes together with visual designs of what the concept will look like after implementation.
  • Develop: The concept can be rock solid and the visual designs breathtakingly beautiful, but if the implementation does not focus on meeting the best practice guidelines and accessibility standards, the usability of the product will be highly affected.
  • Test: After implementation, the final product is tested using focus groups, field studies, customer surveys, performance analysis, and so on, to highlight any usability issues to improve the product during the next cycle. The UCD process is an iterative cycle that measures and evaluates the initial scope and requirements, and ensures the product is on track and improved with each cycle.

UCD, also called user-driven development (UDD), incorporates lean startup principles with the methodologies of agile development. The focus of UDD is to make the user part of the development cycle and not treat the user as an external factor. With this approach, the UX strategy will also need to adjust to the development cycle, depending on which software development methodology is being used, when creating a product.

Software development methodologies

Understanding the two main software development methodologies, waterfall and agile, will give more context to how the two main UX approaches, Lean UX and Agile UX, are related to each other, and the benefits of each.

  • The waterfall methodology, a traditional project management approach to the process, focuses on sequential phases within software development. One step must be done before the next step can be started, hence the waterfall reference. This approach focuses on software developers first collecting the entire project's requirements before building the architecture, after which the design is done, followed by the development step and, finally, testing for deployment. With the waterfall approach, there is no room for iteration or improvement. When a step has passed, you cannot go back to make changes. This methodology that has been used for years is very rigid and does not allow for improvement, which contradicts the core essence of UX, which is iteration, testing, and improvement.
  • The agile methodology is the modern software development approach that combines several iterative-focused practices to create a repetitive development cycle within the project life cycle. The development cycle consists of the same steps as the waterfall approach; the difference is that this development cycle will start from the first step as soon as the last step is done. This allows the different teams involved in the creation of the website to work on specific features (smaller parts within the bigger picture) and release it live for users to access. These features can be tested, and improvements can be made in future development cycles. In this context, the development cycle is done within a set period of time called a sprint. Depending on the company and project, this period of time can vary from one week to up to three weeks, in which a cross-functional team of specialists have to finish a specific set of development tasks for release. After the completion of these developments tasks, the quality assurance (QA) team will test and sign off for deployment.

Lean UX versus Agile UX

The basic concept of Lean UX is an inexpensive, analytics-driven approach to create a Minimum Viable Product (MVP), and drive the development of the MVP with creating a demand in the market using user feedback.

A Minimum Viable Product (MVP) can be any product, not necessarily a digital product, but in this case, we refer to a digital product, which can be a software application, website, or mobile app, that only has the bare minimum features to make it usable by the user.

From the user's feedback interacting with this MVP, improvements are made in the development phase and then released again. Thus, the user's response is only measured after release and using the product. This approach unites product development and business through constant measurement and ensures a digital product can be created in a short period of time. The testing and validation of the product are done through three basic steps--build, measure, and learn.

Agile UX is derived from the agile methodology and incorporates short status meetings in regular intervals with cross-functional teams to improve communication. It's all about the collaboration of teams and the delivery of the product by uniting designers and developers during the product development cycle. What makes Agile UX effective is the fact that you're testing against fixed outcomes. You have full control over the amount of sprints needed to create a specific feature, and with each sprint you analyze, test, and reiterate every change made in the previous sprint. This ensures a continuous improvement of quality and refinement of the product.

It's natural to assume that if you adopt a Lean UX or Agile UX approach, it will replace traditional UX. On the contrary, these approaches complement the tradition UX and make it more flexible to fit into the dynamic environments we find ourselves in when developing digital products. To put this statement in context, let's briefly look at what tradition UX is. Tradition UX relies on the core principles of design and usability; first do all the research and groundwork, and then go into development.

Agile UX produces a more refined, high-quality product, while Lean UX produces several products that are less refined but refinement increases with each released. It seems that Agile UX is perfect, so why bother with Lean UX? The original agile methodology focuses on an improved smooth process for software development and, unfortunately, design was never included in this process. Agile UX is about building a product faster with less risk, despite what it looks like. So, Agile UX is not so perfect after all. A lot of companies use both interchangeably, depending on the project. Agile UX fits naturally into the agile culture of software development, and Lean UX brings in the inexpensive data-driven approach to improvements. There is no right or wrong way. Use the methodologies that work within your environment and your project to deliver the best product for the user.