1

Is this "lesson logger" UI clear enough to understand without table headings?

I'm trying to improve my user interface for users recording lessons. Previously there was one button that was "schedule lesson" but we quickly found out there were two 'actions' people wanted to take, either scheduling a lesson in the future, or one that had already happened. The lessons were also just in a big list ordered by date.

One problem we had was once a lesson has actually happened the user has to "confirm" it, to make sure all the planned details are correct (edit the times if they overrun, and fill in a report etc).

It wasn't clear to users they had to perform this action, especially when they were creating a lesson that already happened. They had to schedule a lesson, then "confirm" it as two separate actions.

So I've split up the tables of lessons into three distinct sections:

  1. One for scheduled lessons (top). Here a user has a distinct button for creating future lessons.
  2. One for completed lessons, these would be lessons that were scheduled but are now in the past so need confirming. Here there's a distinct button for creating lessons that have already happened. These will be automatically completed when they're created.
  3. One for historic/confirmed sessions. These require no action, but haven't yet been invoiced/paid for etc so are still of interest.

enter image description here

On the face of it this is more complex than the original table, and to keep it clean and simple I have omitted the headings to the table. Is it clear enough that it's the date, time, duration, and price of the lesson without headers? Is there any way I can make it clearer to the user without introducing a confusing amount of clutter to the UX?

Edit:

Here's a version with headers, left aligned (looks much better). Moved buttons to the right. I might make them more link-like rather than bit square buttons:

enter image description here

The fee doesn't actually apply to the top two sections, it's not calculated until the lesson is confirmed so there's more space for the edit and confirm buttons. Will be a pain trying to get the cells to line up though!

Experimenting with numbering to try show there's a flow from scheduled lessons through to payed lessons.

3
  • 2
    Most of the cluttered feel here is coming from the spacing and alignment issues. If you remove the dead space to the left of the date column (push them up against the left edge with just a little margin) and left align all the column headers with the content for that column, the table will seem much cleaner.
    – dennislees
    Dec 15, 2017 at 21:16
  • Basically left align the cell contents rather than center align?
    – Joe
    Dec 15, 2017 at 21:18
  • 1
    Absolutely. It's standard practice - e.g. getbootstrap.com/docs/4.0/content/tables
    – dennislees
    Dec 15, 2017 at 21:27

1 Answer 1

2

Table Headers are Necessary Here

Date and price are obvious, but the time entries are ambiguous and open to misinterpretation.

I think you're suffering from a little slip in perspective here. What you really need is an additional row at the top of each table, with no additional styling than some bold text, but in your mind this is somehow equating to "a confusing amount of clutter".

A simple row of clarifying labels is not clutter.

(re: separating link from title) enter image description here

5
  • "The 'plus sign' icon next to the table title - this looks potentially clickable. Should be removed or replaced with something less visually distracting, like a dash." It is! That's a button to plan a new lesson
    – Joe
    Dec 15, 2017 at 21:07
  • Placing action links in a gray font just next to the title isn't ideal for discoverability. You've got a title that looks like a link, and links that don't. Consider making your title look less clickable and the action(s) look more clickable, also moving them to what is generally accepted as an area for actionable items in the top right - see new mockup
    – dennislees
    Dec 15, 2017 at 21:25
  • I like the top right, I moved them underneath but I think the right may be better. Thanks for the help. Added left-aligned header version to the edit. Our whole app has the headers colored, and the "flat" buttons grey. I'll definitely consider a wider change to swap them.
    – Joe
    Dec 15, 2017 at 21:29
  • 2
    Be careful placing buttons underneath. If you have enough rows, you'll get a disconnect between the top (title) and bottom. Also, those big buttons arguable bring things back to the edge of cluttered-ness : /
    – dennislees
    Dec 15, 2017 at 21:35
  • I agree that the time entries are ambiguous without headers. When I looked at the question’s screenshot without reading the text, I guessed that the two time columns represented start time and end time rather than start time and duration. Dec 15, 2017 at 21:38

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.