Hi,
I am developing an online course website.
The website will be responsive to all screen sizes (desktop, laptop, tablet and mobile).
Course text can be very long.
Therefore, we allow users to save any paragraph in the course text as their last position.
On desktop mode, when you hover with your mouse over a paragraph,
a “save last position” button shows us right next to that specific paragraph.
Once you click on that button, the paragraph is saved as the “last position”.
However, on mobile mode, there is no mouse hover event.
Therefore, I thought of the following solution:
On mobile mode only,
I will add a “plus” button (+) right next to each paragraph in the course text,
and then the user can tap on the “plus” button,
and the paragraph will be saved as “last position”.
Screenshot of my suggested solution in mobile mode is attached.
However, I am afraid that having a “plus button” right next to each paragraph,
will be “too noisy” from the user’s perspective and will hurt the user`s reading experience (aka “icon blindness”).
Therefore, my question is what is the best UI approach for saving a paragraph as the last position on Mobile?
Any response will be highly appreciated.