Read this article, “10 design principles every designer should know”, until you have it memorized.
That’s it. That’s the post.
Grocery e-commerce presents unique challenges
Baymard Institute once again provides a fantastic summary and findings from their in-depth research examining online grocery shopping. Several points stood out to me as unique departure from “traditional” online shopping:
1. Frequently or regularly purchased (e.g., “buy again” )
2. Ability to provide substitutions to sold out items
3. Delivery vs in-store pickup – sometimes in the same order
4. Ease of adding to card, often higher in the funnel than the traditional product detail page
Read the entire summary details here
The untold tale of decision making in online shopping
Short but sweet article gives us pause how the display of products affects customer decision making. Shout out to the author, Arkajyoti Das for the insights.
Read the entire article here.
Design Systems, Pattern Libraries & Style Guides… Oh My! (Oh Hell)
I’ve heard these terms used in both general and specific professional discussions for years now, and don’t really remember ever actively pausing to consider the differences. I’ve referred to them, researched them, even helped contribute to and design them. (I’m assuming I’m not the only one…) So imagine how genuinely thrilled I was to come across this teaching video by Jesse Showalter.
Low-and-behold. It goes to show that it’s worthwhile to take a moment.
Great article on table design.
As an Enterprise UX Designer designing internal tools, complete with views of tabular data and corresponding interactions, I live and breath tables. Or grids. Whatever you want to call them. Designing for tabular data is extraordinarily difficult; well designed tabular data will make a user’s job so much easier, while poorly designed data will ruin their day (and likely lead to high turnover because it’s a miserable daily experience and life is too short.)
That being said, I’m always seeking new ideas and best practices for table design, particularly when it’s enterprise related. The post, “Designing Tables for Reusability” is one of my oft-referenced and shared bookmarks. I’ll continue to share others as I go.
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.
Warmup in progress?
So. Many. Questions.
How The Guardian gets image management done – right
The Grid image service allows very fast search across our library of over 3 million pictures. Illustration: The Guardian
I’m currently in the midst of architecting and designing an image “management” tool for users to be able to upload, tens, if not hundreds, of images for the purposes of matching them to products to sell online, once the images have been submitted through an internal workflow (yet another tool – but not on my plate).
A fellow co-worker suggested that I look into the Guardian’s case study of the Grid; the Guardian’s now open-source image management system tool.
I’m in LOVE. L-O-V-E. with the approach.
Not only does has the Guardian open-sourced the tool, they’ve shared the methodology behind it’s creation (Programmer Anarchy), and presented insights from the UX perspective on how the entire team was able to get on the same page, at the same time, and work together to champion all the users–an actual shared Vision complete with succinct goals and KPIs.
Not to mention, a drool-worthy short video sizzle reel of the Guardian’s UX Studios.
How not to accidentally start a war
A very interesting article from the online magazine the Verge regarding the company that created and supplies the software alert system that was responsible for the near disastrous incoming BM warning issued to residents and visitors in Hawaii earlier this week.
When considering how our brains function, or don’t, during extreme conditions (an incoming missile being one of them), it’s rather unfathomable that there is no visual differentiation or confirmation between a “test” message and a “real” message.
The company has confirmed that, if creating a message from scratch, there are eight steps involved; if creating from a template: three steps. So users technically can’t just click a button and issue an alert – there are at least three steps. (I personally can’t imagine being able to keep my sh*t together to get through three steps, but then again, what we imagine we’ll do in an emergency situation is often not the case.)
What surprises me is that there is NO FINAL CONFIRMATION messaging when sending out a “live” message. As in, “Are you really sure you want to send an entire state into panic?” Or, “Are you really sure you want to start a war?” Maybe even a second one (a final final confirmation message) just in case cognitively the person isn’t thinking clearly, possibly adding bells, whistles and starbursts. (Studies show the same thing happens to pilots in crash scenarios. The brain can only handle so much at once.)
Word of the day: Confirmation.
Are you sure you want to start a war? Really sure? This action cannot be undone.
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.
ittybittyusability 