Benjamin Tollady – UX Mastery https://uxmastery.com The online learning community for human-centred designers Thu, 10 Sep 2020 07:40:08 +0000 en-AU hourly 1 https://wordpress.org/?v=6.2.2 https://uxmastery.com/wp-content/uploads/2019/12/cropped-uxmastery_logotype_135deg-100x100.png Benjamin Tollady – UX Mastery https://uxmastery.com 32 32 170411715 Under the influence: Dark patterns and the power of persuasive design https://uxmastery.com/dark-patterns-and-the-power-of-persuasive-design/ https://uxmastery.com/dark-patterns-and-the-power-of-persuasive-design/#comments Wed, 09 Nov 2016 09:10:31 +0000 http://uxmastery.com/?p=48867 As designers, we know that our decisions have a real impact on how people use products. On the downside, poor design decisions have the potential to cause annoyance, cost users a bit of cash, or even have disastrous results. But what about the intent behind designs? Ben Tollady shares how we can recognise (and avoid) deceitful design practices.

The post Under the influence: Dark patterns and the power of persuasive design appeared first on UX Mastery.

]]>
As designers, we know that our decisions have a real impact on how people use products. On the downside, poor design decisions have the potential to cause annoyance, cost users a bit of cash, or at worst, have more catastrophic results. Figuring out the intent behind designs, however, can be more tricky.

We came across this recently at work, when our general manager Damian unboxed a new 12” Macbook. We quickly noticed a problem: the new Macbook only had one port, with no adapter in sight. How was he going to charge his phone, or charge his new Magic Mouse, or connect his keyboard or monitor?

He was faced with a choice to either buy the $129 Apple adapter to use his screen and keyboard, or change the way he works. Resigned, Damian ordered the adapter.

This is just one example of the far-reaching impact that small design decisions can have on a user, whether intended or not.

I’m not sure about the intent behind the decision for just one port. Was it made with good intent – perhaps to progress an ‘all wireless’ ecosystem that Apple is planning?

Or was it made with consciously bad intent – to push for an upswing in accessory sales?

Without inside knowledge, we can’t know if this particular example from Apple example is intentional trickery. But there are plenty of examples where designs have indeed been created intentionally to deceive, known as dark patterns.

In this article, I’ll explain dark patterns, the psychology behind them, and how you can use smart (but not deceptive) techniques instead.

What are dark patterns?

In the online world, designs that are intentionally created to trick and deceive users are called dark patterns. Designers have crafted these ingenious, yet ethically questionable patterns to trick users into doing something they don’t want to do.

To create dark patterns, designers rely heavily on a good understanding of cognitive science and human behaviours. These are used to benefit the company behind them, to achieve goals like increasing sales and improving numbers of sign-ups.

It’s worth mentioning that I’m not talking about Anti-patterns here. They are just design mistakes that might have a negative impact on the user experience, or break conventions. Here’s an example.

I’ve become interested in dark patterns of late, and more specifically, the convergence of human psychology and cognitive science.

At a high-level, you can think of dark patterns akin to the tricks of a dodgy car salesman. These tricks are even easier to pull off in the digital space – you can’t look under a website to see a tell-tale puddle of oil on the ground to identify a dark pattern.

Dark patterns in action

All across the web, you’ll find dark patterns being used through practices like friend spamming, disguised ads, hidden costs, and more. Luckily, the UX industry is fighting back against dodgy practices through websites like darkpatterns.org, which is dedicated to educating designers and calling out questionable digital practices. It currently lists 14 ‘types’ of dark pattern to watch for.

Here are a couple of examples to be wary of.

Trick questions

Here’s a recent example that was featured in The Age a couple of months ago. 

The article refers to “Simon”, who is extremely careful with his personal information, and is happy with his one bank. Simon was surprised when a rival bank, ANZ, sent a personalised letter to his home, inviting him to become a “platinum member”.

After digging and hassling on the phone, an ANZ representative finally revealed that they had received his details from Veda, who are Australia’s largest credit reporting agency.

It turns out that a few weeks earlier, Simon had been to the Veda website to fill out a form to obtain a personal credit report.

