Page MenuHomePhabricator

Visual design for new Flow indentation model
Open, MediumPublic

Assigned To
None
Authored By
DannyH
Feb 6 2015, 11:47 PM
Referenced Files
F3316291: mediawiki-flow-3.png
Feb 6 2016, 11:21 AM
F3310905: mediawiki-flow.png
Feb 4 2016, 6:38 PM
F47786: emphasize-reply.png
Feb 26 2015, 3:53 PM
F47789: connect-reply.png
Feb 26 2015, 3:53 PM
F47779: show-both.png
Feb 26 2015, 3:53 PM

Description

We talked about this in the design meeting Thurs Feb 5th.

With the new indentation model (T88501), should we make any visual design changes to the way indentation looks?

Should we change the vertical lines? The horizontal spacing?

How many levels of indentation should we allow before it looks silly to squeeze down any further? I don't expect people will need that many levels using the new model -- but if somebody tries, I just want to cut it off before there's a single word per line. :)

Event Timeline

DannyH assigned this task to Pginer-WMF.
DannyH raised the priority of this task from to Medium.
DannyH updated the task description. (Show Details)
DannyH subscribed.

Regarding the vertical line, I have done some quick experiments and I think would keep the line. I think it helps a little when scanning the content. This is most noticeable when there are messages with different indentations in their content (e.g., containing a list), or when identifying a long tangent conversation you may want to skip.

From the initial experiments with the new indentation model, it seems that it is less prone to generate new indentation levels. I'm open to reduce the margins a little, but avoiding to increasing the content density too much.

Regarding indentation levels, I don't think more than three or four will be needed.

By following the example discussion, I have noticed that while while encouraging linear conversations felt natural, the absence of a specific reply link at the last comment seemed surprising in some cases. I have explored some possibilities worth considering:

  • Provide the reply link for the last post but don't increase the indentation level. This will be the same as clicking on the reply box, and the reply action would be only kept as a shortcut for consistency reasons. This has the disadvantage of presenting an irrelevant choice to the user.

show-both.png (923×797 px, 105 KB)

  • Hide the reply link, but emphasise the reply box. By adding an icon (e.g., reply arrow or a message icon) the user can better associate the reply box as a replacement of the reply action.

emphasize-reply.png (933×806 px, 104 KB)

  • Show both but better connected. By visually connecting the reply box with the reply action the user may understand that they are the same action and the box is just a way to save one step in the process of start typing the reply.

connect-reply.png (948×819 px, 106 KB)

from my post in https://www.mediawiki.org/wiki/Topic:Senq838us190rqlp :

... adding: ... i wanted to make this (almost just a link) a sub-thread, (comment for my latest post), but it has gone to same thread with it. moreover, there were/are separate 2 "reply" interface elements at bottom! one "Reply" near latest post and another "Reply to "New indentation & threading model" " inside a text area, that was/is going to expand! though the upper "Reply" did not open its own textarea, (which also would be moved righter), i did not notice / catch sight of that, and, since i clicked the upper "reply", i thought, separate form has appeared, and after i submitted, i have seen that result has gone to main thread! so that is a misleading design! now, after i have tested it again, i see that upper "Reply" at bottom just activates the textarea underneath.


and also i provide screenshot of current design.

mediawiki-flow.png (222×435 px, 5 KB)

@Pginer-WMF what is in your first image is what is working now at www.mediawiki.org/wiki , and as in my screenshot. as i understand, this was made so after you suggested it here, and it was other before. but this is not clear to me.

i think there is a mistake in your images: you have not put the textarea after last comment of the subthread, but it has same behavior. and it is also so in www.mediawiki.org/wiki - also for that, i think, it is probably implementation of this image. )

and i put screenshot of working version of last post of sub-thread, for history:

mediawiki-flow-3.png (217×298 px, 7 KB)
.

"This has the disadvantage of presenting an irrelevant choice to the user" - @Pginer-WMF about his 1st image - i have reported about exactly this, in my 1st comment. author of T116999 @ksmith also thought that these are 2 different interface elements: "At the bottom of the page, there is a small/faint "Reply" link, and then below it is a large/prominent "Reply to xxx" box." etc. so, the 1st image is not good. the 3rd also has 2 interface elements. so, the only correct is the 2nd. (but same form should be also at sub-threads' ends, see my previous comment).

3rd design bug report by me in this page: the "reply" of a post which does not have sub-thread, should be written other way, because it is not just a reply, as it is usually understood in emails. it creates a new sub-thread, for discussion of that post only. for example/showcase it confused author of T93883 , @He7d3r : "when New Age Retro Hippie posts his reply to Wgolf, Flow puts it above Karlhard's reply, instead of below it ... the reply button under Wgolf's post is the right button to reply to Wgolf's post" - this is about this page. and this was previously planned by mediawiki developers , to write there "comment" instead of "reply": T88501 .

there is additional explanation inside textarea: "reply to threadname", but 1) user may overlook that, it is grayed out. 2) and, that explanation is same in all different cases of reply forms! and it is not very true: if user starts a new sub-thread, it is not reply to main thread's topic, it is discussion of partcularly only that post, to which he presses to reply.

so, my bug report no. 4 : probably more informative labels or tooltips are needed.

see some of possible more informative texts/labels from my comments and images at https://www.mediawiki.org/wiki/Topic:Senq838us190rqlp .

i reply to comment of @DannyH in/at T93883 .

and the internal reply links say "Reply to (text snippet)," then that might be giving the wrong cues

i agree, i think, indeed "Reply to (text snippet)," is bad, it should be like "create subthread of comments for this post".

If they all say something like "Reply to this discussion," then it might encourage the behavior in example #2-5, and discourage what happened in example #1

and the #2-5 are what you think as ok, and #1 is what you think as it has a problem. - i think, one text/label for all different cases of reply forms is wrong. "reply" is understood as email reply, as reply to 1 email/post (but email usually includes cites of previous replies in its reply chain, so it can be understood as thread) . but the subthreads of new indentation model are not "just a reply", they should be created only when a new subthread is worth to be created; - take in account, that some sites in internet show reply form in one place and put result in other place, so, the location/position of reply form is not enough to show to user that the new subthread/branch is going to be created .