Пользовательский интерфейс: для людей или для «галочки»?

Дизайн, пользовательский интерфейс, юзабилити... В IT-среде очень часто появляются новые термины, ничем кардинальным не отличающиеся от старых названий, но тем не менее, в которых следует разбираться, дабы не прослыть в умной беседе невеждой.

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

Само слово «интерфейс» означает что-то, что возникает между участниками процесса — inter-face. В данном случае — инструмент работы с системой, возникающий между человеком и компьютером.

На каком сайте вы почувствуете себя как дома? На этом — aic.ru, или на этих: jeltofiol.com, fertdesign.ru, e-time.ru. Вот-вот, мне тоже больше по душе первый вариант. Лично для меня важно, чтобы под рукой был поиск, контакты, социальные закладки. И в то же время, мне душно на сайте где вся самая важная (по мнению дизайнера) информация сконцентрирована на одной странице — зачастую на главной.

Откровенно раздражают ресурсы, которые заставляют ломать голову: а где же тут блог? Удивительно, но такой важный компонент ресурса, как блог, могут прятать за семью замками. Вопрос: зачем? Часто слышу фразу «интуитивно понятный интерфейс». Это как? Пользователь должен по интуиции, основываясь только на своих инстинктах, передвигаться по сайту? То есть — сиди и догадывайся? Получается ребус какой-то. А нам-то нужен сайт, где все разложено по полочкам. Ни больше, ни меньше.

Пытаясь более глубоко вникнуть в этот вопрос, я натолкнулась на книгу Влада Головача «Дизайн пользовательского интерфейса! Искусство мыть слона». Сразу оговорюсь: книга не первой свежести (2010 год). Но, уверена, имеет право на жизнь. Предлагаю вашему вниманию мысли, которые я извлекла из этой работы. Они могут не совпадать с мнением современных дизайн-специалистов. Но это еще один повод выяснить, где же зарыта собака .

«Дизайн пользовательского интерфейса! Искусство мыть слона». Советы дизайнерам. По мнению автора, все уже давно создано. Поэтому нет смысла по-новому конструировать велосипед. Необходимо совершенствовать уже имеющийся. Пример: каждый архитектор видит строительство дома по-своему, при этом ни один архитектор не сделает окончательный вариант здания — всегда будет то, что можно будет «допилить». С приходом каждого следующего архитектора один и тот же дом будет видоизменяться, улучшаться. Взять, к примеру, тот же нашумевший за последнее время Iphone 5. По сути, это предыдущая модель телефона, но несколько доработанная.

В качестве стимула автор советует повесить над рабочим столом табличку «Это можно сделать еще лучше», а также относиться к своей работе пессимистично. Любой проект можно улучшить. И если ваша работа кажется вам сейчас хорошей, со временем она устареет, потребуется ее улучшение.

Перед тем как начать что-то изменять, определите для себя самые больные точки. Их и лечите. Первое попавшееся на глаза лечить не стоит.

Не стройте из себя эксперта. Признайте, что вы очень мало знаете об интерфейсах и что есть, к чему стремиться. Чем больше вы знаете, тем больше недоработок и пробелов будете обнаруживать в своих проектах. Считая себя слишком ученым, сложнее учиться. (Действительно, куда дальше? Я же и так гуру !)

От себя добавлю — знание порождает скорбь. Так гласит чья-то мудрость. Чтобы знания не оказались скорбью, радуйте себя и своих клиентов проектами, созданными с помощью этих знаний.

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

Нет универсального правила относительно того, в каком углу (или не углу) должна находиться корзина. Зато насчет элементов меню можно с полной уверенностью утверждать: оптимальное их количество — 5-7. Дело в том, что объем кратковременной памяти человека с трудом вмещает 9 элементов. Нет смысла делать меню портянкой. Таким образом, максимальное количество компонентов — 7.

Вставлю свои 5 копеек. Существуют четко прописанные требования к разработке как приложений, так и более сложных продуктов, следование которым есть признак мастерства автора.
Пример №1 antonlapin.ru
Пример №2 guide.ramotion.com. Кстати, вот сайт ребят из Ramotion, а вот они в ЖЖ.

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

Еще из книги.
Парадокс, но, чем сложнее система, тем проще она должна быть в пользовании. Универсальное правило на все случаи — минимализм. Он еще никому не вредил, зато пользу приносит стабильно. Объединяйте, сокращайте, обобщайте. Делайте то, что нужно, а не то, что нравится. Делайте то, что улучшит продукт, не тратьте время попусту.

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

Предусловием хорошо выполненной работы является талант, или хотя бы предпосылки к таланту. По мнению автора, делать качественные (они же — шикарные) интерфейсы невозможно, если у специалиста нет вкуса, человек не умеет писать, говорить и слушать, если он нелюбопытен, ему не нравится долго логически размышлять. Хотите понять, умеете ли вы писать? Опишите все, что вас окружает, уложившись в текст объемом 2 тысячи символов. Дайте свое творение на проверку грамотному товарищу. Если он одобрит ваши старания — шансы есть. Чтобы понять, насколько развит у вас художественный вкус, назовите хотя бы 5 художников, творчество которых вам нравится, и обоснуйте свой выбор; перечислите хотя бы 5 архитектурных стилей и те художественные выставки, которые посетили за последние полгода. Хорошему юзабилити-специалисту присуща эмпатия, то есть способность поставить себя на место другого человека. Проще говоря, нужно создавать интерфейсы с учетом того, что их могут оценить не так, как вы.

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

