Чек-лист юзабилити сайта. Часть II: дизайн

Продолжаем цикл статей о юзабилити сайта. В прошлой рассмотрели основные параметры, на этот раз поговорим о принципах веб-дизайна. 

Визуальная составляющая — первое, с чем сталкиваются пользователи, попадая на сайт. По исследованию InstantShift (англоязычное digital-сообщество), для 94% людей дизайн — мерило, по которому они определяют, вызывает ли сайт доверие. 

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

 

Чек-лист, что проверить в веб-дизайне 

  1. Функциональность и умеренность. Убедитесь, что дизайн не отвлекает пользователей от содержания сайта и целевого действия. 
  2. Композиция и акценты. Тщательно продумывайте структуру и расставляйте акценты, чтобы пользователи не пропускали нужную информацию.
  3. Цветовая гамма. Выбирайте подходящие цвета, которые не будут сливаться и затруднять чтение. 
  4. Единообразие элементов. Следите, чтобы однотипные элементы на разных страницах сохраняли единообразие и последовательность.
  5. Типографика. Оформляйте тексты так, чтобы они быстро просматривались и легко читались. 
  6. Качество визуального контента. Используйте оригинальный визуальный контент, чтобы проиллюстрировать важные тезисы. 

Давайте рассмотрим каждый из пунктов детально. 

Умеренность

Заходя на сайт, мы сканируем его взглядом, чтобы найти то, за чем пришли. Если это интернет-магазин, ищем интересующие нас товары, если медиа-портал — свежие статьи, которые хотим прочитать. Но если на страницах много лишнего (информации, блоков и «украшений»), найти нужное сложно. 

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

На что обратить внимание, чтобы на сайте не было лишних элементов:

  • Уберите с главной страницы всё второстепенное и не относящееся к цели пользователей. Оставляйте только то, что введёт их в курс дела и ответит на главные вопросы, расскажет о лечении их «боли». Для фильтрации подойдёт вопрос: «Зачем этот элемент здесь». 
  • Освободите место. На сайте должно быть достаточно «воздуха», то есть пустого пространства. Оно выделяет контент и позволяет сфокусироваться на нём.
  • Отключите автозапуск видео, лупов и гифок. Оставьте пользователю иллюзию выбора. Кнопка Play позволит ему погрузиться в материал в удобное время. Кроме того, движение и мигание на фоне отвлекает от содержания.
  • Будьте креативны в меру. Авторский дизайн — безусловно, украшение сайта, но с ним можно переборщить в интерфейсах. Если креатива слишком много, он может заслонить пользу и назначение сервиса. На первом месте должны стоять функциональность дизайна и решение задачи пользователя: 

1.usability part2 2

 
Нефтяная» область на сайте студии дизайна не заслоняет нужную информацию, а украшает

 

Композиция и акценты

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

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

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

Правило третей

Придерживайтесь правила третей. Оно пришло в дизайн из живописи и связано с золотым сечением. Чтобы применить его, наложите на страницу «сетку», которая разделит страницу на 3 равные части вдоль каждой из сторон. Получится 9 одинаковых прямоугольников. Четыре центральные точки пересечения будут притягивать больше всего внимания: 

1.usability part2 3

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

Паттерны сканирования

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

При движении он повторяет начертание буквы F. Верхняя перекладина слева направо → нижняя перекладина в том же направлении → вертикальный отрезок сверху вниз. Зная это, располагайте важные элементы в последовательности F-паттерна. 

Кроме него есть Z-паттерн. Он характерен для сайтов с альбомным позиционированием. Взгляд скользит по траектории буквы Z: верхняя перекладина слева направо → диагональ → нижняя перекладина слева направо. 

1.usability part2 4

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

Акценты

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

1.usability part2 5

 Блок со статьёй при наведении курсора меняет цвета и выделяется на фоне монохромных блоков

Цветовая гамма 

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

  • Если у бренда есть корпоративные цвета, используйте их. Это повышает узнаваемость и вызывает доверие. Согласитесь, на сайте Сбербанка странно бы смотрелась цветовая гамма, отличная от фирменного зелёного: 

1.usability part2 6

  • Избегайте цветов, которые не подходят под тематику сайта или резонируют с ней. Например, розовый не ассоциируется со сферой недвижимости, поэтому не подойдёт для оформления сайта ЦИАН. Его связывают с отношениями или товарами для женщин:

1.usability part2 7

  • Используйте 2–3 цвета в оформлении интерфейса. Чем больше цветов, тем сложнее их гармонично сочетать. Для трёх цветов используйте соотношение 60-30-10. 60% — одноцветный фон, 30% — цвета иллюстраций или текста, 10% — для акцентных элементов. 

1.usability part2 8

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

Выбирайте для фона неяркие цвета, которые не мешают сосредоточиться на контенте. Подойдёт белый и оттенки серого, бежевого. 

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

1.usability part2 9

Также можно использовать различные онлайн-сервисы (colorscheme.ru и другие). 

  • Делайте элементы контрастными, то есть отличающимися по яркости.

1.usability part2 10

Пример того, как кнопки и надписи теряются из-за слабого контраста (белый и светло-серые, голубые гаммы)

Единообразие 

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

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

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

Типографика

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

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

  • Разбивка текста на абзацы до 10 строк. Это помогает избежать сплошной простыни, которую тяжело воспринимать: 
1.usability part2 11
 
