Coffee voucher progress

The Goal Gradient Effect

As humans and other animals approach reaching a goal, their efforts toward that goal increase (Locke & Latham, 1984). Rats run faster as they approach a food reward (Hull, 1934), and humans increase effort as they approach rewards such as gift certificates (Kivetz, Urminsky, & Zheng, 2006) or goals such as visual finish lines (Cheema & Bagchi, 2011). This is what we refer to as the ‘goal gradient effect’.

In this article we explore 3 different case studies on how the goal gradient effect has a powerful impact on social motivation.

1. The coffee loyalty card

Coffee shops offer their customers loyalty cards, which encourage them to purchase faster; collect all stamps in return for a free cup of coffee. Customers who receive a 12-stamp loyalty card with 2 existing “bonus stamps” complete the 10 required purchases faster than a standard 10-stamp card. The loyalty card scheme demonstrates the goal gradient effect as an “illusionary progress” toward the goal induced by accelerating the user’s progress, hence a bogus “head-start”.

Beware though, motivation and purchases have a tendency to drop after the goal is reached; this is called “post-reward reset phenomenon”. So, after a reward is reached, you are at risk of losing your customer.

2. Profile completion in LinkedIn

People are more than likely to complete a goal when they feel they are making progress. The goal gradient effect has not only been applied to coffee loyalty cards, but on websites and applications. A good example of this can be found in LinkedIn’s profile development; users are encouraged to add more personal information by completing objectives. Each objective can be as simple as adding your employment history, or even adding a charity you sponsor. The ultimate goal is for the user to complete as many objectives, and in return their profile will become more exposed to new connections.

The goal gradient effect comes into play when the user is able to measure their goal success rate with a progress bar. For newly registered users in particular, the progress bar is pre-filled. Because of this, new users will already feel a sense of progression and will feel more motivated to complete their profile.

3. Checkout steps

Another classic example of the goal-gradient effect can be seen in online checkout progress bars or steps; the user is given feedback on their journey to give them an illusion of a faster checkout. However, too many steps in a progress bar may result in negative feedback and a frustrating user experience.

Web Design Trends Word Cloud

Web Design Trends of 2015

Looking back onto 2014 (and beyond), there have been a lot of new technologies, trends and techniques, which helped define the look and feel of many websites and other digital products. At present day a lot of those trends are widely practiced, but how useful are they and do they serve any real purpose to the overall user experience?

Here’s a list of some of the web design trends which I feel have greatly influenced and transformed many of today’s websites.

Parallax scrolling

From 2011 there was a sudden boom in parallax scrolling; many designers adopted the special scrolling technique to add an illusion of depth to their background images.

Parallax scrolling can enhance certain aspects of the user experience, but it does not necessarily improve the overall user experience.


  • Adds a dynamic layer that has the potential to improve visual appeal
  • Subtle movement can attract the user’s attention and lead them around the website according to the designer’s intent
  • Allows content to be displayed on a single page and can help reduce user interaction to consume the content
  • Movement from parallax scrolling provokes the user’s curiosity and influence them to interact with content even more


  • Extreme use could distract the user from focussing on more important content
  • Similarly to the above, excessive use of heavy animation could potentially take web pages longer to load
  • Requires more attention on media queries to ensure that they render properly on smaller screen displays and to function smoothly across all browsers
  • Some users may find parallax scrolling frustrating
Spotify website parallax scrolling effect
Spotify employs subtle parallax scrolling on its homepage

Fixed navigation

Also known as a ‘sticky’ navigation bar, this is a technique that is widely used in modern web design. A fixed navigation bar is positioned relatively to the to the browser window as opposed to the page itself, and follows the user as they scroll up or down the page.


  • Easy access to site navigation and content; the user is no longer forced to scroll back up when they want to navigate the rest of the site
  • Allows designers to incorporate important elements for easy access and even to persuade the user


  • Reduces screen real-estate
  • Lack of support for mobile devices leads to potential of bad experience
Fixed Navigation on USA Today website
Fixed navigation on USA Today desktop website

The “Hamburger” menu

Nicknamed as the “Hamburger” or simply the “burger” menu, which is made of three stacked lines. The navigation menu icon is usually located in the top right of left corner of a website, and hints the user to click or tap to reveal more content.

