The UX Advantage to UI

October 28, 2015

Hiring a UX expert can increase profits 30%. While I haven’t yet found data to back that number up, I feel it’s a pretty good estimate, especially when considering application in the mobile market. Microsoft, Google and Apple have made staggering investments in UX and their margins have certainly reflected those efforts. Sometimes UX seems to be tossed around like a buzz word, as a business owner it’s important that you know the advantage of UX design.

UI stands for User Interface, this is the making of pretty buttons and numbers, and is often attributed to artistic talent. UX stands for User Experience, this is the study of WHY the buttons should be the shape, color, size and position that they are. Artists frequently determine the “why” by instinct, and it’s usually pretty easy to agree with their presentation. A UX Expert is able to articulate and execute their UI ideas in a way that relates to human nature.

UX is more akin to the study of psychology than of art. When researching UX, or messing about in your computer’s control panel, you might run across the acronym HCI, which stands for Human-Computer Interaction. HCI is the study of how people interact with computers (which began in the 80’s mind you) and a precursor to this new fangled UX buzz word. Researchers have found that people can more readily understand and navigate an interface when its elements reflect real world objects and situations. If a button looks like you could reach out and touch it, feel its sleek surface and gentle curve, you’re more likely to do so.

A couple years ago you probably had a phone with an option called “haptic feedback”. This option briefly activated the buzzer motor in your phone when you pressed a UI button. White it’s not the best for your battery life, it does make your phone more fun, and importantly, more memorable. The sensation of touch has a way of cementing memories in our heads by increasing the number of mental connections we can make with an object. When I went to the statue of Liberty in New York, I felt compelled to reach out and touch the massive metal statue. I’m no touchy-feely guy by any means, but this once in a lifetime opportunity warranted any extra effort I could make to remembering being there.

word1Ok you want less mumbo jumbo and more examples. I’m writing this article using MS Word on a Windows PC. Why are the minimize, restore and close buttons on the right for Windows instead of the left like Macs? Modern interfaces originated in being designed after books written in English, and read left to right, top to bottom. This is commonly known as the F-Pattern in UI design. The Mac interface came first, and they likely imagined close and minimize to be frequent interactions and put those buttons on the top left, where you would start reading text. Windows designers decided that close and minimize weren’t the first things you’d want to do, you’d want to do them AFTER you’ve created your document, and put them on the right instead.

word2The default view in MS Word has you edit black text on a white background, like a book, but there’s a lot more than that going on. That white background isn’t white all the way across, it’s also resting on a blue background, and it has a little drop shadow to it. The MS Word designers figured that if you’re using Word, you’re probably writing a document, one that you’re likely to print. The little drop shadow adds a bit of elevation to the white background to separate it from the blue. If you put a piece of paper on a desk, it isn’t IN the desk, it’s ON it, and it casts a tiny little bit of shadow onto the desk.

An experiment for you! Take a fresh piece of paper out of your printer. Go ahead, you can put it back afterwards. Start a new Word document. Hold your paper up to your screen and compare its size to the white background where you’re editing. If you’re in the default view, they’re the same size. Try resizing the Word window. The white background stays the same size until you choose to change the view or zoom settings. Paper doesn’t magically change size silly!

Ok smarty, why is the background to the paper blue instead of brown like the (likely) wood on my desk? I’m sure they thought about that one for a while before choosing blue. The blue color chosen reflects how people react to colors, and it’s similar in reasoning to why stop signs are red. The color red demands our attention in a primal fashion; it is the color of blood and fire, and as such requires immediate action and alertness. The color blue calms and focuses us at an instinctual level. Sit on a beach during the day with clear skies and watch the rhythmic waves for a while, you’ll undoubtedly find yourself calmly deep in profound thought; which is precisely how the designers at MS would like you to feel when using Word. Facebook uses blue too; if they used red you probably wouldn’t be so inclined to share all that personal information with your friends.

word3So we covered UX concepts like position, size and color, how about shape? The buttons in Windows are mostly rectangular with hard corners. The designers at MS want you to feel that Windows is safe and reliable. In a study of human needs and relationships, we can find that the most important factor in having a friendship with someone is the ability to feel safe with them. Castles, strongholds, forts, banks, great walls, even the pyramids, have been built with rectangular blocks; not round, not hexagons, or even squares. People can quickly identify that a structure is strong and secure when it’s constructed of rectangles. Rectangular buttons give the impression to users that software is safe and reliable to use.

