Responsive Experience Design: A ... - Amazon Web Services · welcome Thank you for purchasing the...

MEAPEditionManningEarlyAccessProgramResponsiveExperienceDesign

Aholisticprocessthatputspeoplefirst(notdevices)Version1

Copyright2015ManningPublications

FormoreinformationonthisandotherManningtitlesgoto

www.manning.com

©Manning Publications Co. We welcome reader comments about anything in the manuscript - other than typos and other simple mistakes. These will be cleaned up during production of the book by copyeditors and proofreaders.

https://forums.manning.com/forums/responsive-experience-design

http://www.manning.com


welcome Thank you for purchasing the MEAP for Responsive Experience Design (RXD): A holistic process that puts people first, not devices. I’m excited to see the book reach this stage and look forward to its continued development and eventual release. This book ramps up from a foundation of goals, strategies and tactics through to advanced practical coding practices. The intent is not to just provide reusable code snippets to use today, it is to guide you to design and develop sites today that can handle the uncertainties of tomorrow.

I’ve strived to make the content both approachable and meaningful, and to explain not just what and how to do things with RXD but also why things are done the way they are. I felt it was important to know RXD’s foundations prior to diving into designing and developing the experience.

We’re releasing the first two chapters to start. Chapter 1 lays out the goals, purpose, and overall process of RXD. Chapter 2 covers the first of the 4 steps in RXD process, working from your content out, since content is at the center of RXD. Chapter 3, 4, and 5 will follow shortly and delve into the details of the rest of the process providing the tactics needed to transform great content into engaging experiences that are accessible and usable on any device.

By the end of the first section you will have the foundation that will allow you to apply all the techniques from the rest of the book. It will prepare you to for when new techniques replace old ones. It will help create inclusive, future-friendly experiences.

Looking ahead, part 2 of the book will cover the basics of designing and developing, keeping user needs top of mind, to create rich sites experiences. And part 3 will dig into optimizing the experience for your user and improving the process for yourself. We expect to have updates to the book every two to three weeks, whether that is a new chapter or an update to an existing chapter.

As you’re reading, I hope you’ll take advantage of the Author Online forum. I’ll be reading your comments and responding, and your feedback is helpful in the development process.

—Mike Donahue




brief contents PART 1: GOALS AND PRINCIPLES OF RESPONSIVE EXPERIENCE DESIGN

(RXD)

1 What is responsive experience design (RXD)?

2 Content is where RXD begins and ends

3 Design for people first and devices second

4 Never come between the person and what they want with progressive enhancement

5 Adapt when flexibility is not enough

PART 2: RXD BEGINS WITH RESPONSIVE WEB DESIGN (RWD)

6 A brief history of RWD

7 Mean what you code and code what you mean

8 Enhance without breaking the experience

9 Make forms that don’t suck

PART 3: TAKING RXD BEYOND THE LIMITS OF RWD

10 Dealing with images, and other media

11 Adapting for better experiences

12 People hate to wait, build fast sites

13 Build sites faster

APPENDIXES:

A Web resources

B Books for further reading

C References




1 What is responsive experience

design (RXD)?

This chapter covers

What responsive experience design (RXD) is The three core goals of RXD What all people desire in an experience The three qualities of every great experience The four-step RXD method

Responsive experience design (RXD) is a holistic approach for crafting experiences for people on whatever device they choose. An explosion of devices capable of viewing web pages has been hitting the markets since the release of the iPhone in 2007. Every device has its strengths and weaknesses, and every user of those devices expects to have a great experience at your site on their device. They don’t care if they’re on a slow network with a moderately capable device. In many cases, it’s the only device they have. In other cases, it’s only one of several devices they use, and they expect the experience to be equally enjoyable on each. They have an irrational expectation that their experiences on these smaller, slower, less capable devices exceed their experiences on their desktop/laptop computers when they visit your site. You need a strategy to satisfy such expectations, unrealistic as they may be. RXD provides such a strategy, an approach that delivers experiences that meet human needs while working well on devices.

We begin by setting goals based on why we, and our audience, need sites that can be used on any device. We also need to define the qualities of a great experience to provide an outcome we can measure success against. We’ll then examine a four-tiered set of principles



1


