Humans will remember something longer if it made them feel rather than think. Understanding how the human brain works is fascinating, but it’s also good business.
Marketing campaigns rooted in neurology are more likely to get and hold attention. And in the attention economy we are living in, where consumers have access to more emails and tweets than they could ever manage to read and digest fully, being able to get and hold attention is what separates the wheat from the chaff. That’s what gets consumers to spend.
If you are looking to get more of your marketing efforts seen, then have a look at this infographic that highlights 12 biological trigger mechanisms that make the human brain light up. And use these insights to improve your marketing instantly.
User experience is an important component of branding. In today’s post I want to elaborate on that just to underline the importance.
First of all, let’s look at what a brand is not. A brand is not just visual. There’s so much more to it than just a logo, which is a common mistake.
A brand can be better thought of as others’ perception of the company, product or service.
If a website is frustrating to use, what will you think of it? You may well think they don’t care about making things easier for you, which will taint the perception you have of them. Now when you see or think of that company, you will likely think of any bad experiences you’ve had. Your perception of that company has changed because of the user experience. Similarly, if you’ve had a wonderful experience with a website, you now have a more positive association of that brand.
Every time I need to rent a car, I now think of how my experience of using Avis’ website was so fantastic. They’ve risen to the top as my favourite car rental company because they made the effort to think about me by creating the best user experience in the business.
Whenever I see a big competitor of theirs, especially the ones with dated websites, I immediately think they don’t care. Why haven’t they invested in helping me? They’re stuck in the past and you can see how this has negatively affected my perception of them. I will almost certainly never ever use Enterprise to hire a car, for example, even if they do redesign their website and improve the user experience. My negative perception of them is far too strong at this point.
Everyone is in UX
To be honest, I’m not quite sure where the term UX designer came from. If you’re a web designer, you’re also a UX designer even if you’re classed as a “visual web designer” (if you are, get a new job where they respect you). Aesthetics are also an important part of a brand but web designers do much more than visual work. If you’re a UI designer and designing the UI of an web app, you’re deciding on how people will interact with it, forming a key part of the user experience.
User experience shouldn’t be the sole responsibility of one person, or a team. Everyone involved contributes to the user experience, even copywriters, email designers and marketing teams are contributing to the user experience.
User Experience as Branding Examples
Think of some of your favourite brands online.
Google’s initial success came from a search box on a white screen and Gmail’s popularity was from creating a better email experience, including huge amounts of storage space. Dropbox attracted the attention of Steve Jobs because they solved a a complex problem (cloud syncing) in a simple way. Apple focuses on the user experience in everything they do, even right down to the way they package their products so the experience of opening them is the best it can be (others have since followed Apple’s lead).
Imagine what would have happened if any of those companies compromised on their user experiences. It’s easy to think of them as giants now, but they had to start somewhere and they started with great experiences. The experiences defined their brands.
Let’s look at a couple of lesser known examples.
Photojojo sell physical goods but their product pages are filled with fun elements, including a switch labelled “do not pull”, a ballon that shows a customer’s photo of a product when clicked and even an animated dinosaur taking a photo if you scroll beyond the bottom of the page.
Harry’s focuses on “quality craftsmanship” and “simple design” in their product line of razors and shaving goods. Their web design exhibits quality through the elegant use of typography, whitespace and colour. Simplicity shines through when purchasing, thanks to a simple set of subscription plans to choose from and an easy way to build your own. Their actual service is convenient (shaving gear regularly delivered to you) and the usability of their store needs to reflect that too, and it does.
Branding Can Inform UX and UX Can Define Branding
Remember how important the user experience is to branding on your next project. Doing so will also make the user experience true to the brand values. On the other hand, the user experience you design will contribute to forming a brand too if you happen to be designing a website for a new business.
When working on a brand that has already been defined you should bake it into the user experience. Going back to the Harry’s example above, I believe they only existed online initially, so they needed the online user experience to help define their brand and get their sales up and running. It was a key cog in the machine.
You already know how important a great user experience is, but hopefully now you know the role it plays in branding and how you can use existing brands to create an appropriate user experience or use it to help define a brand. Either way, it plays a key part.
While one of the easiest things to do in design and development is to make something simple seem complicated, possibly the single hardest things to do is to make the complicated seem easy. Making the complex seem simple is difficult and exasperating, and yet some companies are getting it right.
The web is such a wonderful and constantly evolving medium of communication. It takes words, pictures, videos, audio and interactions in a way that our options to communicate clearly seem almost limitless. But along the way, we need to remind ourselves of the message that we want to convey, or the information we are trying to capture, and really ask ourselves if all the fluff is really needed. If the answer is no, then that’s a great place to start with making something complex more simple.
There’s a common mathematical ratio found in nature that can be used to create pleasing, natural looking compositions in your design work. We call it the Golden Ratio, although it’s also known as the Golden Mean, The Golden Section, or the Greek letter Phi.
In this article, we’ll explain what it is, how you can use it, and point to some great resources for further inspiration and study…
01. What is the Golden Ratio?
Based on the Fibonacci Sequence (which you may remember from either your school mathematics lessons or Dan Brown’s novel The Da Vinci Code), the Golden Ratio describes the relationship between two proportions.
Fibonacci numbers, like many elements found in nature, follow a 1:1.61 ratio – this is what we refer to as the Golden Ratio, and as it forms such a common sight in nature, it feels pleasing to the eye when we use this same ratio in our design work.
The Golden Ratio is the relationship between two numbers on the Fibonacci Sequence…
…and plotting the relationships in scale provides us with a spiral that can be seen in nature all around us
It’s believed that the Golden Ratio has been in use for at least 4,000 years in human art and design, but it may be even longer than that – some people argue that the Ancient Egyptians used the principle to build the pyramids. In more contemporary times, the Golden Ratio can be observed in music, art, and design all around you.
Examples
Use of the Golden Ratio is well documented in art and design throughout history, and can be seen in everything from architecture to the grand masters. By applying a similar working methodology you can bring the same design sensibilities to your own work. Here are just a couple of examples to inspire you:
The Parthenon
Ancient Greek architecture used the Golden Ratio to determine pleasing dimensional relationships between the width of a building and its height, the size of the portico and even the position of the columns supporting the structure. The final result is a building that feels entirely in proportion. The neo-classical architecure movement reused these principles too.
The Last Supper
Leonardo da Vinci, like many other artists throughout the ages, made extensive use of the Golden Ratio to create pleasing compositions. In the last supper, the figures are arranged in the lower two thirds (the larger of the two parts of the Golden Ratio), and the position of Jesus is perfectly plotted by arranging golden rectangles across the canvas.
Nature
There are numerous examples of the Golden Ratio in nature – you can observe the ratio all around you. Flowers, sea-shells, pineapples, and even honeycombs all exhibit the same principle ratio in their make-up. So using the Golden Ratio in your design work is both appropriate and foreshadowed in our everyday environment.
03. How to construct a Golden Ratio rectangle
Creating a Golden Rectangle is pretty straightforward, and starts with a basic square. Follow the steps below to create your own Golden Ratio:
Step 01
Draw a square. This will form the length of the ‘short side’ of the rectangle.
Step 02
Divide your square in half with a vertical line, leaving you with two rectangles.
Step 03
In one rectangle, draw a line from one corner to the opposite corner.
Step 04
Rotate this line so that it appears horizontally adjacent to the first rectangle.
Step 05
Create a rectangle using the new horizontal line and original rectangle as guides.
05. How to use the Golden Ratio in your design work
Using the Golden Ratio is simpler than you might think! There are a couple of quick tricks you can use to estimate it into your layouts, or you can plan a little more and fully embrace the concept!
The quick way
If you’ve ever come across the ‘Rule of Thirds’ you’ll be familiar with the idea that by dividing an area into equal thirds both vertically and horizontally, the intersection of the lines will provide a natural focal point for the shape.
Photographers are taught to position their key subject on one of these intersecting lines to achieve a pleasing composition, and the same principle can be used in your page layouts, web mockups, and poster designs.
Although the rule of thirds can be applied to any shape, if you apply it to a rectangle with proportions approximately 1:1.6, you get very close to a Golden Rectangle, which makes the composition all the more pleasing to the eye.
Full implementation
If you want to fully implement the Golden Ratio into your design, you can do so easily by ensuring that the relationship between your content area and sidebar (in a website design, for example) adheres to the 1:1.61 ratio.
It’s okay to round this up or down by a point or two to make the numbers worth with pixels or points – so if you have a content area of 640px, a sidebar of 400px will match the Golden Ratio well enough to work, even though it’s actually a ratio of 1:1.6.
Using the Golden Ratio in a web-page layout provides a natural, eye-pleasing result
Of course, you can also sub-divide the content and sidebar areas up using the same ratio, and the relationship between a webpage’s header, content area, footer and navigation can also be designed using the same basic Golden Ratio.
GoldenRATIO’s favourites feature stores your settings for repetitive tasks
GoldenRATIO is an app providing an easy way to design websites, interfaces and layouts according to the golden ratio. Available in the Mac App Store for $2.99, the app features a built-in calculator with visual feedback, a ‘favourites’ feature that stores you screen position and settings for repetitive tasks, and a ‘Click-thru’ mode which means you can use it as an overlay in Photoshop and still work on the canvas.
This calculator from Pearsonified helps you to create the perfect typography for your website in line with Golden Ratio principles. Just enter a font size, content width, or both into the field on the website, and click the Set my type! button. If you’d like to optimize for characters per line, you can enter an optional CPL value.
Phicalculator does one job, and it does it very well
This simple but useful free app is available for both Mac and PC. Give it any number and it will calculate the corresponding number according to the golden ratio.
Atrise’s tool lets you design visually according to the Golden Ratio
This on-screen ruler and grid software saves you all that messing about with calculations and allows you to design using the golden section proportion visually. You can see and change the harmonious forms and sizes, while being directly in the process of working on your project. A regular license costs $49, but you can download a free trial version that’s good for 30 days.
This Smashing Magazine tutorial explains divine proportion and the Rule of Thirds and describes how you can apply both of them effectively to your web layouts. Some good starting points you can build upon or develop further.
The Golden Ratio is the relationship between two numbers on the Fibonacci Sequence…
…and plotting the relationships in scale provides us with a spiral that can be seen in nature all around us
Using the Golden Ratio in a web-page layout provides a natural, eye-pleasing result
GoldenRATIO’s favourites feature stores your settings for repetitive tasks
Phicalculator does one job, and it does it very well
Argience Blog 