As some of you know, I’ve been doing some work on the Single Post View. Both Mr ZYX and Denschub have had suggestions about ways to approach this, so I wanted to put together some mockups on our wiki.
Before any more coding / refactoring is done to the SPV, let’s discuss what we as developers and end users want from the single post view, and let’s explore ways to make it more usable.
Note: This discussion was imported from Loomio. Click here to view the original discussion.
The first one is more text oriented and the second one more picture oriented. For me, the error of our first single post view was to be too much picture oriented. Your current (the first) proposition is almost perfect for people who uses Diaspora as a blog (and many people does that). Another point : the second one looks exactly like libertree. So for me, the first one is better.
I think the beta view was an excellent idea which was never developed enough to be really usable. In a way it would be a shame to see it go completely. I wonder whether the ‘finished’ version could be back-ported from Makrio, which is what Dan used it for?
It’s good, and really elegant, for image-only posts or ‘mainly image’ posts with a little bit of text, but is too inflexible.
A user should be able to choose how the text displays over the image, as they can in Makrio.
Also, that beta view should be only one of several options - ideally the software would decide whether a post is image-heavy (and then show the beta view) or text-heavy (and then show a more text-based layout).
Those are my ideas for ‘saving’ the beta view. It was something new for a social network, and can be really elegant, so I’d like to think of ways it can be integrated into D* in a way which doesn’t cause people problems, if this is possible.
We certainly need it not to be the only option for displaying single posts, as for many posts it is just unworkable.
Both your versions look quite good, as Fla says each would work better for different types of post. The first for a longer blog-style post, the second for a shorter one. Alternatively, they could be two options that each user can choose in their settings how they will see single-post views.
Will read others’ thoughts and then come back to this.
I like the first mockup, and I felt that was really reminiscent of the initial implementation of this view. I think that view looks really modern and I really wouldn’t mind using that and permutations of it as the main UI for our site, even in the “Stream” view (though with a bit less “chrome”, perhaps).
That second view just looks silly to me. It implies some kind of real-time communication, or chat dialog going on. But it does raise the question: Is the single-post view supposed to be for viewing the original posted contents, or the comments that follow it? What exactly are we trying to emphasize here?
Not sure to understand the first mockups : is the second image the far bottom of the post or is it an expandable/hideable tray (so, larger than the existing one), while the content of the post is independently scrollable ?
Both propositions looks promising to me…
I do think the single post view is about communication and not about presentation, it’s the stream that presents, where you discover things, it’s the single post view where you interact, communicate. If that’s not the case we should stop linking it from the notifications.
I also don’t really like this boxed design approaches with lots of empty space, to be honest.
And what’s this debate about how to present a post, on what we consider more important, text or pictures? What are we trying to solve here? The best way to take decisions from the user? We already have the best way possible for a user to make a post look like he wants: Markdown. Lets just render that cleanly out, lets not cripple it. Trying to make design decisions for the user resulted in the current situation. It showed that we can’t predict the content.
So, I also was serious about reusing the elements we have in the stream already and iterate then on them. Lets reenable communication in the single post view first and then make it sexy. Step by step.
So I added some mockups to that page. Very rough ones. I’m not a designer, I never will be. Because I suck at it. Anyway you might want to take a look. Don’t expect me to work over those again though, they’re ideas, not “It should look like this!” stuff.
I like Jonne mockups. It is the same as sean’s second one without the libertree like boxes.
But Goob idea to later have a choice between this and an improved version of the existing one is interesting too (but demand more work).
Jonne’s mockup is interesting. I tried one with the media left 1/3-ish.
I like the last one 
I like Jonne’s last mockup, I think it makes better use of space than my alternate one. I also liked the layout and taking the iconified approach of my alternate proposal.
Perhaps I could take another stab at my alternate to reconcile the differences between Jonne’s design and my own, stripping a little of the extra chrome off?
I’ll try and get something up in a little bit.
@jonne : why separate the place where you like / reshare / comment (you place it at the top on the left frame) to the place where you show who liked, reshared and commented (on the right). This looks weird and non intuitive to me. We can go with your idea but I think that the original post should take more place (like 2/3) and every interactions should be in the other frame.
But really, I love the idea of the first mockup, a page like a book. But we should improve the way the interaction div is displayed.
@goob we are not talking about the beta profile (which is perfect for images, so could be turn to a photo album) but about the single post view.
@flaburgan We could group them at the top of the right side as well, I’d just like the ways to interact in a central place.
I still favour the middle split because I think in most cases when you visit the single post view you already read the post and know the contents, the new comments are interesting. I’d also like to ditch the grey background to pull the single post view back into Diaspora, currently it feels like a separate site. Also the contrast is better which makes it easier to read.
Here is a hybrid design between what Jonne and I have proposed. Some thoughts:
On the side of the post, there are our three interaction buttons: comment, like, and reshare.
Clicking the comment button would scroll the right pane all the way down to the comment form to write a new comment
Rather than showing the text directly for captions of each section, we can iconify them, and their meanings would be universally understood. Each icon on the right could display a number on top of it to demonstrate amount of likes, reshares, and comments.
As an aside, I’ve also cleaned up some of the alignments to make better use of space.
Most of the notes from the alternate proposal still apply, the only major difference would be that instead of having an always-present comment box, the comment box would instead be scrolled to automatically simply by clicking the “Comment” button.
Thoughts?
I like that one a lot more
It would definitely be something worth having as a basis for future polishing, like maybe some borders between the sections on the right side and moving the numbers to the left of the icons.
Since Sean largely adopted my ideas I’d be happy to hear other opinions of course.
Very nice. Good job!
I don’t like there are too many new font sizes in it. We really should reuse the exisiting ones. (example: the text right next to the profile picture of the author)
I also don’t like the like/comment/reshare-icon on the left side. I’d keep it like on the current SPV, just click on the icon on the right side (and, as Jonne said, move the numbers to the left of the icons)
awesome, a best of both worlds compromise!
i’m also fond of the “sean-jonne” file name. makes us more of a bling project.
Sean Jonne Jovi? 
@dennisschubert I agree on the font sizes, we can definitely standardize those a bit.
As for the like/comment/reshare buttons being on the right, my only issue is that putting it on the right side could cause it to lose focus if a user scrolls through the comments (unless we put those in a fixed-position box?). The user isn’t liking the comments, so part of me thinks that putting it on the left makes more sense. The user is, after all, initially interacting with the original post and content there, so it might make sense to keep the flow of interaction like that.
I like the new mockups too. Though I also agree with @flaburgan that the first proposal was interesting too and maybe more usable for narrow screens.
@sean: if the icons on left are to be hidden when the comments are scrolled down, the numbers should stay on the right to be visible all the time. (Or on both sides ?)
Maybe showing all these tiny people icons is not necessary and could be hidden (with say 3-4 showing) and expandable with a show more button. Any there has to be a limit because if a message get 1000 likes it would fill the all screen !
the only major difference would be that instead of having an always-present comment box, the comment box would instead be scrolled to automatically simply by clicking the “Comment” button.
I think the comment box should be always present at the bottom right. Only one line height, but always present, this save us one click (and clicks are rare ! :p)
Otherwise, I think we can go with that. And, btw, I can help for HTML / CSS
