Эту статью Ника Коленды я перевёл ещё в конце 2016 года. И не просто перевёл, а ещё и сопроводил комментариями от лица бренда, под которым проектирую интерфейсы все эти годы. Статья до сих пор актуальна и будет полезна как новичкам, только погружающимся в проектирование интерфейсов, так и опытным специалистам в качестве систематизации уже имеющихся знаний. Свои старые комментарии я немного освежил и оформил в виде цитат. Оригинал статьи с годами исчез по изначальной ссылке и превратился в нечто более сложное. Поэтому, к сожалению, сослаться на неё я больше не могу. Выделите точку входа в интерфейс Направляйте пользователей с помощью визуальной иерархии Проектируйте интерфейс учётом гештальт-принципов Демонстрируйте изменения интерфейса, не вводя пользователя в замешательство Уберите или снимите акцент с ненужной информации Покажите, что содержимое есть за границей видимой области Делайте часто используемые функции и важную информацию доступнее пользователям Сообщайте о статусах процессов Предлагайте несколько путей достижения одной и той же цели Сообщайте о требованиях и параметрах интерактивных элементов Подсказывайте, что произойдёт в результате взаимодействия с интерфейсом Награждайте и создавайте чувство уверенности у пользователей, идущих к цели сквозь ваши интерфейсы Закрывайте главные потребности пользователей Избавьте пользователей от подсчётов в уме Сообщайте о текущем положении пользователя в интерфейсе Упрощайте задачи, связанные с выбором Используйте общепринятые интерфейсы в веб-дизайне Предоставляйте обратную связь после каждого взаимодействия Уменьшайте негативные эффекты во время ожидания Не рассчитывайте на память пользователей Избегайте зигзагообразных паттернов движения глаз Наглядно показывайте, с какими элементами интерфейса можно взаимодействовать Общайтесь с пользователями с помощью знакомых всем слов и символов Увеличьте считываемость вашего интерфейса Делайте текст максимально читабельным Используйте единый стиль в интерфейсах Создавайте красивые, визуально сбалансированные интерфейсы Максимизируйте совместимость с учётом уровней знаний и навыков пользователей Максимизируйте совместимость с процессами работы, привычными пользователям Максимизируйте доступность вашего интерфейса Максимизируйте доступность для полей ввода данных и для крайних сценариев Максимизируйте доступность для всех контекстов Предотвратите возможность возникновения ошибок Отслеживайте сигналы о том, что пользователь вот-вот допустит ошибку Отделите функции, влекущие за собой большие последствия, чтобы уменьшить вероятность их случайного использования Предоставляйте возможности легко откатить или отменить действия Минимизируйте негативный эффект от прерванных последовательностей действий Увеличивайте размеры подвижных частей и кликабельных зон Показывайте ценные и подбадривающие сообщения об ошибках Сохраняйте информацию о предыдущих действиях пользователей Анализируйте поведение пользователей на сайте, чтобы обнаруживать проблемы с интерфейсом   В каждом интерфейсе должна быть чёткая отправная точка. Куда зрители должны посмотреть вначале? Сделайте это очевидным. Не стоит комбинировать разные способы выделения для одного заголовка (например, большой, жирный ярко-красный заголовок будет в большинстве случаев избыточным). Принимая решение о визуальном выделении, примите в расчёт то, как оно может выглядеть в адаптивных версиях. Эти несколько советов построены на принципе F-паттерна считывания контента. То есть, пользователи читают сверху-вниз слева-направо и дизайнеру следует избегать неожиданных «прыжков» и «развилок» в восприятии. Всё верно, но не стоит забывать, что некоторые языки читаются справа-налево. Это раз. А два — интерфейсы, с которыми пользователи работают ежедневно, не обязательно должны быть легко воспринимаемыми. Они должны быть удобными для выполнения задач пользователя. Например, профессиональные веб-интерфейсы могут обладать высоким порогом входа для новых пользователей, но после его преодоления работа будет значительно эффективнее, что окупит время на обучение. Мы буквально завалены раздражителями в интерфейсах.  Согласно гештальт-психологии, мы постоянно стараемся преодолеть этот  хаос, упрощая наше восприятие. Мы группируем объекты, разбиваем элементы  на категории, пытаемся увидеть картину целиком. Некоторые из принципов: сходство, близость, замыкание, связь, непрерывность и фигура и фон. Артемий Лебедев в 2006 году написал параграф Ководства «Теория близости» (http://www.artlebedev.ru/kovodstvo/sections/136/). В проектировании это до сих пор одно из популярнейших правил по частоте использования. На второе место я бы поставил цветовое кодирование. Затем всё остальное. Иногда интерфейс видоизменяется прямо на глазах у  пользователя. Сделайте эти изменения заметными, но не вводящими в  замешательство. Хороший интерфейс всегда информирует пользователя о том, что происходит. Отправляются данные — нам об этом говорит анимированная иконка, товар добавился в корзину — значок корзины видоизменился заметным образом (изменились цвет и состав), удалили пункт в списке — остальные элементы поползли вверх, нажали на якорную ссылку — страница плавно и быстро скроллится к нужному месту, а не мгновенно переносится в нужные координаты. И так далее и тому подобное. Оба совета из статьи охватывают все вышеперечисленные вещи, поэтому тут без критики, я с этим пунктом согласен. Наша способность фокусироваться не безгранична. Ненужные  элементы будут истощать этот ресурс. Поэтому удерживайте внимание  пользователей на важных сведениях и функциях. Не могу промолчать, глядя на картинку выше. С одной стороны совет хороший, а с другой очевидность или неочевидность тех или иных инструкций — дело субъективное. И иногда лучше расстроить кого-то излишними инструкциями, чем не дать их тому, кто без них не справится с задачей, поставленной перед интерфейсом. Все точки над i расставят тесты. Большинство современных браузеров прячут полосы прокрутки,  когда вы их не используете. Оставьте пользователям подсказки, что за  границей видимой области тоже есть содержимое. Предугадывайте стремления пользователей. После этого располагайте объекты этих стремлений в максимальной доступности. Ага, только дополнительно подумайте над тем, как это будет работать на устройствах с тач-скрином! Снижайте уровень неопределённости, демонстрируя пользователю релевантную информацию о состоянии системы. А это, друзья, редкий пример таких советов, которые будут действовать, даже если вырвать их из контекста. Разные пользователи отдают предпочтение разным сценариям  работы с системой. Создавайте разные пути для достижения одних и тех же  целей и позволяйте пользователям самостоятельно выбирать те варианты,  которые лучше подходят для их привычных сценариев работы. Предлагать пользователям альтернативные пути решения задач я бы не стал. На самом деле можно дать комментарий по каждому из советов. Авторизация с использованием разных логинов — сложное и важное решение. Оно будет зависеть от системы управления сайтом, требований к безопасности, бизнес-требований к системе, а не от прихоти дизайнера. Сопровождение повторяющихся функций клавиатурными шорткатами подходит в основном для настольных интерфейсов, а захламлять ими интерфейсы, которыми пользуются с планшетов, не стоит. Перетаскивание элементов курсором иногда может привести к нежелательным последствиям. Например, когда вы хотели выделить текст в элементе, а вместо этого утащили его. Поэтому, здесь тоже нужно принимать взвешенное решение и учесть много факторов. То же касается и редактирования данных напрямую.То есть, все эти советы по-своему хороши, но в отрыве от контекста могут здорово навредить. Подготовьте пользователей к каждому взаимодействию с интерфейсом. Что им понадобится? Как им перейти к следующему шагу? Прежде чем пользователь совершит какое-то действие в интерфейсе, он должен понимать, что получит в результате этого действия. Эти советы хороши с точки зрения маркетинга. Они помогают ответить на вопрос «что произойдёт, когда я нажму на эту кнопку?» Это снижает уровень неуверенности перед совершением тех или иных действий и повышает конверсии на посадочных страницах. Приближаются ли пользователи к цели? Увенчалось ли успехом  их предыдущее действие? Сообщите им об этом. И приободрите продолжить  путь. А также не заканчивайте полосы прогресса значениями 100%, т.к. в этот момент пользователь может решить, что задача выполнена, и как-нибудь нарушить сценарий. Лучше подзадержаться на 99%, а затем сразу показать сообщение о том, что всё готово. Зачастую интерфейсы решают лишь потребности, лежащие на  поверхности. Смотрите шире. Всегда задумывайтесь над тем, зачем именно  пользователям нужны те или иные функции или информация. Затем предложите  решение, которое нужно им на самом деле. Второй совет во многих случаях работать не будет, будьте осторожны. Иногда нам не важно, сколько дней, часов или минут назад произошло то или иное событие, а важно, когда и во сколько. Никогда не заставляйте пользователей заниматься математикой в ваших интерфейсах. Пускай за них это делает компьютер. Только в тех местах, где эта информация действительно нужна. О, кстати! По легенде мобильные операторы не показывают остаток на счету постоянно на экране телефона, потому что это будет склонять пользователей распоряжаться средствами более экономно. Интерфейсы чем-то похожи на аэропорты. Без указателя «вы  находитесь здесь» пользователи могут заблудиться. Поэтому создавайте  такие указатели. Я на практике чаще всего использую выделение цветом. Причём, текущий пункт выделяется менее ярким цветом, чем все остальные (название страницы и так продублировано заголовком, а пользователь, обращаясь к меню навигации, в большем числе сценариев захочет не убедиться, где он находится в структуре сайта, а перейти в соседние разделы). Подчёркивание в веб-интерфейсах всё же ассоциируется со ссылкой, поэтому, если один пункт подчёркнут, то и остальные тоже (но бывают исключения), жирность изменяет ширину блока, в котором находится текст, поэтому во многих случаях может вызвать внезапные сдвиги и переносы слов. Поэтому я бы рекомендовал использовать цвет, указатель и фон именно в такой приоритетной последовательности. Выбор требует от пользователя определённых усилий. Уменьшите эти усилия, упростив выбор. В целом всё так, но давайте рассмотрим подробнее первый и третий пример. В первом примере возможны варианты, когда выделяют не самый часто выбираемый товар, а тот, который стоит продвигать. Здесь бизнес-составляющая вступает в борьбу с пользовательской. А в третьем примере бывают десятки случаев, когда имеет смысл в категории показать большое количество информации и таким образом сделать её гигантской. Например, в интерфейсах, где не требуется низкий порог входа, такое решение будет уместным. Креативность — это здорово. Но не убегайте далеко от  общепринятых вещей в дизайне. Пользователи уже привыкли к определённым  структурам и шаблонам. И они популярны именно потому что хорошо  работают. Оба совета без конкретных примеров проектов кажутся не очень полезными. Глядя на второй совет, задаёмся вопросом, а что нам делать, если на нашем проекте присутствуют все перечисленные вещи? Помещать их в правый верхний угол? Нет. Механизмы расстановки элементов по странице гораздо глубже и сложнее, чем может показаться на первый взгляд. Поэтому подчеркну лишь часть совета, написанного выше: не занимайтесь креативом, не понимая принципов, по которым создавались общепринятые паттерны в дизайне. Если же вы их понимаете, то кто же, кроме вас, придумает ещё более эффективные паттерны, чем те, которые уже существуют? ;) Когда пользователи взаимодействуют с вашим интерфейсом,  они должны получать обратную связь в режиме реального времени.  Завершилась ли операция успехом? Или наоборот? Что изменилось? Очень дельный совет. Во время проектирования начинающие специалисты часто упускают эти моменты. Я называю многие завершённые сценарии «тупиковыми» страницами и прорабатываю их отдельно. Что видит пользователь после того, как он успешно выполнил свою задачу на сайте? Куда ему идти дальше? Какую информацию он хотел бы получить прямо сейчас? Избавляйтесь от всех ненужных периодов ожидания. Но если  всё же пользователи вынуждены ожидать, минимизируйте негативный эффект  от этого процесса. Синий цвет снижает раздражение (и повышает  расслабленность). Когда пользователи смотрят на синие индикаторы  загрузки, время для них летит быстрее (http://repository.ust.hk/ir/bitstream/1783.1-1752/1/jmr01.pdf). Замечательные советы! Сразу вспоминается интерфейс Youtube, который во время загрузки видеоролика на сервис позволяет заполнить все поля, необходимые для публикации, а после загрузки и вовсе уйти с этой страницы. Уведомление о завершении обработки ролика мы получим на адрес электронной почты. Не заставляйте пользователей хранить всё в памяти. Держите всю уместную информацию у них перед глазами. На самом деле в формах из двух-трёх суперочевидных полей можно пренебречь правилами и про подписи, и про плейсхолдеры. Что касается кнопки «Копировать», то на практике чаще применяется приём автоматического копирования в буфер обмена при клике по полю с нужными данными. При этом пользователь видит сообщение на заметном месте вроде: «Ваши данные скопированы в буфер обмена». Но лично мне больше нравится именно решение с кнопкой как более предсказуемое и очевидное. Уменьшите количество движения глаз «туда-обратно» ваших пользователей. Держите всю добавочную информацию поближе к основной. Cовет-то полезный, да только приведённые примеры не имеют ничего общего с реальностью. Что в списке товаров, что в формах, решение о том, как они будут выглядеть, принимается на основе гораздо большего количества параметров, чем «зигзагообразное» движение глаз. Пользователи должны определять, какие элементы  интерактивны (и как с ними взаимодействовать). Если вы знакомы с UX/UI,  то вы, вероятно, знаете такие понятия, как аффордансы и сигнифаеры,  популяризованные Доном Норманом в его «Дизайне привычных вещей» (http://www.amazon.com/gp/product/0465050654). Согласен. Любые интерактивные элементы должны сразу восприниматься, как интерактивные. Ссылки, кнопки, динамические объекты. Распространённая ошибка у начинающих дизайнеров: оформить некоторые элементы так, что единственным индикатором их потенциальной интерактивности будет курсор, превращающийся в палец при наведении. В большинстве случаев ясность послания выигрывает у креатива и жаргонизмов. Надпись на левой части картинки: «Системная ошибка! Бла-бла-бла на компьютерном жаргоне» Надпись на правой части картинки: «Упс, что-то пошло не так! Но вы можете исправить это с помощью…» В непрофессиональных интерфейсах действительно нужно говорить на языке пользователя. А красные кнопки вряд ли будут ассоциироваться с безопасным действием. Однако, из трёх советов в качестве универсального я бы оставил только первый. Встроенный перевод — это дополнительное функциональное требование к системе, а цвета элементов — вопрос субъективный, требующий тестирования в разных конкретных случаях. Большинство пользователей будут продвигаться по  интерфейсу, бегло его просматривая. Не стоит с этим бороться. Наоборот,  воспользуйтесь этим. Сделайте ваш интерфейс более удобным для беглого  просмотра. Так и хочется на этот набор советов ответить фразой «Спасибо, Кэп!» А значит это отличные советы для начинающих! Очевидно, что текст обязан быть легко читаемым. Однако,  вот несколько дополнительных советов, которые позволят сделать его  считываемость ещё более высокой! Оба совета универсальны. Несмотря на их очевидность, до сих пор можно часто встретить посадочные страницы с красивыми картинками, на которых невозможно считать текстовое торговое предложение. Выравнивание текста по левому краю также рекомендуется в большинстве случаев. Исключения можно перечислить по пальцам и все они связаны с одноколоночными узкими интерфейсами (в основном это мобильные приложения и посадочные страницы). Если в ваших интерфейсах одни и те же элементы будут  выполнены в разных стилях, пользователям потребуется больше времени на  их изучение. Упростите для них эту работу, используя единый стиль и  лейаут. Нужно вдохновение? Попробуйте взглянуть на руководство по стилю Мэйлчимпа (http://ux.mailchimp.com/patterns) Интерфейсы более удобны, когда они приносят эстетическое  удовольствие пользователю. Этот принцип называется эффектом  эстетического юзабилити (Куросу и Кашимура, 1995, http://dl.acm.org/citation.cfm?id=223680). Эстетичность дизайна — понятие субъективное и требует проверки разных вариантов на разных аудиториях. На этапе проектирования такая проверка зачастую невозможна, поэтому не стоит придавать этому большое значение. Однако, также замечу, что, чем опытнее проектировщик, тем более эстетичными кажутся его прототипы окружающим, а это является дополнительным аргументом в пользу работы с конкретным исполнителем. Ваши пользователи будут представлять новичков, опытных  пользователей или нечто среднее. Проектируйте интерфейсы с учётом этих  уровней. Существует четыре основных стратегии по созданию вводных интерфейсов: Они могут быть легко размещены в матрице 2х2. Используйте  диаграмму ниже для выбора стратегии по созданию вводных интерфейсов,  подходящей именно для вашего интерфейса. Вот и подобрались мы к советам, важность которых сложно переоценить, хотя выглядят они довольно капитанскими. Один из сложных навыков проектировщика: в процессе работы удержать в голове множество параллельных сценариев от лица разных типов пользователей, которые происходят в одних и тех же интерфейсах. Стоит забыть о ком-то из них — и получится урезанный вариант. Или, наоборот, стоит увлечься теми пользователями, которые представлены очень малочисленной группой от всей аудитории, — и получится интерфейс, неудобный для большинства.Если вы не знаете про методы карточной сортировки, — рекомендую поискать информацию в интернете и изучить её. Это распространённая вспомогательная методология для формирования навигационных решений и рубрикаторов. У пользователей будут свои разные потребности.  Проектируйте интерфейсы таким образом, чтобы они отвечали разным  пользовательским подходам к работе. Решение о том, стоит ли давать пользователям свободу выбора, принимается на основе большого количества факторов. И нужно понимать, что представленные советы работают только в том случае, если это решение было принято в пользу свободы. Что касается сортировок и фильтраций, рекомендую ознакомиться с моим «старым, но полезным» видеоуроком по проектированию универсальных каталогов (https://www.youtube.com/watch?v=EfQGWz3L2Q4). Сделайте ваш интерфейс доступным для пользователей с  ограниченными возможностями. Это не только хорошая практика, но и в  некоторых странах повод для получения дополнительных привилегий (https://en.wikipedia.org/wiki/Americans_with_Disabilities_Act_of_1990). Около 8% мужчин плохо различают цвета. Старайтесь никогда  не выделять элементы только с помощью цвета. Используйте дополнительные  подсказки в виде разных форм объектов и иконок. Семантическая разметка подойдёт не только для людей с ограниченными возможностями. Если она используется, ваши сайты можно будет просматривать в режиме удобного чтения статей, либо перемещаться от блока к блоку с помощью голосового управления (не только, если пользователь слеп, но и, например, если он управляет автомобилем). Второй совет будет сильно зависеть от контекста, но в большинстве случаев его действительно стоит применять. А вот ссылка на материал про 8% мужчин: http://apfmj.biomedcentral.com/articles/10.1186/s12930-014-0010-3. Пользователи должны иметь возможность вводить разнообразные данные без негативных последствий. Надпись на левой картинке: «Желаем повеселиться в Освенциме!». Надпись на правой картинке: «Хорошей поездки!». В рамках реализации этих советов основная нагрузка ляжет на специалистов, работающих с кодом. Дизайнеры и проектировщики обычно не хотят заниматься описанием свойств таких полей в функциональных спецификациях. Использование этих советов может оказаться одной из ступенек для перехода проектировщиков на новый качественный уровень работы. Ваш интерфейс должен работать во всех контекстах использования (на разных устройствах, браузерах и т.д.) Надпись справа: «Вижу, вы используете Firefox». Давайте согласимся с советами, но с одной оговоркой. «Ваш интерфейс должен работать в тех контекстах использования, которые удовлетворяют целевой аудитории вашего проекта». Нецелесообразно тратить на оптимизацию проектов значительные ресурсы только для того, чтобы угодить доле процента ваших пользователей. В большинстве интерфейсов совсем избежать ошибок  невозможно. И если они возникают, помогите вашим пользователям  преодолеть их быстро и с лёгкостью. При создании интерфейса не стоит сразу сосредотачиваться  на решениях для демонстрации возникающих ошибок. Вместо этого попробуйте  спроектировать его так, чтобы этим ошибкам невозможно было появиться. Не просите пользователей кликнуть по кнопке «Подтвердить» один раз. Если они могут кликнуть несколько раз, они кликнут. Вместо этого отключайте их после клика. Таким образом вы не позволите случайно отправить данные несколько раз. Эти рекомендации стоит применять в своей работе всегда! Только осторожнее с советом про оформление текстовых полей: не забудьте проконсультироваться с вашим программистом о типе данных, которые вы хотите из этих полей забирать. Какие самые распространённые ошибки генерируют  пользователи в вашем интерфейсе? Определите сигналы, предшествующие этим  ошибкам, и постарайтесь в момент их возникновения предупредить  пользователей. Надпись слева: «Ваше сообщение было отправлено». Надпись справа: «Вы хотели прикрепить файл к сообщению? Вы  написали «Я прикрепил», однако на самом деле ничего не прикрепили». И  кнопки «Редактировать» и «Отправить». Надпись на левой кнопке: «Купить». Надпись на правой кнопке: «Купить ещё один экземпляр». Первый совет имеет отношение к почтовым клиентам и вряд ли пригодится в работе рядовому проектировщику. Реализацию второго совета ни разу не встречал на практике. Поэтому особо на них не заостряем внимание и двигаемся дальше. Пользователи будут терять сосредоточенность. Этого вы не в  силах предотвратить. Однако вы можете визуально отделить «мощные»  функции от остальных, чтобы уменьшить потенциальное количество случайных  ошибок и потерянных данных. Эти два совета универсальны и действуют во всех случаях. Кнопки выхода из аккаунтов должны размещаться в тех местах, где по ним случайно не кликнешь. А любые удаления критически важных данных должны сопровождаться дополнительными подтверждениями этих действий, либо возможностью откатить их. Всегда позволяйте пользователям вернуться назад или восстановить страницу в исходное состояние. Например, в некоторых выпадающих списках нет вариантов,  позволяющих ничего не выбирать. И после того, как пользователи что-то  выбрали, у них уже нет возможности отказаться от своего выбора. Эта часть статьи радует универсальными советами.Только не забывайте в сложных фильтрах добавлять кнопки сброса к параметрам по умолчанию. А ещё давайте вспомним интерфейсы, в которых кнопка «закрыть» в модальных окнах появляется не сразу, а по таймеру (если понимаете, о чём я) — и отправим проклятья их авторам! Пользователи должны иметь возможность вернуться к тому  месту в последовательности, на котором они прервали свою работу, не  потеряв данных. И снова всё будет зависеть от технических ограничений системы и пользовательских сценариев. Советы хороши, но не универсальны, используйте их с умом. Пользователи не идеальны. Они делают ошибки своими курсорами. Создавайте гибкие, прощающие эти ошибки, интерфейсы. Часто пользователи кликают на некликабельные элементы. Не  боритесь с этими ошибками. Вместо этого добавьте этим элементам  кликабельность. Никогда не пишите стандартное сообщение «Произошла ошибка!» Объясните причину её возникновения и, при возможности, пути решения. Надпись слева: «Упс! Произошла ошибка». Надпись справа: «Упс! Это старый пароль». Надпись слева: «Упс. Произошла ошибка по причине XYZ. Теперь вы сами за себя». Надпись справа: «Упс. Произошла ошибка по причине XYZ. Вы можете её исправить с помощью ABC. Кликните, чтобы узнать детали». Надпись слева: «Упс! Вы забыли ввести индекс». Надпись справа: «Упс! Пожалуйста, введите индекс». Редкие проектировщики занимаются сообщениями об ошибках. Обычно эта задача ложится на плечи программистов, да и то, потому что им деваться некуда. А зря! Напоминайте пользователям о действиях, совершённых ими ранее в вашем интерфейсе. Здесь всё не так однозначно. Историю поисковых запросов иногда лучше не показывать в соответствии с политикой безопасности проекта. Не все посещённые ссылки следует выделять цветом. Чаще всего это нужно только в интерфейсах, где задача пользователя — последовательно просмотреть разные материалы под разными ссылками и не повториться. Не забывайте, что существует такой тип целевой аудитории, который пользуется семейным компьютером для просмотра одних и тех же ресурсов. Это, конечно, притянуто за уши, но хорошо иллюстрирует, что не стоит слепо следовать советам, приведённым выше. Постоянно вносите итерационные улучшения в интерфейс. Для начала воспользуйтесь простыми советами ниже. Если страница набирает много просмотров, но при этом мало  уникальных просмотров, то это повод удостовериться, не переходят ли  пользователи на неё с неё самой. Жаль, что об аналитике во всей статье всего три совета. Да и то поверхностных. Поблагодарим Ника за то, что он вообще о них упомянул, и будем считать, что аналитика в целом — это тема для другой огромной статьи. Этот материал не появился бы на страницах Хабра, если бы не один из подписчиков моего Телеграм-канала, который настоял на том, что сделать эту публикацию — хорошая идея.  Проектирую интерфейсы