Explicit Comment Heirarchy Indicators

[jesse_the_k]

Howdy oh wise ones. There have been some juicy 200-comment threads lately, and I've been running up against a usability issue. I've drafted a post for the Suggestion Generator, and I want to run it by clearer minds than mine first.

So: can you understand what I'm talking about? If you're a large-print, audio, or small-screen user, does this match your experience? Does my proposed solution make things any better? Have at it!

=== begin draft suggestion
Title: Style Comments Page with Outline Indicators in Place of Indents

Summary: Improve UX for reading comments where indention implies structural hierarchy

Full Explanation: The structural hierarchy of comments -- who is replying to whom -- is implicit in the amount of white space between the left screen edge and the start of the comment. (How the comment begins varies, depending on the page's style: could be the words in the comment itself, or the user icon, or the optional subject title.)

For some users, inferring indention is difficult: large print, audio, phones, and other smaller-screen devices.

I'm a large print user, so I'll speak from my experience: It's easy to lose the context of long discussion threads, even with "style=light". (By the way, the help docs mention "format=light" not "style=light": which is preferred?)

The screen grab at this link
http://i277.photobucket.com/albums/kk58/jesse_the_k/SharedPix/LosingCommentContext.png
shows the problem: it's like browsing the web through a soda straw. There are two comments in the middle of a long thread in a Firefox/Mac window with fonts at 20 pt. The earlier comment uses 2/3rd screen width; its reply is indented 1/4 in further. Vertically there's 14 lines of text plus two "header" lines containing user icons, subjects, usernames & dates.

My proposal is to provide a style that makes the outline of comments explicit with printing characters instead of implicit with indents.

I think alternating digits and alpha would suffice; the result would be prepended to the "subject" string, or *be* the subject string if none is present (which would also provide a handy way to reference comments...) An example follows

0. Original Post Subject Line
1. Base-level comment
1a. alpha's response
1a1. beta responds to alpha
1a1a. gamma responds to beta
1a2. epsilon responds to alpha
1b. gamma responds to alpha
2. epsilon responds to OP

Choosing to use it:
http://www.dreamwidth.org/manage/settings/?cat=display

I suggest three tick box options where the current choice is "View comment pages from your Reading Page in your own style":
View comments pages from your Reading Page
1. in your own style
2. in lynx/mobile style
3. in lynx/mobile style with comment outline format
(and it would be wonderful to have a hyperlink from "comment outline format" to a sample of it applied.)
=== draft ends

Comments

[lightgetsin]

I honestly didn't even know that there's indenting. This explains how everyone else can tell what replies to what and I can't!

[jadelennox]

this is one of the most annoying things about planning for accessibility. I can't even say "what doesn't work for you" because you don't even know what is there if it doesn't work for you. Goddammit.

It's the same thing for me with mouse over pop-ups. I don't even know there are broken mouse over pop-ups, because I don't move the mouse, so I never know they exist.

[jesse_the_k]

Snap! This is one of many elements of the so-called "intuitive graphic user interface" which ain't so intuitive after all.

It's not just a vision issue either; I've coached sighted computer users who had no idea what the little icons on the edges of their windows were for (close, minize, zoom, change size, elevator).

Would the outline indicators number-alpha-number-alpha-period be *usable*? Based on my out-of-date screen-reading experience, the period at the end turns the indicator into a sentence, which can facilitate navigating the reading cursor.

[lightgetsin]

Yeah, an outlining system would work, I think.

[jadelennox]

I think this would be a fabulous idea. I've actually thought of it on and off myself, but never thought of it as something that would actually be relatively simple to make. But it would!

[zvi]

As someone currently reading via a 7-inch netbook, and who surfs at work with a portable browser with images turned off, I totally appreciate this suggestion and I found your writeup of it quite comprehensible.

I think your suggestion makes a lot of sense and could be posted as is. However, I would offer the following modification (and if you want, feel free to incorporate it, and if you don't want to rework your suggestion to include my mod, I can comment when this gets posted to dw-suggestions.) Instead of creating an additional viewing style, I would suggest that this change be rolled into the lynx style.

Also, I would suggest that the initial implementation attempt be made with <ol>. IIRC, comments threading is currently done with each comment in a div. Ordered lists would do the headings simply and automatically, and would respect adjustments already made by the particular browser for dealing with them.

[jeshyr]

Jesse, this is a fantastic suggestion.

I had a look at the source and I'm really surprised to find that our comments aren't actually generated from nested ul> type lists. I'm used to Wordpress which generates nested unordered lists automatically for this sort of thing - it's easier for computers to parse and easy to style. I certaiunly agreee with zvi that we initialy implement it with ol> type lists. If it works properly and is useful we could perhaps back-port it to the usual comments with the list style information turned off for those who don't want the 1/2/3 type indications and those people should see exactly what they see now. Then it would be a matter of a single line different in the style's CSS to turn the visible numbering on or off.

Cheers,
Ricky

[jesse_the_k]

YAY! Working samples—thanks so much for the opportunity to see it live! I'm assuming that your example is a proof of concept.

Your explicit indicators only show one level. That is: the first level gets one Arabic, the next one Roman, the next one Roman. Your system also combines explicit indicators with indents. I'm hoping to concatenate the level information, much like old-style Usenet/email quoting, which is why I want to alternate Arabic and Alpha, and avoid Roman. Saving space is also very high on my list, so I'd prefer no indents.

I don't—and don't need to—understand the technical implications of <ol> versus <div> implementations. Are user agents smart enough to "know" what level of ordered list a particular item is within so they can concatenate the correct value? Or would the server need to do the calculations? I hope the CSS adepts can chew on that once I post this to suggestions.

I'm planning on letting this simmer for a week, in hopes that potential end-users can ponder whether this would be useful, and suggest alternatives or improvements. I'd appreciate signal-boostage!

[kyrielle]

I would love this for my iPhone but would prefer to be able to have comment outline format in my regular style. I don't need larger print or sparse display and dislike the mobile style, but I would like to replace the indents with the comment outline format when browsing from my mobile device. (This also means I'd like a way to turn it on or off based on device, in my case - it would be helpful on my phone, but on my computer the indentation would be easier.)

I'm not sure that part is actually doable, but it would be nice if possible.

[codeman38]

I don't see why they couldn't develop it so that, for a single user, known mobile devices appear in a different style from full-sized devices. WordPress has done this for a while; if you're on something like an iPhone, it uses a different style sheet by default (but it can be changed easily).

[kyrielle]

That would rock if they could do it.

[sqbr]

Oooh. I like this suggestion a lot.

[fish_echo]

I like this! :)

[fish_echo]

Ooh, update (because I didn't read/comprehend it throughly the first time): I would like this outline thing in addition to the current implicit indent style-- I find the indenting nice because I am very visual (and don't always read/comprehend/notice all words all the time), so I don't want to replace it with alphanumeric things which I must read all of to know the threading. But when the comments get long &/ there's complex threading, it would be really useful to me to have this outline format available.

[turlough]

Yeah, this. Especially if zvi's suggestion to incorporate it into ?style=light instead of making it an alternative to it is implemented.