aimed to meet those goals and qualities and guide our design and development decisions. Only after our goals and principles are set do we begin crafting the responsive experience for our audience. RXD takes into account everything that matters to people. It’s not just about making pages that fill available screen space; it’s about creating experiences that fill human needs. RXD is a human-centered approach to designing and developing great experiences in today’s uncertain and ever changing reality.

In his book, Start with Why (Portfolio, 2009), Simon Sinek points out that most companies and people are good at understanding what they do. Most are pretty good at knowing how they do it. But a large portion aren’t clear on why they’re doing it, at least not beyond making money for themselves. He goes on to show how companies and people that understand their why and the why of their audience are more successful than those that don’t. In a similar way, author Jeremy Keith speaks about using goals (why), principles (how), and patterns (what) to inform our design and development for successful websites.

This book takes a similar why, how, and what approach to presenting information. Every example (what) is tied back to the principles (how) and goals (why), to deliver a clear rationale behind the choices that are made. This book provides not a simple recipe for a given solution, but a way of thinking through each challenge as it arises. I believe, as Sinek does, that knowing our why is the key to creating great success. By the time we’re finished, you’ll be able to explain to anyone why you made every choice along the way. You’ll be able to tie back every decision of what you made to how and why you made it.

Through the rest of this chapter, we’ll dig into the why and how of RXD, and in the rest of the book we’ll get into the what. By the end of this book, you’ll have the wisdom and ability to craft the perfect experience for any person on any device. Let’s begin by setting three effective goals for responsive experience design.

1.1 Three goals of responsive experience design) The first thing you need in order to create great responsive experience designs are more-productive goals: goals that better align business and user needs. For some, this may be uncomfortable because it means letting go of how we’ve always done things. It turns things on its head and begins in a place we often leave for the end of the process. If you work through the discomfort, you’ll create better experiences for your audience and yourself. Those experiences will be engaging and appropriate for your audience, and sustainable and maintainable for yourself.

Figure 1.1 The three goals of responsive experience design

We need to establish three core goals: a why goal, a how goal, and a what goal, as shown in figure 1.1:



2


Be inclusive—This why goal reflects the vision and ultimate outcome to attain. Be accessible—This how goal helps us define useful strategies to achieve our vision. Be appropriate—This what goal guides our tactical approach to meeting our strategies.

In the end, each extends and builds upon the others to create continuity in the experiences we design. Let’s break them down one at a time.

1.1.1 Why goal: radical inclusion—why we need RXD As I mentioned in the intro, Tim Berners-Lee had a vision of universal access for all (radical inclusion) when he created the WWW. Tim’s inventions—HTTP, URL, and HTML—gave us everything we needed for radical inclusion, but few people had any interest. Keeping in mind that the web was born in 1989, it’s not surprising that there was little appeal for the masses. The web lacked the glitz and glamour we had grown accustomed to throughout the rest of the 1980s. To get people to use the web, we needed it to sparkle like a mirror ball in a trendy ’80s dance club. It would take more than five years before we could make the web sparkle like a shiny mirror ball with Cascading Style Sheets (CSS), and spin with JavaScript (JS).

Thanks to contributions by countless individuals and organizations like the W3C, today we can use CSS and JS to make the web more interesting. The problem now is that in the process, we often end up making the web inaccessible. Like a doorman at one of those trendy ’80s dance clubs, many of our solutions to make the web sparkle keep people out. The more we try to make the web like a trendy nightclub, the more exclusionary it becomes. While exclusive access may be a sign of social status at nightclubs, it’s not the universal access the web promised to be. It’s also not what RXD is about.

An important, albeit subtle and often blurry, distinction needs to be made between being exclusive and being exclusionary. Imagine you’re the proprietor of a high-end car dealership and you simply refused to allow people to come in and look because their attire suggests that they likely can’t afford your vehicles—that would be exclusionary. On the other hand, allowing the same people in, talking to them for a short while, and encouraging them to return when they’re in a better financial place, is being exclusive. You can maintain your status selling a premium product without degrading the person’s dignity. This subtle difference turns an experience from exclusion to aspiration, and creates a feeling of good will that will be remembered and rewarded in the future.

