#51 When UI conventions are used the wrong way

While digital interactive products have shorter history compared to physical products, we have learned so many UI conventions over the course of time as we interact with various products. Which is why whenever we come across a digital product with UI conventions used the wrong way, we get confused, get frustrated, and get an unpleasant experience.

Here’s one of such examples which I came across, which is part of a wizard to change an address on one of public sector websites.

At the end of the wizard, it asks you whether you want to use your new  address as voting address, as well as whether you are a US citizen or not.

This screenshot is a review or a confirmation screen on what you selected for those two questions.

It’s a fairly simple screen, but has several issues.

Let’s take a look at those one by one.

First, an Edit button right after a sentence that says “Check this box if you do not want your new address used for voter registration purposes” seems like you can edit this sentence. But this is a sentence to which you mark a checkmark based upon, which brings up the next issue.

There’s a checkbox below this sentence. A checkbox is usually clickable, but this one is not clickable. This checkbox is here to show its “unchecked status” because you did not click it in the previous screen.

Next, you have the 2nd Edit button after “US Citizen”. Again at a first glance, it looks like when you click this 2nd Edit button, you can edit “US Citizen” to something else, and because of that, “US Citizen” looks like your answer.

But when you take a closer look, there’s a dropdown menu with a text label “No”.

At this point, you realize that this is your answer, and “US Citizen” is more like a question statement that you answered “No” for.


So how can we improve this?

Here’s the improved design that I created.

There are two information blocks, each block consists of a question and an answer.

As you can see, the blue area is the title section which is about a question, the orange area is the answer section, which is your answer to the questions above.

Here’s a breakdown of information block.

The blue title section just have a title.

But the orange answer section consists of a few elements.

1 – “Your answer:”

2 – Edit button

3 – The actual answer “I allow my new address used for voter registration purposes.

I added “Your answer” and converted the checkbox answer into a sentence answer, which reads “I allow my new address used for. Voter registration purposes.”

As a result, it made things clearer in terms of what was asked and how you responded, so that you can accurately review your answers.

When we take a look at just the information block structure, it becomes clear that there are title section and answer section, and edit button clearly belongs to answer section.

When the structure between original design and the improved design are compared side by side, the difference is pretty obvious that the improved design has much clearer, simpler structure.


Because design is about an overall system, not just a single screen, improving the review screen leads to improving other relevant screens such as voting address screen, and US citizen screen.

Here’s the original design of the voting address screen.

Here’s the improved design, extending the same principle from the review screen design study, which is to organize it into question (or title) to answer structure.

Similarly, here’s the original design of the US citizen screen.

And here’s the improved design of the US citizenship screen.

We only went through just 3 screens, but the actual wizard has more steps and screens.

In reality, the entire wizard needs to be studied and designed together.

I’m not going to cover that in this video, but you get the point!


Check out YouTube version here.

Here’s another article on UI conventions.

#50 Organizing information visually – a subtle change makes a huge difference

While I was ordering food on Panera Bread website, I noticed a few things.

Overall the website design was fairly clean, but as I was scrolling their menu, I felt something was slightly off.

Because images of sandwiches are so strong that those grab my attention first.

Because of that, my visual scanning goes from top to bottom naturally starting from images.

Right below images, there are a few options like the size, customize, “Add item” button.

These options are well grouped with its corresponding image because of the background colors and the fact that the colored section is directly attached to the  bottom of the image.

As you move your focus further down, you see menu item names.

Initially I was expecting that these are the item names for the photos that I already scanned through.

But then I realized that these item names are actually not for the above images. These are for the next new images right below the names.

Each menu item block consists of an item title, an image, then options including “Add item” button.

But the way its designed visually does not help you see this structure in the easiest way possible.

The item name on a white background somehow makes it “get lost” when you glance the whole page.

I think this is caused by the item name background having the same background color as the overall page background, and only having a grey stroke around it to separate it from the page background makes the item name area as a whole blend in as part of the background.

As a result, the parts with strong color and density, which are images and options parts, popup from the rest, detached from their item names.

To solve this problem, you can either put a slight shade to the item title section, or the page background, so that the visual grouping becomes more visible for each information block.

Here’s an example of putting a slight shade to the item title section.

As you can see, each information block immediately comes together as one block including the title, compared to the original design.

