Month: June 2018

Articles

11 Secrets of Actionable UX Reports

When designers and developers work on projects, they have a lot of questions: What do our users expect to see on this screen? How are users supposed to interact with our product? What should our onboarding feel like? These questions are commonly asked during product development.

Every team wants to reduce the risk of incorrect design decisions and as the complexity of products increases, the digital product design industry puts usability practitioners in high demand. Usability practitioners are people who help product teams make informed decisions. In most organizations, the primary role of usability experts is design validation—making sure that a product is usable.

But many usability practitioners (particularly those who are new to the field) complain that product teams don’t act on their research results. While this could be due to many different issues, most often it is due to poor usability reports; if product teams have trouble understanding findings, or don’t know what to do with the findings, they’ll simply ignore them.

That’s why it so important to make reports actionable. In this article, we’ll share eleven tips that help usability practitioners to reach this goal.

1. Know Key Business Objectives

Most companies have a clear understanding of what their business goals are. The reason companies invest money in usability analysis is that they believe that it will help them reach their goals.

It’s possible to put more weight into usability reports by creating a direct connection between solving usability issues and reaching business goals. Thus, usability experts should take enough time to figure out what the key business objectives are and make sure that the usability insights are aligned with them.

2. Be Specific When Presenting Findings

Imagine when someone opens a usability report and sees a sentence like: “The process of purchasing a product was hard,” without any additional details. With a high probability, they will consider such a finding as too vague. Vague findings don’t give product teams many insights. A lack of detail can, at best, leave teams wondering what the problem was. But at worse it can lead to an unfavorable outcome—when a product team misinterprets findings they can start solving a wrong problem.

That’s why all findings in a report need to be specific. It’s essential to write usability findings in a clear way that helps the team identify the cause of a problem and work toward a solution. Thus, instead of saying “The process of purchasing a product was hard,” provide a clear context for the issue. Say why the process was hard. Were too many steps involved? Were field labels in forms unclear? Make it clear in your report!

3. Never Blame Users

Describing findings in relation to users is a relatively common problem of many studies. “The user had to do this” or “Unfortunately, a user was unable to …” Although such statements sound innocent, they can cause significant damage to your reports. Such language switches the focus from a design and puts the blame on the user. It becomes a user problem, not a product problem. When team members and stakeholders read such findings, they might think “Well, this user wasn’t experienced. Maybe we should conduct another testing session with more experienced testers?” and can dismiss the issue.

One of the purposes of a research study is to generate empathy for the end user. Good UX practitioners always start usability testing session with words “We’re not testing you, we’re testing our product.” The same attitude should be used in usability reports.

4. Don’t Lose Sight of the Wood for the Trees

A famous Charles Eames quote: “The details are not the details. They make the design” is a bad joke for some usability professionals.

All too often they become too focused on the details, so they forget to notice huge issues. For example, when analyzing specific user flow, it’s easy to be focused on providing concrete recommendations on how to improve user experience (e.g. changing the size of the buttons, renaming labels, etc.), but forgetting to notice that the entire flow doesn’t match user expectations or doesn’t meet their needs. If users have trouble at every step, perhaps it’s the overall flow that’s to blame, rather than separate details along the way.

5. Add Redesign Recommendations to Usability Reports

The goal of user research and usability testing is not only in finding issues and defects; it’s also proposing solutions to those problems. Too frequently usability practitioners conduct usability testing, track all issues, but don’t provide recommendations on how to fix the problems. Recommendations play an essential role—they help determine next steps and make the results actionable.

Usability practitioners are the right people for writing recommendations because they have unique expertise in thinking about design solutions. They run lots of usability tests and have first-hand knowledge of what works and what doesn’t work for users.