Many techniques created to make our sites more appealing have fallen from favor as new techniques arrived, just like all of those ’80s dance clubs. Table-based techniques gave way to fixed CSS-positioned techniques, which have given way to responsive web design techniques. In time, responsive web design will give way to something else. Trends in web design have also come and gone over the years for various reasons. Skeuomorphism (see figure 1.3) was popular for quite some time, as people became familiar with the new digital environment. In recent years, skeuomorphism has been replaced in favor of the simpler flat design pattern, and mostly that has given way to design patterns such as Material design. Don’t worry if some or all of these are unfamiliar at the moment; the point is that trends and techniques are in a state of constant change. By contrast, our human desires, like our need for feeling included,



3


haven’t changed much since the dawn of man. RXD is meant to help us prepare for change while not losing sight of the expectations that people have when trying to access our sites.

A good player skates to where the puck is. A great player skates to where the puck is going to be.

Wayne Gretzky, NHL legend and Hall of Fame inductee

When mobile devices first showed up, most businesses chose not to begin designing for them right away. They couldn’t see spending money to develop a mobile-friendly site to accommodate a small percentage of people. They failed to see the upward trend that mobile devices were following. It turned out that mobile adoption would grow eight times faster than regular web adoption did throughout the 1990s and 2000s. Because of this short-sighted view, most businesses are scrambling to catch up. What’s your strategy for smart-watches, smart-TVs, displays in cars, and gaming stations? Radical inclusion is about planning for the future while designing and developing for today’s web.

Radical inclusion is the why for RXD. Its purpose is to maximize opportunities by designing for the reality that anyone can choose any device to access the web. It’s acknowledging that some people use a device with limitations by necessity, whereas others do it by choice. When Google Glass came out, it started at $1,500 and went up from there, making it exclusive to a select audience. Although the device operates by voice or touch, it doesn’t do so in the same way as a smartphone or tablet. The minuscule screen size makes viewing and navigating desktop sites difficult. The people who choose to use Google Glass like living on the edge, many of them leaders in their fields. These same people are often responsible for approving the budgets needed to make your web projects happen—not a group you want to exclude from your site. I’m not suggesting you design for a dead product like Google Glass; I’m suggesting that accounting for edge cases serves to improve your common use cases.

Technologies like these will get more affordable and gain adoption. New ways of interacting with content on the web will emerge. It’s not a question of if it will happen; it’s only a question of when. There’s no way to predict just how fast or to what extent we’ll adopt each new technology. If you design with radical inclusion as your goal, you won’t need to worry. Radical inclusion means acknowledging that the haves and have-nots often face the same challenges, just for different reasons. Although there’s no guarantee that being inclusive will provide more opportunities, one thing is certain: you’re guaranteed to miss out on opportunities when you exclude people. The techniques we’ll look at later in the book will ensure the most inclusive possible experiences. But before discussing techniques, we need to set our goal of how to achieve radical inclusion.

1.1.2 How goal: accessibility—how we achieve radical inclusion Before we can establish accessibility as a goal, we must first lay to rest a myth. We need to get to the truth of what designing and developing for accessibility is about:



4


Myth—Accessibility means designing and developing for people with disabilities.

Truth—Accessibility means accounting for the limitations of people and devices in our designs and development.

Reframing accessibility in our minds is critical to making it a part of our culture as the creators of responsive experiences. Accessibility is the doorway to opportunities. Put another way, the more people who can access your content, the more chances you have at converting them. This isn’t some hippie-minded, “Kumbaya,” group-hug philosophy. Accessibility is a competitive business advantage because it’s good for the visitor.

If we focus only on people with physical disabilities, we’ll again hear, “I can’t justify developing for such a small percentage of people.” When we reframe the problem and think instead of limitations, those percentages rise to a point we can’t ignore. At the moment, about 10% of the world has 4G mobile access—meaning 90% of the world is accessing the web at slower 3G (40%) or 2G (50%) speeds. Not to mention that not everyone has an unlimited data plan. Yet today the average responsive web page is over 1 MB. If you’re thinking to yourself, “Well, my target audience doesn’t live where there’s only 3G and 2G, so I don’t have to worry about that,” think again. People travel, especially those with deep pockets. Many of them are philanthropic and travel to some of the poorest places in the world to help out. They expect the same quality of experience wherever they go. When you satisfy the extremes, the people in the middle benefit as well. If you can create a site that loads fast on a 2G network, it’ll blaze on 4G. We’ll talk about setting a performance budget later on.

JavaScript (JS) is another potential accessibility killer. JS is used for much of our fancy functionality and interactions, which is fine unless it breaks accessibility. Just ask the folks at Gawker Media, whose sites displayed blank pages due to a server glitch that caused JS to fail to load for hours back in 2011. Gawker sites garner several million views a day combined, and they all failed to load correctly because of the JS failure. This wasn’t people with JavaScript turned off; this was JS failing to load. Luckily, Gawker isn’t an e-commerce site. Imagine the financial losses if Amazon failed to load for a couple of hours on any given day. Although the number of people who have JS disabled on their devices is quite low (1–2% by most accounts), the fact is that until JS loads, all browsers are non-JS browsers. Accessibility isn’t about designing for disabled JS; it’s about designing until JS loads. Later in the book, you’ll see how to add unobtrusive JavaScript to your sites to give them the pop and sizzle you want without making the content inaccessible.

If potential lost income due to an inability to access your site isn’t enough to motivate you, let me offer one final thought: failure to make or keep a site accessible could get you sued, and that may be the motivation you need. In recent years, several large companies failing to meet minimal accessibility guidelines have learned this the hard way. Target Corporation, for instance, lost a case to the National Federation of the Blind over accessibility issues with their site and had to pay a settlement of $6 million dollars. It would have cost them a fraction of a percent of that if they had dealt with accessibility in the beginning. The cost to deal with



5


accessibility at the beginning is low compared to the cost of doing it later. According to Tim Springer, chief executive of SSB BART Group, a company can spend about 10% of its budget to retrofit a site for accessibility. Or, it can spend 1–3% if done from the start. That’s a 70%–90% savings in implementation costs.

In some situations, accessibility compliance is not even an option. If you’re developing a site for any government-related organization, or hope to secure government funding for your web project, 508 Compliance is a minimal requirement for acceptance. Also, if you’re creating a site for the education sector, you may find yourself required to meet similar accessibility compliance. Several universities have found themselves in legal hot water for not providing students with disabilities equal access to the same educational resources as those without disabilities.

More often than not, dealing with accessibility is a matter of not breaking the inherent accessibility of well-formed, semantic markup in the first place. In chapter 7, you’ll see how to build accessible, easy-to-use forms that aid people in completing tasks. In chapter 6, you’ll see how a few extra words (WIA-ARIA roles and attributes) added to your HTML aid people with disabilities to understand and navigate your site. After you start to bake accessibility into your code, it gets less and less difficult or expensive to handle. It will become second nature by the time you’re finished with this book.

1.1.3 What goal: appropriateness—what people really want Appropriate is a word that can mean different things to different people. I’ll use this word a lot, so it’s imperative we have the same definition moving forward:

Appropriate—Suitable or proper in the circumstances

Creating an appropriate experience is about creating what’s right for the user. The next time someone says they want a minimal design, parallax scrolling, videos of LOL kitties, or my favorite, “Let’s do what Apple’s doing,” ask yourself if it’s appropriate. Is the solution suitable or proper for the circumstance? Too often we caught up in keeping up with what others are doing, and we fail to ask if it’s right for us. We see something cool and jump on the bandwagon, like parallax scrolling. I don’t mean to imply there’s anything wrong with parallax designs, just that it’s often used only because it’s cool. If it enhances the content, use it; otherwise, don’t.

Let’s consider another current trend: large full-bleed background images. Sure, they make your site look great on a large-screen device connected to the internet through a broadband or faster network. They likely impressed the hell out of your boss and stakeholders. And the design is going to look great in your portfolio. Are they appropriate for your audience? As I said previously, about 90% of the world is on a 3G or slower data network, likely without an unlimited data plan. If your audience falls into the 90%, is it appropriate to send them large graphics? For the other 90% who can’t or won’t wait due to the limitations they have, these images impose a hardship. What do your analytics say about the trend of your visitors? Do



6


you have a growing number of high-bandwidth, large-screen visitors, or is your mobile traffic growing? Watch where the puck is going and decide what’s appropriate.

Divining what’s most appropriate for each person and device is impossible, but we can design and develop in a way that makes it appear as though we know. In section 1.4, you’ll see that there are ways to build more appropriate experiences in chaotic times. RXD doesn’t presuppose that a person needs or wants an identical experience across their devices. It recognizes that at times people expect things to change.

