UI not self-descript enough

[nomeata]

Some users are utterly confused by the UI, see this thread: https://mail.haskell.org/pipermail/ghc-devs/2016-April/011929.html

This issue shall serve as a forum for ideas; such as column titles in the tables (maybe rotated by 90°?).

[nomeata]

I’m not convinced about column titles of any sort. They cost a lot of screen space. Further more I’m satisfied if the UI is discoverable and then efficient to the repeated user, it does not need to be completely obvious on first sight.

What would probably work is a representative screenshot with explanations on each field that one can read through once. But that would quickly get out of date. Alternatively, maybe an explanation mode that is integrated in the page: A button ? that you would click on, and a floating box would appear, pointing to a UI element and explaining it (now we have enough space for a proper explanation). With ← and → buttons, the user can switch through explanations and this way get a guided tour through the UI. Being integrated into the page, it would not get out of date easily.

I kind of like this idea.

[BardurArantsson]

I’m not convinced about column titles of any sort. They cost a lot of screen space.

I really don't understand this. There's a reason tables almost always have column headings.

What space are you worried about? Vertical space? Horizontal space?

Further more I’m satisfied if the UI is discoverable and then efficient to the repeated user, it does not need to be completely obvious on first sight.

Outside of games (i.e. very simple UI) there's very little UI that can be said to be discoverable. I mean, I wish you the best luck inventing some, but in the mean time column titles would go a long way...

[nomeata]

Look at Github; e.g. the list of files. No table headers. The list of commits. No headers. The list of issues; headers are there because of the functionality they provide (sorting)...

And at least for most columns in gipeda, the meaning is quite clear, e.g. the title. For others, an explanation would definitely exceed a typical header, e.g. the summary icons on the right.

[BardurArantsson]

Sure, but

a) there are a grand total of three columns b) people already know what a file name looks like... b) ...and what a "message" looks like... c) ... and, well, actually the third column is not necessarily immediately obvious if you didn't know it already... but I note that the full timestamp is shown as a tooltip for the "fuzzy delta" cell.

(basically same deal of the issue list, just two columns and an icon in every row along with the comment count.)

And at least for most columns in gipeda, the meaning is quite clear, e.g. the title. For others, an explanation would definitely exceed a typical header, e.g. the summary icons on the right.

Ok, so you're worried about horizontal space.

Nobody expects table headings to give a full explanation, just say DiffStat and link to an explanation (or explain in a short tooltip sentence, e.g. "shows number of lines added/removed" for the DiffStat heading). You could also add a hover/tooltip to each diffstat cell which a lengthier "X lines added, Y lines removed".

This really doesn't have to be super-complicated :).

[nomeata]

It’s not a diff stat, but a summary of improving and regressing test cases – but your misunderstanding just stresses that the UI needs improvement...

Maybe better symbols? What is an unambiguous symbol for “improved test case”?

Did you notice that the symbols do provide a tooltip? I guess it could be more verbose.

This really doesn't have to be super-complicated :).

No, it is indeed easy to slap some headers there, but will they really help? “Date” – what date? Also, how would you describe the second column, the one that contains “2 commits to ebf0d27”?

[BardurArantsson]

It’s not a diff stat, but a summary of improving and regressing test cases – but your misunderstanding just stresses that the UI needs improvement...

:). Fair enough, I just looked at the numbers and guessed -- actually didn't try to "tooltip" them. So, the column title could be "TestDeltas" or some such. (I usually find that a little bit of time with a thesaurus and looking up antonyms, etc. helps figure something out.)

What is an unambiguous symbol for “improved test case”?

Maybe FontAwesome has something relevant? Checkmarks and "times" (the multiplication cross) perhaps? Adding a little super-script plus or minus to that might also work.

No, it is indeed easy to slap some headers there, but will they really help? “Date” – what date?

Use "Modified" instead of Date. The "about an hour ago" bit does the rest to connect the dots for the user.

Also, how would you describe the second column, the one that contains “2 commits to ebf0d27”?

"Changes"? "Details"? "Detailed Changes"? (The last one I would probably want to span two lines to avoid being too wide.)

EDIT: Actually maybe just "Diffs"? "Comparisons"? "Compare"?

[BardurArantsson]

Btw, the "?????????" line at the top could probably use a little prefix: "Compare by dropping: " or something like that.

[nomeata]

Btw, the "?????????" line at the top could probably use a little prefix: "Compare by dropping: " or something like that.

The tooltip already says that, and with more narrow screens, there is not enough space. Also, quite a prominent place for a permanent text that any user will likely want to read only once.

I might have noticed that having a clean, uncluttered interface for the returning user is also a goal here :-).

I think I’ll go over the interface and add tooltips, which have the space for more explanation but do not get in the way, to most aspects of the UI. Then we can see if it helps, and if it is sufficient to avoid permanently visible help.

[BardurArantsson]

The tooltip already says that, and with more narrow screens, there is not enough space. Also, quite a prominent place for a permanent text that any user will likely want to read only once.

There's such a thing as media queries, so you can just hide the text (or use a smaller one!) if the user's window is narrow. I think you're using Bootstrap, so that would just be hidden-xs or hidden-sm (etc.). EDIT: Actually, how about hiding the whole feature on small windows? It's not going to be particularly pleasant to look at diffs on small devices anyway... (Meh, ignore that.)

To avoid the "grabs attention too easily" problem for a little used widget you can use somewhat faded text for the label.

(Actually thinking about it, I'm not sure the whole compare feature actually makes sense, but I'm not exactly a user of the system, so I wouldn't know. Is it used often enough to justify it?)

[BardurArantsson]

(I'm just trying to generate ideas, btw. I'm not saying any of this is the best way to do it, but usually just using a few of these 'tricks' will get you the 90% solution for 10% of the effort of the 100% solution.)

[nomeata]

(Actually thinking about it, I'm not sure the whole compare feature actually makes sense, but I'm not exactly a user of the system, so I wouldn't know. Is it used often enough to justify it?)

No idea, I have never heard of any users besides me :-)