1. Альтернативи кнопці «Вгору»
2. висновок

Короткий виклад: 9 UX рекомендацій для посилань «Вгору», які допомагають користувачам перейти на початок довгої сторінки. Залежно від потреб користувачів інші методи можуть бути більш придатними на деяких сайтах.

Популярність гнучкого веб-дизайну привела до поширення одностолбцових дизайнів з довгими сторінками як в мобільних, так і в десктопних версіях. Наслідком цих дизайнів стала кнопка «Вгору», яка дозволяє користувачам швидко перейти до початку сторінки.

Коли користувачі досягають низу дуже довгою сторінки, їм часто потрібно повернутися наверх сторінки, щоб:

• Подивитися меню навігації і вибрати новий пункт призначення
• Скористатися функцією фільтрації і сортування доступу
• Ввести або відредагувати запит в поле пошуку.

Операційні системи і браузери вже пропонують безліч способів зробити це: натискання клавіші «Додому» на клавіатурі, натискання рядка стану в Safari на iOS, використання команд швидкого доступу і т. Д.

Незважаючи на те, що підкована аудиторія (наприклад, читачі цієї статті) може бути знайома з цими методами, більшість користувачів цього не знають. Ці методи дуже приховані і не підходять для звичайних веб-користувачів, які просто прокручують сторінку пальцем або мишею.

Коли сторінка, дійсно, довга (наприклад, через нескінченної прокрутки ), Стає занадто стомлюючим прокручувати назад по екранах і екранів вмісту. Звідси роль кнопки «Вгору».

9 рекомендацій для кнопок «Вгору»

Ось основні рекомендації, які допоможуть вам вирішити, коли використовувати кнопку «Вгору» і як її ефективно створювати.

1. Використовуйте кнопки «Вгору» для сторінок, довжина яких перевищує 4 екрану. Для відносно коротких сторінок посилання «Вгору» не потрібні - люди можуть просто прокручувати сторінку назад без особливих зусиль. Не потрібно захаращувати інтерфейс , Якщо ви можете просто використовувати смугу прокрутки або свій палець, щоб швидко перейти до початку сторінки.
2. Помістіть постійну кнопку «Вгору» в нижній правій частині сторінки. Саме тут люди очікують її побачити. Ця позиція в стороні, але помітна. Коли кнопка поміщається в інше місце на екрані, її часто не помічають.
3. Підпишіть кнопку «Вгору». Ця фраза є найбільш описової. Тільки значок (наприклад, стрілка, спрямована вгору) може бути неоднозначним і, в залежності від графічної реалізації, може не передавати правильне значення.

MedlinePlus.gov: Значення значка стрілки занадто незрозуміло. Текстовий підпис допоможе подолати неясність в цьому контексті.

Overstock.com: Текстова напис Back to Top (Вгору) знаходиться поруч із позначкою стрілки, допомагає пояснити функцію кнопки.

4. Майте одну фіксовану посилання Наверх на сторінці замість того, щоб додавати кілька посилань в кожному розділі сторінки. (Цей останній шаблон користувався популярністю на сторінках з якорями .) У дослідженнях юзабіліті ми спостерігаємо, як люди ігнорують ці повторювані посилання, тому що вони настільки передбачувані.

USA.gov: повторюються посилання Наверх збільшують візуальний безлад, змушуючи їх ігнорувати.

5. Залишайте кнопку маленької, щоб вона не закривала важливі елементи сторінки. Але, якщо ви перебуваєте на сенсорному екрані, зробіть її досить великий, щоб люди могли натиснути на неї.

6. Зробіть кнопку візуально виділяється на сторінці. Коли кнопка «Вгору» занадто сильно зливається з фоновим контентом, користувачі з меншою ймовірністю помітять і використовують її.

7. Розгляньте можливість затримки появи параметра «Вгору» до тих пір, поки користувачі не прокрутять кілька сторінок і не покажуть, що вони хочуть прокручувати вгору (наприклад, рух смуги прокрутки вгору, жест гортання вгору). Таким чином, кнопка з'являється тільки тоді, коли вона, швидше за все, необхідна, не закриваючи важливі частини екрану решту часу.

Overstock.com: Посилання «Вгору» з'являється тільки при прокручуванні сторінки. (І вона в нижньому правому куті, що ми також рекомендуємо.)

8. Зробіть кнопку нерухомою. Як тільки вона з'явиться, не дозволяйте їй рухатися. Рухомі елементи сильно відволікають, так як будь-який рух на екрані автоматично приваблює око.

9. Дозвольте користувачам управляти прокруткою. Ніколи не дозволяйте сторінці прокручуватися автоматично, наприклад, коли новий контент стає доступним у верхній частині сторінки. Краще надати повідомлення і дозволити користувачам приймати рішення про те, чи слід прокручувати сторінку до початку, щоб побачити новий контент.

Альтернативи кнопці «Вгору»

Існують альтернативні методи направити людей, куди їм потрібно. Повернення до початку сторінки - це засіб для досягнення мети. Якщо ви можете передбачити, чого захочуть користувачі, і запропонувати це їм, ще краще. Нижче наведено кілька ідей:

Навігація в нижній частині сторінки може задовольнити тих, хто хоче повернутися до початку сторінки, щоб перейти або знайти щось ще. Цей підхід працює найкраще, коли користувачі мають тенденцію прокручувати до найнижчої частини довгих сторінок вашого сайту.

Etsy.com: Замість того, щоб використовувати кнопку «Вгору», цей сайт пропонує посилання в нижньому колонтитулі і поруч з ним для підтримки подорожі користувача.

Іноді фіксовані меню - більш елегантне рішення, ніж кнопка «Вгору». Якщо основною метою прокрутки є перехід до різних тем або розділів веб-сайту, наявність правильних параметрів меню, доступних, коли люди в них потребують, усуває необхідність повернення.

Аналогічним чином, якщо основною метою прокрутки сторінки вгору є доступ до функцій, зазвичай зустрічається у верхній частині сторінки (наприклад, фільтр, сортування, пошук, наступна сторінка), то їх відображення допоможе користувачам.

Nordstrom.com: Цей веб-сайт фіксує на сторінці функції сортування товарів, запобігаючи необхідність повернення до початку сторінки для більшості торгових завдань

Кнопка «Головна» на соціальних сайтах часто призводить людей до початку їх домашньої сторінки, яка, виявляється, є сторінкою з довгою стрічкою новин і їй найбільше потрібно швидкий спосіб повернутися до початку. Більшість людей на соціальних сайтах звикли натискати кнопку «Головна» ( «Додому»), щоб прокручувати до початку стрічки.

Хоча кнопка «Головна» може працювати на соціальних сайтах, не розраховуйте на неї для інших типів веб-сайтів. На звичайних веб-сайтах люди очікують, що посилання Головна призведе їх на головну сторінку, а не в верхню частину тієї ж веб-сторінки.

Twitter.com: Кнопка "Головна" одночасно виконує функцію кнопки Вгору.

висновок

Існує багато хороших рішень, які допомагають людям повернутися до початку веб-сторінок. Перш ніж ви вирішите впровадити посилання «Вгору», обміркуйте свій варіант використання і визначте, який підхід краще всього підходить для вашої аудиторії.