RealWorldUX - Page 3 of 8 - RealWorldUX helps aspiring to-be-UX designers and clients looking for a UX help

03/01/202103/01/2021

#55 Annoying micro-interaction

I recently came across an annoying micro-interaction.

Here’s a screenshot of that UI, which is a webinar shopping cart.

Let’s take a look at the interaction.

As you can see, clicking on the teal button selected that option, indicated by a checkbox being checked, and an item added to a shopping cart.

Clicking on the yellow button selected that option indicated by a checkbox being checked, and the second item in the shopping cart was removed.

But here are problems…

Problem 1: “Checkbox-like” icon used in a button gives a user a false impression that’s where you click to select the checkbox.

Problem 2: A button provides a proper visual feedback when anywhere other than the checkmark icon is clicked, but it doesn’t when the checkmark icon is clicked.

Problem 3: When I clicked the checkbox in the teal button twice, it did not turn to a checked status either, but I realized that the item actually got added twice to the shopping cart.

So how can we design this experience better?

I created 3 improved designs.

Improved design A: A proper checkbox with expected behaviors

This one uses a real checkbox that you can check or uncheck. Checking the checkbox adds the item to the shopping cart. Unchecking the checkbox removes the item from the shopping cart. The beauty of this design is that you don’t need “No thanks” button, which makes things simpler.

Improved design B: Radio buttons

This is old-school. Using a pair of radio buttons for two options makes it crystal clear that you can only choose one option.

Improved design C: This is closest to the original design.

Here, checkmark icons are used on buttons without looking like actual checkmarks.

None of these look fancy, but it works without confusions.

Visual design can be fancy and look cool, but that’s not the most important point.

The most important thing is to make things as easy and clear as possible for a user, so that a user can use it and complete a task with confidence.

Designers may be attempted to create cool fancy visuals.

And there’s nothing wrong with that, as long as it does not defeat the whole purpose of making things easier and clearer.for a user.

Check out YouTube version too.

Check out relevant article #51 When UI conventions are used the wrong way.

02/22/202102/22/2021

#54 Autopay setup nightmare

I recently tried to setup an auto-pay for one of my insurances.

Here’s “My Payments” screen. Under “Payment Preferences” there are two options, “Make it easy” and “I will log in and pay”.

The first option “Make it easy” has a description that says “Pay my bill automatically each time it is due”, so this is the option that I want to select in order to set up an autopay.

So I selected this option.

As soon as I selected this option by clicking the radio button, additional options appeared underneath.

After selecting my options, I clicked “CONTINUE” button.

After “Please wait…” message….., it took me to the next screen “Review your Order”.

This screen showed my billing address and credit card information in editable text input fields.

After entering and checking the information, I clicked “Finish” button.

The screen displayed a message “Payment Information Updated Your payment information has been successfully updated.” with my credit card information.

Although it looked like autopay setup was completed, I wasn’t 100% sure because the message on the screen did not say anything about autopay.

After I went to another page and came back to My Payments page, I was shocked to see that “Make it easy” option was not selected! The second option: “I will log in and pay” was still selected, as if nothing happened.

When I clicked the notification icon on the top right on a titlebar, I couldn’t get any information about whether the autopay was set successfully or not.

At this point, I don’t have any confirmation that the autopay was setup successfully or not.

I was annoyed and frustrated, because I spent a few minutes and went through the whole process to setup an autopay, only to find out at the end that it wasn’t set up.

I tried this process a few times, thinking that I might have missed something along the way. But it never worked.

So how can we design this experience better?

This is what I think it should be.

1. Message

After going through the whole process, instead of “Payment information updated” which is vague, it should show a clear message that says something like: “Autopay setup completed”.

In addition, the next payment date should clearly show the exact date, such as March 1st, 2021” instead of “1st of the Month”.

2. Payment Preferences selection

Payment preferences should show that “Make it easy” is selected, with “Save changes” button disabled.

3. Notification

A notification message should be clear without duplications between the main text and the sub text. Instead of a vague message “Change of Payment Information Notification…”, it should say “Autopay setup completed successfully.”

A clear feedback gives a user a confidence and a peace of mind. If it doesn’t, it gives a user a very bad experience.

To make feedback clear, typically it’s better for messages to be specific rather than generic.

But lot of times, engineers tend to want to make these messages to be generic so that they can minimize the number of different messages.

This is where a UX designer needs to advocate a user, and make sure that a product user experience does not cause any confusions or frustrations to its users.

Check out YouTube version too!

Here are other articles related to feedback of a service or a product.

#8 Amazon customer support chat: good and bad

#39 Amazon’s customer service chat experience part 2

01/19/202101/19/2021

#53 User experience of a food packing volunteer work

I recently had a chance to experience a food packing volunteer work at one of non-profit organizations. It was actually a really good user experience. In case of a volunteer work, it’s very similar to a service design for an amusement park such as Disneyland.

There are a few points that I can think of that made this a great experience.

OK, let’s take a closer look at one by one.

1 – Very well organized

Here is the user journey that I went through.

