Иллюстрации: Артём Морозов

Итак, что такое юзабилити и UI?

UI — это аббревиатура, которая расшифровывается, как User Interface, или интерфейс пользователя. На самом деле, дизайн даже самого элементарного сайта — это, по сути, и есть интерфейс пользователя. Иначе говоря, интерфейс пользователя — это определенное размещение элементов дизайна (кнопок, меню, контента) в рамках экрана. С помощью пользовательского интерфейса человек выполняет ту задачу, которая привела его на тот или иной ресурс. Если, это, например, поисковая система Google, то эта задача — поиск нужной информации. Если сайт Студии Анатолия Попеля — просмотр портфолио, чтение бложика, и как очевидное следствие — оформление заявки на сайт. Чем меньше времени и сил человек затрачивает на выполнение задачи, приведшей его на сайт, тем интерфейс пользователя лучше. Чтобы создать удобный интерфейс пользователя, при его создании обязательно нужно думать про юзабилити сайта.

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

И ладно, когда мы сталкиваемся с не очень удобно сделанным презентационным сайтом (то есть, сайтом-визиткой). Туда зашёл раз-другой, и больше не заглядываешь. А когда неудобно сделан интерфейс чего-либо, с чем приходится работать каждый день? Например — неудобно организованный интерфейс мобильного телефона, неудобная панель управления сайтом, неудобный почтовый интерфейс. Это уже по-настоящему грустно.

Но откуда они берутся, эти неудобные интерфейсы? Как правило — от незнания принципов создания удобных решений. Ну, и конечно, от лени.

Принципы эти, как ни удивительно, совсем несложные.

Конечно, сама наука создания удобных интерфейсов довольно объемная, и чтобы разобраться в теме досконально будет совсем не лишним прочитать более подробные материалы на тему, например, книгу Стива Круга.

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

Он сказал так:

Прежде чем начнешь ты тонкости постигать, усвой простые 4 мантры юзабилити:

1. Хороший интерфейс — это забота о времени пользователя.

2. Хороший интерфейс — это танец, в котором сплелись логика и интуиция.

3. Хороший интерфейс — это ничего лишнего.

4. Хороший интерфейс — это соблюдение традиций.

Но, пожалуй, стоит поговорить об этих мантрах чуть подробнее.

Мантра №1. Хороший интерфейс — это забота о времени пользователя

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

Одной из основных единиц экономии времени в любом интерфейсе является количество щелчков (кликов, нажатий). Их число, в частности, и нужно сводить к минимуму.

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

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

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

Как заботиться о времени посетителей сайта?

1. Создав новый интерфейс, подумайте: а можно ли каждую из доступных функций или операций выполнить в меньшее количество щелчков мышки?

2. Почаще поглядывайте в сторону конкурентов. А сколько щелчков мыши уходит у них на выполнение тех же действий? Даже если у ближайших конкурентов всё сделано более неудобно, чем у вас — ищите тех, кто добился лучших результатов. Вообще, всегда равняйтесь на тех, кто лучше вас.

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

И так во всём!

Мантра №2. Хороший интерфейс — это танец, в котором сплелись логика и интуиция

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

Уместить всё в одном экране довольно сложно. У Gmail довольно много тонких настроек и неочевидных возможностей, например, распределение приходящей почты по категориям. Тут-то и проявляется второе свойство хороших интерфейсов — логичность. Например, логично предположить, что настройка переадресации будет находиться в настройках, во вкладке «Переадресация». Если вы находите нужное свойство на основе логического заключения — значит, интерфейс разработан логично.

Как добиться интуитивности и логичности от интерфейса?

Создание интерфейса во многом похоже на телепатию! Вы должны попытаться залезть в голову будущим пользователям вашей системы, людям, совершенно вам незнакомым. Так как же понять, как они мыслят?

На самом деле, самый действенный тут способ — это просто попытаться встать на их место.

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

А вы попробуйте забыть на несколько минут о том, что вы разработчик. Представьте себе, что вы — пользователь. Где бы вы стали искать ту или иную функцию?

Составьте список своих 37 действий и, двигаясь по списку сверху вниз, отвечайте себе на поставленный вопрос. Представьте, что вы имеете дело не с собственной системой, а с уже существующей системой, в которой вам самому нужно разобраться. Где бы вы ожидали увидеть кнопку «создать нового пользователя»? В какой части экрана? В каком пункте меню?

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

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

Мантра №3. Хороший интерфейс — это ничего лишнего

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

Как убрать из интерфейса всё лишнее?

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

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

Мантра №4. Хороший интерфейс — это соблюдение традиций

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

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

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

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

Как добиться соблюдения традиций?

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

В очень редких случаях можно традицию нарушать. Например, на сайте Студии Артемия Лебедева логотип размещается в правом верхнем углу, и неплохо там себя чувствует.

Но это редкий случай.

Заключение

А в следующих статьях мудрый сенсей поделится со своим учеником более прикладными приёмами. Мы узнаем, что такое удобные формы на сайте, как правильно подбирать цветовую гамму и многое-многое другое!

Путь Годного дизайнера только начинается.