Loomio

Refactoring the Single Post View

ST Sean Tilley Public Seen by 96

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.

JH

Jonne Haß Mon 25 Feb 2013 11:12PM

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

ST

Sean Tilley Mon 25 Feb 2013 11:24PM

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

JH

Jonne Haß Mon 25 Feb 2013 11:45PM

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.

DS

Dennis Schubert Mon 25 Feb 2013 11:52PM

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)

TS

Tom Scott Tue 26 Feb 2013 12:49AM

awesome, a best of both worlds compromise!

i'm also fond of the "sean-jonne" file name. makes us more of a bling project.

ST

Sean Tilley Tue 26 Feb 2013 1:26AM

Sean Jonne Jovi? ;)

ST

Sean Tilley Tue 26 Feb 2013 1:31AM

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

E

Elm Tue 26 Feb 2013 7:48AM

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

F

Flaburgan Tue 26 Feb 2013 9:00AM

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

JR

Jason Robinson Tue 26 Feb 2013 10:04AM

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!

JR

Jason Robinson Tue 26 Feb 2013 10:05AM

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.

G

goob Tue 26 Feb 2013 11:23AM

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

JH

Jonne Haß Tue 26 Feb 2013 11:32AM

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.

F

Flaburgan Tue 26 Feb 2013 12:07PM

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.

F

Flaburgan Tue 26 Feb 2013 12:10PM

@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 ([email protected]), or post a link to them here ?

JH

Jonne Haß Tue 26 Feb 2013 12:22PM

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.

G

goob Tue 26 Feb 2013 2:24PM

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.

FS

Florian Staudacher Wed 27 Feb 2013 2:00PM

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

RF

Rasmus Fuhse Wed 27 Feb 2013 9:04PM

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 Thu 28 Feb 2013 4:44PM

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

ST

Sean Tilley Fri 1 Mar 2013 2:16AM

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.

F

Flaburgan Tue 5 Mar 2013 10:17AM

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)

F

Flaburgan Tue 5 Mar 2013 5:06PM

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.

JH

Jonne Haß Tue 5 Mar 2013 5:22PM

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.

RF

Rasmus Fuhse Tue 5 Mar 2013 6:55PM

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.

H

hewiak Tue 5 Mar 2013 7:16PM

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

ST

Sean Tilley Tue 5 Mar 2013 8:12PM

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

JR

Jason Robinson Tue 5 Mar 2013 8:37PM

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!

F

Flaburgan Tue 5 Mar 2013 9:41PM

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

IGM

Ivan Gabriel Morén Wed 6 Mar 2013 1:29AM

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

IGM

Ivan Gabriel Morén Wed 6 Mar 2013 1:32AM

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/

F

Flaburgan Wed 6 Mar 2013 7:54AM

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

JH

Jonne Haß Wed 6 Mar 2013 9:33AM

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

JR

Jason Robinson Wed 6 Mar 2013 9:55AM

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

F

Flaburgan Wed 6 Mar 2013 10:08AM

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

JH

Jonne Haß Wed 6 Mar 2013 10:29AM

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

F

Flaburgan Wed 6 Mar 2013 11:00AM

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.

F

Flaburgan Wed 6 Mar 2013 11:18AM

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

JH

Jonne Haß Wed 6 Mar 2013 12:24PM

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.

F

Flaburgan Wed 6 Mar 2013 12:52PM

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

F

Flaburgan Wed 6 Mar 2013 12:59PM

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

PG

Paul Greindl Wed 6 Mar 2013 2:15PM

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

JH

Jonne Haß Wed 6 Mar 2013 4:30PM

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!

F

Flaburgan Wed 6 Mar 2013 5:09PM

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)

JH

Jonne Haß Wed 6 Mar 2013 6:09PM

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

F

Flaburgan Wed 6 Mar 2013 9:58PM

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

JR

Jason Robinson Thu 7 Mar 2013 8:12AM

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.

F

Flaburgan Thu 7 Mar 2013 2:44PM

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)

ST

Sean Tilley Thu 7 Mar 2013 6:05PM

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

G

goob Thu 7 Mar 2013 7:10PM

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.

F

Flaburgan Thu 7 Mar 2013 7:15PM

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

IGM

Ivan Gabriel Morén Thu 7 Mar 2013 8:07PM

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.

F

Flaburgan Thu 7 Mar 2013 10:35PM

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 ?

FS

Florian Staudacher Fri 8 Mar 2013 9:01AM

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

F

Flaburgan Fri 8 Mar 2013 9:04AM

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

EG

Erwan Guyader Fri 8 Mar 2013 10:12AM

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 Fri 8 Mar 2013 12:09PM

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

F

Flaburgan Fri 8 Mar 2013 12:30PM

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.

RF

Rasmus Fuhse Fri 8 Mar 2013 12:48PM

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 Fri 8 Mar 2013 1:09PM

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?

RF

Rasmus Fuhse Fri 8 Mar 2013 1:27PM

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?

RF

Rasmus Fuhse Fri 8 Mar 2013 1:33PM

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 Fri 8 Mar 2013 1:38PM

@rasmusfuhse Japp, hot ;)

F

Flaburgan Fri 8 Mar 2013 2:11PM

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.

JH

Jonne Haß Fri 8 Mar 2013 2:52PM

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.

RF

Rasmus Fuhse Fri 8 Mar 2013 3:38PM

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.

F

Flaburgan Fri 8 Mar 2013 3:47PM

@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 Fri 8 Mar 2013 4:00PM

@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 Fri 8 Mar 2013 4:11PM

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

JH

Jonne Haß Fri 8 Mar 2013 4:45PM

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.

F

Flaburgan Wed 13 Mar 2013 8:58AM

Okay guys it's time to take a decision !

JH

Jonne Haß Wed 13 Mar 2013 9:08AM

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

ST

Sean Tilley Thu 14 Mar 2013 2:45AM

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?

G

goob Thu 14 Mar 2013 12:41PM

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.

JH

Jonne Haß Thu 14 Mar 2013 2:38PM

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

G

goob Thu 14 Mar 2013 2:51PM

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

F

Flaburgan Tue 19 Mar 2013 3:47PM

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.

G

goob Mon 8 Apr 2013 5:36PM

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.

F

Flaburgan Mon 8 Apr 2013 7:08PM

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.

ST

Sean Tilley Wed 1 May 2013 5:51PM

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.

F

Flaburgan Thu 2 May 2013 8:50AM

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.

JH

Jonne Haß Thu 2 May 2013 9:40AM

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

JR

Jason Robinson Thu 2 May 2013 10:33AM

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

F

Flaburgan Thu 2 May 2013 11:51AM

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.

G

goob Sun 9 Jun 2013 1:23PM

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.

JR

Poll Created Sun 9 Jun 2013 5:55PM

Design for single post view Closed Sun 16 Jun 2013 3:00PM

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

Results Option % of points Voters
Agree 6.3% 1 H
Abstain 87.5% 14 ST FS TS JH JR G PP RF T DU SVB F S W
Disagree 6.3% 1 M
Block 0.0% 0  
Undecided 0% 131 JL BK MS AA S CB HF BO DM GC JH F M EG G AX PC BB LP T

16 of 147 people have participated (10%)

ST

Sean Tilley
Abstain
Sun 9 Jun 2013 10:00PM

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.

G

goob
Abstain
Sun 9 Jun 2013 10:40PM

Option 4 is my favourite, although I am happy if elements are taken from other designs e.g. to deal with posts with many images - we need to have flexibility in the design.

FS

Florian Staudacher
Abstain
Mon 10 Jun 2013 10:41AM

#4 seems the most fitting

H

hewiak
Agree
Mon 10 Jun 2013 4:26PM

#4 with some finishing up --media display considerations, etc.

PP

Pirate Praveen
Abstain
Tue 11 Jun 2013 4:00PM

#4

RF

Rasmus Fuhse
Abstain
Wed 12 Jun 2013 1:03PM

Oh yeah!

M

matl
Disagree
Wed 12 Jun 2013 8:29PM

I like number 3 and 4

TS

Tom Scott
Abstain
Sat 15 Jun 2013 5:56PM

I'm all about "sean jonne" :P

F

Flaburgan Mon 10 Jun 2013 12:02PM

These mockups are absolutly not up-to-date, we already chose the #4 (without really voting for it) and we have now to choose about where we place the scrolls.

Please see my posts below
Mixed
Comments on the left, double scrolls
Comments on the left, unique scroll
Comments at the bottom

There are for each proposition 3 use cases (big text, short text, pictures) and you can already play with it, it's HTML.

FS

Florian Staudacher Mon 10 Jun 2013 1:54PM

well, since we've unofficially chosen #4, let's choose it officially now... ;)

G

goob Mon 10 Jun 2013 6:46PM

If you're voting for #4, @hewiak , that's an 'abstain' - see the criteria in the proposal.

JR

Jason Robinson Mon 10 Jun 2013 7:37PM

@flaburgan yeah let's finalize the vote then here - we can always cut down the dates or close early, to start voting on finer details.

I think you said you would be able to work on this soon? That would be awesome! Can you take in to account the different details you outlined, so that the code doesn't lock them up too tight?

ST

Sean Tilley Mon 10 Jun 2013 9:45PM

Do we really need to wait 20 days for this one, or should we just close it?

F

Flaburgan Tue 11 Jun 2013 7:14AM

@seantilleycommunit we probably are going to close it soon, as there is already a consensus.

ST

Sean Tilley Mon 22 Jul 2013 10:20PM

I still think this is a huge blocker for prospective new users. Would anyone be interested in working on this? We basically need to explore the following:

  • Reusing stream elements to create the post view
  • Stylize post CSS to resemble mockups when necessary
  • Kill extra templates with fire (the mood-picker and related items)
  • Get rid of gross image resizing / stretching
  • Fixes for any tests that get broken in the process.
  • Add location stamp to posts, when applicable