Writing useful and usable recommendations is a skill that all usability professionals should master. Here are a few things that should be taken into account when writing recommendations:

  • Avoid vague proposals: Vague recommendations such as “Make the error message clearer” doesn’t say enough for people who’ll read reports. It’s essential to make recommendations constructive by providing sufficient details.
  • Avoid biased recommendations: Stay away from assumptions. Reference studies and best practices in your report.
  • Discuss your usability recommendations: Talk with designers, developers, sales and marketing teams to learn what works and what doesn’t work both from a business and technical point of view. The wisdom of the crowd can help you to come up with better solutions.
  • Write recommendations in the readers’ language: The readers of recommendations are not necessary usability specialists. Thus, avoid usability jargon such as “508 compliant” when providing recommendations.
  • Visualize your recommendations. A picture is worth a thousand words and this rule applies to recommendations. Visualizing recommendations doesn’t mean that usability specialists should create high-fidelity interactive prototypes. Creating a quick sketch to illustrate a point is totally acceptable.

6. Involve Teams and Stakeholders in Usability Testing

Work closely with the design and development team, rather than simply delivering a report and walking away from the project. Make team members and stakeholders contribute towards study designs.

Here are a couple of tips to take into account:

  • Ask designers, product managers, marketers about their expectations before conducting testing. By asking a simple question “After we conduct this research, what results would you expect?” you build interest to the upcoming test session.
  • Invite team members and stakeholders to watch usability testing sessions. Nothing beats watching how users interact with a product. Seeing how users struggle when working with a product will make stakeholders understand the value of session.

7. Keep Your Reports Short and Focused

Readers of usability reports are busy people, and it’s relatively easy to overwhelming them by putting too much information in a report. Long lists of recommendations are less likely to be read and acted upon. Remember that with each additional issue mentioned in a report, you decrease a chance that readers will reach the final page of your report. Thus, keep the report short and focused.

8. Rank Findings

No one team has infinite time to solve all possible issues which were found during usability testing. It’s vital to understand that every issue that was discovered through usability testing is not equally important. Usability practitioners should prioritize all findings and put a focus on the most important ones. Ranking findings as low, medium or high severity helps the team understand what critical issues the usability study exposed

But before assigning a priority, it’s essential to work with a product team and stakeholders to build a consensus around what is considered as a high priority usability issue vs. what is recognized as a low priority.

9. Make Your Reports Sound Human

Don’t just list your findings and recommendations; describe them in a format of a story—a story of interaction users with a product. Usability reports are the most impactful when they illustrate problems using video clips of test participants and when they contain participant quotes recorded during testing sessions.

10. Customize Your Report for Different Audiences

It’s worth creating a few versions of usability reports for different audiences. For example, when it comes to writing a report for developers, you can provide more technical details, but for stakeholders, you may only skim an executive summary of prioritized issues.

11. Actively Promote Your Findings

It’s not enough to conduct testing, send a report as an email attachment and believe that team members will read it and act upon it. Usability practitioners should actively market their findings—make sure every person who needs to know, is familiar with your report.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

from Webdesigner Depot https://www.webdesignerdepot.com/2018/06/11-secrets-of-actionable-ux-reports/

Articles

Designing for accessibility is not that hard

Seven easy-to-implement guidelines to design a more accessible web ❤️

Digital accessibility refers to the practice of building digital content and applications that can be used by a wide range of people, including individuals who have visual, motor, auditory, speech, or cognitive disabilities.

There’s a myth that making a website accessible is difficult and expensive, but it doesn’t have to. Designing a product from scratch that meets the requirements for accessibility doesn’t add extra features or content; therefore there shouldn’t be additional cost and effort.

Fixing a site that is already inaccessible may require some effort, though. When I used to work at Carbon Health, we checked the accessibility of our site using the AXE Chrome Extension. We found 28 violations that we needed to solve on the home page alone. It sounded complicated, but we discovered that these problems were not that hard to correct; it was just a matter of investing time and research to solve them. We were able to get to zero errors in a couple of days.

I want to share with you some of the simple steps we took so you can also make your sites more accessible. These principles focus on web and mobile accessibility.

But before we get started, let’s talk about why that’s important.

Why designing for accessibility? 🤔

As designers, we have the power and responsibility to make sure that everyone has access to what we create regardless of ability, context, or situation. The great thing about making our work accessible is that it brings a better experience to everyone.

There are over 56 million people in the United States (nearly 1 in 5) and over 1 billion people worldwide who have a disability. In 2017, there were 814 website accessibility lawsuits filed in federal and state courts. These two pieces of data alone should convince us of the importance of designing for accessibility.

