The Foundations of a Good UI

Not long ago, someone asked us to take a look at their UI to see how we could improve on it. When I started drafting my answer I realized that this information could be useful to others out there, as a strong UI should be helping convert visitors into customers, not being in the way of communication. The following pointers are some of the main things we at Codelitt try to keep in mind when designing a great user interface. It is by no means an exhaustive list, but it serves us as a foundation we build upon to deliver a strong end product.

  • Consistency in interaction: make users learn once, consistency solidifies learning. Users will expect interaction elements to look, behave and be found in the same way throughout the site. If consistency is taken away, the user is forced to learn something again making your site that much harder to use. Making things inconsistent has value only when you want to get things noticed. With great power comes great responsibility: break only when it makes sense to do so.
  • Another means of getting things noticed is contrast. Use color to favor your design and communication strategy.
  • Go for convention. Semiotics (the study of creating meaning in communication) explains how conventions are established socially as a tacit agreement to decypher the code that communication builds upon. Straying from convention means your user will have difficulty in understanding your message, which could lead to drop offs. For example: the color red is associated with danger and prohibition as established by social convention. Talking about the environment in red colors will confuse users and distract from the message trying to be communicated.
  • Strip down forms to the absolute bare minimum. If you have optional fields don’t include them in a signup form, set them aside for a later step within your app. Each field you ask for runs the risk of making your visitors turn around and give up. Sign ups should be as frictionless as possible.
  • Repeat info if the user has already input it earlier with smart defaults. By no means should the user have to repeat themselves (unless it’s a matter of security, like passwords or credit card numbers).
  • Fast loading and reacting times: help users with a loading icon or a task that’ll keep their mind off of the loading screen. Feedback is important even while the screen is loading. You know your website takes a bit to load, your users don’t. They might think it’s down or has crashed, and you could lose a user. That being said, optimize your code and images so that the website doesn’t even need to consider big loading times. Speed matters!
  • Use animations and transitions instead of showing changes instantly. As elements respond to a user’s interactions, it might be easier for them to understand what just happened if the element transitions into view with time. Feedback is just as important when calling out a menu, bringing out a pop up, shifting and moving elements around, etc. A built in intentional delay in the form of an animation or transition respects cognition and time it may take to a user to understand what changes are taking effect. Note that these should take around 0.5 seconds, and increasing time might make the experience feel sluggish.
  • Extra padding instead of overcrowding elements: white space is your friend! You might be unintentionally grouping elements together when not giving them much padding, and that creates a distortion in the communication if they have little to do with each other. By using white/negative space you’re giving each element the room to breathe and be a unit of information on its own, while providing a timely rhythm for your users to go through them and interiorize the information. This also correlates with ease of use, as too much clutter gives rise to usability issues.
  • Not necessarily UI but general advice: say no to stock photos. People smiling for no obvious reason undermines trust. Don’t fake it. Also, stock photos give the impression that the photographic choice was made in a hurry and without much care. Bespoke photography and better, more realistic shots will connect with your users in a much more intimate way and create a feeling of trust and proximity.

Download our Incubator Resources



We’re known for sharing everything!


Save more time, get more done!


Innovate from the inside

Written by
Vicky Jaime 23 Jul 2015

Creative Director, ocassional artist & space nut


comments powered by Disqus