Уберите это немедленно! Интерфейсные элементы мобильных страниц, которые реально раздражают

в 17:20, , рубрики: usability, web-разработка, веб-дизайн, дизайн, интерактивность, интерфейс, мобильные версии сайтов, прокрутка, сайты для мобильных, скроллинг

Были времена, когда мобильные версии сайтов были экзотикой. Всё своё внимание дизайнеры уделяли основным десктопным версиям. Сейчас наличие мобильной версии — это стандарт. Мы привыкли к тому, что любую веб-страницу можно открыть с телефона или планшета и она будет отображаться в удобном для чтения виде.

Дизайнеры разрабатывают упрощённый интерфейс сайта специально для маленьких экранов. Точнее, должны разрабатывать в идеальном мире. Но, к сожалению, в моду вошли некоторые интерфейсные элементы, которые не только не упрощают пользование мобильной версией, но и существенно усложняют пользователям доступ к информации. Кто-то когда-то решил, что эти элементы сделают сайт удобнее. С тех пор они кочуют от сайта к сайту, разработчики воспроизводят готовые интерфейсные паттерны, мало задумываясь об их удобстве и уместности.

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

Уберите это немедленно! Интерфейсные элементы мобильных страниц, которые реально раздражают - 1

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

1. Автоматически всплывающие элементы

В первую очередь это панель с названием сайта и кнопкой вызова меню в верхней части страницы. Это полезный и удобный блок. Но только до тех пор, пока разработчикам сайта не приходит в голову светлая мысль сделать его отображение динамичным. Когда мы скроллим страницу вниз, блок скрывается. Когда наверх — отображается.

Можно предположить логику авторов такого решения. Пока мы читаем текст и скроллим страницу вниз, сайт скрывает панель, чтобы она не занимала драгоценное место. Если мы начинаем скроллить страницу вверх, сайт считает, что  мы закончили читать и хотим вернуться на самый верх, чтобы открыть меню. Ну нам и показывают меню.

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

Иногда динамические панели добавляют не только сверху, но и снизу. Видимо, чтобы сделать пользовательский интерфейс ещё более интерактивным. Честное слово, иногда при активном чтении все эти всплывающие и исчезающие блоки начинают сильно раздражать. Так и хочется воскликнуть: оставьте поле с основным текстом в покое, не меняйте его размеры!

А панель навигации — вещь полезная. Только пусть она всегда остаётся на экране.

Уберите это немедленно! Интерфейсные элементы мобильных страниц, которые реально раздражают - 2

2. Горизонтальная прокрутка блоков

Ещё одно странное изобретение — цепочка блоков с горизонтальной прокруткой. Если таким образом реализована галерея изображений, то горизонтальная прокрутка хоть как-то оправдана. Но в сети появляется всё больше сайтов, где таким образом реализована навигационная панель. Например, список страниц.

Иногда складывается впечатление, что создатели этого сами даже не пробовали управлять своими сайтами с экранов смартфонов. Горизонтальная прокрутка не особо удобна, даже если пользоваться телефоном двумя руками — держать в одной руке, а водить по экрану другой. Но многие из нас читают страницы, держа телефон в одной руке и нажимая на экран большим пальцем. Попробуйте при таком положении руки выполнить большим пальцем строго горизонтальное движение где-нибудь в середине экрана. Так ненароком можно и случайный тап сделать — открыть ненужную страницу.

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

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

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

Кстати, в десктопных версиях такие горизонтальные ленты тоже встречаются. И там ими пользоваться так же неудобно, как и в мобильных версиях.

Уберите это немедленно! Интерфейсные элементы мобильных страниц, которые реально раздражают - 3

3. Динамическая загрузка следующих страниц

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

Этот механизм мог бы быть удобным, если бы сайт каким-то образом знал, что именно мы хотим почитать. Тогда мы получили бы бесконечную газету, составленную по нашим предпочтениям. Но обычно в такой ленте статьи появляются в соответствии с какой-то сортировкой: по времени, по популярности. Это совсем другое дело: мало у кого есть желание читать все статьи сайта подряд.

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

Кстати, у динамической загрузки страниц есть ещё один неприятный эффект. Допустим, мы всё же продолжаем читать статьи одна за другой и дошли до третьей статьи в ленте. Она нам понравилась и мы хотим сохранить её в закладках браузера. Какая именно статья там сохранится: первая или третья? В том-то и дело, что ответ совершенно непредсказуем — возможны оба варианта. Вообще, если мы находимся где-то на границе между статьями, то в закладке вполне может сохраниться вторая или четвёртая статья. Тут как повезёт.

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

Автор: Александр Клименков

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js