16.05.2013, by Ben O'Hear

Test ideas before writing a single line of code

Paper prototyping is a rapid prototyping technique where a user interface (website, app, software etc) is drawn on paper and the functionality is simulated by a team member playing the computer and responding to user’s inputs by swapping the bits of paper or writing an output.

Users are then brought in to interact with the prototype as if it were the real thing. As they click it or write on it, the “computer” responds.

Paper prototyping explained

Sounds absurd?

Let’s look at the following diagram: 

They laughed at Galileo, but they also laughed at Bozo the clown

(largely stolen from Peter Thiel)

In our experience, paper prototyping is right in that sweet spot where genius lies.

It might also explain why this technique is not more widespread: People are afraid of not being taken seriously. That’s too bad, because it is probably the most effective UX tool, since it allows real user data to be obtained early and inexpensively.

What can you prototype?

With a bit of imagination, almost anything. Let’s look at some examples:

Paper Prototyping

Email web application

Ipad game paper prototype

iPad Game

Coloring In app paper prototype

Kids coloring-in app

Vending machine paper prototype

Railway ticket vending machine

Why is it so effective?

Basically: Interactivity beats fidelity when it comes to assessing designs. 

The human mind has this incredible ability to suspend disbelief, allowing people to interact with paper as if it were computer software and actually try the product out. This is at least an order of magnitude more useful than asking for a subjective opinion about static mockups.

We can also twist the question around and ask why paper prototyping should be ineffective. Usability tests are run in order to uncover and fix design flaws, so there are two ways that a technique can fall short: Either it fails to discover problems or it reports problems that would not be there with a higher level of fidelity.

The first point is valid: Paper prototyping will not discover every single usability problem. But it will usually find the big one’s. You should of course run further tests with the actual product to nail the remaining one's.

As for the second issue: In our experience, almost every time that a problem is dismissed as an artefact of the prototyping method it ends up being present in the final product. Which is not to say that false positives never happen, but it is not as big a problem as one might think. Our advice is to go with whatever your gut tells you but be sure to re-test for it later on.

Test your application with zero lines of code

“But I can knock this up in HTML and javascript over lunch” is something you hear quite often. Seriously: You can’t.  Technical complexity is always underestimated. If you’re really good and really lucky, you might have a half baked bug-ridden first version by tomorrow evening. 

And then it will only do a fraction of what the final product can do. If it can do everything the product can so then it IS the product, and that is not going to happen in any reasonable timeframe.

“We can just put the sketches in a PDF and link them up” is the other recurring suggestion (for some reason, people are really obsessed with screens). 

The problem is that to get a level of interactivity useful to run a usability test you are going to need an inordinate amount of screenshots and links. 

Take Google Calendar for example. To simulate the little balloon that allows you to add an event, you would have to create 30 screens for one month. Need to create an event with a time? If you restrict the time choice to hours, you need 720 extra screens (24 hours x 30 days). Need to create a second event? Half a million screens.

And they still wouldn’t be able give the event a name. That would require an infinity of screens.

This is why we feel that apps that convert paper prototypes to a digital form are mostly misguided. With one exception: They can make powerful demos or specifications. In that case you can preplan a single use case and there is definitely value in demonstrating an app on an actual device or web browser rather than on paper.

10 design iterations in a one hour meeting

Though the primary application of paper prototyping is user testing, we have also found it to be an invaluable tool for collaborative design.

The typical design review involves people with no design training looking at static mockups or wireframes and critiquing based on opinion. The designer then takes a bunch of notes - some of them contradictory - and everyone reconvenes in a few days or a few weeks for another round.

When working with a paper prototype, suggestions are implemented and assessed immediately. The feedback loop is reduced from days / weeks to minutes. Everyone can join in and because of it’s interactive and low fidelity nature it encourages people to focus on the important issues rather than getting lost in bike shedding.

A side benefit we've experienced is that getting stakeholders involved hands-on at the concept phase means that they are much more likely to trust the designer for the visual phase, avoiding many “I prefer blue” discussions. Everyone wins.

