We quietly shipped our mobile web timer in FreeAgent today!
Quick video of me using it
Recording, not playing
You don't play time, you record it, so I changed the green 'play' button in my original shot to reflect that.
Recording and manually entering time
I combined the hours and minutes fields from my original shot so we could allow decimal values: enter 1.5 and it gets converted to 1:30. We do this on the desktop, so it was an important thing to maintain.
The disappearing hours/minutes border and shadow are meant to signal that the field isn't editable while the timer is running. And the added colon and ticking seconds act as extra clues.
After starting a timer, you can navigate off to another section, close your browser or let your phone go to sleep and it'll happily keep ticking away.
If you have a timer running while viewing another section, an animated reminder icon appears in the header. Tapping it takes you straight back to your timer. If you have multiple timers running, you're taken back to your list of timeslips.
You can have multiple timers running at once. Handy if you want to track your own time on one task and your employee/partner's on another. When viewing your list of timeslips, new running and paused icons indicate timer state.
Designed for speed
You can start a new timer without having to define the client, project or task. You don't even need to save a timeslip before navigating elsewhere. Any unsaved timeslips are just grouped above the rest of your saved ones. When you do save them, they're grouped by day.
Creating new tasks on the fly
If you haven't yet created the task you're tracking time against, you can create it on the fly from the New Timeslip screen. No need to navigate to a project, do it there, then come back.
10 months ago
Nice work Robbie.
Love it all… except the drop down with one option in it, not sure what glyph would communicate it, would "+ Timeslip" fit?
@Max Di Capua I hear you. My preference would be to get rid of the resulting dropdown option altogether and simply be taken straight to the New Timeslip view. Ditto for the Delete function (the down arrow in this shot, though that would need to be changed); just let me confirm that I want to delete the timeslip, not tap another button _before_ I do confirm, right?
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter