#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.


#41 UX of emptying dyson dust bin

The author holding dyson dust bin.

Dyson is one of the most popular brands in home vacuum cleaner category. I’ve been a Dyson customer for the past decades. The model that we currently use in our household is called “dyson cinetic big ball animal +”. It’s the one without washable filters. Overall, I highly respect Dyson as a company, as a brand, who innovated the product category by introducing bag-less vacuum that didn’t lose a suction power.

According to Dyson, 

“It is so efficient it captures the dust that blocks cyclones and clog filters, so it doesn’t lose suction.”

Still I get frustrated whenever I clean up the dust bin.

Why?

Because I feel like I can never get rid of all the dust inside the cyclone!

Obviously, a large chunk of dust that fills up the bin can easily be removed when you detach the dust bin, open the lid and drop the dust collected.

The plastic bin itself is good.

It’s detachable from the cyclone, and you can actually wash it with water.

But the problem is, the cyclone part itself.

When you use a brush to scrape off dust, and tap on the cyclone to get the dust out from the inside, the dust keeps falling down and it never seems to stop.

Because the dust particles are so tiny, it seems that millions of dust particles are sitting inside the cyclone at all times which never seem to clear.

Those may not be clogging the cyclone because each dust particle is so tiny, and the cyclone may still be working fine, but the fact that all these particles never seem to go away kind of bothers me.

I wish that dyson comes up with a way to clean its own cyclone itself, potentially by reversing the direction from suction to blowing mode so that it can get out all the tiny dust particles out of its cyclone system, for example.

The idea of a machine having its own cleaning mode is nothing new.

We see those in dishwashers, ovens, juicers and so on. 

An air pump to inflate an air mattress for camping has a reverse mode to deflate the mattress too.

The same concept could potentially be applied to a vacuum cleaner.

I know that this could be a big challenge to do in a vacuum cleaner because if you activate it by accident, it will be a disaster, spreading all the tiny dust into the room.

But it’s an interesting problem to solve.

Maybe it comes with a special cleaning bin that you can attach the vacuum hose onto, and only after securely attaching the special cleaning bin, a cleaning mode can be activated to blow out dust inside the cyclone to the cleaning bin.

The cleaning bin should be a simple bin that you can wash with water.

Now this might be adding another extra hardware piece.

And I’m not an engineer, so I don’t know if this is even possible from a technical point of view.

But it might be worth it if it works well.

Or they might be already working on it. Who knows?

If they solve this problem, I will be a lot happier!

As a UX designer, especially if you primarily work on digital products, it’s an interesting exercise to think about UX problems that we experience on a physical product like this.

This may seem like a trivial thing, but when you think about the end to end user experience of a vacuum cleaner, cleaning the bin, cleaning the vacuum itself is part of that larger end to end user experience.

In a way, its kind of ironical if a vacuum cleaner which is meant to clean things cannot clean itself.


Check out YouTube version too.