At the end of the form, Veda provides a pre-ticked checkbox that gives consent to Veda and its “corporate partners” to use his personal data for marketing purposes.

It’s a cheap trick, but it’s not an accident. The designers are playing to the fact that people tend to scan pages and don’t really read things properly. Especially when it comes to terms and conditions at the end of a long form.

The inclusion of a big, red button helps to distract the user away from the offending text even more.

Bait and switch

Candy Crush fans have probably fallen victim to the bait and switch, another common dark pattern.

As you start playing, the game conditions you to hit the big button in the centre of the screen for all key actions. You hit play to start a game, and play – in the same position – to start a new level. You hit the retry button – still in the same position – to start a level again if you lose.

And if you’re out of moves and not looking closely, you could easily hit this button.

The difference is, it now has a different function. The UI baits you into thinking you know what the action will be, then sneakily switches this in to make you spend virtual currency, taking you one step closer to an in-app purchase.

The designer has taken advantage of human neuroscience here. By conditioning users to continually hit the call-to-action in the centre of the screen, the user’s mind recognises the pattern and over time diverts conscious attention away from reading the label.

Turning to persuasion over dark patterns

Why do people resort to dark patterns and underhanded trickery? It’s often when business needs are placed too far above user needs and design expertise. Perhaps when people are asked to do something unethical to please their boss, or to meet a particular KPI. It can be difficult for designers to push back on these priorities, forcing a moral and ethical dilemma.

This got me thinking. Is there another, more ethical way to achieve the same kinds of results? How can we, as designers persuade people to do stuff without trickery?

It turns out that we can use the same principles of psychology that dark patterns employ to persuade users instead, and to invoke positive behaviour changes.

It’s important to note that we’re talking about ethical use of persuasive techniques here – and not leveraging cognitive science against users to achieve business goals. Persuasive design, when used responsibly, can leverage a good understanding of cognitive science to add value to a user’s experience, and increase user engagement.

Above all else, it is our responsibility to ensure users retain their right of choice.

The Fogg Behaviour Model by Stanford University’s BJ Fogg, says that for a behaviour to occur, there needs to be a sufficient level of both motivation and ability.

So if you want to persuade someone to do something with your product, you need to first make them want to do it, then second, make it easy for them. Let’s take a look at how we can use motivation and ability in design.

Ability

As a designer, it’s typical for us to focus on ability first. That’s the part we usually have more control of. There are 6 basic elements of ability:

  • Time
  • Money
  • Effort
  • Cognitive load
  • Social acceptance
  • Routine

If you can influence these aspects, your user is far more likely to do the intended behaviour.

This might sound complex, but it isn’t always hard to make something easier, and it doesn’t even have to be a huge change to achieve a significant result. In fact, you’re probably already doing these sorts of things as a matter of best practice in making designs usable.

A great example is the $300 Million button story. In this well-known case study told by Jared Spool, he explains how simply changing the label on a single button increased an online retailer’s profit by $300 million in a single year.

There’s a little more to this story. The change removed the barrier of having to create an account before making a purchase. It’s a great example of how making a simple change to improve a user’s ability can have an enormous positive impact.

Persuasive techniques can be used for bad, too. Cash back on purchases are one way the ethical line gets blurred. When you have to jump through hoops to get your refund (filling in a long form, photocopying the receipt and mailing it), then the ‘ability’ to complete the cash-back is low. In this case, it’s likely that some buyers won’t bother to complete the action – which is exactly what the retailer wants. It hardly seems worth it for a $200 refund for a $1700 purchase, for example.

This isn’t a mistake – it’s designed to maximise purchases and minimise rebates through cognitive science.

Motivation

In the cash back example, you start to see how motivation part comes into play. It might be easier for a designer to control the ‘ability’, but we can also influence motivation with a good understanding of human psychology.

People’s key motivators include:

  • Desire for completion and order
  • Delight and emotional connection
  • Variable rewards

Understanding what motivates people is the powerful bit, and if you think back to those dark pattern examples now, you’ll realise that although they’re outrageously dodgy practices, it’s not just about the interfaces, but the way those interfaces are put together in response to a good understanding of human behaviour.

