Mobile first is by far the smartest approach. A design approach that embraces progressive enhancement is “future friendly awesome”
“The best way to find your breakpoint is to expand till your screen looks s**t”
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 and all else will follow”
Google User Experience Team
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.
The design makes good use of instantly recognisable visuals to create an emotional response and speed up response time.
The advert uses images and words that users associate with a specific concept, travel.
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.
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’
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.
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.
Here are some of the things I have been reading around the web this week, you might find them interesting…
Users instinctively have greater trust for content that appears on the right-hand side of the screen, argues UX designer Chris Da Sie
Overcome negative thinking and you’ll achieve your dreams. Si Jobling covers the more common design excuses and how to combat them
When designing a shopping experience for anything remotely complex, present the user with general information first, then help them dive into the details.
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?
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’.
Find Out More
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
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.