Creepin' On Your Customer

I decided I should let you all in on one more facet of UX Design before we place this book back on the shelf for a little while.  (If you haven't read the last two posts on this topic, Designing In Someone Else's Shoes and The 300 Million Dollar Button click the links to get a little backstory on what we're talkin' bout!)  This last chapter is to help you verify that you're on the right track with how you're conveying the information and messages you want to impart to your customer and make sure that, basically, you know, they're picking up what you're putting down... and in the way you want them to pick it up.  One of the most accurate ways to assess if your design is user experience "compliant" is by well, asking... users, that is.  And creepin'.  Which leads me to the photo above.  A lot of times, user experience testing is about watching people use your product.  Kind of like, taking a photo of someone taking photo.  It's like a process audit that can provide insightful data that you never could have guessed about. This practice is known as "usability testing" and there are many ways to do this.  Obviously, you need to have some resemblance of your site or product to have these said sample "users" attempt to "use" it.  Otherwise, the results to whatever broad questions you may ask them about your product or site, won't be accurate. However, you don't have to build out the entire finished product and then go back and change a bunch of stuff, either.  The scale of what is acceptable in order to glean useful data from a sample of users ranges from paper napkins, to flashcards, to a rudimentary prototype, to a full-scale MVP (minimum viable product).  So first let's talk about different ways to create a sample (product/website) to test.  Then, we'll get into what a user looks like and ways to collect the data.  

