5 Design Principles to Keep in Mind

As we’ve been working on redesigning the Eventable interface, I thought I’d share some of my thoughts on UI design and what principles I have found the most useful.

1. Think of the Audience (User) First

From the rough drawings on a whiteboard to the finished product, the most important focus of design should always be your target audience.

The most important distinction that I believe should be made is whether your website/app is enterprise or consumer focused. Why? Because that difference is essential in the effect/feeling you want your end-user to experience. For example, take a look at the websites of Salesforce and Pinterest. Salesforce’s website has mostly primary colors, solid lines, and an emphasis on text content. Pinterest is quite the opposite with a fancy background design, infinite scroll, and an obvious emphasis on images.

That being said, basic usability principles apply to both categories–both websites contain very prominent “calls to action” to get the visitor to sign up for their service. An important thing to note for enterprise websites is to not go overboard on text content (while it is essential to convey professionalism and expertise, your viewers are still regular people). Images, banners, and infographics can help make your design more appealing while keeping it professional.

2. The Importance of the Grid

Back in the old days of the web, website content was organized with a giant table. Even though it was horrifically ugly, it made the content digestible by giving all the content some order and helping create a logical flow (more on this later).

That same principle as important today as it was back then–many designers, however, powered with HTML5 and CSS3, forget about this and build elegant websites that are a pain to look at.

One test that I find helpful is to draw vertical lines at the right and left of each element (box, button, form, etc.). The less lines you have, the better. While it is ok to make a few outstanding elements (i.e. a large Sign Up button) you want to make sure that the majority of the elements on your page can fit within anywhere from 5 to 7 vertical grid lines. (Note: depending on the type of website, you’ll might also want to track horizontal alignment as well).

If you’re building a website, basic frameworks like Bootstrap or Foundation can help make the process a lot easier. (Fun fact: well-known sites like Slideshare, Codeacademy, and BufferBox use Bootstrap for their websites, so don’t shy away from it as a “beginner” tool!)

3. Create a Logical Flow

It’s very easy to get caught up in your own design and forget about what the average person who sees it for the first time will think. You always want to make sure that you create a logical flow that directs a user’s eyes to the correct areas in the correct order.

Although many services use tutorials to get users acquainted with the interface and its functionality, it often is the result of bad user interface design. In particular, websites and apps that welcome users with a “walkthrough” have received quite some criticism–most notably Max Rudberg’s article trending on Hacker News and the ensuing article on TechCrunch.

How do you make a user interface that has self-evident functionality? There’s lots of articles you can find online that cover this in depth, but the little tip I’d add is that you always want to keep the user’s direction of eye movement in mind.

Rank the items you think that it’s most important for the user to see and then make sure you draw attention to those elements. Simple things like borders or darker colors can help make something stand out.

4. Responsive (Interactive) Elements

One of the largest flaws I see with many website designs today is the lack of feedback provided when a user performs an action. In my opinion, it’s imperative for any good design to react to what the user is doing (this is also a key part of building a logical flow).

While iOS and Android make this somewhat easier with standard animations libraries, websites have to come up with their own interactions that are both intuitive and unique.

Simple things like clicking a button or hovering over a link should produce some change, however minuscule, to react to the user and give him/her feedback.

The very best of these designs happen semi-automatically, keeping the user engaged for longer periods of time. A great example is many of the webpages Apple creates for its products–as you scroll down, MacBooks come to life and graphs become animated, repeatedly recapturing your interest.

Of course, you want to make sure than an action feels natural and provides meaning. The worst kinds of animations are those that move just for the heck of it.

5. A/B Test Everything

Lastly, you want to make sure that you are continuously getting feedback on your design and making any adjustments necessary. It’s easy to get emotionally attached the products you build and design but you have to be willing to iterate quickly and as often as possible.

As for services to help you do it, Optimizely is the most well-known service out there for A/B testing, but you can easily build your own or find an open source solution. For those who use Django, django-lean is a great tool that can do this for free.

An important thing you should keep in mind when A/B testing: after you’ve tested the change with your test group (approx 1%) and it seems to be better, don’t immediately push the change out to all users. Instead, gradually roll it out over a few days/weeks until only 1% of users see the old version (this is necessary to test out the long-term effects of your changes against a control group). Of course, once you’re fully convinced that the new change is better, you can go ahead and push it to everybody.

I’ve only listed 5 here, so this is in no way an exhaustive list…feel free to add any that you feel should be part of this list in the comments below!