Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>4 июн 2021</li>

3 <li>0</li>

4 </ul>Самое важное о UX-дизайне от мировых экспертов по юзабилити.

5 Пишет про тексты в интерфейсе, проектирование и дизайн. Развивает направление UX-редактуры в Skyeng. Ведет телеграм-канал про редактуру "Письма от Яны Дворецкой"

6 UX-дизайн - это сложно, если не знаешь, с чего начать. Мы собрали золотые правила зарубежных специалистов Якоба Нильсена, Бена Шнейдермана и Брюса Тогнаццини и наших - Влада Головача и Ильи Бирмана. Они помогут начинающим дизайнерам, проектировщикам, UX-писателям и продакт-менеджерам создавать качественные, понятные и приятные продукты.

7 Принцип 1

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

9 Само понятие UX-дизайна, или дизайна пользовательского опыта, намекает, что работа дизайнера сосредоточена вокруг взаимодействия пользователей с продуктом. Значит, нужно разобраться, удобен ли целевой аудитории этот продукт.

10 С помощью UX-тестов можно определить, всё ли понятно пользователям в продукте, есть ли трудности и почему они возникают. Исследователи дают задания респондентам, задают вопросы и внимательно наблюдают за их действиями. Скриншот: SkillboxПринцип 2

11 Хорошо, когда пользователи точно знают, к чему привели их действия и чего ожидать. Например, им не приходится буравить экран взглядом в мучительном ожидании: "Ну что там?" Они могут быть уверены, что данные не пропадут. Якоб Нильсен<a>утверждает</a>, что чем более предсказуема работа с сервисом, тем больше доверия к нему и тем приятнее пользовательский опыт.

12 Илья Бирман в своей книге "Пользовательский интерфейс" приводит пример о важности обратной связи:

13 В челябинском почтовом отделении №80 работает электронная очередь. У входа стоит машинка с единственной кнопкой. Нажимаешь кнопку, и через две секунды на чековой ленте печатается номерок. Эти две секунды - целая вечность. Многие решают, что кнопка не сработала, и жмут ещё раз. Рядом с машинкой всегда валяются"лишние" номерки. Если бы машинка делала хоть что‑то сразу в ответ на нажатие - издавала звук или мигала лампочкой, - такой проблемы бы не было.

14 А Брюс Тогнаццини<a>добавляет</a>: "Хорошо, если пользователям не нужно искать или догадываться о состоянии системы. Они должны взглянуть на интерфейс и сразу понять, что там сейчас происходит".

15 Не забывайте про обратную связь. Это важно.

16 Принцип 3

17 Не придумывайте новое, если можно использовать старый добрый паттерн. Казалось бы, где тут креатив? Вы правы, здесь его нет. Зато есть забота о пользователях.

18 Чем более знакомым будет для них интерфейс продукта, тем быстрее они начнут пользоваться сервисом. Им не придётся долго учиться для этого, ведь не все готовы тратить много времени. И Бен Шнейдерман, и Якоб Нильсен уверены, что лёгкость на старте и консистентность интерфейса улучшают пользовательский опыт.

19 А Брюс Тогнаццини<a>добавляет</a>:"Мода [и красота] не должна победить юзабилити".

20 Одна из таких часто используемых фич для приложений - плавающая кнопка. Такая есть в приложениях Twitter, Google Docs, на лендингах Skillbox и наверняка много где ещё. Пользователи сразу понимают, как с ней работать. Скриншот: SkillboxПринцип 4

21 В книге "Дизайн пользовательского интерфейса" Влад Головач говорит про сообщения об ошибках:

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

23 <ul><li>недостаточно гибка, чтобы приспособиться к его действиям;</li>

24 <li>недостаточно умна, чтобы показать ему возможные границы его действия;</li>

25 <li>самоуверенна и считает, что пользователь дурак, которым можно и нужно помыкать.</li>

26 </ul>Все главные специалисты по юзабилити сходятся на том, что лучше не просто показывать хорошие уведомления об ошибках, а предотвращать их.

27 То неловкое чувство, когда ты ещё ничего не сделал, но форма регистрации уже вся красная. Скриншот: SkillboxСуществует два типа ошибок: промахи и ошибки.

28 <ul><li>Промахи - ошибки по невнимательности.</li>

29 <li>Ошибки - сознательное действие, которое произошло потому, что пользователь не понял сервис, дизайн оказался недостаточно очевидным.</li>

30 </ul>Избегайте промахов - задавайте ограничения для действий и корректные значения по умолчанию. А ещё найдите места в интерфейсе, где пользователь по невнимательности может сделать что-то не так. Например, чтобы он попал пальцем на нужную ему кнопку "Сохранить", уберите от неё подальше кнопку "Удалить" или "Выйти без сохранения".

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

32 Если ошибку нельзя предотвратить, то напишите понятное сообщение о ней. Якоб Нильсен, известный специалист по юзабилити, рекомендует:

