Design Principles

I’m currently working several projects for my company’s portal and internal employee tools, when it occurred to me that both environments lack a set of guiding design principles. While doing research, I came across a great article by Jessie Chen, a product designer in San Francisco, entitled, “Why Design Principles Shape Stronger Products.”

I could not have said it any better. Enjoy. Then go forth and design stronger products.

One of these things is not like the other

Ah, indicators, notifications, validations. A virtual soup of icons, color, and text that either lead to minor panic attacks or promote procrastination.  Those visual nuances that tell us through color, icon, text, motion or a combination thereof, that something needs attention: immediately or later or FYI. Sometimes accompanied with fear-of-God messaging, sometimes not; “(!) Please provide a first name” or “(!) Required.”

However, not all notifications are necessarily equal. Notifications may and will have varying levels of importance to the user or to the system. Failure to see and take action may have serious consequences, while others can be put off  – i.e., remind me later.

Nielsen Norman Group (NNG) has, as usual, an informative article on indicator types, “Indicators, Validations, and Notifications: Pick the Correct Communication Option.”

I’m in the midst of a project where there are four to five potential levels of notifications  with possibly more to appear. Yes, it’s a cringe-worthy, but sometimes you show up and the only thing you get is lemons. So you do your best to manage the experience for the end user. In this case:  not confuse the hell out of her (the user) by having to decipher different color notifications w/ or wo/ indicators (e.g., icons) and messages (at the same time), try to prioritize them (correctly), and then act on them (or not).

You know, “Do no harm.”

The project is the display of a specific set of categories (approximately seven) with corresponding attributes and data. Oh so much data. The UI is a grid display (think Excel), and therefore imperative that the user be able to quickly orient herself, interpret what she reads/sees, and locate things she needs to attend to: immediately, soon, or whenever. (Literal definitions.)

In order of priority:

  • Blocker – critical information is required or the user can’t participate in sales
  • Nice to have – information the user should supply, but not a blocker
  • Optional – information can be supplied, but it’s not critical or nice to have
  • Search results – here’s what you searched for,  here is/are the result(s) – or not

The key to managing this potential carnival will come down to business rules.
Such as:

  • When do certain notifications appear, or not appear?
  • What notification overrides all others?
  • What notifications can appear together?
  • What notifications are considerate reminders while others are more in your face?
  • And etc.

Without business rules in place the user will undoubtedly be hit over the head numerous times with numerous messages, and most likely experience inaction (freeze) because it will be difficult to know where to start.

Biz rule #1: Critical information is king – bow down
Obviously, the most critical information needs to be top dog; if it’s missing, the user needs to supply it ASAP. This is notification should, when applicable, be highlighted above all other notifications to allow the user quickly focus and take action. In other words: red.

While other notifications may have messaging, color and icon elements, if there is a “blocker” on the page, the other notifications are downplayed to let the blocker notification stand out.

Biz rule #2: Nice to have, plays nice with others
Though not critical, “nice to have” information is still necessary. In this case, I’m following the NNG recommendations for a passive action notification and indicator. Meaning, in absence missing critical information, cells may be highlighted per section

However, if a blocker is identified on the same screen as “nice to have” then the prompt will be suppressed to allow the user to focus on the most critical missing information, but a secondary configuration for “nice to have” may remain.

Biz rule #3: Optional is neutral territory
Optional is exactly that, optional. A user doesn’t have to supply it, and if they do, good for them. I’ve chosen to leave these cells status quo, meaning no notification or indicator. The only thing the user will see is an edit icon if she taps or clicks into the cell. This is a pattern used on previous internal UIs accessed by the vendor, as well as a common image for edibility. Having it appear on click or tap is to reduce visual noise, because there is A LOT of data on these screens.

Biz rule #4 Search – make results obvious amongst other indicators
Obviously, with a lot of data, having the search highlight the data that matches the search query assists the user, as there’s not traditional “search results” screen. However, there may be times when cells may be highlighted as “nice to have” prior to and after the search query. Since the search function is a temporal situation, the cells may be highlighted while “nice to have” may be suppressed in order to reduce visual noise and maintain focus.

What’s the old saying, “looks good in theory but how does it look in practice?” Hopefully there will be an opportunity to test the rules soon with real users of the system, and see if I can direct them to react and act appropriately. Time and use will tell if I’ve dialed in the appropriate levels of color, messaging and iconography at the proper times and in the right context.

 

 

Designing with color blindness – a color blind designer perspective

Aaron Tenbuuren, a color blind designer, offers perspective on how we can consider color blindness when designing, as he writes in his recent post,  “Designing For (And With) Color Blindness.”

I didn’t realize (or maybe I forgot the number) that one in ten individuals are color blind. While a relatively small portion of the population, they are still users of apps, sites, experiences. Multiply that number and it leads to a large percentage of potential users/visitors/customers who find using your site or app difficult and/or not worth the effort.

I’ll find nice photographs that have great color palettes, pieces of furniture, paintings, anything. These already established and proven pieces are a great source of color influence.

I appreciate Aaron’s inspiration for color palettes – particularly since it exists in the physical world, outside the online one. Even more so when you consider how he experiences color. Not an absence of (which I previously associated color blindness with), but difficulty in labeling or telling one color from another.

I once had a color blind, color photography instructor in school. We would constantly ask him (to the point of annoyance, I’m certain), to identify colors in our photos, or in the subject matter we were photographing. He’d get it right 100% of the time, which just blew me away. And his photographs were equally as stunning.

There is something to learn from a different approach seeing and experiencing color. Perhaps Aaron and my instructor understand color better then individuals with normal sight do.

UX Mag: Modals on Mobile: How to use them wisely

Chris Wigley of UXMagazine gives succinct review of the current use of modal windows use in small screen design. He rightly reminds of us of when and how modals should be used. If the content was planned for, then make it right, instead of a modal hack job.

Modals are becoming the dumping ground for content that doesn’t fit anywhere else, often because of issues with content planning. Modal windows should be applied only to meet the following objectives:

  1. Interruption: force the user to make a decision or complete a task within an important workflow
  2. Feedback or Correction: Confirming decisions: “Confirm you are happy with your decision” moment.
  3. Deep Dive: Focusing on a single piece of content, such as an image, article or video.

Read the complete article here.

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