10 правил хорошего пользовательского интерфейса


Оглавление (нажмите, чтобы открыть):

10 правил хорошего пользовательского интерфейса

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

Вольный перевод статьи Якуба Линовски — «A Good User Interface».

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

Идея 1: Старайтесь использовать макет с одной колонкой вместо многоколоночного

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

Идея 2: Старайтесь сделать подарок, не завершайте продажу сразу

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

Идея 3: Старайтесь объединять схожие функции и не дробить интерфейс

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

Идея 4: Старайтесь использовать социальное доказательство вместо того, чтобы рассказывать о себе самом

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

Идея 5: Старайтесь повторить главный призыв к действию, вместо того, чтобы показывать его один раз

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

Идея 6: Старайтесь усиливать различия в стиле между кликабельными и выбранными элементами, а не размывать их

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

Идея 7: Попробуйте рекомендации вместо показа равнозначных вариантов

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

Идея 8: Попробуйте отмену действия вместо запросов на подтверждения

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

Идея 9: Объясните, для кого предназначен продукт. Не пытайтесь адресовать сообщение всем подряд

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

Идея 10: Говорите прямо вместо предположений

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

Идея 11: Больше контраста вместо однородности

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

Идея 12: Покажите место происхождения продукта вместо обобщений

Информация о вас, вашем продукте или услуге позволяет выйти на более личный уровень в общении с клиентом. Хороший способ рассказать о себе – упомянуть страну, штаты или город происхождения. Если вы сможете практически применить данный совет, то отношение к вам станет более доброжелательным. Часто, упоминание о том, где был сделан продукт, является хорошим способом создать ощущение более высокого качества продукта.

Идея 13: Сокращайте количество полей, не спрашивайте слишком много

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

Идея 14: Раскройте все опции сразу

Каждое выпадающее меню, используемое вами, скрывает набор действий, на поиск которых требуется дополнительное усилие. Если эти скрытые опции являются центральными для того, чтобы пользователь совершил необходимое действие, то, возможно, стоит увеличить их приоритет на странице. Попробуйте сделать выпадающее меню для тех опций, которые очевидны и не требуют новых знаний от пользователя: в выборе даты и времени (например, календари) или географического расположения. Иногда пункты выпадающего меню могут работать в тех интерфейсах, действия которых пользователь должен совершать время от времени. Будьте осторожны, используя выпадающие списки для элементов на пути основного повествования.

Идея 15: Предлагайте последовательность вместо страниц с двойным дном

Страницы с двойным дном — убийцы конверсии. Да, все уже привыкли скроллить длинные страницы, но важно не создать у посетителей ложное ощущение того, что страница закончилась раньше, чем это произойдет на самом деле. Если страница предполагает прокрутку, задайте визуальный или смысловой ритм, который явно укажет пользователю, что дальше есть продолжение. Будьте аккуратны с большими разрывами на местах «сгиба», где может появиться граница экрана (конечно, я имею ввиду условные зоны, поскольку сложно предусмотреть все варианты для разнообразных устройств).

Идея 16: Сохраняйте фокус, не злоупотребляйте ссылками

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

10 правил хороших форм

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

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

1. Подходящие элементы управления

Элементы интерфейса должны соответствовать типу ожидаемой от пользователя информации.

Поля ввода текста.
Радиокнопки для выбора только одного значения из нескольких.
Чекбоксы для выбора либо одного, либо нескольких значений.
Кнопки для совершения действий.

Полный список элементов управления см. на сайте W3C Recommendation.

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

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

Правильно Неправильно


Оформление элементов формы призвано помогать пользователю оценить предполагаемый объем данных.

Правильно
Неправильно

2. Проверка полей

Проверка правильности вводимых данных осуществляется по мере заполнения формы. В то же время система должна деликатно молчать, пока пользователь вводит значение, и сообщить об ошибке только после того, как человек закончил ввод (перевел фокус в другое место или нажал на кнопку отправки формы). Когда пользователь возвращается к полю ввода для исправления ошибки, проверка осуществляется непрерывно по мере ввода.

Сообщения об ошибках должны содержать рекомендации по их устранению.

Неправильно

3. Защита от ошибок

Кнопка отправки формы должна быть неактивна до тех пор, пока пользователь правильно не заполнил все необходимые поля.

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

В случае, если пользователь нажимает на неактивную кнопку, должен происходить возврат к первому неверно заполненному полю.

4. Подсказки и помощь

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

Если форма содержит поля для указания персональной информации, например номера телефона или адреса, необходимо добавлять пояснение о том, как эта информация будет использована.

5. Грамотная верстка

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

Подписи следует размещать слева от полей ввода. При ограниченной ширине блока, например в мобильной версии, допускается размещение подписей над полями.

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

Иногда в погоне за компактностью подписи размещают внутри полей ввода. Это допустимо только для очень коротких форм (например, формы авторизации). В противном случае форма перестает читаться, когда подписи заменяются пользовательскими данными.

Область с формой необходимо четко отделять от других элементов страницы.

Правильно Неправильно

6. Правильный фокус

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

7. Сохранность данных

Форма должна «запоминать» все, что в ней указывают. В случае ошибки, перезагрузки или случайного закрытия страницы не надо заставлять пользователя проделывать всю работу еще раз.

8. Поддержка клавиатуры

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

9. Понятная кнопка

Любая форма завершается кнопкой, отправляющей все данные на сервер. Надпись — всегда глагол в неопределенной форме — должна соответствовать тому действию, которое произойдет при нажатии на кнопку. Например, поисковой форме нужна кнопка «Найти», форме авторизации — кнопка «Войти», а форме заказа в интернет-магазине — «Заказать».

Главная кнопка на странице с формой должна быть одна. Если пользователю предоставляется возможность совершать дополнительные действия, например загружать файлы, соответствующие элементы управления должны быть менее выразительными:

