Summary of UI Desgin for the human eye

April 2nd, 2018
  • Visual consistency isn't just about making things look nice, it also creates trust
  • Inconsistent designs will feel foreign are harder to use
  • Think about consistency first before you start designing. If you've already come up with an idea for the design before thinking about user expectations, it's much harder to move away from this mindset
  • Must run usability tests before and during designing to ensure consistency in a design

Testing methods

  • Card sorting - great for information architecture
  • Open card sorting - Users are provided with a list which they can bucket up into any categories they like
  • Closed card sorting - Users are given a list along with a number of pre-determined grouping options they can put things into
  • User intereviews
  • It's not about asking about what users like/don't like. It's much deeper questions about what they are trying to achieve and their habits and behaviours they exhibit to achieve those goals
  • Heuristic evaluations
  • Great for finding usability problems as well as evaluating the current state of a market based on competitors
  • You might want to critique the following areas, visual hierarchy, visual impact, effectiveness of system feedback, clarity of copy, ease of navigation and simplicity of user input
  • Try to get mulitple people to complete this process
  • You'll then want to diagram the results. Spider web is usually the most effective method for this
  • Compare results for consistencies and inconsistencies. e.g take a look at what competitors are doing and how you compare
  • This is a great way for you to visualise how you can get the upper-hand on competitors and where you might currently be weak
  • The key to starting by understanding user expectations before design is to scope out the competition, see what consistencies they have, listen to your users then test early and often.

Practical approach to visual consistency

  • Humans are highly visual creatures. Compared to the rest of the animal kingdom our other senses are a long way off.
  • We rely heavily on our sight to asses and interpret everything around us
  • Google determined it takes us 50 milliseconds to judge a website, visual consistency is clearly an essential part of the interaction
  • Vast majority of brain power goes into sigh - most is subconcious
  • Sense of sight is fastest, then touch, the hearing and sell and then taste which is by far the slowest sense.
  • Because visual design affects users on a subconscious level, it's so important that it's consistent
  • Repeating elements create a pleast visual pattern, a rythmn that capture users interest
  • Key areas to ensure visual consistency on are:
    1. Typography
    2. UI elements (maintain consistent padding/whitespace to allow for spatial relationships to ensure visual flow)
  • Spatial positioning is to essentially place things where users will subconsciously interact with, without much cognitive load
  • Size, related UI elements should be of a similar size and position. According to Gestal principles, any variation in appearance will suggest a different function
    1. Colour - remember colour theory, green suggests prosperity, blue suggests trust, red suggests passion etc)
  • Key takeaway - for successful interaction design you must prioritise visual interaction, especially in the 3 areas noted above

Affordances & signifiers

  • Affordances are what a product can do
  • Signifiers are the visual cues that hint at the function. e.g an envelop icon to signify sending an email
  • Well used signifiers will significantly cut down the amount of explaining required
  • Consider common patterns for the following: input & output, navigating, content structuring, reducing friction, incentivising, social sharing (e.g using social proof patterns to increase trust and encourage a purchase)
  • Key takeaway - decide on site specfic patterns you need to use, e.g if you're a photography you know you'll want to include a portfolio, then decide how you'll show case the portfolio, look at common patterns. Then you need to decide on the tactics you'll use in the pattern you've chosen e.g a image carousel and how people will interact with it

List of UI pattern resources worth remembering

By Jonathan Clift, a UX Desginer based in the UK.