The same effect can be achieved even more dramatically by putting a shade to the page background.

These are subtle differences in visual treatment, but it makes a huge difference in organizing information blocks visually and effectively.

As a result, you lower a viewer’s cognitive load, and makes information easier to glance.


Check out YouTube version too.

#49 Why did google change their cloud app icon design?

I noticed recently that Google changed some of their cloud app icons, including Gmail, Calendar, Meet, and Drive.

The one on the left is the previous design, the one on the right is the new design in question.

As you can see, the new icons Gmail, Calendar, Meet and Drive are visually consistent with other major ones such as Maps, Search, Photos, and News, using all 4 brand colors that Google uses.

Obviously this makes everything extremely consistent visually, right?

Unfortunately, because of everything being so visually consistent and harmonized with each other, it makes it much harder to visually distinguish each icon from the others.

This applies to finding an app within the app launcher, as well as finding the right tab among browser tabs.

This might be a small detail within a larger context of Google cloud apps being very useful overall.

But when you compare the old design and the new design, it’s pretty obvious that the old design is much easier to spot and differentiate each app because each app had a unique color.


It’s quite a disappointment to see something like this coming out from Google, who is considered as one of leaders in the tech world as well as the UX world.

Is that because they have grown too big?

This is actually a really good example of how being more consistent visually could harm usability in some case.

It also brings up a good question about balancing a consistency and differentiation, and how it affects not only branding but also usability, glance-ability, and find-ability.


Check out YouTube version too.

#48 UI conventions and user expectations

For the last few decades, we learned various UI conventions as we use more and more digital user interfaces.

These include buttons, dropdown menus, radio buttons, checkboxes, tabs, wizard, popup, back buttons, X icons, text input field, searchbox, toggle switches, progress bars, sliders, scroll bars, and so on.

Designers want to try new things. Sometimes, or often times, they tend to reinvent the wheel.

Because design is always about the user, not the designer, creating things that are easy for a user to understand and use is the most important thing front and center over creating something new.

While these UI conventions such as radio buttons and checkboxes may feel old, outdated and nothing new and exciting, these are still some of the most well understood UI elements. It works, and most people understand how it works.

I’m not saying that we must use every possible UI conventions for everything. 

As long as the product is very easy to understand, and very easy to use, it doesn’t matter whether you use UI conventions or something new.

But you should not underestimate the power of UI conventions, and how that directly impacts a user’s understanding of the digital user interface that you are designing.


When you want to come up with innovative design concepts, the focus should be more about big ideas rather than how you make selections using radio buttons, checkboxes, dropdown menus or whatever.

That innovative design concept should enable something that was not possible before, in terms of a feature, or a user experience, or a delight that you get as a result of these.

In order to achieve these bigger goals, you need to use various building blocks, which are things like dropdown menus, checkboxes, and so on.

In order to stay focused on achieving bigger goals, you should not be spending too much of your efforts in reinventing the wheels.

Because the more you introduce new things, the more chances of a user getting confused, which may result in having a user stuck in how to get to the next screen, or how to make selection, before even validating your bigger ideas that you want to introduce.

At the end of the day, it comes down to balancing things under a given context, and concentrate your focus towards the most important thing.

To do so effectively and efficiently, using UI conventions helps reducing user’s confusion because they are familiar with what to do with those UI conventions.

In most cases, the most important thing in your UX project will not be reinventing already widely understood UI conventions, but something bigger by using those.


Check out YouTube version too.

#47 Visionary vs. incremental approach

The author looking ahead with a visionary approach while taking incremental steps.

In a product development team, you tend to see roughly two types of approaches.visionary approach, which are 1 – a visionary approach and 2- an incremental approach.

#1 tends to be taken by some product managers and UX designers, while #2 tends to be taken by many engineers.

From my own experience as a UX designer, I’d say both approaches are important for a balanced product development. As a UX designer, you need to be exposed to both approach and perspective, ideally in any projects.

Now of course, a project scope may define which approach needs to be more primary than the other.

For example, an advanced design concept project looking into the future may require completely a visionary approach.

And if you are working on a very tight deadline to launch an enhanced version of an already existing product, you may need to focus primarily on incremental approach.


Visionary approach

A visionary approach requires you to be more open to new ideas, not limited by current constraints, and encourage out of the box thinking towards what is an ideal user experience for a given product or a service.

