LiquidThreads 3.0/Design

Keyboard Controls
The system must be navigable through the use of the keyboard. The following key mappings should be implemented (case-insensitive, but using capitals for clarity and readability):


 * N - next post
 * P - previous post
 * U - next unread post (in current thread)
 * [SHIFT] + U - previous unread post (in current thread)
 * [SPACE] - next post
 * [SHIFT] + [SPACE] - previous post
 * X - expand or collapse current post set
 * T - next topic
 * [SHIFT] + T - previous topic
 * R - reply to current post
 * M - toggle minimal view

Dynamic Insertion
The system will continually ping the server for updates to topics that are currently within the view pane. If the server indicates that a new post has been made within the topic, the system will retrieve the posts and insert them into the page dynamically without the need for refreshing.

The current "active" post will not change position. New replies are inserted regardless of position.

A notification will be given to the user that new replies have arrived. This notification will also indicate the direction (up or down) that the posts have appeared in.

Use of Color
Individual elements (posts and summaries) have a colored background. This is important for several reasons:


 * Colors (e.g., not grey or neutral tones) encourage users to invest energy and time into an application. Saturation indicates that a content block is something that should be paid attention to and may be of interest.
 * Color helps to distinguish individual posts. This has the following effects:
 * It breaks content blocks up into more managable sections, preventing the "wall of text" effect
 * It serves to enforce the idea that individuals are collaborating and not "Wikipedia as a whole"

However, overuse of fully saturated colors will compete for the user's attention and can cause stress. Therefore, color is desaturated to avoid this.

Bright, desaturated color enhances a friendly atmosphere while desaturated dark color encourages a serious atmosphere (like that found in a business application). Since one of the goals is to be friendly and open, brighter colors are chosen.

Warm colors (red, orange, yellow) often invoke feelings of alert and energy while cool colors (blues, greens, and purples) are considered more peaceful.

Thus, the following colors are applied:


 * Summaries are colored green
 * Posts are colored blue
 * New Posts are colored purple (and have a "new" icon)
 * De-emphasized Posts are colored grey (so that they fall into the background)

The currently "active" post - the post that the system considers being "read" will have a more saturated color blue.

When an unread post becomes "active", its color changes to the saturated blue, and then to the lighter blue when the next post is reached.

Infinite Scrolling Techniques
There are two places on a page's interface that employ a technique called "infinite scrolling".


 * The Table of Contents
 * The View Pane

Page Sections
Each page contains the following sections:


 * Head - this is a wikitext section.
 * It is useful for placing global information, such as project templates and links to non-threaded discussion archives.
 * Table of Contents - this is a dynamic control that enables easy browsing of topics
 * Viewing Pane - this section displays topics and all of their posts.

Table of Contents
The table of contents is the user's view into the topics visible on a page. It utilizes a technique of "infinite scrolling", allowing the user to navigate through all topics within a page.

The table of contents is globally positioned. If the user scrolls down the page to where the TOC would no longer be visible, the lower Control Bar will always be present at the top of the screen, along with a control to cause the TOC to re-appear at full value.

Control Bar
The control bar appears in two locations: at the top of the table of contents and again at the bottom of the table of contents.


 * New Topic Button - This button activates the "New Topic" editor. The page is auto-scrolled to the editor position, which will be at the "top" of the viewing pane stack.
 * Topic Count - This is verbiage indicating the number of topics on the discssion page
 * Refresh Control - This control will refresh the contents of the table of contents
 * Note: - this may not be required and may be eliminated
 * Mark All Read Control - this control passes through all unread posts and marks them as having been "read"
 * Search Topics Control - This control allows the user to search all topics on the discussion page (and only the topics on the discussion page). See below for search mechanics.

Line Items

 * Topic Title - The title of the topic. Clicking on the topic title will advance the viewing pane to the top of that topic and auto-scroll the user to that position.
 * New Reply Count - This is a notification area that only appears when there are new replies to a topic.
 * Reply Count - This indicates the total number of replies.
 * Last Reply - This indicates the date stamp of the last reply. Technically, this is a last-modified date.

The headers of the table allow for sorting in both A-Z and Z-A method. The default sort order will be "Last Reply", descending.

