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


User Experience (UX) is one of the most important factors to keep in mind when creating a digital product. With a highly competitive world where brands fight for the user’s attention, loyalty, and money, the usability and enjoyment of a product play a fundamental role in its success. It sounds simple enough to create a product that’s loved by millions of users, but there’s a lot more to UX than creating an easy-to-use, aesthetically pleasing user interface. UX is a broad discipline with an intricate set of interlinked components that contribute to the overall experience a user will have with a digital product; however, the core focus is usability. Usability is one of the key components that drives an enjoyable user experience.

This book will introduce you to the core UX principles and practical methods for creating websites that are not only beautiful, but easy to use and fully accessible. Understanding the core principles of UX will enable a true understanding of the user, their behavior and needs, as well as how to effectively satisfy these needs. This understanding will help enhance your brand by creating a golden thread from your product to the user and establishing a trust relationship. Following practical UX methodologies will enable you to apply this understanding to product research, design, and development and testing so that you create an effective and user-friendly web product. UX research methods provide clear direction and guidelines for conducting research on a concept or product. This can then be tested and improved to increase user retention. By bringing your UX strategy to life with task flows, wireframes, and prototypes, it’s easy to find holes in user journeys that can potentially sabotage the relationship. Implementing conventional web accessibility technical standards will ensure that the product complies with usability requirements and is accessible for all users, including users with special needs.

What this book covers

Chapter 1, The Fundamentals of UX, discusses the core principles of UX, such as Design Thinking, Human-Centered Design (HCD), and the User-Centered Design (UCD) process, and how these principles are connected with software development methodologies. The reader will learn the core principles of UX to understand the different aspects of UX within the life cycle of a project, the environment, and the people involved.

Chapter 2, Stand Out from Your Competitors, gives an overview of basic brand theory with the focus on the importance of UX for a brand and how this relationship can build a strong brand that stands out from its competitors. The reader will learn the significant role that UX plays in building a brand, and how applying basic UX principles can improve not only the brand’s identity but also ensure the brand's superiority over its competitors.

Chapter 3, Create an Emotional Connection with the User, covers how to build a trust relationship with the user by creating a digital personality the user can relate to. Guidelines on how to use a tone of voice that is customary when communicating with the user as well as the use of subtle visual interactions within the user interface will be discussed. The reader will learn how to effectively communicate with the user to establish trust and credibility that will evolve in an emotional connection.

Chapter 4, Best Practices for Usability Within the User Interface (UI), gives the essential guidelines to create a user interface that complies to the highest standard of usability on a digital platform. An overview of the design standards from the world's leading software giants--Apple and Google--will be discussed. The reader will learn how to create an aesthetically appealing and effective design that meets the usability standards for a quality digital product.

Chapter 5, Set a Solid Foundation - Research and Analyze, provides an overview of user research methodologies and processes. It will help the reader lay down a solid foundation of reliable data to build a user-friendly product. The reader will learn the importance of research and data for building a successful product, and how to conduct research effectively.

Chapter 6, Create a UX Strategy - Users and Content, looks at how to use research and data to create a UX strategy that includes the various users being catered to and the way information should be structured for these users to achieve their end goal within a digital product. The reader will learn how to focus on users’ behavior and mould a smooth user journey that supports the UX strategy for a digital product.

Chapter 7, Bring Your UX Strategy to Life with Wireframes and Prototypes, explores the different stages of rolling out a product, from setting the look and feel to establishing what features and functionality will be included in the final product. This includes practical advice for creating effective moodboards, storyboards, wireframes, and prototypes. The reader will learn how to distinguish between the importance of wireframes and visual designs, and how to create effective prototypes for management and the development team.

Chapter 8, Build Your Product - Devices, Browsers, and Assistive Technologies, touches on the more technical aspects of catering for different technologies such as different devices, browsers, and assistive technologies people may use to interact with the product. The features and principles of responsive and universal design are explored. The reader will gain a high-level overview of how to develop a product for different devices, from desktop, tablet, and mobile to different browsers, for example, IE, Chrome, and Safari, based on the operating system the user uses as well as for different assistive technologies a person with special needs may use.

Chapter 9, Optimize Your UX Strategy - Test, Test, Test, focuses on practical UX methodologies to measure and test the web app with users. In particular, usability testing, analytics, and A/B testing are explored. The reader will learn to create a metric analysis and test all aspects of the UX strategy, while implementing the changes to build a successful digital product.

Chapter 10, The Basics and Benefits of Web Accessibility, looks at the fundamentals and benefits of web accessibility, the assistive technologies to cater for, and the legal implications if a digital product is not accessible to all users. The user will learn the basics of web accessibility, the impact it has on users and the digital product, and how to test products for accessibility.

Chapter 11, A Practical Guide to Web Accessibility, offers practical guidance on how to implement web accessibility guidelines such as the Web Content Accessibility Guidelines (WCAG) 2.0 to ensure that a digital product is accessible to all users, despite their limitations. The reader will learn about the fundamental technical standards for web accessibility, and WCAG 2.0 and WAI-ARIA to design and develop for user with special needs and assistive technology.

What you need for this book

UX is a discipline that has no software dependencies. Most of the exercises in this book can be done using a pen and paper only; however, you will need an internet browser with internet access to acquire the full extent of UX resources provided in the book.

Who this book is for

If you’re a designer, developer, or just someone who has the desire to create websites that are not only beautiful to look at but also easy to use and fully accessible to everyone, including people with special needs, UX for the Web will provide you with the basic building blocks to achieve just that.


In this book, you will find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.

Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "The bitmap graphic format (.bmp) for images."

A block of code is set as follows:

<form action="post">
 <label for="username">Username</label>
 <input id="username" type="text" aria-required="true" />
 <label for="password">Password</label>
 <input id="password" type="text" aria-required="true" />

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

<button type="submit" aria-disabled="true" aria-describedby="usernameError passwordError">Login</button>

New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: "Clicking the Next button moves you to the next screen."


Warnings or important notes appear in a box like this.


Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book-what you liked or disliked. Reader feedback is important to us as it helps us develop titles that you will really get the most out of.

To send us general feedback, simply email [email protected], and mention the book's title in the subject of your message.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the color images of this book

We also provide you with a PDF file that has color images of the screenshots/diagrams used in this book. The color images will help you better understand the changes in the output. You can download this file from


Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books-maybe a mistake in the text or the code--we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.

To view the previously submitted errata, go to and enter the name of the book in the search field. The required information will appear under the Errata section.


Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at [email protected] with a link to the suspected pirated material.

We appreciate your help in protecting our authors and our ability to bring you valuable content.


If you have a problem with any aspect of this book, you can contact us at [email protected], and we will do our best to address the problem.