bring back dedicated log in button to make log in more usable #1641
Conversation
jancborchardt
added
enhancement
design
|
@jancborchardt, thanks for your PR! By analyzing the history of the files in this pull request, we identified @prastut, @raghunayyar and @coderkun to be potential reviewers. |
|
Not sure the stay connected checkbox should be over the Connect button. I'm more used to the opposite. |
|
I'd prefer @jancborchardt suggestion. The reason is, that I use the tab key to navigate from "username" to "password". And with the next click on tab, I directly get to the "stay connected" checkbox, which I can activate with the space key. And finally I press enter to login. |
I think you can choose the tab order of the elements separately from their display. EDIT : With the |
|
The one thing I'm not sure about is the design of the button itself. I find it a bit too discreet and not looking enough like a button. |
|
I suggest that you switch the actual UI language to what I did in the homepage and more similar to other issue I open. (But this is me) Its time to start to do the same things = . I think is far better you have the button, in mobile for example it helps a lot. :) |
|
Good points everyone! Modified it to this:
|
| float: right; | ||
| width: 269px; | ||
| background-position: right 16px center; | ||
| border-radius: 50px; |
There was a problem hiding this comment.
Could this be a little reduced ?
There was a problem hiding this comment.
@tcitworld do you mean the radius in itself? I mean either we go for the one we had before which is same as the input fields, or for a full rounded one – as on the website and suggested by @Espina2. :) That’s what this does atm.
There was a problem hiding this comment.
Oh, well, seems logical. Still find the radius - on the website and here - a little too big.
|
Can we do this optional 😪 ... or can we make a poll in the Forum? |
@MariusBluem We don’t do polls on the forum about technical decisions either, this is not how a project works. ;) |
|
@jancborchardt I think the arrow have to be more center. In general don't give width to the buttons let the margins do the work. You can copy this code for having the same style and hover. You have this if you use scss https://gist.github.com/Espina2/65b1099e603cf517096e41a5eae07578 or you can use this css compiled version https://gist.github.com/Espina2/3f803075c3306076298076d807f43157 |
|
@Espina2 can I ask you to add a commit which adds that behavior? :) It seems that it’s enough to change width to margin, and the background from having it on the element to the (Note that we use CSS without preprocessor in all of Nextcloud so it’s easily accessible.) |
Current coverage is 30.61% (diff: 100%)@@ master #1641 diff @@
==========================================
Files 1070 1087 +17
Lines 60845 62043 +1198
Methods 6838 7187 +349
Messages 0 0
Branches 0 0
==========================================
- Hits 34032 18997 -15035
- Misses 26813 43046 +16233
Partials 0 0
|
I dont have this project locally. |
|
I don't like the round button in combination with the current Nextcloud design. They look quite bulky compared to the rest of the UI. What about using the first button with small rounded corners and making it a bit smaller:
|
|
@jancborchardt the signed-off comment is missing in your commit: https://github.com/nextcloud/server/blob/master/CONTRIBUTING.md#sign-your-work (that causes CI to fail) |
|
@MorrisJobke so if I use @juliushaertl yeah, I tend to agree that the circular-end buttons don’t look nice with the current design. It’s a bit too much design for its own sake and feels a bit dated. Like, since we’re quoting other platforms for log in designs, basically none of them use rounded-off buttons. cc @Espina2 what do you think? |
Correct, but I guess you need to do |
You have a circular logo so you are a circular brand, you should use circular rounded things when its possible. The problem itself its not the button, its you dont have a clean are to put them. If all the people like the image why not having something more pleasant for the eyes like this. (You can ignore the sign in for now)
@juliushaertl if haved take a look in the issue/post that I post after this issue are open you can see that I pull some examples. |
|
@Espina2 again, as that is basically the same screen you showed before in #1615 (comment): sure the overall look is like on the website, but the streamlining is missing. It’s too many tiny elements with way too much information, even with the »Stay logged in« checkbox missing. Things are separated and the visual hierarchy is confusing. The labels like »Log in« and »In order to continue …« are not necessary. And lastly the big white container around everything simply looks a bit outdated. It seems like you might think that the current design has no design reasoning behind it and you just want to throw it away completely. That’s not really how things work out well. We developed this over time through iterations and tests and know what worked well and what doesn’t (for example, the removal of the log in button didn’t work so well). Hope that doesn’t come off as aggressive or such because it’s not meant to be. We do have to work together here though and simply changing everything just because is not how it works in a big project. There needs to be proper reasoning, and working with feedback from others. In the line of thought of gradual improvement, how about this? It also addresses the point of the missing »Forgot password?« link that you brought up and @pierreozoux mentioned. Anyway – I’d like more of @nextcloud/designers to chime in and also @karlitschek @LukasReschke @MorrisJobke @ChristophWurst etc. Maybe I’m missing something here, but currently this diverges a lot from the simplicity of the existing Nextcloud design. |
|
Alternatively with a rounded log in button (which I think looks a bit strange in combination with the square-ish input fields): |
|
Just as @jancborchardt said, we should't just drop everything for something completely new. There should be a step-by-step iteration with a good reason behind each change, like adding the login button.
This only applies as long as the Nextcloud logo is in place. Another point on theming: if users start to customize their Nextcloud installation, the logo is a very common change i think. So in my opinion we should keep the user interface as neutral as possible. |
|
So since I don't know how I'm doing I only complete want to change the Nextcloud app without explain nothing. Lets start 1 - Research Box One Drive Google Drive Quiver What they are doing? Simple and clean login page without any images and visual noise very easy to find where to do things. All they have button and work well in mobile. What I do it in my version? Remove the noisy background, put all the things visible and turn the process of create an account easier. Like the others softwares related do. I think I dont need to explain more on this.
For you knowing what works best you need to change it. If you don't changed you never know. We are not changing nothing conceptual we are creating cohesion, you still have the same elements in the page you only add two new ones (for making the things easier).
@juliushaertl You are wrong, and I can show many projects that you want. So when you are excluding the Nextcloud logo you are personalize at your own taste, the same thing should be to the whole product (like the buttons, fonts etc...) its impossible to have one solution that will work for all the Styles and personalizations that the people are doing. So I don´t like to write long text's to explain all the things that I do. It good to say that I am not a junior designer, I am a senior designer with many projects out there, and I win one or two awards. I can't be so wrong in all the things that I am doing in the past years... So to clarify what I am saying I will help if my help is needed if you think that everything is fine right now you can just ignore and I at sometime I will stop posting "new things". I am very straight forward person and I say what I think. And @jancborchardt I'm glad that you do the same. I don't feel bad that it sounds aggressive I know its difficult to change the work of another person, that I made a lot of effort on it, but embrace it, you are having new ideias for free. :) In the end who the have last word is you not me. |
|
Yeah we should follow the overall design. But this rounded button don't fit. The first one is closer to what we're used to. :) |
|
I have show the problems and bring some solutions and examples that make it work better. You can make whatever you want with information I put here. So now I just open the spotify and I see that they for example use rounded buttons in their app UI. And just for curiosity I see that they do it the exact same way in the website. See print screen's above. And look why they used it. Maybe because the logo is a circle? Everything is a circle.
@oparoz I forget to say that the things doesn't real contrast. But you get it, contrast is very important. 👍 |
Signed-off-by: Jan-Christoph Borchardt <[email protected]>
|
The font weight of the button text is too big. I would go for the normal 300 instead of 600. |
|
Much better @jancborchardt ! |
|
Apologies for a late reply but here are my two cents on this debate. This is really a huge thread so I couldn't complete reading the debate. I am in favour of having a separate button but completely against have rounded buttons, simply because we don't use them anywhere else and hence are not a part of the brand identity / design guidelines. A retro / modern feel is relative. Spotify uses a lot of buttons on its website as rounded and hence has really less number of rectangular ones so it also has a design guide, just that it is not similar to us. The examples of different websites stated is not a right way because they are truly open source and a certain marketing mind goes behind designing them in order to sell it. Mailchimp for example has a massive image on the login page whereas Spotify has just whitespace on their login page. So, these are not great examples to refer either because you can find an example for every requirement. If it is a "look nice" reasoning or the logo being circle logic behind having circular buttons, I don't think its a good approach. A lot of new UI components can be made cooler, but that is not how it works as it leads to less focus on the common design language. I would like the buttons to be consistent across the project, in their raw form at least. Design is subjective, its not a good idea to fight over rounded or squared buttons. We have a lot of design issues and a lot of areas which need design love, we should focus on those. |
We are trying to create design guidelines so it will change the rectangular for the circular. Right now we don't have nothing of this. And retro modern is relative I dont think so. The thing or look retro or look modern you can have the two because are the opposite. If can you show one example where you have the two things I'm glad to see. And for now the buttons are used on the website, and they are rounded because it makes sense. You are a rounded brand with circles and on the otherside there is no reason for using rectangular ones only the personal taste of who made it. And if you think that the logo be circular enought to make the buttons circular, what are the reason to them be rectangular?
I will glad to see better examples, can you show them? For the example of mailchimp, they only use image when you are on desktop's. 100% sure that all the peoples when open the version with the image first look to the image and after that they look to the login page. The image demand attention because have color, texture, etc... and the image its not the most important thing in the page, why we should have something that only distract? Where is the reason for that?
This is why we are thinking why the would be, for be consistent and all the apps, websites. For you design anything you have to think why you use that style not only because you like or I like.
Design is objective and subjective at the same time, because you doing the things for a purpose, you are not making art... Of course you more issues, but we are trying to resolve one here. |
|
Sign in for mailchimp: |
I personally genuinely don't think round and square button debate is an issue which deserves a lot of time, there are are several usability issues / enhancements Nextcloud needs which might increase more users using the product than a replacing a square button with a rounded one. Design is not objective. Round logo means round buttons is not actually a rule of thumb impregnated somewhere not following which would we fail at design. Design evolves subjectively and to write these guidelines we present the current state of art and not do it from scratch by having entirely new components and yes, a rounded button is a new component. Talking about buttons, what if I start arguing why we use #ffffff for backgrounds and not #f8f8f8, or why we use #333333 for content and not #222222 we won't move ahead with this and I can tell as a designer there is no objective reasoning to either of these. These are subjective decisions made earlier and its better to stick to such decisions in order to move ahead in an open environment. |
|
What a shame that we have to bring back the login button and remove the clean experience that we had before IMHO. With that being said, I really like @Espina2 login screen. |
You are mixing two things togheter design is subjective and objective like I said. If you analyze data and design with that, it are very objective and things are made because you know that this are a better way to do it. At the moment design is far better objective with the evolution of user experience and research. So you can have your opinion and I have mine and its okay. Just pointing some facts. And for the fight if it would be rounded or square or rectangle buttons I only presente a valid point to why I think they should be rounded. Your only point one reason that they are rectangle but you dont give me a reason for them being rectangle. Just saying that you are not thinking in what they should be, you are point only that they are this...
This doesnt start about buttons, this start in that point #1615 You should have reason to use that colors, for less or more contrast for exemple. I really believe and I make things thinking why I make them. And for the image on the mailchimp its very objective that you first look the image and after that only you see the login. So if you test I will say that without the image most of the people make login more faster. And if you think this are subjective you can test it... So I don't like for doing anything I have to have like a political or philosophy debate. |
Signed-off-by: Jan-Christoph Borchardt <[email protected]>
jancborchardt
force-pushed
the
log-in-button
branch
from
75bd735 to
aa4eaf3
Compare
|
Folks, this discussion is getting too long and fruitless. One of our main tenets is to be pragmatic, and to do things in small steps. As said above we will simply not throw away our current log in screen, lots of people are used to it and themed it etc. The image is nearly all blue so not very distracting. If we compare with other web services it makes little sense to just compare with the log in page. We need to compare with their home page, which you usually go to when you want to sign in. And for example Slack which everyone loves so much has a big fat nice image on there. I updated the PR and postponed the »Forgot password?« link for later. @MorrisJobke all our buttons have semibold font because they are calls to action. With 300 font-weight they look strange, and also don’t fit the icons. Please review @skjnldsv @raghunayyar @oparoz @pierreozoux @MorrisJobke @juliushaertl – Let’s get this in so we can move forward. |
|
All good to me! 👍 |
|
Just to people hate me more the slack login page don't have image. Not even in the "app" they have. The homepage its not the real login page. :) And sorry for be such an annoying.
|
|
@Espina2 I know. That’s why I said:
|
|
I know. :) |
|
👍 Let's get this in. 😄 |
|
Thanks everyone. ;) At least I guess we can all agree that the arrow icon is much better now ;) |
|
Going backwards design wise IMHO. But not my call... |
|
@enoch85 design is about making the product easy to use for people. Sure the previous log in screen looked »cleaner« for people like us who use Nextcloud every day. However we are also very likely to just stay logged in and rarely ever see the screen. People who don’t use it that often have problems discovering it. And if they already have problems at such a basic thing as the log in screen, we failed. We had multiple people make remarks and open issues about it, and I also watched people use Nextcloud which confirmed the problem. So this is definitely a step forward. And as always – if there’s disagreement or downvotes, please state your reasoning. Just saying »I don’t like it« or »it’s a step backwards« has no basis, and is likely wrong. 😉 It’s always recommended to watch »normal« people use a software to get a feel for how understandable it is. For that also read »Watch people use the software«. 😃 |
|
@jancborchardt Yeah, I totally get the reason, just don't like it :) |
|
@enoch85 You could still make it optional in the Theming App or make your own App 😉 |
We had a lot of people saying they were confused with the arrow button and it also came up in a few tests I did. So here’s the dedicated log in button back.
Before & after:
(Deliberately in french so we can check if it’s understandable without words. ;)
Please review @nextcloud/designers @LukasReschke @oparoz @nextcloud/accessibility