If you have never worked on such a project and always been working on a project where all the requirements are set and given to you, you might feel uncomfortable first as nothing is defined.

In this case, because nothing is defined for you, you as a UX designer is the one who needs to make bunch of assumptions and hypotheses to build concepts.

While this is a great opportunity to unleash your creativity and expand your ability to create something out of nothing, it could get too blue-sky and ungrounded.


Incremental approach

On the other hand, an incremental approach tends to get yourself locked in to a very limited short-sighted perspective. 

It’s easier to build some minor enhancements based on an already existing product.

And you can still build something meaningful out of this approach for sure.

In reality, many ongoing projects fall under this category.

But even in this kind of situation with a tight deadline, it would still be worth taking time and putting things in perspective, and try to incorporate an essence of a visionary approach, to at least think about what would be the next step, the next next step after the current version of the product.

This may help not getting trapped in a vicious cycle of technical debts, where a short-sighted temporary solution piling up overtime and making things harder to change.


When both approaches connect together

Once a visionary approach and an incremental approach connect together in form of a concrete roadmap with milestones, a product strategy becomes much more powerful, solid and meaningful.

At that point, you will have a clear incremental steps that you can take from today to reach and achieve the vision.

A vision without steps to get there is meaningless.

An incremental approach without a vision does not have a future.


Check out YouTube version too.

#46 Value of hand-drawn sketches in a UX process

An image of the author drawing on a notebook gets drawn by an illustration guy.

Today, most UX designers use UX design and prototype software programs such as Sketch, Figma, InVision, Adobe XD and so on. While these are great tools to quickly create click through prototypes, and at some point, you will have to use these digital tools in your UX design process, I would still recommend doing some hand-drawn sketches in early stages, especially at the beginning of the process.

Why?

So that you can completely free yourself from various constrains, including software constraints. These could also be constraints towards the current version of a product you are designing for. 

As soon as you start creating something in a digital UX design software programs, you start getting deep into visual design details of every single elements that you create.

This tends to take your attention away from a bigger picture.

Of course it depends on the scope and the context of your project.

But in general from my own experience, it tends to work better if you start with a hand-drawn sketch first, so that you can minimize initial distractions and constraints.

Now it is true that hand-drawn sketches also have constraints too.

For example, if you have drawn a sketch of one screen, and want to create a sketch of the second screen with a popup overlaid on top of the first screen, it’s a duplicated effort if you were to hand-draw everything all over again.

This is where a hybrid approach can come into rescue. We can get creative and use technology wisely without losing the original intent.

In this case, you can hand-draw just the popup portion for your second screen.

Then, you scan both of your hand-drawn sketches, and composite those digitally on your computer.

You can take this approach and make the whole process a lot more productive, while still preserving the constraint-free nature of the hand-drawn sketches.

It’s nothing special, really simple.

But it’s a pretty efficient and effective way to quickly visualize ideas.

The result could become a scenario storyboard, or even a rough video scenario if put into a video editing software such as iMovie.


Because UX designers come from all the different backgrounds, some of you may not necessarily feel too comfortable doing hand-drawn sketches.

But don’t worry, that’s totally fine.

We don’t ned to be an excellent artist to do so.

The most important thing is to visualize ideas so that it becomes communicative to others.

As long as it serves this purpose, it’s totally fine to have crappy drawings.

In fact, the nature of hand-drawn sketches emphasizes the fact that it’s still a very early idea, and nothing is set it stone.

This allows all the audiences to lower their guards and resistance to something new, which is a stark difference compared to showing a visually finished-looking early concepts, which sometimes may trigger more resistance from its audience.

In a nutshell, a hand-drawn approach and a hybrid approach allows everyone including a UX designer who’s doing the sketches to be more open to new ideas and new possibilities!


Check out YouTube version too.

Also, check out “Magic of being hands-on“.

#45 UX designer is a visual facilitator

An illustration of the author's head open and absorbing various input from other people and the world

In today’s fast-paced, complex world of interactive products, designers tasks are no longer done by an individual contributor anymore.

It’s a highly collaborative team effort, including not only UX designers but also interaction designers, visual designers, product managers, engineers QA folks, marketing folks and so on.

Individual contribution is still important, but almost always in the context of team environment.

Sharing, absorbing people’s comments and ideas including your own, and then iterating the original ideas into something new and better quickly becomes the key and critical factor for a success.

