Photo Credit — Pixabay.com

Navigating Medium’s responses labyrinth

Am I reading a story or a response, which is a story or am I reading a response to a response? Or Wait, looks like I’m reading a response to a response but I don’t know for which main story this is?

Above are my general reactions when navigating “responses” to a story on Medium. The concept of a “response” to a story being treated like a story in itself is one of the best thing I like about Medium. This concept has multiple known benefits such as discovery and distribution for a “response,” which otherwise might have been relegated to some deep corner in the heap of responses. Some lesser-known benefits are that it nudges, albeit subtly, content consumers like me, to make a leap forward and participate in meaningful conversations. The assurance that one’s “response” to a story is equivalent to writing a story and will be treated equally is rewarding and motivating to make that leap.

While great, this concept creates navigational challenges between stories and responses and has not been fully addressed by Medium. This is an attempt to suggest some changes to improve the experience of navigating between stories and responses.

To start, a story and nested responses in a Medium story can be represented by a nested tree.

Story and nested responses can be represented as a tree

In the above image, R1 is the first direct response to the main story and Rn is the nth direct response to the story. R11 is the first direct response to R1 and R1n is the nth direct response to R1. Similarly, R111 is the first direct response to R11 and R11n is the nth direct response to R11.

Supported scenarios

A user can navigate vertically (i.e. down) the tree from any level to any other level.

For example, from the main story to R1, from R1 to R11 and so on and so forth. Below images shows this flow

Main Story page with multiple responses. Note the first direct response (R1) has 23 next level direct responses. The Second direct response (R12) to R1 has 3 direct responses.

The first direct response (R1) has 23 direct responses. Second direct response (R12) to R1 has 3 responses (i.e. R121, R122, R123)

First direct responses to main story (i.e. R1) has a reference to main story. Next to next level direct response (R111) has a reference to the parent response (R11).

First direct responses to main story (i.e. R1) has a reference to main story and (R111) has a reference to the parent response (R11)

Missing scenarios

Instant access the main story irrespective of the level of the tree the user is in.

If the user is reading the response R1112 and would like to refer to the main story, she should be able to navigate to the main story. She shouldn’t be forced to climb the tree branches to reach there. This appears to be a frequent scenario in which the user has discovered a response from her feed and would like to reference the main story in order to understand the context

Allow a user to easily navigate horizontally at any level in either direction (left and right).

If the user is on response R3 and would like to go to response R2 or R4, the user needs to go back to the main story. Or worse, if the user is on response R1113 and would like to go to response R1112 or R1114, not only would the user would have to come back to one level up, she would have to figure out which was the response she was at and which are the next and previous responses.

Proposals

I have made the following assumptions while evaluating various alternatives and coming up with a proposal.

Assumptions

  1. Proposal is for web only. Mobile app requires another story.
  2. The hierarchy (story to responses) is static and not changing in near future. New sub-level elements will not be introduced.
  3. Empty space in the left and the right side of a story cannot be used. Assumption (to an assumption)— Medium team had removed previous attempts at using this space. Remember, when one could see responses to a text on the right side of the text. It’s since been replaced by (*), which, on click, takes the user to the associated response.
  4. Proposals should work within the constraints of the current interface.
  5. Functionality for showing only those responses, which have been whitelisted by the author or are from the user’s network, is applicable as it is for navigating horizontally across responses.
  6. References to activity (response to a highlighted section) in user’s Profile page does not necessarily need to change.
  7. There are no constraints w.r.t the data model.
  8. Usability testing and A/B testing would be used to iterate to decide on the final design.

Questions

Following questions were thought through to evaluate the options and guide the proposal

  1. Should response hierarchy be represented in any fashion? If yes, is indentation needed? Is there a need to show reference to the “main story” connected to the response, for which the response is being read?
  2. Should count of recommendations and responses represented in reference to the main story or the previous and the next response?
  3. Placement — Should reference for access to main story or previous/next responses be available at bottom or top of the current response or at both places? If at bottom, should it be above “Next from your reading list” or below “Responses” or “Write a response”? Should these references be part of the temporary overlay bar that appear at the bottom of the screen and houses call to actions for sharing and bookmarks?
  4. Should reference to the previous and the next responses appear exactly the way the reference to the parent response appear? (i.e. the way reference to R1 appear when the user is on R11 page)
  5. Should the user be able to swipe (or click) left or right at any point in the story to go to the previous or next response (or story) horizontally? This experience on web is similar to experience on the mobile app, where swiping left or right on a story takes the user to the previous or next story.

Proposal 1

Instant access the main story irrespective of the level of the tree the user is in.

Main story is always presented at the top and a vertical line (solid or partially dotted) connects the response to the main story.

This construct allows the main story to be always accessible from any point in the response labyrinth. Ability to specify the hierarchy also influenced the decision with respect to the position of the main story (i.e. top of the page or somewhere in between or bottom of the page.)

Vertical lines helps in representing relationship of the responses to the main story and thus helps in providing much needed context to the reader. Solid line represents relationship between direct response and the main story.

Solid line connecting the main story to the direct response (R1)

Partially dotted vertical line represents relationship between the main story and a non-direct response (i.e. response is at some level in the response tree other than the level of a direct response to the story).

Partially dotted vertical line connecting the main story to a non-direct response
Allow a user to navigate horizontally at any level in either direction (left and right).

Left and Right navigational arrows allow the user to traverse to the previous or next response at the same level. This experience is intuitive, takes advantage of the mental model with respect to navigation and removes ambiguity. It is also consistent with the experience on the Medium’s mobile app, where in a user can swipe left or right to go to the previous or next story on the app.

Traverse to previous or next story or response depending on where the user is on the response tree

One of the drawbacks of the above approach, apart from any technical constraints or moving away from minimalist design, is that the user has not been given any clue into the previous as well as next story or response. They are entering into a blind alley, which are good for e-commerce and shopping use cases because of the serendipity involved. A way to mitigate this drawback is to give sneak peek into the previous or the next response on hover.

One of the other options is to make the previous and the next response available at the end of the responses to the current response or the story, just above the section — “NEXT STORY from your READING LIST”. This is similar to the contemporary webpage navigation experiences. The available length has been divided between the previous and the next response, and placed on the left and right side respectively to visually denote the direction.

If the user is on Response (R12), then previous (R11) and next response (R13) is available side by side at the bottom of the page of R12.

If there is only 1 response (i.e. current response) than the previous and next response section is not shown. If the current response is the last response, then only previous response is shown and it covers the full available length. If the current response is the first response, then only next response is shown and it also covers the full available length.

Multiple variations with separations between next or previous responses, or indentation, etc. can be tested to come up with a delightful experience. An argument can be made against the need for having access to previous response. The assumption being that the user would have come to the current response from the previous response, and hence access to the previous response is redundant.

Once again, the concept of a “response” to a story being treated like a story in itself is one of the best thing I like about Medium. Improving the navigation experience will not only improve interaction and engagement with the story and the responses, but also help the user in her reading journey on Medium.