User Interface Design Basics—Some Rules to Keep in Mind

Posted by Milan Hajek Feb 22, 2017

common-mistakes-within-modern-web-design-trends_1000x576.jpg

If you look around the web these days, you might think they have uncomplicated interfaces—containing some navigation structure and maybe a contact form somewhere to fill in. Hopefully, the navigation is simple enough to provide the same or similar experience on all or most of the different platforms being used.

But increasingly any web designer must also be a user interface designer; a role that is becoming even more important with the arrival of new technologies and standards. Here are some fundamental rules to keep in mind.

Clarity Above All

Interface elements without a clear meaning will be shunned by most users.

To use a well-known example that drove me and others close to insanity involves Apple's store button. Apple used to have a very clear top navigation bar. To do a simple product comparison, you’d just go to the store, where it was very easy to navigate, and compare your choices. The store link was the first item after the Apple logo.

Source

Then, without a logical reason the store button was gone, relegated to the bottom page navigation. What’s worse, the ambiguous “clipboard” icon at the end of the new nav bar seemed to be the new store, but noit’s a “bag” and it doesn’t take you anywhere. The users are confused; clarity is sacrificed.

Source

Preferred Action Should Be Obvious

It should be clear and understood what the user should do next.

Here's an obvious example. The blinking cursor in the search bar removes any ambiguity as to where to go or what to do next. Yes, it is much more difficult on a regular page but we should strive for this kind of pointing to the pathway.

Source

Context

Interface controls should always be close to the controlled object.

To find out more about your account on Lynda.com, you just click on your name and all the pertinent information is there, just one click away! Make things easy for your users by placing controls next to the object if that object can be changed, edited or controlled in some fashion.

Source

Default Settings Rule!

Why is this ringtone everywhere? Because it was a default ringtone. Most people did not bother changing it, just like they don’t change the setup values on their TVs, car radios or other gizmos they use daily

Defaults are made to satisfy the majority of people and therefore are very powerful. Most of the time we do not even notice them. In your web designs make sure that your choices of defaults are the most practical choices for your users since they may never change them anyway.

Feedback

Use feedback to instill confidence in your user.

The more feedback you give your users, the more confident and in control they will feel. This also deepens their trust in your product.

Source

Easing

If you expect the user to invest themselves in doing a complicated task for you, your chances will be much better if you break the task down into smaller pieces.

If you quickly look over the forms presented below, you’ll immediately make a judgement that the top one is complicated and the bottom one is easy. They collect almost the same amount of information. Just as we consider long uninterrupted tasks boring, we are happy to oblige when the same task is broken down into smaller pieces; not as intimidating and easier to do. That is easing.

Source

Source

User demand continues to increase for more streamlined, dynamic and customized internet experiences. Designing a friendly user interface that meets this demand must be part of any successful web strategy.

.

Subscribe to our BLOG

Stay in touch & learn how to attract customers, become a thought leader, create effective marketing campaigns, & more.

 

10 Step Website Redesign

You might also be interested in:

User Experience Best Practices to Put Your User Back in the Experience

FAQ Friday: Creating a User Experience in 2016

Provide A Better User Experience with Interactive Images

Lead Nurturing Best Practices for a Unique User Experience

Improve Your User Experience with Creative Marketing Solutions

How Interactive Marketing Can Improve User Experience

How to Create a Winning User Experience in 2016

Thought Leadership Monday Mashup: Creating User Experience in 2016


Topics: Online Design, Website Design

Direct Images Interactive is an inbound marketing agency specializing in high-impact video production and online graphic design. We are centrally located between Oakland, San Francisco and San Jose. Come see us at The Gate in San Leandro, a thriving tech-hub of innovators. What can we do for you?

Learn more   How do you launch & measure a remarkable inbound marketing campaign? Get the tools you need.  Download tool kit.
Contact us  Share your challenges with us! We'll help you achieve your goals and ease your pain.  How can we help you?
Call us  Want quick answers to your problems?  What’s better than picking up  the phone and calling us?  510-613-8299 <>
New Call-to-action

Recent Blog Posts

In-Sites Video Series

IN-SITES LIVE! VIDEO