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.

It’s an… Icon? A check box? Open/close mechanic? Navigation element? All of thee above? Please let this be broken.

I am a huge fan of (Ann Taylor) LOFT. The price point (everything eventually goes on sale within a week or two), quality, and style suite my budget and fashion sense just fine. I have a LOFT card to earn points towards more clothing, and I submit payments online.

The LOFT recently updated the account center where you manage your payments, balance, account activity, etc, because when I logged in today it announced the new account center “is even better.”

Yes, most of it’s cleaner and more suitable for multi-device and screen accessibility. But for whatever reason, there are square shapes showing up for almost everything, except text. And I mean everything.

The use of the square is so widespread I can’t be certain if something is broken, or whomever just got carried away. It’s a static visual, it’s part of the navigation menu, it’s part of the interactive features and selection mechanics in the UI. I’m really hoping something is wrong with their image server.

The worst part is that it just broke nearly every mental model I have when it comes to a square. Square = check box. Click/tap = select/unselect. I thought I was losing my mind. I kept tapping on my iPad expecting a check to appear.

Post Log-in Experience:
After the log-in screen I was presented with an overlay introducing the new account center. Initially, I wasn’t paying attention to the use of the square shape in this window. Not until I went to check the box “Don’t show me this again.” (See below).

LOFT_Screen3
Instead of a “check” in the box (or square), I got a square–in the box (or square). Is it broken or is this intentional? Good Lord, I hope this is broken.
LOFT_Screen4
Home Page and Menu:
LOFT_Home_1It just keeps getting worse. There are squares everywhere, and the intended use or purpose is a mystery to me. In the menu to the left of the page, the square is not used to visually demonstrate the “on state” (like filled in). Instead, a pink, vertical line is the indicator.

The three smaller gray squares in the upper right hand corner are navigation elements to the My Profile section, Message Center, and Help and Customer Care. I didn’t even know where I was going to end up until the page loaded. There is no label on hover state or otherwise.

When I click on the square next to the label “Recent Activity” it just rotates and reveals inline my recent account activity.

And at the top of the screen I don’t even know what the white squares in the pink circles are supposed to be.

Make a Payment:
The shot below is from my tablet, which is where I initially encountered this experience. Each time I tapped on the square, I kept waiting for the check mark. I must have tapped on “Other amount” half-a-dozen times before it occurred to me that the change in background color (light gray to dark gray) was the visual indicator for “selected.” Holy crap, is this intentional?

Not to mention, in the Select Checking Account and Select Payment Date columns, there are selections with TWO squares. What on earth are they meant to represent?

LOFT_TabletScreen1
The Aftermath:
I managed to make my payment. (I logged back in this morning to double check). But the scenario raises several questions.

The first question, obviously: is the use of the squares for all static and interactive UI assets intentional? I mean, was there a cognitive decision to use the shape to represent nearly everything?

Question number two: how many UI icons and assets are really necessary? A squint test on this page reminds me of a shooting gallery with lots of targets.

Final question, did this get a scrub and Q/A before it went live?

I really, really, REALLY hope something is temporarily wrong, because overall it’s an improvement to the previous experience.

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.

Make this banner go away

This isn’t a real blog “post” – more like a UX rant.

While checking out the pttrns.Beta site, I encountered a banner for “iPhone 6 Mockuuups.” And I continued to encounter it as I scrolled the page up and down.
Resizing the window didn’t keep it from obscuring the page content (I hoped it would shift out to the margins). Clicking on the banner itself and returning to the page didn’t remove it either. I tried grabbing it (which I could) and pushing/dragging it off the screen (nope.)

Yes, I looked for a close button.

Is there some new advertising model I wasn’t aware of? Is this a Beta site thing?

Whatever it is, it’s cruel.

Grrrrr.
Grrrrr.

Tiaras aren’t just for royalty (or pageants) anymore

A recent NY Times article, Are Tiaras the New Power Scrunchies?, and a second article on Jezebel.com, How to Choose the Perfect Business Tiara, highlight the tiara as the latest power accessory; completely acceptable as part of a woman’s business-wear ensemble, and not to be taken lightly when selecting and wearing. Yes, there are rules about wearing tiaras; whatever it takes, embrace your personal glitter power.

In the spirit of the Holiday Season and the 3%, I give you my possible tiara choices. Enjoy.

Bespoke 1920's Style Headband by StanAndMay on Etsy
Bespoke 1920’s Style Headband by StanAndMay on Etsy.com

 

Simple Crystal Bridal Headband by EdenLuxeBridal on Etsy
Simple Crystal Bridal Headband by EdenLuxeBridal on Etsy.com

 

Greek Goddess Laurel Leaf Tiara by AnneMarguerite on Esty.com
Greek Goddess Laurel Leaf Tiara by AnneMarguerite on Esty.com