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

Над линией фолда

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

Около 74% времени тратится на контент двух верхних экранов. Остальные 26% пользователи перемещаются небольшими шагами вниз по странице.

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

Совет 1. Разделите область над линией фолда вертикально. С одной стороны вы можете проиллюстрировать свое сообщение изображением, чтобы помочь пользователям быстро обработать информацию. А с другой стороны поместить текст.

Закон завершенности и иллюзия полноты

Гештальтпсихологи отличаются от обычных тем, что не препарируют наше сознание на кусочки, а рассматривают его целиком. Ключевое слово здесь «целостность». Когда мы сталкиваемся с недостающим фрагментом картины, наше восприятие заполняет этот промежуток.

Определение иллюзии полноты дал первый проектировщик человеческого интерфейса Apple, Брюс Тогнаццини, в 1998 году. У нас этот феномен называют иллюзией конца веб-страницы или ложным дном:

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

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

Шрифты

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

Размер шрифта, в свою очередь, должен соотноситься с важностью текста. Сначала человек обращает внимание на шрифт самого большого размера. Хорошая иерархия зависит не только от размера, но и от комбинации всех свойств шрифта.

Совет 3. Подбирать комбинацию свойств нужно особенно тщательно: ограничить количество цветов (обычно это не более трех) и толщины начертания (обычно две).

Совет 4. Увеличьте контраст между текстом и фоном.Это улучшит не только дизайн, но и доступность. Проверить коэффициент контрастности можно с помощью одного из онлайн-инструментов. А если вы хотите изучить основы инклюзивного дизайна, то стоит обратиться к WCAG 2.0.