Elaine Heinzman

Content Strategist and Information Architect

Designing for Users with Autism

Website design and usage is getting more challenging for a lot of us. In addition to more older Americans accessing the internet via smartphones only, more young people than before are living with diagnosed cognitive disabilities like autism spectrum disorder (ASD), which the Centers for Disease Control and Prevention says affects 1 in 42 boys and 1 in 189 girls.

Researcher Cheryl Cohen recently shared those numbers in a UXDC Conference session about web accessibility for teens and adults with autism that I was able to attend back in April. Cohen gave an overview of the cognitive traits that can affect users with autism and some recommendations for improving websites and apps to better meet their needs. This was very eye-opening to me!

What should we know about autistic users, and how can we design websites and apps to give them the best user experience? Here are the considerations and solutions that Cohen shared:

  • Contextual misunderstanding: Whether presented in words or in imagery, idioms and metaphors can be confusing to some people with autism.
    • Use more intuitive, less symbolic icons. Include descriptive text, which helps improve SEO, too.
    • When you’re writing for your website, keep the language simple. This might include shorter sentences or a conversational tone.
  • Visual processing: When looking at a lot of information all on one screen, some with autism become confused or distracted. So they simply focus on one specific item and ignore the rest of the page.
    • More white space, more visuals. Too much stuff crammed onto a screen distracts users and can add unnecessary steps to an otherwise simple task.
    • Fewer words, more bulleted lists. Large blocks of text make it difficult to find and focus on what is most important on a page.
    • Does your website feature rapid animation only viewable by Flash player? Get rid of it. It’s hard to look at and process fast-moving visuals.
  • Auditory processing: From voices to machines to their environment, some people with autism focus equally on multiple sound sources.
    • Sound quality matters. If your audio content or videos feature muddy or distorted sound, someone with autism will have a harder time discerning voices.
    • Captions improve comprehension. Mentally matching the sound they’re hearing with the images they’re seeing can be more difficult for a person with autism. Add captions to your videos and images as often as possible.
  • Different way of mentally organizing items: Inconsistencies can make it challenging for a person with autism to use web interfaces, especially if that person has trouble getting past mistakes or exceptions within a website.  
    • Watch how you design forms. In Cohen’s research, she found that teens with autism had a hard time filling out web-based forms. The biggest culprit? Inconsistent spacing between labels and input boxes.

The teens she interviewed and observed will, perhaps, grow up to become members of our clients’ organizations — but at the very least, they will be, or already are, consumers and users of other online content and resources. Improving accessibility for these users improves the digital experience for all users, so why not always design with these user needs in mind?

To learn more about designing for those with cognitive challenges, check out these resources from the good folks at Web Accessibility in Mind

Are you considering these factors when designing web or apps? What other specific user accessibility considerations have you come across that improve the UX for all users?

Elaine Heinzman

Content Strategist and Information Architect

Site Search Best Practice: Make the Search Box Bigger

Search drives almost everything online. While lots of us bookmark pages or click on links that take us from one website to another, typing keywords into a search engine and hitting ‘Return’ is how most web users, most of the time, try to find what we’re looking for.

When using search on a specific website (versus a search engine), we want an input box that allows us to see most, if not all, of the words we type in for our search. Yet you’ve probably had the experience of typing search terms into a too-small input box. Maybe the box is too short, so the text shows up looking tiny. Or just as frustrating, your query runs too long and scrolls out of sight.

User-experience gurus Nielsen Norman Group have the data to prove that these small search boxes are not just your imagination: “The average search box is 18-characters wide, [and] 27% of queries were too long to fit into it.”

Better to design a search-input box — or really, any kind of box where the user types in text — to be too wide than too short. And on the taller side, as well, so that there’s some white space around the words.

Don’t box in your users; give them the space they need to quickly review and revise their query before they submit it.

Design Trends for 2017

While 2016 was an exciting year for design – there was a shift toward mobile-first design, video and rich imagery were hotter than ever, and animations became the norm – I’m even more excited about what we can expect to see in 2017.

 

