Tag

designing

Browsing

By Brian Park

Why tech has an age-bias problem, and what we can do to fix it.

I’m building a business in senior tech. And yes, I’m aware that—for many of you—that will sound like an oxymoron: “Tech for seniors? My [insert family member here] can barely use their phone!” But prepare to be surprised: Here’s what I’ve learned about how wrong we all are.

By now, we’re all familiar with some version of the statistic that consumers ages 55 and over are growing in number and control 70% of our country’s wealth. That’s correct, a clear fact. We’re also all familiar with—and perhaps adherent to—a blanket assumption that older generations neither want nor understand technology. By contrast, that is a gross misconception; one that we in the tech industry are far overdue in addressing.

Before becoming a founder in the senior tech space, I spent over a decade working on “regular” tech products—most of which were geared toward twenty- and thirtysomethings. In fact, it was that front row seat to the age bias in tech that eventually led to my passion for developing tech innovation to serve adults 55 and over. As someone not in the demographic that my company targets, I’ve had to learn about our consumer the old-fashioned way—with user research, lots of conversations, and more than a few missteps. Now, nearly two years into building product for an older demographic, here are a few key things I’ve learned along the way about designing for our aging population:

Put the people—not the aging—first.

Too often, we tech folk have shorthanded usability for older adults by simply increasing font size and designing for iPad legibility.

I learned early that one of the best (meaning: worst) ways to belittle our user was to go into design thinking, “this is for someone over 55.”

One: Even if the U.S. Census and media brackets do still batch everyone over 55 or 65 into one single age range, in reality it’s about as far from a homogeneous group as you can get.

Two—and perhaps more importantly—that thinking, and its resulting designs, aren’t reflective of how that demographic sees themselves. No one wakes up in the morning and thinks, “It’s Saturday, I’m 60, what should I do today?” (Arguably, no one of any age does that—so why do we treat “senior” as a defining characteristic?)

As designers and product managers, we have to design for how our users define themselves—which, for this demographic, is almost never in an age-first way. This same idea applies to branding and communication elements like headlines and imagery: For example, we never use the word “senior” because it’s a mismatch with how our users describe themselves—instead, based on what we’ve heard from our consumers and our team members, we say “older adults.”

We also take special care with imagery—stock photos of this age group are full of these hazy, backlit, “golden years” kind of shots of people with gray hair walking in the park. This drives our team members, who are actually in this demo, crazy—it’s just so far off of how they actually live their lives and spend their time—doing activities, having coffee, visiting friends . . . all in normal lighting.

Which brings me to the fact that the so-called tech illiteracy of older generations is a fallacy.

Just think about it: People 50 and over were actually the first generations to adopt tech—they bought the first cell phones, mastered Pong, played the first Ataris, and Nintendos. The fact that these generations didn’t grow up as digital natives doesn’t mean they’re digitally inept or uninterested.

Instead, what the tech industry writes off as “tech incompetency” is more often than not a question of habit and training.

Take what’s commonly known as the “hamburger menu” as an example. Twentysomethings who grew up with phones in their hands have been trained—for years—to know that those three lines on a mobile website are an expandable menu. But older users, who may be newer to using mobile for browsing, don’t necessarily know that same design language—not because they’re dense, but because they don’t have those same years of training.

Instead of writing that off as incompetence, why not think about it as a design and training problem? How might we create designs and educational tools so that we’re bringing older demographics along with our design signals? How can we actually design products that this demographic tells us they want, instead of retrofitting designs for twentysomethings for an entirely different target market?

Finally: Think equally hard about the design of your team.

As a product manager at places like Zynga and ClassPass, a rule of thumb was to “design for ourselves.” That’s common in many tech environments, in which the average age of workers (35) more or less matches that of the user target.

But now that I’m building for someone whose age doesn’t match my own, that guideline no longer applies: I’m no longer personally a user of the product I’m designing, which means I can rely less on intuition and gut. Targeting a demographic different from my own has pushed me and my team to lean harder on design and marketing best practices—we do usability testing, talk to our consumers, prioritize elegant and simple design. When I was first thinking about the Hank concept, for example, I didn’t start to build anything right away, like I might have at other companies. Instead, I booked myself on a seven-day cruise to the Bahamas and spent the trip pitching the concept to cruise participants within the Hank demo. In exchange for their feedback, I would hand out dozens of Amazon gift cards. In some ways, I’ve found that being outside of our target demo makes the product easier to “get right”—because we, by necessity, have to remove our personal biases and assumptions from what we’re building.

