A friend wanted my opinion about his app that was nearing the eve of its release.
He had every reason to be excited. And I was excited for him.
…Until I saw his app’s design.
It was like he described matching me with a beautiful, intelligent, hilarious, single brunette only to introduce me to a sweaty, portly bride going HAM at her wedding reception at a Golden Corral.
“Check please!”
I sat at my desk cycling through the app’s designs. Pixels, color palettes, kerning and click-through sequences blended together as my interest for the venture plummeted.
My eyes glazed over. The only sign of life was my index finger robotically tapping away at the arrow key.
Suddenly, I came to.
This is bullshit, I thought.
The only thing that frustrates me more than a great idea that isn’t well-executed is a great idea that’s never executed.
Unfortunately, the former scenario can cost an entrepreneur far more time, money and psychological turmoil than the latter scenario, which is where the app seemed destined to go.
That’s when I asked, How could I help other brave creators avoid this?
How could I avoid it myself?
How could I protect a business executive, entrepreneur, developer – heck, even a designer – from spending a ton of time and money creating a product with promise that ends up looking like crap?
Here are some user interface tips that I believe are crucial to setting up a website, app or piece of software for success. Ignore these and your visitors will likely ignore you.
User interface design tips
1. Start by giving
The success of a digital product is directly tied to how effective it is at getting others to invest in it (clicking, typing, swiping, reading, watching, scrolling, etc.).
The first impression your product makes on a visitor will encourage her to start investing or leave (often for good).
To make a great first impression, focus on giving.
Give your visitor the info and tools she needs to feel comfortable, motivated, and able to invest.
The best way I like to accomplish this is by concisely and clearly sharing what the product is and connecting that to how it will make her life better in a meaningful way.
Then, as quickly as possible, let her try the product so she can experience a quick win before asking for anything at all (an email address, name, telephone number, credit card number, etc.).
I call this process the Onboarding Trust Loop and it’s simple yet insanely powerful.
Each time you cycle a visitor through the loop, you’re essentially making (steps 1 & 2) and fulfilling (step 4) a promise, which builds trust. The only thing standing between these steps is a user taking action. The stronger your “What” and “Why” is and the easier you make it for a user to take action, the more effective you’ll be at completing the loop.
The Trust Loop also helps the visitor create a habit and expect that if they take action, then they will experience a reward. This is crucial to building momentum and escalating their willingness to invest more.
A few examples of websites that are implementing this tip well…
- Kissmetrics
- Hello Bar (could do better at saying what it does and why it’s important)
- Optimizely
- Buffer
2. Involve and show to engage
People don’t want to be sold to. People want to be entertained and educated. Visual content is the most engaging type of content online and the best way to educate visitors is by involving them.
The takeaway is this: Never tell a visitor about your product and how it works when you can show it or get her to use it.
Use pictures, videos, animated GIFs and javascript to show rather than tell.
Some companies are doing this very well. I personally love how Stripe shows its visitors how Stripe Checkout works. Watch it once and you’ll immediately understand what customers will experience if you use Stripe Checkout on your site.
The simulation is cleverly flanked by timely messages to remove any doubt about what’s taking place and why it’s of value to the customer.
A few other sites I’ve found doing this well are…
3. Be simple, but give options
You might have heard about the Paradox of Choice. It’s a theory championed by Swarthmore psychology professor Barry Schwartz in his book sharing the same title, in interviews and in a TED talk. Schwartz argues that reducing consumer options reduces anxiety, which results in easier decision making.
The classic piece of research on this topic was done by Iyengar (Columbia) and Lepper (Stanford), which involved them presenting a variety of jams for sale to shoppers. In one version, six varieties were shown to shoppers. In another version, 24 varieties were shown. The smaller variety of jams resulted in ten times more purchases made by shoppers. Iyengar and Lepper concluded,1
The results from both studies suggest that the provision of extensive choices does not necessarily lead to enhanced motivation when compared with contexts that offer a limited array of choices. Quite the opposite seems to be the case. In both studies, people actually seemed to prefer to exercise their opportunity to choose in contexts where their choices were limited, and, in Study 2, they even performed better in such limited-choice contexts.
In other words, more options repel us from taking action. Perhaps this is because more choices lead to more analysis, which can be overwhelming and therefore paralyzing (“paralysis of analysis”).
But recently, this theory has come under fire.
New research has indicated that the effect of more choices is mitigated or eliminated when the options are organized or shown to people who know the domain well or are dissatisfied with what was originally available to them.
For example, if I was presented Black Pepper and Soap Jelly Bean flavors, I wouldn’t pick either one. But if presented a third flavor, Strawberry, I would. In this case, more options would actually make it easier for me to make a choice.
The takeaway is this: be as simple as it makes sense for your product to be.
source: Dilbert.com
Your product will have different types of visitors. You need to present options and information that’s relevant to their unique needs and wants.
- New visitors will need more information about your product than returning visitors.
- Returning visitors will be more motivated and ready to take action (e.g. sign up, create content, share content, etc.) than new visitors.
- Existing and past users/customers will be the most likely to engage, buy high priced items and share your content with others.
The execution of a design that makes sense varies widely across products. No design is best for every business, which is why I distrust templated designs.
For instance, for Google, it makes sense for its homepage to be incredibly simple. For Amazon, it makes sense for its homepage to present a vast array of options to visitors (making it appear somewhat cluttered). For Apple, it makes sense for its homepage to be somewhere in the middle.
Conclusion
I hope you enjoyed this list of tips.
I’ll continue to add to it and revise it over time.
Think of it like a living cheatsheet 😉
Bookmark it, email it to your designer, print it out and tape it to your wall, laminate it and memorize the tips while singing in the shower.
Whatever. It’s your choice.
But for God’s sake please keep these tips in mind while creating any app, website or software. Ignoring them could cost you dearly.
What tip would you add to this list?
References [ + ]