#60 Selecting time – learnings from Material Design time picker

So here is Material Design time picker. (below right)

Screenshots of Material Design time picker and date picker.

It’s typically paired with a date picker, which is a calendar-based (above left). The date picker works very well. But it’s the time picker that has problems.

Here’s how it works.

  1. You first pick an hour.
  2. As soon as you are done, the UI jumps to show minutes.
  3. You pick minutes, then you are done.

Here are the problems.

  • Circular analog clock representation is visually interesting, but does not work well, especially because hour and minute are separated.
A visual showing Material Design timer picker separates hour and minute.
  • An automatic transition from hour to minute feels forced, and you get confused especially at the first time.
An illustration showing that there's an automatic transition as soon as an hour is selected in Material Design timer picker.
  • As a result, it does not fully represent a clock with a long and short needles anymore that it initially took a queue from.
An illustration showing that a guy and a clock thinking that Material Design time picker is "clock-ish".
  • When you switch between hour and minute by clicking the number, “a clock needle” animates from 9 hour to 29 minute, but this animation does not mean anything.
An illustration showing that there's an animated effects when Material Design time picker shows selected hour and transitions to show a minute.

It could have been better if hour and minute are both represented simultaneously in the “clock”, so that it resembles how a real analog clock will look like on that time.

A prototype of Material Design time picker with a slight adjustment where hour and minute are shown simultaneously.

When you compare this to iOS calendar time input UI, I have to say iOS is much better. It allows a user to swipe up/down hour/min, or use 10-key to enter hour and minute altogether.

A screenshot of iOS time picker with a scroll wheel control.
iOS time picker with 10-key input.

Now, Material Design also has a different mobile time picker that you can directly type in, which is better than clock-like version.

A screenshot of Material Design time picker mobile, that allows a user to type in hour and minute.

So what is the lesson from these?

Entering time is such a basic, common things to do in various products and services.

  • The experience should be as straightforward and crystal-clear as possible.
  • The UI should use a metaphor that people are already familiar with.
  • It should not confuse a user. 

From this perspective, using a calendar for selecting a date is perfect. We are all used to using a calendar.

An illustration and a caption showing a calendar is something that people are familiar with.

But for time, it would be best if hour and minute are not too separated.

And for faster input, direct typing would probably be the fastest and easiest.

I think a scroll wheel for hour and minute separately is fine too. An hour only has 1-12, or 1-24, and minute only has 0-59, which is manageable.

An illustrative diagram of how hour and minute scroll wheel work.

Someone mentioned that Material Design time picker with a circular design is very “designery”.

An illustration showing a woman making a remark about Material Design time picker as "designery".

It’s an interesting remark.

I think it’s fair to say that many designers tend to get attracted to a circle as one of the most beautiful geometric shapes.

Analog clock is a manifestation of that as a symbolic representation of time.

An illustration of an analog clock shown as a symbolic representation of time, compared to digital clocks.

While it makes perfect sense to make time picker using an analog clock metaphor because it’s about time, ironically the result feels wonky.

This illustrates an interesting aspect of user experience. How you feel is what ultimately matters, rather than the pure logic that brought you to your design solution in the first place.

An illustration and a caption saying "how you feel is what ultimately matters, rather than the pure logic that brought you to your design solution in the first place.

I respect the designer who created this, that she or he, or the team had a courage to try this type of design.

But at the end of the day, this is not the most intuitive, easy to use design, even though it may look interesting and unique on its surface.


Check out YouTube version too!

#59 Auto-save UX

Illustration showing how auto-save is working in the cloud, and that command + S is no longer needed to manually save files.

Auto-save is definitely a cool, very convenient feature.

But at the same time, it gets tricky.

Sometimes, you are not exactly sure when the auto-save actually happened.

Gmail, Google Docs, Medium, Figma all have auto-save features.

Google Drive,Gmail and Medium do fairly good jobs showing a subtle icon that changes from Saving… to Saved, then just an icon on a header.

Interesting thing is, both enable auto-save while you are making changes to your document or an article, but settings don’t have auto-save, and use Save buttons instead.

On the other hand, Figma does not show any message when it’s auto-saving.

But it does show a message when an auto-save did not occur for some reason such as when you are disconnected from the internet.

It’s kind of an opposite approach, with a stance that it’s always saving, and it only lets a user know when it’s not.


Since we are “always connected” to the internet, this Figma’s approach is quite aligned to today’s world.

But it does make me feel a bit nervous when I have to work offline on the airplane, or when I lose the internet connection.

According to Figma, all those unsaved changes are stored in a web browser cache.


