With all of that in place it is now time to start putting together the client-side structures that gives the end users a product. And before that can happen it becomes necessary to know, at minimum, the rough idea of what the user will see and how those visuals will indicate what they can do. Of course, this is all determined by what the goal of the software is.
I said earlier that I'm creating a comment system but commenting systems have been done to death, right? Forums, Disqus, and website-specific comment thread styles such as Youtube, Facebook, Twitter, Medium, The Verge, Slashdot, Reddit, NY Times, Washington Post, etc. etc. all abound. So why make another? Because, as I typed before, I have yet to read a comment threading system that handles nested comments well. We've all experienced this: depending on the width of the screen you can get about three to six comment replies deep before the width of the response comment makes the comment either obnoxious to read or just plain unreadable. Further, in threading systems where it is possible to manage nesting levels you end up in the position of collapsing and expanding constantly in addition to juggling thread-level settings in an attempt to see a nice cross-section of viewpoints and responses. All of this means that only the top crop of comments in different sorting arrangements are seen and engaged with by the vast majority of readers.
Now that the problem has been identified what is the root cause? Fundamentally, there is a mismatch between the dimensionality of how conversations work, which is rooted in--at least-- two-dimensional branching pathways, and the dimensionality of typical comment threads, which are, at most, 1.5-dimensional.
So if the problem is a spatial mismatch we fix it by, of course, removing said mismatch in the form of a two-dimensional commenting system. On the horizontal or x-axis we put all direct responses to a thread topic or a specific comment. On the vertical or y-axis we place all nested responses for a single conversation branch. And just like that, no more left-justified comment width crunch!
Now that we've outlined the solution it's time to mock-up some quick visuals to get a feel for how the idea will look in practice. Below is the result of that process:
So far so good. There is the vertical and horizontal swiping-to-scroll familiar to all mobile users along with dimming to give clear cues about which conversation thread is currently being explored.
With the main comment grid system visualized, the next phase is fleshing out the UI pieces that support this centerpiece. I had come across a wire-frame and mock-up service called InVision and so I began exploring that software as I worked. The result follows:
I also wanted to get a quick feel for something vibrant and playful and ended up going a bit overboard splashing color everywhere ;) In any case, this set up the overarching mobile-first column design that is, again, familiar to all mobile users. With the general visual structure sketched out, it was time to breathe some life into it with some code.
Next.