A Tic Tac Toe Board As A Design Tool?

Well, I know how much my designer friends love it when I give away the keys to the kingdom, so here are two of their HUGE design secrets that you don’t know about.

What if I told you that if you could draw a tic tac toe board, you could create a well organized, easy to use website that pointed people to the exact content on your site that you wanted them to see?

No, I haven’t been hittin’ the sauce my friends, it’s true. When you look at a webpage, app, art, picture, building and more, the ones that are easy to use and pleasant to your mind are using one or both of these secrets.

Image Source

 

Image Source

Developers, coders and graphic designers, click here to sign a petition to have me banned from the internet for sharing your secrets.  Not gonna happen my friends, but I bet you clicked it to see. Lol.

Image Source

“Well, get on with it Elle? What are the darn secrets already” you must be thinking. Because I like you, I will tell you without further ado. They are called the Golden Ratio and the Rule of Thirds…….what????

Let’s look at some quick photos and sites to demonstrate my point and then I will show you how to use this for your benefit.

The Golden Ratio:

To use the Golden Ratio (GR), you simply take the width of whatever you are working on and divide it by 1.618 and depending on what you are doing with it, that will tell you what to do next. Now, I could bore you with complicated charts and reasoning, but for your purposes, increasing customer engagement, that’s what you need to know.

Warning, snoozefest getting ready to happen. Let me just show you one super boring image and then we will go back to Normalville, where people need to see things to understand them. Here is the 1:1.618 ratio.

Image Source

 

When you do this, it separates the website, image, etc into an appealing arrangement that just works. The equation is a 1: 1.618 ratio.

Ok, back in Normalville, let’s look at something that doesn’t make you feel like you wished it were bedtime.

Image Source

Coincidence you think? Nope. Let’s look at another.

Image Source

Still not convinced? How about one more because I really like you guys?

Image Source

Come on people, I can do this all day long. I have access to Google images and I’m not afraid to use it. Hello, boomerang. You look a bit different now. 

Image Source

It’s cool. Take a moment and get yourself back together. The first time I saw this was worse than when I found out I had been duped by my parents about Santa Claus. I was thinking, “What the fudge is going on here? How did I not know about this?”

The point is that you can use this concept to divide up your website into these parameters to make your content easy to read, more credible, etc.

For example, if you had a webpage that was 900 pixels wide, you could simply divide 900/1.618 (remember the 1: 1.618 ratio) and that would give you roughly 555 pixels wide for the first column and then 900-555: 345 pixels wide for the second column. You can then take the larger parts and break those parts down the same way if you need to.

Here is a quick example of how this can look on a website, but I’ll show you a tool at the end that will do it for you. Just stay with me.

Image Source

 

Image Source

Ok, now let me blow what is left of your mind. Let’s look at the second design secret that they all use.

The Rule of Thirds:

To use the ROT (Rule of Thirds), you simply draw two vertical lines and then two horizontal lines to split your image, webpage, etc into nine equal parts, AKA….a tic tac toe board. That will create four intersection points where the lines meet. Place your important information or focus on or near those intersection points.

Image Source

People’s eyes and attention are most naturally directed at the upper left intersection point.

Image Source

That said, anything near or on these points is simply easier to visually digest and trust on some subconscious level.

Image Source

This ROT is a real thing, I promise. It creates visual tension and balance and draws you into the object. It’s like being seduced without the dinner or nice glass of wine.

Alright, sure, you’re feeling a little like the one kid that got left out of the birthday party, but trust me, you are not alone. Literally, less than 1 in 10 business owners that I speak with know about this.

I didn’t write this post to tell you what you don’t know. I wrote it to give you two tools to use when creating your product shots, marketing materials and your website. So, let’s quickly look at how you can apply this to engage (read….seduce) your customers.

As I noted earlier, most people focus on the top left intersection, which you can see demonstrated below.

Image Source

Another important thing to know is that most people visually scan a website in a F or a Z pattern. This can really help you understand where to place important content (click here, buy now, sign up,etc…)

More importantly, when you combine the Rule of Thirds, The Golden Ratio and this F and Z scanning pattern, you can really give your website some power.