There is also a strong business case for accessibility: studies show that accessible websites have better search results, they reach a bigger audience, they’re SEO friendly, have faster download times, they encourage good coding practices, and they always have better usability.

These seven guidelines are relatively easy to implement and can help your products get closer to meet level AA of the Web Content Accessibility Guidelines (WCAG 2.0), and work on the most commonly used assistive technologies — including screen readers, screen magnifiers, and speech recognition tools.

1. Add enough color contrast 🖍

Buttons with good color contrast are easier to read for Guadalupe.

Color contrast is an often overlooked web accessibility problem. People who have low vision could find it difficult to read text from a background color if it has low contrast. In a fact sheet on visual impairment and blindness, the World Health Organization (WHO) estimates that there are 217 million who have moderate to severe vision impairment. So, it is critical to consider the sufficient contrast between text and backgrounds.

According to the W3C, the contrast ratio between text and its background should be at least 4.5 to 1 (conformance level AA.) The ratios become more forgiving with larger and heavier fonts since they’re easier to read at lower contrast. If your type is at least 18 px or 14 px bold, the minimum contrast ratio drops to 3 to 1.

Some tools will help you check this quickly. If you use a Mac, I recommend getting the Contrast app, with this tool you can instantly check contrast using a color picker. If you want to get a more detailed score, I recommend entering your color values onto the WebAIM color contrast checker. This tool will calculate the score for both regular and larger text sizes in different conformance levels (A, AA, AAA.) You can change the color values and see the results in real time.

Source: WCAG Visual Contrast

2. Don’t use color alone to make critical information understandable 💈

René gets happy when graphs are colorblind friendly!

When you’re communicating something important, showing an action, or prompting a response, don’t use color as the only visual cue. People with low visual acuity or color blindness will have a hard time understanding your content.

Try to use an indicator other than color such as text labels or patterns. When showing errors on the screen, don’t rely on colored text alone, add an icon or include a title to the message. Consider adding a visual cue such as font weight or underline text style to linked text in a paragraph, so the links stand out.

Elements with more complex information like charts and graphs can be especially hard to read when you only use color to distinguish the data. Use other visual aspects to communicate information like shape, labels, and size. You can also try incorporating patterns into your fills to make the differences more apparent. A great example of this guideline is Trello’s colorblind mode. When turned on, labels become more accessible by adding texture.

A good trick is to print your graph in black and white and see if you can still understand everything in it. You can also use an app like Color Oracle, which shows you in real time what people with common color vision impairments see. These tips help you make sure that the information in your site is color-agnostic.

Source: WCAG Visual Contrast Without Color

3. Design usable focus states 👀

Focus states are easy to navigate with Tyler’s prosthetic hand.

Have you noticed the blue outlines that sometimes show up around links, inputs, and buttons? These outlines are called focus indicators. Browsers, by default, use a CSS pseudo class to show these outlines on elements when they’re selected. You might find these default focus indicators not very pretty and be tempted just to hide them. However, if you get rid of this default style, be sure to replace it with something else.

Focus indicators help people know which element has the keyboard focus and help them understand where they are when navigating your site. These are used by people who are blind and require screen readers, individuals with limited mobility, individuals who have suffered injuries like carpal tunnel, and power users who prefer this type of navigation. Oh, and some of us use the keyboard as their primary way of navigating the web!

The elements that should be focusable are links, form fields, widgets, buttons, and menu items. They need to have a focus indicator that makes them look different from the elements around them.

You can design focus indicators that fit the style of your site and goes well with your brand. Create a state that is highly visible, with good contrast, so it stands out from the rest of the content.

Source: W3C Focus Visible

4. Use labels or instructions with form fields and inputs ✏️

Mr. López keeps trying to turn a placeholder text into a label.

Using placeholder text as labels are one of the biggest mistakes when designing a form. We might be tempted to go with this trend when real estate is limited or want to make our design more simple and modern—don’t. Placeholder text is usually gray and has low contrast, so it’s hard to read. If you are like me, you usually forget what you’re even writing, so it’s hard to know what the fields are about once the label is gone.

People who use screen readers usually navigate through a form using the Tab key to jump through the form controls. The <label> elements are read for each form control. Any non-label text, as placeholder text, is usually skipped over.