A few weeks ago, Creative Director Alex Pineda and I held a webinar with CEO Joanna Pineda to talk about the trends that are emerging in 2017, and how you can give your members the best user experience possible by incorporating them into your web presence.

Curious about what’s in store for 2017? Check out our recap video:

 

Whether your plans for 2017 include a large-scale website redesign, building a brand new website from scratch, launching an app, or simply refreshing a few of your key pages, we’d love to help you incorporate some of these trends!

 

Which design trends are you most excited about for 2017? 
Jaime Quiroz

Front End Developer

Flexible Layout Color with CSS3 Gradients

Sometimes designers will get imaginative and create what I call an “infinite sidebar”. This is when you have a column of content on a webpage with a background color that extends to the edge of your screen (while still maintaining a fixed width for the wrapping element of the pages content – for centering purposes).

This sort of thing may initially seem like it wouldn’t really work but thankfully implementing this on a web layout is simple thanks to CSS gradients.

CSS gradients can be a headache to keep up with – the syntax is not the same across the board for browsers. We at matrix use Compass to make our lives easier. The relevant SASS that generates the gradient in this example:

.wrap {
	@include background(linear-gradient(left, #FFF 50%, #2980b9 50%));
}

The basic idea is you have two columns, one white and one blue. To create the illusion of an “infinite sidebar” a CSS gradient (left half white – right half blue) is applied to a “wrap” element, which the layout elements are contained within.

The color stop of the CSS gradient is hidden by an “inner” element (the container with a fixed or max-width). The “inner” element has a white background color, is centered on the page and is positioned on top of the wrap element.

Flexible Layout Color - demo image 1

If you then apply the same color from the gradient to the second column within the “inner” element you’ll have the “infinite sidebar” effect:

Flexible Layout Color - demo image 2

Of course the best way to understand what’s going on is to inspect the demo I’ve set up and then try it for your self!

This also gracefully degrades in browsers that don’t support CSS gradients (check it out on IE9 or less – it looks like a standard sidebar with a background color)

View the demo here.

What’s your favorite CSS design trick?

5 Top Sources for Free Stock Photos

Stock photography, when used properly, can be a real visual asset to your site. However, there is a lot of garbage to sift through to get to the good stuff and the process can be down right tedious and expensive. If you have a website or blog, there is a solid chance Professional photographer takes posed photoyou’ve run into the problem of finding quality images at an affordable price.

The major problem with stock houses is that their overly posed, stiff images tend to be severely dated, but yet they still want you to pay a premium for them. That doesn’t always seem like a good deal to me, so when I have time—and a small budget—as a designer, I tend to look at these top five free stock photography sites first.

1. Wikimedia Commons

All of the images on this site are uploaded with Creative Commons licensing, and are owned by the individual users, not Wikimedia. Creative Commons licensing basically means the photographer is graciously letting you use their image for free, but be sure to read the terms, sometimes there are conditions.

2. Compfight

This site is great because it allows you to filter Flickr images though Creative Commons, making the process much easier. The images are all uploaded by real users, and therefore appear much less stocky.

3. Stock.xchng

This is a more traditional stock house, just without stock house pricing.

4. morgueFile –  The word “morgue” is taken from the name of the room from the publishing world in which all clippings and image files were kept. Probably not what most people think of when they hear “morgue.”

5. Wylio

This site was set up with the blogger in mind. They make it easy to search, resize, download and imbed images into your blog all at once. 5 free images per month, with reasonably priced upgrades. You just have to grant access to your Google picasa web album.

Bonus! 6. Unsplash

This is technically a Tumblr page, not a searchable stock site. It’s full of beautiful, artistic, completely free, do whatever you want to them, images created by the people at ooomf. If you subscribe to their page, they’ll send ten new images to your inbox every ten days. And who doesn’t want eye candy sent to their inbox?

Knowing when you can and cannot legally use an image can be challenging, so make sure you read—and follow— the licensing info that accompanies the image. You don’t always have to “get what you paid for,” you just have to know where to look.

What’s your favorite free or low-cost resource for stock imagery?