The take away is to be mindful of where your products are in your product shots. Most cameras have a ‘Grid’ setting, so look up the one that your camera has and leave it on when you are lining up your product shots.

 

Image Source

When your marketing people bring you pieces to consider, think about them in terms of these rules and then make changes as necessary.

Image Source

Lastly, if you are using a website builder like Divi, which I LOVE and highly recommend to business owners, it will be very easy to organize your page elements to these rules as they are generally preformated to fall in line with these guidelines.

They have a lot of variations on this concept inside their Divi builder, so you don’t have to do anything but plug in your content. If you decide to go this route and use Divi, trust me, buy the Lifetime Access. You will save yourself so much money over the years. 

Image Source

That’s a wrap folks. I hope you found this not only interesting, but helpful in constructing your web pages, product shots, etc. Now go out there and dazzle your friends and customers with your new found knowledge.

See you in the next one!

Gratefully,

I write simple, small business tips about creating a unique customer experience that helps your customers to choose you over your competitors.

Follow Your Customer's Shoes on WordPress.com

Categories

Free CX/UX Quotes

Let's Connect

Want me to help you build your unique customer experience?

OFFICE

15655 Airline Highway

#1858

Prairieville, LA 70769

REACH OUT

CONNECT WITH ME

People Are Busy. Don’t Forget That.

I know, I know. This is not a popular thing to say, but it is honest, so brace yourselves. You, your designs, your business are not our largest priority!

 

priority

 

Gaaaaasssspppp. What? How dare you say such a thing Elle? (Every designer and business owner is currently making a voodoo doll of my body).

 

voodoo doll

 

Let me get straight to it, because I know that even as rip roaring hysterical (yeah, I know this stuff is funny, even if you don’t want to admit it…it’s cool, it’s our little secret) as my blog posts are, this is one of six katrillion things you have to do today.

 

 

This week, while standing in the kitchen plating an after school meal for my children, my phone goes off with this alert.

 

 

Let’s quickly dissect how this app could benefit from realizing that people are busy, that we forget stuff quickly and that Powerschool (grade notification app) has a chance to build real value into their relationship with me by capitalizing on that fact.

 

 

First off, it’s 4:18 in the afternoon and this is not a good time to try to get my attention. Most people are either commuting, trying to wrap up work for the day, etc.  Maybe try sending this in the middle of the day, so that I might actually have a moment to gain my composure if this were really bad news.

 

 

I mean seriously, what if this were an F, instead of a B? (I know it’s a B, but come on, the little guy is really trying)

Powerschool, if this were an F, don’t you want me to have to time to have an emotional meltdown and then get it back together before I have physical access to my child? Are you trying to deliver grades or death sentences? 🙂

 

 

Secondly, what does this even mean? Cash’s Reading  1-2 (A) Q3 grade is now B?

My first thought: Ok, it’s about my son. I know, because it says Cash, that, or my money is going to school without telling me about it. I have been wondering where it’s all going. Alright so I surmise that we are talking about my little dude, that’s a step in the right direction.

 

 

2nd: Wait, seriously, are we in Q3 already? How can that be? OMG, how many days do I have left until those little monkeys are off for the summer? See how easy it is to lose our attention?

 

 

Next: What is 1-2 (A)? Does that mean that he had an A and now he has a B or is that some secret class code from the teachers that I don’t get at all? I feel like that blonde in Clueless. Somebody, help. #momfail

 

 

Last: I ask, “Cash, what was your reading grade last quarter?”

He looks at me like, “What the heck is a quarter? Do you mean the large shiny silver things all over the bottom of your purse?

 

 

The point is, this could be improved A LOT with a very small set of changes.

1st: Send it during the day, maybe in the mid morning so that parents can actually process what they are seeing before their children come home. You know, help a kid out.

 

 

2nd: Simply state what the last quarter grade was, then what this one is, so that this information is actually valuable to me. It could simply say:

‘Cash’s Reading Grade Q2 Was A. His Q3 Grade is B’. (Insert parent freaking out because of grade drop, children crying because their parents took away privileges, etc) Oh, maybe that’s just in our house. I digress. 🙂

 

 