10. Забота о секретных данных

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

10 самых красивых и удобных пользовательских интерфейсов

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

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

The Focks CMS
Что это: модульная, дополняемая, бесплатная система управления контентом с открытым кодом.

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

Что могло бы быть лучше: крупные иконки тут вполне уместны, однако некоторые элементы все же слишком велики, это несколько дезориентирует.

Mail Chimp
Что это: один из самых популярных почтовых информационных бюллетеней по управлению электронными приложениями для e-mail.

Что понравилось: уникальная и приятная цветовая гамма, хорошая проработка деталей, красивые отчеты и отличный поход к проблеме «пустых аккаунтов», полезные и приятные на вид руководства пользователей. Mail Chimp приятна в использовании и очень удобна.

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

Ronin Website
Что это: приложение SaaS с таймером и возможностью калькуляции счетов.

Что понравилось: страница Ronin довольно объемна и предоставляет исчерпывающую информацию без перегруженности. Кроме того, регистрационная форма, прайс-лист и страницы с турами одинаково хорошо организованы. Общее ощущение – чистота и открытость. Очевидно, что большое внимание при разработке сайта уделялось точности и согласованности.

Что могло бы быть лучше: несмотря на большой макет и внимание к деталям, сайт все же довольно обыкновенный. Пользовательский интерфейс отличный, но мало чем отличается от многих Web 2.0 сайтов и не кажется оригинальным.

Campaign Monitor’s Worldview
Что это: инструмент, позволяющий видеть абонентов Campaign Monitor на карте мира.

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

Что могло бы быть лучше: есть некоторые проблемы в производительности приложения, когда оно некоторое время остается открытым (в Firefox на Imac), что определенно влияет на общее впечатление пользователя.


Print Friendly
Что это: Print Friendly делает из любого сайта урезанную версию для печати. Причем ее можно скачать в виде PDF или поделиться с другом.

Что понравилось: на странице мало легкомысленной информации и беспорядка. Сайт просто делает то, что должен делать. На главной странице есть все, что вам нужно. Версия для печати легко читается, легко печатается и ей легко поделиться.

Что могло быть лучше: довольно сложная система –работа Print Friendly создается, а затем помещается в DIV с фиксированной величиной. Было бы хорошо, если бы окно с содержимым просто расширялось в соответствии с загружаемым контентом.

GlobeConvert Pro
Что это: приложение для конвертирования единиц измерения и валют между различными стандартами и странами.

Что понравилось: очень просто в использовании – просто выберите то, что вы хотите конвертировать, в меню слева и введите значение. Сложно придумать что-то проще, и макет страницы прост и понятен.

Nike Football+ Team Edition
Что это: iPad-приложение, которое позволяет составлять программы тренировок по футболу, включая учебные видео и отслеживание процесса.

Что понравилось: в том, что у приложения от Nike отличный дизайн, нет ничего удивительного, но нам очень понравилось, как все это собрано воедино. Отличное сочетание цвета, типографики, иконографики и чистые, простые макеты. Многие спортивные приложения, как правило, забиваются из-за избытка информации, но здесь все расположено аккуратно.

Мастер Йода рекомендует:  Как стать настоящим хакером или Capture The Flag

Tabletop
Что это: модульная программа для редактирования аудио и создания миксов для iPad.

Что понравилось: нет ничего нового в том, что очередное iPad-приложение имитирует реальные вещи, но часто они выглядят малопривлекательно. Однако Tabletop успешно обошла эту проблему. В интерфейсе очень много деталей, что придает ему отлично проработанный вид.

Things
Что это: версия для iOS популярного приложения для Mac to-do/GTD.

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

Notably
Что это: средство для работы с iPad, разработанное для того, чтобы дать возможность писателям творить и организовывать свои книжные коллекции.

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

Советы по созданию хорошего пользовательского интерфейса: часть 1

Хороший пользовательский интерфейс (user interface, UI) охарактеризовать несложно: такой интерфейс показывает высокие коэффициенты конверсии и удобен в использовании. Другими словами, он полезен для обеих сторон: как для бизнеса, так и для клиентов. Маркетологам, желающим создать идеальный UI, предстоит долгий путь. Чтобы начать его, стоит постоянно интересоваться новыми подходами, улучшающими пользовательские интерфейсы, и внедрять эти идеи в различных комбинациях на реальных проектах.

Предлагаем вам список идей по улучшению UI. Некоторые из них давно применяются в маркетинге, а некоторые — только тестируются.

1. Макет из одного столбца вместо нескольких колонок

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

2. Подарок вместо просьбы о подписке

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

3. Объединить аналогичные функции

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

4. Социальные доказательства вместо того чтобы говорить о себе

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

5. Повторяйте

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

6. Различайте кликабельные и неактивные элементы

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

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

7. Советуйте, а не предлагайте равнозначные варианты

Отображая несколько предложений, выделите наиболее выгодное (для пользователя или… для вас). Это может стать отличной идеей, так как некоторых людей нужно немного подтолкнуть к решению. Существует ряд исследований в области психологии, которые показывают, что чем больше вариантов выбора предложено, тем ниже шансы на принятие решения. Чтобы перебороть этот парадокс, попробуйте подчеркнуть или выделить некоторые варианты перед другими.

8. Откажитесь от подтверждения действия

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

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

9. Обращайтесь к целевой аудитории

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

10. Говорите прямо и без колебаний

Вы можете разместить робкое сообщение, или высказать то же самое, но твердо и уверенно. Если вы заканчиваете текст вопросительными знаками, используете такие слова, как «возможно», «может быть», «заинтересованы?», «хотите?», то выглядите не так уверенно.

А говоря прямо и по-существу, вы повысите силу убеждения своих офферов. Кто знает, возможно, это сработает. Хотите попробовать? 🙂

11. Добавьте контраста

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

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

12. Упоминайте происхождение

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

13. Снизьте число полей лид-формы

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


14. Отображайте варианты, а не скрывайте их

Каждое выпадающее меню, которое вы используете, скрывает определенный набор действий, активация которых требует дополнительных усилий. Если эти скрытые функции важны на пути к целевому действию, то выпадающее меню может стать проблемой.

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

15. Предложите непрерывный опыт вместо «ложного дна»

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

16. Фокусируйте внимание на одном действий

Легко создать страницу со множеством ссылок, в надежде удовлетворить максимум потребностей клиентов. Если, однако, вы разрабатываете лендинг, который рассказывает определенную историю и основан на одном конкретном призыве к действию, то подумайте дважды. Имейте ввиду, что любая ссылка помимо основного СТА рискует отвлечь клиентов от того, что вы от них ждете.

17. Покажите прогресс

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

18. Формулируйте тексты СТА из преимуществ вместо описания задач

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

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

19. Прямая манипуляция вместо контекстного меню

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

Внедрение таких взаимодействий сокращает количество необходимых шагов. Но помните, что для некоторых видов действий контекстные меню не помешают.

20. Выделите поля, не создавая дополнительных страниц

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

21. Переходы вместо немедленного отображения изменений

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

22. Постепенное вовлечение вместо поспешных сделок

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

23. Уберите лишние границы

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

24. Используйте преимущества вместо функций

Люди, как правило, больше озабочены преимуществами, а не особенностями продукта. Преимущества несут более четкую ценность. Крис Гиллебо (Chris Guillebeau) в «Стартапе за 100 долларов» пишет, что люди действительно заботятся о том, чтобы получить больше: любви, денег, одобрения, свободного времени, в то же время желают снизить стресс, конфликты, хлопоты и неопределенность. Поэтому, отображая функции, не забудьте привязать их к преимуществам, насколько это возможно.

25. Создайте хороший дизайн не только для наполненных, но и для пустых страниц

Иногда на странице будет 0, 1, 10, 100 или 10000+ результатов данных, отображенных различными способами. . Наиболее распространенным сценарием станет, вероятно, переход от пустой страницы отображения данных к большему количеству информации. Но мы часто забываем проработать качественный дизайн для этого начального окна, на котором еще не представлены данные — и тем самым пренебрегаем пользовательским опытом. Когда пользователь впервые обращается к вашему приложению и видит пустое, холодное окно, он, вероятно, получает не слишком сногсшибательное впечатление. Но ведь такие начальные окна приложений — идеальное место повысить квалификацию посетителей и показать им, как приступить к работе. Пользовательские интерфейсы здесь не исключение.

26. Попробуйте Opt-Out вместо opt-in

Стратегия opt-out подразумевает, что пользователи или клиенты могут участвовать в чем-либо или дать на что-либо согласие (например, подписаться на рассылку), не предпринимая никаких действий. В качестве альтернативы, существует более традиционная стратегия opt-in, которая требует от людей сначала предпринять что-то, чтобы поучаствовать в чем-то или получить что-либо. Есть две веских причины, по которым opt-out лучше, чем opt-in. Во-первых, он снижает сопротивление, так как пользователю ничего не нужно делать. Во-вторых, это также формат рекомендаций, социальных доказательств, подразумевающий некую норму — «поскольку окружающие воспринимают это положительно, я поступлю так же».

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

27. Создавайте согласованный дизайн, не заставляя людей менять паттерны поведения

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

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

Первая часть нашего гайда подошла к концу. Впереди — вторая и третья части статей с советами по оптимизации пользовательского интерфейса.

Удобный интерфейс: 5 правил юзабилити

За пять лет работы в мобильной разработке мы сделали 40 проектов. Кроме написания собственно кода, мы также разрабатываем дизайн приложений, а точнее UX-дизайн. А это, честно говоря, похоже на магию.

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

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

Итак. Вот наши правила:

1. Думайте как пользователь

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

В каждом проекте «главное» определяется индивидуально, но важно исходить из конкретных жизненных задач пользователя, который существует не только в вашей голове, но и где-то на этой планете

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

2. Ничего лишнего

По последним исследованиям человек может без стресса воспринимать только 3-5 объектов сразу. Видели светофор? Очень удобная штука, которая помогает нам безопасно передвигаться по городу. А теперь представьте, что в светофоре не 3 цвета, а десять, каждый из которых что-то означает. Или представьте, что вы ведете автомобиль, и перед вами вырастает десять дорожных знаков. Скорее всего, ваш мозг закипит. При создании интерфейса приложения это правило тоже действует, правда, с поправками. Нужно сокращать количество элементов до минимума пока это возможно, но не в ущерб задачам, которые решает пользователь.


3. Контекст использования тоже важен

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

Этот пункт может разрушить все ваши идеи насчет дизайна

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

Или приложение с кнопкой «SOS». Логично, что у пользователя не будет столько времени, сколько есть у человека, который вечерком решил повыбирать книжку в интернет-магазине.

4. Все взаимосвязанные элементы логически соединены

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

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

5. Иерархия по важности

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

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

Таким образом, степень важности элементов нисходит с верхнего левого угла к нижнему правому.

Это не единственный способ выделить важное. В каждом проекте мы разрабатываем индивидуальный UX-дизайн. Однако необходимо помнить, что важное все-таки выделять стоит, чтобы помочь пользователю решить задачу быстро. И не взорвать ему мозг.

Резюмируем:

  1. В приложении должна быть цель — та задача, которую решает пользователь
  2. Нельзя отвлекать внимание от цели лишними элементами
  3. Элементы располагаются так, чтобы ими было удобно пользоваться в обычном для приложения контексте
  4. Связанные по смыслу элементы располагаются рядом друг с другом
  5. Элементы имеют иерархию по важности и располагаются согласно этой иерархии

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