What that also means is that I’ve hired a more senior team than most other tech organizations I’ve seen in the past. That’s not necessarily an effort to get us closer to our target demo’s age; it’s more a reflection of needing people who have the training to understand and implement those best practices rather than using our gut to get us halfway there.

In hiring folks that understand our user’s mindset, needs, and position, tech teams can better step out of an echo chamber of developing products for 20- to 30-year-olds. The 55 and over populations have been overlooked and misunderstood for too long by the tech industry, and they deserve some truly dashing product.

Feature Image Credit: Getty

By Brian Park

Brian Park is cofounder and CEO of Hank, a digital platform connecting adults 55 and over with like-minded people and activities in their community.

Sourced from Fast Company

By

The following was previously published in an earlier edition of Marketing Insider.

From business practices and political policies, to school curricula and building designs, inclusivity is permeating many aspects of our lives. With one in four Americans living with some form of disability, these policies are intended to include those who might otherwise be left out or marginalized from areas of daily life.

And in today’s online world, one means of inclusivity that’s more important than ever is accessible website design, especially as 4.6% of disabled Americans suffer from a visual impairment. However, seven websites in 10 still contain “accessibility blocks”  that render them either extremely difficult or impossible for millions of consumers to use, according to a study by an accessibility software company.

If your own brand is guilty of this, you could be losing business to competitors with more inclusive websites. So what exactly can you do to make your own site more accessible?

Have a clear visual hierarchy. Making sure that your site content is presented and organized clearly is crucial for making it easy to digest, and therefore accessible to all. This involves setting out your information using a clear visual hierarchy that takes visitors on a natural, logical journey through the content. In order to do this, many designers implement principles of the Gestalt approach. This is a series of theories related to visual perception, based around the concept that humans will see the whole before the individual parts when looking at a group of objects.

Make interactive elements and text large enough. According to Google guidelines, touch targets like icons and links should be at least 48×48 pixels to ensure those with impaired vision or motor skills can easily interact with a website.

In addition, padding and spacing should be taken into consideration in order to further simplify interactions, with touch elements recommended to be at least 8 pixels apart. This reduces the possibility of users tapping on the wrong option.

By the same token, text should also be big enough for users to read, so set font size at least 16 pixels — and if smaller text must be used, ensure it’s in upper case. Furthermore, always provide a customizable text option for users to tailor the text size to their liking.

Consider contrast colour combinations. The colours you use can also have a huge impact on your site’s accessibility. Using high levels of contrast can be hard to look at, even for those who aren’t visually impaired, while low levels can make it hard to differentiate between various on-page elements, especially for those who are colour-blind. It’s recommended that you refer to the W3 guidelines for online accessibility, which stipulate a contrast ratio of at least 4:5:1 in larger elements, and 7:1 in regular ones.

Provide captions for video content. You’ve probably watched a video in a different language with subtitles before, so you’ll know that if these captions weren’t present, you wouldn’t have been able to understand what was being said.

Visitors with hearing impairments who watch videos on your site will face the exact same issue, even if the content is in their mother tongue. As such, you should always include subtitles, as well as full transcripts for any audio material. This can have SEO benefits as well as being good practice for accessibility.

By

Sourced from MediaPost

By Nick Babich.

Buttons are a common element of interaction design. While they may seem like a very simple UI element, they are still one of the most important ones to create.

In today’s article, we’ll be covering the essential items you need to know in order to create effective controls that improve user experience. If you’d like to take a go at prototyping and wireframing your own designs a bit more differently, you can download and test Adobe XD1 for free.

Make Buttons Look Like Buttons Link

How do users understand an element is a button? The answer is simple. Visual cues help people determine clickability. It’s important to use proper visual signifiers on clickable elements to make them look like buttons.

Shape Link

A safe bet is to make buttons square or square with rounded corners, depending on the style of the site or app. Rectangular shaped buttons were introduced into the digital world a long time ago, and users are very familiar with them.

buttonbp (12)2
Windows 95 at first run: notice that every button, including famous ‘Start’ button, has a rectangular shape. Image credit: Wikipedia3. (Large preview4)

You can, of course, be more creative and use other shapes, (circles, triangles, or even custom shapes), but keep in mind unique ideas can prove to be a bit riskier. You need to ensure that people can easily identify each varying shape as a button.

Floating Action Button (FAB) which represents the primary action in Android application is shaped like a circled icon.5
Here, the Floating Action Button (FAB), which represents the primary action in an Android application, is shaped like a circled icon.

No matter what shape you choose, be sure to maintain consistency throughout your interface controls, so the user will be able to identify and recognize all UI elements as buttons.

Why is consistency so important? Well, because users remember the details, whether consciously or not. For example, users will associate a particular element’s shape as the “button.” Therefore, being consistent won’t only contribute to a great-looking design, but it’ll also provide a more familiar experience for users.

The picture below illustrates this point perfectly. Using three different shapes in one part of your app (e.g. system toolbar) is not only confusing to the user, it’s incorrect design practice.

There's nothing wrong with creativity and experimentation, but keep the design coherent.6
There’s nothing wrong with creativity and experimentation, but keep the design coherent. (Large preview7)

Shadows and Highlights Link

Shadows are valuable clues, telling users at which UI element they are looking. Drop-shadows make the element stand out against the background and make it easily identifiable as a tappable or clickable element, as objects that appear raised look like they could be pressed down, (tapped or clicked). Even with flat buttons (almost flat, to be exact), there are still places for these subtle cues.

If button casts a subtle shadow this helps users understand that the element is interactive.8
If a button casts a subtle shadow, users tend to understand that the element is interactive.

Clearly Label Buttons Link

Users avoid interface elements without a clear meaning. Thus, each button in your UI should have a proper label or icon9. It’s a good idea to base this selection on the principles of least astonishment: If a necessary button has a label or icon with a high astonishment factor, it may be necessary to change the label or icon.

Clear and Distinct Labels Link

The label on actionable interface elements, such as a button, should always tie back to what it will do for the user. Users will feel more comfortable when they understand what action a button does. Vague labels like ‘Submit,’ or abstract labels like in the example below, don’t provide enough information about the action.

Avoid designing interface elements that make people wonder what they do.10
Avoid designing interface elements that make people wonder what they do. Image credit: uxmatters11

The action button should affirm what that task is, so that users know exactly what happens when they click that button. It’s important to indicate what a button does using action verbs. For example, if a user is signing up for an account, a button that says, ‘Create Account,’ tells them what the outcome will be after pressing the button. It’s clear and specific to the task. Such explicit labels serve as just-in-time help, giving users confidence in selecting the correct action.

A button's label should say exactly what will happen when user press it.12
A button’s label should say exactly what will happen when the user presses it. Image credit: Amazon13

Put Buttons Where Users Can Find Them Link

Don’t make users hunt for buttons; put buttons where users can easily find them or expect to see them.

Location and Order Link

If you’re designing a native app, you should follow platform GUI guidelines when choosing a proper location and order for buttons. Why? Because applying consistent design that follows user expectationssaves people time.

Image credit: Apple14
Image credit: Apple15. (Large preview16)

In the case of web-based apps, you should think about which placement truly works best for your users. The right way to determine this is by testing.

If you design mobile navigation it’s worth paying attention to the best practices for buttons location. The article The Golden Rules Of Bottom Navigation Design4517 covers this topic.

Make It Easy For Users To Interact With Buttons Link

The size and visual feedback of buttons, play key roles in helping users interact with them.

Size and Padding Link

You should consider how large a button is in relation to the other elements on the page. At the same time, you need to ensure the buttons you design are large enough for people to interact with.

Smaller touch targets are harder for users to tap than larger ones.18
Smaller touch targets are harder for users to tap than larger ones. Image credit: Apple19. (Large preview20)

When a tap is used as a primary input method for your app or site, you can rely on the MIT Touch Lab21study to choose a proper size for your buttons. This study found that the average size of finger pads are between 10–14mm and fingertips are 8–10mm, making 10mm x 10mm a good minimum touch target size. When a mouse and keyboard are the primary input methods, button measurements can be slightly reduced to accommodate dense UIs.

