Блог Александра Сарычева

20 принципов дизайна пользовательских интерфейсов

Перевёл статью Principles of User Interface Design. Уже когда сделал основной перевод и перешёл к редактуре, нашёл перевод на Хабре, а в комментариях в нему ещё одну версию перевода (-:

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

Рекомендую воспринимать нижеследующее не как заповеди, а как повод лишний раз задуматься.

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

1. Интерфейсы созданы для обеспечения взаимодействия
   Интерфейсы существуют, чтобы обеспечить взаимодействие между людьми и нашим миром. Они могут помочь прояснить, осветить, включить и показать взаимоотношения, объединяют нас, разделяют, управляют нашими ожиданиями и предоставляют доступ к услугам. Процесс проектирования интерфейса это не искусство, а сами интерфейсы не монументы. Интерфейсы выполняют некоторую работу и их эффективность может быть измерена. И, однако, они не утилитарны. Лучшие интерфейсы могут вдохновлять, пробуждать, мистифицировать и усиливать наше взаимодействие с миром.
2. Задача № 1 — обеспечить ясность
   Ясность — это и первая и самая важная задача интерфейса. Чтобы быть эффективными, используя интерфейс, который вы создали, люди должны быть способны распознать что он собой представляет, осознать то, зачем они используют его, понять с чем интерфейс помогает взаимодействовать, предсказать, что произойдёт, когда они станут использовать его, и затем успешно взаимодействовать с ним. В то время, как при знакомстве с интерфейсом есть место некоторой загадке и отложенной выгоде от его использования, не должно быть места для путаницы. Ясность внушает доверие и помогает дальнейшему использованию. Сотня простых и понятных экранов предпочтительнее одного запутанного.
3. Удерживайте внимание любой ценой
   Мы живём в мире, полном отвлекающих факторов. Трудно даже ненадолго погрузиться в чтение без того, чтобы что-то нас не отвлекло и не перетянуло на себя внимание. Внимание же бесценно. Не отвлекайте пользователя мусором в боковой колонке своего приложения, помните, для чего экран нужен в первую очередь. Если кто-то читает, то позвольте ему закончить прежде чем показывать рекламу (конечно, если без этого никак). Цените внимание и тогда не только ваши пользователи станут счастливее, но и вы выгодаете от этого. Когда взаимодействие является основной целью, внимание становится необходимым условием. Удерживайте его любой ценой.
4. Дайте пользователям контроль в их руки
   Люди ощущают себя комфортно, когда они чувствуют контроль над собой и окружением. Бездумное ПО уводит их в сторону от комфорта, вовлекает в незапланированные взаимодействия, путает навигацией и непредвиденными результатами. Предоставьте пользователям контроль: показывайте системный статус, описывайте причинно-следственную связь (если вы сделаете это, получите то) и давайте им понять, что их ждёт на каждом шаге. Не переживайте, что это будет им очевидно, потому что почти всегда это совсем неочевидно.
5. Лучшие манипуляции — прямые
   Лучший интерфейс это тот, которого нет. Например, когда мы непосредственно управляем физическим объектом в нашем мире. Но т. к. это не всегда возможно, и многие объекты не физические, а информационные, мы делаем интерфейсы, которые помогают нам взаимодействовать с ними. Легко оступиться и добавить больше, чем необходимо в интерфейс: откарамеленные кнопки, градиенты и блеск, графику, опции, настройки, окна, вложения, и другой хлам. В итоге мы манипулируем элементами интерфейса, а не тем, что на самом деле важно. Вместо этого, стремитесь к идее прямого управления. Интерфейс должен быть незаметным и распознавать самые обычные человеческие жесты. В идеале, интерфейс должен быть настолько незаметным, чтобы у пользователя сложилось впечатление, что он непосредственно управляет объектом, находящимся в его фокусе.
   Добавлено: см. принцип Интерфейс — зло.
6. Одно основное действие на экран
   Каждый экран, который мы проектируем, должен быть предназначен лишь для одного важного действия пользователя. Это упрощает обучение, использование пользователями, и облегчает доработку и поддержку разработчиками при необходимости. Экраны, в которые заложены два и более целевых действий, быстро приводят к путанице. Как статья, которая должна содержать один чёткий тезис, так и каждый экран должен предлагать одно действие, наполняющее его смыслом.
7. Оставьте вторичные действия на втором плане
   Экраны с одним основным целевым действие могут иметь множество дополнительных действий, но они должны остаться вторичными! Ваша статья существует не для того, чтобы её можно было расшарить в твитере. Она существует, потому что люди могут прочитать и понять её. Делайте вес вторичных целевых действий визуально легче или показывайте их после того, как основное будет выполнено.
8. Сделайте следующий шаг естественным
   Лишь немногие действия являются заключительными, так что хорошенько проработайте для каждого действия следующий шаг. Предвидьте, каким будет следующее действие и спроектируйте его заранее. Так же, как и в обычном разговоре, предложите возможность для следующего слова. Не оставляйте человека висеть в небытии только потому, что они сделали то, что вы хотели, чтобы они сделали. Дайте им сделать следующий естественный шаг который поможет дальше достигнуть их цели.
9. Внешний вид следует из поведения (или «функция определяет форму»)
   Людям больше всего удобно с теми объектами, которые ведут себя так, как они ожидают. Другие люди, животные, вещи, программы. Когда кто-то или что-то ведёт себя в соответствии с нашими ожиданиями мы чувствуем будто у нас с ними хорошие отношения. Именно поэтому спроектированные элементы должны выглядеть соответственно своему поведению. На практике это означает, что кто-то должен быть в состоянии предсказать как элемент интерфейса себя поведёт просто взглянув на него. Если он выглядит как кнопка, то он и должен действовать как кнопка. Не заигрывайте с основами взаимодействия. Оставьте свою креативность для вопросов другого уровня.
10. Последовательность имеет значение
    Следуя предыдущему принципу, элемент не должен выглядеть подобно другому, если только их поведение не взаимосвязано. Элементы с одинаковым поведением должны выглядеть одинаково. Так же важно для различающихся элементов выглядеть непохожими (и непоследовательными). В стремлении быть последовательными новички дизайнеры часто неявно выделяют важные различия, используя те же самые визуальные трактовки, в то время как визуальные различия являются целесообразными.
11. Сильная визуальная иерархия работает лучше
    Сильная визуальная иерархия достигается когда на экране наблюдается чёткий порядок последовательности визуальных элементов. То есть, когда пользователи каждый раз просматривают подобные блоки в одинаковом порядке. Слабая визуальная иерархия даёт мало подсказок о том, где взгляду можно отдохнуть и, в итоге, создаёт суматоху и выглядит запутанной. Трудно поддерживать сильную визуальную иерархию, потому что визуальный вес относителен: когда всё выделено, то не выделено ничего. Если требуется добавить один визуально тяжёлый элемент на экран, то может понадобиться снизить акцент со всех элементов для сохранения иерархии. Большинство людей не замечают её, но это один из самых простых путей усилить или ослабить дизайн.
12. Продуманная организация снижает когнитивную нагрузку
    Как сказал Джон Маеда в своей книге «Простота», продуманная организация элементов на экране может сделать большое малым. Она помогает людям проще и быстрее понять интерфейс, если вы показали взаимосвязи контента в дизайне. Группируя подобные элементы, можно показать связь элементов с помощью взаимного расположения и ориентации. С помощью продуманной организации контента вы уменьшаете когнитивную нагрузку на пользователя, которому не нужно задумываться о том, как элементы соотносятся между собой, потому что вы уже сделали это за них. Не заставляйте пользователя думать. Вместо этого помогите ему и покажите связи на экране с помощью дизайна.
13. Подсвечивайте, но не указывайте
    Цвет физических предметов изменяется при изменении освещения. В яркий солнечный день мы видим дерево совсем не так, как на закате. Как в физическом мире где цвет относителен, в интерфейсе он так же не должен жёстко определять что-либо. Он может помочь подсветить, использоваться для акцента, но не должен быть единственным отличием элементов. Для длительного чтения используйте светлые или приглушённые цвета, оставляя яркие цвета для акцентирования. Конечно же, можно использовать яркие цвета и для фоновой заливки, только убедитесь, что это подходит вашей аудитории.
14. Прогрессивное раскрытие
    На каждом экране покажите только то, что необходимо. Если людям необходимо сделать выбор, покажите им достаточно информации, чтобы они могли сделать его, затем погрузите их в детали уже на последующем экране. Избегайте тенденции чересчур разъяснить и вывалить всё разом. Когда возможно, отложите принятие решения на нескольких экранах последовательно раскрывая информацию по мере необходимости. Это обеспечит более ясное взаимодействие с интерфейсом.
15. Помогайте людям по ходу
    В идеальном интерфейсе не требуется помощь, потому что интерфейс легок в изучении и удобен в использовании. В реальном же, помощь встроена и контекстна. Доступна только в нужных местах, когда необходима, и скрыта от взора всё остальное время. Предлагая идти в раздел помощи, чтобы найти ответ на вопрос, вы возлагаете ответственность на пользователей знать то, что им нужно искать, и как формулировать запрос. Вместо этого встраивайте помощь там, где она может понадобиться. Просто убедитесь, что она не стоит на пути пользователей, которые уже знают как пользоваться интерфейсом.
16. Решающий момент: нулевое состояние
    Первый опыт использования интерфейса решающий, но при этом дизайнеры часто упускают его из виду. Для того, чтобы образом помочь пользователям освоиться, правильно будет спроектировать нулевое состояние, т. е. состояние, когда ещё ничего не происходило. Это состояние не должно быть пустым экраном. Оно должно обеспечить направление и содержать указание для быстрого начала работы. Большая часть затруднений возникает на самом первом шаге. Но как только люди понимают правила игры, у них повышаются шансы на успех.
17. Текущие проблемы являются наиболее важными
    Люди обычно ищут решение своих актуальных проблем, а не потенциальных, тех, что возникнут в будущем. Таким образом, нужно противостоять созданию интерфейсов для гипотетических проблем. Нужно изучать текущую ситуацию и проектировать решение существующих проблем. Это может быть не так интересно, как витать в облаках и строить воздушные замки, но если люди действительно будут пользоваться вашим интерфейсом, то это принесёт больше пользы.
18. Отличный дизайн незаметен
    Любопытное свойство отличного дизайна заключается в том, что он остаётся незаметным пользователям. Одна из причин этого в том, что если дизайн удачен, то пользователи могут сконцентрироваться на их задачах, а не интерфейсе. Когда они завершают свои задачи, они получают удовлетворение, а не рефлексируют над ситуацией. Для дизайнера это может быть жестоким открытием, т. к. мы в этом случае он получает меньше похвалы, когда дизайн оказывается действительно хорош. Но хорошие дизайнеры довольствуются тем, что их дизайном активно пользуются, и знают, что счастливые пользователи обычно молчат.
19. Развивайте навыки в других дизайнерских дисциплинах
    Визуальный и графический дизайн, типографика, копирайтинг, информационная архитектура и визуализация — все эти дисциплины являются частью дизайна интерфейсов. Они могут быть лишь затронуты вскользь или по ним можно специализироваться. Не участвуйте в дебатах и не смотрите свысока на другие дисциплины: возьмите от всех них те аспекты, что помогут развиваться дальше в вашей работе. Попробуйте взять что-то из, казалось бы, не связанных дисциплин: издательского дела, программирования, переплёта книг, скейтбординга, пожаротушения, каратэ.
20. Интерфейсы существуют, чтобы их использовали
    Как и в других направлениях дизайна, дизайн интерфейсов успешен тогда, когда люди используют результат вашего труда. Как в случае красивого стула, на котором невозможно комфортно сидеть, дизайн интерфейса терпит неудачу, когда люди предпочитают не пользоваться им. Таким образом, дизайн интерфейсов это и создание продукта и среды его использования. Недостаточно когда интерфейс тешит эго дизайнера — им должны пользоваться!

Чт, 14 ноября 2013
интерфейсы | Tags: перевод, правила | Комментарии к записи 20 принципов дизайна пользовательских интерфейсов отключены

Проектируем интерфейсы, понятные даже вашей маме

Перевод статьи Designing User Interfaces for Your Mother Тони Джайниса, tonygines.com

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

Раз или два в год я приезжаю в гости к матери и буквально через пару часов она говорит мне: «Ты бы не мог проверить мой компьютер? Я хочу убедиться, что с ним всё впорядке. Ты же знаешь, что я могу что-то делать не так». И она права.
Хотя она хочет делать всё правильно.

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

Вот несколько фактов о моей матери, которые я стараюсь держать в голове, когда проектирую новый интерфейс или сайт.

Она пользуется другим браузером

Она пользуется Интернет Эксплорером. Если быть точным, ИЕ8.
Почему? Потому что в нём всё привычно. Она знает где находятся все нужные ей кнопки и как ей им пользоваться. В чём же проблема? В её браузере установлен каждый тулбар, который только может быть и она устанавливала их не по доброй воле. И она не представляет как удалить их, или даже как обновить браузер. Она думает, что сломает его. Я установил ей Гугл Хром пару лет назад, но раз за разом я видел как она возвращается к ИЕ. Она чувствует принуждение использовать Хром и винит его всякий раз, когда ей не удаётся зайти на нужный сайт. Даже если ИЕ предоставляет ей меньше удобства в использовании, когда она пользуется им, она чувствует себя комфортнее.

Решение:
Поймите, что если большая часть пользователей вашего сайта смотрят его в старом браузере, то они не думают обвинять в неудобствах браузер. Они винят ваш дизайн.

Она не понимает большую часть возможностей сайтов

У таких сайтов как Фейсбук и Гугл+ есть куча разных возможностей загружать и расшаривать фотографии со всех типов устройств. Для нас с вами легко расшарить что-либо. Сняли фото на телефон, нажали «расшарить» и готово! Моя мать, в свою очередь, до сих пор отправляет все свои фото по электронной почте. У неё есть профиль на Фейсбуке, но она не знает как расшарить что-то для всех или лишь для семьи, и это пугает её. С Гугл+ ещё хуже. Интерфейсы не помогают ей и не проводят по всему процессу, чтобы помочь завершить начатое. Если она выкладывает фото на Гугл+, она не понимает какой «круг» выбрать, как правильно загрузить фотографии и сможет ли тот человек, которому она отправляет, увидеть их. Но она прекрасно знает, что если она прикрепляет фотографию к письму и отправляет его мне, я получу его и отвечу.

Решение:
Заверяйте пользователя на всём продолжении процесса, что он действует верно. Используйте визуальные сигналы и текстовые подсказки, чтобы помочь посетителю завершить то, что он пытается сделать.

Она не понимает иконки

Мы предполагаем, что все знают значение иконки «сохранить». Моя мать несколько лет пользовалась дискетами, но она безусловно забыла всё об их функциональности. Интерфейс за интерфейсом я наблюдаю, как используются только лишь иконки для обозначения таких действий как «Новый документ», «Копировать» или «Удалить». Иногда я подсказываю матери по телефону, как пользоваться каким-то интерфейсом и сталкиваюсь с тем, что ей нужно найти иконку «Удалить». И я объясняю, что ей нужно найти что-то похожее на корзину, либо на «x» или т. п. И когда она наконец находит её, я слышу гениальную фразу: «Почему они просто не написали „Удалить“?»

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

Она не продвинутый пользователь

Я не могу вспомнить сколько раз я объяснял маме, чо нужно нажать ctrl+C, а потом ctrl+V чтобы скопировать и вставить что-то. Она никогда не запомнит это, и это нормально. И ей сложны для понимания жесты. Год назад я купил ей айфон, и она до сих пор не использует множество его приложений. Она пишес смс, звонит и проверяет почту. Вот и всё. И она не понимает, что для того, чтобы проверить новую почту, ей достаточно потянуть вниз и отпустить. Она уверена, что ей нужно нажать кнопку для выхода из приложения и затем снова открыть почту, чтобы увидеть новые письма.

Я помню, как звонил ей как-то и она не отвечала на звонок. Зато в её автоответчике было записано такое сообщение:

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

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

Она не против того, чтобы кликать

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

Решение:
И снова я повторюсь: дайте своим пользователям визуальную обратную связь по тому процессу, что они сейчас выполняют. «Простой дизайн» совсем не означает мало дизайна. Он предполагает лёгкость. Если разделить большую и сложную форму на 4 части, то она будет не такой пугающей и по ходу процесса пользователи смогут понять, что делают всё верно. Не создавайте помех в вашем интерфейсе делая «простую» форму на одну страницу, в то время как четырёхстраничная форма удобнее.

Она хочет заниматься своими делами и чувствовать, что она в теме

Моя мама пользуется интернетом буквально для трёх вещей: чтобы платить по счетам, смотреть Нетфликс и поддерживать связь с детьми. Каждые пару месяцев Фейсбук меняет свой интерфейс и она должна заново учиться всему тому, что знала о нём и надеяться, что некоторые иконки и меню находятся на прежних местах. Нетфликс поступает правильно, что продолжает оставлять интерфейс дружелюбным и ободряющим. А вот Фейсбук нет. Моя мама лишь может продолжать смотреть свою ленту новостей, чтобы видеть фотографии детей и внуков и надеяться, что разработчики Фейсбука не изменят её однажды. Интересно, что сайтом её банка ей тоже легко пользоваться, потому что он не менялся уже 7 лет. Он всё ещё работает под ИЕ8, использует подсказки у иконок, и его дизайн довольно компактный, чтобы умещаться в её браузере со всеми её тулбарами.

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

Заключение
Не заблуждайтесь. Моя мама очень, очень умная женщина. Она обожает технологии и видит, как это всё чудесно. Она не старушка, которая грозит тростью на все эти новомодные гаджеты.
Она в теме. Она своя.
Более того, она хочет быть причастной к чему-то великому, что все мы делаем ежедневно, как и многие другие матери по всему миру. И это наша работа, сделать все новые штуки такими забавными и интересными не только для нас, но и, в первую очередь, для людей, которые обучили нас и помогли нам в своё время.

Вс, 13 октября 2013
интерфейсы | Tags: перевод, правила | 4 комментария