So What Counts as Data? 6 Myths about Data-Driven Design.

In April of this year I attended the UXIM15 Conference in Salt Lake City, UT, where I sat in on Jared M. Spool’s keynote: “Is Design Metrically Opposed?” The basic premise of Spool’s keynote is this: Google can’t tell you what the emotion, the human behavior, the mindset that influenced the action that resulted in the analytic. The human experience needs to be measured as well in order to create a holistic experience.

Since then, I’ve had a number of conversations with UX peers about how much power we (as a profession) give data when it comes to making user-centered design and experience decisions. While doing some additional research, I came across an article on UXMag on this very topic: “6 Myths about Data-Driven Design” by Pamela Pavliscak. I’ve summarized below; read the full article here.

So what counts as data…and what will inform design in a meaningful way?

Myth 1: Data Means Numbers
Numbers represent the actions of real people with complicated lives. But even the most organized sets of numbers don’t answer a lot of questions we still have about the user experience…why people take action or why they don’t, or how they felt about it, or what expectations they bring to the experience.

Because qualitative insights are not numeric, they are often not considered data.

Myth 2: Data Is the Objective Truth
Because quantitative data is typically tallies actions and those actions are tallied by software, it makes quantitative data seem like hard fact. Even if data is big, it does not mean it’s objective. Bias is inherent in any data set because datasets are created by humans who interpret them and assign them meaning.

Big or small, not data is perfect. Good data describes its biases, and always provides context.

Myth 3: Bigger Is Always Better
When we think bigger, we tend to think about tallies; the volume and velocity part of the big data equation. But big data is also about variety, and that means diverse sources. We have to get our data working together in a way that isn’t all about back-end integration. In other words, creating meaningful categories (metrics) to evaluate, understand and track.

Broader, not bigger, is the better.

Myth 4: Data Is for Managers, Not Designers
When using data to inform design, there are three ways of looking at things: proving, improving and discovering. Because different teams refer to different types of data, they may be discounting or not aware of data of other teams.

Data is not just about proving who is right or wrong. It’s about making improvements and discovering new possibilities.

Myth 5: Data Kills Innovation
Data is seen as the antithesis of innovation, specifically in three ways:

  1. Most data is backward looking. It’s not easy to make predictions based off of discovered patterns and trends.
  2. Data is tactical rather than strategic. It’s a good way to tweak a design element, but not for creating an amazing experience.
  3. Data, especially analytics, seems to skim the surface. Data does not work well for informing design, because it lacks information about motivation, expectations, perceptions or emotions.

Myth 6: There Is a Right Way to Use Data to Inform Design
As of now, there is no one canonical way that works for every team and organization.

A few guidelines:

  • Use data from a variety of sources
  • Include numbers and context.
  • Make sure data is sensitive to the complexity of the human experience.
  • Use data to track changes over time, rather than just proving who is right or wrong.
  • Decide on meaningful categories to make sense of the data and tell a story about the experience.
  • Develop a way to share and discuss data.

Modern web design is responsive (with a lower case r)

A great article by Nate Voss of VML about how we need to start thinking about modern web design. Nate makes a fantastic point that as users of the modern web we have come to expect web experiences to just work, no matter the device or platform.
This expectation of connectivity and accessibility anytime and anywhere leads to the necessity that modern web design needs to be responsive (lower case “r” is intentional). “Responsive” (with a capital “R”)  is a viable technique among many, such as Adaptive, Progressive Enhancement, RESS–aspects of which enable us to achieve the best, most accessible experience for the end user.

Read on at: http://vml.com/news-and-trends

User Experience Mobile Immersion Conference 2015 – Recap

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!

Tools for Mobile UX Design: Task Flows

Thanks to Steven Hoober for his article discussing a UX task that I use at the onset and throughout the course of a project – no matter the scope: Task Flows. With the all the devices out there (drum roll….Apple Watch 4.24.15), the focus seems to be shifting more to the UI and the concern, “how it will look on a screen.”  The industry is being asked to solve for more screens and often forgoing the key groundwork in order to meet deadlines.

Big takeaway: stay focused on solving for the user, then for the screen size or device.

Read on at UX Matters,  “Tools for Mobile UX Design: Task Flows.

Great UI/UX peer website

I stumbled across a great peer website today and wanted to pass it along. If you already know about Michael Locke (UI/UX Design, Training & Education), then feel free to leave “Old” in the comment section for this post.

Michael Locke is a Lead UX Designer with ADP with over 15 years web design experience, front end web development proficiency, marketing, photography, and a ton of groovy, savvy knowledge in related fields. From his “About” section, “I have a huge passion for helping people succeed.” Boom. There it is.

I highly recommend bookmarking his website and checking in now and then.

Wireframing & prototyping tools, a pinch here and a dash there…

With the internet now accessible anytime, nearly everywhere, across a plethora of devices, the ability to demonstrate a fluid interactive experience is quickly becoming a “must do” on any project. While static wireframes are still useful in initial design stages, they fail to communicate motion and movement which are integral to the user experience of today’s websites and apps. (Among other aspects.)

Fortunately, more and more wireframing and prototyping programs and tools are entering the market, so you don’t have to have be a front-end developer in order to create some pretty good, proof-of-concept examples to demonstrate the a feature, animation, or flow, instead of trying to describe it and leave it open to interpretation. Many offer a 30 day free-trial period, monthly or annual subscription options, reduced fee for inactivity (park the account), superb documentation and other perks.

Unfortunately, there doesn’t appear to be one program that can do everything you might need or want. I use about 5 different programs depending on what exactly I think will work the best for whatever it is I’m trying to accomplish. Or my team is trying to accomplish. And I still continue to research, experiment, and compare programs and tools as I go.

Below are some brief thoughts regarding the various wireframing/prototyping tools that I’ve been playing around with and incorporating into my projects. (Please note: this is not a soup-to-nuts audit and write-up of each program – just my observations and takeaways from personal use and team member input.)


 

For client presentations with polished comps demonstrating IA design or animations:

invision-logo-gray_300
Invision requires zero coding and is super easy to pick up and use. It’s a browser-based software so you can log in anytime and work on your project. For client presentations I upload static comps and use hot-spots to create a task or scenario flow for demonstration in context of the device. However, if you want to do more advanced things, (e.g., locking a reduced menu to the top of the screen on scroll/swipe), you may find yourself limited.

In addition to a presentation platform in device context, my team and I use it for what we refer to as the “Thumb Test.” We’ll upload screen comps into Invision, create hotpots, transitions, then shoot the designs out to our smartphones or tablets to see how the designs “feel” in context of an actual device.


protioiologo
Proto.io
 
becoming a team favorite because it offers features for both user experience and creatives. It offers layer-based tools with action, motion and minute control without requiring code knowledge. You can either upload assets and/or use the provided libraries. While it can be a little confusing getting used to the Proto.io nomenclature, once you’ve got it down it’s fairly straightfoward and streamlined.

marvelLogo
I just started playing around with Marvel and my first impression is pretty positive. My team and I equate it to a free version of Invision, but it offers more in the way of features and capabilities to demonstrate more advanced ideas. The jury is still out, but my team and I are feeling good about using this one.


For low-to-high fidelity interactive wireframes and/or vetting a particular concept or patterns:

protioiologo
Yes, I’ve listed Proto.io twice.  I’ve started using Proto.io to quickly vet IA and patterns on the fly to make sure the recommendations I’m making are solid, such as scroll fatigue in a product catalogue and associated calls to action. I’m able to quickly create a screen and then publish it for viewing on a particular device.

Proto.io is very similar to Invision, in that it requires zero coding and is easy to start using, but I’m of the impression that Proto.io is charging ahead with more advanced animation prototyping, adaptive capabilities, Sketch integration, and other features that currently Invision makes difficult or unwieldy.

uxpin
UXPin
 is a fantastic wireframing tool. It’s like a friendlier version of Axure and the libraries are PHENOMENAL. It’s has a relatively low learning curve, and asset editing is done in context. I use it to quickly vet content (images, text, buttons) at various breakpoints because UXPin dynamically displays the changes. The styling and animation features are really good too.


For hi-fidelity prototyping needs, such as user testing:

