Day Two at An Event Apart DC

An Event Apart kicked off Monday morning in Washington DC, and this year, front end developer Karen Kitchens is attending on behalf of UX Booth and bringing daily recaps of the talks she attends.

Day two is a wrap! I may sound like a broken record, but I can’t stress enough: this conference is fantastic Below are my personal summaries and accounts of yesterday’s talks. And if you missed it, be sure to check out my day-one recap.

Choose Your Animation Adventure, by Val Head

When we’re about to start an animation project, how do we determine which technologies are best to go with? CSS animation is great when you’re animating on things like well defined state transitions, using looping animations, creating page takeovers or creating single element loading spinner. You can do a lot with transitions and @keyframes. However, CSS + JS can make it go further. JS is great for narrative/immersive, complex animation. It’s also good for when you need dynamic state transitions or more than one piece to respond to the same input. You could use vanilla JS, but that might become cumbersome.

Val’s shortlist for JS animation libraries is GreenSock, Velocity.js, or Anime Js. So what about SVGs? They’re great for animation like morphing, non-straight lines, and data viz. SVG’s are great for data viz because all of the data can be stored within the SVG itself. For best browser support, SVG animation requires additional JS. So basically, if you can use CSS animation on it’s own, go for it! If not, see what you can do by adding JS and SVG to the mix.

Next steps for the rest of us: Signup for her animation newsletter to start utilizing the best techniques in the biz.

The Case for Progressive Web Apps, by Jason Grigsby

Jason says that progressive web apps are really only at the beginning of the gartner hype cycle.

Why do we have to call them apps? Aren’t these just sites? Yes, but “the name isn’t for you,” says Frances Berriman, on naming progressive web apps. Adding service workers to your site will (for devices that use service workers, not iOS) allow you to cache specific assets and provide offline experience. In Grigsby’s words, “Developing countries adopt progressive web apps faster because they have to have performant sites.”

Push notifications are powerful, but we need to be careful about asking the user to enable. Try to identify when a user would actually like push notifications enabled, and offer them the option at that point. SEO benefits to having a web manifest file. Even when progressive web apps aren’t fully supported by a device, the site benefits from taking the challenge on. This means that iPhones and Androids don’t have the exact same experience, but they’re both better because of the work.

Next steps for the rest of us: Checkout the Washington Post on an Android device; pick a project to create a progressive web app for it.

The Joy of Optimizing Images, by Una Kravets

Una demands that we stop sending bigger images than we’re rendering on any given device. I totally agree, and have found myself guilty of doing this. She advocates for using emerging media technologies  like webp for jpegs and GIFV for gifs using fallbacks for browsers that don’t support them. With the combination of server side and client side technologies, we can create automated improvements to our images.

Some hacks for getting better performance from images include removing color from images, and using blurs. “Embrace the blur.” Una points out a current trend that gives the perception of good performance. That’s when you show a blurred super low resolution version of your image before the large resolution one has loaded. This is called a “blur up.” It’s a cool trend that I will definitely be advocating for on the WordPress and Drupal sites that I develop.

Something I was surprised by, but very intrigued to hear was that we should challenge the notion that we should be sending double-sized images up for retina enabled devices. How much value are we adding with these large crisp image files? Shouldn’t we be more concerned with saving data resources? I will definitely be more thoughtful when it comes to my retina sources.

Next steps for the rest of us: Become an image expert! Know the difference between lossy and lossless, pattern dithering and noise dithering, guetzli compression, etc. Know the answers to questions like, “What’s a FLIF?” Always run images through an optimizer like ImageOptim. After all: small improvements are still improvements.

Where Accessibility Lives, by Derek Featherstone

There’s this legacy message from the community that “if your accessibility is not perfect, you’re a bad human being”. Derek encourages us to be “better” rather than “perfect.”  Because, after all, “compliance isn’t our goal, our goal is that people can use stuff we make.” Making improvements to keyboard interactions is one of the top accessibility priorities since this provides value to the most people with disabilities. Other top priorities often include image/media issues like captioning for videos.

Accessibility needs to be in every release, it’s not something that can be left out of your MVP. Instead of buying screen readers and specialized keyboards to conduct your testing on, Derek suggests going to universities and reaching out to their centers for students with disabilities. This is a great place to find folks that might be interested in being paid user study subjects. It is so much more valuable to get actual users for your tests. Shopify Polaris and Lightning Design System are two good examples of how to integrate accessibility into everything. Derek showed us some photos of people using assistive technologies, and I can’t help but feel inspired to go above and beyond for the people who are trying so hard to use the things that I build.

Next steps for the rest of us: Build accessibility into everything and on its own (good thing I’m going to the day-long workshop tomorrow).

Design for Real Life, by Eric Meyer

“Our users are as varied as the world.” Meyer asked us to consider donuts. Are donuts the universal reward? No, because nothing is. He says that to a person with celiac disease, donuts represent pain. We have to more cognizant of our mental limitations like unconscious assumptions. &nbsp

Think of Facebook’s seemingly upbeat “On This Day” feature, and all of the users that were saddened by pictures of ex-partners, deceased friends and relatives. We need to be prepared for users who come to our site in a multitude of emotional states. It’s not just about what device people are using on the web, it’s about the emotional context of their interaction as well. “Crisis-aware design” considers that if someone’s under a lot of stress, they’re not going to be able to go through 75 steps in a five page form. The “barrier becomes the filter.”

Next steps for the rest of us: Consider the different emotional contexts that users could be dealing with when they are trying to use your site. Look for ways to individualize experiences.

Measuring the Customer Experience, by Gerry McGovern

We can see what users are doing on our sites with analytics, but we don’t really know why they’re doing the things they’re doing. Creating “Success & Time” tests can help us discover the why, and what we should change. Surprisingly, you don’t need that many users for your tests. Between 13-18 users is all you need to get reliable success rates. Tasks should have an answer.

Many people assume that user testers should be empathetic, but this can be a setback for testers. It’s more important to not help your users during tests so that you can gather accurate data. You really need to say nothing, and stay on script, even when your users are struggling. If a feature is having a very low success rate, show video of your users struggling to upper management. Watching users fail to do the task you expect them to do, is a very compelling reason to fix something.

Next steps for the rest of us: Take video of user tests and show to upper management.

Stay tuned once again for the third and final day!