Ever since I started using Figma, auto-save worked great for the most part.

Now I’m free from keyboard shortcut a thousand times a day that I used to do.

But at the same time, having my master files only in the cloud makes me feel nervous.

Sometimes I feel like I want to make a local “backup” of my important files just to be safe.

I can actually do this by saving a Figma file as .fig file on to my desktop.

But the problem is, this downloaded Figma file will never have a full feature when I am offline.

On the contrary, Google takes good care of this aspect.

I can download a Google Doc file as a Word file.

I can download Google Sheet file as an Excel file, and downloaded files work perfectly fine on my computer without the internet connection.


While auto-save is super convenient and removed a pain point of having to manually save files all the time , it introduced a new prerequisite: the internet connection.

Now, I’m more than ever dependent on the internet connection!

And that makes me wonder if it’s a good thing or not.


As UX designers, we create new experiences.

When we do, we need to be mindful about how we balance things that users are already familiar with vs. something new.

What are pros and cons for both old experience vs new experience you are about to introduce to the world?

Changing something that users are already so used to doing may often bring up a lot of frustrations and push backs.


Check out YouTube version too!

#58 Are we too obsessed with metrics?

We live in a world where many things have realtime analytics already put in place. I’m not against any of these. In fact, I love these. I can gather a lot of insights out of these metrics. But we have to be careful about being too much caught up in metrics, or start chasing metrics too much.

I do bodyweight trainings regularly.

Bodyweight training is exercise such as pushups and pull-ups, primarily using your own body weight instead of using gym machines.

When I do pushups for example, I set a goal such as 

“Do 10 pushups as one set, do 3 sets with 30 second intervals between sets.”

My actual record on the first day might be:

  • Set 1: 10
  • Set 2: 9
  • Set 3: 8

On the second day, I might get:

  • Set 1: 10
  • Set 2: 10
  • Set 3: 10

On its surface, I did better the 2nd day with 100% completion rate.

Or is it?


To answer this question accurately, I need to dig deeper, and ask these qualitative questions.

  • Did I do each rep with a correct form?
  • Did I do each rep without using a momentum?
  • Did I do each rep with enough range of motion?
  • Did I do each rep with focusing on a target muscle to do the primary work?

If my answer is no to these questions, my second day’s metric becomes meaningless.

If I achieved those numbers by using momentums for example, that means I only did a very easy incomplete version of pushups.

I did not give my muscle enough stress that a proper pushups is supposed to provide.

I am completely missing out of great benefits that I could have gotten if I did it right.


Metrics are powerful and easy to compare. But metrics could be deceiving too.

A lot of times, we tend to get caught up in metrics.

And because of the nature of metrics being so simple and easy to compare, we sometimes start chasing just metrics.

When “just chasing metrics” becomes a primary goal, that’s where I need to ask myself, what is the most important thing that I want to achieve.

In the previous bodyweight training example, achieving 10 reps per set by itself does not mean anything, if each rep is done improperly.

Goals are set to be something that I aim towards when performing the exercise.

But the focus should always be maintaining my posture, form and do each move as correct as possible so that it puts the stress to the targeted muscle as much as possible.

It does not matter if I end up only being able to do 7 or 8 reps as a result of focusing on quality of each rep.

Actually that is way better than just achieving 10 reps by using momentums every time.

Overtime, I slowly realized the reality that being too obsessed with metrics is meaningless.

To me, this is quite an eye-opening, interesting realization.


I think this applies to not only training, but also many things.

Metrics are mere indicators.

It gives me what to aim towards.

It helps me stay focused.

It helps me see my progress, patterns and trends overtime.

Nothing more. Nothing less.

The most important thing is always quality, not quantity.

With that said, I will always aim towards some sort of quantitative metrics in order to improve and grow towards a quality I want to achieve, like the body weight training example.

To do so, most likely I will end up accumulating quantity to improve my quality too.

All these will help me constantly improve and grow to a better version of myself.

And that’s what matters.


Check out YouTube version too!

#57 Being empathetic – one of great UX designer’s traits

The author with a hand-drawn title illustrations

One of critical traits to be a great UX designer is being empathetic to a user.

But this trait, translates to how you behave in your day to day life as a good citizen too.

Let me give you an example.

I drop my kid to a school in the morning. Typically, that means you are in the line of cars in front of the school waiting to reach the dropping zone.

Once you reach to the dropping zone, that’s where you can stop your car, drop your kid, then move on.

This simple process gets tricky when you have many busy parents dropping their kids, each car with a different pace.

The school gives parents a general procedure in terms of how to do this efficiently so that it doesn’t cause a traffic jam.

