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

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

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

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

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

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

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

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

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

Она не понимает большую часть возможностей сайтов
ui-for-your-mom-2

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

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

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

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

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

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

«Привет! Сейчас я не могу ответить. Пожалуйста, оставьте своё имя и номер телефона. Я перезвоню вам, как смогу».

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

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

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

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

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

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

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

Рекомендую прочитать статью «Словарь проектировщика интерейсов».

13 октября 2013
Рубрика: интерфейсы | Теги: , | 4 комментария

Comments (4)

  1. Черновски хороший пост! Даже сам его перевел на половину)))

    • Мне поначалу понравился, потом когда перевёл подумал «что за банальщина», но решил уж опубликовать.
      А нашёл оригинал, кажется, по твоей ссылке (-:
      Я ещё 1 статью перевожу, правда не знаю откуда узнал про неё — Principles of User Interface Design

  2. Pingback: 20 принципов дизайна пользовательских интерфейсовБлог Александра Сарычева

  3. Pingback: Как сделать удобные поля ввода на сайте.Блог Александра Сарычева

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: