I recently attended the 3-day UX Mobile Immersion Conference (UXIM15) in Salt Lake City, Utah, hosted by UIE (User Interface Engineering). If you’ve ever had the opportunity to attend any previous UXIM Conferences, then you know how highly rated the conference is for the quality of the speakers and topics they cover. Each speaker is literally household name in the UX/UI realm and their workshops and talks are of the highest caliber.
Never been to the UXIM Conference? I’ve missed a few years, and it’s a bummer to feel left out. Hopefully the recap below can give you a glimpse of wisdom and smarts from this year.
Kill your assumptions
Throw away all your working assumptions about input types, devices, screen sizes and user tasks because the lines are becoming more and more blurred. Technology, once iterating every 10 years is on course to iterate every 2-3. Instead of trying to keep up (and losing your mind in the process) in an industry of unpredictability, a more strategic, sane course of action is to approach web design with simplicity, accessibility and performance in mind by using tested, reusable components and patterns.
Input does not equal device does not equal input
We may no longer assume that a certain screen size, input type, or hardware equates to a particular experience. “Desktop” no longer equals a keyboard and mouse any more than a “Tablet” does touch. Moreover, how will web pages change with voice or gesture controls that sync with your devices? Input is not detectable in a reliable way – it is transitory and dynamic.
Device does not equal task does not equal device
“Mobile users will do anything and everything desktop users do, provided it’s presented in a usable way.” — Brad Frost (@brad_frost)
Assuming that a user will or won’t do something on a particular device, specifically a small screen, will get you into serious crap. It wasn’t too long ago we believed users wanted less content or only specific content on their mobile phones because mobile meant the user was on the go. We know now mobile users kill time on their devices while standing in a line or on the couch in front of the TV. Take note: 30% of global ecommerce sales come from mobile.
Device classes aren’t definitive anymore
“These days, trying to draw a line around device classes (mobile, tablet, desktop) is as fleeting as drawing a line in the sand.” — Jason Grigsby (@grigs)
Defining device classes these days is like trying to definitively classify a Labradoodle as either a Labrador or a Poodle. Desktop to tablet to mobile dimensions now either overlap or are separated by just a few pixels. Besides, what class does a watch fall into, or a refrigerator? The windshield of your car? It’s best to think about devices by size (XS, S, M, L, XL) instead of by class.
Performance is a Design Requirement
“Being Responsive from a layout perspective should not preclude us from being responsive from a performance and interaction perspective.” –Scott Jehl
Performance may appear to be “invisible,” but it can have a direct correlation to whether or not your user decides experience your site. Performance needs to be an essential design principle, not just a technical responsibility. Good performance is good design.
Some sobering thoughts:
- 1.97mb – that’s the average page size of today’s web.
- 74% of mobile visitors will abandon a site if it takes longer than 5 seconds to load.
- 85% of mobile users expect mobile sites to load as fast if not faster than desktop sites.
- The top e-commerce sites are 22% slower than last year; user data confirms that slow sites result in lost revenue. A slow loading site is one of the primary reasons for site abandonment.
Don’t add the unnecessary in the first place.
If the quickest way between A and B is a straight line, Stephen Hay succinctly states that a lot of experiences out there have (consciously) put a lot of crap between A and B, making for some ridiculously complicated experiences.
The Zero Interface Approach
To help achieve the universal of goal of getting from A to B as quickly as possible, Stephan Hay uses “The Zero Interface” approach: UX/design starts with zero-base. You begin with nothing, what you need is added, stress tested, and refined. Concurrently, you ignore client/designer/developer baggage such as competitor patterns, sunk costs, design trends, pattern libraries because baggage focuses on existing solutions.
The goal of Zero Interface is to focus on solving the problem, versus applying existing solutions blindly without understanding the root of the issue. It forces you, at every step (UX, Design, Dev) to examine each component you add and implement to ensure that it is part of the solution, not adding complication. Train yourself to think, with each addition, is this one thing to many?
Responsive Web Design and Progressive Enhancement
“We in the web world Rube Goldberg everything.” – Stephan Hay (@stephen_hay)
Responsive web design isn’t just about making web pages fluid and displayable across multiple screen sizes; not “one size fits all.” Modern web design is about ensuring that design and technology aren’t keeping users from accessing the content they want or need. This means considering and solving for a vast array of scenarios, like devices that may just be a few months or a few years old, disabled script, unsupported touch, older browser compatibility, while simultaneously creating experiences for current technology and devices yet to exist.
Keep in mind: 68% Americans access the web from a mobile device, and ⅓ of mobile web capable Americans access the web solely through a mobile phone. This means if a user can’t access your content, your information, your products or services on mobile, then you don’t exist for those users.
“We have a moral obligation to make sure content and information is accessible across devices and inputs.” — Jason Grigsby (@grigs)
To achieve broader accessibility web design experts Jason Grigsby, Brad Frost, Stephen Hay (to name a few) recommend Progressive Enhancement: begin designing for the most baseline experience–a small screen, slow data plan, no touch capabilities. Once the baseline experience is determined, layer on enhancements such as visual aesthetics, interactivity, gestures–stuff more modern browsers, technologies, and devices will detect and render. The “fallbacks” created by the baseline considerations have two advantages: 1) content and information is accessible 2) the site potentially won’t fall apart with when the next greatest thing comes along. With proper planning and implementation, the site will be useful and usable in an industry of unpredictability, diversity, and disruption.
Atomic Design
Along the lines of RWD, Brad Frost uses an approach coined, “Atomic Design.” Atomic Design is a set of 5 principle stages that more or less occur concurrently: atoms, molecules, organisms, templates, pages. The goal of an Atomic Design approach is to bring together individual elements (atoms) to form a component (molecule) that when combined with other components creates a larger organism. These organisms, or patterns, are placed into content frameworks (templates) to test the pattern across multiple scenarios. As more and more patterns are added to the template, the page takes shape.
The benefit to Atomic Design is that it allows the team to focus on individual design patterns instead of trying to solve for a page of patterns all at once. The content framework infers where solutions will eventually be implemented (placeholders) with finished patterns introduced as they are designed and tested.
Key to the success of this approach is to get into the final environment (the web) as soon as possible; to stop thinking of websites as set of individual pages, but as a system of components combined together. With the near limitless number of devices, breakpoints, resolutions and technology, it is nearly impossible to create a mockup for every breakpoint in photoshop (not to mention, what happens when there’s an edit that needs to made across all the pages). Additionally, the static page is not an accurate representation of the final experience, which is why it is crucial to move out of static comps to code once the design aesthetic has more or less been established.
Is Design Metrically Opposed?
“Bounce rate is the most cited metric for pushing a content agenda.” — Jared M. Spool (@jmspool)
Measure: Something we count
Metric: A measure we track
Analytic: A measure software tracks
Missing: Are these useful?
All too often metrics and analytics result in inferences that are then translated into solutions without further examination. Google Analytics can’t tell you why; what content is the most useful? What you should do to improve content? Why people are spending money? Why did someone click?
Qualitative finds should drive our quantitative research; quantitative research should be focused on user frustration. By simultaneously overlapping a journey map of observed user frustration (and delight) of corresponding metrics, we are more likely to pinpoint and solve for the actual cause of user frustration, as opposed to a design decision based in inference. In short, user experience needs to own behavioral science.
See you at UXIM16!
ittybittyusability 