Loomio
February 25th, 2013 17:47

Refactoring the Single Post View

Sean Tilley
Sean Tilley Public Seen by 82

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.

Flaburgan

Flaburgan February 25th, 2013 17:56

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.

goob

goob February 25th, 2013 18:11

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.

Tom Scott

Tom Scott February 25th, 2013 19:33

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?

Elm

Elm February 25th, 2013 20:02

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…

Jonne Haß

Jonne Haß February 25th, 2013 21:02

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.

Elm

Elm February 25th, 2013 21:17

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).

hewiak

hewiak February 25th, 2013 21:54

Jonne's mockup is interesting. I tried one with the media left 1/3-ish.

matl

matl February 25th, 2013 22:04

I like the last one :)

Sean Tilley

Sean Tilley February 25th, 2013 22:15

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.

Flaburgan

Flaburgan February 25th, 2013 22:40

@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.

Jonne Haß

Jonne Haß February 25th, 2013 23:12

@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.

Sean Tilley

Sean Tilley February 25th, 2013 23:24

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? :)

Jonne Haß

Jonne Haß February 25th, 2013 23:45

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.

Dennis Schubert

Dennis Schubert February 25th, 2013 23:52

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)

Tom Scott

Tom Scott February 26th, 2013 00:49

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 Tilley

Sean Tilley February 26th, 2013 01:26

Sean Jonne Jovi? ;)

Sean Tilley

Sean Tilley February 26th, 2013 01:31

@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.

Elm

Elm February 26th, 2013 07:48

  • 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 !

Flaburgan

Flaburgan February 26th, 2013 09:00

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 ;)

Jason Robinson

Jason Robinson February 26th, 2013 10:04

Wow, nice discussion and mockups. Really like the last version (http://wiki.diaspora-project.org/wiki/File:Spv-sean-jonne.png) .. awesome work guys, would really love that to happen!

Jason Robinson

Jason Robinson February 26th, 2013 10:05

Btw just to make sure, no separately scrollable divs etc, make the whole page scrollable as a whole otherwise some mobile browsers are real tricky. Not sure if the idea was to allow comments to be scrolled separately.

goob

goob February 26th, 2013 11:23

I like the latest version, the Sean–Jonne hybrid - clean, elegant, and presents information well. My only question is how it would deal with smaller screen sizes - not just mobile devices, but a browser window on an 800x600 monitor, for example. With two 'main columns' rather than one column and a side-bar, it could become a bit squashed even in a wide-ish window, especially if the post contains images.

Not a major problem, just something to think about as you're developing this.

@flaburgan - the single-post view currently is the beta-view, at least it is on jd.com

Jonne Haß

Jonne Haß February 26th, 2013 11:32

It could be easily made fluid by adding a media query that shifts the right section under the post section, making it one long column.

Flaburgan

Flaburgan February 26th, 2013 12:07

It could be easily made fluid by adding a media query that shifts the right section under the post section, making it one long column.

This can be a solution, because of course, the post and the comment have to be scrolled separately, we completely loose the interest to display comments next to the post if after 5 comments the post stays at the top of the page and nothing is displayed in the left frame.

@goob I thank you talked about the beta profile which has been removed, sorry about that.

Flaburgan

Flaburgan February 26th, 2013 12:10

@seantilleycommunitymanager I'd like to try hacking on HTML and CSS, can you please send me css files and images (like, reshare buttons...) by email (flaburgan@geexxx.fr), or post a link to them here ?

Jonne Haß

Jonne Haß February 26th, 2013 12:22

Hmm, I'd prefer to scroll them together actually I think. But I guess that's something we can easily change and try once we got a prototype or something.

goob

goob February 26th, 2013 14:24

Yup, media queries and the like should be an easy way of doing this - I was just pointing out that smaller screens would need to be taken into account when designing the single-post view. Thanks for all the ideas - it looks as though this is coming along nicely.

Florian Staudacher

Florian Staudacher February 27th, 2013 14:00

yeah, the last one really 'feels' like D* the most.
not sure how much white space there should be, really, or how to handle it in order not to "get lost" on that page, if by any chance there may be less content for some posts ;)

Rasmus Fuhse

Rasmus Fuhse February 27th, 2013 21:04

This looks awesome. I love your latest mockups a lot. What is the crolling-behaviour if both content and comments exceed height of the monitor? In libertree both are scrolled separatedly which works nice most of the time, but I'm not sure if this the additional scrollbar in the middle of the page would fit in your design.

