Were did nearly 2 years go?

For those who look at time stamps and time in-between posts, you undoubtedly notice that there are few posts in 2016 and 2017–maybe four or five total.

It’s not that I’ve forgotten to write,  or become bored with writing, or fell off the planet.

Sometimes you make plans and then life gets in the way.

Well, I think I’m back.

Directional signage, anyone?

Recently, when exiting the parking garage, I noticed some signage updates to the new payment system installed by the garage. Since I’m a monthly card holder, I just have to flash my card and the gate automatically opens. Based on the labels and dialog windows, my guess is that the process for paying to get out of the garage is not intuitive.

img_1101

Solar power genius

Take a good look at the photo below and tell me how absolutely genius this set up is.

ParkingLotNormanDoor
Genius

For starters, the smaller item on the far right with the slick rounded top is an electronic parking meter. You put in money or a credit card, select how much time you want to pay for, and it spits out a little piece of paper you stick on your dashboard.

Note that the parking meter has a solar panel on top of it, presumably to keep it powered or partially powered.

Now take notice of the larger “thing” to the left of the electronic parking meter. This is signage informing the would-be parker about parking rates, instructions on how to pay for  parking, and undoubtedly some language that says something about the parking company takes no responsibility for lost, damaged or stolen stuff.  Aka, fine print.

The designers of said signage thoughtfully included an awning over the signage, presumably to shelter is reading the instructions from the rain (this is Seattle, after all.) The awning manages to stretch over the a portion if not all of the solar panel on top of the parking meter. Again, I’m sure, to keep the Seattle downpour off of whomever while the parking people get their money.

Both of the signage and electronic parking meter are situated somewhat under a very large tree, the branches of which create a leafy canopy.

Now, I get that solar power has come a LONG way, but this is genius.

A brief time-out: Norman Doors

I have no IDEA why I’ve been thinking about “Norman Doors” lately; it may have been while watching an older episode from Modern Family where Claire gives herself a shiner while being boss for the day at her dad’s closet company.

Most in the UX community are familiar with the phenomenon, but for those unaware it’s relative simple. A “Norman Door” is simply a door that one simply cannot determine exactly if it is meant to be pushed open or pulled open. (The title is named after the well-known Donald Norman.)  Conflicting handle design (vertical or horizontal) and signage (“Push” or “Pull”) may often be at odds with one another.

I found a nifty little blog post with great examples of Norman Doors at 703 Creative.

NormanDoor_703
Photo credit: 703 Creative

The post has some great examples that will generally leave you head scratching, but hopefully wary next time you approach the entrance to your local shopping mall.

Redesigning the Apple Watch UI

Luke W (a.k.a. Luke Wrobleski) gives us a brief and informative breakdown of the Apple Watch UI and interaction model, with recommendations for improvement. I really like his take on the suggested model of use: notifications, glances, apps.

applewatch_awareness_2x
Illustration: Luke Wrobleski

Not an owner of an Apple Watch, yet, I can appreciate how iPhone owners (myself included) would look for a similar interaction model to access information. It only makes sense, right?

Read the full article here.

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.

Fun with Tables

For those who have maybe read one or two of my posts, you may have noticed that I draw inspiration from current events at my day job. It’s been awhile, but I’ve recently been asked to create a user experience for a table with the following display and functionality requirements:

  1. There is a default set of data that needs to be displayed, but no one seems to know who to ask to find out what the data is exactly
  2. The table can potentially display up to 17 columns (17 data segments)
  3. Users can customize the table view by hiding or revealing columns (data segments)
  4. Users can customize their table view by reordering the columns (data segments)
  5. Users need to be able to filter table data (rows)
  6. The table needs to be responsive, because the site is responsive
  7. We’d already designed a card view (previous iteration of a table scenario with less requirements), so our “new” table scenario needs to have continuity with the card

By now we (as an industry) have more or less figured out how tables on modern web sites (RWD) can render depending on the size of the screen. Such as:

  1. Tables (containing only numeric data) that switch to a pie chart when viewed on a small screen.
  2. Tables (with numeric and text data) that transition to a card or “cell” view when viewed on a small screen. See example.
  3. Tables that hide less important columns for smaller screens (not my favorite approach). See example.
  4. Similar to above, but a drop down menu is available to re-enable hidden columns that can be accessed with horizontal scrolling. See example
  5. Tables that flip x and y axis for smaller screens so the column headers are always visible while the data cells scroll left and right (on a small screen). See example. 
  6. Tables where the left-most column is “locked” in position on smaller screens and the remaining columns scroll, allowing for row-to-row comparison. See example.

Obviously, this isn’t the end-all-be-all list, but you get the idea. There are a lot of solutions out there, and luckily for me, I was able to adapt aspects of them for this particular ask. (With a little e-commerce conventions sprinkled in.)

Small Screen, Card View:
I decided that since a card view already existed (though with only 8 data points displayed), we would take a retail approach and treat this view as an “e-commerce” product card. Most e-commerce sites’ product cards (or tiles) contain an image, title, price, rating stars and number of reviews. In order for the customer to see more information about the product she needs to click through to the corresponding product detail page (PDP). Easy-peasy mental model.

Since each row in our table represented an individual item, and each item just happened to have a corresponding detail page, it seemed a logical solution. Why overcomplicate?

Also, it was decided that there was no point in offering the user the option to customize the information (requirements 3 & 4) while in the card view. The card data was predetermined and order locked, meaning trying to hide/reveal or rearrange the order would be a pointless exercise in futility. If the user wanted to see more item details and info, she could click or tap on the card detail to go to the corresponding detail page.

Medium Screen and up, Table View:
Adding a menu to hide/reveal columns was no biggie, especially for larger screens that had the real estate. Also, a filtering mechanic wasn’t an issue either, since the card view had to be filterable as well. Because we had solved for the question, “WTH what happens on a small screen?” it was just a matter of WTH happens when the medium/large screen gets smaller, but not small screen size.

The biggest issue of course, was the fact that the table didn’t have a set number of columns.  At any point in time a user would be able to hide/reveal/reset columns and rearrange the order of columns to suite their browsing preference. Regretfully, there was no user data to help inform any user scenarios, so we winged it.

It came down to two relatively obvious options: 1) the entire table is scrollable left-to-right (once the screen was reduced for overflow to kick in), advancing one column at a time, or 2) the left-most column would be “locked” and the remaining columns would scroll horizontally.  We went with option 2.

I really like Option 2 because it’s a brilliant solve for a table that has rearrangeable columns. Users can decide what information is most-to-least important that needs to be visible. As the screen sizes reduces, the most important information will remain visible, and secondary information accessible via horizontal scrolling.

We also decided to implement the ability to export the whole kit-and-kaboodle to Excel, just in case a user had hundreds of entries.

Fun with Excel.

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.