(Это перевод базового курса UX, который включает 31 основной принцип UX-проектирования: UX Crash Course: 31 Fundamentals. Если вы здесь впервые, то лучше начните сначала)
На протяжении карьеры у вас возникнет много общих вопросов, касающихся UX-дизайна. А какие-то вопросы даже не возникнут, хотя и должны. Сегодня поговорим о нескольких вещах сразу:
Фолд, картинки, заголовки
Фолд:
Одно из самых популярных “олдскульных” заблуждений — “о фолде”. Фолд — это та часть вашего дизайна, которая видна на экране пользователя до скрола (т.е. прокрутки вниз).
На все, что находится над линией фолда, обращают максимум внимания. Однако судя по исследованиям, которые мне встречались, вы можете рассчитывать, что 60–80% пользователей будут скролить за пределы фолда, если уверены, что найдут там что-то полезное.
Что бы там ни было над линией фолда, оно должно извещать пользователей о том, что находится под ней. Если пользователи понятия не имеют, что ждет их там внизу, то у них не будет мотивации это узнать.
Осторожно: Сейчас модно использовать эти огромные фоновые рисунки в верхней части страницы. Если при этом создается впечатление, что сайт кончается на линии фолда, то пользователи не будут скролить — они просто уйдут. И если вам приходится добавлять графические элементы, подсказывающие пользователю “скролить дальше”, то дизайн слабоват.
Здесь можно подробнее узнать про фолд.
Картинки:
Многие UX-дизайнеры не считают картинки функциональным элементом дизайна, но картинки могут направлять взгляд пользователя, поэтому вам стоит брать их в расчет.
В частности, картинки с людьми привлекают больше внимания, чем любой другой элемент дизайна.
Как правило, чем эмоциональнее картинка, тем она более привлекательна.
Профессиональный совет: Если используете картинки с людьми, старайтесь, чтобы глаза человека на картинке были направлены туда, куда вы хотите обратить внимание пользователей. Вы удивитесь, когда почувствуете разницу.
На обеих тепловых картах, представленных выше, — один и тот же лэйаут. На одной из картинок ребенок смотрит на заголовок, а на другой — на читателя.
В результате, на обеих картинках внимание пользователей фокусируется на лице ребенка, но только на второй достаточно много внимания также достается сопроводительному тексту, изображению продукта и логотипу.
Какую из картинок вы бы выбрали?
Заголовки:
Кроме картинок с людьми, наши глаза также “цепляются” за самый большой, контрастный блок текста в лэйауте. Поэтому добавляя в дизайн большой заголовок, вы выбираете отправную точку, из которой пользователь начнет “сканировать” страницу.
Следовательно, очень важно, чтобы заголовок был усилен важной информацией, расположенной ниже. Если дальшейшая информация не слишком важная, то на нее будет обращено слишком много внимания (соответственно, меньше внимания на остальной контент). Если заголовок не усилен важной информацией, пользователи будут искать, на что переключить внимание после прочтения заголовка.
Многабукаф, ниасилил
- сделайте так, чтобы люди сфокусировались на чем-то, прежде чем скролить
- должно быть очевидно, что скролить можно и нужно
- выбирайте те картинки, которые привносят эмоции и направляют внимание пользователя в нужное место
- используйте заголовки, чтобы “натолкнуть” пользователя на важную информацию
Завтра мы изучим правило, которое, наконец-то, ответит на вопрос — где расположить кнопку? слева или справа?
И ещё, если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.
Nancy Pong и Ринат Шайхутдинов. | UxLab, LLC | Курсы дизайна в Йошкар-Оле