Henry Ford is often credited with saying, “If I asked people what they want, they’d tell me faster horses.” The implication here is that people don’t know what they need or want. The fact is, we do. Maybe not in detail like Ford, as his quote suggests, but we all have a common desire. It’s a lesson most of learned as children from the fairy tale “Goldilocks and the Three Bears.”

This tale illustrates a basic truth about what people want in life. A brazen Goldilocks makes her way through the three bears’ cottage, looking for a chair to sit in. The first chair is too big, and the next too small, but the third chair is just right. Hungry from all the breaking and entering, she helps herself to the bears’ porridge. The first bowl is too hot, and the next too cold, but third is just right. Like me after eating lunch, Goldilocks gets sleepy and decides to take a nap. The first bed she tries is too hard, the next one too soft, but the third one is just right. You see where I’m going with this, don’t you? Everyone wants things that are just right for them. We won’t stop looking until we find them. We may settle for a moment, but in the end we all want what Goldilocks found. I trust you won’t commit felony breaking and entering to find it.

When Ford released his first automobiles, not everyone could afford them. Their cost, access to fuel, knowledge to maintain them, and other factors made them inaccessible to many. This appears to be counter to our goals of radical inclusion. And it would be, if at the same time Ford had made it impossible to continue to ride horses, take a coach, or ride trains as transportation. As it was, the automobile enhanced the travel experience for those who had the means to buy it. All their other options were still open if they didn’t buy a car. There’s a difference between allowing people to opt out on their terms and excluding them on yours.

Like everything else, one car design didn’t meet the needs of everyone. Cars come in different sizes to accommodate more or fewer passengers. They come in different colors to suit different tastes. They offer different amenities and features for a modest up-charge. All these options help buyers find the automobile that’s just right for them. We can learn a lot about responsive experience design by observing the automobile industry.

Now that you’ve learned what responsive experience design is about, and its goals, let’s take a look at the qualities of a great experience. No sense in spending time and money on building something that just takes up space that people won’t care about.



7


1.2 Three qualities of every great experience

Figure 1.2 The three qualities of every great experience

Every great experience has three qualities in common: it’s useful, it’s usable, and it’s desirable (see figure 1.2). When designing an experience, you need to address these qualities in this order and in appropriate measure. Each builds on the one before. After all, can an experience that’s not usable be desirable? Is there any reason to make something usable if it’s not first useful?

This strategy may seem simple enough to follow. But we’re drawn in by the appeal of something before we ever discover whether it’s useful or usable. Therefore, it’s natural to want to begin the design process by first addressing what’s desirable. Fight that urge! Begin by focusing on what’s useful to your audience and work up to making it desirable. I hope it goes without saying, but just to be sure, usefulness and usability contribute to the ongoing desirability of the experience.

It’s important to focus on balancing these three qualities, because the proper mixture of each can be the difference between success and failure. Again, let’s consider the evolution of the web. Berners-Lee gave us the useful bits needed for the web, and he made it usable. But it wasn’t desirable. It wasn’t until we had CSS and JS that the web became more usable, which made it more desirable. With all the new ways to make things pop and sizzle, we’re getting out of balance. There’s too much focus on the superficial and not enough on the substance. We need to stop putting lipstick on pigs. You may get someone’s attention, but after they see it’s a pig, they’re gone. Even worse, they’ll warn others to stay away. If you want to create the kind of experience that will keep them coming back, and telling others to come, start by making sure you have a pot-o-gold at the end of your rainbow. Let’s break the three qualities down one at a time.

1.2.1 Always start with something useful Does it make any sense to make something usable or desirable if in the end it’s not useful? Of course it doesn’t, but what do we mean when we say useful?

Useful—Able to be used for a practical purpose or in several ways

In RXD, the most practical purpose is to solve a person’s problem or satisfy a need. At the end of the day, people will visit your site because they believe it’ll do one of those two things. Your content should do both. In chapter 2, you’ll look at what it takes to create useful content.



8


Content is why people come. After your visitors are done being wowed by your visual designs, after they’ve navigated their way through to what they’re looking for, they’ll judge their overall experience on the quality of your content. It’s the last thing they see, and it’ll leave the greatest and final impression. How well does your content solve your visitors’ problems or satisfy their needs?