So what do these all mean to you as a UX designer?

This means that you should always be open to various inputs from various people, and be prepared for constantly iterating your ideas.

You should always be taking notes, voice memos, pictures, screenshots/etc for any bits and pieces of ideas.

These ideas not only come in during proper channels such as work emails and work slack messages.

It could come through personal chats, messaging, emails from casual small talks in person or via zoom calls/etc.

It could also come to you when you are not officially in a work mode, or not even in front of your desk or a computer.

In fact, a lot of good ideas come to you when you are away from your work desk or a computer, such as when you are in a restroom, when you are taking a shower, running, walking, doing yoga, doing an exercise, doing dishes, cleaning your rooms, riding your bike, while driving, and so on.

In today’s world where we are constantly being overloaded by too much information, we sometimes feel that almost every possible idea has been tried out by many people so many times at various points in time around the world.

While this may be true to certain extent, it is also true that the “same idea” will always end up somewhat different when developed by different group of people in a different context.

And every single context for every single product or service will always be different to certain extent, even though some of them might share very similar conditions.

Good ideas are often a result of capturing various interesting ideas from various channels and combine those, and iterate those into something cohesive, by fitting those into the right mix in the most context-appropriate way to solve a particular problem it is intended to solve.

At this point, a UX designer is more like a facilitator, an organizer, who can  weave various ideas into one cohesive visual story quickly.

Also, in today’s highly collaborative team environment, the notion of “who’s idea is this?” is getting less and less relevant, as things are almost always the result of multiple people’s contributions, even though a UX designer in the team might be the one who put together the team’s ideas visually.

This line of thinking will help set you free from your own ego towards the ownership of ideas, so that you become a better team player.


Check out YouTube version too!

#44 UX of public restroom door locks

Author questioning various public restroom keys

Previously I talked about user experience of public restrooms, focusing on two aspects, 1 – many people did not wash their hands, 2 – some people did not flush.

This time, I want to talk about door lock systems in public restrooms.

So there are many different types of door locks across various public restrooms.

A small knob or a button on the door handle,

a separate knob under the door handle,

a simple horizontal bar that you can slide,

an auto-lock that you cannot open from the outside,

including the one that you have to type in a code to enter.

In some gas stations or super markets, you have to ask for a key or a code at a cashier in the first place.


The door locks for public restrooms are critical part of the user experience in various ways.

1 – You need a clear visual confirmation that a door is locked when you are inside, so that you feel safe, without having to worry about someone accidentally open the door.

Some public restrooms have door lock systems that don’t work well, or in a worst case, doesn’t work at all. This is a nightmare. 

There are also some locks that are hard to visually confirm whether it’s in a locked status or not.

When you come across this type of obscure door lock, it’s a blow on your piece of mind, which I really personally hate.

A restroom door lock should absolutely be deadly obvious and simple to see if it’s locked or not, both from inside and outside.


2 – You want to minimize a physical contact to door knobs, locks and keys if there’s any.

According to some research, public restroom door knobs are some of the most germ-infested objects.

Now that the world is in pandemic, this becomes even more concerning.

The thing about the door knobs and the door locks are that you have to touch those after washing your hands.


3 – You want to know if someone is inside or not from the outside

Many public restrooms don’t have clear visual indicators whether its currently occupied or not. This ends up people keep trying to open the door, only to realize that it’s locked.  This means you have to touch the door knob more than needed.

Also, if you are already inside and hear someone trying to open the door, this is not a good experience even though the door is fully locked.


These bring up an interesting UX question:

Can we create a door and a door lock system with a super-clear visual indicator if someone is using it or not, and the one that doesn’t require using our hands to lock and unlock?

While I don’t have all the answers to this, one potential idea that I can think of is something like this, inspired by a foot switch for floor lamps.

What if we make a public restroom door lock with a foot switch?

You just have a locking bar installed towards the bottom of a door that moves sideways using your foot.

Also, an indicator should appear on the outside of the door so that you can clearly see if someone is in or not.

This should solve those three problems that I pointed out earlier, so that …

1 – The locking bar gives you a visual conformation and peace of mind that it’s in a locked status when you are inside

2 – You can lock/unlock with a foot switch, without touching it with your hands. 

3 – You can clearly see “occupied status” visually from the outside.