And I totally second the comment-textarea that is static on the bottom right of the page.

M

mathis February 28th, 2013 16:44

i like the "libertree" one --> http://j.mp/Z07WgW , this kind of single post view should be just for posts of the user with no media content (images,video, ecc..) , i say that because i really like the actual single post view for videos and photos ( http://vimeo.com/37411394 ).
last thing: in the future will we talk about a new UI of diaspora (old beta profiles, new stream, new publisher ecc.. )?

Sean Tilley

Sean Tilley March 1st, 2013 02:16

Ideally, I'd love to see two-pane scrolling similar to Libertree's, but this would depend entirely on how well we could make it work across browsers, especially if we really want to take a responsive design approach to our mobile views in the future.

@mathis: I am certainly not opposed to discussing future interface designs, but I almost feel that if we were to completely revamp our designs and layouts, we may want to instead consider giving Diaspora proper theming capabilities in the long run. I think the "Beta" designs really showed us that not everyone wants a drastic redesign, and I think themes could address the idea of making certain layouts and templates optional, without having to add too many toggles in the user settings.

Flaburgan

Flaburgan March 5th, 2013 10:17

I'm currently working on a PoC of the new single post view, i'll put it online soon (this evening I hope, so in 8 hours for those who are not in Europa :p)

Flaburgan

Flaburgan March 5th, 2013 17:06

Ok guys, I work on some quick'n'dirty proof of concept to help us choosing. Here is the result :

Sean Jonne double scroll
Here is a suggestion about put the interactions button in the right part
The same but with only one scroll
Here is an example of some part we can choose to let fixed

Remember, this is absolutely not a pull request, the code is dirty, the design not polished, it's only about how to organize the view.

Jonne Haß

Jonne Haß March 5th, 2013 17:22

First of all awesome :)

I think I like the third one the most, though I still think a 50/50 or at least 55/45 one would be better.

Rasmus Fuhse

Rasmus Fuhse March 5th, 2013 18:55

Double scroll for the win! I vote for suggestion 2.

I was also wondering if the interaction-buttons should go to the top. Means, if I have read everything, I am on the top of the page and the interaction-icons are gone. But this is most likely the situation I want to like or reshare the posting.

hewiak

hewiak March 5th, 2013 19:16

@flaburgan & @rasmusfuhse how about 3 scrolling sections: with the text section stacked above the comments, each scrolling, with a left section (33/67–45/55, or whatever seems aesthetic) for any media also scrolling so that a photo series might play out nicely. the likes and reshares could act as defacto horizontal divider between the stacked text and comments.

Sean Tilley

Sean Tilley March 5th, 2013 20:12

@flaburgan I love the first one, although the second one makes a lot of sense too.

I also really liked the fixed comment box, although that will need to expand as text as entered into it for the sake of being readable. ;)

Jason Robinson

Jason Robinson March 5th, 2013 20:37

Super @flaburgan :)

I'm kinda not sure I like double scrolling, but I guess if we have the comments on the side like that we need to have it. We should just make sure it works on touch screen devices properly.

Personally I would only have the toolbar fixed and then have keyboard shortcut for jumping to comment box (like on current spv). Less fixed stuff - less clutter, the most important things are on the toolbar and the reshares etc you don't need to see while you are reading the post :)

But awesome to see it in action!

Flaburgan

Flaburgan March 5th, 2013 21:41

okay so we have different points of view. Personally my preferred is the second one because I think we should group like/reshare/comment icons, but it's true that the place at the right looks empty in the second example.

Another point : the design looks bad with a scroll in the middle of the page. The scroll is there by default, someone knows a way to display it at the left instead of at he right of the div ? Want to try...

Ivan Gabriel Morén

Ivan Gabriel Morén March 6th, 2013 01:29

Hey everyone! Love to see all the proposals you've come up with! Having the comments on the side seems to be an fantastic idea!

However, one of the most important things about the single-post view, in my opinion, is the clean, aesthetic look. The ability to hide all comments is of big importance in this subject, and I propose that we keep that. Whether this is done with a show-comments button or in another way doesn't really matter, but the comments shouldn't distract from the main content.

Hiding the comments doesn't mean we have to abandon the double scrollbars or the following commentbox or anything like that, it's just a way of implementing this idea in a more slick and diasporich way! :)

Ivan Gabriel Morén

Ivan Gabriel Morén March 6th, 2013 01:32

Oh, and I made an "concept drawing" or something too. Just follow the link below and please do not read the source code, it looks like crap ;)

