31,19 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Lebensstil
- Sprache: Englisch
User experience (UX) design provides techniques to analyze the real needs of your users and respond to them with products that are delightful to use. This requires you to think differently compared to traditional development processes, but also to act differently. In this book, you will be introduced to a pragmatic approach to exploring and creating mobile app solutions, reducing risks and saving time during their construction.
This book will show you a working process to quickly iterate product ideas with low and high fidelity prototypes, based on professional tools from different software brands. You will be able to quickly test your ideas early in the process with the most adequate prototyping approach. You will understand the pros and cons of each approach, when you should use each of them, and what you can learn in each step of the testing process.
You will also explore basic testing approaches and some more advanced techniques to connect and learn from your users. Each chapter will focus on one of the general steps needed to design a successful product according to the organization goals and the user needs. To achieve this, the book will provide detailed hands-on pragmatic techniques to design innovative and easy to use products. You will learn how to test your ideas in the early steps of the design process, picking up the best ideas that truly work with your users, rethinking those that need further refinement, and discarding those that don’t work properly in tests made with real users.
By the end of the book, you will learn how to start exploring and testing your design ideas, regardless the size of the design budget.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 385
Veröffentlichungsjahr: 2017
Ähnliche
BIRMINGHAM - MUMBAI
UX Design for Mobile
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: July 2017
Production reference: 1260717
www.packtpub.com
Credits
Authors
Pablo Perea Pau Giner
Copy Editors
Shaila Kusanale
Dhanya Baburaj
Reviewer
Lisandra Maioli
Project Coordinator
Ritika Manoj
Commissioning Editor
Ashwin Nair
Proofreader
Safis Editing
Acquisition Editor
Divya Poojari
Indexer
Mariammal Chettiyar
Content Development Editor
Roshan Kumar
Graphics
Jason Monteiro
Technical Editor
Murtaza Tinwala
Production Coordinator
Shraddha Falebhai
About the Authors
Pablo Perea has been working as a designer for many years, mainly focusing on user experience, user interface, and mobile and web design for companies such us Embarcadero Technologies. His daily work includes researching, prototyping, designing, and testing new ideas and solutions.
He graduated in computer engineering and has a deep knowledge and understanding of different programming languages. As a devotee of technology, he is always learning and investigating new working fields and methods.
He is an adaptable and flexible person who welcomes change and loves meeting new cultures and teams.
Pau Giner is a designer. He likes exploring and prototyping new ideas, and always has a pen to hand.
As part of the design team at the Wikimedia Foundation, he has been designing for Wikipedia and other open projects to ensure that millions of users can easily access the sum of all human knowledge. His design work has explored new ways to contribute, from translating Wikipedia articles to reviewing content with the help of artificial intelligence.
He has organized several design workshops, he got a PhD from the Universitat Politecnica de Valencia for his research on mobile workflows, and he has also published a number of short stories.
Acknowledgments
We would like to thank the effort and support that Torquil Harkness, Maria Perez, and Patricia Caballero have given us, helping us find the right words and providing helpful feedback in the way that only friends can.
About the Reviewer
Lisandra Maioli is a UX Specialist with B.A. in journalism, specialization; in marketing (UC Berkeley), digital marketing (UCLA) and UX design (General Assembly Santa Monica). With over 17 years of an international experience working for large agencies and portals, as well as for small companies, start-ups for clients based in Brazil, US, Italy, Ireland, China and Netherlands, in different positions in Digital Communication--journalism, social media strategy, content strategy, community management, digital marketing, and digital products. Passionate about UX, she has been organizing; events and giving online workshops and lectures on this topic. She is also the author of the UX for High Performance chapter for a digital marketing book published in Brazil, and is currently writing the book Fixing Bad UX, Packt.
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/1787283429.
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 example code
Downloading the color images of this book
Errata
Piracy
Questions
Design Principles and General Design Planning
Switching your perspective to focus on the user
Getting organizations to adopt a user-centered perspective
Design principles
Needs from our human condition
Needs from general expectations
Needs from the specific context of use
General design planning
Being pragmatic
Design is not about making things look nice
Users are not able to tell you what they need
You (or your team) are not your users
User experience is not a list of features
Your goal is not to make your client or boss happy
Summary
Research - Learning from Your Users
How we will do that?
Getting to know your users
Mental model - understand how your users think
What is the conceptual model?
Researching methods
Observation and interviews
Affinity Diagram
The method steps
Card sorting
Open card method steps
Closed card method steps
When is it convenient to perform this method?
Tree Test
The method steps
How to improve the organization
Content organization
Area naming
The working memory limit
Surveys
What we want to discover?
Find the participants
Determining the questions
Open-answer questions
Questions with pre-established answers
Humanize the forms
Research documents
The Persona Document
How should I create a persona document?
Better with an example template
Demographics
Picture
Description
Domain and technical expertise
Goals
Frustrations
Motivations
Scenarios
User journeys
Create a User Journey
Competitors' analysis
Functionality analysis
Vocabulary analysis
Target users, supported users, and non-supported users
Being pragmatic
Recruiting participants
Avoiding biases
Looking for the signs
Summary
Exploring Ideas - Sketching
Adopting the sketching mindset
Sketching basics
Sketching tools
Producing results fast
Adjusting your focus
Timeboxing with the Crazy Eights technique
Organizing your exploration
Decomposing your problem
Identifying conflicts
Communicating your ideas
Creating storyboards
Organizing critique sessions
Being pragmatic
The perfect is the enemy of the good
This is not about inspiration
Connecting the conversation to the design goals
Making tradeoffs visible - you cannot emphasize everything
Summary
Mobile Patterns - Web App, Android, and iOS Best Practices
Web application approaches - responsive, adaptive, and flexible
Responsive behavior
Fluid
Adaptive
Hybrid
Frontend frameworks
Design in columns
Mobile application design patterns
Mobile user interface design patterns
Navigation
Sliding drawer
Upper area tabs
Bottom menu
Placing actions in the screen to facilitate navigation
Back button
Multiscreen task
Explore navigation
Floating buttons
Notifications
Movement in notifications
Circle hint
Count notifications app icon
Dialogs
Galleries with miniatures
Arrows
Portrait (vertical) and landscape (horizontal) orientations
User interactions
One-tap interaction
Share functionality
Comment and review
Secondary actions
Handling errors
Overlay tips
Roadblocks
In-content messages
Displaying a message as the first block of content
Other mobile user interface design patterns
Mobile design behavior patterns
Progressive disclosure
Lazy login
Swipe down to refresh
Search suggestions
Reciprocity
Android and iOS differences
Physical buttons
Screen density and features
UI elements
Being pragmatic
Explore different solutions
Summary
Detail Your Solution - Wireframes and Mockups
Understanding wireframes
Wireframes as a functionality specification document
Layout
Gestures
Transitions
Trajectory
Timing
Duration
Speed
Mockups
Testing your designs with real content
Specifications and assets for multiple screens
Understanding units and pixel densities
Specifications file
Automated solutions
Touch target
Images with good resolution
Pixel perfect icons
Being pragmatic
Learn how to code
Test in real environments
Stay up to date on the latest trends
Summary
Prototyping - Bringing Your Ideas to Life
Adopting the prototyping mindset
Deciding the best prototyping approach for your needs
Deciding on the type of prototype
Selecting the appropriate tools
Planning the prototype
Deciding what to prototype
Deciding how to prototype
Being pragmatic
A prototype is not an early version of your product
A prototype is worth a thousand meetings
Summary
Prototyping with Motion - Using Tumult Hype
The role of motion in prototyping
The basic concepts of Hype
Scene list
Scene editor
Property inspector
Timeline and layers
Code editor
Importing and exporting
Prototyping navigation
Manipulating layers with interactions
Manipulating layers
Using a single layer for the active state
Using separate layers for each state
Supporting scroll and navigation
Supporting gestures
Prototyping complex behavior
Composing animations
Supporting user input
Being pragmatic
Organize your layers
Preview often
Summary
Prototyping with Code - Using Framer Studio
Framer.js
Framer Studio
Understanding CoffeeScript
Let's start coding with CoffeeScript
Variables and operators
Types
Functions
Loops and conditional structures
Objects and methods
Understanding Framer.js
Layers
Animations
Events
States
Components
Creating prototypes with Sketch and Framer Studio
Welcome Tour Prototype
Artboards states
Prototype behavior
Coordinating animations
Drawer Navigation Prototype
Using the ScrollComponent
FAB button event reacting
Drawer menu functionality
Input field search functionality
Bottom Navigation Prototype
Bottom navigation
Being Pragmatic
Be part of the community
Learning resources
Test with your mobile phone
Stay up to date with Framer news
Summary
User Testing
Understanding the role of testing usability
Deciding what to test
Using the right method
Planning the test
Defining the goals
Scenarios and tasks
Defining a script
Setting up the environment
Conducting usability tests
Recruiting participants
Introducing the process
Observing users behavior
Identifying key aspects and summarizing the results
Being pragmatic
Inviting people from your team to view the research sessions
Learning is more important than validating
Check you are answering the research questions
Combining research with measurements
Summary
Bibliography and References
General
Kano model
Gestalt principles
Mental model references
Conceptual model references
Persona document references
Card sorting references
Tree testing (Reverse card sorting) references
Affinity diagram references
Crazy eights references
Survey references
User journey references
Scenarios references
Progressive disclosure
Reciprocity effect
Lazy login
User testing
Mobile patterns
Information architecture
Visual design
Prototyping
Tumult Hype
CoffeeScript
Framer
JavaScript
jQuery
Image sources
Chapter 1
Chapter 2
Chapter 3
Chapter 4
Chapter 5
Chapter 6
Chapter 7
Chapter 8
Chapter 9
Preface
In this book, you will be introduced to a pragmatic approach to designing mobile apps that will delight your users. You will learn to explore new ideas and turn them into mobile app solutions that meet real user needs. The proposed techniques can be applied early in the process, resulting in less time investment, reducing risks, and saving time during the construction process. Each chapter will focus on one of the general steps needed to design a successful product according to both the organization's goals and the user needs. For each step, the book will detail hands-on pragmatic techniques to design innovative and easy-to-use products.
During the book, you will learn how to test your ideas in the early steps of the design process--picking up the best ideas that truly work with your users, rethinking those that need further refinement, and discarding those that don't work properly in tests with real users.
This book will show a working process to quickly iterate product ideas with low and high fidelity prototypes, based on some professional tools from different software brands. It will explain the pros and cons of each kind of prototype, when you should use each of them, and what you can learn at each step of the testing process. It will further show the basic testing approaches and some more advanced techniques to connect with and learn from your users.
Thanks to step-by-step guides, you will learn how to start exploring and testing your design ideas, regardless of the size of the design budget. Additional considerations based on real-world experience will be provided to help you cover the gap between theory and practice, in order to apply what you learn to your own projects.
What this book covers
Chapter 1,Design Principles and General Design Planning, teaches you the basic design principles that will lead you to a clear understanding of the book's content. It will cover evolutionary aspects that largely determine the way humans perceive the world, showing principles for good design aimed at real people. In addition to general design principles, you will understand the importance of adapting the design solutions to the environment and to the final scenario in which the solution is used.
A general overview of the design process will introduce the context of the book and the journey it proposes. Each chapter of the book works as a coherent unit, describing one step of the process, but it will also work as a complete solution when read as a whole.
Chapter 2,Research - Learning from Your Users, explains the need for a deep understanding of the problem before jumping in to solve it. A good study of potential users' mental model will allow you to express the interactions of your app in users own terms.
Finding patterns and conventions will help the designer take the right decisions when exploring possible solutions. Also, it will explain how to put useful methods into practice to learn key aspects from your users behaviors.
Chapter 3, Exploring Ideas - Sketching, explores how to create quick sketches to explore innovative ideas and present them to the team and other stakeholders. Using pen and paper, you'll be able to find new directions for your solution you had never thought of before. This chapter contains tips, examples, and a working process to guide idea exploration.
Chapter 4, Mobile Patterns - Web App, Android, and iOS Best Practices, details how to create a multichannel product. The current approaches will be presented in an easy and structured way. The chapter will cover the main mobile platforms based on the number of users, and it will further explain the key differences the designer must know about to design a successful cross-platform product.
Chapter 5, Detail Your Solution - Wireframes and Mockups, proposes a working process to explain your solution in detail, creating detailed documents that will help the development team understand and follow the design concept. You will learn how to create the right specifications for both Android and iOS developers, and also how to create sets of assets for different screen resolutions and different platforms. The chapters will highlight the importance of motion in today's designs and how it affects user perception.
Chapter 6, Prototyping - Bring Your Ideas to Life, describes how to create a testable version of your ideas in the early stages of the design process. It will provide general guidelines for planning your prototyping process. It will also explore different prototyping tools and discuss their pros and cons. You will learn how and when you should use each approach, based on the project requirements and the complexity of the proposed project features.
Chapter 7, Prototyping with Motion - Using Tumult Hype, outlines how to create an application prototype with a timeline-based prototyping tool. You will learn how to use motion to support your ideas, showing interactions in a visual way, and its advantages and what it represents to the process. For this step-by-step guide, you will use one of the best tools in the market, Tumult Hype, a keyframe-based animation system. Tumult is a company founded by two Apple veterans, and the tool has received awards and tremendous praise from its users.
Chapter 8, Prototyping with Code - Using Framer Studio, focuses on how to create a prototype using a programming-based tool. Readers with coding experience will be able to apply the prototyping mindset to a familiar environment. It will cover the step-by-step process with Framer Studio, a design tool of reference. Framer Studio is used by top designers at tech start-ups and design schools worldwide.
Chapter 9, User Testing, dives into how to test your prototypes with real users and learn by observing their interactions. The chapter contains a plan to follow for moderated tests. It will explain how to plan and develop a testing session and also cover general details on unmoderated tests. The chapter also gives a clear view about the importance of testing at scale for big and growing projects, covering aspects about the definition of metrics and A/B testing.
What you need for this book
Even though most chapters in this book do not need any specific software to follow the proposed workflows, the prototyping chapters make use of design and prototyping software to create testable versions of your ideas. It is recommended to have at least Bohemian Sketch, Tumult Hype, and Framer Studio to get the most from this book. Additionally, Adobe CC will allow you to make use of some provided assets and test some ideas.
Who this book is for
This book is for designers, developers, and product managers interested in creating successful apps. This book will provide them with a process to produce, test, and improve designs based on best practices.
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 for us as it helps us develop titles that you will really get the most out of.
To send us general feedback, simply e-mail [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 example code
You can download the example code files for this book from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
You can download the code files by following these steps:
Log in or register to our website using your e-mail address and password.
Hover the mouse pointer on the
SUPPORT
tab at the top.
Click on
Code Downloads & Errata
.
Enter the name of the book in the
Search
box.
Select the book for which you're looking to download the code files.
Choose from the drop-down menu where you purchased this book from.
Click on
Code Download
.
You can also download the code files by clicking on the Code Files button on the book's webpage at the Packt Publishing website. This page can be accessed by entering the book's name in the Search box. Please note that you need to be logged in to your Packt account.
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
WinRAR / 7-Zip for Windows
Zipeg / iZip / UnRarX for Mac
7-Zip / PeaZip for Linux
The code bundle for the book is also hosted on GitHub athttps://github.com/PacktPublishing/UX-Design-for-Mobile. We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!
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/UXDesignforMobile_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.
Design Principles and General Design Planning
Every day we interact with many elements in our environment, for example, turning off the alarm clock, opening doors, greeting our neighbors, or brushing our teeth.
Some of these interactions are positive, whereas other interactions can become really frustrating. We enjoy a fresh drink while relaxing on a sunny day. However, nobody likes waiting in a queue, getting lost in a building, or filling in long forms. Well-designed products and services result in positive interactions.
A saucepan with handles like the one shown in the preceding image is hard to lift when it is full. This is part of The Uncomfortable, a collection of deliberately inconvenient everyday objects, designed by Athens-based architect Katerina Kamprani. Unfortunately, finding uncomfortable objects around us is not that unusual (refer to the source available at https://www.flickr.com/photos/colalife/14624508474/).
The User Experience (UX) of a product or service is defined by how we perceive the summary of our interactions with it. A positive UX is the result of a careful design that is centered on the user needs. This perspective represents a big departure from the classical technology-driven approach that has produced many unusable products throughout history.
This book provides real-word guidance for a user-centered design process. The process described is based on both sound design theory and practical experience. We shall describe the steps to create successful mobile products and provide advice on how to apply these steps in the real world.
In this chapter, you'll learn the following essential aspects of a user-centered design:
How to adopt a user-centered perspective
The principles that make a product well-designed
The basic steps in the design process
The general challenges you'll find when you apply the concepts learned in the real world
All of these aspects are important for the design of mobile apps, but they are also useful in the design of other products.
Switching your perspective to focus on the user
All products are made for their users. So, what does a user-centered perspective mean, and what is special about it?
The taps shown in the preceding image represent two different approaches in design. The one on the left is the result of a technology-driven design, whereas the one on the right is the result of a user-centered design.
The first tap has two handles--one controls hot water, and the other controls cold water. The two-handle design is dictated by the pipe technology, which comes with separate pipes for hot and cold water. By adding a handle to each pipe you can control everything you need from a tap. The temperature can be adjusted by opening or closing the hot and cold handles to different degrees. However, once you find the ideal temperature, adjusting the flow of water requires to manipulate both handles in coordination to keep the temperature constant. This may not be convenient in many of the uses of the tap, such as filling a glass or washing your hands.
The second tap design starts instead from the user needs. Users need two different kinds of adjustments while operating a tap, that is, adjusting the water flow and the temperature. These independent needs are mapped to two independent movements of a single handle. Move the handle left or right to adjust the temperature. Move the handle up or down to control the water flow.
This makes it easy to keep the temperature constant as the water flow is adjusted, and even keep the preferred temperature every time you use it.
Starting the process from the user needs' perspective allows us to focus on what is easier for the user, as opposed to what is simpler for the technology. The second tap is easier to use, resulting in a better UX when you are washing your hands.
Shifting the complexity from people to technology makes life easier for your users. The drawback of shifting the complexity to technology is that this often represents more work for those building the product on the technical side. In the preceding example, connecting the second tap with the usual two-pipe technology requires a more elaborate mechanism.
People building a solution must understand the importance of providing a good experience to the users. Instead of understanding technology as a limiting factor, we need to understand technology as the magic that could support the best user experience.
Getting organizations to adopt a user-centered perspective
UX design has become a central part of many companies. From big organizations to small start-ups, many companies have adopted design techniques as part of their daily processes. However, the design process is not well-supported in all organizations.
During the initial stages of computing, software was written by developers, for developers. The introduction of mobile devices changed this idea radically. In 2010, the global sales of PCs were surpassed by smartphones and tablets. In the following years, the number of mobile users grew fast, and for many people, the mobile device became their main tool to access the digital world, or even their only one--mobile-only internet users accounted for 15% of all internet users globally in 2017, and represented more than 30% of internet users in countries such as Thailand or Malaysia.
People who were not technology savvy entered the digital world in large numbers, thanks to the wide adoption of mobile devices. People who were afraid to put their hands on a computer mouse previously were suddenly sharing pictures with their friends through social networks. This stressed the importance of making intuitive products that are simple and easy to use. If your product is too complex, users will be eager to look for an alternative.
Mobile devices, such as smartphones, tablets, or smart watches, opened a new world of possibilities and restrictions. Users were now capable of interacting with their devices with natural gestures and voice, but at the same time, they had to use a much smaller screen and care about the device's battery life. Compared to the old days of monochrome text-based terminals, the increasing diversity allowed and demanded more creative solutions.
Creating positive experiences benefits the user, but ultimately it is also beneficial for the organization that creates such products. There is a commonly known story in the design sector that illustrates this:
An online shop was forcing users to register with them before buying products. They discovered that most of the users who forgot their password never completed the process. Users were able to request a new password through the usual Forgot your password? link, but they never returned. Since this affected users who had already decided to purchase their products, this meant that many sales were lost. The solution was simple: a button to complete the process without registering. Providing such an option was technically easy, and it resulted in sales going up by 300 million dollars. The difficult part in this case was not building the solution, but identifying the needs of the user and picking a solution that met them.
Design principles
Many different factors contribute to the user experience. Imagine that you are using an e-book reading app. Your experience reading a novel can be ruined by different factors, for example, the use of a tiny font that is uncomfortable on your eyes, an inconvenient way to move through pages that makes you wait too long, or the app forgetting the page where you stopped reading.
Each of these issues is problematic, but each one fails to meet needs of different kinds. A well-designed product responds to user needs at different levels:
Needs from our human condition
Needs from general expectations
Needs from the specific context of use
We'll provide more details on each of those needs.
Needs from our human condition
As humans, we probably experience our world very differently than bats, octopuses, or the fascinating water bears (half-millimeter-long animals that can survive in outer space) do. We experience the world through our human senses; we process information in a visual, auditive, and to a lesser degree, olfactive way--we use our hands to manipulate elements and our voice to communicate.
After a process of millions of years of evolution, our human capabilities have been shaped as a key factor for survival in the physical world. However, when using digital products, our experience is heavily influenced by these same senses and the way our brain is wired to process them.
Understanding how our senses work can help us to design solutions that better fit our natural behavior as humans. For example, our peripheral vision allows us to identify movement at the edges of our vision field. Although we cannot recognize shapes or colors perfectly in that area, we can quickly notice any movement. The evolution theory suggests that this may have been useful to our primitive ancestors to quickly react to predators.
Nowadays, we use our peripheral vision to note the notifications that many apps show us as moving boxes at the top of the screen of our mobile devices. Designers of such interaction patterns took advantage of our capability to detect movement in the surroundings of our focus area. They decided that notifications should appear by moving in--as opposed to fading in--so our eyes notice them more easily.
We have intuitive reactions to different stimuli. Even the most basic aspects--such as shape or color--bring their own implicit meaning when we process them. We describe these effects as their psychology.
A simple experiment shows the psychology of shapes in action. When people are shown two apparently random shapes like the ones in the subsequent image and are asked to name them as either Bouba or Kiki, most people will pick the same names for the same shapes. Most people will associate the rounded shape figure with the Bouba name and the spiky figure with the Kiki name.
The psychology of shapes can affect many elements in the design of your app. For example, the use of straight corners or rounded corners in the interactive controls can help to provide a more serious or a more playful feel to it.
The psychology of color is another widely researched area. Technically, color is just a representation of light at different wavelengths. However, when classifying colors, we use temperature (warm or cold colors) based on some of their associations. Marketing and branding has studied how these associations affect the sales of products and the perception of the companies selling them. While red is associated with excitement, blue is associated with relaxation.
These implicit reactions should not be the main force driving our design decisions, but we should be aware of possible contradictions that can confuse users. These confusions may occur when the meaning we try to convey contradicts the implicit meaning of those elements. For example, a red text will catch the user's attention, so it may not be the best choice for an e-book app as the main text color for reading a book comfortably.
Beyond the perception of individual elements and their properties, it is interesting to think about how we understand them together to form our experience. Gestalt (form in German) psychologists studied human perception and defined a set of properties that have been influential for many designers. They described how our brain identifies individual elements and is eager to find meaning of those elements. In particular, gestalt principles for grouping have many applications in the design of digital products.
For example, the law of proximity dictates that elements that are close to each other are perceived as a group. By adjusting the space around elements, we can control how those are related to each other by our brains. Consider a photo gallery app; by adjusting the relative distance between pictures, we can make all photos look like a single group (keeping a uniform separation) or break them into rows or columns (increasing the vertical or horizontal space to guide our eyes).
Other gestalt principles suggest that our brain also groups together elements that look similar (law of similarity), move in the same direction (law of common fate), are connected without abrupt overlaps (law of continuity), or form a simple pattern (law of good form).
One of the main underlying ideas of these and other gestalt principles is the tension between similarity and contrast. This tension can occur in different dimensions (space, proportion, time, motion, and so on) and contributes to our perception of order.
When designing a product, we want to present physically connected what is conceptually related. Adjusting these different properties in the right way allows us to guide the eyes and the brain of our users to understand such organization as intended.
The Human Computer Interaction (HCI) community has been modeling many different human behaviors. For example, Fitt's law is a predictive model for human movement. In short, it states that the time it takes to hit a target (such as tap on a button) depends on how far away the target is and its size. This means that a small button far away will be harder to access than a big button you can access nearby.
The size of the targets, such as buttons and other controls, have evolved in mobile design thorough history, affecting their ease of use. The first mobile devices adopted the stylus as a pointing device and required users to be precise when choosing their targets. The iPhone challenged the idea that a smaller screen required smaller targets. Increasing the size of the targets made it comfortable to use with fingers, resulting in more intuitive interactions.
Our bodies and brains are the platform we ultimately run our products on. There are many disciplines and much research that provides us with valuable information about this platform. You don't need to be an expert in psychology, medicine, or biology to design great products, but understanding how humans work at their basic level will help you to design better for them. Being curious about human nature and observing people's most intuitive and visceral reactions can help you to identify relevant behavior that, being a core part of our nature may otherwise go unnoticed.
Needs from general expectations
Even if our body and brain are capable of doing many activities, it does not mean all of them are convenient, comfortable, or pleasing for us. Regardless of the specific type of product, users have general expectations when using them. Failing to meet those expectations when designing our products will negatively affect the resulting user experience. Users will be confused to see a product not behaving as they expected, which is breaking the principle of least astonishment.
Each interaction the user performs with a product requires some mental effort. This mental effort is often referred as the cognitive load. For example, a navigation app can ask your destination during your vacation trip in different ways. It would be easier for you to indicate the destination by the name of the place (Eiffel Tower) rather than the specific address (Champ de Mars, 5 Avenue Anatole France, Paris) or using the exact coordinates (48° 51' 29.6" N, 2° 17' 40.2" E). The cognitive load could be reduced further if the app were capable of ignoring potential typos, allowed voice input to just say the destination, or could suggest the destination in the first place, anticipating your needs.
A well-designed product should demand as little effort from the user as possible, reducing the points of friction where the user has to stop and think, reorient, or gets confused. Reducing friction often requires moving most of the complexities--such as translating the name of a place into coordinates--from the user into the computer.
The effort to use a product can be divided in two stages--understanding how the product works and operating it. Design considerations are key in both stages.
Explaining how a product works should be the job of the product itself. Designing a product that is obvious to use is essential since no one is going to read the instructions.
Donald Norman described the elements that communicate the possible actions of an object as affordances. Door handles are a classic example of affordances. They are placed at the hand reach and shaped to be manipulated by our hands. They are the way for the door to tell us how to open it. When affordances are applied wrong, they result in confusions about the possible actions. As a result, people find themselves pushing a door that should be pulled instead--those cases of badly designed doors are known as Norman Doors, named after the well-known designer.
Affordances can use different properties to suggest their intended use such as shape, position, color, or movement. That helps users to interpret their meaning, but their meaning is also reinforced by previous experiences. The direct or indirect associations with previous uses of similar cases helps with the learning of new ones. Products do not exist in isolation, and the use of existing products will influence our expectations of new ones.
The digital world also has its own conventions that millions of previous products have help to establish. For example, many users will identify an "X" icon to represent an action to close or discard.
Metaphors can help users connect the dots between a known concept and an old one. The digital concepts of desktop, folder, or windows rely on some of the aspects of their physical counterparts. A shopping app can use a shopping cart icon to signal the place where your selected products are.
However, we need to be careful and avoid mimicking the original concepts. It won't make much sense to use a 3D recreation of the shopping cart where you need to make the space to place each product in the cart as you would in a real supermarket. Avoid transferring the limitations of the physical world into the digital one. The digital space is better suited for many actions such as finding the products you bought last week. You don't want to follow a metaphor so literally that it limits the possible solutions.
Design guidelines capture important conventions to consider when you design for a specific platform, organization, or family of products. In this way, your solutions can reuse concepts that are familiar to users in the exact way they are used to interacting.
Breaking conventions may be needed at times, but it should be done only for a really good reason. We need to make sure that the benefit provided to our users is much greater than the potentially negative effects of possible confusions.
Social and cultural conventions also have their influence on what people expect from products. A hand gesture that means approval in one culture can be an offensive gesture in another, when found as an icon. Similarly, languages bring their own conventions. Concepts associated with directionality will be represented differently depending on the language direction. For example, a forward, next, or reproduce action in English--a left-to-right language--can be represented with a triangle or arrow pointing to the right, whereas it needs to point to the left for languages, such as Arabic, which are written in the opposite direction to keep its forward action.
In addition to understanding how products work, we want them to require minimal effort when they are used. The following principles contribute to a positive user experience for all kinds of products:
Require minimal intervention
: The fewer steps we need to solve a problem, the better. Our designs should avoid unnecessary steps for people when using our product. This can be supported by the following different strategies:
Allowing flexible input
: Information can be provided in many different ways. Some people use spaces, parenthesis, or dashes to group telephone numbers or monetary amounts in a transaction, others do not. Instead of imposing a specific format to meet the needs of the technology, allow your users to provide the information in all the ways that are most natural to them.
Providing smart defaults