F

Flaburgan Tue 23 Jul 2013 11:39AM

I currently work on refactoring different parts of the UI to familiarize myself with the code. I could start work on the SPV after that.

ST

Sean Tilley Thu 25 Jul 2013 7:02PM

Wanted to make a quickfix suggestion: while the actual refactoring will probably take a substantial amount of time, one good quick improvement that might make users WAY happier would be to stop turning uploaded images into post backgrounds.

With a small improvement, we could make uploaded images be treated in a post view similarly to how markdown images are treated. At the very least, this would improve the readability of posts, and people could at least see what the entire uploaded picture is.

Thoughts?

F

Flaburgan Fri 26 Jul 2013 7:41AM

Another quickfix: add the header :p

ST

Sean Tilley Fri 26 Jul 2013 7:08PM

Agreed! Neither of those are that difficult to do, I'd be happy to submit a quickfix for either one. :)

JR

Jason Robinson Sat 3 Aug 2013 9:02PM

Absolutely agree we NEED those little fixes. The SVP is just so broken it's crazy :(

JR

Jason Robinson Sat 3 Aug 2013 9:02PM

Header and images - biggest headaches.

F

Poll Created Thu 8 Aug 2013 8:51PM

Put the header on the current SPV as a temporary quickfix Closed Mon 12 Aug 2013 7:12AM

Outcome
by Flaburgan Tue 25 Apr 2017 5:16AM

Header is being implemented in the view here: https://github.com/diaspora/diaspora/pull/4390

To not have the header on the SPV has many downsides for navigation inside diaspora*. We are still not at the state of an open PR so we're still far away of a new SPV. To avoid continue annoying user on this point, I propose to add the header to the current SPV as a quick fix to have it on the next diaspora release (pretty soon). What do you think?

Results

Results Option % of points Voters
Agree 100.0% 10 ST JR F G H DU M T SM SVB
Abstain 0.0% 0  
Disagree 0.0% 0  
Block 0.0% 0  
Undecided 0% 136 JL BK FS MS TS AA S CB HF BO JH DM GC JH M EG G AX PC PP

10 of 146 people have participated (6%)

G

goob
Agree
Thu 8 Aug 2013 9:35PM

Can't see any harm in this.

JR

Jason Robinson
Agree
Fri 9 Aug 2013 7:24AM

Do we really need to vote on this? :)

G

goob Sat 10 Aug 2013 10:32AM

@flaburgan I'd say go ahead with this: there's a clear consensus so far, and in any case it's a quick fix which makes no major changes, so doesn't require a big formal consensus.

F

Flaburgan Sun 11 Aug 2013 4:34PM

Okay I'm going to start to work on this.

G

goob Sun 11 Aug 2013 4:45PM

Woo hoo! (puts the Diaspora champagne on ice)

F

Flaburgan Sun 11 Aug 2013 6:25PM

Okay so the major problem was than the SPV is using bootstrap when the header is in blueprint. So I extracted all the header code from application.sass. One step further to clean the css code :)

Once this is merged, to add the header everywhere should become very easy.

F

Flaburgan Sun 11 Aug 2013 9:59PM

Thanks to @jonnehass it's now merged :)

So here is the PR which introduces the header on the SPV. It's not functional right now but it's the beginning.

JR

Jason Robinson Mon 12 Aug 2013 6:55AM

Looking forward to this :)

Can someone close the poll btw?

F

Flaburgan Mon 12 Aug 2013 9:47PM

Okay, I'm glad to announce that the SPV now has a header. But we have a problem, even if the css is the same, it's different than the header elsewhere. This is because the SPV uses bootstrap when the other parts of the application use blueprint.

Blueprint is not developed anymore and bootstrap is really more well-known, so we have to migrate from blueprint to bootstrap. This is a BIG task, I surely can't do that all alone. I'll try to see if the header part can be migrate first, so it won't block the PR about the SPV anymore. For the other parts, we need your help ;)

ST

Sean Tilley Mon 12 Aug 2013 10:09PM

What all would need to be done for migrating from Blueprint to Bootstrap exactly?

JR

Jason Robinson Tue 13 Aug 2013 5:54PM

Wow, never heard of Blueprint, though Diaspora used some funked or really old version of Bootstrap - clearly not looking at the HTML :)

ST

Sean Tilley Thu 15 Aug 2013 1:06AM

Relevant post, it seems someone is trying to work on the SPV and has read through our discussions / wiki on the issue.

This, to me, has been one of the biggest blockers in getting newcomers to stay with Diaspora. Fixing this issue will make posts that much more usable.

ST

Sean Tilley Thu 15 Aug 2013 8:21AM

@flaburgan I'd be interested in helping out with porting from Blueprint to Bootstrap, if you'd like some extra help. I have a branch on my local machine to experiment with converting the grid over in our HAML views.