You'll probably want to assess based on your time/money resources and the impact of the data, how much effort and expense you want to put into creating a sample of your product.  In the context of a website, this can be done super cheap and quick by just drawing out on pieces of paper what certain or each page of the site will look like (where a photo is on the page, where a button is, a form field, etc).  You can also do this with index cards or sticky notes and put them up on a wall or bulletin board and put string or marker to show what buttons/links connect to where.  If you want to get more advanced in terms of flow, there is a great app called "Pop" that is free for up to 2 projects at one time, that allows you to take photos of your drawings (works best for mobile app design) and then you can create "hot button" boxes in the app around areas that would be buttons and have them link to other "page" drawings.  It's preeeettty slick, TBH.  Here a little promo video on how it works (I think it was filmed by a Spanish speaking user but it doesn't matter as the background sound is just "musica" :)

If you have a familiarity with Photoshop and can create pages for your website in Photoshop, you can then import them to another free tool called Invision, where you can add different types of functionality including links, pop-ups, buttons, menus, etc that will take the user to different pages or pull up images or forms, etc without having to code out the functionality.  Lastly, if your resources are abundant or the importance of collecting impactful user testing data is paramount, you can build out a product or website that is coded out and have users test a working site.  

Naturally, extensive testing and prototyping can be time-consuming at a minimum and very expensive at a maximum, so you may not need to draw out/build out everything.  Additionally, testers may have a limited attention span, so taking inventory and prioritizing what elements are necessary or important to test (maybe it directly pertains to sales or a customer's first impression, or their connection and loyalty to your brand), can help to eliminate wasted time or finances. 

Now let's talk about how to find these sample "users."  Mostly you need people that are unfamiliar with your product and are unbiased and represent the type of customer you are attracting.  Your user might be anyone within a 15-65 year age range or it could be more specific like stay-at-home moms, between the ages of 40-50 who live in Los Angeles.  If your market is more specific, then you will do better to get testers who closely resemble your typical customer as the data will be more reflective about what speaks to them as well as what pain points they are experiencing.  If you have friends and family that fit within your demographic and aren't coming into the situation with some familiarity of how the product or site works, then BONUS.. User them up!  If you do require more niche users, one effective method I've heard of it to see where they hang out and then offer them something worth their while to do some quick user testing (ex: hang out at a table at Starbucks and offer to buy them their cup of coffee if they will test out your prototype or website for 5 min).  Of course, you can always hold a focus group and may need to pay or incentivize them to participate.  You can advertise the focus group on Craigslist or Facebook, etc.  Or, you can use an outside market research company to conduct focus groups for you or customer surveys and they can handle soliciting model users. 

Finally, you'll need to have the users test your prototype.  This may be obvious depending on what your product or site is.  You may want to ask the tester to try to achieve certain objectives using your product or website and then watch how they attempt to do so.  Or, you can use this fancy company called UserTesting (definitely clear messaging with their company name :) to watch videos of people using your product while giving commentary on why they are making the choices that they are.  Not gonna lie, it's not cheap, but it may end up being cheaper in the long run.. See my post on The $300 Million Button for more on this.  If you want to get really advanced, you can do A/B testing in which you have 2 different versions and test each different version with different users so you can see which one fares better. 

One thing to keep in mind when doing user testing is that you have to be willing to throw the baby out with the bath water.  Sometimes the thing we've invested a lot of time into developing doesn't resonate or communicate with our users in the way we want but that's part of the territory.  You don't keep an ineffective communication element or strategy just because you've invested a lot of time into it because in the end it will only hurt you.  Just like slot machines, sometimes, even though you've spent all night feeding that thing, you just need to cut your losses and walk away.  Walk. Away.

And on that note, we'll do the same as that concludes our programming on this topic.  See y'all next week where we'll break down sumpin' else!

DESIGNING IN SOMEONE ELSE'S SHOES

Since I know you all have been waiting on the edges of your seats since last weeks post, you can cool your jets now because I've got tasty morsels of information for you today.  Those of you who didn't tune in last week, let me bring you up to speed, riiill quick.  Last week we discussed the concepts of UX Design and UI Design along with an illustrious story that highlighted the value of these ideas.  I hooked last week's readers by telling them how big of a difference including UX/UI design principles into your website or product can make and then left them with a true cliffhanger as to "HOW."  I'm SUCH a tease!  Luckily for you, if you haven't read last week's post, you can binge-read that one and this one back-to-back, without any lag time in between... Procrastination pays off!  So, peep last week's post - The 300 Million Dollar Button, before reading this post.  We'll see you back here in approximately 4 min. 

For the rest of you patient lot - let's get into it! The reality of UX guided design is there is not one right way to do it.  This is not an either/or, good/bad type of thing.  There are many ways to skin a cat and there are also many ways to design a site or product that is pleasing to the user and allows themto easily find and accomplish whatever they are trying to do/you want them to do on the site. That being said, there are some tried and true UX Design principles that influence almost all users favorably.

GET ON THE GRID

The proximity and placement of various components on a website can be fundamental for helping people determine what's going on on your site and make sense of it quickly.  A grid system helps you to convey the components of your site in an organized way that allows users to see a pattern or order and then process pieces of it in chunks (the good kind of chunks :), rather than one at a time.  A 12-grid system is generally the preferred grid as there are so many numbers that it is divisible by and thus it can be broken into a variety of combinations. 

HEAD IT UP

If a website was like Mario Kart, headers are like coins.  They're an added boost for SEO (search engine optimization) as Google give headers more credit but they also keep you on track and are like a bonus for site visitors.  Users appreciate them because it tells them what the text below is about and then they can assess if it's important to them or not.  Once again, they allow the user to process information on your site quicker.

CONSISTENCY IS KEY

When people come to your website for the first time, they don't know where anything is, how to find what they are looking for, what is important to them, or how to get to where they need to go.  Similar to looking at a map, it takes a second or two to get acquainted and familiar with what's going on, how the information is laid out and then actually read it.  Most maps have a key showing consistent elements that are repeated in the map to help the person viewing the map not have to make sense of every aspect each time from scratch.  By using consistency of fonts, colors, icons, buttons, etc for elements that are repeated throughout the site, you are essentially developing a key for the user.  If they see a button that is in a black, in a square shape with white text in a Times New Roman style font, then when they're looking for a button that does something else, their eye will have a better idea of what to look for.  Having different fonts on a website is good because it adds dimension and feeling to the design but each font choice should have a role and should be used when its role is appropriate.  For example, certain headers should be a certain font, size, color etc which should be different than regular text.  If you're explaining an instruction or non-pertinent information, you could use an italicized font in a lighter color to show the user that the information is helpful but not necessary to read.  Consistency falls under the idea of "grouping" which shows the user that things are related and have similar meaning if they have the same attributes.  Grouping allows us to digest larger amounts of information quicker and easier.  Additionally, you can use subtle lines to connect various pieces of related information together or to create sections, grouping related together as well.

DON'T REINVENT THE WHEEL

There are already ways in place that user are used to for certain basic functionality.  They are used to seeing the navigation either on the top or the left hand side of the website.  Most people are used to clicking the logo and being brought back to the home page.  They know that if certain words in a body of text are a different color, it may be a hyper link.  They are used to logging in in the top right corner of the website, etc.  You don't need to try to get cute by doing something different only to end up confusing the user.  From a business perspective, the less time you need to spend educating your customer, the better.  Don't waste the attention the user is giving you on them trying to figure out how to sign up or log in.  Save the WOW factor places where differentiating yourself will make a positive impact.

READ BETWEEN THE ALIGNS

There are times when stylistically, having different alignments or placement on a website can make a site look better but a general rule of thumb is remembering that people read left to right and top to bottom.  Therefore, placing more important things on the right hand side or at the top is a good guideline to follow. Additionally, drawing out your designs on paper is extremely helpful as studies have shown that we think better by putting a pencil to paper and you may be inclined to draw what feels natural to you (left-right, top-bottom). 

a pICTURE = 1,000 WORDS

Too much text can be a turn off to any site visitor and looks like work.  Additionally, if you have important messages about using the site or about your business or brand, that are buried in a lot of text, it may not get read and... that could be bad.  If there are opportunities to convey concepts or ideas using imagery instead of words, then use it!  Explanatory imagery could also include using icons instead of buttons with words on them, illustrations or photos as headers, or video or images to infuse brand messaging into your site.  This is a great area to get a little creative. 

dON'T TIP THE SCALE

Good design should have balance and symmetry.  Naturally, we are attracted to things (and supposedly people) that are symmetrical and balanced, so making sure your site doesn't feel lopsided will help you communicate in more stable, consistent, and harmonic ways.  Good design is always part of UX design, as aesthetically pleasing elements can make people trust you, feel calm, feel inspired, happy etc and result in a positive "experience."  However, one thing to be cognizant of is a balance between simple design that looks good and explaining important components to the user.  Clear explanation might mean more words, a larger font, premium placement, etc.  Ideally, your site does both but that can be atough balance to strike.  At the end of the day, clear layout, language and placement trumps aesthetics because, if you've brought the horse to water and he's thirsty but can't figure out how to drink, then ultimately -> FAIL. 

Ultimately, UX Design can be summed up in one word - EMPATHY.  Empathy is defined as the experience of understanding from another person's perspective - which sums it up better than I probably have in two articles.  Empathy by nature is difficult and it's impossible to truly understand how someone else feels or perceives something but you can get closer to the mark by collaborating with others when coming up with your design.  Tunnel vision is natural but by discussing or working on the design with other people who bring different skills, experiences and ideas to the table, you can create even slightly more empathetic design.