Import from MAL/anilist: Restructure import page #61

New issue

Open

opened 2020-10-02 15:45:25 +02:00 by Serraniel · 0 comments

Serraniel commented

2020-10-02 15:45:25 +02:00

(Migrated from github.com)

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:

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](https://user-images.githubusercontent.com/8461282/94930113-3e49ed00-04c6-11eb-8a51-7f0057624582.png)