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
(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
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.
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 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.
Overall, UI design is really not too bad here. On the other hand, it's almost 1:1 copied from the official Slack app.