10mm x 10mm is a good minimum touch target size.22
10mm x 10mm is a good minimum touch target size. Image credit: uxmag23

You should consider the size of button elements, as well as the padding between clickable elements, as padding helps separate the controls and gives your user interface enough breathing space.

buttonbp (5)24
Here is an example of padding between buttons. Image credit: Material Design25. (Large preview26)

Provide Visual Feedback Link

This requirement isn’t about how the button initially looks to the user; it’s about interaction experience with the UI element. Usually, a button isn’t a one-state object. It has multi-states, and providing visual feedback to users to indicate the current state should be a top priority task. This helpful illustration from Material Design27 makes it clear how to convey different button states:

Make sure you consider the hover/tap states and active states of the button.28
Make sure you consider the hover, tap, and active states of the button. Image credit: Material Design29.30
This animation shows the button’s behavior in action. Image credit: Behance31. (Large preview32)

Visually Highlight The Most Important Buttons Link

Ensure the design puts emphasis on the primary or most prominent action. Use color and contrast to keep user focus on the action, and place the button in prominent locations where users are most likely to notice it.

Call-to-Action Button Link

Important buttons, (such as CTAs,) are meant to direct users into taking the action you want them to take. To create an effective call-to-action button, one that grabs the user’s attention and entices them to click, you should use colors with a high contrast in relation to the background and place the button in the path of a user.

If we look at Gmail’s UI33, the interface is very simple and almost monochromatic, with the exception of the ‘Send’ button. As soon as users finish writing a message, they immediately notice this nice blue button.

Adding one color to a grayscale UI draws the eye simply and effectively.34
Adding one color to a grayscale UI draws the eye simply and effectively.

The same rule works for websites. If you take a look at the Behance35 example below, the first thing that will catch your attention is a “Sign Up” call-to-action button. The color and the position, in this case, is more important than the text.

The most important call-to-action button stands out against the background.36
The most important call-to-action button stands out against the background. (Large preview37)

Visual Distinctions for Primary and Secondary Buttons Link

You can find another example of grabbing the user’s attention with buttons in forms and dialogues. When choosing between primary and secondary actions, visual distinctions are a useful method for helping people make solid choices:

  • The primary positive action associated with a button needs to carry a stronger visual weight. It should be the visually dominant button.
  • Secondary actions, (e.g. options like ‘Cancel’ or ‘Go Back’,) should have the weakest visual weight, because reducing the visual prominence of secondary actions minimizes the risk for potential errors, and further directs people toward a successful outcome.

Notice how the primary action is stronger in colour and contrast.38
Notice how the primary action is stronger in color and contrast. Image credit: Apple39. (Large preview40)

Button Design Checklist Link

While every design is unique, every design also has a set of items in common. That’s where having a good design checklist comes in. To ensure your button design is right for your users, you need to ask a few questions:

  • Are users identifying your element as a button? Think about how the design communicates affordance. Make a button look like a button (use size, shape, drop-shadows and color for that purpose).
  • Does a button’s label provide a clear message as to what will happen after a click? It’s often better to name a button, explaining what it does, than to use a generic label, (like “OK”).
  • Can your user easily find the button? Where on the page you place the button is just as important as its shape, color and the label on it. Consider the user’s path through the page and put buttons where users can easily find them or expect them to be.
  • If you have two or more buttons in your view, (e.g. dialog box), does the button with the primary action have strongest visual weight? Make the distinction between two options clear, by using different visual weight for each button.

Visual distinction for 'Submit' button. This should be the visually dominant button.
When looking at the visual distinction for ‘Submit’ button, it should be visually dominant over the other button. Image credit: Lukew

Conclusion Link

Buttons are a vital element in creating a smooth user experience, so it’s worth paying attention to the best essential practices for them. A quick recap:

  • Make buttons look like buttons.
  • Label buttons with what they do for users.
  • Put buttons where users can find them or expect them to be.
  • Make it easy for the user to interact with each button.
  • Make the most important button clearly identifiable.

When you design your own buttons, start with the ones that matter most, and keep in mind that button design is always about recognition and clarity.

By

Sourced from SMASHING MAGAZINE