CX Insights

Usabilla UX Index – Fogg’s Behaviour model, Lean UX, Colour Theory and more…

4 min read

Here we are again with another 5 words to update your vocabulary just in time for christmas.

Each month we continue to add new terms to our existing collection of Usability and UX definitions; terms we deem useful, interesting or – hopefully – a mixture of the two!

Discover something new, refresh your memory of the ones you thought you knew and find out interesting, little known, details.

Fogg’s Behaviour Model

Developed by BJ Fogg this model shows that 3 elements (motivation, ability and trigger) must converge simultaneously to provoke behaviour. If behaviour does not occur then at least one of these elements is missing.

Fogg’s model helps designers identify what stops users from performing particular actions. Each element has a collection of subcomponents which can help designers find the exact issue. There are three motivators, six simplicity factors for ability and three types of triggers.

The 3 core motivators – sensation, anticipation and social cohesion which all have two sides: pleasure/pain, hope/fear, acceptance/rejection. Core motivators apply to everyone as they are crucial to human experience.

6 simplicity factors of ability – time, money, effort cycles, deviance, routine

3 Triggers – facilitator, signal, spark

According to Fogg those who land in the lower right of the grid are unlikely to
interact whereas those in the upper right, with the right trigger are likely to perform the intended behavior.

Learn more at

Lean UX

Lean UX is a practice which focuses on eliminating unnecessary tasks and places greater focus on the user experience. This strips applications and designs down to the bare components so that only the minimum amount of information is available.

Lean UX breaks up the traditional sequential approach so that designers work with developers to create solutions. During this process feedback from developers, designers and users is key to producing a successful product. It is important that the whole team has an input, rather than relying on a solitary designer.

Grid Structure

Grid structure is a basic lesson you learn very early in design school. It’s a technique you learn to master before you start breaking the rules and it applies just as much to web design as it does print.

The grid is a guideline used to ensure your design has a solid structure. Images and words are aligned and sized to fit into the grid pattern you choose, to create an effective visual hierarchy. This ensures the most important information is highlighted displayed clearly. By allowing certain elements to break the grid, users will be drawn to the inconsistency.

Certain devices can have predetermined grid layouts to suit their size and pixels. Modern web grid systems usually have frameworks that simplify the development process so that pages automatically fit the grid system. Due to the growth in mobile and tablet technology, responsive grids are crucial in optimising content for a range of devices.

Grid System hosts many articles about grid design so you can become a master in no time.

Mobile first design

Mobile first -design is the practice of designing for the smallest screen first before later developing it for larger screens. Even with a rise in responsive design, a lot of designers still begin working on the full size version first.

If a designer begins by creating a design for a large screen, it can be hard to try and fit all of the elements of the design onto a smaller screen. Therefore, by starting with the smallest screen, figuring out which elements of the design are the most important, arranging the layout and enhancing the features can be extremely useful for avoiding problems later in the design process. This way round information and layouts can usually be adjusted a lot faster to the bigger screen, as you have already gone through the process of deciding the key areas of your website.

Read more about mobile first design here

Colour Theory


Colour theory is a collection of guidelines to help designers choose which colours to use. Colours can be associated with different meanings, which can be particularly significant in user experience design.

There are two broad colour groups – warm (red, orange and yellow) and cold (blue, green and purple). Warm colours are associated with happiness and enthusiasm, whereas cool colours can be associated with negativity or tranquility.

Colour Harmonies are basic rules for colour schemes:

  • Analagous – colours that are next to each other in the colour wheel
    e.g.shades of blue&green
  • Complementary – colours that are opposite each other in the colour wheel and green
  • Triadic – colours that are evenly spaced around the wheel
    e.g. red, blue and yellow.
  • Square and Rectangle – same as triadic but forming different shapes.
  • Split Complementary – a variation of the complementary scheme that adds the colour adjacent to the base colour. This is often a choice for beginners.

Individual colours can also carry meanings e.g. red is often used to represent danger/stop/anger/love and failure whereas green can be depicted as achievement, growth, and going forward. These interpretations can differ from country to country which often means designers have to take this into consideration before choosing designs purely on visual appearance.

Smashing Magazine have a detailed 3 part article on the subject, part 1 of which you can access here.

Bryony Watson
Online marketing intern at Usabilla