8 ms·

What do you mean; the lack of padding in the blue column? Overall, UI design is really not too bad here. On the other hand, it's almost 1:1 copied from the off

What do you mean; the lack of padding in the blue column? Overall, UI design is really not too bad here. On the other hand, it's almost 1:1 copied from the official Slack app.

Raphmedia 9y ago
There is no "vertical rhythm". The strength of the different elements is all over the place. 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-178afd9e-3b2e-11e8-9650-09b5d981523b.png 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 https://www.gridlover.net/try
- seba_dos1 9y ago
  This! It's very far from being 1:1 clone of Slack UI, it's closer to a child's drawing of Slack UI. A mockup. See, this is what I meant, some people just don't see it!
  - ux-app 9y ago
    > 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?
    - Raphmedia 9y ago
      People won't see it when looking at you app with blinders on. However, they will feel the difference when using the competition's app. 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.)
      - ux-app 9y ago
        > 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. 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/master/w_1132,c_limit/Reddit_Redesign_Classic.jpg 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).
        TuringTest 9y ago
        >do you really believe that or does your job depending on you and others, believing that? 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%A4gnanz https://en.wikipedia.org/wiki/Gestalt_psychology#Pr%C3%A4gna... [2] http://www.scholarpedia.org/article/Gestalt_principles http://www.scholarpedia.org/article/Gestalt_principles
        Raphmedia 9y ago
        There are no glaring mistakes when it comes to Reddit's new design. Nobody is saying that the use of white space is wrong or that having margins and padding is wrong. 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.
  - bdcravens 9y ago
    You could also argue that with the Slack app's memory usage, it's closer to how a child would build professional app, and is more of a prototype than a shipping product. (No disrespect to Slack developers: I understand the tradeoffs of using Electron). My point is that if design shortcuts were taken, that's because development priorities were elsewhere (ostensibly, focusing on performance)
    - seba_dos1 9y ago
      I absolutely agree with you, my observation is strictly limited to the design. I think Slack's devs are way more to blame than Wey's, we're just not talking about memory usage in this thread :)
- JasonFruit 9y ago
  I can see what's wrong with the things you're talking about, except for one — the space below the BabelJS title. For me, it creates a clear separation between it and what is below, which I think makes sense. What am I not getting? (I have to work hard to see such things, though, and I'd have to try even harder to be bothered by them.)
  - Raphmedia 9y ago
    Without a doubt. However, why the magical 50px? 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.
    - JasonFruit 9y ago
      Thank you for those details. I'll have to look for a good resource that explains these things well.
      - lloeki 9y ago
        Then let me recommend you Design for Hackers† by David Kadavy. If you care to take the step it'll be an enlightening journey after which many things cannot be unseen. † ISBN 978-1119998952
        kadavy 9y ago
        Thanks for recommending D4H!
- blauditore 9y ago
  Yeah, heading distances are a bit awkward - especially because the lower one ("Direct Messages") is closer to the first item than the first to the second item. But I'd say it doesn't hurt usability too much. If anything, I'd rather tackle the slightly different font sizes in the left and right area first.

What do you mean; the lack of padding in the blue column? Overall, UI design is really not too bad here. On the other hand, it's almost 1:1 copied from the official Slack app.

Raphmedia 9y ago

There is no "vertical rhythm". The strength of the different elements is all over the place. 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-178afd9e-3b2e-11e8-9650-09b5d981523b.png 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 https://www.gridlover.net/try

seba_dos1 9y ago
This! It's very far from being 1:1 clone of Slack UI, it's closer to a child's drawing of Slack UI. A mockup. See, this is what I meant, some people just don't see it!
- ux-app 9y ago
  > 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?
  - Raphmedia 9y ago
    People won't see it when looking at you app with blinders on. However, they will feel the difference when using the competition's app. 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.)
    - ux-app 9y ago
      > 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. 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/master/w_1132,c_limit/Reddit_Redesign_Classic.jpg 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).
      - TuringTest 9y ago
        >do you really believe that or does your job depending on you and others, believing that? 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%A4gnanz https://en.wikipedia.org/wiki/Gestalt_psychology#Pr%C3%A4gna... [2] http://www.scholarpedia.org/article/Gestalt_principles http://www.scholarpedia.org/article/Gestalt_principles
      - Raphmedia 9y ago
        There are no glaring mistakes when it comes to Reddit's new design. Nobody is saying that the use of white space is wrong or that having margins and padding is wrong. 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.
- bdcravens 9y ago
  You could also argue that with the Slack app's memory usage, it's closer to how a child would build professional app, and is more of a prototype than a shipping product. (No disrespect to Slack developers: I understand the tradeoffs of using Electron). My point is that if design shortcuts were taken, that's because development priorities were elsewhere (ostensibly, focusing on performance)
  - seba_dos1 9y ago
    I absolutely agree with you, my observation is strictly limited to the design. I think Slack's devs are way more to blame than Wey's, we're just not talking about memory usage in this thread :)
JasonFruit 9y ago
I can see what's wrong with the things you're talking about, except for one — the space below the BabelJS title. For me, it creates a clear separation between it and what is below, which I think makes sense. What am I not getting? (I have to work hard to see such things, though, and I'd have to try even harder to be bothered by them.)
- Raphmedia 9y ago
  Without a doubt. However, why the magical 50px? 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.
  - JasonFruit 9y ago
    Thank you for those details. I'll have to look for a good resource that explains these things well.
    - lloeki 9y ago
      Then let me recommend you Design for Hackers† by David Kadavy. If you care to take the step it'll be an enlightening journey after which many things cannot be unseen. † ISBN 978-1119998952
      - kadavy 9y ago
        Thanks for recommending D4H!
blauditore 9y ago
Yeah, heading distances are a bit awkward - especially because the lower one ("Direct Messages") is closer to the first item than the first to the second item. But I'd say it doesn't hurt usability too much. If anything, I'd rather tackle the slightly different font sizes in the left and right area first.