Limitations

 Naturally there are limitations to paper prototyping. Here are the most important ones:

  • Remote testing via Skype or Teamviewer is not possible
  • It’s not very portable or reproducible
  • Some complex interactions are difficult to simulate (but less than you might think)
  • Important for startups: It will tell you whether users understand your product and are able to use it, but not whether there is a market for it. 
  • There is no way to incrementally go from a paper prototype to the final product. 

Lean UX: A renaissance of paper prototyping?

In recent years, software development has been revolutionized through the introduction of Agile development methods. 

The short sprints central to this approach have raised a difficult question: When does design happen? The best solution to date is Lean UX, with it’s core of speed, iteration and collaboration. By a happy coincidence, this is exactly what Paper Prototyping excels at.

A silver bullet?

By no means. Just a really powerful way to gather user data at the earliest possible opportunity, without being dependent on the tech team to do so. According to Jakob Nielsen this delivers quality improvements of 1000% and a 100x reduction in costs when compared to fixing usability problems after the programming is done. I personally find the numbers questionable, but if Nielsen says so then who am I to argue?

But there are of course other techniques. We’re not big fans of digital prototypes, largely for the reasons outlined by Joel Spolsky. We ARE big fans of building an unrefined or small part of the final product and testing on that before evolving it.

Tips and tricks

  • Buy the book. Although this is a simple technique, there is an art to running it smoothly. Carolyn Snyder’s book is THE reference.
  • Balsamiq mockups: If your prototypes have a lot of written content or repetitive elements then it can get really tedious to hand draw everything. Printed out Balsamiq mockups fit in perfectly with hand drawn elements.
  • Mix techniques. For example: In one test, we had a redesigned home screen as a paper prototype. When the user  clicked to play a video we showed it on an ipad. Beyond the home screen we would open the actual application on the location the user had chosen on the prototype.
  • Stationary, references etc: You can find a list at the bottom of the companion post to our talk at Lean Startup Munich

 

 
 

Leave a comment on:  Facebook

 

10.05.2013, by Ben O'Hear

If it's good enough for Obama it's good enough for you

The principle of A/B testing is very simple: Send half your users to one design (version A), the other half to another (version B) and measure which one does better at converting your users into customers. Do this often enough and these small improvements will add up to substantial increases in sales (or any other goal your website has).

It has two prerequisites: A clear conversion event (sale, contact form submitted, etc) and enough traffic to get a statistically significant result. A rule of thumb is that it takes 200 conversions to be confident that the differences between the two versions aren’t down to chance.

A/B testing is devastatingly effective because it focuses directly on the ultimate goal and relies on real users in the real world. It doesn’t matter whether a tweak makes the site easier to use, more persuasive or more attractive. As long as it converts better, it wins. And what actually works can be surprisingly counter intuitive.

All major tech players (and Obama) use this technique constantly. Google famously - and controversially - tested 41 shades of blue

What should you A/B test?

Basically, everything. If your website is a good fit for A/B testing, every modification should be introduced via an A/B test.

Small incremental changes are the A/B testing sweet spot. For example tweaks to headlines copy, image, color etc. They are really inexpensive to perform and can lead to big gains in unexpected places.

Limitations of A/B testing

First off: A percentage of your results will actually be incorrect. Exactly how many depends on the confidence level you are operating at, but if an outcome seems really weird it might make sense to run the experiment again.

Secondly, A/B testing will not give you any insights as to why a particular version works better. Nor will it replace the need for good design and copywriting. After all, you need to come up with the ideas to test before you can test them.

The biggest challenge is with radical changes of direction. Simply put: You can’t A/B test your way from a horse to a car.

This is especially difficult if the current design has been well optimised, because it will almost inevitably outperform an unoptimized new version, despite the latter having more long term potential. Compounding the problem is the changing technological landscape and user habits.

For these kinds of leaps there is little choice but to rely on vision and a deep understanding of the users problems.

A culture of experimentation and innovation

To make the most of A/B testing you need a culture of experimentation. If your site is already of high quality you can probably not expect huge gains with every tweak. But a percent or two every few weeks adds up to substantial increases at the end of the year. And sometimes the gains are much larger.

A/B testing also gives you a chance to try crazy ideas with very little risk. Most of those are unsuccessful (they are called crazy for a reason) but the one’s that work are the key to innovation. If the idea seems sensible, it is by definition commonplace.

Put disputes to bed and improve teamwork

I’m sure you’ve sat through tedious meetings debating which color or text is the best. Everyone has a different opinion. A/B testing provides an easy answer: Just test them all. But you also have to be prepared to accept that your favorite option might not, in fact, be the best one. And for us designers this is particularly difficult to swallow.

But it's for the greater good. Teams with a culture of testing become much more humble and open minded. Which in turn increases collaboration and innovation.

Read more

Tools

 

 

 

02.05.2013, by Ben O'Hear

6 ways to get the internet to work for you

This is the second part on our series of web design tips for small to medium size businesses. You can find the first part here. After the launch or re-launch of your site, there are two issues you should now focus on:

  • Extracting maximum value (optimisation)
  • Avoid falling behind (maintenance and updates)

We suggest the following measures:

Bi-monthly review

Key Performance Indicators (KPI)

This is a fancy way of saying “keep an eye on the stats”, with the additional question of “which stats”?. Typically you will be looking at SEO positions, traffic, user engagement and conversions, as well as 1 or 2 others specific to your case.

Goal review

At the beginning of your web project you should have set out clear goals. Are these being met? Are they still relevant? Has a new objective emerged, such as improving recruitment or press coverage?

Homepage manifesto

Your homepage is likely the most carefully designed page on your site, tailored to the most common and important use cases of your audience.

But then something new happens in the company, or some highly positioned person has a burst of energy on her pet project. This often acquires a temporary salience disproportionate to its real importance, and a prime spot on the homepage is demanded. Over time, these build up and create “homepage decay”.

One idea is to keep a “homepage manifesto”, reminding everyone of the goals underlying the homepage design. Another option is to impose a hard limit of items on the homepage, so that adding an item requires the removal of an existing one. That always creates interesting discussions.

Keep the promotional effort up

This includes SEO, SEM, PR, newsletters, social media, content marketing, link building and so on. You should decide in advance which of this activities you want to pursue and how many resources you can devote to them. It is better to put in a small regular effort than an unsustainable large one.

Ongoing optimisation

If you have a lot of traffic you should be running practically permanent A/B tests (where the traffic is split between two designs to see which converts best). It is the gold standard in optimisation, but requires about 200 conversions (eg sales) per test.

Lower traffic sites benefit more from qualitative testing (eg usability testing) and other user-centered design techniques such as walkthroughs, heuristic analysis, funnel analysis, best practises etc.

Ask your mechanic web design agency for a yearly service

You should take your website about once a year to your web design agency and get suggestions for improvements. The state of the art in web design and online marketing is permanently shifting and new ideas will inevitably have arisen. Regular tweaks will help stay ahead of the game and delay the need for a major overhaul.

Your agency might also suggest new projects. For example drip marketing, satellite sites, offline marketing and so on. These should be properly assessed for ROI before plunging in, but you will be much better off knowing what the possibilities are than not.

Security updates

All major content management systems (CMS) require security updates to reduce the risk of hacking. While it is unlikely that your website will attract the attention of an individual hacker, there are many automatic scripts out there targeting vulnerabilities on random sites.

You should agree an update schedule with your agency (for example quarterly). Applying the security updates is normally a small amount of work, unless they break something. That being the case your agency should roll back the update and contact you discuss the best way forward.

Conclusion

Sounds like a lot of work? It doesn’t have to be. You should determine ahead of time the level of time and money you want to commit and prioritize the list of activities.

The main takeaway from this post is that it pays to plan at least some ongoing effort on your website. As a first approximation, you should expect a yearly budget equivalent to 10-20% of the original investment.

See also:

Part 1: How to plan your web design investment

 

Leave a comment on:  Facebook

 

26.04.2013, by Ben O'Hear

The first question shouldn't be “how much will it cost?” but “how much can it make?”

“Our clinic paid a ton of money for our website, like €5000 or something, and it’s rubbish”.

