The myth of consistency

Adding consistency to a user interface is certainly a best practice. But it has become an umbrella term often rattled off by executive stakeholders with little understanding of exactly where consistency matters. It’s phrase that has become a victim of “scope creep”.

What consistency is

Consistency is important at the micro level. Interactions should have patterns that the user can follow. Similar tasks should have similar flows. Feedback and messaging should follow a well thought out and consistent. pattern. Feedback and messaging are one of my favorite aspects of UX. Communicate state and accomplishment to users in a recognizable, and regular way. This is the correct application of consistency. Consistency beyond the micro level has little impact…

What consistency isn’t

     ”Consistency is the spice of life.”

Um, No it isn’t. Users don’t connect to a site that is so patterned that changes are in recognizable. They need a difference in pace, style or layout to let them know they have arrived at a new modality in their user journey.

Consistency does not mean make every grid, color and element placement on every page exactly the same. When apps look like this there is no sense of difference. An app becomes a soviet housing project. Bland boring and oppressively ordered.

Even button placement, (I have argued this one)… Don’t be afraid to change the placement of an action button (if need be!). 

If you take some one to a different task that needs a different pattern. Don’t avoid the new pattern because the button will be in a different place. Apply whatever construct leads to results, even if its not like other places on the site.

When you add variations to a site or app, users attach meaning to them based on changes in the design. They will become cues that something different is offered or expected of them.

Variations can even offer users more than one way to get something done. Different users can attach to a layout that appeals to them. 

A good example that comes to mind is http://ui-patterns.com/. The home page offers a way to discover patterns that is gallery like. Click the design patterns menu button and the same info is organized in four column lists. http://ui-patterns.com/patterns. I prefer that page and go to it immediately when I visit the site.

The bottom line is that I encourage designers to not over apply the consistency term. Be consistent in providing solutions or direction but remember variation to your styles, layouts or flows allows for more delight and meaning.

The Chokehold of Calendars

This article has good insight into how workers have their scheduling priorities backwards and use software that perpetuates the practice.

Meetings shouldn’t rule our workday, we should  

When I worked on scheduling software at skedge.me, I learned that one of the features our users appreciated most was it’s ability to easily block off time so that their customers couldn’t book when they didn’t want them to. Availability could be set on a recurring basis or amended on the fly as seen here.

Drag and drop availability

skedge.me is used to allow organizations to offer online booking to their clients. Many businesses limited available time slots based on their needs. I even saw users with wide open schedules block off time just to appear “booked”, This feature is sorely missing in Outlook where our availability is usually set .by the exchange server and there’s nothing you can do about it. Or is there.

Tomorrow, I am going to set up some recurring "work" appointments throughout my week . I might add the project name to work on or set aside time for research or testing. This way I can offer a couple of hours a day for meetings.

Take back your schedule with me.

 

Always honor your users’ agenda first.

This is a rule for a successful product that is easy to break if there’s an agenda YOU want your users to follow.

A perfect example is the latest facebook update for android mobile.

They made a simple change. They switched the order of what information they deliver first. Previously, it loaded the notifications first… then the newsfeed. This way, you could quickly see if anyone responded or reached out to you and bail on the app before the feed finished if no one did. That’s handy for several reasons. For users like me, the newsfeed is unimportant; who’s talking to me is. Secondly, in low bandwidth situations, you don’t have to wait long to check your communications.

Alas, they switched the order and the newsfeed loads first. Now the app has this uncertain quality about it because the notification badges suddenly appear long after the app is opened. And the ability to quickly check messages is gone. My agenda is out the window.

Why would they do this? I have a feeling it’s more important to THEM that there’s eyes on the newsfeed. I suspect they put their agenda first at the expense of UX.

All apps have to strike a balance between user needs and the goals of those who deliver the product. But if company goals get honored ahead of users, you may see them flock to alternatives that keep their agenda first.

Contact Management Interface Tour

I think the contact management feature of skedge.me is my favorite part of the application.

I like the architecture, the attention to interesting moments, the detailed interactivity and feedback.

I also like it because of the collaboration between UX and engineering. I delivered tight wires and a solid design doc. We discussed the interesting moments of the feature and filled in the holes. As it came to life we adapted to problems that came up. It set precedence for the rest of the features on the app and defined the design pattern for the   administrative features of the product.

Booking Calendar Admin Interface

Here is a walk through of a feature for creating a booking calendar for a website. It incorporates a two panel grid with the primary panel used to present options and the secondary one for revealing a preview of the choices made. It shows off how to use heuristic elements, revealing options and choice feedback to guide the user through a complex task.

User Directed/Data Directed Interface Design

This is an example of a dynamic and responsive user interface designed to react to the direction a user takes to accomplish the goal. It changes based on the the state of the task and the amount of options that are present. Please watch the video or read on to get more of the details.

Read More

Animations can add more than polish to your designs

Subtle and unobtrusive animations can add a bit of polish to an application and let users know the product has a little pulse. But they can also serve the user and do more than just provide a little sizzle.

Read More

Booking Calendar Application Design

image

Scheduling applications demand user interfaces where successful completion of a task is critical for both business and customer. This booking calendar widget lets customers book services or sign up for events online. It must offer clear choices, display available times and make it easy to sign up for what you are looking for. Click the image to try it out for yourself. Feel free to book.

Read More

Vinyasa Visualization

My yoga teacher had trouble staying on time during class. She asked me to make her a way of keeping track of where we were in class. I came up with this visualization for an hour and 35 minute class. Each cone from the center represents a minute and it indicates the different sections of the class structure as it moves through time.

But it’s not just visual, it’s functional. To “use” it, I told her to keep a printed version of the graphic and align the start label with class start time on the wall clock. It will then tell you where you are or should be according to what time it was. As seen here, class starts on the half hour. I gave her a laminated one you could write notes on in wax and erase.

I was inspired by my study of Edward Tufte’s work on information density.

Complex Table Data Designs

I was searching the web for inspiration on complex data represented in a data grid. I am working on a CRUD table design with multi level information.

I remembered my work in 2006 on an alumina trading platform that represented deals with very complex layers of data. The data had many horizontal groupings as well as nested vertical associations. Looking at it today, it holds up pretty well. The “eye candy” is a little heavy but the client loved it. If I could go back I would tone it down and beef up the information more. Keep in mind these are excel worksheets.

What I like is the summaries, and nested data and subtotals all make sense. I use color and form to guide the eye to the associations involved in the information delivered.


I never did find and good inspiration on complex table designs. I hope these are a source for someone else looking for some.

To Tumblr, Love Pixel Union