3

I am currently designing a timetable for a web app which will show appointments as they are scheduled.

Problem is, as I think that in order to make the user understand the scheduled appointment beforehand there is some important information that has to be displayed (Title, time, customer), appointments that are too short in duration will have to have a different width than the time they represent.

My question is, how do I make the user understand that the appointment's width does not necessarily match the time?

I came up with this idea, but I think this still is not straightforward enough...

enter image description here

Update: This is how the timeline is looking following Ashwin's advice.

enter image description here

I'm open to any kind of suggestions!

Thanks!

Improve this question

1 Answer 1

Reset to default
2

This is a good question! I'm not sure if I have a solution but displaying the customer image, name and other details at all times could very easily lead to a busy screen. And for someone who has a lot of appointments, it could even turn the page unusable. Also, what if there are overlapping appointments?

I love how Google Calendar sort of handles this by only displaying the event name -which is what a user is mostly concerned with.

enter image description here

This would help reduce the size of your container by a huge amount. You could display the rest of the details on hover like so:

enter image description here

This would also make overlapping appointments fairly easy to browse through: enter image description here

Improve this answer
1
  • Thanks for answering! Displaying details on hover is a really good idea. Although overlapping appointments are not initially going to be a thing, having a busy screen could be a problem, so thanks for you advice!
    – Levon
    Apr 12, 2019 at 17:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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