Fitbit, for example, is very effective in tapping into people’s desire for completion and order. Staying focussed on being active and keeping fit is a hard behaviour to crack. It’s very easy to put off heading out for a run and just sit on the couch instead.

Fitbit knows this. By adding little achievements that need to be completed, like measuring 10,000 steps, they appeal to our natural tendency as humans to want to ‘complete’ the step goal.

These are powerful techniques. And the great thing about persuasive design is that its influence has the potential to do more than simply help us get people to use our product.

Design is more than aesthetics and usability

Us designers wield enormous power, but it’s easy to forget that when we’re deep at the coal face, buried in research findings and wireframes. Take a moment now and again to remember that it’s not just about aesthetics and usability. We help shape the lives of people everywhere, and our decisions can have significant impacts on the way we as a society behave.

Design is an evolutionary discipline. We don’t invent, we learn from the past. Designers practising the craft now are setting the example for the future generations.

Don’t always take the cheap, easy, dark patterns option. Understand that we do have great power and can use cognitive science to influence and persuade, but respect that power and use it for good, not evil. Think responsibly.

And as for Damian, he bought the expensive adapter for his new laptop. And it doesn’t even accommodate all the cables he needs!

The post Under the influence: Dark patterns and the power of persuasive design appeared first on UX Mastery.

]]>
https://uxmastery.com/dark-patterns-and-the-power-of-persuasive-design/feed/ 3 48867
10 Ways To Add Delight To Your Website or App https://uxmastery.com/10-ways-to-add-delight-to-your-website-or-app/ https://uxmastery.com/10-ways-to-add-delight-to-your-website-or-app/#comments Thu, 28 Mar 2013 15:12:09 +0000 http://uxmastery.com/?p=4919 Ben Tollady is obsessed with designing websites that are not merely usable, but delightful.

So how does one create delight in a website or mobile app? Ben lists 10 approaches, backed up with a ton of examples.

The post 10 Ways To Add Delight To Your Website or App appeared first on UX Mastery.

]]>
One of the topics I often find myself discussing with other designers is the concept of delight in software. An interesting question that came up during one of these chats recently is:

Should we design something delightful, then make it usable? Or should we make it usable first, then add delight afterwards?

In my mind, the question draws immediate parallels with the old architectural adage; “Form should follow function”, so I tend to think that primary function and usability should come first.

There’s also merit however, in the opinion that by starting with an analytical, obvious solution you could be ignoring other, more creative, left-of-field alternatives. Perhaps we should start with a solution that is “fun” and more focussed on delight, then bring it back to something that works within the constraints in which we’re operating?

Regardless of the best approach, there’s no question that any successful solution must have as its foundation a functional, reliable, usable base. Assuming you have a usable product, and are looking to inject something intangible to make it more emotionally engaging, what are the sorts of things you can do and where should you start?

Below are 10 suggestions for how you might go about adding delight to your website or app.

1. Visual Polish

We all know that first impressions count! This immediate visual impact, which can be portrayed through a carefully crafted, beautiful user interface, is the most immediately obvious technique that springs to mind. Here are just a few examples of stunning visual design and attention to detail that leave a lasting impression, and go a long way to enhancing delight in each product.

a) Your Karma

The website for the Your Karma mobile wi-fi device is a current favourite of mine. The blend of great fonts, muted colour palette, smart graphics and subtle animation makes for a really nice UI.

Your Karma website
The stunning “Your Karma” website

 

b) Path

The Path mobile app UI is a great example of fantastic attention to detail. The graphical elements, fonts, colours and icons are not only pixel-perfect, but help to provide a better, more usable experience.

The Path mobile app
The Path mobile app shows impressive attention to detail

c) Rdio & The new Myspace

The Rdio and new MySpace apps display great examples of the new trend in UI design of flat colours, bright, clean colour palettes, simple fonts and sharp lines.

Rdio
Rdio works well, but it helps that it’s so nice to look at
The new MySpace
The new MySpace is bright and flashy


2. Microcopy

Those little snippets of helpful text here and there, which you find on buttons, 404 pages and the like? That’s microcopy. Often an afterthought that gets quickly added at the end of the development process, microcopy actually provides a really simple way to assist users as they interact with your site. It can also provide a nice opportunity to convey personality and add lovely little bits of subtle delight to your designs too …

a) Flickr

Quite a few sites offer a personalised message upon log-in, but Flickr take it one step further. Each time you visit, the site welcomes you in a different language, which adds a quirky, playful touch.

Flickr
Flickr’s personalised welcome messages

b) Clearleft’s 404 page

Rather than provide the usual Page Not Found message, Clearleft have used this page as an opportunity to reveal some of their personality, demonstrating that there are humans behind this site and they have a sense of humour.

Clearleft 404 page
The folks at Clearleft have some fun with their 404 page

c) Funny or Die email share

Funny or Die use amusing sarcasm in their form error message. The form will alert you if you forget to add an email address.

Funny or Die
Funny or Die have some fun with field validation

3. Getting Personal

We’ve all experienced that bizarre emotional connection that humans can have with an inanimate object. Perhaps you’ve given your car a name and can ‘see’ a face in the lights and front grille, for example. It’s completely irrational, but we humans are an emotional bunch and thrive off relationships (even if it is with a machine).

Injecting personality to your designs is a great way to play to this positive emotion, at the same time breaking the barriers that exist between man and machine. Here are a few examples that do this brilliantly…

a) MailChimp

MailChimp make use of their illustrated monkey mascot—Freddie von Chimpenheimer IV—across their site to provide a light-hearted, fun personality.

Be sure to check out their video on how to hide the chimp (“party pooper” mode), which is in itself, a great example of injecting fun and delight to a product.

MailChimp
The iconic MailChimp

b) Gugafit

The illustrated characters, colour palette and choice of rounded fonts used across the Gugafit website work together brilliantly to generate a welcoming, warm, fun personality.

Gugafit
The Gugafit characters

4. Purposeful Transitions

That satisfying, tactile click when you flick on a real-world light switch does more than simply lock the control in position; it also provides feedback to you, the user, that the interaction has been completed.

In the world of screen-based, software interfaces, this kind of feedback to indicate a successful interaction is even more important. There is often a lack of real, tactile feedback (especially when using touch devices), so we can only rely on clear, visual feedback.

Here are a few great examples where charming animation and/or transitions have been cleverly used with the dual purpose of providing useful, functional, visual feedback that also delights:

a) iPhone refresh email list

My favourite useful transition is the “pull-down-to-refresh-email-list” icon transition in the iPhone email application. It’s entirely functional—providing useful feedback as it searches for new emails. But it’s also so lovely and tactile—I just want to keep playing with it!

iPhone pull-to-refresh
The iPhone’s pull-to-refresh is addictive

b) Scrolling transitions to anchor-linked content

Content that is linked on the same page via an anchor link usually just “jumps” to the relevant position by default (you can see it in action by clicking this link to return to the top of the page). It’s a little jolting, but if you add a layer of JavaScript to scroll to these links, like I’ve done on my personal site, then the result is a much nicer, less disorienting and much more pleasurable experience.

Ben Tollady
Ben Tollady’s personal site implements a scrolling effect

c) Animated dropdown menus (Nike)

This navigational dropdown menu on the Nike site that actually drop down, rather than abruptly appear, is another example of a functional, purposeful transition that can add a bit of delight to a website or app.

Nike
The Nike animated dropdown menu

5. Mouse interactions

The point at which most interactions happen in a human-computer interface environment are usually instigated via a keyboard, mouse or touch-screen device. The unique gestures made possible, particularly within the desktop environment, using a mouse or trackpad, provide a great opportunity to delight through unique and interesting interactions and animations.

a) The Twelve Projects thumbnail hover effect

The Twelve have really put some great, creative work into their image rollover transitions in the Projects section of their site. The transitions are lovely and tactile, and it’s all responsive too!

Twelve Projects
The 12 Projects website

b) Ben The Bodyguard scrolling site

Ben the Bodyguard is a really great example of an engaging, animated experience based very simply on the default page scroll mechanism.

Ben the Bodyguard
Ben the Bodyguard

c) Adidas Snowboarding parallax scrolling

The “parallax” effect achieved through a combination of natural page scrolling and JavaScript positioning is a popular trend at the moment. Understandably so, since it provides a lovely, immersive experience. The Adidas snowboarding site is an excellent, high-quality example.

Adidas Snowboarding
The amazing Adidas Snowboarding scroll effect

6. Humour

Humour in design offers a great way to blur the lines between human and computer to provoke a positive emotional response. Just as the use of humour can help “break the ice” in a real human interaction, so too can the use of quirky, funny elements within a software interface. Here are a few great examples.

a) MailChimp links & comments

When you’re logged in to the MailChimp web app, the illustrated monkey appears in the top right corner, quoting lines and providing links to random YouTube videos, just for fun.

MailChimp humorous messages
Mailchimp get the humour spot on

b) Envy Labs

Envy Labs‘ about page features a humorous, annotated set of images that pokes fun at the stereotypes associated with web designers and developers.

Envy Labs
Envy Labs

While not necessarily appropriate in all situations, humour is also a great way to lighten a sticky situation like a form validation error or a broken link. Here are a couple of good examples:

c) Yahoo! sign-up

When signing up for a Yahoo! account, if you put a future date in the date of birth field by mistake, they ask if you’re really from the future!

Yahoo! date error message
Someone at Yahoo! has a sense of humour

d) Nosh’s funny 404

Possibly the funniest 404 page ever made. Certainly a lot of work went into it, in any case!

Nosh 404 page
Nosh’s hilarious 404 page

7. Real world Inspiration

Otherwise known as skeuomorphism, the use of real-world metaphors in a two-dimensional, interface environment can add a recognisable element that is often already-known and therefore easy to understand, resulting in a pleasurable, familiar experience. This technique is particularly prevalent in software for mobile and tablet devices due to the tactile, gestural interactions that are used to interface with them.

Apple have received a lot of criticism for this approach, but if done well it can be effective in adding a delightful layer to an interface.

a) Page turns in Kindle apps & iBooks

Page turn/curl effects have become common within reading applications for navigating to the next page. The designers could easily have used more ‘digital’ controls such as arrow buttons or sliders, but the familiar page curl effect, coupled with a swipe gesture to ‘turn the page’ makes for a much nicer, more engaging experience.

b) Podcasts app for the iPhone

Apple have been accused of unnecessary skeuomorphism across their suite of applications before, and the new Podcasts app is another example of this. While not particularly necessary, the faux analogue tape reel is cute and adds a somewhat hidden delightful layer to the experience. This is a bit hidden actually, so could be considered an easter egg (next point) too.

c) UXmas advent calendar flips

We’ve turned the effect off now, but while UXmas 2012 was running, we used this effect to mimic the advent calendar ‘doors’ opening.

The animated UXmas bauble opening effect
The animated UXmas bauble opening effect

8. Surprises (Easter Eggs)

Who doesn’t love a nice surprise? Gifts and ‘easter eggs’ don’t have to be reserved for children and the offline world. Quite a few websites and systems have intelligently hidden little surprises throughout their interfaces to provide a layer of fun and intrigue that ultimately delight…

a) Google Moon

They’ve removed it now (shame), but when Google Moon was first released, out if you zoomed-in all the way in to the surface of the moon it rendered as a piece of swiss cheese!

Google Moon
Look: Swiss Cheese!

b) Supereight Studio R2D2

You might never have found it, even if you explored every inch of the site, but if you click Matt’s picture on the Supereight Studio about page you’ll see his photograph switches for a picture of R2D2. It serves no functional purpose, but there’s something lovely about finding it for the first time.

R2D2
The SuperEight Studios R2D2

c) The hidden Apple icon in iBooks

Another surprise detail that serves no purpose other than to delight is the ‘hidden’ apple icon that appears when you pull the bookshelf down in iBooks on an ios device. This forum post dating back to when this first appeared shows just how much of a positive impact these little nuances can have.