http://docs.babillage.org/diaspora/

Flaburgan

Flaburgan March 6th, 2013 07:54

add the possibility to hide the interaction panel is a really good idea. But should we show it or hide it by default?

Jonne Haß

Jonne Haß March 6th, 2013 09:33

@ivangabrielmorn @flaburgan I made my point about this earlier, I'd like to encourage you to read it again. It's he comment with the most likes in this discussion, so I don't think I'm too overreacting by heavily emphasizing that. The main usage for the SPV isn't consumption, that happens in the stream. It's about interaction. Coming back answering comments. That sort of stuff.

Jason Robinson

Jason Robinson March 6th, 2013 09:55

I tend to agree with Jonne here about the hiding stuff :)

Flaburgan

Flaburgan March 6th, 2013 10:08

Just a precision, the width is currently 55% for the content panel and 45% - (margin + padding) for the interaction panel

Jonne Haß

Jonne Haß March 6th, 2013 10:29

Plus padding and margin, so it looks more like a 2/3 split to me.

Flaburgan

Flaburgan March 6th, 2013 11:00

yep.

I read again your comment Jonne and I disagree about the major part is interaction.

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.

You can do everything directly in the stream : read the post, like, reshare, comment, read comments... Every interaction possible with the single post view can already be done using the stream. But a long article, or a post containing many pictures is not pleasant to read in the stream because of the small width. If you want to quickly answer to a post, you can do that in the stream.

So for me, the single post view should be more content oriented.

Adding to that, you cannot read in two different places in the same time, so switch from content to interactions has to be easy, but do we really need to present both in the same time ? (it's a real question, not a rhetoric one :p)

I will create the first Sean suggestion to help us make a choice. It will be available here soon.

Flaburgan

Flaburgan March 6th, 2013 11:18

The proposition is on line. Another big advantage : this single post view is perfect for mobile navigation..

Jonne Haß

Jonne Haß March 6th, 2013 12:24

Then let me quote myself too:

If that's not the case we should stop linking it from the notifications.

I agree that you start interaction in the stream. But you don't maintain it there.

Flaburgan

Flaburgan March 6th, 2013 12:52

I think about that too. The link in notification could be directly on #interaction-frame, as done in this last proposition with the arrow down.

I like the two different approaches, what i'm talking about is just suggestions

Flaburgan

Flaburgan March 6th, 2013 12:59

(we can even link directly to the comment in notification, not only on the post page)

PG

Paul Greindl March 6th, 2013 14:15

@jonneha That's right. But wouldn't it then be better to optimize the SPV for both presentation and interaction? Personally I stand for hiding the comments on one side. So I would suggest to open the SPV with "comment bar" opened when coming from a notification. Otherwise I think it's not too bad to be able to hide the comments and get a slick way of presenting content plus that, what Fla said, we could easily link to the relevant comment :)

Jonne Haß

Jonne Haß March 6th, 2013 16:30

I mean, do we really need all that space? How would a post optimized for all that space look in the streams? And I still like the full width layout a lot more. There's space on my screen! Lets use it!

Flaburgan

Flaburgan March 6th, 2013 17:09

There's space on my screen! Lets use it!

Speaking only about design, the double design is really more heavy than the not divided one. It's like the main Diaspora design, we could put float:left and float:right on the two column and let the stream occupy the whole space, but by doing that, the screen become really heavy (I don't know the word but I think you understand)

Jonne Haß

Jonne Haß March 6th, 2013 18:09

Guess that's going to be a majority decision then, because I mostly feel the opposite way. Indeed I think I'd like it if we gave the stream+sidebars at least 90% of available the space :)

(I think the term you searched for is overloaded.)

Flaburgan

Flaburgan March 6th, 2013 21:58

yep thank you, overloaded is the word.

It's all about "modern design" vs "best usability".
I'd also like to see the stream+sidebars to 90%. But Diaspora is more design oriented, which can e a good thing, look at friendica and libertree...

So I really don't know. I think the important points are :

  • The content and the interactions have to be accessible in a few click

  • Content has to be correctly displayed

  • The svp should not give the impression to be a separate website

If this is respected, I'm happy :D

Jason Robinson

Jason Robinson March 7th, 2013 08:12

The current single post view shows that posts do not like to be stretched to the whole monitor. It just looks ugly. I'd prefer to keep a more consistent design with the main stream and split the screen in two - posts and comments.