I haven’t thought through this, so I’m sure that there are bunch of problems if you were to actually implement this in the most user-friendly way possible.

But it’s an interesting ideation exercise to take one of everyday life’s physical UX problems, and try to come up with solution ideas.

You should try these too!

It may give you some fresh ideas and inspirations, especially if you mostly deal with digital user experiences.


Check out YouTube version too.

Here’s another article on a user experience of public restrooms.

#43 Is redesign of a popular product good for your portfolio?

The author questioning about a redesign of a popular product as part of a UX portfolio

Many people tend to jump right into a redesign project of popular products and services such as Spotify or iPad for example.

While there’s nothing wrong with this and it may sound cool on its surface, this approach is not the most effective way to work on your own UX project to be put in your portfolio.

Framing a project as “redesign of XYZ” is basically generalizing your project by claiming that the core focus of your project is the “redesign”.

But the term “redesign” is very generic and bland.

As a result, it gives a very generic impression to its audience that you don’t have a clear focus or intention on your project.

Redesign sounds like you just did a visual refresh of the given product or service without putting much thoughts on it.

UX is all about solving user’s problem. 

From a hiring manager’s perspective, a project that focuses on solving a specific problem is much more insightful and valuable to see how a candidate tackled the problem.

Framing your own project is important part of your UX work, especially if it’s a project that you created on your own.

So framing your project as generic as “redesign of XYZ” is probably the last thing that you would want to do.

To me,  framing your project as “redesign” is almost the same as saying you didn’t put much thoughts on your project, and you don’t exactly understand what UX is.

I would strongly recommend not to frame your project as “redesign of something”.

Instead, be specific on what UX problem you are trying to solve.

Look around you, and you will find quite a few products or services that you use on a regular basis that have UX problems that you always get frustrated with. 

Picking one of such problems and defining it clearly is a good way to start your new project, focusing on a very specific problem.

It’s perfectly fine if you went through this exercise and you ended up choosing a popular product as a result of it, as long as you have a clear focus on what problem to solve, and define it clearly.


See YouTube version too.

Also check out How to work on your own UX project.

#42 How to come up with good UX ideas

The author tries to come up with good UX ideas

Good UX ideas and concepts always come down to solving user’s problems. 

A cool, super-innovative idea that doesn’t solve a user’s problem doesn’t provide much value.

Which takes us to look into users. 

What are the given user’s problems? 

When we think about user’s problems, we need to be open and flexible to the definition of “user’s problems”. 

User’s problems are not necessarily just about “doing a task A in product B is a pain in the ass” type of concrete, visible things. 

It could be something invisible, or something more fundamental.

So how do you identify those problems?

It comes down to talking to users, observing users, asking questions to users, and carefully understanding user’s frustrations and desires both through what they say AND what they don’t say but kind of hint that they desire. 

All these can be done through an exploratory user research. 

Exploratory user research does not have to be formally conducted. 

You can do it through a simple 1 on 1 interview, as long as you have key questions and some stimuli prepared.

You can even do it in an informal way if there’s a tight budget and schedule constrains.

But it’s extremely important to talk to users or someone familiar with user’s tasks and needs.

Important thing is that you keep asking questions to drill down to the core of a problem. And you can start from anywhere.

For example, if you have a specific report page of a particular web application that you want to improve, the questions are: 

  • How do users currently use this report page? 
  • What value does it give to users? 
  • What concrete actions can users take from this report?

… and so on and so on.

Don’t focus on trying to come up with good ideas. 

Rather, focus on user’s problems empathetically.

Understand users’ problems, distill those problems in to core problems, and try to solve those core problems in the simplest way possible.

UX designers are in a way privileged to have an ability to visualize abstract visions and ideas into something concrete such as design sketches, prototypes, and scenario movies to drive things forward. 

And when you visualize ideas and concepts, the important thing is a big picture. 

This big picture goes back to a fundamental user’s problem that I mentioned previously.

Visualization always stimulates people, and help them further think through things that they never thought of if it were not visualized.

As long as you are clear with the user’s problem, you should be fine.

The very first version of your visualization might be crappy, but the most important thing is that you started. 

Once started, a positive feedback loop kicks in, and that gets you moving. 

I wrote an article on this called “magic of being hands-on”. Check that out too!

Check out YouTube version too.