Always help people understand what they should do and write in a form. It’s best if labels don’t go away, even when the person is filling an input; people should never lose context with what they’re writing. When designers hide descriptions or directions in their forms, they’re sacrificing usability in favor of simplicity.

This practice doesn’t mean that you have to clutter your design with unnecessary information, just make sure to provide essential cues. Too much instructional text can be just as much of a problem as too little. The goal is to confirm that the individual has enough information to complete their tasks without friction.

Source: WebAIM Creating Accessible Forms

5. Write useful alternative text for your images and other non-text content 🖼

Robin found a new friend in a picture.

People with low vision often make use of screen readers to “hear” the web. These tools convert text to speech so that the person can hear the words on a site.

There are two ways that you can present alternative text.

  • Within the <alt> attribute of the image element.
  • Within context or surroundings of the image itself.

Try to describe what’s happening in the image, and how it matters to the story, rather than just saying something like “picture,” context is everything.

If the image is purely decorative or if it creates redundancy because the surrounding context already explains the content. Then adding an empty <alt> attribute will make screen readers skip it. If you don’t write any alt text, some screen readers will read the file name to the individual. That’s the worst experience you can provide.

Google is working on an image captioning AI that can describe photos with 94% accuracy. This model is open sourced and still in research — hopefully, we’ll start seeing it used in different products. In the meantime, we should manually provide text that describes the meaning and function of the images in our content.

Source: W3C Using Alt Attributes

6. Use correct markup on your content 🏗

Noah always wanted to be an architect.

Headings mark where the content starts — they’re tags given to text to define its style and purpose. Headings also establish the hierarchy of the content of the page.

Titles with big font sizes help a reader understand the order of the content better. Likewise, screen readers also use heading tags to read content. This way, people with low-vision get an overview of the page by reading each heading in a hierarchal flow.

It’s important to use proper structural elements when you develop a site. HTML elements communicate to the browser what kind of content they contain and how the browser should render or treat that content. The components and structure of a page are what arranges an accessibility tree. This tree is what powers screen readers which are used by people who are blind so they can “listen” to a page.

Not using markup correctly affects accessibility. Don’t use HTML tags for a style effect only. Screen readers navigate web pages by heading structure (true headers, not just text that is styled big and bold) hierarchically. The people that use your site can listen to a list of all of the headings, jump the content by types of titles, or navigate directly to top-level headings <h1>.

Source: WebAIM Semantic Structure

7. Support keyboard navigation ⌨️

Gael navigates with a keyboard while “hearing” the web.

Keyboard accessibility is one of the most critical aspects of web accessibility. People with motor disabilities, blind people that rely on screen readers, people that don’t have precise muscle control, and even power users are dependent on a keyboard to navigate content.

If you’re like me, you’ll typically use the Tab key on your keyboard to navigate through interactive elements on a web page: links, buttons, or input fields. The focus state that we discussed before provides a visual indicator of the component that is currently selected.

As you navigate through a page, the order of the interactive elements is essential, and the navigation must be logical and intuitive. The tab order should follow the visual flow of the page: left to right, top to bottom — header, main navigation, content buttons and inputs, and finally the footer.

A good practice is testing your site only using a keyboard. Use the Tab key to move through links and forms. Test using the Enter key to select an element. Verify that all the interactive components are predictable and in order. If you can navigate through all your site without a mouse, you’re in a good spot!

Last, but not least. Be careful with the size of your navigation — this includes the number of links and the length of the text. Tabbing through long menus may be demanding for people with motor disabilities. And listening to lengthy links can be cumbersome for people that use screen readers—try to be concise. Providing ARIA landmarks or HTML5 structural elements like <main> or <nav> will make navigation easier.

Source: W3C Keyboard

Beyond these guidelines 🙌🏾

These seven guidelines are a great start, and if you want to do more to make your product more accessible, I encourage you to

  • Get an Accessibility Audit. Use an audit service to find out if your product works with assistive technologies and meets WCAG 2.0 level AA. Use the audit results to fix problems and do another test.
  • Appoint an Auditor. You can appoint someone in your company to do recurrent accessibility audits. This could be someone in your QA team. If you don’t have someone with the experience, you can hire an external supplier.
  • Make accessibility part of your design research. When doing research verify if your assumptions concerning accessibility were right and if there are any potential opportunities to improve. Recruiting people with disabilities requires a bit more work. Don’t hesitate to contact associations, and communities—people are willing to help.

Conclusion 👏🏽

That’s it. Seven guidelines that will help you make your web design get closer to meet level AA of the Web Content Accessibility Guidelines.

Designing for accessibility is something that I’m still trying to improve. I’m working on practicing what I preach. I used to think that it was too hard and not that important. I was mistaken. I invite you to consider these guidelines as part of your process and continue the conversation on why accessibility matters.

As designers, it is our responsibility to champion accessibility. With it, we make technology usable to all people regardless of their abilities, economic situation, age, education, or geographic location.

Design responsibly. Thank you.

Reading resources 📚

Useful tools 🔭

  • WebAIM Color Contrast Checker: Great contrast color checker that gives you results in real time for regular and large text.
  • Inclusive Components: A pattern library in the form of a blog, with a focus on inclusive design. Each post explores a common interface component and comes up with a better, more robust and accessible version of it.
  • Color Oracle: A free color blindness simulator for Windows, Mac, and Linux. It shows you in real time what people with common color vision impairments see.
  • Vox Product Accessibility Guidelines: A comprehensive checklist for designers, engineers, and project managers.
  • AXE Google Chrome Extension: Test any site for accessibility violations using the Chrome inspector.
  • Contrast: A macOS app for quick access to WCAG color contrast ratios.

Hola, amigxs. I’m Pablo Stanley, designer at InVision Studio.

I write a comic series called The Design Team and I post design-related stuff on Twitter. You can also check out my YouTube channel, Sketch Together, where you’ll find tons of design tutorials.

Que tu día este lleno de momentos memorables.

Special thanks to Courtney M. Sawyer, Raúl Martín, Matthew Zuckman, Gabriel Valdivia, and Lex Roman for all their help writing this post ❤️

from Sidebar https://sidebar.io/out?url=https%3A%2F%2Fuxdesign.cc%2Fdesigning-for-accessibility-is-not-that-hard-c04cc4779d94

Articles

Why Design Thinking is failing and what we should be doing differently

Image source: https://goo.gl/3nLKhq

I have and always will be an avid supporter of the design thinking methodology. I have held talks and workshops about Design Thinking & Lean UX on adapting the methodology in our work. There is nothing wrong with the methodology itself; however the past few years have irritated me insanely as I have witnessed the process be quite abused in practice. Our industry has ended up creating many mediocre and expensive design solutions as a result. I recently attended a Finn Tech conference in London where almost every app looked the same. There was extremely little uniqueness and differentiation from over 100 services. The same “copycat” trends and standardization seem to be everywhere.

I saw Natasha Jen, Partner/ Designer at Pentagram, talk about why Design Thinking is bullshit and I completely resonate with her frustrations. Fredrik Matheson from IxDA Oslo and Lene Renneflott from Grafill have taken up the issue as well with their chronicle The Emperor’s new designer clothing (in Norwegian). They address the strengths with Design Thinking and talk about why the awakening of design in organizations is generally a good thing, of which I completely agree. However there is a darker force at hand and I do want to share the perspective I have attained over the past few years, on why Design Thinking might be doing more harm than good.

What’s going on?

As designers we want to grow and learn from other talented creatives, push boundaries and practice our skill. However the reality is that Design Thinking has encouraged the democratization of design where a solo creative is often mixed in with employees and clients that have very little experience with design in a fast-paced and multi-tasking environment. We are creating environments that deteriorates a creative’s skills when we should be enhancing the practice of critical problem solving, combined with imagination and elegant execution through design, implementation and testing. Our expectations should be pushed to want more, however we often settle at “this is good enough”.

Graphic design, motion and emotional design is usually an undervalued ingredient that gets cut short time and time again in Design Thinking, as most of the process gets spent on functional needs. The irony is that graphic design is extremely vital to success and getting that unique position in the market.

The downfall of co-design and collaboration in Design Thinking

