31,19 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Fachliteratur
- Sprache: Englisch
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).
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Veröffentlichungsjahr: 2017
Ähnliche
BIRMINGHAM - MUMBAI
UX for the Web
Copyright © 2017 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published: September 2017
Production reference: 1250917
www.packtpub.com
Credits
Authors
Marli Ritter
Cara Winterbottom
Copy Editor
Safis Editing
Reviewer
Alipta Ballav
Project Coordinator
Devanshi Doshi
Commissioning Editor
Ashwin Nair
Proofreader
Safis Editing
Acquisition Editor
Shweta Pant
Indexer
Rekha Nair
ContentDevelopmentEditor
Onkar Wani
Graphics
Jason Monteiro
Technical Editor
Murtaza Tinwala
Production Coordinator
Shraddha Falebhai
About the Authors
Marli Ritter is a UX specialist and web accessibility evangelist who started off as a basic web designer in the '90s. Creating websites, she recognized the critical link between branding and design early on and spent the next couple of years studying brand communication at Vega School of Brand Leadership in Gauteng, South Africa. During this time, she discovered her passion for education and decided to focus on lecturing web design and development at a selection of private educational institutions within the AdvTech group. This love for sharing knowledge did not stop at lecturing, however, as Marli also worked closely with the Independent Institute of Education (IIE) to develop the curriculum for the revised web design and development qualification. Her time spent in education was invaluable, but her desire to explore new avenues guided her back to the industry. Marli took a leap into the e-commerce sector by joining the Comair Limited team, creating brand-focused digital designs, while doing frontend development on travel brands such as kulula.com, Holiday Tours, mtbeds, GoTravel24, and African Dream Holidays. Once again in search of new adventures, Marli found herself drawn to the vibrant brand and international presence of Travelstart. She joined this dynamic team to help improve UX across multiple countries and languages. This exposure to complex e-commerce systems catering to a broad user base made her more determined to learn design and development techniques that will enhance a user’s experience. This intricate dance between branding, design, development, and the end user is ultimately where her love affair with UX started. Her passion for the field is driven even further by her interest in cultural anthropology, psychology, and human behavior as well as her need to understand a user’s behavior when interacting with digital products. The past couple of years have seen Marli actively raising awareness by giving talks at local MeetUps as well as presenting a paper on the importance of web accessibility for everyday digital products at the annual South African UX Conference. Her mission is to remove the divide between users that are fully able and users with limited abilities, to create a mindset that usability is, in fact, for everyone despite their limitations.
Cara Winterbottom has a lifelong fascination with people, ideas, and data. This first led her toward the fields of psychology and philosophy. During this time, she discovered an interest in technology, especially how it can enable research and design around people, ideas, and data. These two strands converged when she discovered the field of user experience.
Cara has a strong academic background, with degrees in psychology and computer science. Her PhD in computer science was earned through designing, building, and user testing an authoring tool for novices to create 3D interactions for virtual environments. This sparked her interest in user experience. After an academic career of over a decade, Cara joined Flow Interactive, a leading UX agency in Cape Town, South Africa. Here, she learned how to deliver quality research and design work that leverages the best parts of academic rigor and business requirements and processes. For the past 6 years, she has worked as a freelance consultant, further developing these skills in a variety of settings and for a variety of products. The areas of user experience in which she is most interested are qualitative and quantitative research methods, especially usability testing and analysis, information architecture, and interaction design.
About the Reviewer
Alipta Ballav is a thought leader, mentor, and an individual contributor at times. He is a UX researcher with over 18 years of industry experience. A graduate in Visual Arts from the Rabindra Bharati University, Kolkata, he has been instrumental in defining meaningful experiences for global customers across multiple domains. In the recent past, Alipta was a UX researcher at the Stanford Crowd Research Collective--an initiative led by professors and students at Stanford--where he invested time building a sustainable crowdsourcing platform by teaming up with researchers across the globe. Alipta additionally does independent research in the territory of web accessibility and looking into approaches to minimize human computer interaction challenges through multi-modality. He also takes an interest in data science, quantitative techniques, and predictive modeling.
www.PacktPub.com
For support files and downloads related to your book, please visit www.PacktPub.com.
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details.
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.
https://www.packtpub.com/mapt
Get the most in-demand software skills with Mapt. Mapt gives you full access to all Packt books and video courses, as well as industry-leading tools to help you plan your personal development and advance your career.
Why subscribe?
Fully searchable across every book published by Packt
Copy and paste, print, and bookmark content
On demand and accessible via a web browser
Customer Feedback
Thanks for purchasing this Packt book. At Packt, quality is at the heart of our editorial process. To help us improve, please leave us an honest review on this book's Amazon page at https://www.amazon.com/dp/1787128474.
If you'd like to join our team of regular reviewers, you can e-mail us at [email protected]. We award our regular reviewers with free eBooks and videos in exchange for their valuable feedback. Help us be relentless in improving our products!
Table of Contents
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Downloading the color images of this book
Errata
Piracy
Questions
The Fundamentals of UX
UX from the early 20th century
360° of UX
Design thinking and human-centered design (HCD)
User-centered design (UCD)
Software development methodologies
Lean UX versus Agile UX
UX and design disciplines
The unique attributes of UX and UI
Summary
Stand Out from Your Competitors
Branding in modern times
Case study - brand identity versus brand image - Jeep
Branding - visuals
Branding - personality
Branding - relationship
How UX differentiates a brand from competitors
Conducting a competitor UX analysis
Case study - competitor UX analysis of fast food brands
B2B versus B2C
Case study - B2C and UX
Case study - B2B and UX
Summary
Creating an Emotional Connection with the User
Creating a digital personality the user can relate to
Speaking a clear language
Keeping the tone relevant
Being as human as possible
Giving visual rewards
Incorporating micro-interactions in the UI
Making the UI discoverable and giving incentives
Giving guidance through anticipation design
Entertaining by providing useful information
Establishing trust and credibility
Summary
Best Practices for Usability Within the User Interface (UI)
Introduction to UI
Color psychology
The color wheel
Warm and cool colors
Color symbolism
Case study 1 - blue street lighting in Glasgow, Scotland
Case study 2 - blue lighting in railway stations in Japan
Color and web accessibility
Best design practices
Google's Material Design guidelines
iOS Human Interface Guidelines
Case Study - UI design for websites
Brief for the MTH website
UI design
Language and semiotics
Best practices for effective iconography
Case study: languages versus flags
Summary
Set a Solid Foundation - Research and Analyze
Defining and categorizing research
Understanding qualitative versus quantitative research
Deciding when to conduct research
Describing UX research methods
Setting up a research plan
Deciding on a problem statement
Exploring prior knowledge and literature
Planning research methods and logistics
Turning your problem statement into measurable metrics
Choosing a research method
Planning research logistics and creating checklists
Conducting a pilot test
Conducting the study
Analyzing data
Presenting results
Doing expert analyses
Heuristic analysis
Content audit
Using qualitative techniques
Interviews
Tips for interviewing
Observation
Tips for observation
Content analysis
Ethnography example - a financial services broker portal
Using quantitative techniques
Using statistics
Deciding which statistical test to use
Summary
Create a UX Strategy - Users and Content
Creating personas to guide your UX strategy
Characteristics of a useful persona
Building a solid information architecture
Card sorting
How to conduct a card sorting exercise
Case study - Leadtrekker footer evaluation
Constructing a sitemap
Steps to creating a solid sitemap
Creating user journeys
Key components of a user journey
Four steps in creating an effective user journey
Case study - Book Galaxy online book retailer
Creating task flows
Key components of a well-constructed task flow
Example of a task flow
Summary
Bring Your UX Strategy to Life with Wireframes and Prototypes
Setting up moodboards and storyboards
Defining moodboards
Creating a moodboard
Defining storyboards
Creating a storyboard
Case study - creating a storyboard
Deciding what, when, and how to prototype
Choosing what and when to prototype
Choosing how to prototype
Creating wireframes and interactive prototypes
Prototyping tools
Creating a wireframe
Designing the interface
Components of a wireframe
Components of a wireframing tool
An example website - Etsy
A note about responsiveness
A typical wireframing process
Best practices for wireframing
Creating an interactive prototype
Best practices for creating interactive prototypes
Version control
Setting up a pattern library
Designing for responsiveness and accessibility
Summary
Building Your Product - Devices, Browsers, and Assistive Technologies
Understanding the importance of responsive, accessible, and universal design
Designing for varied technologies
Designing for input and output
Designing responsively
Designing for different browsers and operating systems
Designing for accessibility and assistive technologies
Using universal design principles to guide design
Testing your designs on multiple technologies
Summary
Optimize your UX Strategy with Iterative User Testing
Maximizing the value of user testing
Planning, conducting, and analyzing usability tests
Planning usability tests
Designing the test - formulating goals and structure
Designing tasks and metrics
Planning questions and observation
Preparing the script
Securing a venue and inviting clients and team members
Recruiting participants
Setting up the hardware, software, and test materials
Conducting usability tests
Best practices for facilitating usability sessions
Analyzing and reporting on usability tests
Reporting the results of a usability test
Variations on usability testing
Applying analytics effectively-constructing a useful A/B test
Using analytics with A/B testing
Summary
The Basics and Benefits of Web Accessibility
Defining web accessibility
Catering for different types of temporary and permanent special needs
Catering for visual disabilities
Catering for auditory disabilities
Catering for motor/mobility disabilities
Catering for cognitive/intellectual disabilities
Catering for neurological disabilities
Benefits of ensuring your product is accessible
Legal implications for non-accessible products
Assistive technology and the role it plays in developing for accessibility
Testing for accessibility
Summary
A Practical Guide to Web Accessibility
Where to start with web accessibility?
Practical guidelines for analyzing a website's web accessibility status
An overview of the WCAG 2.0
Perceivable
Operable
Understandable
Robust
An overview of WAI-ARIA
Roles
Properties and states
Web accessibility requirements from a design perspective
Case Study - Booking.com analysis of design requirements for WCAG 2.0
Before we part ways
Summary
Preface
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.
Conventions
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" /> <hr/> <label for="password">Password</label> <input id="password" type="text" aria-required="true" /> <hr/>
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 www.packtpub.com/authors.
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 https://www.packtpub.com/sites/default/files/downloads/UXfortheWeb_ColorImages.pdf.
Errata
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 http://www.packtpub.com/submit-errata, 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 https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.
Piracy
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.
Questions
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.
The Fundamentals of UX
User experience (UX) is a popular term in the digital industry; everyone uses it freely in meetings. Business, marketing, design, and development all understand the importance of the user's experience with the digital product they're creating. Building a website or mobile app with an enjoyable user experience sounds simple enough, but this is where most organizations and teams get it wrong. When non-UX professionals speak of what they feel as a better user experience for a specific feature, they usually refer to their own experience as a user in terms of what makes sense to them personally when interacting with that feature, or it's merely their perception of what they feel the targeted user will enjoy and how they will interact with this feature. This perspective is not usually plausible because the person making these assumptions might not represent the actual target market, and their needs might not be the same as the intended user who will be using this feature.
Take, for example, a request that comes in from a business to implement search functionality on a travel website. A team of designers and developers are brainstorming this new feature.The designers feel a better user experience is to focus on UI elements, such as iconography, to give visual cues for guiding the user on how to use the search functionality, while the developers might focus on an additional filter component to narrow search results. Both of these approaches can definitely improve the user experience, but these are, in fact, only personal opinions based on their field of study and experience. The usability of the search component will only really be apparent if it’s tested with real users that interact with this search functionality. The outcome of the user testing can potentially result in the iconography cluttering the UI or the additional filter component not being used at all to find the expected result.
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 drive an enjoyable user experience. So what exactly is usability? According to The International Organization for Standardization, ISO 9241 Ergonomics of Human-System Interaction, the definition of usability is:
From the preceding definition, it’s clear that usability is not just related to technology, like the usability of websites or mobile apps, but is applicable to everything around us, such as the TV remote or the microwave oven. To understand how this term can be so broad, we'll look at a brief history of UX to discover the origins of human interaction with an object, be it a shovel or a computer. Before we get started following is a list of topics that will be covered in this chapter:
History of UX and the rise of Human-Computer Interaction (HCI)
Design Thinking and Human-Centered Design (HCD)
User-Centered Design (UCD) Process and User-Driven Development (UDD)
Software Development Methodologies
Lean UX versus Agile UX
UX & Design Disciplines
Unique attributes of a User Experience (UX) Designer and a User Interface (UI) Designer
UX from the early 20th century
The origins of UX can be traced back centuries, but it was only in the early 19th century that UX started to mold into a distinct discipline. American engineer Frederick Winslow Taylor (1856-1915) pioneered the Industrial Revolution by giving birth to a movement called Taylorism, which focused on how workers interact with their tools to complete tasks efficiently. During the 1940s, Toyota developed a sociotechnical system, called the Toyota Production System, that was recognized as the first Human Centered Production System that focused on the interaction between humans and technology. Toyota's philosophy with this new system included constant improvement, no waste, and an emphasis on respecting team members. This approach included people as part of the improvement process, thus bringing back the human factor that was lost with Taylorism.
Fast forwarding to 1955, Henry Dreyfuss, an American industrial designer, wrote a classic design text called Designing for People in which he focused on people’s experiences, good or bad, with the design of a product. One of the many useful points from his book is how to design for a variety of people with different sizes and abilities, to effortlessly use a service or product.
During the 1970s, a Xerox research center called PARC (Palo Alto Research Center Incorporated) explored the subject of innovations in workplace technology. This experimental project resulted in some groundbreaking technological innovations that we are still using today, for example, the graphical user interface (GUI), the bitmap graphic format (.bmp) for images, as well as the computer mouse to navigate with on a personal computer.
In the early 1980s, human-computer interaction (HCI) was established as a discipline that focused on computer science and human factors engineering, but has grown exponentially the past couple of decades into a broad discipline that focuses on a variety of specialties, such as ergonomics, sociology, cognitive processes of human behavior, accessibility, and human interface design, to name just a few.
Before the rise of HCI as a discipline, the only people who interacted with computers were professionals in the field of information technology, but this changed with the first personal computer that was released in the late 1970s. Any person now had access to a personal computer and could use text editors, spreadsheets, and play computer games, and had the opportunity to learn programming languages. With the personal computer being a technological tool accessible to any person, the GUI, which is the visual interface the person uses to interact with the personal computer, was developed to make it easy to use. Soon after the GUI was implemented, computer screens became cluttered with hundreds of icons that made it hard to find files, and the first extension of HCI, the search functionality, was introduced for users to easily find what they were looking for. Another fundamental extension of HCI was in the 1980s when users were able to communicate with other users via email, which quickly expanded to instant messaging, online forums, and social networks, thus the interaction was not limited to using the computer to do personal tasks but to the computer becoming a communication channel with other humans. Throughout the 1980s, HCI expanded by introducing different devices. Users were not only using desktop computers but started using laptops and mobile phones that became available. From gradual device expansion, technology found its way into the daily lives of the user, such as in their cars and home appliances. It’s clear from the path HCI has taken already that it will keep evolving with humans and become more integrated into their daily lives and in society.
Eventually, in the 90s, cognitive psychologist Donald Norman joined Apple as the vice president of the Advanced Technology Group and gave birth to the term user experience as we know it today.
Norman's writings focus on the user's cognitive experience with products, especially with technological products. He wrote a widely influential text called The Design of Everyday Things. In this book, he promotes the usability and user experience, rather than aesthetics, of a product. Norman's focus on improving usability goes hand-in-hand with the person's perception of the product. Human-related sciences, technical advancement, and design focused disciplines all contribute to the improved interaction between a person and the technology they're using. People are different.
The way they learn and understand concepts, even their own personal perceptions of how they interact with technology, differ. American businessman and philanthropist Charles Thomas Munger established the theory of mental models in the early 90s in the business and finance realm and, from there, it’s been expanded to many other industries, including UX. Due to mental models infiltrating many industries, there are many definitions. Susan Carey defined mental models in her 1986 journal article Cognitive science and Science Education, as follows:
Carey's simplistic definition of mental models paves the way for UX professionals to create unique experiences that make sense to the user. The Nielsen Norman Group, one of the most influential leaders in the UX industry and founded by Jakob Nielsen, Don Norman and Bruce Tognazzini in 1998, highlights the following two points to keep in mind when working with the mental models and UX of a website:
A mental model is based on belief, not facts
. Thus, the model is based on what the user knows or what they think they know about your website.
Individual users each have their own mental model
. Different users will have different mental models of the same website.
The more the user interacts with your website, the more experience they will build up with the website, thus their mental model will change accordingly. The same way the user can interact with other websites that can also adjust to the user's mental model. It's imperative that the UI designer understands mental models and ensure their design patterns; layouts are consistent to reduce cognitive load. In the next chapter, we'll go into more detail on how to design accordingly regarding user's mental models to improve the user experience.
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).
Empathize
: Understand the users you are designing a product or service for.
Define
: From the research, define the user's needs.
Ideate
: Generate as many ideas as possible to encourage innovation to solve the problem.
Prototype
: Create a prototype to illustrate and test the idea.
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:
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?
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?
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.
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.
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.
UX and design disciplines
The UX field of study is exponentially growing at such a rapid rate, and with this expansion comes a variety of different specialties that branch out of UX and into other design disciplines. Even though some of these disciplines seem similar (especially because most of them have the word Design in the title), they have distinctive focal points that differentiate one from the other and contribute to the bigger picture of HCD.
UCD
: Also called UDD, it is the design philosophy that provides the guidelines within a software development cycle to always focus on the user's wants, needs, and limitations to create the best possible end product for the user.
Iterative design
: It follows these UCD guidelines within a development cycle of a digital product that includes research, concept, design, develop, and test. After each cycle, iterations are made based on feedback results, thus improving the final product.
Product design
: It
is the practice of creating an innovative new product for the user.
Interaction design (IxD)