5 ПРАВИЛ хорошего интерфейса

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

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

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

Само определение не позволяет указать точно, насколько интерфейс Internet плох. Качество одного и того же интерфейса можно оценить по-разному в зависимости от целей посетителей.

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

Мастер Йода рекомендует:  Администраторы сообществ в «Ok» смогут получать денежные переводы

У такого положения вещей есть объективные причины. Во-первых, сама технология молода. Во-вторых, потребность в качественном интерфейсе осознается владельцами Web-сайтов достаточно редко. Да и в этом случае заказчикам интерфейс кажется чем-то эфемерным, возникающим самопроизвольно («как, вам нужно на эту работу целых пять дней?!»). B-третьих, сказывается банальная нехватка специалистов.

Самой большой проблемой является молодость технологии. При создании обычной программы, например, для Windows, программисту как правило не нужно придумывать новые интерфейсные элементы – операционная система содержит огромное их количество. Благодаря этому изобилию, программы с плохим интерфейсом встречаются сравнительно редко. В случае же с Web, где все нужно делать с нуля, скверные сайты попадаются постоянно. Однако приблизиться к идеалу вполне реально.

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

Правило 1. Не стремитесь к оригинальности

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

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

Оригинальной пепельницей, как известно, является пепельница для некурящих. Подставьте вместо слова «пепельница» слово «интерфейс» и посмотрите на результат.

Правило 2. Изучайте цели посетителей

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

Определить реальные цели посетителей достаточно трудно: опросы по многим причинам не помогают, а статистика сервера не дает необходимых результатов. Единственным работающим решением является планирование. Раз нельзя узнать, что нужно людям, можно зайти с другой стороны – создать сайт, заранее рассчитывая на определенные цели посетителей. Этот метод хорош, но существует опасность выбора не интересных аудитории целей. Тогда сайт придется полностью переделывать.

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

Правило 3. Не усложняйте систему

С одной стороны, чем больше функций у сайта, тем лучше. С другой – принципиально невозможно создать систему равно удобную и функциональную. Большинство предметов реального мира способно выполнять строго определенные задачи: микроскоп позволяет рассмотреть мелкие предметы, но плохо приспособлен для забивания гвоздей. Швейцарский нож с огромным количеством разных инструментов в одной рукоятке до сих пор не вытеснил ножи обычные (каждый, кто ломал ноготь, пытаясь вытянуть нужное лезвие, охотно с этим утверждением согласится).

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

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

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

Правило 4. Не решайте интерфейсом посторонних задач

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


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

Правило 5. Определитесь, какой ресурс вы создаете

Добиться единства понятности и эффективности интерфейса практически невозможно. Чаще всего это и не нужно. Есть два типа сайтов: регулярно и редко посещаемые. Потребности пользователей сайтов разных типов существенно различаются.

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

И, наконец, главное. Самый надежный способ создать хороший интерфейс – тестирование. В этом нет ничего пугающего. Составьте список из нескольких заданий (например, «Зарегистрируйтесь на сайте» или «Найдите информацию об ХХХ») и попросите кого-нибудь воспользоваться сайтом. После чего выслушайте пожелания и исправьте просчеты. За один проход (при тестировании на двух пользователях) удается избавиться примерно от 80% ошибок.

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

Владислав Головач — информационный архитектор группы компаний Altermedia; www.am.ru

Краткая история компьютерного интерфейса

Вопреки распространенному мнению, графический интерфейс пользователя изобрели не в фирме Apple. Собственно говоря, лучше не пользоваться термином «графический интерфейс», поскольку интерфейс может быть каким угодно. Главное, чтобы он позволял пользователю явно манипулировать объектами (а не набирать с клавиатуры сакральные команды). Но пойдем по порядку.

Первым полноценным интерфейсом пользователя обладала система Sketchpad, разработанная Иваном Сазерлендом в качестве докторской диссертации в Массачусетском Технологическом институте (1963). Sketchpad был первой системой, позволявшей пользователю изменять, перемещать и удалять нарисованные объекты с помощью светового пера (которое было изобретено в 1954 году). К 1977 году Аллан Кей окончательно сформулировал принципы того, что теперь называется WYSIWYG. Примечательно, что работа Кея описывала гипотетический компьютер, более всего напоминающий современный Palm.

В 1965 году Дуглас Энгельбарт из Стэндфордской исследовательской лаборатории изобрел мышь. Проект был направлен на разработку дешевой замены светового пера, от которого чрезвычайно уставали руки. В том же году им были созданы многооконный интерфейс и выпадающие меню. В 1986 году Энгельбарт продемонстрировал свои изобретения на отчетной конференции ARPA. По тем временам демонстрация была потрясающей – изображение с экрана компьютера, который находился за 180 километров от конференц-зала, проецировалось на стену. Все, находившиеся в зале, утверждали потом, что это было самым большим потрясением в их жизни. Фактически, именно этот день и можно считать началом широкого изучения интерфейса. До этого времени исследования проводились отдельными учеными.

В дальнейшем основным центром разработок стал Xerox PARC. Именно там все предыдущие изобретения были сведены вместе в первый коммерческий продукт – Xerox Star (1981). Созданию этого компьютера предшествовала огромная исследовательская работа. Хотя было известно, что должно быть в интерфейсе, было совершенно непонятно, как интерфейс должен работать. Компьютер не имел никакого успеха на рынке – с момента нажатия кнопки Help и до появления соответствующего окна проходило не менее пяти минут. Но свою историческую роль он выполнил: его увидел Стив Джобс, к тому времени ставший миллионером на продаже компьютеров Apple I и Apple II. Джобс был потрясен увиденным – Xerox Star был первым в истории компьютером, на котором мог работать кто угодно.

