- PVSM.RU - https://www.pvsm.ru -

Дорогой веб-дизайнер, давай перестанем нарушать возможность скроллить

Дорогой веб-дизайнер, давай перестанем нарушать возможность скроллить - 1

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

Дорогой веб-дизайнер, давай перестанем нарушать возможность скроллить - 2 [1]
Прекрасные веб-сайты агенств. Но похоже, что мы подходим к единству в дизайне.

Ну ладно, не всем это нравится. Секунду… Что это?

Дорогой веб-дизайнер, давай перестанем нарушать возможность скроллить - 3

Почему ты кричишь на меня, стрелка вниз? Или мне лучше называть тебя «скреллка» (скролл + стрелка)? Я умею пользоваться компьютером, понятно? Я естественный открыватель. Всю свою жизнь скроллил, я не глупый. :( Не указывай мне, что делать. Это грубо.

«Если это требует объяснений, это уже не работает», — Milton Glaser

Дорогой дизайнер

Вы нарушаете процесс восприятия пользователем в его наиболее базовом взаимодействии с веб-сайтом. Пользователь умеет скроллить [2], здесь ваше дизайнерское решение нарушает умозрительную модель. Разве вы не видите? На странице нет изгиба [3], с ней все в порядке. Эта проблема относится, к так называемым проблемам аффорданса (англ. [4] и рус. [5]). Стрелка — это не решение, это странно и шумно, то, что ни один дизайнер должен показывать пользователю.

Используя стрелку для того, чтобы сказать пользователю, чтобы тот проскроллил страницу — это то же самое, что написать на кнопке «кликни здесь», даже если это совсем не кнопка. Это не дизайн.
Это даже не искусство, раз вы вынуждены объяснять его.

Эта стрелка не преследуют никакую цель, если только цель — создать себе проблем. Это ленивое и бессмысленное дизайнерское решение, потому что оно использует принуждение вместо общения.
«Но мои клиенты хотят изображение во весь экран! ОМГ что мне делать?»
Успокойтесь… Мы тут все дизайнеры. Мы можем это исправить.


Вы можете больше, чем «стрелка для скроллинга»

Дорогой веб-дизайнер, давай перестанем нарушать возможность скроллить - 4

Читайте пост на тему скроллинга от компании Huge: http://www.hugeinc.com/ideas/perspective/everybody-scrolls [6]

Исследование Huge [7] показало, что стрелка получила успешный результат, но для меня некоторые пользователи скроллили страницу, потому что она на них кричала. Другими словами, стрелка работает, но лишает приятного взаимодействия со страницей.

Используем легкую анимацию для общения (не анимированную стрелку)

Анимация отдельных элементов страницы может дать пользователю определенные подсказки, касаемо контента веб-сайта.
В первом примере, контент появляется снизу и тут же исчетзает. Как будто говорит: «Привет, я тут. Если я тебе нужен, ты знаешь, что делать.»
Дорогой веб-дизайнер, давай перестанем нарушать возможность скроллить - 5

MP4 [8]

Если на главном изображении применяется эффект параллакс, то используйте его, чтобы показать контент страницы.
Дорогой веб-дизайнер, давай перестанем нарушать возможность скроллить - 6

MP4 [9]

В случае с несколькими блоками, контент может быть неплохо организован:
Дорогой веб-дизайнер, давай перестанем нарушать возможность скроллить - 7

MP4 [10]

Не прячьте контент, возьмите его под контроль

Дорогой веб-дизайнер, давай перестанем нарушать возможность скроллить - 8

Приложение Google Fit для Android [11] использует небольшую часть первой карточки, которая находится чуть ниже диаграммы. Таким образом оно дает понять, что там еще есть, что посмотреть. Этот подход элегантен и интуитивно понятен, потому что больше не используются никакие элементы общения с пользователем.

Но тут нет ничего нового. Еще в 2006 г. Jared Spool рассуждал на тему того, что можно визуально обрезать контент, чтобы пользователь захотел скроллить. [12]

В интернете такой эффект можно добиться с помощью одной строчки CSS [13] или JavaScript (если нужно поддержать устаревших браузеров).

А что если комбинировать этот метод с анимацией и низкой прозрачностью контента? Так пользователь не будет отвлекаться от вашей любимой картинки:
Дорогой веб-дизайнер, давай перестанем нарушать возможность скроллить - 9

MP4 [14]
Давайте только осторожно с уровнем прозрачности. Слишком прозрачно — не хорошо. Да, и не забудьте вернуть прозрачность на 100%, когда пользователь будет скроллить страницу вниз :-)


Простота — это сложно, мы это знаем. Но иногда то, что просто, может оказаться результатом лени. Иногда легко придумать, но сложно использовать.

Уменьшите шум. Пообещайте мне, что ликвидируйте эту стрелку.

От переводчика [15]. Со всеми пожеланиями и замечаниями по поводу перевода прошу обращаться ко мне в личку. Спасибо!

Автор: shimapa23

Источник [16]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/interfejsy/88121

Ссылки в тексте:

[1] Image: https://twitter.com/timcaynes/status/554593526034731008

[2] Пользователь умеет скроллить: http://uxmyths.com/post/654047943/myth-people-dont-scroll

[3] На странице нет изгиба: http://thereisnopagefold.com/

[4] англ.: http://www.jnd.org/dn.mss/affordances_and.html

[5] рус.: http://www.okd.mdk.ksue.edu.ua/index.php?option=com_content&view=article&id=175%3A2010-05-12-20-08-55&catid=72%3A-11&Itemid=76

[6] http://www.hugeinc.com/ideas/perspective/everybody-scrolls: http://www.hugeinc.com/ideas/perspective/everybody-scrolls

[7] Исследование Huge: http://hugeinc.com/ideas/perspective/everybody-scrolls

[8] MP4: https://dl.dropboxusercontent.com/u/1065617/scroll-animations/01.mp4

[9] MP4: https://dl.dropboxusercontent.com/u/1065617/scroll-animations/02.mp4

[10] MP4: https://dl.dropboxusercontent.com/u/1065617/scroll-animations/03.mp4

[11] Приложение Google Fit для Android: https://play.google.com/store/apps/details?id=com.google.android.apps.fitness&hl=en

[12]  визуально обрезать контент, чтобы пользователь захотел скроллить.: http://www.uie.com/brainsparks/2006/08/02/utilizing-the-cut-off-look-to-encourage-users-to-scroll/

[13]  с помощью одной строчки CSS: https://medium.com/ckor/make-full-screen-sections-with-1-line-of-css-b82227c75cbd

[14] MP4: https://dl.dropboxusercontent.com/u/1065617/scroll-animations/04.mp4

[15] переводчика: http://pavel.shimansky.ru/

[16] Источник: http://habrahabr.ru/post/255099/