Signed up as a team of 5 people prior to the date
Showed up on that day and checked in on-site
Received a cap, stored personal items in a locker
Got an introduction presentation of the non-profit organization
Got an instruction on how to enter the site and what to do
Each team was called one after another
When called, washed hands thoroughly
Moved to an assigned station
Got on-site instruction
Started packing food with music
Count down started and stopped at 2 hour mark
Did a clean up based on the instruction
Left the station, disposed gloves and cap
Watched a closing presentation with results

As you can see, the entire journey was very well designed and organized.

Everything was clearly explained by the staff, so I understood what I was supposed to do through an every step of the way.

2 – Fun

Food packing process was laid in a game-like, teamwork setup.

5 people made up one team.

Each person was responsible for a different task.

The 1st person scooped soy and rice, and poured those into a funnel.

The second person scooped vegetable and vitamin powder, and poured those into the funnel.

The third person opened up a plastic food package, and placed it right underneath the funnel to receive ingredients.

The forth person weighed the package with filled ingredients.

The fifth person sealed the package and put it in a box.

As I got used to the task and the flow, the background music was playing loud, and I actually felt that the entire environment was filled with full of positive energy.

In such an environment, I started wanting to improve my performance and compete with other teams.

The entire journey and the overall experience were designed almost as an amusement park experience where I could truly immerse myself and enjoy the activity.

I did this non-stop for 2 hours.

It was like a fun game. It was like a workout.

Once I was done, I felt good with a sense of accomplishment.

And I actually felt a lot shorter than 2 hour.

3 – A clear result

Once the work was done, I was able to see the concrete result of the session I participated in.

During the closing presentation by the host, we were presented…

the number of boxes packed
the number of meals (bags) packed
how many kids are fed for a year
how much it costs in total

To be able to immediately see how much impact we were able to generate with our labors was very satisfying because I could feel that I contributed to the world in a very tangible way.

At the end, I felt that I wanted to come back again.

There are a lot of things that we can learn from this as UX designers.

Obviously the non-profit organization who organized this had a clear motivation and intention, wanting to have all the volunteers come back again to do more volunteer works for them.

They wanted their “customers” to come back.

They wanted to convert their “first time customers” into “returning customers”.

That’s why they worked hard to make sure that every step of their customer journey was a fun, easy to understand, delightful experience.

And this is exactly what we want for our customers to feel whenever they use products or services that we are designing, right?

Check out YouTube version too!

12/15/202012/15/2020

#52 Organizing links and cross-linking: keys to a successful team collaboration

“Can you send me the link again?”

We hear people saying this all the time.

As a UX designer, you probably create various artifacts such as:

UX process documentation in Google Slides, Confluence, PPT/etc
UX prototypes in Figma, Sketch, Adobe XD, invision
UX prototypes recorded as videos
Competitive analysis documents
Information architecture diagrams
Task flows
Graphic assets created in Illustrator and Photoshop
UX research plans and findings
Meeting notes

In this example, UX process document could serve as a primary document that you organize links within.

Add links to all other documents and prototypes in your UX process document.

Working as a UX designer means you are most likely part of a larger product team.

Which means there are probably important reference files and documents created by other people from different disciplines.

This may include things like…

Engineering design documents
Live engineering demo
Jira epics and stories
PRD (product requirement document)
MVP definition
Competitive marketing analysis
Customer meeting notes
Vision presentation
Relevant article links

In your UX process documentation, add links to all these relevant documents as well.

Also for primary documents such as engineering design document and PRD, MVP definition, ask the owners to add links back to your UX document as well.

This is what I mean by cross-linking.

With cross-linking enabled, UX process document, engineering design document, and PRD now have mutual links with each other for easy reference whenever needed.

If your team uses Jira, add links to all the relevant epics and stories in your UX document.

Also, in each relevant Jira epics and stories, add links back to your UX document, UX prototypes, UX research findings too.

Jira epics and stories should also have links back to engineering design documents and PRDs too.

Enabling more cross-linking between various different documents and artifacts across different disciplines substantially increase the visibility and collective productivity of a larger product team.

The more you do this meticulously, the better.

The more members do this, the better.

As you start to accumulate cross-linking, the value compounds, because it reduces people’s time searching for files and documents whenever needed because all those are one click away.

These days, we communicate via so many digital channels such as email, text messaging, SNS messaging, slack channels, and so on.

It’s convenient, it’s immediate. It works at that moment when a message is sent or shared.

But when that moment is gone, almost everything gets lost in infinity, making it almost impossible to retrieve later on.

Which is why, organizing links and cross-linking are the keys to effective, efficient, and productive team collaboration.

It might be a bit of a hassle first to get started.

But once you make it as part of your routine, once every team member makes it as part of her/his routine, everything will start to come together, and you will enjoy its compound effects as you further continue the practice!

Check out YouTube version too!

11/28/202011/28/2020

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

11/15/202011/15/2020

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

11/07/202011/07/2020

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

10/29/2020

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

09/21/202009/27/2020

#47 Visionary vs. incremental approach

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.

09/08/202009/06/2020

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

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