Wikipedia:Flow/Interactive prototype

Flow
Home Community engagement strategy Newsletter Frequently asked questions Design FAQ Development and design Requirements for the first release Sandbox page mw:Extension:Flow (the code) Background and research (All links go to mediawiki.org) User stories Research User test data Experienced user responses Use cases

To better help people understand how Flow will work, we have built an interactive prototype out of Javascript and HTML. This prototype is not the final product and nothing will be saved.

Open the Flow Prototype

Giving Feedback

Please give feedback about the prototype on this page's talk page.

Using the Prototype

First, understand that nothing will be saved. If you reload the prototype, the state of everything is reset (within certain random variances).

Upon first loading the prototype, you will be presented with a dialog asking for a user name to use. Enter your user name (or any name, really) and the prototype will then see you as that user. Once you've done that, you will be presented with your "Feed" view (see below).

For ease of use, this user name will be saved for 7 days in a cookie so that you don't have to continually enter it every time you come back.

(You can always clear the cookies by clicking the "Clear Saved User Name" link in the sidebar, under the "Toolbox".)

What You Can Do in the Prototype

The prototype is fairly interactive.

Some simple interactions are:

• Topics may be opened or closed by clicking on the chevron to the left or the topic title text itself.
• Hovering your mouse over a datestamp ("About X time ago") will reveal a tooltip showing the actual date of the event
• The buttons to the right of a topic title - Tags, Subscribe, Configure - are interactive, even if they don't actually work
• If you see a "Show X read messages" banner, that means that there are additional posts that you've already seen. Click the banner to reveal them in order to show context.

Your Board

In the top, next to your user name, you will see a link, "Board". Clicking this will bring you to your personal board, which is analogous to your current User Talk page. Your Board is where people go to start conversations with you or learn about what you've been doing.

Topics in "Board" view are always expanded.

Clicking your Board link will take you to a pre-populated Board. Note that this is not a version of your talk page; it is a faked up version (that is mostly taken from w:en:User:Jorm (WMF)).

Your Feed

Next to the Board link is the "Feed" link. Clicking this will bring you to your personal feed. Your feed is a stream of topics and other activity that you have subscribed to. This includes messages left on your own board, but most importantly it includes conversations you have been having on other people's boards.

You will see topics that are fully closed and down towards the bottom of the feed that do not have a filled in star icon. This means that the topic has been created on the board of a user you are subscribed to, but you have not chosen to engage with that topic yourself. Note that you do not have to reply to a topic in order to subscribe to it.

You interact with your feed just like you interact with any other board.

Posts that you have already seen will be automatically collapsed, in order to reduce clutter. If you want to read the full context, simply click the "Show X read messages" indicator.

(The closest analog to this is the "Special:NewMessages" link that comes with LiquidThreads).

Add Topics

Clicking the "+ New Message" button will open up a modal dialog. You can then fill out a title and text, and it will be automatically inserted at the top of the Board.

Note that the "X" button is currently broken (see "Known Issues"). You can always click "cancel" or hit the [ESCAPE] button to dismiss the dialog.

Reply to Posts

You can reply to any post in a topic. Replies will be inserted in-line, directly beneath the post being responded to, and will use the user name you have provided.

Note that in the "real" world the experience will be slightly different: new posts will be inserted into their correct position chronologically (not always just below the post being responded to).

Search

The search box will filter all posts in the board based on the text provided. You have to click the "Go" button for it to work right now, unfortunately.

Searching works against topic titles, tags, post texts, and author names. It will hide all topics that do not match the criteria.

Please note that the search functionality is a bit clunky - it has to be, since it does not have access to string tokenizers or a "real" backend.

Visit Echo Notifications

Clicking the Echo notifications badge (the red thing at the top, next to your username) will show you some notifications. All have been read except for two (one indicating a user mention and one concerning a reply by Writ Keeper). Clicking one or the other will bring you to a "single topic" view: this is just one conversation.

Single topics will have unique URLs and can be referenced that way.

There are controls that will bring you back to your feed from there.

Other

• Collapse All - This will collapse all topics. Clicking it again will expand all topics. This function doesn't make a lot of sense in the context of an infinitely scrolling page, but is provided so that we can view what collapsing all topics looks like.
• Mark All Read - This will grind through all topics, marking all posts as read.

Sidebar Links

There are three sidebar sections of interest: Toolbox, Examples, and Back and Forths.

Toolbox

• Leave Feedback - This will take to a Wiki page where you can leave feedback.
• Clear Saved Data - This will clear your saved user name and delete all cookies.
• Toggle Paragraphs - This will hide all paragraph content. This is useful for seeing how topics "nest".
• Indent++ - This increases the indent depth of all posts by 5 pixels.
• Indent-- - This decreases the indent depth of all posts by 5 pixels
• Hide Author Metadata - This toggles whether or not author metadata (edit count, rights, etc.) is shown.

Examples

• Fully Chaos - This will create a fully randomized board. All data is randomized with "Lorem Ipsum" text. This is for exploring extreme cases. If you don't like the randomized result, simply click the link again.
• Jimmy Wales - This is a version of Jimmy Wales' talk page (which is an extreme example of activity).
• Maggie Dennis - This is a version of Moonriddengirl's talk page (which also has a lot of activity).
• One Topic - This shows a "single topic" conversation, such as what you would get from clicking an Echo notification or a single-topic URL. (You can also get this by clicking the unread notification from "Writ Keeper" in the Echo flyout)