iBooks
iBooks

9. Invisibility

Invisibility is not just a power reserved for super heroes; it can be very effective in the digital world too. The saying goes “Good design is like air—you only notice it when it’s bad”, which normally describes the interface specifically but can also apply to the complete experience. The following are just a few examples of how delight can be achieved by the interface or product getting ‘out of the way’…

a) IA Writer

IA Writer‘s interface is simple an uncluttered, unlike other popular word processing software. The clean interface leaves you free to focus on the writing with no distracting buttons or features.

IA Writer
IA Writer

b) Gimmebar

Adding web sites or clippings to Gimmebar is a delightfully simple task that does not interrupt your web browsing experience.

10. Context & the multi-screen ecosystem experience

The explosion in numbers of mobile device use in recent years has made the importance of designing experiences based on the context in which the user is operating much more pertinent. While it’s dangerous to assume the content of a mobile user (often thought to be ‘on the go’ when in fact many browse using their phone when relaxing on the couch at home), the rise in “multi-screen ecosystem” experiences across multiple devices is yet another area where there’s opportunity to design useful functionality that delights.

a) Facebook‘s native mobile app

Facebook‘s suite of sites and apps work brilliantly well together, keeping your feed information simultaneously updated across multiple platforms. The mobile app is so good in fact, that I find the more focussed experience it provides better than the desktop experience!

Facebook
The Facebook cross-device experience

 

Interestingly, it looks as though their upcoming redesign will provide a more consistent experience across all devices, based on a responsive design rather than through separate, device-specific applications.

b) Rdio

Rdio‘s desktop and mobile experiences are similar, but subtly different. They’re brilliant designed in terms of available features, functionality and UI nuances, according to which platform you’re using and the likely context in which you’re operating.

Rdio
Rdio scales beautifully to multiple devices

As a little side note, it’s also worth noting the way in which the mobile app alerts you to their being no network connection—the normally blue header bar simply turns grey. So simple!

c) Time Magazine’s responsive website

Time magazine‘s online offering is a great example of responsive website design; a technique that enables a single site to adapt its layout according to the screen resolution of the host device it’s being viewed on, providing a better, more delightful experience.

Time Magazine
The time.com scales responsively to suit different browser widths

Summary

Functionality and usability should always be the priority in providing the foundations for any interface, but the addition of an additional layer of emotional design—one that evokes a response, connects with, and delights its audience—will always result in a superior experience.

Some of the techniques listed here can be easily “tacked on”, where others are only successful because they are more intrinsically linked to the core offering, and no doubt required much more careful consideration to implement.

Hopefully the examples here have provided you with some inspiration for adding surprise and delight to your own designs, helping differentiate them and really stand out from the crowd.

What other ideas do you have for adding delight to your designs? Share them in the comments!

Inspiration & Related Reading

The post 10 Ways To Add Delight To Your Website or App appeared first on UX Mastery.

]]>
https://uxmastery.com/10-ways-to-add-delight-to-your-website-or-app/feed/ 2 4919
How To Estimate a UX Project https://uxmastery.com/how-to-estimate-a-ux-project/ https://uxmastery.com/how-to-estimate-a-ux-project/#comments Mon, 28 Jan 2013 21:10:34 +0000 http://www.uxmastery.com/?p=46 One of the most difficult things to get right, even for more experienced UX designers, is estimating projects.

Whether you're a freelance designer who needs to give a quote to a client for a job, or you're an in-house designer preparing estimates for your project manager, Ben's tips on estimating UX work will help you in your next UX project.

The post How To Estimate a UX Project appeared first on UX Mastery.

]]>
One of the most difficult things to get right, even for more experienced UX designers, is correctly estimating a UX project.

Whether you’re a freelance designer who needs to give a quote to a client for a job, or an in-house designer preparing estimates for your project manager, estimating is always fraught with assumptions, what-ifs and unknowns. In this post I’ll list a few different approaches you can use to estimate your next UX project. I’ll focus on estimating client-facing work, as that’s where most of my experience lies, but many of the principles translate to internal projects as well.

