Design progress for the 'New Timeslip' section of Time Tracking in the mobile web version of FreeAgent. Whether you want to manually create a timeslip, or you want to use our in-built timer, this is where you come. Frames 17 and 18 are my current active and inactive timer states, respectively.
In the 'desktop' view of the app, the timeslip form comprises:
* Project (dropdown)
* Task (dropdown)
* User (dropdown)
* Hours (text input)
* Comment (text input)
As of frame 10, the hours and minutes values were made editable so we can avoid duplicating the time entry text inputs inside the fieldset.
Placing the date next to the recorded time means the two most immediate elements—the time I'm recording and when I'm recording it—are the first things I encounter when creating a timeslip. Only then do I have to deal with selecting the project, task and including a comment. Tapping the calendar icon or the current date reveals a calendar widget.
Does the stopwatch metaphor feel a bit much to you? The progress bar circling around it take 1 minute to complete a cycle. Any feedback welcome.
about 1 year ago
Really nice to see the progression of ideas for this, Robbie! I actually really like the stopwatch idea, though on frame 17 it feels a little crowded for me - I'm not sure if it's the combination of the stopwatch and the thicker green line, when the time gets filled up. Frame 18 feels much more balanced. Really like where there is going though, looking forward to seeing more :)
I like the stop watch too. I'm not sure about using a play icon though, maybe use the record icon or just the word start.
by Robbie Manson
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
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