0

We have a calendar page in our web application that displays appointments (we know all users and train them), optimized for the following use cases:

  • Add a new appointment (by clicking the time)
  • Change an appointment's status (by clicking its status - the status will change in a cycle-wise fashion)
  • Edit an appointment for all further actions (by clicking the appointment's title, resp. the name of the person marked for that appointment)

From training our users, I know this setup to be unintuitive at first ("this looks complicated"), but efficient in the long run. I am contemplating changes to make the system more self-explaining, especially to non-technical users.

Currently, the calendar looks like this (it is possible to have multiple appointments at the same timeslot, like at 14:45):

With links

One gripe are the status links. These are AJAX and double-clicking will change the status twice before redrawing. Hovering (or clicking?) a status link might show a menu with available status - do you think this is easier?

enter image description here

Finally, one might do away with all links on events and have a single menu appearing: enter image description here

I'd love to hear your thoughts. Thank you very much in advance!

1

I would do the following:

Indicate that the status is clickable (use a link color or make it underline, or whatever you do within your app to indicate a link). This will let the user know they can click on it.

Next, have a down-arrow next to the status that appears on hover. This way the user understands that they can click on the status (because it's indicated that it's a link) and when they hover over it they understand they're about to get options.

Next, when a user actually does click on either the status or the down-arrow next to the status, open up a drop down where they can select the new status.

The UX concerns I see you facing (which I tried to address) are:

A) How does a user know they can update the status (my thought is by making it obviously clickable) B) What is the best way to display the options for a user to change their status (my thought is my using a familiar element, like a drop down, as opposed to trying to introduce something new which can get messy. I understand the concept of cycling through statuses, but I've never appreciated them when using them, personally.)

Good luck!

  • This approach is very much like Material Design, I like it. – PeerBr Apr 8 '15 at 15:20
  • Yeah this is also a good approach. Cheers – Siva-Dev-Wizard Apr 8 '15 at 15:53
1

EDIT: Since the double click is ruled out, have changed my answer

I would not directly give the options to change because

  1. It will be annoying
  2. The hover pop-up will hide the other meeting
  3. Most important: Accidental changes

So what I would do is,

  1. Will provide a tool tip on hovering.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  1. Single clicking will show the options

mockup

download bmml source

Hope this helps.

  • So that would be like the the third option in the question, minus the edit link, right? I think the double click is not necessary, first because you already rule out accidents (menu appears on 1st click, change occurs on second click), second because double clicks are very uncommon in web design and not used in our application. I'm having a hard time explaining to elderly users NOT to double-click anything besides the browser icon :-) – PeerBr Apr 8 '15 at 14:51
  • @PeerBr have changed the answer specific to your requirement of not using single click. Hope now it will be proper :) – Siva-Dev-Wizard Apr 8 '15 at 15:24

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.