I’m not much for prognostication, so I won’t attempt to predict what unexpected things may happen in 2015 that could alter the course of web development or user experience. What I do see are lots of kettles already filled with water, with bubbles starting to form here and there. Here are some kettles from 2014 (or earlier) that I’m excited to see develop further in 2015. All of these are things I hope to explore in more detail, both in practice and here on the site.
Performance as a measure of experience
For a very brief moment in the mid–2000s, it seemed as though the need for highly optimized websites would become irrelevant as broadband became nearly ubiquitous. Of course, that was quickly debunked by the incredible growth of mobile devices accessing the web wirelessly. The truth is that no matter how fast access gets, every delay in getting content or functionality in front of the user has an impact on their experience. Designers must take performance into account in their visual design and planning. Front-end developers must optimize code and assets so they load efficiently. And back-end developers must optimize processes, queries, and infrastructure to perform operations smoothly.
As sites and apps are tested and go live, everyone on the team should be responsible for monitoring and addressing performance issues. For more on designing a better performing experience, I’d strongly recommend picking up Designing for Performance by Lara Hogan.
Want to test your site’s performance? Here are some good starting points:
Style guides and pattern libraries
Style guides and pattern libraries are certainly nothing new, but there are more resources and tools available than ever before for easily creating or maintaining them. I hope the tools and methods will continue to expand as more designers and developers realize the benefits.
In 2015, I’d love to see more style guides shared publicly. I’d love to see style guides with a wider scope, including branding, writing, principles, and more. I’d love to see more living style guides that reflect production environments automatically. And finally, I’d love to see more tools that simplify and automate some of the work that goes into creating style guides.
Here are some good resources to get started with your own style guides:
- StyleGuides.io - A huge collection of articles, books, examples, and tools for creating style guides
- Creating Style Guides
- Pattern Lab - A great collection of tools to help create a component-based pattern library
Meta data and cards
Unless you’re an SEO expert, meta data may be one of the last things you consider when crafting a user experience. While it’s nearly invisible to active users, social meta data and card data is quickly becoming the first thing most potential new users will see of your site. Both Facebook and Twitter have established meta data structures for automatically generating rich cards from a given URL, and apps like Wildcard will further help people easily find and navigate content through cards on their mobile device.
While some of these APIs have been around for quite awhile, they’re still far from universally implemented, let alone a natural part of the design process. As you build new sites this year, consider how adding or improving social meta data could improve the sharing experience for your users.
Here’s a few places to start:
- “Like”-able Content: Spread Your Message with Third-Party Metadata
- Twitter card validator - Test your Twitter meta data and submit your site for automatic approval
- Facebook Open Graph debugger
- Wildcard Developer Documentation
Responsive from the start
Of all the projects I worked on last year, only one was not responsive, and that trend will only continue, particularly for public-facing sites. For me and for my clients, this will also mean teaching them to think of pages and content as fluid collections of components rather than static layouts. I’m hoping to transition to using more style tiles, element collages, and atomic patterns and less static comps and wireframes.
I’ve read and reread Ethan Marcotte’s formative book and article, and I’m hoping to catch up on his latest edition along with Scott Jehl’s Responsible Responsive Design very soon. There’s still a lot of work to be done in improving the process of designing responsive sites and helping clients and stakeholders envision the end result throughout that process.
More SVGs and vector imagery
Following right on the heels of responsive design, SVGs and other vector tools (such as HTML canvas and icon fonts) solve a lot of problems simultaneously:
- Their lighter weight compared to bitmap images can be a huge performance boost.
- Because they are vector-based, they look great at every resolution and size.
- They can be restyled and animated via relatively lightweight code rather than through image manipulation.
Right now, grunticon (and the slightly more GUI-friendly Grumpicon) is one of the more widely recognized tools for automatically generating CSS with PNG fallbacks, but I’m hoping more tools will integrate web-friendly SVG output with appropriate fallbacks.
More and better UI animations
Good interface animation can provide context, soften harsh transitions, and subtly focus the user’s attention. I’m excited to use more SVG animations and transitions in interfaces, and I hope to see better tools for easily producing animations and more methods for creating whimsical, lifelike animation (a la the 12 principles of animation).
Good animation often requires that designers and developers work more directly together to get the flow just right. I’m hoping to explore and find tools that make it easier for designers to mock up the flow of animation in an interface and produce fairly robust production-ready code.
Here are some great resources to discover new interface animation patterns:
- UI Interaction Library - A library of interface transitions and interactions recorded as animated gifs
- Six UX - A collection of six second transitions and animations
Better responsive image support
Over the years, several methods evolved for handling responsive images, some of which are now getting official support in the W3 specs and modern browsers. As support grows, I hope we’ll see polyfills and methods standardize so that responsive images can become a more useful and less contentious tool for optimizing performance based on device and resolution.
Because the standards were under debate for quite a while, I have mostly avoided investing too much time in designing and developing with responsive images. That said, here are a few resources to get started:
Quicker, lighter tools and methods for user feedback
There are quite a few great tools for quickly getting unmoderated feedback, but getting quality direct contact with users often takes a lot of effort and investment, which can lead to less frequent engagement, narrower sets of data, or repeat feedback from the same users. I hope to see more tools that address some of the problems inherent in finding and recruiting new users for research, engaging them in usability and discovery, and even in collating and disseminating those results among teams.
Here are some great tools for getting quick unmoderated feedback from people:
- UserTesting - get unmoderated videos of users performing tasks you set up
- Delighted - quickly get NPS ratings from customers via email along with instant feedback
- Five Second Test - find out what your landing page conveys in 5 seconds
More and better open design and critique
At Snagajob, we had regular weekly critique sessions where anyone on the UX team could present their work for critique. It was a powerful tool for improving both the work being critiqued and the craft of everyone on the team. For smaller design teams or individual designers, there aren’t as many options for this kind of critique.
Designing in the open can allow these designers to quickly get feedback throughout the process rather than only at specific times. Right now, designing in the open is mostly ad hoc, with a few established tools like Dribbble providing a quick glimpse at work in progress and other new tools like Ocean allowing for limited feedback from larger audiences. Other tools like Notable and InVision are helpful for capturing direct feedback on visual comps or basic flows, but still leave something to be desired for capturing full interactions and micro-moments.
I’d love to see more structured tools and methods for handling both remote design critique and for presenting design ideas in the open as they progress and as part of the larger whole.
Want to learn more about design critique? Start here:
- How to run a design critique
- 9 rules for running a successful design critique
- Design criticism and the creative process
Interested in designing in the open? Here’s a few choice introductions:
- Designing in the open by Brad Frost
- Design in the open from The Guardian and their accompanying site for the new version of The Guardian
- Designing in the open by Ryan Singer
More inclusive user experience research and design
2014 was a divisive year on many fronts: GamerGate, Ferguson, and other events revealed existing schisms in our communities that hinge on both privilege and anonymity. As we consider building optimal experiences for everyone, I hope that more designers and researchers will look beyond the general majority and seek out the silent minorities, that users of all kinds will find more representation within design artifacts and processes. I hope that we will consider not just the happy paths, but the dark alleys our products may contain. I hope we will advocate for fairness and safety through the systems we design. I hope that we will consider the words we choose with care and consideration.
And finally, user experience as a focus of every position rather than a role
Over the course of my career, I’ve served in multiple roles from support and admin to developer to designer, and I’ve come to believe that user experience should not be the sole domain of one team or an individual within a team. I think the most successful products are created by teams where every individual is passionate about making a great experience for the user. Every choice from business model to security policy, support system to database schema is a deliberate decision that has the potential to affect the user experience.
I hope to see and create more tools and tutorials that help every member of the team participate in building better experiences. I hope to see more people treat UX as an aspect of their role, regardless of where they are in the org chart or their individual responsibilities. I hope to see more companies address the user experience not just by augmenting or creating a UX team, but by hiring and training employees in every role to be passionate about the experience.