Джобс немедленно переманил к себе Джеффа Раскина – ведущего разработчика Xerox Star – и выдал тому денег на разработку собственного компьютера. Уже в следующем году компьютер (Apple Lisa) был создан, но провалился точно так же, как и Xerox Star. Причины были те же – он медленно работал и был слишком дорог. Однако Джобс не впал в отчаяние и дал денег на разработку второго компьютера – Macintosh (1984).

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

Числа

58% пользователей Internet совершают две или больше навигационные ошибки в поиске каждого фрагмента нужной им информации (Форсайт и др., 1996). 66,8% пользователей считают самой большой проблемой Internet невозможность найти нужную информацию (GVU, 1998). Исследования Я. Нильсена (1998) показывают, что пользователи не способны найти нужную им информацию в 42% случаев. Частично это происходит потому, что люди просто ее не видят: примерно 8 % мужчин страдают той или иной формой дальтонизма, а в 42% случаев пользователи не рассматривают (смотрят, но не видят) графику (Бенвей и Лэйн, 1998). И это еще не все.

Правило 1.

Правило 2.

Правило 3.

Правило 4.

Правило 5.

Пиктограммы без текста непонятны пользователям примерно в 60% случаев (для некоторых понятий пиктограммы рисовать легко, для некоторых – трудно или вообще невозможно). Опять потеря времени посетителя.

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

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

Слева расположены кнопки, справа – просто надписи. Визуальной разницы между ними нет, а это значит, что посетитель, скорее всего, попытается на надписи нажать. Разумеется, совершенно зря.

Этапы разработки пользовательского интерфейса: как сделать так, чтобы UI не лишил вас прибыли

В ноябре 2020 года студия «Лайв Тайпинг» рассказывала читателям vc.ru, из чего складывается стоимость мобильного приложения. Эта статья посвящена одному из слагаемых: пользовательскому интерфейсу.

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

Пользовательский интерфейс, или UI (User Interface) — это внешний вид продукта, способ общения между пользователем и программой. А ещё интерфейс влияет на то, будет ли продукт приносить деньги и пользоваться уважением и любовью аудитории.

Доказывать важность дизайна как магнита для пользователей удобно на примере соцсетей с миллионами пользователей. Резонансным случаем в рунете стал редизайн «Кинопоиска». 96% негативных отзывов на него говорят сами за себя: владельцы сайта, компания «Яндекс», сделала это без оглядки на мнение пользователей.

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

В итоге новый сайт просуществовал четыре дня и под напором гнева «Яндекс» вернул старый дизайн. Новый же, по мнению сопричастных, нравился только менеджерам.

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

Вы хотите повторить судьбу «Живого журнала» и «Кинопоиска»? Не думаем, поэтому мы и написали эту статью. Вам как клиенту будет полезно знать, как именно создаётся дизайн сайтов и приложений, из каких этапов состоит работа и что вы должны получить. Чувство контроля над этими этапами приблизит ваш проект к успеху.

Итак, разберём особенности разработки пользовательского интерфейса пошагово.

Проектирование

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

Вложить время и деньги в проектирование — это вложить время и деньги в понимание того, что получится на выходе.

Ответить на большую часть этих вопросов поможет составление портрета целевой аудитории (ЦА) — тех самых людей, для которых делается продукт.

Главная задача дизайнеров при изучении аудитории — включить эмпатию на максимум и понять, как эта аудитория думает, дышит, видит, слышит и действует. Этому способствуют следующие методы:

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


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

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

Такая персона становится центром user story, или пользовательской истории. Это краткий, в несколько строк, рассказ про персону и то, как она работает с функциональностью приложения и какой цели достигает. User story строится по шаблону:

Поместив нашего 23-летнего фаната оригинальных версий в этот шаблон, получим:

Компания Intercom славится не только комплексным решением по внедрению чатов в сайты и мобильные приложения, но и изобретением подхода Jobs To Be Done. В основе подхода лежит не личное качество ключевой персоны, а обстоятельства и мотивация, которые толкают персону пользоваться продуктом. «Размышления» персоны называются Job story, а шаблон выглядит так:

Ситуация с кинолюбом в рамках такого подхода выглядит иначе:

Подробнее про подход Jobs To Be Done написала в своём блоге платформа Tilda.

От User story и Job story мы переходим к User scenario. Это маршрут взаимодействия пользователя с продуктом и достижения цели.

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

Прототипирование

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

Работа над ним начинается с создания макета. Одним из вариантов макета является вайрфрейм (от английского wireframe — «каркасный»). Внешне он выглядит как куча прямоугольных блоков, опоясанных линиями и стрелочками. В этих блоках и стрелочках заложена структура продукта и порядок взаимодействия пользователя с ним.

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

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

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

Для презентации прототипа мало показать экраны. Нужно показать, к чему и куда приводит взаимодействие будущего пользователя с элементами интерфейса. Связав элементы линиями с другими экранами, на которые попадёт пользователь, вы получите пользовательские сценарии использования приложения, или user flow.

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

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

В качестве софта для этой задачи мы используем Overflow, чей слоган «User flows done right» даёт понять, что время за этой работой пройдёт продуктивно и с пользой. В Overflow легко импортируются экраны из Sketch или Figma, а сделать flow для 100 экранов можно за час — гораздо быстрее, чем рисовать стрелочки самому.

Нужен дополнительный уровень понимания, как продукт будет работать? С помощью таких сервисов, как Marvel, InVision, POP App и Origami Studio детализированный прототип можно превратить в интерактивный. Его польза в том, что он даёт прокликать (а в случае, если у нас мобильное приложение — прокликать прямо в телефоне) все элементы интерфейса и оценить логику работы продукта до того, как он попадёт в руки конечного пользователя.