roundbuttonsConversely, you may notice that games, particularly kids games, use round buttons. Round buttons are fun! Most sports revolve around a sphere of some kind. Rolling, throwing, kicking even head butting a ball is fun. What else is round, fun and exciting? You guessed it, the sun! People love to get out in the sun and play around (particularly in Seattle, folks here go crazy when the sun is out). Fast food restaurants use the color of the sun to sway people into thinking that dining there will be a fun experience. Mc Donalds, Burger King, Pizza Hut, Dairy Queen; nearly every fast food joint uses red and yellow in their logos to a) get your attention and b) make it look fun. Why fun yellow instead of calm blue? Same reason they have small dining areas with hard plastic seats: its FAST food, they want you in and out so they can serve the next customer!

facesSpeaking of other customers, it’s important to include stock photography or illustrations of happy customers faces. In the case of games, these may be illustrations of player characters, since game players mentally place themselves inside games as their characters. When using software people will reflect the motions and emotions of people they see. If a stock photo has eyes oriented towards a particular button, users will tend to motion towards that button. If the stock photo is smiling, users will find themselves smiling unconsciously. It’s long established that just the act of smiling will elevate you to a more positive mood. Seeing people’s faces while using software can be an extraordinarily powerful tool in evoking emotions in users; you can make users feel scared, fierce, excited, confident, comfortable even sleepy! Heck I just had a good yawn after writing the word sleepy.

Even deeper study of UX will reveal that the words chosen for UI elements can also have an effect on a user’s experience with software. You probably noticed by now that I’ve written this article as though it were a conversation between you and I. You may even find yourself nodding in agreement or smirking at my awkward jokes and that’s exactly the sort of experience I want you to have in reading this. Instead of calling something “bad” I’m more likely to say something is “not good”. It’s easier for us to skip over the word “not” and remember the word “good” and have a positive conversation, than remembering the word “bad”. In a similar manner I like to use the words “OK” or “Yes” rather than “Next” or “Back” in UI prompts. Not only are these colloquial words shorter and therefore easier to fit inside buttons, they also have the connotation of having a positive conversation with the software (you may use your internal voice to say the words as you press the button), rather than a neutral pressing of buttons.

How does all this translate into profit? Let’s make up an example of turning a user into a buyer, and we’ll even make it a hard sell. I’m designing a UI for an in-app purchase for a kid’s game, so the buyer isn’t the player; it’s the parent of the player. How can we use UX concepts to convince the parent to make a purchase and feel good about it? The first thing we need to do is make the buyer feel safe and calm, let’s use a blue background, and some rectangle purchase buttons. The ultimate goal of the purchase is for the player to have fun, so we make the purchasing buttons yellow, and any buttons that return to play we’ll make them rounded. The call to action here is the purchase buttons, so we’ll make those the biggest buttons on the screen, and we’ll give them a bit more shadow than the other buttons, so they’re “closer” to the buyer. We put the buttons to the right of the purchase description, so the buyer can feel good about confirming what the purchase is after reading it. We’ll also put our value packed purchases near the top, this is where our $5 mobile price point is key. Studies have shown that mobile buyers are just as likely to spend $5 as they are $1, so I’d start with $5, scale up from there until I’ve reached the highest priced items (while scaling bang for the buck too), then drop back down to items less than $5. You can even add the game’s characters, or stock photography for non-game applications, to the screen looking at or pointing towards the purchase buttons, to direct the user’s eyes and hands.

greyboxYou might think this example sounds like a hot mess. Right now all we have is part of a “grey box”, outlining what we’d like to achieve with the UI. That’s where a talented artist comes in to play and makes these components sing. Without making these extra efforts however, you’re missing out on a significant advantage that other companies are leveraging. You might also feel that these ideas seem very rudimentary; that’s precisely why they work, they influence people at a subconscious level. Taking actions to encourage these instinctual tendencies and emotions in a user can make a huge difference in how people feel about your software and the word of mouth that they spread about it. That word of mouth will travel at light speed with today’s abundance of consumer tools like shared product reviews and social networks.

I am a UX Artist because of the meticulous effort that I put into every interface I craft. UX concepts are not set it in stone; they do not work for every user or every UI, so I apply what I can where I can so long as it looks beautiful. I review a check list of color, size, position, elevation, text, font and shape for each element as they’re placed. I hope I’ve clarified UX concepts for you and why it’s important to make an investment in your user’s experience. I’ve written this article in my own words cause if you ask me in person this is likely the kind of response you’d get. For artists, developers and game designers that would like to read further into UX concepts, here are some great materials:

Material Design Guidelines by Google

Don’t Make Me Think and Rocket Surgery Made Easy by Steve Krug

Seductive Interaction Design by Stephen P. Anderson

100 Things Every Designer Needs to Know About People by Sundan M. Weinschenk, Ph.D.

The Art of Game Design by Jesse Schell

The Psychology of Video Games by Jamie Madigan, Ph.D.

4 Important Neurotransmitters in Gamification by Andrzej Marczewski

Psychology in Mobile Game UX Design by Me!