User Interface Design

A rather embarrassing thing happened today that goes to show the importance of rechecking code and really touches on the truth behind user interface design.

We launched our new corporate site about a month ago. We received a lot of great feedback from our users, friends and family. We had some notes, but mostly, “We love the site. When can we sign up?” It wasn’t until we recently (today) released our latest corporate site that it occurred to me that we had typos and language that was never meant to push to production.

In the development world, we use a language called Lorem Ipsum. This is a language designed to help developers use filler text as a placeholder during the design and development process – before the copy has been addressed. The benefit is that we don’t have to created sample text to fill ourselves and it’s obviously not supposed to be there and can be clearly identified and removed before pushing the site to production.

Unfortunately, in our most recent case, we missed it. For over a month, we had placeholder text in our production environment that simply didn’t belong there. It seemed strange when we would get the occasional question, “What does MedClimate do?” since we had spent a long time designing and developing a site that would clearly and quickly articulate just that. What we didn’t realize is that our description texts were completely inaccurate and only a subset of the population actually reads it.

Here’s how it works. In user interface design, there are a few cardinal rules to understand when creating a web application.

  1. With any web application, users read from top left to bottom right. Those areas are the most important real-estate.
  2. As with any advertising, your users have a very short attention span. You must grab their attention in the first few seconds or you lose them.
  3. Visual is ALWAYS better. If you can articulate (or reinforce) your point with a visual – do it!

Based on these rules, we created our corporate website to be short, clean and visually appealing. Our complex product can be boiled-down to a few words and a couple of icons. As such, we realized that our descriptive copy is actually just filler. Here’s what it looks like:

You probably didn’t notice the text under each element. Why? Because its not important. The most important thing is to articulate your point in a few words. Make them 48-point font if you’d like. Look at MailChimp. In 3 HUGE letters, they articulate what they do, “Easy Email Newsletters.” That’s it.

So remember, when developing a new application, always make sure that your user interface is clean and simple with clear call-to-action buttons and intuitively designed flows. For you non-developers, look for that when using web applications – especially in healthcare. See if they follow these rules.

Check back for more updates as we build out our developer blog and remember – always check your code! :)