Текст о Нэнси Пелоси на сайте Wonderzine разделён на крупные блоки (абзацы по 10–12 строк), поэтому он читается тяжело
  • Оптимальный размер кегля основного текста: 16–20 px. Мелкий шрифт не вызывает желания погрузиться в чтение. В сочетании с простынёй текста является убийственным приёмом для глаз пользователей. 
  • Внутренние отступы меньше внешних. Рассмотрим на примере. Если вы установили межстрочный интервал 1,3, то расстояние между абзацами должно быть как минимум в два раза больше (от 2,6 px). Это позволяет визуально группировать однотипные элементы и отделять их от других. 
  • Размер заголовков отличается от размера основного текста.  

1.usability part2 12

Заголовки на сайте интернет-издания «Свободная пресса» не отличается от полужирного выделения. Это затрудняет навигацию в статье

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

Качество контента

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

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

1.usability part2 13

Пример хороших иллюстраций: бутик обуви Lorenzi Milano на странице About us использует фотографии, снятые в мастерской бренда

Источник - Блог RU-CENTER

И ЕЩЕ

НОВОЕ

Cron, RAM, FTP и другие: расшифровываем параметры виртуального хостинга

Cron, RAM, FTP и другие: расшифровываем параметры виртуального хостинга

Если вы искали хостинг для сайта, то наверняка встречали в описании тарифов такие слова, как «диск», «память», FTP, PHP и другие. Тем, кто не погружен в IT-тематику, сложно понять, как эти параметры влияют на работу сайта и на какие из них нужно обращать внимание в первую очередь.

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

Подробнее

Ловим Дзен. Часть I. Что такое Яндекс.Дзен и нужен ли он вашему бизнесу

Ловим Дзен. Часть I. Что такое Яндекс.Дзен и нужен ли он вашему бизнесу

Яндекс.Дзен появился в 2017 году и первое время воспринимался как площадка для блогеров и журналистов. К декабрю 2020-го дневная аудитория Дзена достигла 20 миллионов человек, бренды активно используют его для рекламы. Подойдет ли этот канал вашему бизнесу — разбираемся в статье.

Подробнее

Ловим Дзен. Часть II. Как продвигать свой канал

Ловим Дзен. Часть II. Как продвигать свой канал

Мы выпустили статью, где рассказали, какому бизнесу может быть полезен канал в Яндекс.Дзен. На этот раз рассказываем, как создать канал и продвигать его.

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

Подробнее

Маркетинг клиентских баз данных

Маркетинг клиентских баз данных

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

Подробнее

SMM. Разбор соцсетей: куда какому бизнесу идти

SMM. Разбор соцсетей: куда какому бизнесу идти

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

Подробнее

Что выбрать для бизнеса: соцсети или сайт?

Что выбрать для бизнеса: соцсети или сайт?

В июле 2020-го Координационный центр доменов .RU/.РФ провёл среди своих пользователей онлайн-опрос «Домены против соцсетей: в чью пользу счёт». 

Оказалось, что почти половина пользователей (47%) задействуют несколько каналов для успешной коммуникации с аудиторией, то есть используют одновременно сайт и соцсети. 42% пользователей считают, что компании достаточно иметь свой сайт и только 4% присутствуют исключительно в соцсетях.

Подробнее

СЕЙЧАС ЧИТАЮТ

Я занимаюсь бизнесом и совсем не понимаю, что такое SSL-сертификаты

Я занимаюсь бизнесом и совсем не понимаю, что такое SSL-сертификаты

Расскажем, что такое SSL-сертификат, как он связан с безопасностью данных и почему ваш сайт следует перевести на защищенный протокол HTTPS. Заодно покажем, как это сделать. 

Подробнее

Cron, RAM, FTP и другие: расшифровываем параметры виртуального хостинга

Cron, RAM, FTP и другие: расшифровываем параметры виртуального хостинга

Если вы искали хостинг для сайта, то наверняка встречали в описании тарифов такие слова, как «диск», «память», FTP, PHP и другие. Тем, кто не погружен в IT-тематику, сложно понять, как эти параметры влияют на работу сайта и на какие из них нужно обращать внимание в первую очередь.

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

Подробнее

Регистрация доменов

Регистрация доменов

Доме́н (доме́нное имя) — это адрес сайта. В браузере вы увидите его в адресной строке:

Адрес сайта в браузере может выглядеть как https://nic.ru или https://www.nic.ru. Домен здесь — nic.ru. Префикс https:// — не домен, а обозначение протокола передачи данных. Префикс www настраивается после регистрации (покупки) домена.

Домен состоит из уникального имени и доменной зоны (домена), например nic — имя, .ru — доменная зона. Имя вы задаете самостоятельно, а доменную зону выбираете из уже существующих.

Подробнее

Почему важно регистрироваться в разных доменных зонах и в разных написаниях

Почему важно регистрироваться в разных доменных зонах и в разных написаниях

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

Подробнее

Как оценить стоимость существующего сайта с доменом

Как оценить стоимость существующего сайта с доменом

Начало 2020 года показало, что любой бизнес должен быть представлен в онлайне. Есть несколько способов это сделать: создать сайт с нуля или купить готовый. 

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

В этой статье разберём факторы, на которые стоит обратить внимание, прежде чем покупать готовый сайт. Эти знания помогут сэкономить деньги и время и защититься от мошенничества. 

Подробнее

КАТАЛОГ

ОБЯЗАТЕЛЬНАЯ ПРОГРАММА

ПРОИЗВОЛЬНАЯ ПРОГРАММА

ПРАКТИКА

© Елена Дунаева 2020

О НАШЕЙ МАСТЕРСКОЙ

К НАЧАЛУ СТРАНИЦЫ
Яндекс.Метрика