axurelogo+copy
Axure is one of the most widely used original wireframing and prototyping software tools. I’ve used it off and on, depending on project requirements, but am not a “super-user.” Axure is a program that requires planning and thoughtful use; you just don’t inject Axure into a process arbitrarily. There can be a relatively steep learning curve if you need to go beyond click-through mockups into rich prototypes with conditional logic and dynamic content.


macaw
Macaw
is another program I just started playing around with and liked so much I invested in it almost immediately.  It’s like “dev-ing” in photoshop, and vice versa, so it’s a good idea to acquaint yourself with HTML and CSS (or reacquaint yourself, if you’re a bit rusty like me). What I am thankful for is the fluid grid testing it allows me to do – I create my initial grid and it does the math for me at all the other breakpoints I set. With a little more use, I’m certain to uncover more gems in this one, it’s looking really good.


 

Summary
Like I stated in the intro to this post, I haven’t gone out and tried every wireframe and prototype tool out there. The programs listed above are what I’ve been using in my projects and team processes. Naturally, the competitive nature of these tools means iterations, features, and improvements. As well as new tools. Today’s tool may not be in the tool box tomorrow. It’s not difficult to try and test what’s out there – just remember there may be no “one” tool or program you use.

Image use, design patterns and style guides

A great podcast on current trends and challenges when it comes to responsive design, courtesy of Jason Grigsby (Cloud Four) and Jared Spool (UIE).

The lines between designers and developers continues to blur, and what is old is new again in terms of challenges of designing for the web. As responsive design moves forward, coming to terms with image use, design patterns and components instead full page comps, and maintaining style guides are the new challenges and headaches we get to tackle.

The Cupcake Effect

pink-champagne-cupcakes
Cupcake photo credit: Easybaked.net

A bloated ratio of links with little value to human visitors placed at the top of the page is like an oversized sugary topper with no nutritional value.
Bruce Clay – The Cupcake Effect

(Mmmmmm, frosting. Good on cupcakes, not so good on most web pages.)

I discovered this fantastic analogy (Thank you Bruce Clay!) for how to describe the effect of too many links at the top of a web page. Links that serve virtually no purpose to the site visitor, other than to get in the way of her ability to orient herself and explore the page.

It all began with a request for a page-level, contextual menu component be able to display up to 80 links. 80 LINKS. Not a mega menu (and even then I’d balk) or a filter menu, not an index page or site map. Instead, a content rich page with a menu component linking to corresponding top sub-categories (keyword here: “Top” not “All”) in addition to contextual navigation throughout the page.

There is a ginormous concern with this request.

To begin with, try rendering this in a mobile scenario. Since this is page level and not a global navigation menu, one option (albeit a bad, terrible, horrible one) is to list all the links on the screen and let the user just scroll away and away and away from the site. Option 2 is to concatenate the section with a “more” functionality in order to view the remaining links.

A third option is to adapt the list into a single call-to-action (CTA) component that, when tapped, opens up a menu on a second screen with hide/reveal functionality or links to secondary menu screens. At least with this option the list isn’t perceptively long and difficult to scan through, to a point.

Regardless, can you say, “link-gate”?

Imagine how much scrolling up-and-down or back-and-forth the visitor is going to have to do to find what she wants, much less understand what the links and the page have to do with each other.

More links on a content level category page do not help. They don’t help to orient the visitor to the section, the page and/or its contents. Instead, they have the opposite effect. The links add more noise and create more chaos. Dropping the visitor into a page with a menu of 80 links is a bat-shit crazy if you think it’s going to be helpful.

Which brings me to the looming issue with the request – no matter what device – the additional cognitive load the links WILL ADD to the visitor’s experience. That’s a bad thing.

Cognitive load is defined as the amount of mental resources or brain power required to understand and operate the system. Dropping the visitor into a page with a menu of 80 links is bat-shit crazy if you think it’s going to be useful or helpful.

Human brains have limited amount of processing power, and when the amount of information coming in exceeds our ability to handle it, our performance suffers. We may take longer to understand the information, miss important details, or even get overwhelmed and abandon the task. Says Nielsen Norman Group.

The best recommendation for this request is to approach the links in terms of quality, not quantity. The better the links or labels, the better the chance of the visitor exploring the page, finding what she’s looking for, and having a positive experience.