Его создание — этап необязательный, так как с презентацией будущей работы справляются макеты и user flow. Но когда нужно показать возможности мобильного приложения и раскрыть перед клиентом предстоящий объём работ в деталях, используйте его.

После утверждения логики и функциональности продукта этап прототипирования можно считать завершённым.

Резюмируем: вы получаете детальный прототип, его кликабельную версию (опционально) и карту экранов. Они соответствуют выработанным и согласованным в рамках этого этапа гипотезам продукта.

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

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

Разработчики получают от дизайнеров прототип и user flow, чтобы максимально точно оценить этап разработки и ориентироваться в логике продукта. Затем на будущий продукт начинают накатывать стиль.

Стилизация

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

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

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

Как и в случае прототипа, готовый дизайн согласовывается с клиентом. Когда всех всё устраивает, дизайн готовится для передачи разработчикам. Сколько времени и сил можно сэкономить, сделав это грамотно посредством Zeplin (спойлер: очень много), можно узнать из нашей статьи.

Вывод

Пользоваться продуктом в первую очередь будут простые люди, а не его создатели. Будучи людьми простыми, во время работы с продуктом они прогонят его через фильтр из трёх вопросов: «Что делать?», «Куда идти?» и «Куда нажимать?». Если вы серьёзно отнесётесь к этапам работы над интерфейсом, ваши пользователи получат ясный ответ на эти вопросы и останутся довольны продуктом.

«Что делать?»

Это вопрос о том, насколько пользователю понятна основная функция продукта. Обозначить её нужно на этапе проектирования — тогда же, когда определяется целевая аудитория.

«Куда идти?»

Путь к цели лежит через взаимодействие пользователя с интерфейсом. Кнопка за кнопкой, поле ввода за полем ввода, экран за экраном — и так до заветной покупки или публикации поста. Грамотно составленный user scenario, отрепетированный на прототипе, уберёт с этого пути все ухабы.

«Куда нажимать?»

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

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

Мастер Йода рекомендует:  Python GUI создаём простое приложение с PyQt и Qt Designer

Желаю вам делать хорошие пользовательские интерфейсы и не делать плохие. Если у вас возникли вопросы к нашему процессу или вы хотите поделиться своим подходом к разработке интерфейса — добро пожаловать в комментарии.

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Руководство по дизайну пользовательского интерфейса: 10 правил Якоба Нильсена

26 Янв Руководство по дизайну пользовательского интерфейса: 10 правил Якоба Нильсена

Научитесь создавать проекты, которые полностью удовлетворят потребности и запросы вашего клиента, применяя рекомендации Якоба Нильсена (Jakob Nielsen) и Рольфа Молика (Rolf Molich) по улучшению пользовательского интерфейса. Данные методы отразились во многих продуктах, разработанных успешными компаниями, такими как: Apple, Google, и Adobe. Еще одним, ярким доказательством того, что команда проектировщиков в этих компаниях учитывает и применяет данные правила, являются опубликованные и распространенные ими, рекомендации по дизайну пользовательского интерфейса. В этой статье вы узнаете, как придерживаться 10 эмпирических правил, для улучшения удобства использования, практичности и привлекательности ваших проектов.


10 правил Нильсена (Nielsen) и Молика (Molich) по дизайну пользовательского интерфейса

В 1990 году Якоб Нильсен (Jakob Nielsen) – известный консультант по веб-дизайну и партнер в Nielsen Norman Group, вместе с Рольф Моликом (Rolf Molich) – еще один выдающийся эксперт по вопросам использования продуктов и доступности проектов, обнародовали список из 10 правил, которые помогут в разработке удобного интерфейса для пользователя. Обратите внимание, что между методами Нильсена – Молика (Nielsen-Molich) и работой “8 золотых правил” Бена Шнейдермана (Ben Shneiderman) – много общего! Кроме того, спустя 4 года после первоначальной публикации Шнейдермана (Shneiderman), эти 10 общепринятых рекомендации повторили и дополнили 8 золотых правил Бена Шнейдермана (Ben Shneiderman).

• Видимость системного статуса

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

• Соответствие системы и реального мира

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

• Пользовательский контроль и свобода действий

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

• Логичность и стандарты

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

• Предотвращение ошибок

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

1. Воспринять, а не запомнить

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

• Гибкость и эффективность использования

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

• Эстетический и минималистский дизайн

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

• Помогите пользователям распознать, диагностировать и оправиться после ошибки

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

• Помощь и документация

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

Корпорация Google – многомиллиардная технологическая компания, безусловно, создает проекты, которые отражают вышеупомянутые методы. Джон Уайли (Jon Wiley) – главный дизайнер поисковика Google в 2012 году сказал:

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

Вышеупомянутые рекомендации Нильсена – Молика (Nielsen-Molich) по созданию удобного интерфейса для пользователя, также включают в себя эти три ключевые компонента. Это означает, что вы можете улучшить впечатление пользователя о вашем дизайне и проекте в целом, используя и применяя данные руководства.

Пример того, как Adobe удачно интегрирует эвристики Нильсена и Молика

Компания Adobe Systems Incorporated – крупная североамериканская компания, занимающаяся компьютерным программным обеспечением, является отличным примером того, как проекты, отражающие десять правил пользовательского интерфейса, могут привести компанию к успеху. Один из их самых популярных продуктов – Adobe Photoshop, который представляет собой редактор растровой графики, демонстрирует характеристики хорошо спроектированного пользовательского интерфейса, созданного с использованием вышеупомянутых правил.

Давайте подробно рассмотрим, как Adobe Photoshop применяет каждый метод! Возможно, это вдохновит вас на улучшение удобства использования, полезности и востребовательности ваших проектов, путем включения 10 эмпирических правил.

