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

Import from MAL/anilist: Restructure import page #61

Open
Serraniel opened this issue Oct 2, 2020 · 0 comments
Open

Import from MAL/anilist: Restructure import page #61

Serraniel opened this issue Oct 2, 2020 · 0 comments
Assignees
Labels
Priority: Low Low priority issue. State: In progress Issue in development. Type: Enhancement The issues describes a new feature or some other kind of enhancement for the project.

Comments

@Serraniel
Copy link
Owner

This is a personal suggestion from me I also officially suggested in the aniwatch discord:
https://canary.discordapp.com/channels/541683465599451136/552601094279266323/758395674671972463

My personal result of the discussion in #bugs regarding the import:
Restructure the imports so all settings are close together. In the original design, there are three checkboxes on the top, followed from a separator. After the separator there is a red box mentioning, that those changes are irreversible. Additionally, on the last line there is a sentence 'Read this explanation [...]' with 'this' being a link. After that alert there is another explanation on how to use the link, then the input for the link, captcha, log placeholder and submit button. This isn´t optimal at all because: The actual settings for the import are far away from the actual form the user will use to perform the import, namely the input button. Additionally the red alert box with the explanation link is separated by a horizontal separator from the settings it refers to and the link is pretty 'small' (regarding text length) and placed more close to the end of the box than it has to. Following things could be done as improvment: Move the settings (aka checkboxes) into the the actual form the user must interact with; the input and submit button, so it is more clear they settings belong to the import progress. Remove the horizontal separation as there is no logical split at all between any of the settings or the explanation texts. Extend the link in the red alert by making this explanation the link and not only this. Side effect: the user actually notices, the link is an explanation as the word itself is part of the link. Also switch the sentences so the link comes first and will be recognized first. Users may stop reading after first sentence. Also move the log placeholder below the submit button as it is the most unimportant part of the page and useless space until you finally perform the import.
In my draft the red alert is top most and a bit far away of the checkboxes. One reason for this is, that things written first also will be read first and have a lower chance to be skipped during reading. A negative effect of this is, that it´s far way from the checkboxes, so also I also recommend to add a tooltip with a simple sentence to the checkbox. This can be clicked or or hovered on desktop and tapped on mobile. You already use that question mark on other pages (mostly as link not as tooltip, still think it would be a nice addition). In the end the website could look like this:
image

@Serraniel Serraniel added Priority: Medium Average priority issue. State: New New items which hasn´t been sighted yet. Type: Enhancement The issues describes a new feature or some other kind of enhancement for the project. labels Oct 2, 2020
@Serraniel Serraniel changed the title Import from MAL/anilist: Restructore import page Import from MAL/anilist: Restructure import page Oct 3, 2020
@Serraniel Serraniel self-assigned this Oct 3, 2020
@Serraniel Serraniel added State: In progress Issue in development. and removed State: New New items which hasn´t been sighted yet. labels Oct 3, 2020
Serraniel added a commit that referenced this issue Oct 6, 2020
@Serraniel Serraniel added Priority: Low Low priority issue. and removed Priority: Medium Average priority issue. labels Dec 26, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Priority: Low Low priority issue. State: In progress Issue in development. Type: Enhancement The issues describes a new feature or some other kind of enhancement for the project.
Projects
None yet
Development

No branches or pull requests

1 participant