This is what a friend told me over beers last summer. But is it correct that €5K is a ton of money? And is the website actually rubbish?

The view we take at Revelate is that the first question not be “how much will it cost?” but “how much can it make?”. €5K is way too much for a website that delivers no results. €20K is peanuts for a website that delivers an extra €100K to your bottom line. In other words, you should view your web project as an investment rather than an expense.

But this does not always apply. I would never recommend a normal local hairdresser to spend €5K on their site, let alone €20K. My recommendation would be to find the cheapest possible way to get a single page online with their name, contact info, opening times and maybe prices.

To pre-sort the projects, we find it is useful to start by deciding on one of the following  three categories: Necessity, Marketing or Service.

Necessity

In this category, the website has a similar function as a business card. You need to have one, but don’t expect it to bring in additional sales. So the goal here is to devise a solution which requires the smallest amount of effort without hurting your brand.

Very small businesses should consider a single page website with basic info, contact details and maybe opening times. They should also keep an eye out for SEO (typically name and “function + location”). Slightly larger one’s could  adapt a Wordpress template with a handful of pages on their services, about us etc. Brand heavy businesses (architects for example) will need a more sophisticated and creative solution.

Marketing

Here you expect your website to work for you and deliver specific results. Usually additional sales, but it can also be recruiting, media coverage, marketing to current clients and so on.

There are two fundamentals at play here: traffic and conversion.

Traffic building is the realm of search engine optimisation (SEO), online promotion (SEM /  social media etc.) and plain old PR.

Conversion optimisation is about bringing the right message to the right person at the right time. This is the domain of User Experience design (UX) and brand building.

This type of project neither starts nor ends with “building a website”. It starts with developing a clear understanding of your users and it ends with ... actually it never really ends. It is an ongoing process of measurement, optimisation and promotion.

The trick to make this affordable for small to medium size businesses is to let them take on a fair amount of this work on themselves. In all cases it is a good idea to look for ways to work incrementally so the site starts paying for its own improvements as quickly as possible.

Service

In this category, the company seeks to go beyond promotion and provide online services. The most common example is of course ecommerce. A good place to look for further automation opportunities is all the information the company currently provides or receives in print, fax, over the phone or in person.

The benefits here are new sales channels, better customer service and efficiency gains. Like marketing, this is an investment and should show a measurable return. Either in increased sales, reduced costs or in improved customer and employee happiness.

Selecting the right category for your web project

Many companies want deliverables from the “marketing” and “service” categories but behave as if their project belongs to the “necessity” category, and therefore seek to minimize costs rather than maximize return.

I fear that my friend is falling into this trap. If they are genuinely in the ‘necessity’ category then they shouldn’t worry about their site too much, as long as it is not hurting their brand or embarrassing their co-workers. Yes, €5K is a hole in the pocket, but in the context of a clinic’s overall budget I doubt it will even register on the annual report.

On the other hand, if as I suspect they fall in the ‘marketing’ category then the problem is not the €5K. It is the tens or hundreds of thousand in increased revenue that they are missing out on.

See also:

Part 2: Making the most of your web design investment

 

Leave a comment on:  Facebook | Hacker News

 

09.04.2013, by Steffi Kieffer

Neues Gewand in grau und orange

Die neue Website der Universität Passau ist live! Wir freuen uns!

Das klare, benutzerfreundliche Design stammt von uns, Projektmanagement und Implementierung von dpool. Wir wünschen allen Studierenden, Studieninteressierten, Wissenschaftlern, Unternehmen, Alumni, Förderern, Freunden, Schülern, Lehrern, Beschäftigten und der Presse für die wir das Uni-Portal gestaltet haben viel Spass damit!

Zu sehen unter:
Universität Passau

Uni Passau 

 

Leave a comment on:  Facebook

 

09.04.2013, by Steffi Kieffer

Unser UX Design Werbeplakat in Herrsching am Ammersee

Seit ein paar Tagen hängt in Herrsching ein Großflächenplakat von uns. Normalerweise hängen dort Werbungen für Bier, Baumärkte oder Fahrräder. Jetzt sieht man dort unser Plakat: ein gezeichnetes Diagram mit dem Titel "UX Design". Zugegeben, etwas ungewöhnlich für Herrsching.