Mobile users have a separate UI so those screens shouldn't matter here - unless we are planning on going responsive which would be a bigger change.

Flaburgan

Flaburgan March 7th, 2013 14:44

Okay so to help us choose, I'm back with a new work : trying to see with different content.

So for each possible views, I put three different contents : the first one is a huge text (an article from wikipedia), the second one is a text with only one line, the third one is a post with 6 pictures.

Here are the links:

Comments on the left, double scrolls:
Big text, Short text, Pictures

Comments on the left, unique scroll:
Big text, Short text, Pictures

Comments at the bottom:
Big text, Short text, Pictures

So, what do you prefer ?

(will be on line soon, no ftp at work)

Sean Tilley

Sean Tilley March 7th, 2013 18:05

After playing with all of them, I still think I like the double scroll the most.

goob

goob March 7th, 2013 19:10

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.

Flaburgan

Flaburgan March 7th, 2013 19:15

@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.

Ivan Gabriel Morén

Ivan Gabriel Morén March 7th, 2013 20:07

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.

Flaburgan

Flaburgan March 7th, 2013 22:35

Another work :)

Mixed !

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 ?

Florian Staudacher

Florian Staudacher March 8th, 2013 09:01

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* ?

Flaburgan

Flaburgan March 8th, 2013 09:04

@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 ?

Erwan Guyader

Erwan Guyader March 8th, 2013 10:12

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

PG

Paul Greindl March 8th, 2013 12:09

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 :)

Flaburgan

Flaburgan March 8th, 2013 12:30

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.

Rasmus Fuhse

Rasmus Fuhse March 8th, 2013 12:48

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?

PG

Paul Greindl March 8th, 2013 13:09

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?

Rasmus Fuhse

Rasmus Fuhse March 8th, 2013 13:27

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?

Rasmus Fuhse

Rasmus Fuhse March 8th, 2013 13:33

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?

PG

Paul Greindl March 8th, 2013 13:38

@rasmusfuhse Japp, hot ;)

Flaburgan

Flaburgan March 8th, 2013 14:11

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.

Jonne Haß

Jonne Haß March 8th, 2013 14:52

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.

Rasmus Fuhse

Rasmus Fuhse March 8th, 2013 15:38

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.

Flaburgan

Flaburgan March 8th, 2013 15:47

@paulrichardson about your poc : the width of the post should expand when the comments are hidden, else you lose the interest to hide them :p

PG

Paul Greindl March 8th, 2013 16:00

@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.

PG

Paul Greindl March 8th, 2013 16:11

@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.

Jonne Haß

Jonne Haß March 8th, 2013 16:45

I just wanted to say that we should keep stuff that affects other parts of the app out of our heads for now, like the special casing when linking from the notification or getting back to the stream on point where you left is way out of topic here. And mocks should reflect that, they should work with leaving the rest of the app untouched. I consider stuff that needs to touch the other, working parts as a feature.

Flaburgan

Flaburgan March 13th, 2013 08:58

Okay guys it's time to take a decision !

Jonne Haß

Jonne Haß March 13th, 2013 09:08

Hm, maybe we can do a public approval voting on all mockups?

Sean Tilley

Sean Tilley March 14th, 2013 02:45

Sounds good to me, how do you want to do this? We have several really good working mockups from @flaburgan, how should we go forth with determining which designs we ultimately want the most?

goob

goob March 14th, 2013 12:41

Perhaps they could each be given a letter A, B, C and so on, and we could either post here which one we like the most, or rank our favourite three in order.

Jonne Haß

Jonne Haß March 14th, 2013 14:38

@goob that's not how approval voting works: http://en.wikipedia.org/wiki/Approval_voting

goob

goob March 14th, 2013 14:51

Jonne, I don't understand your comment. Sean asked how best to do this (to select which was the favoured draft single-post view); I suggested two possible methods of doing this. Neither of my suggestions are intended to be your 'approval voting'.

Flaburgan

Flaburgan March 19th, 2013 15:47

I think we simply should vote about the blocking points : add possibility to hide comments, two scrolls or one... and at the end, we will be able to make it.

goob

goob April 8th, 2013 17:36

Is there any reason why the original single-post view can't be restored? Is it incompatible with the current code-base? It might be simpler than creating a new one.

Or, even better, the two (or more) SPV designs could be presented as user options, so people can select which one they prefer using.

Flaburgan

Flaburgan April 8th, 2013 19:08

the code base would be more complex with an option system. But I agree we should look at this previous SPV first. I'll try to look at the pistos code.

Sean Tilley

Sean Tilley May 1st, 2013 17:51

Pinging this discussion again. I've had some more spare time open up, and I wouldn't be against taking another stab at this. Our currently SPV is less-than-stellar, and I worry that it might possibly even hurt adoption from future users.

I guess my primary question as a starting point is, how do we render the SPV using stream elements, as was suggested in the past?

We can split this up into several things that need to happen:

  1. Decide once and for all on a reference design mockup to work from. We have some really good ideas, they just need to be streamlined and then polished.

  2. Fix the visuals of the SPV to make use of this new design, possibly being built out of stream elements.

  3. Purge as much of the old SPV-related stuff as possible. Kill it with fire. That means post-viewer templates, some Backbone code, etc.

Flaburgan

Flaburgan May 2nd, 2013 08:50

I should have more time in May to work on that, did not do anything in April, sorry...

Btw, after some big discussion with users, it seems that the "simple" revert of the spv should be considered as an option too.

Jonne Haß

Jonne Haß May 2nd, 2013 09:40

"simple" indeed. Can't have enough quotes around that. On a coding level my effort estimation doesn't change, no matter if we go a step backward or forward. I'm thinking you get that feedback because that's what people know, the last change made it worse, so they're not trusting a new approach.

Jason Robinson

Jason Robinson May 2nd, 2013 10:33

Could we have a vote on the most popular designs that have been talked about here? Basically Loomio supports 4 options in a vote.. Anyone want to collect the designs?

Please lets drop the "rollback to before current SPV" - that is going backwards - we need to think forward :)

Flaburgan

Flaburgan May 2nd, 2013 11:51

Please lets drop the "rollback to before current SPV" - that is going backwards - we need to think forward :)

We need to do something integrated in the diaspora website, the current spv is something apart, and simply add a header will not solve this problem. We have to go forward, sure, but by keeping an uniformity to the website.

goob

goob June 9th, 2013 13:23

Is it worth posting a notice using the Diaspora HQ account asking for people willing to work on this? It's a major issue and there's general agreement about what to do - it's just the fine-tuning of how the design should be and how it should function.

If this would be useful, what should the notice say?

If we can have a vote on four of the mock-ups using the schema Jason outlined below ('Yes' to vote for option 1, 'Abstain' to vote for option 2, 'No' to vote for option 3, 'Block' to vote for option 4) and make a decision, we can then ask anyone who's keen to help to get stuck in on creating the code for it.

Jason Robinson

Jason Robinson started a proposal June 9th, 2013 17:55

Design for single post view Closed 6:00pm - Sunday 16 Jun 2013

Got to start voting down on design somewhere, so here we go. As we haven't had any new mock-ups recently and to be honest any of the designs would be awesome. Of course our awesome coders will make them easier to modify than the current SVP :)

So, here are the contestants. Vote by choosing the correct option. NOTE! Discussion is still allowed and encouraged - we can change the options and reset the timer if needed.. And we are voting on a general design - small details like animations etc can be set later.

1) YES - http://wiki.diaspora-project.org/images/c/c8/Mockup-Singlepostview.png / http://wiki.diaspora-project.org/wiki/Refactor:_Single_Post_View#Alternate_Proposal

2) NO - http://wiki.diaspora-project.org/images/a/ad/Mockup-Singlepostview-hewiak-Combo1.png / http://wiki.diaspora-project.org/wiki/Refactor:_Single_Post_View#More_mockups

3) BLOCK - http://wiki.diaspora-project.org/images/4/45/Spv_mock_mrzyx_big_image.png / http://wiki.diaspora-project.org/wiki/Refactor:_Single_Post_View#More_mockups (second image)

4) ABSTAIN - http://wiki.diaspora-project.org/images/e/eb/Spv-sean-jonne.png / http://wiki.diaspora-project.org/wiki/Refactor:_Single_Post_View#Reconcilation_of_Designs

Results
Agree - 1
Abstain - 1
Disagree - 1
Block - 1
16 people have voted (0%)
Jason Robinson

Jason Robinson
Abstain
June 9th, 2013 17:56

SuperTux88

SuperTux88
Abstain
June 9th, 2013 17:58

Sean Tilley

Sean Tilley
Abstain
June 9th, 2013 22:00

I like this one the most. Fits pretty naturally into Diaspora's look, isn't too radical, but it's way easier to read and use.

theradialactive

theradialactive
Abstain
June 9th, 2013 22:31