Back and Forths

This section shows three views of a single topic that has been left on your board (a conversation involving you, Ryan Vesey, and Writ Keeper). Each link provides a view of that topic (in "single topic mode") as if you were the person in the link.

If you click either Ryan Vesey or Writ Keeper, your "logged in" user will temporarily switch to them. Click any other view to reset your username back to your original choice.

• Your View - What you see
• Ryan Vesey's View - What Ryan Vesey sees.
• Writ Keeper's View - What Writ Keeper sees.

Awaiting Implementation/TODO

Functionality

• Topic manipulation:
  • Add/remove tags
  • Locking/Archiving/Hatnote Topics
  • Splitting Topics
  • Delete Topics
  • Summarize Topics
• Generate random tags
• Really distinguish board from feed
• Add a faked-up user page
• Search tokenizing
• Make tagbox work
• Fake up "new responses to this post" scenario
• Indicate when posts have been edited

Use Cases/Scripts

• Specific use cases (block notices, etc)

Bugs

• The "X" button in the "Add Topic" dialog isn't working for some reason. Just click "cancel" or hit [ESCAPE].
• Messages are being "marked read" too quickly.
• The talk2json.pl script has a broken date parser (fails on single-digit day entries)

Release Notes

May 9, 2013

• Read posts are now only collapsed in the Feed views
• The "+Topic" button now reads "+New Message"
• Hide the "New message" button when in feed view
• Tag actions no longer work on unsubscribed topics
• Author metadata (edit count, etc.) can now be hidden from a tool in the sidebar
• Posts by yourself now have a blue border instead of grey (h/t to theDJ)
• Added in a "mention" example to the Echo flyout.
• Cleaned up the json file for Jimmy Wales' board with regard to post depths.
• "Reply" buttons changed to mw-ui-constructive (green)
• Changed the green color of unread posts to match the reply button color (avoid clashing)
• Going to a "Feed" view now removes any tabs. Returning to a board shows the tabs again.
• Taglist section no longer displays if there are no tags
• In Feed view, topics on own board no longer include your username
• In Feed view, the sort of topics is NOT based on "last update time". Instead:
  • Topics that you are subscribed to are sorted by last update time;
  • Topics that you are not subscribed to are sorted by create time.
    • This more accurately reflects the behavior when you are subscribed to a user but not every topic on their board
• Added a new sidebar section, "Back and Forths"
  • This gives you a "masquerade" view, so that you can see what the same topic will look like from the viewpoints of different users.
    • The first is your view.
    • The second and third are the views of two other participants.
• In Board view, all topics are expanded by default (for easier fast-scanning)
• Individual posts can be flagged as "abusive". This is the beginnings of a workflow; actual anti-vandalism functionality will require more work.
• Removed the "Jorm Board" - it was a redundant view
• Added in a couple use cases to the Board/Feed views:
  • A "you blocked someone" notice
  • A Barnstar
  • A Mention

May 4, 2013

• Read posts in any thread are collapsed by default, with an indicator to open all of them up.
  • Posts are not collapsed if the thread is collapsed
  • Collapse sections is an all-or-nothing deal
  • You cannot "re-collapse" read posts. Adding a control to every post is too heavy
  • Collapsing a thread will uncollapse all posts inside of it and remove the indicator
    • Reopening the thread will expand all posts
• On start up, a modal appears asking you for your user name.
  • The form saves it and operates as "that person" from then on.
  • This is saved to a cookie, which prevents the modal from opening in the future
  • There is a "clear saved username" link on the side.
• The feed link now treats itself as if it were the "logged in" user and does some replacing on text to imply that the conversations are happening with them (and not the original owner of the posts)

May 1, 2013

• Posts are automatically marked read as you scroll through them.
• Unread posts are significantly called out (green headers, experimental)
• Topic titles are now hot
• Rudimentary search functionality
  • Loading throbber
  • case insensitive
  • DOES NOT tokenize
  • searches titles, authornames, tags, postcontent
• Clicking the gear icon now brings up a menu
• Clicking the subscribe/unsubscribe stars now do things
• Clicking the tag icon now opens a small dialog (that doesn't work yet);
• Reply form auto-focuses to the textarea now.

April 30, 2013

• First version
• Different views load different json representations of various talk pages.
• Sidebar links exist for various Board examples:
  • Fully Chaos (everything is generated randomly.)
  • Jimmy Wales
  • Maggie Dennis (Moonriddengirl)
  • Brandon Harris (Jorm)
  • A single topic (this is what you get to if you get an echo notification)
• "Echo" badge brings user to a single topic (click on the entry by Writ Keeper)
• Clicking on the "Feed" link in the header brings you to your feed. The "feed" view is different from the "Board" view. The feed is private - it's all the conversations that you may be interested in or are subscribed to (have a solid star). You also see activity from the boards of *people* you're subscribed to as well, but it floats away fairly quickly if you don't subscribe to it.