Further improvements to "empty" views/modals #1928
Conversation
The idea is to convey the view's purpose/meaning by showing an appropriate icon. The icons chosen do convey the intended meaning ToMe™️ and so they are subject to discussion. 😇
I love the other changes, but this one seems a little jarring. I would expect the dialogs to be consistently centered, and it also leaves a large amount of empty space above it. |
|
@50Wliu Thanks for feedback! It just occurred to me that perhaps it would be better if we move the big icons consistently to the centre while preserving the buttons' placement? Personally I like how the buttons "feel" when they are at the bottom - they seem to stick there regardless of viewport or pane size. If you align all the content to the middle the content seems to "travel" as you resize the viewport. |
Here a screenshot:
I like the idea of keeping the buttons in a predictable place.. but the single icon looks a bit weird. Maybe if the icon would be some bigger illustration? An argument for keeping it centered might be that the distance to travel with your mouse and eyes is somewhat "averaged" and using the tabs wouldn't penalize you to move all the way to the bottom:
|
|
Another idea: Have 1-3 words wrapped with
It's a bit like seeing a "404" on a website. After encountering this view a few times you might remember what it means and don't have to start reading from the start, you'll be like: "Ohh.. multiple remotes... ok!". The branch name would be wrapped with Or have a title everywhere, like
|
|
@simurai Thanks for all the suggestions. I personally like the idea of having headings on all the views for quick summary of what's going on. To somewhat address the concern of the buttons being too far away from the tabs, I added a significant margin to all the views with buttons to push the content up a bit - the views are still pushed down but they appear a little higher now (screenshots follow). Also I increased the icons' size to make them more prominent. Updated screenshots
Let me know your thoughts. If you still feel that the content should be centered I'll revert the placement back. Overall I like the other changes. 🎨 😇 Thanks for feedback! |
Yeah... if you don't mind? 😇 It feels a bit like a "visual glitch". As if there is an empty |
This partially reverts 890f08e in terms of code an fully reverts that commit in terms of intended behaviour.
Previously the heading looked like an "error" message, however, this is really just a regular state that the user can appear in, and in future revisions this screen could be used for changing the remote directly from within the Github package, therefore an imperative tone fits better with the user's intent.
|
No problem @simurai, I have moved all the things to the pane's centre now. 💪 I have updated the PR's initial description (incl. screenshots) in case you'd like to review again. I also noticed that all the other dialog views with buttons use an "imperative tone" in the headings except for the "Multiple Remotes" view, so I changed that heading to "Select a Remote" which I think better conveys the view's purpose. 🤓 |
There was a problem hiding this comment.
Ok, this looks great. @robertrossmann thanks for all the improvements. 🙌 🙇
|
Thanks for all the feedback and review! ❤️ |
Please be sure to read the contributor's guide to the GitHub package before submitting any pull requests.
Requirements
Description of the Change
This PR builds on #1927 and includes the following changes:
Modals with buttons are now aligned to the pane's bottom instead of to the vertical centre of the pane (also up to discussion; views with no controls are still aligned to the centre)Screenshots follow. 🎨
At the very least I would like to get the login modal rework merged; the rest is really up to discussion whether or not those changes are an improvement over the current look & feel.
Screenshot/Gif
Git tab
Too many changes
Unsupported directory
Create repository
aligned to bottomGithub tab
Select a Remote
aligned to bottomLogin
aligned to bottomAlternate Designs
I guess we can just keep the original Git & Github icons everywhere. I thought that using icons which better represent the current context would improve users' understanding of what's going on without reading the text. 🤔
As for the alignment, I think keeping everything in the middle won't hurt but for some reason I feel like the buttons should be somewhere down. Maybe I'm biased from seeing too many mobile UI screens where these kinds of buttons tend to be down so as to be easily reachable with your thumb (which obviously does not matter here).Screens with just a warning and no control should stay in the middle so as to catch your focus as quickly as possible. Screens with buttons are more easily perceivable due to strong colouring on those buttons.Benefits
Possible Drawbacks
N/A
Applicable Issues
N/A
Metrics
N/A
Tests
N/A
Documentation
N/A
Release Notes
Some of the less-frequently used screens (Github login, multiple remotes selection view etc.) have received visual overhaul. 🎨
User Experience Research (Optional)
N/A