Hello everyone, so separately from the discussion about building a new frond-end, I think it could be nice to have light improvements of the current design of diaspora* to come with the v1 (so visually you can distinguish the new version). I’m talking about modifying only some CSS to make it a bit more modern, not modify the DOM, really the low hanging fruits. Do you agree with this idea?
What are you thinking about?
1 Like
If you have something that needs to be improved, then of course we can change it. But there are always people who liked how it was before better, so you should have a better reason than “I just wanted to change something so it looks different”.
1 Like
I’ve said this in the other thread:
and I still have that opinion.
Unless you have a very good reason for making changes now, I’d not do them. All UI changes annoy users, even if things just “look slightly different”. If we want to build a new frontend, then I’m all for it, but that shouldn’t happen with changes that trickle down over multiple months, with every release changing something else. Having a non-stop stream of sudden isolated random changes is a good way to ensure users are maximally confused and annoyed. That’s bad in general, but even worse for us, since diaspora* has earned itself a reputation for having a stable UX.
1 Like
While not wanting to pour cold water on Fla’s enthusiasm, I agree. I think UI changes should be made when they’re needed, not simply to ‘brand’ a new release. Yes, there are many improvements that can be made to Diaspora’s UI (and UX, more broadly), but these should be approached in a more systematic manner rather than creating a new look simply because there is a new release coming out.
I also wouldn’t want time to be spent on changing the look of the website that might detract from the effort to finish off the seed migration and other features crucial to the release. I realise Fla wouldn’t be involved in coding those features, but changes to CSS might well require review time from others that could be more importantly spent.
Once this major release is out, I think we can certainly think about ways to improve the look of the site/app, but I think it would be good to take more time and thought over that, and to get input from the wider community, rather than for one core member to change the look based on what they think would look better. That is no bad comment on Fla, who I’m sure could improve it a lot, but as Dennis says, people in general will hate change, especially if they hadn’t asked for it and didn’t expect it. Think of Facebook’s change from its terrible old UI to its terrible new UI.
PS: apologies that I haven’t come back to this discussion in a couple of weeks to follow up on comments on things I said before; things have been quite crazy (in a mostly good way), but I should have some time tomorrow so I’ll try to reply then. Prod me if I don’t.
Well, at least one thing, that a lot of users are complaining about, is the font size. So small on nowadays screens. Apart from that, no, I don’t have UX improvements in mind (I mean, I do, but this isn’t what I was talking about), I just wanted to propose a light refresh of the UI, so that the 1.0 version doesn’t look exactly like the 0.6 was already looking. If I find some time I will do a stylus and you will tell me if you like it or not.
Here is a super simple example. You can install the Stylus addon in Firefox to add this CSS and see what you think.
Increasing content font size:
.markdown-content,
blockquote {
font-size: 14px;
}
Removing the shadow around the boxes:
.sidebar,
.framed-content,
#main-stream .stream-element {
box-shadow: none;
border-radius: 6px;
}
.info-bar {
border-top: 1px solid #ddd;
}
Making the avatars rounded:
.avatar {
border-radius: 50%
}
.stream-element > .media > .img > .avatar {
margin: 0;
}
.profile_photo .avatar {
border-radius: 4px;
}
Also possible:
Rounding the primary button:
.btn-primary {
font-weight: bold;
padding: 8px 16px;
font-size: 14px;
border-radius: 20px;
border: 0;
}
I encourage you to try this in Stylus and tell me what you think.
1 Like
You can also just open DevTools, switch to the Style Editor tab, and add a new stylesheet. No need for addons. 
I’d love a larger font size, but this results in the font size now being inconsistent between the content and the navigation/sidebar/etc. Changing the fonts size on the body to 14px would be a better approach, but even then, you run into a lot of cases where the font-size is overwritten again becaose a lot of instances in diaspora*s css use absolute font sizes (.dropdown-menu, for example)
This results in the UI being inconsistent again. The menu and notification dropdowns, for example, still have a shadow. Removing the shadow from them would increase consistency, but decreases the contrast and visibility of those UI elements significantly, so they would need significant rework. Edit: I guess you could just leave the shadows on elements that are actually “flying” above contents, so I’ll just retract that.
Why? Nothing in the current design language is round. No menus, no buttons, no boxes. Rounding avatars actually makes stream boxes look incredibly unbalanced, the rounded avatars clash very hard against the square corners of the stream content boxes. Removing the post boxes entirely (like Discourse does, for example) would be an option, but that would require significant rework. Rounded avatars look incredibly bad on /people/[guid] as well, and leaving those square would result in inconsistent avatar display. Also, the default avatar doesn’t fit into a circle, so that would have to be adjusted as well.
… I’m not trying to ruin your enthusiasm for making changes, but adding more inconsistencies is unlikely a good idea, and you’d have to sink a lot of time into it to end up with any kind of somewhat consistent state.
1 Like
I don’t know if there are a lot of complaints about this, I bought bigger screens so I can fit more things on them, not to just make everything bigger.
I can maybe get behind increasing the font from 13 to 14 … but how you did it here by only increasing the font size of posts makes everything looks really unbalanced to me. So everything is still small, but suddenly the posts are bigger. If we want to increase the font-size, we should do it erverywhere, so it looks balanced again. And stuff like that should probably be more thought through than just “quickly change some stuff to make it look differently”. We will probably work on a new UI at some time, but probably after the next major release. But then we can think about what makes sense and which font sizes need to be how big, but then it can be a complete concept and not just some inconsistent changes here and there.
For now: If people really think the font is too small, they can just zoom in one or two steps in the browser and everything will look fine.
This is a change that’s only needed “to make it look different but no other reason”. It doesn’t improve anything, and it breaks at some places, for example for boxes that should go below the header:
I’m strictly against this one. Besides it again only be a “only to make something look different”-reason, it makes the avatar look different at different places. It’s squared now everywhere (besides maybe slightly rounded corners), so when a user uploads a new avatar, the user knows how it will look. And it will look that way everywhere (even consistent between friendica and hubzilla, as they also have squared avatars). If we change this to round, users would need to upload a different avatar, but then it would be shown differently on different versions or on friendica … so the user doesn’t know how it will look everywhere anymore. And users from old versions or friendica will still upload an avatar that looks great squared, but then it will suddenly cut off the edges on pods with new versions and stuff that would be visible when squared isn’t visible anymore everywhere. Not all avatars look great round and square at the same time.
So this makes things a lot worse in my opinion. So I’m probably even against this one when designing a completely new UI.
This also makes everything look inconsistent. Most things are mostly rectangular, and having round buttons then everywhere just looks wrong.
Also, just no:
A lot more thought needs to be put into a new UI for it to provide a consistent UX, and it’s not that easy to change some variables. And the current UI is fine, there is no need to change something that is working only to make it look differently. There is nothing wrong with having a UI that looks exactly like when it was introduced with 0.6. So instead of changing some little things that aren’t necessary in the current UI, lets rather work on how a completely new UI should look and work so it provides a consistent UX for a future release, so we when the time comes and we rewrite the frontend, we know what we need and we can hopefully create a UI again that doesn’t need to be touched for a long time because it just works.
In other news, as I released 0.7.18.0 earlier, I didn’t prepare a 0.7.19.0 (so no new milestone or changelog section), as I think we are all focusing on the next major release now, so unless there is a security hotfix needed or any other change should be backported to 0.7.x, this probably was the last 0.7.x release. (moved back to the other thread)
@flaburgan, if you really want to discuss the UI more at this point, I think it would be worth starting a separate thread, because it is not an element vital to the next major release, and it might start to get this one off-topic. (now done)
I agree with the others in general that the approach of ‘let me just do a few quick fixes’ is not the right one, because without extensive testing, there is bound to be something that is affected adversely by the changes. It would be far better to do this when people aren’t hard at work trying to complete a major release (the biggest one for years, in this case), and any code change, even ‘low-hanging CSS fruit’ will take time to review; even replying in this thread has taken people some time that could have been spent reviewing code needed for 0.8.
I’m heavily involved as a user on another site (discogs.com) on which devs have started ‘improving’ various views, including CSS changes. These are apparently professional devs (although I think they’ve hired young and cheap ones!), and they are frequently releasing new code which, in every case, has broken something. And this has turned pretty much the entire community against the devs, and the company running the site. I definitely don’t think it would be a good idea for Diaspora to start rush-releasing unnecessary code, ‘just because’.
I appreciate your enthusiasm for this, and I hope it won’t be dimmed by these negative comments, but let’s save it for a time when everyone has space to think about what will be the best look for the site. And let’s poll users to find out what they really have problems with.
My eyesight is slightly less that 100%, but I have literally never thought ‘I wish the text was larger’. In fact, I like that it’s possible to see more than a few words on my phone screen at one time. (I usually view it on desktop, but occasionally on phone.)
Rounded avatars were discussed some years ago – it was a feature of the original core team’s ‘beta’ version that never got released – and it was decided not to go down that route, but to introduce a subtle rounding to the corners of avatars, which is what the UI now has.
But let’s discuss this in a dedicated thread (I think a public thread would be good for that), if more discussion is needed, and (now done) let’s wait until 0.8 is born and living a wonderful life out in the world before devoting more time to altering the look of the site.
1 Like
Since Discourse easily allows moderators to do that, I have split off the discussions about CSS changes into its own thread.
Ooh, you are clever. Thanks.
About my enthusiasm, don’t worry I was expecting this reactions and I was already aware of the possible downsides of this proposition, I was not expecting it to be accepted to be honest, I just wanted to know what others think.
I definitely agree about the fact that now isn’t the good time for a real redesign, and I think anyway that it should be done at the same time than the front-end rewrite because we’re going to heavily change the DOM at that time. I already have ideas about UX improvements that we can discuss, etc.
Here I just wanted to make diaspora* look a bit more modern. Rounded avatar is a good example, it brings nothing to the users, except that Fb, Twitter, Instagram… everyone is using rounded avatars, so people are used to this and kinda expect them to be like that. No problem if we don’t want to change it (I’m not a big fan myself), and of course no problem if we’re not touching the front-end before 1.0.
I agree that diaspora* is probably in need for a heavy UI - and UX - refresh. I don’t neccessarily care how it /looks/, I care more about how it /feels/, and there are a lot of UX papercuts everywhere. Building proposals for that, and discussing about how to solve that, is awesome. It might even be a good idea to start with a clean slate, a pen, and a piece of paper - and just making some doodles “how would you design diaspora*s UX if you had no idea what it currently looks like”. I think there would be a few valuable lessons to be learned. “We should do X because everyone else is doing it” isn’t necessarily a good thing. There is no harm in being different. As long as it makes sense, everything is fine. I’d be very surprised if someone refuses to use diaspora because the avatars are not round - just like nobody is complaining at Slack for not having round avatars.
I’d be very cautious about comparing diaspora to others. For one, we have to deal with a lot of UX concepts that others simply don’t have to care about (aspects, remote followings, etc), and, to be quite frank, the networks you are comparing to have issues, too.
Twitter is a great example: They have this fly-out menu if you click the “more” button which is ever so slightly rounded. On the very same page, there is this session/account management menu which is very heavily rounded. That itself is a bit of a pain to my UX senses. And for some reason, their experiments team thought that the placement and style of this tag banner is acceptable, which is still beyond me.
diaspora is very different in the sense that we have no pressure to ship changes, and we don’t have completely isolated teams that ship experiments into production to validate ideas. We can afford to spend time on polish, and we probably should.
I’m still hardly against round avatars (even on a completely new UI). “Everybody else does it” is a bad reason, because we are not “everybody else” we need to do what’s best for us (as we have different problems and need different solutions). And I also never saw anybody expecting them to be round. As said, “everybody else” can just make them round, and it will be round for everybody using it, if we make them round, some people would have them round, some would still have them squared for a long time, as we can upgrade all the users at the same time, as we have many different independent installations and also different software like friendica and hubzilla. So as now everybody has them squared, it’s the best experience for the users to keep it that way, so their avatar looks the same everywhere as expected and not on some versions they get the corners cut off. So for us it’s the best do do “what everybody else” in our ecosystem does, at that provides the best UX for our users.
I agree. We should just focus on what is really needed for the next major and then get that out of the door as soon as possible, so users can use the migration and the API. If we try some half thought through design changes now, we probably break more than we fix and just create unnecessary noise.
After the next major is released, we can think about a new UI from scratch and see what makes sense for use and what doesn’t and how we best build an UI with todays technology for our use-cases.
1 Like