But that requires everyone conforming to that procedure.

Obviously, everyone wants their own kid to be on time.

Probably every parent have busy schedule so that they want to get the job done as soon as possible so she/he can go to the next scheduled event.

And the thing about the official dropping zone is that if you drive all the way to the front edge, its further away from the school entrance.

Naturally, most people don’t want to scooch over all the way to the front, because that make their kids having to walk a longer distance which could result in tardy.

As a result, parents start dropping kids before reaching the dropping zone.

This leaves the actual dropping zone empty and wide open, causing all the cars behind having to wait until these “flying” cars to open up their spaces.

Some drivers get frustrated with this, and sometimes pass by these cars to get to the wide open dropping zone in front of them.

Other drivers may start dropping their kids way before the dropping zone.

Observing this as one of parents, it reminds me of one of great UX designer’s traits “being empathetic”.

In this context, being empathetic translates to being empathetic to other parents after you.

When I think about this from a UX designer’s perspective, it’s an interesting UX problem.

There are various factors that come into play.

  • In the morning, everyone is busy
  • Many people tend to arrive at school right before the bell rings
  • Most people want to park their cars closest to the school gate
  • Once you drop your kid, your mind is filled with your next schedule, so that you don’t care about people behind you

As a human beings, it’s probably impossible to remove your own ego completely.

But still, if everyone becomes slightly more compassionate to others, the situation would improve dramatically.

And I’m glad to see some improvements over time.

When this happens, I feel great.

This kind of impression is something that we as a UX designer wants to leave to our users when they use a product that we design.


Check out YouTube version too.

Also check out #40 Twelve traits of a great UX designer.

Here’s my Medium article version on 12 traits of a great UX designer.

#56 Useful, usable, delightful

Illustrated title of useful, usable, delightful

It’s been decades since the UX has become a mainstream, and essential part of product development.

But even as of today, many people seem to have limited views of what UX is.

Some people might think UX is just making things pretty. Other people might think UX is about making wireframes. Other people might think UX is just about usability, and use the term usability and UX interchangeably. 

All those are part of UX.

The field of UX is pretty broad.

One of simple ways to help people understand the UX better is to visualize UX layers in concentric circles like below. Useful, usable, delightful (or desirable). This shows 3 most important, fundamental values of UX.

Useful

This is the most fundamental and important part of a product or a service. A product needs to be useful. A product needs to provide a value that solves a user’s particular problem. In reality this might not be something a UX designer is part of in defining. By the time a UX designer is brought in, this might be already defined by a PM (product manager).

Usable

This is the next most important aspect of UX. The product experience should be easy to use. Rather, it should be as easy and clear as possible. This is where usability comes in to play. In many cases, this is where a UX designer typically focuses on the most, by creating wireframes, UX flows, prototypes, and conducting user tests.

But that’s not all.

Delightful

The most outer layer is being delightful, or desirable. Ideally, a product should not only be useful and easy to use, but also delightful to use. This is where things like pleasing visual design and smooth animation come in to play.

But making things fancy and pretty is just one aspect of being delightful.

The most valuable “delight” is achieved, when everything works flawlessly without a user even noticing it, because everything works so intuitively.

This includes the clarity of the overall UX flow without any confusions.

Information organization.

A clear feedback through effective micro-interactions that constantly give you visual feedback on actions that you take.

Clear messages that give you confidence and a peace of mind throughout the process.

And so on.

The next time you see someone in your team who seems to have a limited understanding of UX, explaining about these 3 layers might help that person further understand the value of UX.


Check out YouTube version too.

Previous articles on delightful.

#9 Delight from Office Depot LIFT & PRESS envelope

#29 Delightful OOBE from a boring home product

#55 Annoying micro-interaction

A stick figure person annoyed by a 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.

#54 Autopay setup nightmare

A character shocked with how the site handled autopay setup.

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

#53 User experience of a food packing volunteer work

Author in front of a blurred image of a volunteer session result presentation screen

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.

  1. Signed up as a team of 5 people prior to the date
  2. Showed up on that day and checked in on-site
  3. Received a cap, stored personal items in a locker
  4. Got an introduction presentation of the non-profit organization
  5. Got an instruction on how to enter the site and what to do
  6. Each team was called one after another 
  7. When called, washed hands thoroughly
  8. Moved to an assigned station
  9. Got on-site instruction
  10. Started packing food with music
  11. Count down started and stopped at 2 hour mark
  12. Did a clean up based on the instruction
  13. Left the station, disposed gloves and cap
  14. 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!

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

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