1

I am building a tool to convert between local times across multiples locations: cities, airports, timezones. Right now, the site updates the local time every second. I want to be able to let users select a local time for a particular city and have the rest of the locations update accordingly. For example, if the user has selected New York City, Lisbon, and Singapore, they should be able to select 4PM Singapore and the rest of the locations should have their local times updated. The result would be 3AM for New York and 8AM Lisbon.

Question

How can I update the UX to let users select a time for a given location?

Existing layout

original

Proposed

enter image description here

3
  • Please try to ask one specific question without requesting a review of a current design. See also the help center.
    – jazZRo
    Commented Jan 1 at 19:47
  • @jazZRo Updated the post with an explicit question
    – Jrom
    Commented Jan 1 at 21:05
  • 1
    What is the purple time besides Singapore, and why are users are going to need and use this? If the current (large) time is updated every second, why has it changed in the proposed example? Or is the purple border around Singapore not a selection? So can you clarify the design and the context a bit more?
    – jazZRo
    Commented Jan 2 at 17:26

1 Answer 1

1

I think this is one of those situations when trying to be clever and create a brand new solution will only create more confusion.

My suggestion is to start with a basic interface (basic as interaction) that can do all that is needed, and after that, make small changes and see how your users react (A/B testing).

Based on that, from my understanding, your interface should include:

  1. A time picker for choosing the time to be converted

  2. A combobox (dropdown with search) for choosing the timezone

  3. A toggle button for using the current time and disabling the previous 2 inputs

  4. A text element for displaying the selected time and timezone

  5. A results list of text elements for displaying the selected timezones with the converted time for each

  6. A combobox for adding new timezones to the results list

  7. A delete button for each timezone in the results list that removes that timezone

  8. A delete-all button for removing all timezones from the results list

All these UI elements can be displayed on a single screen, on mobile resolution. The order in which I mentioned them should be more or less the order in which they appear on the page.

After you have the basic functionality, you can start making tweaks and see if they increase the satisfaction of your users.

The share button should be displayed separately from the converter interface and it should be more obvious (maybe a bigger and filled button). You might even want to add multiple share buttons for social media, so you should reserve enough empty space.

3
  • Thanks for the feedback! I like the option of toggling between local time and the input time. One of the main goals I had was to minimize human input whenever possible. Right now, using your list, I have steps 2,6,8. Step 1 might be tricky because I allow the user to select multiple timezones. If they accidentally select a local time for multiple zones, the results list will get updated multiple times, which could be confusing. Not sure how I would guard against that though
    – Jrom
    Commented Jan 1 at 20:10
  • I don't understand what you mean by selecting multiple timezones. Point 1 refers to the time as xx:xx:xx, but you also need a selected timezone, otherwise the time has no meaning. You only have multiple timezones in results list, where there is also a 1-to-1 relation between time and timezone.
    – Morco
    Commented Jan 2 at 6:50
  • And btw, your mockup already has points 4 and 5. Those are just some simple text elements.
    – Morco
    Commented Jan 2 at 6:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.