Skip to content
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

Closed
crschnick opened this issue Jan 25, 2022 · 2 comments · Fixed by #50
Closed

Main page drop location has a lot of text #42

crschnick opened this issue Jan 25, 2022 · 2 comments · Fixed by #50

Comments

@crschnick
Copy link
Collaborator

I don't think the second sentence is needed here:
image

@nickbabcock
Copy link
Collaborator

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?

@crschnick
Copy link
Collaborator Author

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
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants