Каковы рекомендации / передовые практики в отношении размещения кнопки «вверх-вниз» на веб-странице с нижним колонтитулом?

Question

Я хочу добавить кнопку «вверх-вниз» в правом нижнем углу веб-страницы, содержащей большое количество контента. Имея в виду UX, я планирую согласовать дизайн моей кнопки «Вернуться вверх» с рекомендациями, приведенными в NN / g сообщении в блоге .

Однако здесь нет упоминаний. в этом сообщении в блоге о том, где должна располагаться кнопка «вверх-вверх», если на веб-странице есть нижний колонтитул.

• Должна ли эта кнопка перекрываться в нижнем колонтитуле?
• Или эта кнопка должна быть оставайтесь в правом нижнем углу, пока нижний колонтитул не станет видимым (в этом случае кнопка остановится над нижним колонтитулом), как исследовали другие в сообщениях Stackoverflow (например, связанный пост 1 , связанный пост 2 )?

Я хотел бы получить информацию от дизайнеров / экспертов UX по этому вопросу.

Спасибо!

Answer 1

Я считаю, что нет четких рекомендаций, потому что это должно следовать из общего дизайна вашей страницы. Но вы, безусловно, можете определить такие хорошие практики:

1. Кнопка становится видимой только тогда, когда пользователь прокручивает страницу дальше, чем второй экран, потому что до этого момента эта кнопка бесполезна.
2. Кнопка не должна перекрывать содержимое и мешать чтению, для этого она должна располагаться в левом нижнем углу. Обычно это не проблема, потому что область чтения экрана выше, чем кнопка может быть расположена. На самом деле нужно позаботиться о том, чтобы кнопка не перекрывала область нижнего колонтитула в мобильном представлении.
3. Кнопка всегда должна быть видимой, иначе это может быть странным поведением для пользователя. Пользователь может не понять, почему кнопка исчезла в конце страницы, потому что он там нужен.

Лучше разместить кнопку в нижнем левом углу, потому что это предотвратит случайный щелчок для мобильных устройств при прокрутке. И когда пользователь хочет нажать кнопку, ему не нужно сгибать большой палец, чтобы нажать на кнопку.

Чтобы кнопка не перекрывала содержимое нижнего колонтитула, можно добавить отступ снизу, равный высоте кнопки.