1. Видимость системного статуса

Photoshop позволяет пользователю видеть и понимать, что происходит с программой, визуально показывая к чему привели их действия. Например, когда пользователи передвигают слои в палитре «Слои», они могут наблюдать, как выбранный слой физически перемещается в пространстве (на экране монитора). Графика курсора также изменяется: когда пользователь перетаскивает слой палитры, курсор от открытой руки переходит к захваченной руке.

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

2. Соответствие системы реальному миру

Яркий пример того, как Photoshop имитирует реальный мир в терминах и представлениях, которые понимают их целевые пользователи – это использование информационной структуры и терминологии, такой же как мы привыкли слышать в реальном мире, в сфере фотографии и печатных СМИ. Привычные концепции и термины, такие как RGB, Hue / Saturation / Brightness и CMYK, используются для представления цвета, в то время, как различные инструменты, такие как “Осветлитель” (англ. – “dodge tool”) и “Затемнитель” (англ. – “burn tool”), имитируют традиционную технику темной комнаты для фотографий.

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

Такие инструменты фотошопа как Dodge Tool и Burn Tool имитируют традиционную технику темной комнаты для фотографий.

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

Заметим, что Photoshop использует термин «экспозиция», так же как обычно им пользуются в мире фотографии.

3. Пользовательский контроль и свобода действий

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

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

Пользователи все контролируют, они могут сделать шаг назад/шаг вперед в меню «Правка» или использовать быстрые клавиши Photoshop – Alt + Ctrl + Z.

4. Логичность и стандарты

Photoshop придерживается стандартного формата и внешнего вида, когда дело доходит до строки меню. Они также используют общеизвестную терминологию, такую как: «Новый …», «Открыть …», «Сохранить как …» и т. д.

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

Меню «Файл» в Photoshop включает в себя множество знакомых опций.

5. Предотвращение ошибок


Чтобы пользователи не делали ошибок, Photoshop дает краткое описание или обозначение инструментов, при наведении на них курсором. Таким образом, человек понимает, подходит ему инструмент или нет.

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

Пользователь наводит на значок ластика и Photoshop отображает метку «Ластик».

6. Восприятие, а не запоминание

Абсолютно не важно, какое действие будет выполнять пользователь, будь то добавление фильтров или открытие нового файла, Photoshop поможет человеку сделать правильный выбор! Это позволяет пользователю визуально распознавать то, что они ищут, вместо того, чтобы вспоминать имя или искать что-то в поиске фотошопа. Возможно, вы сталкивались с другими программами редактирования фотографий, которые просили вспоминать и вводить имя нужного вам файла. На самом деле, довольно-таки сложно вспомнить название файла, так как в основном оно выглядит подобным образом: 29412_09342.JPG

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

Пользователю легко визуально распознать изображение заката по миниатюре и выбрать его.

7. Гибкость и эффективность использования

Одна из многих причин, почему пользователи любят Photoshop – это простота и эффективность использования данной программы! Люди могут легко использовать гибкость фотошопа: настраивать рабочую область, сохранять файлы, редактировать их снова, улучшать эффективность работы и тд.

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

Photoshop дает пользователям возможность сохранять предпочтительную настройку рабочей области.

8. Эстетический и минималистский дизайн

На панеле инструментов в Photoshop отображаются только значки! Сама панель находится в углу программы, что позволяет сохранить порядок рабочей области!

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

Панель инструментов Photoshop минималистична! Она позволяет избежать беспорядка, отображая инструменты только в виде иконок.

9. Помощь пользователю в распознании, диагностике и восстановлению после ошибки

Всякий раз, когда возникает ошибка, Photoshop отображает диалоговое окно, которое позволяет пользователю узнать, что пошло не так и как это исправить.

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

В этом сообщении об ошибке, Photoshop объясняет, что пошло не так, какая причина и как устранить неполадки.

10. Помощь и документация

Доступ к справке и документации можно легко получить через панель главного меню. Там, также, можно увидеть разделы справки и найти обучающие материалы об использовании программы.

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

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

10 шагов для улучшения удобства использования, полезности и востребовательности проекта, путем применения рекомендаций Нильсена и Молика ( Nielsen and Molich’s Interface Design Guidelines)

Как разработчик, вы должны уметь оценивать и критиковать дизайн собственных проектов так же хорошо, как и работу других разработчиков, опираясь на обоснованные доводы и знания! Применение 10 общепринятых правил Нильсена и Молика (Nielsen and Molich’s Guidelines), при оценке дизайна вашего интерфейса, поможет лучше понять и увидеть потенциальные проблемы, создать прекрасные впечатления пользователя от вашего проекта. Ниже вы найдете рабочую таблицу где сможете практиковаться, как только научитесь распознавать, применялись ли данные правила и когда они были нарушены. Ну что ж… Наконец-то пришло время улучшить сайт или приложение, применяя 10 известных правил.

Напоследок…

Опираясь на инструкции по интерфейсу Нильсена и Молика (Nielsen and Molich), вы должны всегда помнить об удобстве использования, полезности и целесообразности вашего проекта для пользователя! Ровным счетом, так же как и дизайнеры успешных компаний (Apple, Google и Adobe), при разработке проекта, вы будете поддерживать свои решения с эвристикой и убеждаться в том, что создаете полезный и красивый дизайн! Чтобы практиковать распознавание этих 10 эмпирических правил, продолжайте работу и выполните упражнение, описанное в прикрепленном файле.

Рекомендации:

Чтобы просмотреть «Исследование удобства использования Adobe Photoshop», перейдите по ссылке:
https://courses.cs.washington.edu/courses/cse595/98wi/projects/photoshop.html