The point is that the way that it is currently being delivered is just a feature, but with a few tweaks, it could add actual value to my life.

I assume that Powerschool intends for me to use this information to monitor my child’s progress, but one piece of information without the other does not accomplish the goal.

 

 

People are busy. We forget stuff. I bet half of us can’t remember what we had for breakfast two days ago or which pajamas you wore to bed.

 

 

As designers and business owners, don’t make the mistake of thinking that your customers are just sitting around waiting to see a feature from you. Instead, provide them with a value based service (telling me what my son’s performance is now compared to what it was last quarter) that helps them to connect with your brand and want to invite you back into their lives.

 

 

I hope you guys can see how each ‘feature’ is an opportunity to establish a connection with your customers. The take away is to remember that people are forgetful by nature. We are all moving at the speed of light and we don’t have time to try to figure out how or if you are offering something important to us.

Clarify the message. Build in the value. Grow your brand.

 

 

That’s it. Have a great week everybody.

Respectfully,

your customers shoes, ycs, elle robertson

I write simple, small business tips about creating a unique customer experience that helps your customers to choose you over your competitors.

Follow Your Customer's Shoes on WordPress.com

Categories

Learn CX/UX Quotes

Let's Connect

Want me to help you build your unique customer experience?

OFFICE

15655 Airline Highway

#1858

Prairieville, LA 70769

REACH OUT

CONNECT WITH ME

What In The World Is Feedforward?

Hello Everyone,

No, I didn’t bang my head in a tragic ski accident and I’m not so cool that I have made up a new term. So, what in the world is feedforward? Don’t you mean feedback? Nope, no sir, no I do not.

 

ski accident

 

Let’s take a quick look at the differences so that we can make sure that your current customer and user experiences have these bases covered.

Why should you care? Simple, a poor feedforward causes people to leave your site, translation….lost opportunities, clients and revenue. Yeah, that’s right, I used the R word. I bet I have your attention now. 🙂

 

more awesome, less awesome

 

Feedback is what happens when you perform an action: click a button, scroll, enter words into a search box, etc. Feedback tells you that you are, for lack of a better term, controlling the environment that you are experiencing. In other words, it tells you that you and this website/app/product/service are on the same page and that you are both moving towards the same end goal.

 

feedback happy customer

 

Quick Example: Feedback

I am out with a friend and she says, “Gosh, I am hangry”. Confused, I look around and try to play along. When she goes to use the restroom, I pull out my phone and google ‘what does hangry mean’ into Google’s search function. It returns a list of resources that I may read or watch to answer my question. I quickly surmise that this means that she is going to turn into one of those hungry divas from the Snickers commercials and nobody likes a diva.

 

hangry diva

 

Feedback in hand, I start navigating towards my favorite restaurant that serves people expeditiously. Alas, my friendship is saved. My friend is fed and all of that happened because Google gave me the appropriate and helpful feedback to get to my goal….answering my question about what hangry meant.

 

hangry avoided

 

Feedforward is anything that tells you what to do to get to the feedback stage. If I am sitting on a page and I  am not sure what the next logical step is, then the site lacks feedforward. To put it another way, it lacks the correct design tools (discoverability, affordances, signifiers and conceptual model) to tell me what I should do next. If I don’t know what I am supposed to do next, then I can’t get to the feedback stage.

 

feedforward confusion

 

When people feel frustrated by the lack of feedforward on a site, they will never be given the chance to be dazzled by well designed feedback interactions.

 

confused customer user experience

 

Quick Example: Feedforward (Or Lack Of)

I am a new employee at a company who is going to be working virtually. I have to take a training class online to be qualified to begin work. My recruiter sends me the link, I log in, and then I get to a page that has a lot of options: text, images, videos, recordings, surveys, etc, but no direction about where to start. Because of the lack of directions (aka..feedforward) I have no idea what I am supposed to do first. I don’t want to make a bad impression, but I am feeling stuck, because the site does not make a clear indication to me about where to start.

 

scared baby

 

Now, I am feeling vulnerable and unsure of myself. These are not the emotions that I want to be experiencing while preparing for my new job. I want to feel empowered and capable and finish the training in the intended order. However, I can not do that, because I have no idea where to begin. This site gave me no feedforward, so I couldn’t get positive feedback from completing the training.

 