The content is what is useful to your audience. Everything else should enhance your content. Let me be clear here, as this is a subject of some debate. I’m not saying that content is the most important thing; as I said earlier, it’s about balance and order. But content is what leaves the most lasting impression in a person’s mind after finishing with the experience. It’s what has the most impact on whether or people return.

People will forget that you said, they will forget what you did, but they will never forget the way you made them feel.

Maya Angelou, author

In UX there’s a thing known as the peak end rule. At its most basic level, it states that the last thing to happen is what sticks with you. This is true even more so if it evokes a strong emotional response. That’s why it’s so important to end on a high note. Ever had a great steak, but that last bite had a huge chunk of grizzle in it? It taints an otherwise great experience. Content is the last thing your visitors will experience, so make sure it tastes great and isn’t a piece of grizzle.

What makes content, or anything for that matter, useful? The UX architect in me will answer with the typical UX response: it depends. Ask your audience. Do they need information to make a purchase, do they need a distraction while killing time at the airport, do they need to know what their friends are up to? So many answers to this question are possible, and you need to get the answers before you begin. Identifying what’s useful before you begin can help you make better decisions about what will be usable and desirable too.

1.2.2 If it’s not usable, visitors will never find out if it’s useful We all know that if something is difficult to use, people won’t use it. If your site doesn’t enable your visitors to get the content they want quickly and easily, they’ll find a site that does. Let’s be clear on what I mean by usable. You’d be surprised at how many ways this can be interpreted, so let me define what I mean as it relates to RXD:

Usable—Able or fit to be used

This is probably the most straightforward of the three qualities. It’s fairly easy to see if something is usable or not. A few minutes observing people on your site can reveal all the places they struggle in order to get to the useful content they want. Here are a few things that will help us make more usable sites. These may seem commonsense, but the alarming number of sites that fail at most, if not all, of these ideas means they’re worth repeating:



9


Make things obvious Make things bigger Make things readable Give users the ability to change things

MAKE THINGS OBVIOUS

You need to consider two types of obvious: the first is affordances, and the other is contrast. An affordance is when something that can be clicked looks clickable. Sounds like a no-brainer, but it’s amazing how often this doesn’t happen. As I write this book, flat design (see figure 1.3) has become trendy. Designers are moving away from the skeuomorphic designs (made popular by Apple) of the previous two decades. The idea behind skeuomorphism was to make digital things look like real-world things so we’d know what to do with them. Their appearance was their affordance. We have a trash can icon so we know where to discard files. Buttons were given a three-dimensional appearance so we knew we could press them. With flat design, most of that is gone. I’m not saying flat design is bad, just that we make sure we don’t lose the obvious in our designs.

Figure 1.3 Comparison of flat (left) and skeuomorphic (right) design. The buttons on the skeuomorphic



10


design look touchable; they have depth and dimension. The buttons on the flat design offer no visual clues about what’s touchable.

Contrast is about making things stand apart from one another. Ever had trouble finding the links on a page because someone decided to hide the underline and choose a color that blends nicely with the rest of the text? If people don’t notice the link, the content on the other side of the link will go undiscovered too. Call attention to certain things by making sure they contrast with the rest of the elements on the page. Use color, size, font variation, and white space to make the right things stand out. Subtlety is not your friend when it comes to usability.

MAKE THINGS BIGGER

Fitt’s law provides a way to calculate how quick something can be used by taking into account the size of the target in relation to other variables such as distance and speed. If you love math, you’ll find it interesting. For the rest of us, a larger target close to where we are is the fastest, easiest target to hit. In his book, Tapworthy (O’Reilly, 2010), Josh Clark cites research done by Apple that indicates a target that’s a minimum of 44 px by 44 px is an ideal size. Android and Microsoft have each done research and came to similar conclusions, recommending 48 px by 48 px, and 36 px by 36 px minimal target sizes, respectively. These sizes take into account our fingers obscuring our view of where we’re tapping. It also accounts for what some call the fat finger factor. Fingers are far less precise than a mouse or stylus when it comes to hitting targets on screens. In short, things that are reasonably large are easier to use. It’s OK to go smaller with secondary tap targets. This is another example of providing contrast. Make your primary targets look like primary targets.

MAKE THINGS READABLE

This is a multifaceted issue. The first is an extension of the make-things-bigger idea. A laptop or desktop screen is often farther away from a person’s eyes than a tablet or phone when they read. Don’t keep the same font size for all. Make the text larger for devices that will be held farther away.

In addition, choose readable fonts. Many fonts designed specifically for the web have taller x-heights, making the openings of characters such as a, e, and d larger and therefore easier to distinguish. Look for fonts where a capital I, and lowercase l, and the number 1 look different. There are many qualities to consider in a good font. Read Jason Santa Maria’s On Web Typography (A Book Apart, 2014) for information.

Finally, use simple words. Sure, if you’re writing a dissertation for college, you want to sling as many big words as possible to prove your knowledge of the subject, but that’s not useful for the rest of the world. I’m not suggesting drumming things down, but rather finding more-appropriate words. Ask yourself if you need a word like supplementary if all you mean is more.



11


GIVE USERS THE ABILITY TO CHANGE THINGS

Give people the ability to adjust things as they desire. If a person needs the text to be larger than you designed it so they can read it, make sure you’ve developed for that. You’ll learn about this in chapter 8. Let people use your site without JS, as covered in chapter 9.

As I said, most of this should be commonsense, but many designers and developers just don’t do them. Hopefully these tips were just a reminder for most of you. If you’re already doing these things, give yourself a pat on the back. Seriously, do it; you deserve it.

1.2.3 Draw visitors into the experience by appealing to their many senses Much the way usability is a roadblock to the useful content, we must not fail to create desire. Desire is the first of the three qualities that the visitor will, or won’t, experience when encountering your site. You have only a fraction of a moment to generate that feeling, so you need to know what your visitors desire. What do we mean when we say desirable?

Desirable—Wanted or wished for as being an attractive, useful, or necessary course of action

If usability is most straightforward, desirability may be the least straightforward and most subjective quality of an experience. It’s easy to watch people interacting with our site and see where they struggle. It’s easy to find out if the content satisfied their needs or solved their problems. It’s a lot less clear what, if anything, about the experience we’ve created is desirable to those people. Add to the mix that what’s desirable to one person may not be to another. Let’s take another look at Ford’s automobiles for a moment.

For some, the idea of never shoveling horse crap ever again was desirable. Having a comfortable seat instead of a saddle was desirable. Staying protected from the elements while traveling was desirable. For others, the connection to a living creature was more desirable. Tending to a warm-blooded animal was desirable over maintaining a mechanical mode of transportation. Some people could never bond with an automobile as they could their horse. The simple point is, you can’t please everyone, so stop trying. As you begin to assign more and more desirable qualities to the experience, the more you’ll limit the people who want to experience it. This isn’t about exclusion; this about people opting out because they don’t find the experience appropriate for themselves. One common mistake many businesses make is to set an unrealistic expectation that everyone will love what you’ve created. Business needs to get comfortable with letting people walk away and focus on the ones who love your experience. Apple didn’t grow to be the richest company in the world by capturing the largest market shares. They did it by delivering just the right experience to its audience.

Amazon is a great example of a company that delivers all three of these qualities. The Amazon site is nothing to look at, but it’s useful and usable. The customer reviews and product information make it an invaluable shopping tool. One-click purchases makes it dead simple to buy things after you’ve decided. The site leaves a lot to be desired when it comes to visual appeal, but it doesn’t need to be visually appealing in this case. Amazon generates desirability in two ways. First, the useful and usable nature of their site does make it desirable



12


in spite of lacking visual appeal. Second, their customer service is what people desire above all else from Amazon.

This is such an extensive subject that it’s not possible to cover it all here. If you start with useful content and a usable site, you’re already ahead of most of your competition. When you add visual or functional appeal that enhances the usefulness or usability of the content, people will appreciate it, and they will come back. Let’s take a quick look at how we build useful, usable, desirable experiences.

1.3 Four-step RXD method

Figure 1.4 The four steps to responsive experience design: work from the content out, think mobile first, use progressive enhancement, and adapt as needed.

With our goals laid out and an understanding of what makes an experience great, we need a plan to get there. The four steps of the RXD method are content out, mobile first, progressive enhancement, and adaptive, as shown in figure 1.4. These are more than buzzwords. They’re some of the most effective tactics for creating experiences that span devices and human contexts.

Each of these four concepts is worthy of an entire book in its own right. In fact, at least one book has been written about each subject, and that’s part of the problem. Many have heard of these, but few have had, or made, the time to read up on them. People hear bits and pieces here and there without getting the full picture. This often leads to sketchy understandings, at best, that can cause them to apply the concept incorrectly or avoid it altogether. Others find out about the concept late in the design and development process, and it’s now too costly to deal with. Others are just unaware of the concepts and their benefits so they just don’t bother with them.

That’s why I’m including the four steps in this book. The next four chapters distill each concept to its core, clear up some myths, explain the importance of each, turn them into an action plan, and show why we should (for the most part) address them in the order presented.

1.3.1 Work from the content out Content provides the foundation for a great experience. Content is where the user’s journey ends and is why people come in the first place. They’re looking for things that fulfill their needs. They aren’t coming for the parallax scrolling effects, fancy JavaScript interactions, or



13


the full-bleed background images. OK, if you have a photography site, visitors are probably there for the big, full-bleed images. But in that case, your photos are your content, and that’s where we need to begin. I define content as anything that helps users accomplish their goals. Chapter 2 presents the nuts and bolts of creating good content for your responsive experiences. You’ll learn to create content that is meaningful and appropriately concise in every way.

1.3.2 Mobile first After our content is in good shape, we need a way to help us set priorities for our content and features across the scope of devices and user contexts. Working mobile first helps us account for all the variables at play. Chapter 3 dispels several myths about mobile first that tend to limit our view of what it can do for us. You’ll look at how approaching your design and development from a mobile-first perspective will help you build appropriate experiences that people expect. Before you start thinking that mobile first means prioritizing the mobile device experiences over other experiences, it doesn’t. Mobile first is about prioritizing human needs and finding the right technology to deliver the best experience on any device.

1.3.3 Progressive enhancement With a clear set of priorities, we now need a methodology for adding interactivity and visual appeal in a way that never impedes the visitors’ access to the content. As with mobile first, we need to lay to rest some myths about progressive enhancement to get the most benefit. Chapter 4 shows how progressive enhancement aligns with our goal of radical inclusion while offering us a path to engaging, accessible, inclusive responsive experiences. This is where you’ll learn how to layer on attractive interactions and aesthetics that will make your experiences useful, usable, and desirable.

1.3.4 Adaptive design Where responsive ends, adaptive begins. It’s a Zen thing. At times, resizing and reflowing content on a page isn’t the most appropriate experience for the visitor. Chapter 5 covers the whys, hows, and whens of adapting your experience in a way that still feels consistent and expected to your audience. Chapter 12 presents client- and server-side techniques to effectively adapt your design when it’s appropriate to do so.

Each of these steps builds upon the step before. If you don’t have your content done, how do you know if it’s too much or too little across devices? How do you know what kind of enhancements you might use to make it more effective? How do you know if you might need to make adaptations for certain contexts? That said, this isn’t a strictly linear process. As you progress through designing the experience, you’ll gain insights during later stages that may cause you to reevaluate your content. The process becomes cyclical after you get going. Even so, we need to begin somewhere, and content is that somewhere.

1.4 Recap The three goals of responsive experience design (RXD) are to be radically inclusive, be



14


accessible, and be appropriate. Every great experience exhibits three qualities: it’s useful, usable, and desirable. The four steps of the RXD process—work content out, think mobile first, use

progressive enhancement, and adapt when necessary—will help us deliver sites that fulfill human needs rather than just fill available screen space.

Figure 1.5 The RXD process overview

RXD, depicted in figure 1.5, is not a linear approach that’s carved in stone. As we move forward, you’ll see that many aspects of the approach overlap and inform each other. As I mentioned, they’re more cyclical than linear. I’ve only scratched the surface here. As I go into detail about each step of the process, you’ll see how it affects how and what you build. We’ll tie our efforts back to the goals and strategies mentioned in this chapter to make sure you’re delivering the best possible web experience to any visitor on any device. Let’s start digging into the details of the RXD process right now.



15


Responsive Experience Design: A ... - Amazon Web Services · welcome Thank you for purchasing the...

Documents

Transcript of Responsive Experience Design: A ... - Amazon Web Services · welcome Thank you for purchasing the...