Although the burger menu is widely used in modern web design (and particularly in responsive design), it has been under a lot fire and is the subject of many heated debates.


  • Useful for organising large menus in responsive design
  • Allows the user to access content on small screen displays


  • Increases lower discoverability; anything that is out of sight will clearly be ignored or even out of mind
  • The burger menu icon is not a strong visual representation of how it functions and may not be part of the user’s mental model
  • Even if the burger menu is part of the user’s mental model, it is less efficient than an instant navigation e.g., Twitter mobile App
  • Clashes with platform navigation patterns e.g., Google Chrome already features a burger menu
Examples of the hamburger menu navigation icon on small devices
From left to right:, Fifa 2014 World Cup App, Rightmove App
Example of instant navigation
Example of instant or tabbed navigation on the Twitter App

Flat design

A minimalistic design approach that was greatly influenced by Apple’s iOS 7 and Microsoft’s new Windows interface. Clear and simple icons, less visual noise and a broad range of bold and vibrant colour are typical traits of flat design.


  • Communicates messages more quickly
  • Likely to hold icons that can indicate universal actions or purposes
  • Reduces clutter and is less distracting
  • Quick for the user to grasp and store in their mental model


  • Potential to lower affordance e.g., a flat button may appear less intuitive than a skeuomorphic button
  • Excessive use of flat design could result in sterile and emotionless design, or simply put, a lack of creativity
  • Over-reliance on colour can create huge problems for colour-blind users
Examples of Flat Design
From top left, right and bottom left: Windows 8, Apple iOS 7, 450 gsm

Responsive design

4-5 years in with this concept and a lot of large companies have either dismissed or failed to implement a mobile responsive website. Whilst a lot of designers, developers and consultants urge companies to go ‘responsive’, it is neither industry standard nor the answer as the ultimate online strategy


  • Deliver content consistently to different devices
  • Quick, flexible and easy to work on most devices
  • Re-use code and content; no need to develop separate frameworks


  • Potential to cause slow download speeds, especially for images
  • A poorly designed responsive layout can lead to more complex user interaction
  • Designing and testing can be difficult
  • Pre-existing sites require rebuild to accommodate responsive design

Responsive design Vs. Adaptive design

Checkout the responsive design vs. adaptive design article, which explores these trends in greater detail and poses various arguments.

The Work Cycle responsive website on a desktop on mobile device
The Work Cycle Responsive Website

CSS3 Transitions and Animations

In recent years, designers and front-end developers have taken a bigger interest in bringing their websites to life through the use of CSS3 animated effects. Transitions and animations have proved useful for dynamic interfaces and marketing communications


  • Adds more depth and a visually compelling experience
  • Communicates a stronger and a more emotional message to the user
  • Subtle movement can be used to persuade the user to notice a key element in their peripheral vision; get the user to see what you want them to see
  • Great for marketing presentations; adds flow and curiosity


  • Movement in the wrong places can distract and even annoy the user; e.g., avoid using animations in a checkout flow or an area where the user requires concentration
  • Unless the CSS or JavaScript is light-weight, there is a potential for too many animations to increase slower page load
Examples of CSS3 transitions and animations
From top left, right and bottom left: Animate.css, loading animation in Yelp App for iOS, CSS animation cheat sheet by Justin Aguilar

Responsive web design vs Adaptive web design

Responsive Design vs. Adaptive Design

After all those months (and quite possibly years) of spending blood, sweat and tears on perfecting those fluid grid layouts in responsive design, we are now embracing a new web methodology, adaptive design. But what is the difference between the two? Which is better? And how should they be used?

Introducing responsive and adaptive design

Users don’t give a monkeys on how a website is designed; all they want to do is quickly access information and easily complete tasks. Optimising web accessibility however, is not that easy considering users are engaging with a multitude of devices. In an ecosystem of devices, users can choose to switch between desktops, laptops, tablets, smartphones and more. This indeed has caused quite a headache for designers and developers for some time.

Ever since Ethan Marcotte coined the term Responsive Web Design (RWD) in a May 2010 article in A List Apart, designers and developers have welcomed the technique to overcome the challenges of designing for a variety for small and large screens. For sometime, many sources have recommended responsive design as a cost-effective alternative to multiple websites, e.g., mobile only websites. In recent times however, businesses have turned their attention to adaptive design, which is causing quite a stir in the web design industry. But what is the difference? What are their goals? And does it really matter? Well, let’s find out.

