Those are looking really good, Fla.
I’d say use the one with double scrolls for larger screens, and (with a media query) the one with the comments at the bottom for smaller screens.
The only thing I’d add would be that when comments are underneath the main post, there should be a ‘read more’ bar hiding the post after a certain amount, as there is in the stream in D*, to avoid huge amounts of scrolling for very long posts.
But I really like what you (and Sean) have produced.
@goob You have an arrow pointing down on the right to go directly to the beginning of the comment. And you have the comment icon to go directly to the comment box.
But I agree with what @flaburgan said earlier, the impression I get from the double scroll mock-ups as they’re designed now is Over Loaded.
After that I’ve looked at and tested all the views and re-read a lot of comments and opinions I still think that hiding the comments and letting the post section and the comments section be two different things. Also I agree with @jasonrobinson saying that stretching the whole thing won’t work out that well, I’d like to see some kind of box for the post/comment section, though not that wide maybe.
I did not really get why hiding would be an bad idea, apart from that it took the focus away from the discussion. And that could easily be fixed by showing the comments section automatically if the link was in a notification.
Mixed with scrolls
Big Text, Short Text, Pictures
Mixed without scroll
Big Text, Short Text, Pictures
I hope to correctly deal with the overloaded problem with these propositions, which add design but conserve functionalities. What do you think about it ?
I really like the double scroll, since that seems the most usable to me. the OS scroll bars might be ugly, but that could be dealt with by a plugin (http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html) and then we could style and place them as we want.
Also, I think the mockups with the white background are more in-line with the overall style on D*. I think we should try not to introduce any new elements that are not already on the stream (if at all possible).
The overloaded look might come from the font-size, which is a bit bigger in the mocks than normally seen on D* ?
@florianstaudacher i also found jscrollpane, do you think that move the middle scroll to the left is a good idea or will break accessibility / common usages ?
I’ve been looking at all these propositions and here are some thoughts :
1 - If you can scroll, you should see the scrollbars
It’s really disturbing not to see the scrollbars and you can’t expect the user to know she can scroll without seeing them.
2 - Thinking mobile first is a general good idea
I think we should use the capabilities of our smartphones such as gestures and build on top of that.
For example, we could imagine cutting a post into pages and swiping to the left to go to the next page and having a button to have the comments fall down from the top of the screen and scroll through them.
On a big screen, we could use the idea of having both post and comments on the same page but still use different interactions for each one :
- a button to go to the next page (like a right arrow in the top right corner of the post)
- scrollbars for the comments
Hi again! As the tendencies are going towards a clean and not overloaded split SPV Ivan and me have remade our proposal. As Ivan wrote earlier we have read through all the comments again to be sure we know what everyone thinks and then made a new mock-up focused on a clean design without harming user interaction.
Find the concept mock-up here: http://docs.babillage.org/diaspora/
It’s in three different background colors, the white one would need a little face-lift as it does not look soo good right now.
To open comments simply click one of the icons or next to the boxes. Besides that our concept of course includes automatically opening the comment area when coming from a notification. It could even be considered to have the comments open as default, even if I personally think that it would take away the presenting factors.
Please let us know what you think! And don’t save on criticism, but please constructive, it’s the only way to make something better
Nice work. The idea to hide comment is great for me. But maybe we can make something more close to what the spv is currently, but with the panel on the right instead of at the bottom. No time to do a PoC for the moment but will try later.
Paul, I really like your approach. Some points:
- Right now clicking on the like/share/comment-toolbar always toggles the sidebar. That looks absolutely nice, but I am not aware if it. Can you wrap it in a grey a-element (could still be display:block), that has a hover-color or something? And also the cursor should be a pointer when hovering. I need to know that I can click on this.
- I have a casual display here, but ain’t using my browser in full-screen-mode. So I needed to scroll to the right to see the comments or see the scrollbar there. Probably you could autoscroll to the right, when it appears?
I would also like to have a button which takes me back to the stream in exact the place where I left it. What do you think?
If this is possible: hell yeah!
I thought, because the stream is perpetually reloaded with infinite-scroll this is a rather hard task to jump back at the exact position from where I came, isn’t it?
Oh and one more thought, in regard of Jonnes theory that the spv is for communicating rather than presenting (which is not always right, but most of the times):
- Could we hide the sidebar exacty then if I have not commented on this posting yet? So if I already commented the sidebar will be shown from page-load and if I didn’t participate in the discussion yet, the sidebar will be hidden and I can see a nicely presented posting.
Hot or not?
So if I already commented the sidebar will be shown from page-load and if I didn’t participate in the discussion yet, the sidebar will be hidden and I can see a nicely presented posting.
I’d say not, because if you come on the post it’s probably to comment. In any case, the users will probably find that inconsistent, so I’d like to keep things simple.
Keep it simple is the word. Guys you’re over-thinking. The current SPV is broken, it feels clumsy, it doesn’t fit into Diasporas design. The immediate goal is to lay the ground for what might come there. Like reacting to the current situation in a intelligent manner. But for now it should simply be the best compromise between presenting the post and enabling communication (and yes, I still would emphasize the later). Once that ground work is done, we can iterate, add all those catchy things and whatnot. But this is not yet the time.
Over designing this, trying to match every possible situation and use case, right now, will only result in it never happening. I consider the current SPV as broken as a bug. Bugs need to be fixed. You’re talking about features already. Features introduce new bugs. We got enough of them for now.
Yeah, if someone starts working on that page - go ahead. We’re just talking about mock-ups here.
But what I think is the difference between Diaspora and Friendica is, that Diaspora is looking and feeling very nice and Friendica is looking and feeling ugly. Some thoughts in nice UI could make a difference.
@paulrichardson about your poc : the width of the post should expand when the comments are hidden, else you lose the interest to hide them
@jonneha Exactly what I’ve earlier said: we should make up a plan and phrase a goal, otherwise we’ll do all the work at least twice. I think that’s a little bit the problem Diaspora had earlier: just doing and fixing everything for now, without a real plan how to go on afterwards.
And that’s exactly what I’m trying here, I try to find out what we need and what we want. We’re experimenting with different design approaches, discussing features and possibilities, I don’t really see a problem here.
For the realization I, and I think everyone else as well, don’t expect a full implementation the first day. But I think it’s not a good idea to fix this “bug” for now, only to rewrite the SPV again, in a couple of month.
@flaburgan For me hiding is not necessary about making more room for content, even if that’s a functionality that’s worth discussing, but rather to make the post/interface cleaner. Hiding the comments also gives the SPV this little extra which would make it suitable for presenting content, and that not only within the diaspora community but also outside. So I’m as well taking in account that we should create a good looking face, towards the world, for diaspora.