Design thinking can basically be summed up by: collaboration, insight, problem solving, building and testing. This generally can be assumed to be a great process. Co-design and collaboration is a highly valued strength where several experts work together to ideate and iterate. The problem however is that critical problem-solving and design skills seem to evaporate when there are too many team-members and/or stakeholders involved in the process. Co-design with many stakeholders also takes a lot of time. Once a team thinks they have discovered gold together, they are only at the tip of the iceberg — but they often rush into the development without further maturity. At this point, many development phases are also cut dry and production is rushed.

Co-design and group brainstorms often fail because our minds are limited to the knowledge we know at that point.

A conceptual workshop lasts usually between a few hours to a day, but the deep work has only started and needs maturity and testing. It is first now that the real ideation and exploration phase begins with dedicated practitioners that are able to explore and share insight from several sources, building off of each other and their expertise. The deeper the exploration through design, development and testing with an intimate team of creatives, the greater the chances become for a unique product-market fit and incredible experience.

The main source of the problem

Design Thinking often involves huge teams of stakeholders that want to be immersed and included in the whole design and development process. The creatives have to spend a great amount of time involving their team in the process, which can greatly take away from the actual design and production work.

Teams are also often satisfied with discovering the tip of the iceberg. So much time and money has already been used up in the discovery and ideation phase, that we find ourselves rushed to create mediocre solutions. This over time can be a killer in motivation for any creative trying to establish a sense of meaning to their work.

Designers and creatives are only as good as the team they are surrounded by. If a talented designer has to spend 80% of their time teaching others or constantly explaining every decision in a rational way to stakeholders — they might not be such a talented creative in a few years. Their craft deteriorates.

I have witnessed to many unexperienced designers left with the client and their team alone without any experienced mentors, having to spend days doing non-design work. The art of problem-solving, thinking outside of the box and craftsmanship is dying in certain areas of the digital arena.

Design Thinking is a methodology that sells innovation and mind-blowing discoveries but the truth is that we are training designers and non-designers to be happy with half-ass work that uses a lot of time and money.

Great design solutions take time, deep flow and a dedicated team of creatives constantly pushing each other. Exploration and testing while ideas are maturing are crucial. The creative culture and bond is important to increase motivation and a sense of meaning.

An alternative approach to Design Thinking that balances the traditional design process with collaboration

We need to turn up the volume of the “black room” ideation and design process where skilled practitioners are trusted to develop their ideas, combined with a healthy balance of collaboration and iteration. New ideation is vital. We need to break out of what people expect, and surprise them with something much better. Innovation happens with deep problem solving and design skills that are allowed time, talent, testing and iteration to mature.

What I propose should be happening, and what I believe the best agencies still do, is practice trust by letting a team of experts become devoted and deeply committed to the concept and development. This team includes experts in communication, interaction design, graphic design and creative development with a project manager/ product owner that can filter away any distractions. The client and team should trust the experienced practitioners and creatives to take the insight and go further. Stakes and expectations should be raised. The team of experts should continue to collaborate with others, but only in-between flow-sessions. Brilliant execution craves deep flow and creative juices.

The more a team of talented creatives are left to work on their trade, the more likely the outcome will turn out to be a great solution, for the same price or less. The difference is that they have spent less time rationalizing every decision to involved stakeholders.

The right skills with the right environment

Problem solving and design are vital skills we should be enhancing, not deteriorating. They take years of practice and maturity to master. Creatives should be pushed to practice the art of exploration and simplification into clear and unique concepts, followed by the ability to break these down into details with beautiful execution.

One’s talent is only as good as their environmental pressures. Putting creatives into the wrong environment will get you mediocre results. We need to push boundaries in explorative environments where creatives are trusted to pursue their craft together.

A great design process involves experience, insight, imagination, simplification and brilliant execution through tested iterations. I believe the more we get back to basics and actually let skilled practitioners create, the more we are able to develop sophisticated and brilliant solutions for less than the cost of the mediocre solutions we see far to often today.

Photo by OVAN from Pexels

from Sidebar https://sidebar.io/out?url=https%3A%2F%2Fuxdesign.cc%2Fwhy-design-thinking-is-failing-and-what-we-should-be-doing-differently-c8842f843b44