positive user experience

 

I hope this quick little explanation and these examples were valuable to you in understanding the basic difference between these two terms and how they work together effectively to create a well designed user experience.

 

Gratefully,

your customers shoes, ycs, elle robertson

I write simple, small business tips about creating a unique customer experience that helps your customers to choose you over your competitors.

Follow Your Customer's Shoes on WordPress.com

Categories

Free CX/UX Quotes

Learn More….

Let's Connect

Want me to help you build your unique customer experience?

OFFICE

15655 Airline Highway

#1858

Prairieville, LA 70769

REACH OUT

CONNECT WITH ME

UX Versus UI: Aren’t They Just The Same Thing?

Hello All,

Aren’t UX and UI just the same thing with different names?This is a challenge that I deal with a lot in the field. I meet with a client, explain my vision for how to help their business and then they say something similar to this, “Well, so basically you are a web designer.” Insert sad face emoji here. 🙁 Then I usually have this conversation, “Yes a lot of my customers see the two professionals, User Experience and User Interface (website/mobile development) as the same, but they actually work together to create the most effective customer and user experience for you and for your customers.” This usually allows me a few more moments to give my ‘elevator pitch’ about who does what, etc.

timer

First, let’s knock out these terms. A UX Designer is someone who is concerned primarily with understanding the user (your customers), mapping out an intuitive customer journey to help them achieve their desired tasks and then ensuring that the proposed design is as pleasant and easy to use as possible.

Conversely, a UI Designer is principally concerned with the overall visual design of the website; font size, colors to be used on the website, where buttons are placed and more. They are concerned with how the website ‘looks’ in an aesthetic way. They have a keen sense of design and how to make graphic elements visually appealing for the end user.

 

In a best case scenario, you would have a UX designer who sits down with potential end users, understand their needs and behaviors, looks at your competitors, considers your business needs and then creates a wireframe (rough draft) of where they want what elements placed on a website to help your customers achieve whatever task that they are trying to perform. At that point, the UX designer would hand off the rough draft to a UI designer who would make all of that research and intended customer journey come to life with beautiful graphics, well laid out page elements and more.

I think it’s worth noting that UX and UI designers work on physical products, as well as digital assets (websites, apps, etc). To really bring this whole concept home I decided to use a concrete example that is easy and fun to understand. While researching for this blog post, I found an excellent article on the Rubix Cube on thetelegraph.co/uk. When Erno Rubik, a hungarian architect and the inventor of the Rubix cube, created this magical little cube of madness back in 1974, he never intended for it to become a toy that would span 40+ years. It was a ‘tool to help people understand 3 dimensional geometry’. As the years went on, the toy become insanely popular and now has professional speedcubers who have competitions around the world and try to beat each other at solving the cube in record time.

rubiks cube

As this was never the intended use of this ‘toy’, the original design had to be recreated to take the new ‘intended user experience’ into account. Now, the cube would need to be redesigned to move faster and more smoothly through the puzzle algorithms to achieve the intended task-solving the puzzle. In this instance, the UX designers would sit down with or test ‘cubers’ (people who speed cube) to see how they used the cube, what caused them frustration and what they wanted the cube to do. Once they had that information, they would hand it off to engineers/UI designers to bring the vision of the UX designer to life. In this example, Rubiks Cube’s Speedcube was born. Same classic design and appeal, but with a highly improved user experience. 

speedcube

I hope that helps everyone to at least have a basic working understanding of the difference between these two specialties and to appreciate how they work together and how powerful combination that these two professionals can be for your business.

 

All the best always,

your customers shoes, ycs, elle robertson

Sources:

The Telegraph UK Article

 

I write simple, small business tips about creating a unique customer experience that helps your customers to choose you over your competitors.

Follow Your Customer's Shoes on WordPress.com

Categories

Free CX/UX Quotes

Learn More….

Let's Connect

Want me to help you build your unique customer experience?

OFFICE

15655 Airline Highway

#1858

Prairieville, LA 70769

REACH OUT

CONNECT WITH ME

Pin It on Pinterest