Is this time tracker mockup user friendly?

Code Feedback
1

I am new to web design, HTML, CSS and Javascript. This is a first attempt to create a time tracker. Both for manual inputs and stop watch.

So far it have no connection to a database, so it is more about user interface, look and feel.

http://94.237.92.101:5050/

(Note that this is a HTTP and some browsers must be forced not to use HTTPS.)

Is it obvious how it work?
Is it simple enough?
Other feedback?

2

Hey there,

great work so far!

My ideas:

  • I think a heading would be very useful

  • when I click the green clock, something is happening. But I don’t know what. The number is blinking, so maybe it is a stop watch. But I don’t know, because the smallest unit seems to be minutes, so I have to wait for at leas 1 minute.

  • what does Select Code mean?

  • on Firefox, the dropdown arrows are not visible, I have to double-click each field

Keep us posted!

1 Like
3

Thank you for your feedback. Appreciated!

If I had chosen seconds it had been more obvious. But I do not know any that is payed per second :-). And the value is stored in the database as minutes
1.25 is 1:15. So what do you suggest in order to make it more obvious?

The advantage of datalist is that you can search for an option. The disadvantage is that you can write anything that is not matching in the database. So you have to select job and code from existing values.

The default arrow in some browsers sometimes looks ugly, so I the arrow is hidden. Maybe it will be better if visible and ugly?

4

I think you are able to find a solution, that:

  • shows seconds to the user
  • but only saves minutes in the database

My question was more about how the placeholder helps the user to understand that field. E.g. the placeholder Note tells me that I can input some notes. But the placeholder Select Code feels ambigious, probably something like Select Exact Job Title would help me.

Why not visible and nice?

1 Like
5

I have done another approach. Just changing the background back and forth.

Better? http://94.237.92.101:5050/

Datalists are still bastards. Not implemented entirely on every browser. The look and feel depends on the browser. Chrome and Edge looks best and works best with datalists.

7

Which means in pixels? Better now? Or can you elaborate this further?

Can you elaborate this also?