I'm trying to improve the experience of an application that allows users to enter their working hours based on customer and task daily and also can view their week total working hours. The current interface allows users to choose the week first and then enter enter customer, task and working hours in the table below.

What is the biggest problem in your opinion? And how the process could be simplified?

enter image description here

2 Answers 2


I'm just working on a time tracker prototype ...
Yes, it's important to help the user do if fast, programming the UI to do as mush as possible of the repetitive chores.
My take is similar to msanford's (so I built on his wireframe).
enter image description here

1- The date is due only once, as most of the times the user will be entering today's data. It shows with today's date preloaded, and a noticeable visual confirmation of the day of week, "Monday" in this case, to reassure the user. The user can navigate to the previous or next days using the two arrow buttons at both sides of the date, changing the day commits the data.

2- The rest of the form displays all the selected day's activities, and an empty line to enter more activities. At first there is only one empty line, with focus in its first field (not in the date, which will be right almost always so we can skip it).

3- The "Project" and "Departament" items depend on your company's organization. IMO here less is better. Notice that there is no need to replicate here the organization´s structure. If you talk with those who consume the data and advice them, they might want to insert an abstraction layer furnishing the users with appropriate accounting names so that only one datum is needed that encompasses all the accounting needs. Later on they can translate that names into official accounting pointers.
Anyway, the users here should see not codes but names, in their language.

4- The UI can help the users a lot by pre-loading the Project / Dept / Task (or whatever) fields with the same data from the previous day.
Ideally these fields should work like jQuery UI autocomplete .

5- The hours field is filled faster if it allows the user to type the numbers instead of clicking a spinner. As an additional help, show the total hours for the day somewhere so the user can check if the number is right. A control like Keith Wood's timeentry might be handy because it handles the formatting. I set it without the spinners and the AM/PM part. Users only have to type the numbers and tab forward.

With this arrangement the user that reaches the UI is taken to the current day, with the insertion point in the first accounting input ("PROJECT" in the example).
This field is pre-filled with the same data as previous work day so the user usually tabs to the next field.
The department input is pre-loaded with the same data for the last time the user reported this PROJECT, so it might also be right (pre-load the DEPARTMENT when the focus leaves PROJECT).
The same could be done for "Task" if the users tend to repeat tasks in consecutive days.
If the preloaded data is not right the user needs to type a few keystrokes to put the autocomplete to work. The pre-loaded text has to be selected, so it will dissapear when the user starts typing in the field.
The hours are completed by tiping like 8tab30tab.
Now the user in in the "Comment" which tends to be optional.
One more tab and she is in the [+] button (The [x] buttons are not in the tabbing sequence).
This is as fast and safe as it can be.

  • Hi Juan, this is awesome! The design really catches lots of details and highly focuses on usability. One question I have is: What if the users only enter the hours for each day at the end of each week? They'd probably prefer see Monday - Friday on one screen. That's why I uploaded the wireframe. I don't think it's the perfect for sure. Any ideas?
    – wcdomy
    Sep 23, 2012 at 0:48
  • @wcdomy: Thanks. Yes, this is a design for when users enter data daily. The design I'm working on is more "weekly". I could send you a screen capture should you request it. The features that helps filling many days at once are: - Setting a button to "repeat previous day", and - Allowing the selection and reporting of several days at once. There is a basic principle in data management that says that fresh data is better. Imagine one that says "Hey, the project is about to end so I'm going to report my time" vs. another saying "The day is about to finish, I'd better report time usage".
    – Juan Lanus
    Sep 23, 2012 at 12:59
  • @wcdomy: My design for a week display is more or less the same above, stacked 5 times (with an option for including the weekend). Activity data is displayed in div's and p's, not input controls. When the user clicks a day, it turns into a form, When the user clicks a previously reported activity it opens in the same input form, for edition.
    – Juan Lanus
    Sep 23, 2012 at 13:05

I recently had to design a similar custom solution for the company I work for. It was developed and deployed extremely rapidly, primarily to replace a grandfathered paper-based solution we never had time to replace.

Our use-case may be somewhat different from yours, but this is what we did:


  1. We have small groups of developers, admins, salespeople and managers.
  2. Each of those groups have different work patterns. Luckily, we developers often work on only one or two "tasks" per day. Admins, salespeople and managers work on progressively more.
  3. We were already entering tasks at least every day.
  4. My stated UX-related goal that guided the design of my project was that each user should be able to log in, enter that day's data, and log out within 90 seconds.

Our system

After a short interview with every one of my future users (after management for their data capture and procedural requirements) I decided that the following form was the most appropriate for our scenario:


download bmml source – Wireframes created with Balsamiq Mockups

(The form starts with one row.)

The date field is pre-populated with today's date, Department is pre-populated with the user's department (but can be changed since we're a small company, we often cross the floor). There are controls elsewhere to add rows, submit the form, and so forth.

Importantly, everything happens in one step. We don't use a week-view approach because the employees all enter tasks — at most often — at the end of each day. Those who have many tasks per day do them twice a day (i.e., lunch / end of business) or as they're completed. The date-picker makes entering tasks for other dates painless, though it's a relative rarity.

Incidentally, I've planned an update (per user request) to make each <select /> an autocomplete, primarily to allow for mid-string searching for project names and codes.

  • This is great! The only thing I'm worrying about your design is that what if they need to enter a couple projects for the same day? Do they need to pick the day for each row? And what if they want to enter different departments and tasks for the same project (if possible)? Do they need to repeatedly enter the same project?
    – wcdomy
    Sep 22, 2012 at 19:39
  • @wcdomy Thanks! (1) They do pick a date for each row, but in my use-case, since the date field is pre-populated to today, the user almost never enters the date. (2) Management instructions made all tasks available in all departments. Each row represents a single task that was accomplished for a given combination of project and department. For example, Project X01 | Production | Programming | 6.25 h | today | "WordPress module development".
    – msanford
    Sep 22, 2012 at 20:28
  • PS I forgot to include the "comment" field in my BBML. Added it.
    – msanford
    Sep 22, 2012 at 20:30
  • @wcdomy To address the last sentence of my comment more directly: multiple projects in a single day? Sure! I spent 1 hour debugging this timesheet app, and 5 hours doing something else. I enter two lines, because they are two tasks, and then associate them with project codes and departments. The order of the fields was chosen because that's how my office culture talks about tasks ("for X project I did some programming" rather than "I did some programming for X project"). If that seems weird: my office is not English ;)
    – msanford
    Sep 22, 2012 at 20:34
  • 1
    That makes a lot of sense. For my case. It's very likely that users will work on one project everyday so they need to enter hours for the same project everyday without creating a new row just to enter the same information for a different date. That's why you can see in my screenshot that multiple days are listed in one row though I don't think it's very easy to use. I'll have to improve that experience.
    – wcdomy
    Sep 22, 2012 at 20:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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