Why is accurate estimating important?

Before we get into the detail of how to estimate, we should first take a moment to consider why getting it right is so important. No-one likes estimating projects—it’s difficult and not as much fun as doing the work itself. However, without an accurate estimate it’s impossible to know how much to charge your client for the work.

I’m assuming that UX design is your business, and not just a hobby, which means that generating an income from your work is an integral part of the gig. You, like many people might feel uncomfortable talking about money, but without it you can’t make a living from your work and keep the business running. It’s important you get comfortable talking about money and charging for UX work, because without this skill, you risk not staying in business (and doing what you love) for very long.

What to charge for design work

Unlike a physical product, for which the break-even value can be accurately calculated based on the sum of the parts and manufacturing costs, design work is much harder to price. You are selling yourself, your skills and experience—how do you put a price on that?

Typically, service industry work is charged in hourly blocks, with a cost per hour to perform that work based on the practitioner’s ability, skills and experience to perform that work. UX design is no different; whichever method you use to estimate and charge for the work (which we’ll get into in a minute), it will most likely be based upon an hourly rate.

Working out your hourly rate is key to the financial side of estimating, and it’s important that you charge accurately for the quality of your work. There aren’t any formally set rates documented anywhere for UX work, but you can get an idea of what your rate should be by:

  1. talking with peers in the industry, and
  2. reviewing the results of surveys such as this one.

If you’re struggling with determining your hourly rate, you may want to check out The Principles of Successful Freelancing, by Miles Burke. Miles is a very experienced web designer, and his book details a comprehensive process for determining an hourly rate based on your expenses, target annual salary, expected utilisation rate, and more.

Whatever number you settle on, be sure not to undervalue yourself! Charging too low or underestimating the amount of time to do a job can lead to resentment from both parties, and the quality of the solution you deliver may suffer.

How to charge for design work

There are typically three methods you can take when giving your client a quote for UX and design work:

  • fixed price,
  • hourly rate (often called time & materials), and
  • ballpark figure + hourly rate.

The cost for each is based on the same hourly rate, and the process of estimating is the same. There are, however, subtle differences between these methods, and each has their advantages and disadvantages.

Fixed price

Fixed price, as the name suggests, means providing the client with a flat fee for the work. This is great for the client—they understand upfront what they’ll need to pay, and there will be no surprises. However, this approach places all of the risk with you, the designer. If the project runs over time on a fixed price job, you may have to wear the extra cost (depending on your contract).

Due to the risk involved, I would recommended that you be very comfortable with the full scope of work before agreeing to a fixed price schedule. Ensure you watch for scope-creep while the project progresses, and be sure that your contract leaves no room for ambiguity.

Many design firms add a percentage of “padding” hours to fixed price estimates. This allows them to weather any unforeseen scope and reduces the risk.

Hourly rate (time and materials)

Charging an hourly rate—also known as time and materials is the fairest, most accurate method, since you simply track the time it takes to do the work and charge for that time at the end of the project (or at agreed milestones).

While this is great for the designer, the client harbours all of the risk in this situation; if the project overruns due to underestimating or changes in scope, the clock keeps running. It is typically rare for clients to agree to pay by time and materials on large projects due to the risk, but it’s quite common for much smaller gigs.

Ballpark figure + hourly rate

A ballpark figure + hourly rate is a combination of the previous two methods. In this instance, the designer provides the client with a fixed (ballpark) cost based on their estimations prior to starting the project, but with the understanding that if the project overruns they will continue to charge, tracking the additional hours.

This is a good solution for projects where the full scope isn’t known at commencement and the client doesn’t want to invest time in preparing a detailed brief.

Estimate how long it will take to complete

Now that you’ve worked out your hourly rate, you just need to calculate how many hours you think it will take to satisfactorily complete the work. Multiply that number by your hourly rate and you’ll have the estimate. Simple!

The big question of course, is exactly how to calculate the number of hours it will take to complete the work …

