Thoughts Behind Time Breakdowns

by Kevin Holesh

101. That’s 1 hour and 41 minutes.

The big minute count has been a part of Moment since day one. I want the focus to be on how much you’ve used your phone today. Staying conscious of one simple statistic about your phone use.

How do I improve my One Big Number today?

I made it One Big Number because it looks sexy on a screen. I was inspired by Nicholas Felton and (embarassingly) all of the dashboard mockups on Dribbble. It is the prettiest way to design that stat, but it certainly isn’t the most useful.

I used to have a number of people write in each day asking for a breakdown into hours and minutes. My arrogant response was “If the number is too big to do the math in your head, you’re probably on your phone way too much.”

Then I did some calculating and it turns on the average time people spend on their phone each day is 101 minutes. I thought to myself, “Hm. What is 101 minutes in hours? Subtract 60 and… Oh. I should be doing this math for people in the app. I can’t even do it in my head for the average!”

Seeing “1 hour and 41 minutes” has a much bigger impact than “101 minutes.” It helps you realize what else you could have done with hours of your time. It puts things in perspective, especially as that number goes up. “300 minutes” doesn’t seem that bad, but “5 hours”… Woah!

On a half-baked whim, I changed the label underneath the big number to break down the hours/minutes when you were over 90 minutes.

I knew I needed something better.

Try #1

1 hour 41 min

My first obvious step was to break down the big number into the hour and minutes part, and label them appropriately. This didn’t quite fit into my One Big Number idea and there was too much focus on the “hour” and “min.”

Try #2

1 hour 41 min, with bigger numbers

I tried making the units smaller, so the focus was on the numbers. This was close to making the final cut, but it is too wordy. It made my precious One Big Number too small.

Try #3

1:41

How about I make it look like a clock? A digital clock, like the one your your iPhone’s lock screen, shows hours and minutes perfectly.

This looked great, but what led me to try this was ultimately its own downfall: This just looks too much like a clock.

Plus is the “1” and hour, or a minute. Is it 1 minute and 41 seconds?

Try #4

1:41:12

I tried to make it clear that the “1” was the hour slot, followed by minutes and seconds. For the most part, Moment is accurate to the second, but I’ve chosen not to show that data. The exact # of seconds you use your phone isn’t important.

And this one looked too much like a stopwatch.

Try #5

1h 41m

I went back to my first try and abbreviated the hour/minute unit labels to “h” and “m.” This saved me 7 characters (including the spaces between “1” and “hour.”)

But again, there wasn’t enough focus on your actual numbers.

Try #6

1h 41m, with bigger numbers

So I made the unit labels smaller. This is actually the solution I went with for a while, but something about the lowercase letters bugged me.

Bingo!

1H 41M, with bigger numbers

I bumped up the case for the “H” and “M” and it’s perfect. You can easily glance and see the 1 and 41 sticking out. It also works in the list of your past days.

1 hour and 41 minutes. Whew, that’s a lot of time spent with this glowing rectangle.

Overall, it took me a few revisions and a couple hours, but I’m happy with the outcome. I’m using this time breakdown everywhere in the app: the main screen, the timeline, the Today widget, and the Apple Watch app.


Edge Case Note: I keep the minutes place there, even if you have an even amount of hours, like 60 minutes or “1H.” If I don’t display that as “1H 0M,” your muscle memory and experience might see a short “1H” and just “1M.” The hours are always the leftmost number, and minutes are to the right of that.

I didn’t do the same if you’re under an hour, say “35M.” I want that number to appear smaller, and shaving the hours off the front makes that to happen.