Responsive Design

In a nutshell, responsive design is a modern web development method used for creating dynamic changes to the appearance of a website. Responsive design is client side, meaning that the whole webpage is delivered to the device browser (the client), and the layout is adjusted to respond to the screen display.

Responsive websites on a desktop, tablet and mobile device
Food sense is an example of responsive design that works on a desktop, tablet and smartphone

For sometime, responsive design has been a buzzword flying around in most marketing agencies. Many designers and developers adopted the technique as a solution to provide an optimal viewing experience for the rapid incline of devices. For sometime, responsive design proved effective in creating consistent experiences for most devices, meaning that the same desktop content could be displayed to fit the smaller screens of tablets and smartphones. Responsive websites have also simplified Internet marketing and SEO, and have enabled businesses to manage just the one responsive website without having to support multiple websites./

Responsive layouts are often assembled using CSS3 media queries, and fluid grids that use percentages to create a flexible framework. These frameworks are usually developed with breakpoints that define the changes to layouts for various screen displays, e.g., 1024, 960, 479 pixels etc.; and of course there is the use of Ems, flexible images and videos, type and more, all allowing the website to adapt its layout to various screen displays.

How responsive design works

An illustration on how responsive web design works
In responsive design, the same web content is delivered to all devices

Case Study: Firebox

The popular gadget store, Firebox, is a great case of responsive design. Not only does the website look great, it’s UI (User Interface) is optimised to respond to a wide range of screen displays; users can switch between desktop and mobile devices knowing that they can interact with the same content.

Firebox website responsive web design on a desktop, tablet and mobile device
Firebox utilises a single consistent website by using responsive design

Firebox has been designed to look similar to social media sites such as Pinterest; the homepage is beautifully laid out with a stream of tiles intended to entice the user to explore and click away. Navigation adjusts in the sense that primary and secondary links are organised inside a burger menu when viewing on a smaller screen display. However, when viewing on a mobile device, the most important considered elements (search, account and basket) remain in view. The overall experience is consistent across most devices in a sense that the same content is delivered with a similar look and feel. Some UI features however, could be questioned e.g., product descriptions and variants (options) which can sometimes cause incredibly long layouts for smaller screens. Plus, certain promotions are sacrificed on the homepage to not appear on the smaller screen displays.

In all, Firebox serves as a beautiful and consistent website, which still performs well in terms of speed and accessibility. It’s fluid layouts have allowed Firebox to maintain a single website on a multitude of devices. Whilst there are several UI issues, the experience is quick, clean, consistent, and most importantly of all it works!

Responsive design pros and cons


  • Re-use code and content
  • Offer all the features that the full site has
  • Quick, flexible and easy to work on most devices


  • Slow download speeds, especially for images (even if content is hidden via the CSS command ‘display: none’)
  • More complex interaction
  • Pre-existing sites require rebuild to accommodate responsive design
  • Designing and testing can be difficult

When to use responsive design

The questions who, why, and how should come to mind when trying to determine the intended outcome of your website. Do you have a clear, distinct type of audience? What kind of experience are you trying to cater? How do you expect your audience to contextually engage with your website?

You could use Responsive design for:

  • Websites that do not contain complex layouts or rich content
  • If you just need to resize and rearrange elements on the screen to fit the user’s device
  • Users who do not need to perform complex tasks
  • Layouts that need to be quickly applied and updated for all devices

Adaptive design

Similar to a responsive website, an adaptive website is intended to work on multiple devices by using the same URL. This means that users will not have to wait for a redirect. In adaptive design however, a predefined layout is delivered to the relevant device to provide the most suitable experience to the user.

Illustration on how content displays on different devices in adaptive web design
An example of how adaptive design delivers optimised content based on the device, but not the browser

The term Adaptive Web Design (AWD) was coined by Aaron Gustafson, who wrote a book of the same title. In his book he describes adaptive design as a strategy of progressive enhancement, which focuses on the user, not the browser. Additionally, adaptive design is all about creating an optimal user experience regardless of which device you use.

Adaptive design is predominantly server side. This means that before the page is delivered, the web server detects the device and loads an enhanced version of a website that is optimised for its dimensions and native features. By providing different batches of HTML, CSS and even JavaScript, an adaptive website is capable of superior content delivery and a highly differentiated user experience. For example, a mobile device can benefit from an optimised layout, which contains a mobile-friendly navigation, smaller image sizes for faster download speeds, and simplified UI for improved usability.