Считается, что довольный пользователь — молчаливый пользователь, а лучший дизайн — невидимый дизайн. Все верно подмечено. Если у пользователя возникает желание прокомментировать свое пребывание на сайте (зачастую в матерной форме), если он постоянно задается вопросами, куда жать и как туда попасть, значит, интерфейс слишком далек от идеала.

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

Отходя от советов Влада Головача, добавлю следующее.
Пребывание пользователя на сайте необходимо сделать понятным. Он должен четко понимать, где находится и почему оказался именно здесь. Чтобы пользователь быстро сообразил, что делать дальше, необходимо оперативно предоставить ему варианты дальнейших действий или решений: всплывающие окна-подсказки, «хлебная крошка», удобная навигация в виде горизонтального меню, возможность в любой момент вернуться на главную и т.д. Для того чтобы избавить человека от лишних раздумий и сэкономить его время, следует очистить страницы от ненужных ссылок, которые вызывают дополнительные размышления и сомнения. Необходимо постараться дать пользователям минимальное количество вариантов ответа. Представьте, что бы вы делали, если бы система предложила выбрать одно действие из десяти? Разумеется, вы бы проанализировали каждое, остановившись в итоге на нескольких. То есть, чтобы разобраться с предложенными вариантами, вы бы потратили больше времени, чем если бы выбрали одно из двух.

Эффективной любую систему делает минимальное количество манипуляций. Несколько раз подумайте перед тем, как создавать дополнительное окно, закладку, ссылку, кнопку. Снабдите систему хорошей памятью. Она должна больше запоминать, чем требовать от пользователя. По возможности ограничьте требования по вводу данных. Тщательное заполнение форм раздражает пользователей. Система должна иметь варианты возможных ответов и вовремя предложить их (например, на основе предыдущего опыта взаимодействия пользователя с системой она должна запомнить вводимые ранее ФИО, параметры продукта, город и т.д.). Взаимодействие с системой можно сделать более эмоциональным. Как? Об этом здесь.

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

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

Подобное наблюдается во ВКонтакте при написании сообщений: при случайном нажатии Enter сообщение тут же отправляется адресату. Здесь не помешало бы предложить пользователю подтвердить его действия.

Наболело... Много проблем вызывает незнакомый продукт. Пример из жизни. Линукс — это та ОС, которая в последнее время все чаще появляется на наших компьютерах. Сам по себе интерфейс этой системы более-менее понятен. Но бывают моменты, когда система вредничает. Допустим, у вас открыто несколько файлов одного формата, а вам понадобился один из них. Чтобы открыть его, придется дважды кликнуть на значок файла, подождать, пока система «очнется» и предложит на выбор все открытые файлы. Выбрать нужный файл непросто — нужно всмотреться в текст, а он очень даже размыт. Только после всех описанных манипуляций будут шансы открыть искомый файл.

«Веб-дизайн, ориентированный на пользователя» Еще одна книга, привлекшая мое внимание, — «Веб-дизайн, ориентированный на пользователя» Джесса Гарретта.

Независимо от того, что вы продаете или предлагаете, информация о вашем продукте/услуге должна быть грамотно размещена на сайте. То есть таким образом, чтобы пользователь понял, что ему предлагается. Если опыт его общения с вашим сайтом будет отрицательным, он запросто уйдет к вашим конкурентам, у которых, в отличие от вас, все разложено по полочкам. Разумеется, компании, ориентированные на результат, не станут добиваться одной только преданности пользователей. Куда важнее — отдача от капиталовложений. В данном случае — конверсия. Что бы вы ни предлагали вашим пользователям — подписку на e-mail рассылку, бесплатное посещение семинара, просмотр вашего вебинара и пр. — вы способствуете таким образом росту конверсии (или спаду). Причем, здесь имеются в виду не просто посетители сайта, а состоявшиеся клиенты. Исходя из их количества, можно делать выводы о том, насколько удачно вы привлекаете своих клиентов, в частности, насколько пользовательский интерфейс вашего сайта удобен для них.

Довольно часто человек заходит в интернет-магазин с одной только целью — купить. Он четко знает, что ему нужно и готов отдать за это деньги. Но тут случается удивительная штука: человек не совершает покупки только потому, что не понимает, как осуществить эту процедуру. Система требует от него слишком много данных, появляются лишние окна, неясно, куда жать, чтобы сделать заказ. В итоге — корзина пустая, а потенциальный клиент так и остается потенциальным.

Почему так? Сталкиваясь лоб в лоб со сложной системой, человек теряется. Но хуже всего — он чувствует себя дураком и винит в ошибках только самого себя: не так понял, не туда кликнул, какой-то шаг пропустил...

Но мы-то с вами знаем, как бывает чаще всего . Когда непонятно, что к чему, мы злимся на разработчиков, осыпая их в заочной форме «благодарственными» словами. Но хуже всего — мы запоминаем неудачный сайт, рассказываем о нем товарищам и, разумеется, не возвращаемся туда.

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

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

Какие, на ваш взгляд, сайты заслуживают похвалы, а на каких вы просто теряетесь? Жду интересных решений .

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