Mobile first is by far the smartest approach. A design approach that embraces progressive enhancement is “future friendly awesome”
Brad Frost
Future Friendly Awesome
Expand till your screen looks shit
“The best way to find your breakpoint is to expand till your screen looks shit”
Brad Frost, Reasons to be respsonsive.
I recently attended a brilliant workshop by Brad Frost outlining approaches to responsive design. This is by far my favourite quote from the day. What Brad was getting at is that we should stop worrying about pixels and device specific break points when we think about break points. He suggested that we instead think of how our designs fit into small, medium, large and extra large screen sizes.
Thinking in this way helps keep everyone focused on making a design that looks and functions great at any resolution. When you start to design start with a one column small screen view and simply expand the screen till it looks, well, shit. Then you know where your first breakpoint should be.
Here is Brad Frosts tool Ish. It is a viewport resizer that demonstrates the point pefectly.
Focus on the user
“Focus on the user and all else will follow”
Google User Experience Team
The power of visual imagery & language
At Code we use PET (persuasion, emotion & trust) in most of the projects we carry out. Oglivy’s new campaign for Expedia makes great use of a few techniques using those all to familiar three letter airport tags.
Visual imagery
The design makes good use of instantly recognisable visuals to create an emotional response and speed up response time.
Priming
The advert uses images and words that users associate with a specific concept, travel.
Story telling
The adverts tell a story that includes the users. They use words that suggest a number of different narratives that we are all familiar with whether this is humorous situation, asking our parents for money or missing a loved one.
Triggers
The advert places a small nudge at the end of the page stating “stop wishing, start searching”. This is a nice reminder that the user should search for a holiday on Expedia.
Oglivy: Expedia advertising campaign
Written while listening to
Jon Hopkins ‘Light Through The Veins’
Design Principles: Using line of site to increase conversion
Photo Credit: Shandi-lee Cox via Compfight
One of the projects I am working at the moment is heavily driven by photography. While doing some research I came across a theory called Line Of Site.
If you want someone to take action, say donate to your charity, then the user needs to be made explicity aware that they can donate. Online this means that users need to clearly see the donation form. Often as designers we think these things are painfully obvious, but as we all know this is often not the case for a first time visitor. Line of site is about directing visitors attention toward what you want them to do!
Chemistry.com is a well know and great example of how line of site can be used effectively
Derek Halpern gives a good example of how line of site effects us in everyday life
“Imagine you’re walking down an empty city block and you spot someone curiously looking up at the sky. Would you quickly glance up to see what has their attention?
Absolutely! Now you’re wondering, what does this have to do with websites?
Let’s say you’re going to use a picture of a person on your website. Keeping line of sight in mind, you should direct their gaze the direction where you want your visitors to look.
Guess what happens? People will follow the gaze of the person in the picture because a human gaze is like a big red arrow pointing in a specific direction.”
In other words, line of site is a really good way of getting people to focus on important bits of information, whether you are designing a website, or a poster for print. The good news is that research shows that using graphics such as arrows is just as effective as photography.
The power of play: Fun Theory
Is changing peoples behaviour for the better as simple as making things fun?, Volkswagen seem to think so, they call it fun theory. The fun theory campaign, is an initiative to get people to change their behaviours, by allowing them to see how acting responsibly can be fun.
Volkswagen ran a competition which encouraged users to upload their own applications of the fun theory on thefuntheory.com. There are loads of great ideas, but a particular favourite of mine is ‘The Speed Camera Lottery‘. The idea is to not only capture people who speed on camera, but also the people who stick to the speed limit.
People who keep to the speed limit would be entered in to a lottery, and here’s the best bit, the winning pot would come from the people who were caught speeding.
As far as I can see the whole basis of fun theory is the work of B.F Skinner and his theory of operant conditioning. In a nut shell operant conditioning is a technique used to modify behaviour by reinforcing desired behaviors, and ignoring or punishing undesired behaviours.
SimplyPsychology.org notes that Skinner identified three different types of responses that can follow behaviour.
- Neutral Operants: responses from the environment that neither increase nor decrease the probability of a behaviour being repeated.
- Reinforcers: Responses from the environment that increase probability of a behaviour being repeated. The can either be positive or negative.
- Punishers: Response from the environment that decrease the likelihood of a behaviour being repeated. Punishment weakens behaviour.
Reinforces can be both negative and positive. Skinner showed that in situations that reflect positive reinforcement, a response or behavior is strengthened by the addition of something, such as praise or a direct reward. Universal Principles of design gives the example of pulling a lever on a slot machine. This results in positive visual and auditory feedback, and a possible monitory reward. In the case of fun theory the reward is fun.
Here is another really nice example of the fun theory, the play seat belt
For me the question would be are we using operant conditioning effectively. Punishment is an effective way to rapidly extinguish a behaviour, but this is damaging to moral. We seem to be so focussed on punishment for negative behavior, that we don’t think about increasing positive behaviour.
The Fun Theory does exactly this, it rewards people for doing something good, it makes doing something good, fun, in an attempt to increase the probability of a behaviour being repeated.
Interesting things from the web
Here are some of the things I have been reading around the web this week, you might find them interesting…
http://www.netmagazine.com/features/focus-right-hand-side
Users instinctively have greater trust for content that appears on the right-hand side of the screen, argues UX designer Chris Da Sie
http://www.netmagazine.com/opinions/design-excuses-and-how-beat-them
Overcome negative thinking and you’ll achieve your dreams. Si Jobling covers the more common design excuses and how to combat them
http://uxmag.com/articles/take-your-general-information-and-shove-it
When designing a shopping experience for anything remotely complex, present the user with general information first, then help them dive into the details.
http://uxmag.com/articles/content-as-conversation
Every use of your website is a conversation started by a site visitor. Think about it: why do people come to your site or app?
Colour and Usability
I have always been interested in colour and the effect it has on a design. Recently I have really started to think about how it can effect the usability of the objects and graphics that I design.
When we think of colour and usability the first thing to consider is saturation and value. In his book Colour Index 2 Jim Krause describes saturation as a measurement of a hue’s purity. A fully saturated hue is a colour in its purist form. Less saturated hues are those that have been muted. Krause defines a colours value as relating to how light or dark it is on the scale of white to black.
Saturated colours are perceived as more exciting and dynamic. They are often used when attracting attention is the priority. So consider using pure hues for items like buttons, links, alerts and important system messages. Saturated colours can visually interfere with one another and as a result increase eye fatigue, so use them sparingly and limit the palette you use.
Desaturated colours and shades of grey tend to recede into the background so are better to use when attracting attention isn’t the main priority. They work well as backgrounds and for grouping objects together.
Real World Examples
The screen grab of the WordPress interface above is a good example of using saturated and desaturated colours effectively. Saturated colours are used for important elelements of the site that the designer wants to stand out. They should be easy to spot (I am thinking the bright red download link). Shades of gray recede into the background and serve the purpose of grouping information into three clearly defined sections. Notice also the use of the limited colour palate. The only saturated colours used on this page are variations of blue and red. Now for an example of a site that doesn’t use colour in such an effective way.
This is where too many saturated colours can start to interfere with each other. Your eye is no longer drawn to a limited number of defined areas on the page. Instead the colours just get in the way of focusing on the content. In my opinion there is to many different elements fighting for the viewers attention. Here’s the same page but with less saturated colours for the menus.
The difference is subtle but it’s enough to make the page easier on the eye and this allows the user to concentrate on the content (there is still way to many colours here however). Obviously, there is many other issues not least staying on brand, but it does serve as a good example of how colour can effect the usability of a website.
To conclude colour can actually be very important when taking into consideration the usability of a webpage. I find it works best to limit the use of saturated colours to draw users to important parts of the design. Desaturated colours and grey’s are great for building the basic over all structure of the site. Following these rules can result in something I always try and aim for ‘quite structure’.
See more about quite structure here
Find Out More
Want to know more about my work, my design process or just want a general chat?. Please get in touch with me by phone on +44(0)7986 513187 or email me.
Colours In Nature No1.
I really like being outside and I really like colour, so I thought why not create a little series of blog post exploring colour combinations that occur natural in nature.
Using the colour picker in Adobe I picked out the basic colours from the picture. From this I used a square colour scheme (all four colours split evenly on the colour wheel) to create a couple of colour combinations.
Colour Combination Two
Colour Combination Two (with brown)
These colour combinations tend to work best if you let one colour be dominant. You also need to consider the balance between warm and cool colours.
Find Out More
Want to know more about my work, my design process or just want a general chat?. Please get in touch with me by phone on +44(0)7986 513187 or email me.
Desire Path In Lynch Wood
As you may know I find desire paths quite interesting from a user experience point of view. I came across this when I was out for my lunch time walk the other day. The original path arches round and people have just decided to walk across the grass in a straight line. It must save a matter of seconds, but it shows that people want to make their daily activities as easy as possible.
Find out what a desire path is and see more examples on Flickr.
Find Out More
Want to know more about my work, my design process or just want a general chat?. Please get in touch with me by phone on +44(0)7986 513187 or email me.