More brands and businesses are beginning to turn to adaptive design as a means to deliver context driven experiences. Adaptive websites can essentially capture user intent more precisely on mobile devices. For example, on an airline booking website, a user browsing a smartphone is more likely interested in checking their flight status than making a booking (which they may have already done so on a desktop or tablet at home). Adaptive design is also particularly useful for large websites that have been built with layers of legacy code; a developer will no longer have to revert to the drawing board and re-code the website from scratch.

In all, adaptive design can be used to deliver the correct content to specific devices and aid better usability and site performance. Having said that, adaptive design does depend on predefined screen sizes and requires more development support, which can be a pain for designers and those wanting to make quick font-end changes.

How adaptive design works

Illustration on how adaptive web design works
In adaptive design, the web server detects the device and then determines which content to send to the relevant device

Case Study: CNET UK

In 2011, CNET UK made their website adaptive, one that automatically changes the layout depending on the device you are using. CNET UK focused on three main devices popular with their audience including desktop, tablet and smartphone. Each device has an optimised layout, repurposed search and navigation, and different content delivery. However, the most notable change is seen on the smartphone, with only subtle tweaks made to the tablet to take advantage of the touchscreen.

Adaptive web design on a desktop and mobile device
CNET UK made their website adaptive to deliver optimised layouts to various devices

When comparing the smartphone to the desktop the first obvious adjustment is the search facility and navigation; the smartphone compacts all navigation inside a slide-out menu, but still makes ‘search’ a prominent feature in the header. CNET UK also took the steps to speed-up mobile browsing by adding suggested products in a search dropdown.

The large carousel seen on the desktop is nicely compressed on the smartphone by using a single slider, and with only secondary textual content being removed to keep headlines intact. More interestingly though, the desktop’s left hand sidebar is removed from the smartphone’s layout with the text formatted to fit the size of the screen properly. The smartphone’s list of articles is also bolstered-up with thumbnails and labels for improved visibility.

Another huge benefit of CNET UK’s adaptive website is that videos play on iPhones, iPads and iPod touch devices. As opposed to the desktop’s Flash video format, mobile devices play all video content using HTML5.

In all, CNET UK has executed a very good job of delivering the right layouts and context to desktop, tablet and mobile devices. The branding and styles are consistent across all devices and the viewing experience is made a lot easier on a mobile device by optimising the fundamental elements including search, navigation and content.

Adaptive design pros and cons


  • Repurposed content and new tasks for the appropriate device
  • Better usability and faster download speeds
  • Gives you more control over the design
  • Can be implemented on pre-existing site(s), especially those built with legacy code
  • Does not require site rebuild
  • Ideal performance across multitude of sites


  • Requires more development and support – can be costly!
  • Time consuming
  • Relies on pre-defined screen sizes

When to use adaptive design

Again, you should ask yourself the same questions when considering responsive design: who, what, why and when? Use your analytics to determine what percentage of your audience is using desktop, tablet and smartphones. Once you have cleared the path for what type of devices you should be accommodating, decide whether you need to repurpose your website’s layout and content.

You could use adaptive design for:

  • Providing complex content to old and new devices
  • To target specific devices popular with your audience with pre-defined layouts
  • Load correct high quality images for retina screen displays and lower quality images for standard-definition displays
  • Provide new or useful tasks to your audience

So, which is better, responsive or adaptive design?

In a nutshell, responsive design is quick and convenient, and adaptive design is perhaps the more intelligent development approach. However, there is no clear winner as your audience and business will always have different needs.

Ultimately, your audience will not care about how the site is designed and developed, they just want to access information and complete tasks as quickly and easily as possible. Whether you choose to use one and not the other is purely down to your user and business needs. However, you may decide to take advantage of their fundamental differences; responsive can be used as a base framework to fit most displays, whereas adaptive can be utilised to target specific devices popular with your audience.

Depending on your audience’s needs, and whether you are kick-starting a new website or looking to enhance a pre-existing website, there are certain questions to be answered such as:

  • What devices do I need to design for?
  • In what context will users engage with the website?
  • How do I expect my users to interact with my website, and what tasks should they be completing?