Чтобы найти дополнительную информацию о работе Якоба Нильсена (Jakob Nielsen) «Повышение объяснительной силы юзабилити », см.

Чтобы просмотреть дополнительную информацию о дизайнерском мышлении Джона Вилей (Jon Wiley), пожалуйста, перейдите по ссылке:

Основные принципы разработки графического пользовательского интерфейса (стр. 1 из 4)

Правила проектирования пользовательского интерфейса

Правило 1: дать контроль пользователю

Правило 2: уменьшить нагрузку на пользователя

Правило 3: сделать интерфейс совместимым

Программа «Tidy Start Menu»

Введение

«Золотое правило проектировщика гласит: «Никогда не делай другим того, что они сделали тебе». Вспомните, что вам не нравится в программном обеспечении, которым вы пользуетесь. И не делайте того же самого в программе, над которой работаете.»

Почему надо следовать принципам построения пользовательского интерфейса?

Программное обеспечение должно разрабатываться с учетом требований и пожеланий пользователя — система должна подстраиваться к пользователю. Вот почему принципы проектирования столь важны.

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

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

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

Три принципа разработки пользовательского интерфейса формулируются так:

1)контроль пользователем интерфейса;


2)уменьшение загрузки памяти пользователя;

3)последовательность пользовательского интерфейса.

Где найти принципы разработки пользовательского интерфейса

Хансен представил первый список принципов проектирования[2]. Принципы таковы:

Многие крупные производители операционных систем, выпусти на рынок свои новые продукты, публикуют соответствующие руководства и инструкции. В этих изданиях раскрываются принципы подхода к проектированию интерфейса. Руководства выпускали Apple Computer, Inc. (1992), IBM Corporation (1992), Microsoft Corporation (1995) и UNIX OSF/Motif (1993).

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

Важность соблюдения принципов

«Несовместимость интерфейса может стоить большой компании миллионов долларов убытка из-за потери продуктивности и увеличения стоимости технической поддержки.» — Джесси Брист.

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

Данные принципы выдержали проверку временем и появлением новых компьютерных технологий. Якоб Нильсен заметил: «Принципы останутся основополагающими даже если программа будет иметь футуристичный трехмерный дизайн с печаткой «DataGlove», служащей для ввода, будут распознаваться движения и «живые» видеоизображения. Они будут актуальны, поскольку выражают основную идею диалога с машиной при помощи команд»[8].

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

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

Правила проектирования пользовательского интерфейса

«Делай это проще, но не примитивнее.»

Правило 1: дать контроль пользователю

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

Принципы, которые дают пользователю контроль над системой:

1)использовать режимы благоразумно;

2)предоставить пользователю возможность выбирать: работать либо мышью, либо клавиатурой, либо их комбинацией;

3)позволить пользователю сфокусировать внимание;

4)демонстрировать сообщения, которые помогут ему в работе;

5)создать условия для немедленных и обратимых действий, а также обратной связи;

6)обеспечить соответствующие пути и выходы;

7)приспосабливайте систему к пользователям с различным уровнем подготовки;

8)сделать пользовательский интерфейс более понятным;

9)дать пользователю возможность настраивать интерфейс по своему вкусу;

10)разрешить пользователю напрямую манипулировать объектами интерфейса;

Использовать режимы благоразумно

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

Позволить человеку использовать мышь и клавиатуру

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

Позволить пользователю переключить внимание

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

Показывать поясняющие сообщения и тексты

Во всем интерфейсе использовать понятные для пользователя термины. Они не обязаны знать о битах и байтах!

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

Обеспечить немедленные и обратимые действия и обратную связь

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

Предоставлять понятные пути и выходы

Пользователи должны получать удовольствие при работе с интерфейсом любого программного продукта. Даже интерфейсы, применяемые в индустрии, не должны пугать пользователя, он не должен боятся нажиматься нажимать кнопки или переходить на другой экран. Вторжение Internet показало, что навигация — основная интерактивная техника в Internet. Если пользователь понимает, как зайти на нужную страницу в WWW, то существует 80-процентная вероятность, что он разберется в интерфейсе. Люди осваивают методы работы с браузером очень быстро.

Приспосабливаться к пользователям с разными уровнями навыков

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

Сделать пользовательский интерфейс «прозрачным»

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

10 правил хорошего пользовательского интерфейса

1. Состояние системы должно быть всегда понятно для пользователя.

2. Система должна использовать обычный человеческий язык, термины и понятия, существующие в реальном мире, а не принятые только внутри самой системы.

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

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

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

6. Лучше понимать, чем вспоминать. Пользователь должен видеть все объекты и опции, а не держать их в памяти. Инструкции по использованию системы должны быть видны либо легкодоступны.

7. Гибкость и эффективность использования. В системе могут быть ускорители взаимодействия, доступные экспертам, но не мешающие неопытным пользователям.

8. Эстетичный и минималистичный дизайн. В диалогах не должно быть ненужной или редко используемой информации. Каждый блок дополнительной информации в диалоге конкурирует с действительно необходимой и мешает воспринимать её.

9. Система помогает распознавать и устранять ошибки. Сообщения об ошибках должны быть изложены ясным языком, точно указывать на проблему и предлагать конструктивное решение.

10. Справка и документация. Лучше всего, если системой можно пользоваться, не читая документацию, но при необходимости нужно обеспечить простой контекстно связанный поиск по справке, которая не должна быть слишком объёмной и должна предлагать список конкретных действий.

Успешная деятельность в области «тёмных схем» предполагает принципиальное и последовательное невыполнение хотя бы некоторых из перечисленных требований. Не игнорирование, а именно старательное выполнение «наоборот».

«Тёмные схемы»: как интерфейсы веб-сайтов заставляют нас делать то, чего мы не хотим ➥ ✈

Добавить комментарий