-
Notifications
You must be signed in to change notification settings - Fork 23
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
Make “upload” target bigger and don’t require drag-n-drop #31
Comments
Good proposal. Great point about “drop anywhere”. |
Subsequent drag&drops are not intuitive, probably bringing up the original UI on a dragenter event. Also, need to report if the font did not load for some reason (non-variable, CFF2) or if the file was not a font. |
Nice update! The target is 100% more obvious, now. It works as expected on initial load in Chrome (with the exception that I think drag-and-drop should ideally be possible even onto the sidebar).
Yeah, I think that the nicest solution would be watching for users to drag & drop a new font at any time would be most intuitive. https://dinamodarkroom.com/gauntlet/ does a fairly nice job of this. As you say, though, bringing up the yellow overlay when a drag is detected might be ideal (similar to Font Gauntlet, but probably adding the original "Drop a variable font here" text would be a nice helpful user hint). To make it more intuitive (and possible with keyboard-only use), maybe there could be some gray helper text in the bottom-right corner? |
Something that just occurred to me: Potentially, it might make sense to just start with one of the "preloaded" fonts active by default. To make these obvious but also save UI real estate, these fonts could be put in a typical By extension, instead of placing the "To inspect another font..." text in the bottom right corner, this direction could go directly under the font menu in that "Current Font" sidebar section. That way, new users can immediately click around, it's obvious that different fonts can be selected from a pre-populated list, and it's obvious that new ones can be uploaded. LTR language readers view webpages in an "F" shape, starting from top-left, so placing this font menu and upload direction in that spot will help make it immediately obvious what users can do. I think the drag-anywhere overlay would still work well in this scenario, too. :) |
Thanks for these good ideas. I’m thinking of implementing a font menu the same way the right-hand font menu works in Axis-Praxis: an initial list of fonts, to which any drag-drop fonts are appended. Keeping that menu inside the same panel as Font info would work nicely. |
BTW the big drop area is implemented as a giant, transparent |
Nice, that all sounds good! |
Currently, the "drop font here" target is very small. This means, in part, that it's easy for new users to drop a font on the main white area, which does nothing but gives them a "download" (in Chrome).
It would be much nicer if this had a bigger drop area, more similar to existing UI patterns on sites like WakamaiFondue or other typical drag-n-drop upload screens:
Ideally, this has a few features:
3: Visual cues: the "dashed border" is a common visual cue of a drag-n-drop target. You might use this to make the interaction more obvious.
Thanks for an awesome tool!
The text was updated successfully, but these errors were encountered: