-
Notifications
You must be signed in to change notification settings - Fork 6
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Main page drop location has a lot of text #42
Labels
Comments
Yup, I'm happy to trim down the text, but I'd like to keep the size of the box large so that the click target remains large. Are you suggesting to remove the text and fill the void with additional padding? |
yes |
nickbabcock
added a commit
that referenced
this issue
Jan 26, 2022
As pointed out in #42, the file analysis box is filled with too much text. So I decided to sample the ecosystem and find inspiration. There's a common theme between all (or nearly all) of them: - Minimal text - Lots of padding - Usage of the phrase "drag and drop" - An icon (!) - A button or obvious indicator to click So I tried to follow their cues the best I could and came up with this before / after: An interesting note is that the "browse" button isn't actually a button -- it is just stylized text. That's because the containing box with the dashed border is the "button", but I needed to give users a visual indicator that the box is clickable. No accessibility worries as it is only a visual indicator and carries no function itself. It's nice to see the [Nielsen Normal group agree][0] with the forethought I had to allow file drops outside drop target, as even when users don't make it to the drop target the file should still be analyzed. One missing feature is an icon. It would be nice to have an icon made kinda like the "xsl, xslx, csv" one except with eu4, ck3, hoi4 (with eu4 most prominent). This would adequately solve #18 as well. This may have swung the pendulum too far in the other direction such that new users may not be given enough context. The home page has also been updated as part of this commit, which highlights a few more features. Closes #42 [0]: https://www.nngroup.com/articles/drag-drop/
nickbabcock
added a commit
that referenced
this issue
Jan 26, 2022
As pointed out in #42, the file analysis box is filled with too much text. So I decided to sample the ecosystem and find inspiration. There's a common theme between all (or nearly all) of them: - Minimal text - Lots of padding - Usage of the phrase "drag and drop" - An icon (!) - A button or obvious indicator to click So I tried to follow their cues the best I could and came up with this before / after: An interesting note is that the "browse" button isn't actually a button -- it is just stylized text. That's because the containing box with the dashed border is the "button", but I needed to give users a visual indicator that the box is clickable. No accessibility worries as it is only a visual indicator and carries no function itself. It's nice to see the [Nielsen Normal group agree][0] with the forethought I had to allow file drops outside drop target, as even when users don't make it to the drop target the file should still be analyzed. One missing feature is an icon. It would be nice to have an icon made kinda like the "xsl, xslx, csv" one except with eu4, ck3, hoi4 (with eu4 most prominent). This would adequately solve #18 as well. This may have swung the pendulum too far in the other direction such that new users may not be given enough context. The home page has also been updated as part of this commit, which highlights a few more features. Closes #42 [0]: https://www.nngroup.com/articles/drag-drop/
nickbabcock
added a commit
that referenced
this issue
Jan 26, 2022
As pointed out in #42, the file analysis box is filled with too much text. So I decided to sample the ecosystem and find inspiration. There's a common theme between all (or nearly all) of them: - Minimal text - Centered text - Lots of padding - Usage of the phrase "drag and drop" - An icon (!) - A button or obvious indicator to click So I tried to follow their cues the best I could and came up with this before / after: An interesting note is that the "browse" button isn't actually a button -- it is just stylized text. That's because the containing box with the dashed border is the "button", but I needed to give users a visual indicator that the box is clickable. No accessibility worries as it is only a visual indicator and carries no function itself. It's nice to see the [Nielsen Normal group agree][0] with the forethought I had to allow file drops outside drop target, as even when users don't make it to the drop target the file should still be analyzed. One missing feature is an icon. It would be nice to have an icon made kinda like the "xsl, xslx, csv" one except with eu4, ck3, hoi4 (with eu4 most prominent). This would adequately solve #18 as well. This may have swung the pendulum too far in the other direction such that new users may not be given enough context. The home page has also been updated as part of this commit, which highlights a few more features. Closes #42 [0]: https://www.nngroup.com/articles/drag-drop/
nickbabcock
added a commit
that referenced
this issue
Jan 26, 2022
As pointed out in #42, the file analysis box is filled with too much text. So I decided to sample the ecosystem and find inspiration. There's a common theme between all (or nearly all) of them: - Minimal text - Centered text - Lots of padding - Dashed border - Usage of the phrase "drag and drop" - An icon (!) - A button or obvious indicator to click So I tried to follow their cues the best I could and came up with this before / after: An interesting note is that the "browse" button isn't actually a button -- it is just stylized text. That's because the containing box with the dashed border is the "button", but I needed to give users a visual indicator that the box is clickable. No accessibility worries as it is only a visual indicator and carries no function itself. It's nice to see the [Nielsen Normal group agree][0] with the forethought I had to allow file drops outside drop target, as even when users don't make it to the drop target the file should still be analyzed. One missing feature is an icon. It would be nice to have an icon made kinda like the "xsl, xslx, csv" one except with eu4, ck3, hoi4 (with eu4 most prominent). This would adequately solve #18 as well. This may have swung the pendulum too far in the other direction such that new users may not be given enough context. The home page has also been updated as part of this commit, which highlights a few more features. Closes #42 [0]: https://www.nngroup.com/articles/drag-drop/
nickbabcock
added a commit
that referenced
this issue
Jan 26, 2022
As pointed out in #42, the file analysis box is filled with too much text. So I decided to sample the ecosystem and find inspiration. There's a common theme between all (or nearly all) of them: - Minimal text - Centered text - Lots of padding - Dashed border - Usage of the phrase "drag and drop" - An icon (!) - A button or obvious indicator to click So I tried to follow their cues the best I could and came up with this before / after: An interesting note is that the "browse" button isn't actually a button -- it is just stylized text. That's because the containing box with the dashed border is the "button", but I needed to give users a visual indicator that the box is clickable. No accessibility worries as it is only a visual indicator and carries no function itself. It's nice to see the [Nielsen Normal group agree][0] with the forethought I had to allow file drops outside drop target, as even when users don't make it to the drop target the file should still be analyzed. One missing feature is an icon. It would be nice to have an icon made kinda like the "xsl, xslx, csv" one except with eu4, ck3, hoi4 (with eu4 most prominent). This would adequately solve #18 as well. This may have swung the pendulum too far in the other direction such that new users may not be given enough context. The home page has also been updated as part of this commit, which highlights a few more features. Closes #42 [0]: https://www.nngroup.com/articles/drag-drop/
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I don't think the second sentence is needed here:
![image](https://user-images.githubusercontent.com/72509152/151046033-3803d2d5-8032-46c3-a25a-9a4d54b80d2e.png)
The text was updated successfully, but these errors were encountered: