2

From users perspective, I am struggling to figure out what is the best way to adapt this complex table to show in one screen with multiple teachers booking. Or reduce the table's height. The interview time can be 5 minutes per session.

Is there any solution or idea to improve this booking timetable for better view and user experience?

Also, if the available timeslot is click/press. a modal window will show and ask for booking confirmation. E.g. Yes or No to book for this session.

enter image description here

Or, when users visit this page, they must click at one of the teacher and a modal window will show up. Then inside this modal window it will display like this:

enter image description here

1

I think you should go with the second one. It looks more elegant. You can have the teachers image on the top level. Once the user clicks on the image, you take the user in and give him an option to choose the date he/she can come for the interview. The data range is limited. Once he clicks on a date, you simply show him the available slots. If no slots are available, you ask him to choose a different date via suggestions. So to sum up:

Top level: Image of teachers

Second level: Ask user to choose date

Third level: On the same page, give him/her available slots.

This is a simple flow and will encapsulate your requirement. Apologies if this wasn't helpful.

  • If the option is 2, the user will need 2-3 steps to complete the booking. Also, if the available timeslot is click/press. another modal window will show and ask for booking confirmation. E.g. Yes or No to book for this session. Can we make it more simple? – Jeffrey Apr 21 '17 at 5:22
  • Your first option looks too clustered. It gives the impression that the user has to do a little bit of work to book a slot. It's always wise to break down the steps so that the user understands the flow and has a grip of what's happening. However, if your requirement is such that you have to done in 1 shot, you can go with first one. If you want you can remove the second level, simply show him available slots on a date range. For example: 21st to 23rd --> slots are 9:00 AM , 10:30 AM etc. If that date range is not acceptable to the user, give a button to display the next range of dates. – Anan Srivastava Apr 21 '17 at 5:30
  • I agree always wise to break down the steps so that the user understands the flow and has a grip of what's happening. I will try follow your tips and design a better one. – Jeffrey Apr 21 '17 at 5:48
  • Glad I could help! – Anan Srivastava Apr 21 '17 at 5: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.