This is where I break it to you—there is no secret formula and even the most senior, experienced UXer hasn’t worked it out to an exact science. To a certain degree, we’re all making a best guess. There are however, a few tips and techniques you can employ to help you make it an informed guess and get as close as possible.

  1. Have a defined process (and know it inside-out).If you already know how to undertake a UX project and are confident with the various techniques you can employ to get it done, then you’ll probably follow a similar process each time. A key factor in helping to accurately estimate a UX design project is having a clearly defined process, and knowing the usual series of tasks and techniques that you commonly follow on projects.

    Once you have a good handle on your process, you’ll be much better placed to predict how long each task will take, and therefore what you should charge for each stage. Obviously each job and its specific requirements are going to be unique, and the number and complexity of techniques employed, deliverables and depth of planning may well be proportional to the project’s complexity. However, if you know your process well, it will help you plan and scale each estimate accordingly.

  2. Break it into pieces.Just as the prospect of undertaking a large UX project can seem daunting at first, so too can the thought of accurately estimating how long it will take to complete one. Just as you would approach the project in smaller, more manageable pieces to complete, the best way to estimate how long a UX project will take to complete is to break the approach you plan to follow into small, achievable pieces, listing step-by-step the process you plan to follow for each particular job. The more granular you can get, the better.

    We do this for every project estimate we put together at Thirst Studios. We usually start with a simple scribble on a piece of paper that follows a fairly standard UX design process, and then become more granular and develop the list of tasks required to achieve the specific requirements established for each unique project.

  3. Record and review data from past projects.Nobody likes filling out their timesheet, but the only way to know if the project you estimated was accurate is to complete the project and record how long it took to finish each task. The more projects you finish, the more data you can gather to inform future estimates.
  4. Ask ’em their budget.While it might be difficult to bring up the subject of money, you should always ask the client what their budget is. If you know what they’re expecting to spend you can easily work out the available time afforded to you and work back from there to define an approach that fits. This figure will help you determine what you’ll have time to cover, and what is out of scope.
  5. Trust your intuition.Like anything you do, practice makes perfect—while it may not be particularly scientific in all cases, after a few projects you’ll start to get a feel for how long each type of project should take and how much it should cost. There’s a lot to be said for this intuition that experience provides, coupled with your sense for what you think the client is expecting in terms of scope.

What if I don’t have enough info to accurately quote?

There are occasions when you’ll be asked to quote for a project that you simply don’t have enough information about in order to accurately estimate: perhaps the full scope is not yet known, there’s no accurate project brief or the project relies on a third-party that haven’t delivered their work yet.

In these cases, the best approach is to charge for the work on an hourly rate basis rather than providing a fixed cost. If the client requires a fixed estimate however, I’d suggest you are very cautious about taking the job on, as providing a fixed-price quote without knowing the full scope of work poses a large amount of risk to you, the designer.

We have been known to undertake a separate, scoping project in these instances, to help the client define the project scope and develop a brief and set of requirements against which we could then accurately quote. This situation is ideal, but not always something a client is keen to invest in.

Failing that, one of the most difficult skills to acquire as a business owner is learning when to say no to a project. If you just can’t reach agreement with a client over pricing, don’t be afraid to politely decline being involved. It may be a sign that you need some more experience before you’re ready to tackle a project of that size; or it may be that the client is troublesome to deal with—and will continue to be so. Either way, you’re better off not taking the project on. The cost and effort required to save a project for a client who is unhappy with the solution you’ve delivered could be far more expensive than the potential revenue you’d be passing up by not being involved in the first place.

In conclusion

Unfortunately, there is no secret formula to estimating UX projects. It’s one of the most difficult things to get right, and even the most experienced UX designers will tell you they still haven’t got it worked out yet.

However, if you know your design process and the various UX tools and techniques at your disposal intimately, you trust in the value of your work, you employ the techniques listed here and you ensure you charge appropriately and fairly, you’re as well prepared as you can be to estimate the time and effort required to successfully complete a UX design project.

Further reading:

The post How To Estimate a UX Project appeared first on UX Mastery.

]]>
https://uxmastery.com/how-to-estimate-a-ux-project/feed/ 5 46