Striping Mechanics
Line items will have alternating color bands to better facilitate distinction.

Topics with unread replies will obtain a slight purple shading to better enable user distinction between elements with new replies and older elements.

Search Mechanics
The search box on the table of contents will server more as a "filter" than a standard "search results" system.

When a search is executed, the contents of the table of contents (and the viewing pane as well) will be replaced with the topic items that match the criteria.

The control bars are modified as follows:


 * The topic count verbiage changes, indicating that a filter has occurred
 * The default text of the search box will show the text being filtered to
 * The search box magnifying glass is replaced with a "clear" icon. When clicked, the text of the search box is removed and all filters are cleared.

Viewing Pane
The Viewing Pane is the lowermost section of the page. It contains the "meat" content of all topics and posts. It utilizes "infinite scrolling" technique.

It is important to understand that the viewing pane contains a "stack" of topics. Topics may exist before and after what is viewable; however, there is a definative "top" and "bottom" to the stack.

The order of topics within the viewing pane is exactly the same as the order of the topics within the table of contents. Re-sorting the Table of Contents will re-sort the topics within the viewing pane.

Topic Title
The topic title area consists of up to four elements:


 * Page Title - this only appears on topics within the user's subscriptions page (see below)
 * Topic Title - the title of the topic
 * Watch Control - allows the user to watch or unwatch a topic. This has more value when the topic is within the user's subscription list.
 * Add Summary - This only appears if a summary does not exist.

Summaries
Topic summaries are standard wikitext elements. They are the master element for any topic. All topics will have them but they may or may not be visible.

Summary Focus vs. Post Focus
All topics shall have summaries. The summary will be the "master" element within a topic; collapsing the summary will collapse the entire topic.

When a new topic is created, a blank summary shall be created at the same time. The first post of the topic, the one the user creates, shall be slaved to the summary.

If a post is split from a topic, a new summary will be created, and the split post shall be slaved to that summary. Thus, all topics will have a summary.

However, in some instances, a summary may not be necessary. For example, a topic with only three replies may not require a summary. For this reason, blank summaries will only begin to appear (and prompt for editing) after a certain threshold of replies has been crossed or it is explicitly created by a user.

Sections
An uncollapsed post consists of multiple, discrete sections and controls:


 * Collapse Control
 * Headline
 * Post Body
 * Tail

A collapsed post does not have a Tail and it's Post Body is replaced with additional information:


 * The Helpful/Not Helpful ratio (if any)
 * The reason for the collapse, if any (e.g., if a post is auto-collapsed due to being Not Helpful)
 * The number of replies to the collapsed post

Collapse Control
This is a control, located in the upper left of the post area, the controls whether the post (and its children) are visible.

Collapsing a post will "collapse" the triggered post and "hide" any child posts (they will retain thier individual collapse/uncollapsed state).

After a certain depth (configurable in software), posts (and children) are auto-collapsed.

Posts which have been flagged as overly "not helpful" will be automatically collapsed. The threshold for this action shall be above a 70% "not helpful" rating.

Uncollapsing a collapsed post will open the triggered post to full viewing mode.

The collapse control will emphasis itself when it is hovered over.

Headline
The headline is the area at the top of a single post. It contains a User Information section and a set of Post Maintenance controls.

User Information
This section contains information about the user who made the post:


 * User Name - This is drawn from the user's saved "signature", though any date element is stripped and not included. If, for some reason, "talk" and "contribs" links are not present in the signature, they will be added.
 * Post Date - This is the timestamp of the post
 * Avatar - This is a 32x32 pixel thumbnail of the user's avatar. If no avatar is provided or set, a generic avatar will be used instead.
 * Thought - ideally, we could generate automatic "gravitar" style images for each user, so as to better differentiate between users.
 * Unread Notice - for unread posts, an indicator will appear showing that this is an unread post.

For anonymous users, the User Name field will be the IP address of the user (per normal) with the additional text "Anonymous User" immediately following.

If the user is blocked, a notice ("Blocked User") will appear in the headline as well.

Post Maintenance
The Post Maintenance section contains the following controls:


 * Edit - Allows the user to edit the text within the post. The editor will open within the post body.  Posts that have been edited will be indicated within the Post Body (see below).
 * Link - Opens a modal dialog box with a set of "link to" links.
 * Two links will be provided (local and remote)
 * Next to each is a "copy" control which will automatically copy the text of the given link into the user's cut/paste buffer
 * A cancel control will kill the modal dialog
 * Move - The functionality of this action has changed. It no longer allows for moving the discussion object within the page; instead, it is used to move discussions to different pages
 * Split - Allows the user to take the individual post (and all of its child replies) and splits them into a new topic. A modal dialog will appear, requesting that the user provide a title for the new topic.

The "history" link has been removed. Since history is only important when a post has been edited and the history link is provided within the edit notice, this link is irrelevant.

Post Body
This area contains the text of the user's response or posting. It is a standard wikitext element.

Edited Post Notification
If the post has been edited since its original creation (by any user), a notice will appear at the bottom of the post body section indicating so with a link to the history of the post.

If only one person has edited the post, the text will be simple and indicate the name of the user doing the editing within the text.

If more than one person has edited the post, there will be a hover-over listing of who has edited it in addition to the link to the post history.

Tail
This section of a post contains various "content addressing" controls.


 * A Reply button. Clicking this button will open the reply editor, directly below the post being replied to (this may not be the location that the saved post is placed, however - see below).
 * Helpful/Not Helpful controls (special, see below)
 * The Helpful/Not Helpful ratio indicator

If the user has previously marked a post as Helpful or Not Helpful, the Helpful/Not Helpful control will be replaced with a styled section indicating that the user had previously made a selection. This section contains a control (a "kill" switch) that removes the specific selection (Helpful or Not Helpful) and is then replaced by the standard Helpful / Not Helpful control.

Editor
The same editor is used for managing summaries, new posts, and replies.

Editor Behavior
The reply editor is a stripped down, minimal version of the standard MediaWiki editor. It does not have a signature button.

Anonymous Post Detection
When a reply is submitted, the system (in Javascript) initially checks to see if the user is logged in or is posting anonymously.

If the user is posting anonymously, a modal popup dialog will appear, asking if the user intends to do so anonymously or not. The user is given three options:


 * Yes, post anonymously.
 * No, I need to log in
 * No, and I want to create an account

In order to avoid user frustration and loss of data, Login and/or Create Account actions should be handled in-place, through modal Javascript dialogs.

Signature Stripping
Upon submission, the software will strip any text that it determines to be a signature (e.g., multiple tilde characters). Posts are auto-signed, so this is not needed.

Post Submission Behavior
Upon a succesful reply submission, the editor box's contents are cleared replaced with the success (or failure) message. The box should shrink in size to accomodate this.

The message contents will consist of three elements:


 * A visual indicator of success or failure (checkbox or error icon)
 * Headline text ("Reply added successfully") or ("There was an error")
 * "Jump to" text, allowing the user to navigate directly to their post (this is useful if the post will be buried off-screen).

The location of the user's reply will vary according to the following formula:


 * If this is a new posting, it will be appear in place (at the top of the stack, chronologically)
 * If this is the first reply to the originating post, then it will appear directly beneath the message box (as a normal post)
 * If this is the 2nd (or more) reply to the originating post, then it will appear at the bottom of the stack (chronologically), at its proper depth.

Subscriptions Page
All users will have a "subscriptions" page. This will replace the current "new messages" system. The purpose of the subscriptions page is to grant users a high-level view of all discussion pages and topics that they are watching, following, or subscribed to.

Any topic a user has replied to will appear in their subscriptions list (unless they specifically choose to unwatch it). If a user watches a discussion page, all topics on that page will appear within it.

A user's subscriptions page behaves slightly differently than a normal discussion page, as described below.

Table of Contents
The following changes appear to the Table of Contents on the subscriptions page:


 * The "New Topic" button is removed.
 * The verbiage regarding the number of topics changes to reflect the new context
 * An additional, sortable column, "Page", indicates which page the topic is located on.

Viewing Pane
By default, the viewing pane will be placed into a mode where previously read posts are collapsed by default. Only unread posts and their preceding posts will be expanded (to give context). The user can, of course, switch their expanded/collapsed system on individual posts or topics.

To Do

 * Avatar mechanics
 * Reputation Systems