Are you Banksy or a Vandal of UI Design?

There are several DOs and DON’Ts in user interface (UI) design. Just like in graffiti, there are Street Artists and Vandals – you decide which one you want to be.

A few weeks ago I went on a Banksy walking tour through different districts of London. Much to my disappointment, I haven’t spotted many of his works as they were either destroyed or simply covered by construction works. Then I’ve noticed some other great street artists who really astonished me. And so my journey through the London street art began.

<Tesco Bag Flag Tesco Generation> by Banksy, Angel, Islington area of London
<Tesco Bag Flag Generation> by Banksy, Angel, Islington area of London

OK, where are we going with this and what does graffiti have do to with User Interface design?
Graffiti has been an art form since the first prehistoric man/woman made his/her mark in a cave. However, you’ve probably noticed that not every graffiti is an art form. Some of them are just pure vandalism. The same goes with UI design. While some interfaces are well-designed for the user, others make you want to dash.

Let’s take a look at 6 characteristics of the street art (good UI design) that distinguish it from vandalism (crap UI design).

1. MEANINGFUL

Anti-Fifa graffiti in Brazil
Anti-FIFA graffiti in Brazil

Content of your site or application should be meaningful. Don’t underestimate your users. Giving them poor content is the worst form of offense.

Quick Tips:
1. Explain the purpose of your site in the tagline under your logo.
2. Use onboarding to introduce the user to your service.
3. Show preferred actions so the user knows what you want him to do.

2. TAKES GREAT DEAL OF TIME AND EFFORT TO PRODUCE

Make some effort to create a good interface. It takes time to understand what your users want. Once you collect that data, give them the right, thought-out and tested product. Your interface should be tailored to your users’ needs.

Quick Tips:
1. The user wants to see interface controls next to the object he wants to control.

LinkedIn Controls - The user expects to see interface controls close to the object he wants to control.
LinkedIn gives the user control by interface controls placed close to the object he wants to control.

2. The user will be more inclined to perform a complex action if it’s broken down into smaller steps. It’s extremely useful when designing complex forms.
3. Be direct instead of being indecisive. Send your message with confidence. Don’t use words like “maybe”, “perhaps”, “interested?”. People like to be told what to do on your site instead of guessing.

3. ATTENTION TO DETAIL, SHADING, LAYERS, PATTERNS AND OUTLINES 

Otto Schade Camden Town, London
Otto Schade <Rhino> Camden Town, London

The best sites and applications look extremely simple, but don’t be fooled – the simpler the interface looks the more effort the designer had to put in its creation. So if you want to keep it smart and simple, make some effort – it will pay you off.

1. Think through the forms on your site. Collect only the most important data and let your users know why you need it.
2. Rethink the position of your call to action buttons.
3. Let the users get lost and navigate them via the “undo” buttons.

4. ATTRACTIVE AND RESPECTFUL  (as opposed to offensive)

Flashy colors and badly matched design is the best way to offend = lose your users = customers.

They will simply find a site with better UI design.

Here are some examples of how you can offend your users: http://www.theworldsworstwebsiteever.com or http://www.sixtiespress.co.uk

Quick tips:
1. Navigate your user through your interface.
2. Try to give as little popups as possible.
3. Try exposing options instead of hiding them. Try to avoid select lists where possible.

And most of all (I know you wouldn’t dare to do it) DON’T use moving banners with flashing and blinking links e.g. http://www.electrifyingtimes.com or “I don’t know where to look at” http://www.biologyjunction.com (school children from all over America get sent to this website).

5. GRAFFITI WALLS (some make it right while others suck) – WHAT MAKES YOU STAND OUT

You can say it’s still graffiti on the wall but it’s the way it’s made that makes a difference. It’s all about these tiny extra bits that change the User Experience dramatically.

Good UI vs Bad UI - Berlin wall and act of vandalism
Good UI vs Bad UI – Berlin wall and act of vandalism

1. Give feedback

Gmail feedback
Gmail gives feedback – example of good UI design

2. Add elements of gamification (WISELY!) eg. show progress, levels, give badges, points and hook your user with good onboarding. Read more about gamification or see my presentation from Uxcamp.
3. Provide aesthetic appeal, integrity and continuity.

6. MURALS, COMMUNITY INITIATIVES vs MINDLESS ACT OF VANDALISM

Community Mural Program
Sherwood Community Mural Program

Once you apply all of the above rules you can now go a bit further and ask for feedback from your users. Bearing in mind the shift from consumer to prosumer – your users want to have an impact on the product they use. This is also called Customer Empowerment. If you fail to meet your users’ expectations and don’t apply their feedback, someone else will.

Quick Tips:
1. Test, test, test, ∞
2. Add feedback widget.
3. Check conversion rate. Analyze your users’ behavior on on your site with Google Analytics or a person-based analytics platform e.g. KissMetrics. Learn more about how to improve your conversion.

4. Allow users to customize the interface (preferences)

If you like good graffiti or simply don’t like the bad ones, you will agree that a bit of effort and thought is crucial in the graffiti making process. Today’s reality is a constant interpenetration of online and offline. Let’s make sure our interfaces add value to our surroundings.