UX Design billboard

Das Plakat richtet sich an diejenigen, die wissen, was UX Design bedeutet. Ein Großteil der Herrschinger gehören jedoch nicht zu dieser Zielgruppe und können mit dem Begriff nicht viel anfangen. Nachdem ich jetzt von einigen gefragt wurde, was denn eigentlich "UX Design" bedeutet, hier eine kleine Zusammenfassung:

Spricht man von UX (User Experience), dann geht es um das Erlebnis, das der Benutzer mit digitalen Produkten, also Websites, Apps oder Software Interfaces hat.

Wieso braucht man UX Design?

Websites (Apps, Software Interfaces) sollen ganz einfach und intuitiv zu bedienen sein. Wir kennen alle das frustrierende Gefühl, wenn mal wieder ein online Bestellvorgang oder eine Registrierung nicht funktioniert hat, wenn man nicht die gewünschte Information findet oder das Video auf dem iPhone nicht läuft. Es ärgert uns, kostet Nerven und es macht einfach keinen Spass. Wir verlassen die Website und kehren vermutlich auch nicht mehr so schnell dorthin zurück.

Im Übrigen gilt das auch für Bedienungsoberflächen von Maschinen (z.B. in Krankenhäuser). Ist eine Maschine schwierig zu bedienen oder sitzen die Knöpfe an der falschen Stelle, kann das zu gravierenden Fehlern führen. In manchen Fällen kann das sogar Leben kosten.

Mit Hilfe von UX Design Tools schaffen wir es, genau diese Szenarien zu vermeiden.

Wichtig dabei sind:

  • einfache Bedienbarkeit
  • hoher Nutzen
  • Reduzierung von Fehlern

Damit etwas einfach zu bedienen ist, müssen die richtigen Inhalte im richtigen Format und an der richtigen Stelle stehen. Das funktioniert nur, wenn man die Zielgruppe wirklich kennt und nicht nur mit Vermutungen arbeitet. Was möchte der Benutzer machen, was für ein Problem versucht er zu lösen, wonach sucht er, wie benutzt er es und wann? Um diese und viele andere Fragen zu klären, führen wir z.B. Interviews und Usability Tests mit den Zielgruppen durch.

Wir erstellen User Szenarien, um alle möglichen Situationen zu testen. So können wir Strukturen und Inhalte erstellen und anhand von Papier Prototypen schnell und einfach testen. (Im Übrigen lieben wir Papier Prototypen! Wir können so auf ganz einfache und unkomplizierte Weise testen, ob das, was wir tun auch wirklich funktioniert - und zwar ganz ohne auch nur eine einzige Zeile programmiert zu haben!)

So entstehen Arbeitsprozesse mit ständiger Anpassung und Optimierung. Solange, bis alle glücklich sind.

Das ist UX Design.

 

Leave a comment on:  Facebook

 

20.12.2012, by Steffi Kieffer

The making of our limited edition christmas cards

Lately we've been doing a fair amount of paper prototypes for various web and graphic projects as part of our working process, so it only seemed natural to stay low tech with our christmas cards.

One weekend and a few tubes of paint later we had our limited edition of screen printed cards.

We wish you all a wonderful Christmas break and an exciting New Year!

 
 
 
 

Leave a comment on:  Facebook

 

Creamy goodness

20.12.2012, by Steffi Kieffer

Revelate cupcakes

We wish you all a sweet end of year and a tasty 2013!

 

Leave a comment on:  Facebook

 

23.10.2012, by Ben O'Hear

There is money to be made!

It is something of an irony that my worst buying experience of the year has been booking the Service Design conference in Paris. But I guess this extends to any conference.

We had to deal with three payment services (Paypal, Air France and the Hotel) and those ranged from OK (the Hotel) to one hour of pure frustation (Paypal), with Air France sitting in the middle having "only" crashed and lost all our data once.

Mercifully, Trabber saved us the legwork of figuring out the best flight. No such luck with the hotels. Though there was a shortlist of five on the site including discount co