33 <ul><li>Расскажите, что пошло не так, на языке своей аудитории. Избегайте технического жаргона.</li>

34 <li>Предложите решение, которое может немедленно устранить ошибку или как-то помочь.</li>

35 </ul>Принцип 5

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

37 Якоб Нильсен<a>считает</a>, что польза не в том, чтобы показать как можно больше, а в том, чтобы показать то, что нужно, в правильный момент. Так мы снижаем когнитивную нагрузку: выдаём информацию порционно и раскладываем по порядку. Люди любят порядок.

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

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

40 Лучше всего этот принцип демонстрирует<a>сайт Apple</a>: информацию о товаре здесь не вываливают сразу. Для начала дают впечатлиться визуальной частью, а дальше перенаправляют на более информативные страницы, где про каждый продукт рассказывают подробнее. Скриншот: SkillboxИменно благодаря этому принципу "<a>Google Справка</a>" до сих пор не превратилась в скучный справочник, в который никто не заглядывает.

41 Здесь есть советы - для стандартных ситуаций. Пояснения в "раскрывашках" и табах - для сложных случаев. Есть ресурсы для тех, кто хочет узнать больше. Минимализм и последовательная выдача информации делает "<a>Google Справку</a>" полезным и практичным инструментом. Скриншот: SkillboxПринцип 6

42 <a>15% населения земного шара</a> - миллиард человек - живёт с инвалидностью. При этом<a>семь из десяти пользователей</a>с ограниченными возможностями сразу уходят с сайта, если он оказывается им недоступен. А это большая аудитория.

43 Бен Шнейдерман и Якоб Нильсен призывают: подумайте о потребностях и физических ограничениях целевой аудитории и разработайте дизайн, который всё это учитывает. Не забудьте про различия между новичками и экспертами - добавляйте поясняющие тултипы для первых и сложные функции, быстрые клавиши для вторых. Учитывайте возраст, инвалидность, культурные различия пользователей и типы гаджетов.

44 Используйте контрастные цвета для текста в макете. Это помогает слабовидящим пользователям (а также в условиях низкой освещённости) легче читать содержимое на экране. Вот как Slack.

45 Скриншот: SkillboxКак узнать, что удобно пользователям? Тестируйте!

46 На UX-тестах пользователи взаимодействуют с продуктом, а исследователь наблюдает, возникают ли у них проблемы, где и какие. Если многие люди сталкиваются с похожими проблемами, важно внести изменения в дизайн.

47 Проектирование - итеративный процесс, и он требует улучшений на всех этапах. Источник:<a>Smashing Magazine</a>. Скриншот: SkillboxПринцип 7

48 Информация, необходимая для работы в сервисе (например, метки полей или пункты меню), должна быть видимой или легко находимой. А для этого:

49 <ul><li>предлагайте помощь прямо здесь, в контексте, вместо того чтобы тренировать память пользователей;</li>

50 </ul>Например в Facebook* Ads Manager можно быстро разобраться с непонятными целями рекламы и установить нужную. Скриншот: Skillbox<ul><li>сократите количество информации, которую нужно запомнить.Большинству людей легче узнавать предложенный вариант, чем самим вспоминать верный ответ. Вам скорее правильно ответят на вопрос: "Пномпень - это столица Камбоджи?", чем на: "Какая столица у Камбоджи?".</li>

51 </ul>Как удачно<a>обобщил</a>всё это Якоб Нильсен: "Узнавание лучше, чем вспоминание".

52 Принцип 8

53 Пользователи часто совершают действия по ошибке. Специалисты по UX разобрались, что им нужно в этом момент: юзеры хотят, чтобы у них был "аварийный выход".

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

55 Windows запрашивает подтверждение, перед тем как очистить корзину. Это предотвращает потерю важных данных по ошибке. Скриншот: SkillboxВлад Головач в книге "Дизайн пользовательского интерфейса" пишет:

56 Почти всё время пользователь может что-либо испортить и знает это. Он может отформатировать жёсткий диск, может стереть или испортить нужный файл. Неудивительно, что пользователь часто боится. <…> Пользователей нужно всемерно снабжать ощущением, что ничего не может произойти, пока этого не захочется самому пользователю.

57 Для этого он рекомендует:

58 <ul><li>не делать кнопки, опасные для пользователя, кнопками по умолчанию;</li>

59 <li>дать пользователям возможность отменять свои действия.</li>

60 </ul>Пользователь, знающий, что он не может совершить ошибку, испытывает радость и умиротворение.

61 * * *

62 Эти принципы - главное, но не всё. Чтобы проектировать удобные интерфейсы, нужно знать гораздо больше. Советуем прочитать по теме:

63 * Решением суда запрещена "деятельность компании Meta Platforms Inc. по реализации продуктов - социальных сетей Facebook* и Instagram* на территории Российской Федерации по основаниям осуществления экстремистской деятельности".

64 <a>Попробуйте бесплатно 4 топовые профессии в дизайнеПройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>