How my 4 year old son helped me design a better user interface.

Let’s be clear: design is hard. No matter how many years of experience you have, no matter how many ‘things’ you’ve designed — be it a chair or a website — designing for the User is everything but simple, and pitfalls are always out there waiting for you, lurking behind that big screen you’re staring for good part of your design process. And you know why?

Because it’s easy to confuse the User with Yourself.

And this is exactly what happened to me just a couple of days ago while I was polishing up my personal website after many “I’ll do it tomorrow” and “I just don’t have time”. Yep, just like many(?) people out there, I tend to find excuses when I don’t want to do something, especially when that something is a personal website. But hey, I don’t really work with it, I don’t get payed through it (at least not directly), so I guess I’m a bit excused…am I not?

Yeah, ok, but what does your son have to do with all of this?

I’ll get to that, just hold on a minute. I need to give you some context first. So, as I was saying, something like a week ago I finally decided to get my hands dirty on my website again. I didn’t really want to design something from scratch because I still liked the overall look and feel of it and I still think that having a playable Pong on the homepage is pretty cool.

Since Pong was meant to stay, one of the first things I sought to improve were definitely the touch controls of the mobile version of the website.

Original HP version on mobile (OMG that’s bad!)

As you can probably see for yourself, the original mobile design was screaming for help and had a lot of improvements that could be made. And what do you do when you have more than one task to work on? You write a to-do list (don’t you?). Here are three to-dos I immediately came up with (there were many more, but for the sake of this article we’ll just focus on these):

• update the “use arrow keys to play ” CTA(!!)
• make the touch controls area extend to entire width of screen.
• remove the side menu (we need space!) and make it sit at the bottom of the page — “like-any-app-style” (duh).

Now the first item off the list was rather simple to fix and really spoke for itself…I mean, it was obviously the label of the desktop version that somehow ended up on the mobile version: how could the User even use arrow keys on mobile? Just a couple of seconds and that label was updated. Cool, that was super quick! Ok, maybe not that quick, since I also decided to bring a minor update to the wording and layout of the second label that tells the User how to pause the game…but yeah, it was still rather quick.

The other two items might also seem rather quick to fix, but the redesign of the touch controls and the menu were actually where all the “magic” happened, and yes, where my son showed me how to design for the User and not for Myself.

Step 1: hamburger vs icon list

The first question I asked myself was: should I just hide the whole menu behind the classic “hamburger” icon or should I make all the menu’s items visible, like Instagram for instance?

The answer to this question actually came from a simple consideration: I had two interface elements that needed to coexist: the menu and the original “touch control” area marked by the “finger” icon. Showing only those two icons wasn’t really something that warmed my heart (see image below)…so I simply went for the second option: the icon list!

Just for the sake of it, here’s the hamburger-finger version that I discarded

Step 2: designing interaction

Now that I had the menu thingy figured out I could dive into the fun part: interaction! Initially this step was really a no-brainer since:

• the “finger” icon indicated the User he could swipe
• the other icons acted as the usual click-to-go buttons.

Simple, right?

Well, not really. Just when I finished the design and translated everything in code, I decided to put the new app to the test. I had noticed some days before that the game had caught my son’s attention, so why not? He’s only 4 years old but already knows the basic concepts of touch on a screen as a form of interaction. They’re digital natives after all. So I gave him the phone, briefly showed him how to play the game and then I just watched him and how he interacted with it. What I immediately noticed was that he could actually move the paddle, but didn’t really understand where to put his (really tiny) finger. It was as if he couldn’t really “feel” the touch area beneath the Pong playground and this brought his finger to wander around, sometimes missing the controls.

This made me think.

The touch control area was something very clear and obvious to me, but not to someone who never played the game.

That’s when I realized that I was probably biased: I wasn’t thinking of the User, I was thinking of Myself, the person the originally designed the interface and that obviously knew how it worked. And that’s the mistake we designers sometimes tend to make. User-centered design shouldn’t be just something you read about in books, it should be the first and last thing you think about when you design an interface. And this holds for web design but really for any type of design that involves a User, because

design after all should be the answer to a problem, and not the cause of other problems.

So, what could I do to fix this? I did probably the most simple, but effective thing you could think of: give the User feedback.

Feedback is an important part of interaction and it’s something we all perceive in a very natural way. So that’s why I thought of highlighting where the User’s finger actually hits the screen and creating a somewhat “virtual” boundary. Technically this translated in a grayish box that would initially show up under the “Play!” icon and would eventually move following the User’s finger if he started to swipe left or right (therefore starting the game).

In terms of code implementation, with a simple bezier of 0.1 seconds I added a subtle delay to the box following the finger to get a little more “natural” feeling:

transition: all .1s cubic-bezier(0.175, 0.885, 0.320, 1.275);

And voilà, this simple design change had a big impact on usability. The feedback provided to the User guided its finger on the control area, creating that “virtual” boundary my son didn’t have/perceive before. My son was actually able to play the game, consciously moving the paddle where he wanted it to move.

Success!

The new menu: the gray box moves with the user’s finger, giving immediate feedback and setting a “virtual” boundary

Of course this usability test can’t be considered complete, but what I wanted to emphasize with this article is the importance of understanding the User’s needs when designing interfaces, and asking yourself as a designer if those needs could actually differ from yours. Even when designing your personal website.

This article will probably be finished before my website update will be online, but feel free to stop by and play…any feedback is always precious!

Hope to see you here simoneviani.com!

Oh, by the way…thank you Lore, you deserve an icecream!