Zen mode of working with the comment tree

    An article for web designers and usabilityists who have the goal of making convenient forum usability with a tree structure and complex discussions, guessing and finding the structure of their forums with a high level of complexity, and running the forum in an accessible CSS technique. An example of such a forum is given.

    For the convenience of working with complex discussions in the topic, several CSS processing techniques are proposed.
    1) image of branching nodes;
    2) the mode of hiding all meta-information, except for the name (and the pale avatar with the message text);
    3) the mode of hiding everything except pale avatars and text (zen mode);
    4) the mode of displaying the root branch of the discussion with meta-information (ratings, links);
    5) showing one branch with full meta-information (date, author, answer button).

    Switching between them occurs only with the mouse movement. Depending on the selected mouse position, we see the display option we need.


    As you know, complex branched comment trees that do not fit on the page require some auxiliary lines to visually track their level and relationships. When there are no lines, it is inconvenient to look for the neighboring respondents deep down. If there are a lot of lines, it is also inconvenient; then the look may confuse the adjacent lines. For example, the invention of this forum (hover points) does not fulfill the function of tracking one level of response.

    A method is proposed (and not one) for displaying only the necessary lines only using CSS tools (v.1-2) according to a simple rule: if there are more than 1 branches at the node, a vertical line is drawn connecting the beginning of the comments. As you can see from the working example, there are often not very many vertical lines symbolizing branching nodes, so it becomes convenient to navigate the forum (there is also frequent branching, where the proposed technique will be missed). For convenience, the line does not break, but ends with a corner at the end of the last message of the node.

    As an example, take the live discussion trees on the forum. Complex trees are often found in them. Let's pick up a number of the most interesting and complex examples.

    View jobdisplaying complex comment trees is most convenient on live comments that are present on the Habré - through a user-style called Zen-Comment for any of the main browsers. Compatibility checked with Firefox (3.6-7), Chrome (13, 15), Opera (11.50), Safari (5.1), IE (8-9) (eighth in restricted mode). For Firefox and Chrome, Stylish plugins are needed ; for Opera, Safari, IE the style is set in the settings. For all but FF, you need to copy the contents of the first, large block @ -moz-document domain ("habrahabr.ru") {...}and ignore the small similar block at the end. (Thus, Firefox has several special rules written for it. The rest of the compatibility rules for different browsers are made in the form of several hacks. The system is unstable, but it works and allows you to watch the forum in a better way and not even think which browser to look from. )

    There is no doubt that someone will not like something. As you know, habits have great power. But, as specialists, we must guess the best usability than the traditional one, which gives in to hundreds of messages. Therefore, the question of the article initially did not consist in “liked - did not like”, but in the problems of building a well-designed engine, in the ideas of the behavior and arrangement of the visual elements of the forum.

    Here's what we’ll see approximately. I will give only 4 examples corresponding to the main modes, because it’s better to install it once (it will take 10 minutes with Stylish) than to talk in slides. Or make a film, as I did before, presenting a distant ancestor of the current system: ( 8 minutes of screencasts a year ago ).

    Original “Zen Comments” , in which everything superfluous has been removed, except for the names of the authors. The style is observed in this mode if the mouse is not pointing at any block of comments. For example, located on the right edge of them.

    Zen mode. Appears when you hover over a narrow strip of a few pixels on the left. All unnecessary information is removed from the field of view, avatars are muffled and approximately allow to guess duplicate authors.

    Single Branch mode. When you hover the mouse over the root (an area of ​​20 pixels wide on the left), a discussion branch is displayed with detailed information, but without dates and names - to see and evaluate.

    View thread - when you hover over a message, the dates, authors and response buttons of all messages-predecessors are highlighted.

    Now suppose the reader has set the style . After that, you can safely consider almost all the longest discussions, measured in hundreds of posts. If the browser is modern (FF3.6 works, but slowly), and the Internet is fast, then viewing topics on 0.5-3 megabytes in volume is not difficult. Air is removed from messages (vertical gaps are reduced), and vertical lines help to navigate. Further, only practice and a desire to use are required, after which we can further discuss the usability of the mechanism presented.

    We turn to practice and look at examples of complex and confusing discussions:
    * Why a geek should switch to Linux (870 comments, there are enough new CSS to figure out the nodes, somewhere to the limit)
    *Updating Android versions: sad statistics (250 comments, many branches)
    * Node.js - cancer (340 comments, good branches and discussions)
    * The truth about computer scientists: what do they write about us? (200 comm, 400 K texts)
    * Hacking a Vogue magazine or video player for 119 rubles (900 comm., Few branches) is a good illustration of the help of augmented CSS from user styles - as long as the nodes on the branch are no more than 3 and last no more than multiple screens, everything is perfectly tracked by vertical stripes.
    * Even more modern C ++ (160 comm., There is a well-branched and deeply nested branch)
    * Sources of 3300 global Internet projects were received(900 comments, the most highly valued topic, 1.5 MB byte)
    * Offensive on free Internet in Ukraine: Law of Ukraine “On the protection of public morality” (4 branches, 200 comments, decent branches)
    * Signs of a bad programmer (250 comments , there are few branches, branches 5-6)

    Examples of seemingly much discussion, but with a small number of branches:
    * How I assembled the first analog client for twitter (150 comments, there are branches, but simple ones)
    * Broadcast from Let's Talk iPhone (a lot photos, total traffic - by 6 MB; there are relatively few branches; 430 comments.)

    Finally, too much false trees even for crutches made with CSS:
    *What do you miss for a complete transition from windows to linux? (1400 comments, 2.5 MB of one text), but with them is better than without them.
    * Criminal proceedings will be instituted against an anonymous user of Habrahabr (900 comments, also difficult to read even in improved CSS)
    * Why do you use Linux? (700 comments, at the beginning it’s hard to keep track of the nodes, because flipping to the next highlight is 12-15 screens.)

    The development of styles is not at all finished - it has reached a certain point of work when they can be discussed and useful. There are a number of plans for improvements. If there are constructive proposals for development or if there is an ambitious usability project where the development of the front-end is needed, it will be possible to think about development.

    Also popular now: