I wrote a Discord timestamp generator to solve a problem for myself. I need a way to clearly communicate what time events and such happen across many timezones. Discord has a feature to render local datetimes given a unix time in a special syntax, but I can never remember the flags. There were existing tools for this, but I found each of them frustrating in one way or another. They were brutalist designs, quick form builder tools for the most part, with lots of dropdowns and keyboard input. I knew it could be easier.
As a product engineer, I worked closely with product managers and designers, implementing features and constructing building blocks to make those features easy to modify and simple to use. I've learned a lot of tricks for making this work quickly on the web, and have picked up some instincts about usability along the way.
One measure of the quality of the experience is how many clicks and keystrokes it takes to accomplish my goal. Bearing that in mind, I'll evaluate the experience of picking a date in the current month at 8pm on mine and several similar tools. On my tool, with the preset buttons for common times and a large calendar + clock control, the sequence of inputs looks like this:
click, click, drag, click
4 inputs. Naming those interactions, that's: select a date from the calendar, use a preset to set the clock to 9pm, and drag the hour hand to 8pm. Then my full absolute+relative datestamp is a single click to copy, front and center.
Let's compare against some other tools that do similarly:
This app uses a datepicker with an integrated time input, as text fields. Entering the same date, the interactions are:
click, click, keystroke, tab, keystroke, click, click
7 inputs. Naming those interactions, that's: open the calendar, pick a date, enter an hour, tab to the minute input, set it to 0, close the calendar, copy the timestamp.
Looking at this, I can see this will be a lot more typing already.
click, keystroke, tab, keystroke, tab, keystroke, tab, keystroke, tab, keystroke, tab, click
12 inputs. That's: Select the year, enter a year, tab to month, enter month, tab to day, enter day, tab to hour, (mentally convert to 24hr) enter hour, enter minutes, copy timestamp. Seconds are optional, and we can skip them.
click, keystroke, keystroke, tab, keystroke, keystroke, click, click, click
9 inputs. That's: Select the input, type a month (the inputs here are clever and auto-advance. Great UX detail that cuts the number of inputs in half), type a day, tab, type an hour, type minutes, open the "type" selector, select a type, copy timestamp. A good case study in how getting the details right helps, but can get stuck in a local maxima of UX. I also need to remember what type of timestamp looks like what, or scroll through them all to remember what they mean.
An extra hurdle I found myself in, I wanted to give both absolute time and relative time, like "Wednesday, July 4th 4:00pm, 6 months ago" to make it immediately clear if it was an ancient notification. That means, in addition to all these interactions depicted above, I need to swap apps, paste, swap back, and copy a second output (or remember the shorthand to paste twice and modify). No good. That's my biggest win for myself here, a single copy step for my preferred format.
The UX field has lots more to say beyond counting interactions, but it's a simple and quantitative way to compare different experiences. Some other "laws" of UX:
- Jakob's Law: Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.
- Hick's Law: The time it takes to make a decision increases with the number and complexity of choices.
- Fitts' Law: The time to acquire a target is a function of the distance to and size of the target.
I designed this to resemble Discord's native UI (✅ Jakob's Law). The primary controls, the calendar and clock, are the largest items on the page (✅ Fitts' law). By emphasizing a more visual form of input, rather than taking input component-by-component as text, I can expose more controls while grouping them in a way that presents fewer choices (✅ Hick's Law). I'm pretty happy with the end result for myself.
I'm an indie community builder with a decade of experience operating online spaces for technical audiences. Need help with yours? Let's chat. Are you a web developer using React? Check out Reactiflux
Top comments (0)