Nice! However, looking at the screenshots... I wonder why developers so often seem to get UI paddings, margins and font sizes so wrong. Does it really need some special kind of sensitivity to notice and care about it? :)
* in open source software projects, professional designers are rare.
* functionality or documentation might have been higher priorities
* it would be unfair to deprive you of the opportunity to contribute a better design to this open source projet
Thank you Gnome team, including designers, that created such a beautiful desktop experience for me.
In all seriousness - mixed messaging as seen on this thread is why I believe most (myself included) eschew the whole 'MVP' thing and try to polish products before release.
MVPs happen to be an (apparently) efficient model for startups, but its not like anyone actually wants it. Your users might grudgingly accept your half-finished, buggy, unoptimized MVP because nothing better is available to them, but how could you possibly expect anyone to be happy with this?
MVPs are pushed by businesses, not by consumers. But on the market-scale, it also pushes MVPs (because you get bonuses from being first-to-market and such).
But no individual consumer goes around saying "yeah I'd love to be promised the world, and instead recieve a millionth of it".
Of course you're going to be criticized by the people you've given hope to, only to let down with bug report #985
I guess this is an early release and getting the details right does take time. I sometimes get comments along the lines of 'is that all it does?' when I've spent lots of time getting the details correct.
Plus yes I think it does require some level of sensitivity to it. 99% of people just don't notice, but the details do matter in the long run as it begins to feel right to people, who will never be able to explain to you why or even complement you on it but will carry on using the system because of it.
Overall, UI design is really not too bad here. On the other hand, it's almost 1:1 copied from the official Slack app.
Some elements randomly have 20px spaces between them, some have 28px, some have 32px. This would be fine if they were done on purpose but right now they look like they were chosen randomly.
https://user-images.githubusercontent.com/639601/38463114-17...
Take a closer look at the space below the "BabelJS" title.
Compare the space between "direct message"/"slackbot" vs. "slackbox"/"zcbenz".
Why is the padding around the channel icons 20px on all side while the spacing to the left of "BabelJS" only 13px?
etc.
Edit: If you still cannot grok what I'm taking about, play a bit with this tool and you will understand https://www.gridlover.net/try
See, this is what I meant, some people just don't see it!
i'd say most people don't see it. maybe it's not very important then?
They won't be able to tell you why they prefer the one with more time invested in the UX/UI, but they will almost always choose that one.
There are universal rules in design and everyone is using them. We are actively training the users into feeling those rules as superior.
(This is also why huge paradigm changes feel so refreshing. Breaking the rules on purpose is very strong.)
do you really believe that or does your job depending on you and others, believing that? I get UX is important, where UX is defined by such things like "number of clicks to achieve a task", but the OP was talking about margins and padding etc which just are a lot less important than designers like to think. It's probably an uncomfortable truth for people who spend all day tweaking things 1px at a time, but I think it's largely true.
A case in point is the new Reddit design being tested (https://media.wired.com/photos/5abed25228f0c90b2647ac08/mast...)
It's prettier, I can see that. If it was a painting I'd rather hang the new one than the old one on my wall, but when it comes to pure functionality (read a list of links) the current (ugly) design is better (imho).
It's not a question of believing; the job exists because there's a real need to optimize the visuals. The brain has its own API (see [1], [2]) and if you don't optimize the "visual code" to it, the interface may work, but in sub-optimal ways and causing a discomfort to the user. It's like having a C program that leaks memory. It may perform the expected task, but you wouldn't say it's "right".
Margin and padding, alignment, contrast and relative positions define the structure of the interface - in the same way that you use Layout objects behind the curtain to program where every widget is placed, you should use the visual properties of separation, visual weight and rhythm to tell the user which parts are related and what is the hierarchy of the elements. If you fail to convey the structure to the user, their mental model will be wrong and the interface will be hard to use.
[1] https://en.wikipedia.org/wiki/Gestalt_psychology#Pr%C3%A4gna...
The issue is when it's not respecting anything and is simply thrown together randomly. If OP's app were to copy the same padding and margins as Reddit's new sidebar, I would have nothing to say against it.
Yes, your app will do fine with minor design issues. It won't drives all of your users away. However, they might start to notice that your main competitor's app feels better and slowly trickle that way. There is a reason that all top brands have such strong design and user experience/graphic design teams. One or two small issues is fine, but they pile in really quickly. Nobody wants to complete a checkout when the entire page looks like the content of a 1995 website in a iframe.
My personal philosophy is "why do anything if you are not going to do it beautifuly?". As a full-stack developer, it's easy for me to see both side of the medal. It would be very straightforward for me to simply throw components on the screen and call it a day. By the time I've programmed and integrated them in, I'm tired and only want to close the task. I have to remind myself of my motto and it always results in a better experience for everyone involved with the end product. Most of those design decisions can be done in a few minutes if you take the time (and if you have received proper training to spot the issues) and those few minutes can results in a big leap in quality.
Sometimes the best user experience does not look the prettiest, and even more often does it fail to line up with business requirements. Both of those concerns need to be de-prioritized.
Are you just saying that or do you have evidence to back it up? I'm not a designer but I work closely with them and I'd say it's the exact opposite. Developers (myself included) tend to get tunnel vision on finishing functionality but the actual end users of the software care a lot more about the 'small things' like that than you're giving them credit for.
The fact that you say 'tweaking things 1px at a time' shows that you don't quite understand that it isn't about moving things around arbitrarily, it's about creating a design system that does it for you. Every header should have X amount of spacing between it and other elements, every paragraph should have the same size that makes sense with the headings it sits under, backgrounds should draw the users eye to important places, etc.
Using the old/new Reddit is a horrible example, because the old Reddit absolutely had a design system that made sense to the user. It might have been simple, but the spacing was consistent across every element. Watch the comments when a subreddit mod team updates their theme and small things like the padding around the comment preview is missing, it's the first thing that the users of the sub notice.
I've done a lot of end-user interviews, and actually paying attention to your padding/margins and making sure all of the elements fit your grid can be the difference between the user trusting your app because it looks professional, and giving up on it because it looks like a side project (or to use the Reddit example, the difference between using the home page and a half-baked custom sub theme).
HN might not be the demographic that you're going to get that feedback, but unless you're writing your software specifically for developers you're going to be losing a lot of trust regardless of how solid your software is behind the UI. It's not about creating 'art', it's about making your work look trustworthy to the end user.
>Using the old/new Reddit is a horrible example, because the old Reddit absolutely had a design system that made sense to the user.
Your own argument supports exactly what I'm saying. The designers of the new Reddit took an existing, very functional design and then f*cked it up by making it "pretty".
Most designers put UX on their resume (because it's trendy), but their folios betray that they do aesthetics (which is great, but not terribly important), and only have an effect on UX accidentally.
I would wager that we are not necessarily training users into feeling those rules as superior, but the absolute opposite — people tend to feel more at ease / comfortable when those rules are in place, and we want people to feel that way when they use our products, and so we use those rules. Ubiquity/familiarity is one reason why someone may feel at ease with a design, but it’s absolutely not the only reason. There are other more fundamental reasons why some designs are pleasant and others are unsettling / frustrating.
For example we can’t explain why harmony sounds pleasant and why dissonance is unsettling. We can explain how they are different from each other and describe these differences with rules, but not necessarily why one makes us feel good and why another makes us feel bad. But the musician knows these things— that certain arrangements make people feel a certain way. And using this knowledge, the musician can compose music that falls in line with the effects that he wants it to have on people.
Still, you don’t need to be a musician to know when a song sounds horrible. You don’t need to be a chef to know that the food tastes horrible. You don’t need to be a designer to know that it’s unpleasant. We can feel an unsettling interface even if we don’t necessarily know why it’s bad. Good designers are just more in tune to these feelings and also are able to identify and implement the technicalities as to how to make the design feel the way they want it to.
We generally don’t want people to feel uncomfortable when using our interfaces (although maybe sometimes we do), so we tend to settle on some rules of thumb that we know make people more comfortable like “visual heierarchy” “vertical rhythm” “line length not more than 60 characters” “not having to make 6 clicks for something you do fairly often” “context (such as breadcrumb navigation)” etc. And, I mean, when you put a lot of these rules together you end up with a lot of interfaces that converge to look and feel the same. Doesn’t necessarily mean we are actively training people to feel that these things are better. At a fundamental level people already do. Good design is more of a discovery of human nature / an applied science.. than a conspiracy to make people like things.
We don’t like food that tastes like crap. If everyone’s food tastes like crap, well, we’re going to be eating food that tastes like crap. Because we still need to eat. But the moment someone puts out food that tastes less like crap, people are going to want to eat that person’s food more than others’. And maybe that chef proclaims a rule that “when you include X in your recipe, or when you don’t do Y, your food tastes less like crap and more people want it.” And now more chefs who want to sell food are putting out food that follows that rule. And now more food on the market taste a little less like crap. That’s pretty much how design works as an industry.
If the rules are universal, then why would users have to be trained to consider them superior?
We are training the users into enjoying very rigid and professional looking websites. Anything amateur looks jarring these days.
This wasn't true in the 90's - we trained the eyes of the users into disliking amateur looking websites.
(I have to work hard to see such things, though, and I'd have to try even harder to be bothered by them.)
Why not take some of that screen space and move the title a bit lower so that it doesn't look so out of place with the whole vertical rythm of the page? The icons to the left are starting at 20px, why not put the title there? The title is also directly linked to those icons. Clicking on an icon changes the title. The title is the current selected icons's title, in fact. Aligning them makes that connection clearer.
That's the kind of questions you should ask yourself when you design an interface.
Right now, the title has a 50px margin because that's the distance the official Slack app uses. However, the official app puts the current user's username there, so that there's Title>10px>Username>30px>Channels ... instead of Title>50px>Channels. It's a direct copy that is missing some elements and that's why it feels wrong to the eye.
† ISBN 978-1119998952
My focus is on full stack, so I do care a lot about UI/UX, and improving my skills there.
However don't ask me to do anything related to NoSQL or Deep Learning, I would be a lousy contributor.
> My focus is on full stack,
I'm sorry, imo those are two contradicting sentences.
But it might be related to a personal pet peeve of "full stack" developers claiming to be expert in most moving parts of the stack.
Only to post on medium this amazing db hack they found, to be called out in hn comments for not reading the basic docs of one of the core items in their stack.
I always look at Doctors for a bad analogy; why full stack developer is a bad idea. Sure the heart surgeon will be able to diagnose your broken leg. Might even be able to assist you with a cast. But trust him to operate? There a specialist for that!
Is this not the same for dev work? Designer, Developer split into 4 fields(desktop, mobile, frontend, backend), database admin, sys admin. All possible to be done by a "full stack" developer.
But I don't see you become a specialist or expert in any of the fields of your stack, if you don't dedicate to a few.
He knows best than having people searching for specialist by themselves.
As for myself, if you prefer a more descriptive example, I specialize in everything related to Java, .NET and Web (VanilaJS) stacks.
But if you showed me a single UI, I highly doubt I could improve it.
Some of us explicitly don't want the UI to give off the impression that the software is more finished than what it really is, so we sometimes intentionally keep the UI unpolished while we know that we have important things not yet implemented.
However I have come to realize that there are several downsides to this line of thinking;
1. If the app looks bad then it might permanently put off would-be users.
2. By not giving the UI enough attention early on, discoveries of UX problems that could have been caught early are not made until much later, delaying the project and potentially leading to more work as well because there will be more things that need to be rewritten or remade in order to fix the UX problems.
3. If you think feature X needs to be completed before you do the UI, then what is going to keep features Y and Z and so on to make you think the same way when you get there? Software is often never "complete". If you think it needs to be "complete enough" before you can give it the UI it deserves, how will you know that you've reached the stage of complete enough?
Furthermore, I have come to realize that often we don't know what we want exactly. We might think we know, but as we work on implementing our ideas things turn out to not be quite as we'd imagined them to.
But I also think that grand parent was on to something. When we build software, we should strive to implement features that are useful but not only that, the software needs to make the most common tasks as efficient for the user to perform as possible. And in order to find out what that means, we need to consider the UI from the very beginning.
There's a ton of tools out there to help you with these, and as a developer, I like tossing around a lot of the design stuff that gets regulated until an app or site is totally functional, when I feel like most of the design work stuff should be done prior to getting your app working.
Design is the hard part, coding it? For me, that's the easy part. I feel like once I've got some decent font's paired, a color scheme worked out and other design elements nailed, the rest is easy.
Rarely all stages are reached, but in open source projects, anyone can cook their favorite dish for this dinner.
Design shouldn’t be an afterthought, it should be THE thought.
We aren’t talking about the color of the paint, we are talking about the way the parts fit together.
I don't blame the developers, I don't blame the project. I'm glad they do such client and would probably use it over the official Slack client even with its current UI (I'm more interested in a solid XMPP transport though). I just noticed that some people genuinely don't see or can't put their finger on those issues at all, which makes them unable to think about it and fix them without external help. And I wonder why it is like that - what makes you see those misaligned things as standing out, while others don't notice it?
The thing is, a lot of developers seem to have no anesthetic sense whatsoever. I realized this when I noticed that almost all Emacs themes are garbage, and that no one seems to mind. I even wrote a blog post about it with several examples and people thought I was trolling.
I mean, just five minutes of work put into this Slack thing would have improved the look a lot, so the other commenter's point about priorities is just kind of dumb. Slack may be a piece of junk but at least it is passable in the looks department. It's not like it's the 90s or anything. How can someone think that looks aren't important?
The authors goals may not align with yours, and their decision of what they want to do on their free time might not align with yours - this is exactly why releasing it to the open is a good thing, talented and interested people can contribute to it if they choose, or use something else if they are so inclined.
I’d love to try themes developed by someone with as strong opinions on design as yourself, but you wrote a blog instead. Its what you wanted to do, and you did!
Care to learn about UI/UX and human psychology how regular users approach computers.
Learn how to design UIs and application workflows for people that care how to do their job, without having to understand the internals how computers work.
Requires to learn about design and soft skills as well.