2

Here's a prototype with an animation of it being used on a scheduler app.

https://codepen.io/TylerL-uxai/full/QvezdM/

Did some interviews and everyone said the hotbar would be "cool" or "sounds good." But I actually built out the feature and this is it. I think I'm going to scrap it, as it's too prone to error.

Here are the four options I have to choose from for a schedule interface... enter image description here

There's a visual to make this easier to understand.

First Option: Hotbar (left) Too prone to error. Unless someone is extremely into mmorpgs, I don't think users will appreciate the extra functionality. (See codepen for an animation of the hotbar)

Second Option: Dropdowns (top) Click the dropdown to filter groups. Click the shift to get '10 to 2' '12 to 6' etc. Then you can click multiple boxes instead of re-typing

Third Option: Click table cell This might be the most intuitive option and least prone to errors (I'm guessing).

Fourth Option: Dropdown + click table cell Instead of having the drop downs where the bread crumbs are, maybe include them in a popup menu

Best Option based on user research I noticed the place I used to work at would have the shift times in the top column instead of dates. Then the row below would have a list of person's names instead of names on the left side, they would be in the table cell. I think this just proves a simple excel interface or piece of paper might trump the fancy website I'm building.

Improve this question
2
  • 2
    What's a hotbar? And I see only one option (is that option 3?).
    – Ken Mohnkern
    Oct 11, 2019 at 17:29
  • 1
    I think you should add a brief description of what you are trying to build. Seems like a scheduler application but some additional details could be good, like who are the people on the left and, do you need visibility only for the week? Why not a month calendar with small cells (Outlook style)?
    – Juan Carlos Eduardo Romaina Ac
    Mar 10, 2020 at 5:49

2 Answers 2

Reset to default
1

I don't understand your interface. However, for scheduling, have you considered:

  • Dates at top.
  • Time slots on left.
  • Names of people in the table.

You could use a "Legend" interface to color code each person's time slot.

Improve this answer
1

One thing that jumps out immediately is minor but makes transitioning a bit jarring: the row height changes. It might be better to the first column wide enough to accommodate content for all and leave the row height alone. Also, a decent palette can go a long way. The yellow on blue should at least harmonize, but unless those two colors are thematics for the entire app, I suggest using something subtler, so the mouse-over doesn't cause the eye to adjust for a soothing gray-blue to a harsh yellow.

Center column header in the dates in the day's columns and right adjust the name column.

The behavior of the cells should remain the same, no matter what is happening in the data. So, I like your idea of clicking the cell to edit. If you want to indicate something about the data in the cell visually, the Legend is a good idea, but the "Edit" link should always be present, and it should do one and only one thing.

Just my two cents. Or three. Or one. :-)

HTH,

Colby Africa

Improve this answer

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.