Делаем сайт интуитивным в использовании

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

Интуитивный веб-дизайн – ключ к эффективности сайта

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

Что значит интуитивный так или иначе?

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

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

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

Как выглядит интуитивный веб-дизайн?

Вы поймете, когда увидите. Рассмотрим пару таких сайтов.

Playa Del Carmen (playadelcarmen.com) информационно-туристический сайт и бюро путешествий одноименный городу на карибском побережье Мексики.

Информация на главной странице дает представление посетителю о городе Playa Del Carmen, а также позволяет быстро спланировать, заказать и оплатить его пребывание здесь.

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

Другим отличным примером интуитивного веб-дизайна является сайт Shopify (shopify.com) – платформа для электронной коммерции. Беглый взгляд на сайт полностью расскажет любому посетителю о сайте.

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

Далее вы видите возможности платформы и преимущества, которые приносит работа с ней.

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

Как создавать интуитивный веб-дизайн?

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

Исследуйте рынок

Всегда тестируйте и изучайте результаты. A/B тестирование необходимо при запуске любого коммерческого сайта.

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

Что такое интуитивно-понятный интерфейс?

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

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

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

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

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

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

Интерфейс не может считаться хорошим, если он не привлекает к себе внимание. Можно работать на простом и удобном, эффективном и оперативном интерфейсе, но только привлекательность превратит работу пользователя в истинное удовольствие! А поскольку «о вкусах не спорят» и на всех не угодишь, при создании своего продукта ориентируйтесь на целевую аудиторию и ее предпочтения.

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

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

Что на самом деле означает определение «интуитивно понятный» интерфейс

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

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

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

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

Интуитивность не должна быть целью дизайна

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

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

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

Разбор значения определения «интуитивно понятный»

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

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

В общем, интуитивно понятный означает простой в использовании.

Но если вы посмотрите глубже, что на самом деле имеют в виду люди, когда начинают приводить примеры опыта, который «кажется интуитивно понятным», вы в конечном итоге получите фундаментальный набор принципов дизайна, которые должны быть вам знакомы, если вы UX или UI дизайнер:

  • Заметность: видны ли важные элементы на экране? Чем заметнее элемент, тем больше вероятность того, что пользователи узнают о нем и о том, как его использовать.
  • Обратная связь: когда пользователь предпринимает какие-либо действия, ясно ли ему, какое действие было предпринято и что было достигнуто этим действием?
  • Ограничения: ограничивает ли интерфейс набор действий, которые может предпринять пользователь? Бесконечные возможности часто оставляют пользователя в замешательстве.
  • Аффордансы: помогает ли дизайн людям понять, как взаимодействовать с определенными элементами? Суть заключается в том, чтобы дать пользователям «подсказки» о том, как работает каждый компонент.
  • Очевидность: можно ли выяснить, как использовать объект, взаимодействуя с ним?
  • Ориентация: знает ли пользователь, где он находится в структуре продукта в данный момент времени? Он знает, как двигаться вперед и назад?
  • Ожидание: соответствует ли результат действия ожиданиям пользователей до выполнения этого действия?
  • Эффективность: эффективен ли продукт, помогая пользователям выполнить задачу? Есть ли место для повышения эффективности, сокращения сценариев или ускорения результатов?

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

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

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Повышение юзабилити веб-сайта: как сделать сайт удобным для пользователей

Что такое юзабилити

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

Юзабилити — это степень качества общепользовательского навыка, наработанного в результате коммуникации с устройством или системой, к примеру, веб-ресурсом, программным обеспечением, приложением.

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

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

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

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

Оценить и проверить юзабилити сайта можно с помощью следующих пунктов:

  1. Структура.
  2. Важная информация.
  3. Дизайн.
  4. Навигация.
  5. Скорость загрузки.

Разберем подробнее каждый из приведенных выше пунктов.

Структура сайта

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

Важная информация на сайте

Важная, нужная и полезная, на ваш взгляд, информация должна сразу бросаться в глаза (сразу — это в течение первых 3 секунд пребывания на площадке). Для чего это нужно? Опять же для удобства ваших посетителей и повышения юзабилити. Вы же не хотите, чтобы они обошли всю интернет-площадку в поисках таких страниц, как, к примеру, “Контакты”, “Оплата и доставка”, номера телефонов, график работы компании и т.д. и т.п., и так ничего и не нашли и покинули площадку? Либо нашли, но приложили так много усилий, что уже никуда звонить-то и не хочется, да и зачем звонить, если они уже напрочь позабыли о цели своего визита? Поэтому, такого рода информацию необходимо размещать на заметных местах — в хедере, а некоторую контактную информацию даже дублировать в футере.

Дизайн сайта

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

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

Навигация по сайту

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

1. В хедере размещать логотип компании. При этом:

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

2. Размещать на всех страницах ресурса меню 1-го уровня (т.к. место в меню довольно-таки ограниченно, в нем должны располагаться действительно важные разделы, такие как, к примеру, “О компании”, “Оплата”, “Доставка”, “Контакты”, “Отзывы”, а также основные разделы каталога компании). Естественно, такое меню лучше всего делать фиксированным и размещать непосредственно в шапке, это, естественно, улучшит юзабилити. Хочу отметить, что некоторые ресурсы, дабы не захламлять шапку, располагают все служебные страницы над ней, а уже в самом хедере размещают только основные разделы каталога. Получается как бы две шапки сайта, но в этом определенно что-то есть. Конечно, лучше видеть наглядно, поэтому вот пример такого двойного хедера:

А теперь посмотрим на шапку, которая включает в себя всю информацию в одном меню:

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

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

4. В хедере и футере размещать раздел “Контакты”. Всевозможные контактные данные компании (адрес, телефоны, электронная почта, Skype, Viber и т.д.) должны быть абсолютно прозрачными для посетителей ресурса и становиться заметными в течение первых секунд пребывания на сайте (здесь имеются в виду не подставные организации, а реально существующие компании, которые заинтересованы в предоставлении услуг и/или продаже товаров клиентам). Страница с контактами относится к одной из основных страниц в структуре веб-сайтов компаний, предоставляющих услуги и продающих товары. Именно поэтому для повышения юзабилити рекомендуется, чтобы этот раздел находился как в шапке, так и в подвале. Также хочется отметить, что если в футере есть свободное пространство, его можно использовать для того, чтобы разместить там все контакты без перехода в соответствующий раздел. Пример реализации такого подвала:

Мастер Йода рекомендует:  Искусственный интеллект – новый тренд высоких технологий

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

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

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

Пример качественно оформленных хлебных крошек:

Скорость загрузки сайта

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

В определении скорости загрузки страниц онлайн-площадки могут помочь следующие бесплатные инструменты:

1. PageSpeed Insights — https://developers.google.com/speed/pagespeed/insights/ (показывает скорость загрузки для мобильных устройств, а также для компьютеров, дает предложения по оптимизации);

2. Pingdom Website Speed Test — https://tools.pingdom.com/ (показывает время загрузки страницы, ее размер и др.);

3. Load Impact — https://loadimpact.com/ (моделирует изменение времени загрузки в зависимости от увеличения активных юзеров на площадке).

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

Для чего нужен юзабилити анализ сайта

Улучшение юзабилити сайта – очень значимый аспект в его продвижении. Так как люди становятся все более требовательными и нетерпеливыми, делать акцент на usability крайне важно. Любую страницу на сайте до самого низа прокручивает минимальный процент юзеров. Следовательно, главная цель, которую должны преследовать создатели и владельцы веб-сайтов, – это суметь заинтересовать своего посетителя. Причем сделать это они могут лишь за пару секунд, в течение которых случайному посетителю необходимо понять, где он находится, какие преимущества у этой площадки перед другими подобными ей, и какая выгода его здесь ожидает (теперь вы понимаете, что скорость загрузки играет очень важную роль в юзабилити? Иначе эти несколько секунд человек потратит на ожидание загрузки страницы, а не на ознакомление с площадкой и поиск того, за чем он туда пришел). Если человек не получит эту информацию за минимально короткий срок, он просто покинет ресурс и уйдет на другой, который для него будет более удобным в использовании.

Как сделать веб-ресурс максимально удобным, зародить интерес у человека и удержать его на своем ресурсе?! — работайте обязательно над usability своего сайта.

Все вопросы, которые не раскрыты в статье, оставляйте в комментариях ниже.

Юзабилити сайта НКО: как интуитивно понятный интерфейс помогает увеличить пожертвования и не потерять читателей

Ната­лья Бара­но­ва

Всего материалов: 583

Юзабилити сайта НКО: как интуитивно понятный интерфейс помогает увеличить пожертвования и не потерять читателей

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

‒ Андрей, каким должен быть сайт некоммерческой организации с точки зрения юзабилити?

‒ Без­услов­но, сайт дол­жен быть удоб­ным для кон­крет­но­го чита­те­ля. Его интер­фейс дол­жен отве­чать на базо­вые вопро­сы. Где я нахо­жусь? Без­опас­но ли здесь? Как это все рабо­та­ет? Что я могу полу­чить, и что тре­бу­ет­ся от меня?

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

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

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

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

Про­ек­ти­ров­щик UI/UX выстра­и­ва­ет эффек­тив­ный про­цесс обще­ния меж­ду чело­ве­ком и орга­ни­за­ци­ей через сайт или при­ло­же­ние.

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

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

Откры­ва­е­те, напри­мер, сайт жур­на­ла The-Village, Esquire, Meduza и срав­ни­ва­е­те по бло­кам, отли­ча­ют­ся ли у них оформ­ле­ние и пода­ча инфор­ма­ции от пода­чи на вашем сай­те. Если ваш сайт силь­но «выби­ва­ет­ся» из при­выч­ных ожи­да­ний людей, это повод заду­мать­ся.

Что­бы про­ве­рить сайт на удоб­ство, нуж­но как мини­мум посмот­реть ресурс, ана­ло­гич­ный ваше­му, но луч­ше изу­чать не толь­ко сай­ты НКО. Мож­но смот­реть на круп­ные про­дук­то­вые ресур­сы, сай­ты услуг, бан­ков, меж­ду­на­род­ные.

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

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

‒ Каким образом можно понять, что нужно обязательно переделать на сайте?

‒ В этом помо­гут Яндекс.Метрика, Гугл ана­ли­ти­ка и кар­та кли­ков (Яндекс.Вебвизор). С помо­щью этих инстру­мен­тов мож­но отсле­дить пове­де­ние поль­зо­ва­те­лей. Напри­мер, если текст не дочи­ты­ва­ют до кон­ца, про­пус­ка­ют абза­цы – при­чин это­му может быть мно­го. Этот факт нуж­но под­твер­ждать с помо­щью гипо­тез. Напри­мер, вы пред­по­ла­га­е­те, что текст не чита­ют, пото­му что у него несек­су­аль­ная пода­ча.

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

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

‒ Для чего нужно изучать поведение пользователей, как эти знания помогут улучшить сайт?

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

Сце­на­рии чте­ния поль­зо­ва­те­лей на при­ме­ре сай­та про­ек­та «Коман­да 29». Изоб­ра­же­ние: скрин­шот из пре­зен­та­ции Андрея Мисю­ре­ва.

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

‒ Могут ли сотрудники НКО самостоятельно разбираться, как устроена психология целевой аудитории?

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

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

‒ Я выде­ляю три спо­со­ба, кото­рые помо­гут улуч­шить стра­ни­цу сбо­ра. Во-пер­вых, нуж­но слож­ное делать про­стым. Зада­ча НКО – вызвать как мож­но боль­ше чувств, эмо­ций у людей. Про­сты­ня тек­ста мало кому инте­рес­на на стра­ни­це сай­та. Для мак­си­маль­но­го убеж­де­ния сто­ит исполь­зо­вать визу­аль­ный ряд, луч­ше все­го видео­кон­тент. Видео­ро­ли­ки помо­га­ют доне­сти мно­го невер­баль­ных вещей, кото­рые вли­я­ют на дове­рие. Так что по воз­мож­но­сти нуж­но заме­нить кар­тин­ки видео, а текст кар­тин­ка­ми.

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

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

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

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

Посмот­реть пре­зен­та­цию Андрея Мисю­ре­ва о том, какой долж­на быть стра­ни­ца сбо­ра средств, мож­но по ссыл­ке.

UX дизайн – 25 бесплатных инструментов в помощь веб дизайнеру

Любой дизайн, не важно, насколько он хорош, будет абсолютно бесполезным, если это не UX дизайн. Есть сотни тысяч ресурсов, которые создают умопомрачительный дизайн интерфейсов и графический дизайн и пользуются услугами лучших профессионалов с нереальным талантом, но не могут занять достойного места в сети. А все, потому что взаимодействие между сайтом и пользователями растет экспоненциально, это значит, что чтоб найти отзыв у пользователя, веб-дизайнерам необходимо заботиться о пользовательском опыте (UX – User Experience – «опыт взаимодействия»). Именно на этом этапе на помощь придут UX дизайн инструменты – отличные онлайн сервисы, которые дают подсказки касательно проектирования пользовательских интерфейсов дизайнерам. Именно о них мы поговорим более детально в этой статье.

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

UX дизайн инструменты для моделирования и проектирования мокапов и прототипов

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

Инструмент для проектирования интерфейсов Moqups

Приложение Moqups isana HTML5 предназначено для создания макетов, мокапов и прототипов. Moqups предоставляет огромное количество заготовок и шаблонов, которые можно использовать для создания основы вашего проекта. Вы можете настроить каждый компонент и задавать свои цвета, размер текста, иконки и т. д.

Wireframe

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

Pencil

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

Balsamiq

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

PowerMockup

Вы мастер PowerPoint? Тогда вам понравится этот инструмент, так как он превратит программу PowerPoint в мощный UX дизайн инструмент для создания макетов. Это означает, что вам вообще не придется изучать новое программное обеспечение. PowerMockup позволяет людям без специальных технических навыков участвовать в процессе проектирования и разработки, что, безусловно, является одним из его основных преимуществ.

Mockplus

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

UXPin

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

Solidify

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

Gliffy

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

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

Инструменты для A/B тестирования

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

Desinion

Не уверены, что создаете проект, который пользователи действительно хотят увидеть? С помощью этого инструмента A/B тестирования вы можете задать любой интересующий вас вопрос и получить реальный ответ пользователей. У инструмента есть очень полезная функция – обсуждение. Вы можете запустить обсуждение на своем сайте, чтобы привлечь пользователей к процессу проектирования. Кроме того, вы можете создавать частные обсуждения и делиться ими только с друзьями или коллегами.

Visual Website Optimizer

Это простой, но чрезвычайно мощный инструмент, который позволяет проводить A/B тестирование на высшем уровне. С его помощью, также можно проводить многовариантное тестирование и сплит-тестирование. Сегментируемые отчеты и анализ доходов также будут доступны в Visual Website Optimizer.

Optimizely

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

Инструменты для юзабилити тестирования

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

Loop11

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

Мастер Йода рекомендует:  Как добавить прелоадер в WordPress

Crazy Egg

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

Usability Tools

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

Appsee

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

Attensee

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

UserVoice

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

MouseStats

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

UX дизайн инструменты для создания прототипов и совместного проектирования

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

FileSquare

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

Notism

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

Red Pen

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

Memosort

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

Trello

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

Invision

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

Подводим итоги

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

Как сделать интерфейс «user friendly»? 17 работающих приёмов

Интерфейс – это некий «мост» между пользователем и системой. С помощью интерфейса пользователь сможет объяснить системе, чего он от неё хочет, а система это выполнит. Но что случится, если это понимание между машиной и человеком не будет достигнуто? Пользователь просто уйдёт с сайта. Вот так ведут себя интернет-пользователи по данным Online Marketing Institute:
— 85% могут уйти с сайта, если им не понравится дизайн интерфейса;
— 83% покинут сайт, если будут вынуждены делать много кликов, чтобы найти то, что им нужно;
— 40% никогда не вернутся на сайт, если им было трудно его использовать в первый раз.

Принципы хорошего интерфейса одинаковы и для веб-сайтов, и для программ, и для сервисов. Я собрала 17 основных из них (а также в конце вас ждет небольшой обзор способов тестирования интерфейса на юзабилити).

Из статьи вы узнаете:

Хороший интерфейс должен:

1. Быть интуитивно понятным.

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

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

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

Вот пример из интерфейса программы. Даже там, где значки не подписаны, вполне понятно, что они могут означать. Кнопки расположены в порядке логики — ведь каждому интуитивно понятно, что после кнопки “пауза” должна следовать кнопка “стоп”, и т.д.

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

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

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

3) есть помощь пользователю, если он “заблудился”.
Если пользователь попал на страницу 404, сразу же на ней дайте ему кратенькую инструкцию о том, что он может сделать дальше. Например, предложите ему вернуться в предыдущий раздел и поискать нужную информацию там.

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

И один наглядный пример:

2. Быть предсказуемым.

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

Пример дизайна интерфейса программы-плеера. Верхние кнопки (“предыдущий” — “воспроизвести” — “следующий”) должны выполнять именно эти функции, а ползунок менять уровень громкости.

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

А переключатель on/off понятно выглядит, когда сделан вот так:

Один из самых больших страхов дизайнеров — это то, что их сочтут неоригинальными. И поэтому они часто избегают использования техник, которые давно проверены на эффективность и работают, в пользу создания “чего-то нового и креативного”. Заниматься открытым плагиатом, конечно, не нужно. Но использовать уже знакомые пользователям модели построения интерфейса — это верный способ сделать его предсказуемым. Какие ресурсы чаще всего использует ваша целевая аудитория? Facebook, LiveJournal, Twitter, Amazon, Youtube? Используйте похожий стиль и в своем интерфейсе, чтобы они смогли почувствовать себя в привычной обстановке. Например, если вы ориентируетесь на Youtube, сделайте главное меню вертикальным и поместите его слева страницы, а строку поиска разместите по центру сверху.

3. Быть минималистическим.

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

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

4. Быстро загружаться.

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

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

5. Показывать все важные опции.

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

Пример того, какое выпадающее меню может иметь право на жизнь.Здесь при наведении курсора открываются подразделы в разделах меню, и это вполне удобно. А вот, например, кнопка “Контакты” видна сразу же, без дополнительных наведений.

Кнопки для предпочтительных действий пользователей должны выделяться на фоне других. Здесь такая кнопка “Добавить в корзину”.

6. Уметь общаться с пользователем.

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

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

7. Иметь разные стили для кнопок с разными типами действий.

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

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

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

8. Быть привлекательным.

Функциональность и удобство — это хорошо, но есть еще и элементарное “красиво/не красиво”. Любому пользователю будет гораздо приятнее иметь дело с интерфейсом, который, ко всему прочему, еще и радует глаз.

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

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

9. Давать возможность персонализации.

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

В сервисе Trello можно поменять фон на другой цвет или изображение.

А вот так позволяет персонализировать свой аккаунт Twitter:

10. Быть лояльным к ошибкам пользователя.

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

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

11. Говорить на языке пользователя.

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

12. Предоставлять оптимальное количество вариантов выбора.

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

Также это можно реализовать с помощью блока “Хиты продаж”, как показано на примере.

13. Давать мягкие подсказки.

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

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

14. Затемнять фон под модальными окнами.

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

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

15. Иметь короткие формы регистрации.

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

Мастер Йода рекомендует:  Карта сайта в форматах html и xml создание и настройка

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

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

16. Иметь простые принципы заполнения полей.

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

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

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

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

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

17. Предоставлять варианты удобного управления.

Если на сайтах мы в основном используем мышь (кроме стандартных функций “копировать/вставить” и т.д.), то в программах и приложениях зачастую бывает удобно управление с клавиатуры. Дайте возможность пользователям выбрать тот вид управления, который им больше понравится, и покажите, какая функция какой комбинации клавиш соответствует.

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

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

Тестирование сможет решить все эти проблемы. Каким образом можно его осуществить?

1. Ручным способом.

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

2. Автоматизированным способом.

Такой способ тестирования проводится с помощью специальных программных средств, которые как бы подражают действиям живого человека при ручном тестировании. Для такого тестирования не требуется участие человека, поэтому скорость его выполнения повышается, а стоимость денежных затрат снижается. Есть тут одно большое “но”. Автоматизированное тестирование не может дать 100%-результатов, так как проводится оно только по формальным признакам (тем, которые вбиты в программу), и не предоставляет возможности найти дефекты юзабилити, которые могут быть восприняты только человеком (например, цветовая гамма интерфейса).

3. C помощью фокус-групп.

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

Есть специальные сервисы, с помощью которых можно легко находить людей для проведения такого тестирования. Например, Askusers, Мудрый Тест, Usabilla.

Наглядный пример тестирования интерфейса пользователя

Дизайнер Jerry Cao опубликовал в своем блоге результаты тестирования интерфейса сайта Yelp. Это сервис, на котором можно искать разные заведения (салоны красоты, рестораны и т.д.), смотреть их рейтинги, читать отзывы.

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

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

Получилась вот такая:

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

А вот макет новой страницы:

Полную версию результатов этого тестирования смотрите здесь.

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

Интуитивная понятность

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

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

Я например с трудом представляю что может значить словосочетание «интуитивно понятная навигация». Это что-то вроде «Клик по навигации . поддерживает компактность и юзабилити сайта.» бессмысленная фраза.

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

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

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

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

Интуитивного интерфейса не существует: так зачем вообще нужен интерфейс?

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

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

Что значит быть «интуитивным»?

Словарь Merriam-Webster определяет “интуицию” как::

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

Не похоже на то, к чему можно свести взаимодействием между человеком и машиной.

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

Что их продуктам не нужно понимание и знания. Что они интуитивны.

Если вы поищите это слово в пресс-центре Apple, вы получите в результатах ссылки на iOS 8, CarPlay, Safari и т.п. Посмотрите официальный блог Google и вы найдете более 30 разных постов. Проверьте сайт Microsoft для прессы на наличие i-слова и вы увидите более 89 страниц контента!

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

Естественный? Может быть. Интуитивно понятный?… Хм.

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

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

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

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

Причина ее звонка была проста – она не смогла заняться своей любимой деятельностью, так как не работал интернет. Все, что надо было сделать, это переподключить Wi-Fi соединение. Это потребовало трех кликов на ее машине с Windows 8. Считанные секунды… если вы знаете, что делать.

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

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

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

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

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

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

Большой сдвиг парадигмы нынешнего UI состоит в изменении направления во взаимодействии человек-компьютер. До сих пор мы смотрели на персональные и мобильные компьютеры как на каталоги.

Это меняется. В будущем это будет достижимый контент, дающий нам быстрые и действенные подсказки.

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

Мы уже видим эти изменения. Apple представила интерактивные уведомления и предложение приложений в iOS 8, что упростило выполнение действий прямо на экране блокировки.

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

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

Но не только поставщики платформы, такие как Apple и Google, ищут способ свести к минимум зависимость пользователей от интерфейсов. Spotify и Uber недавно анонсировали партнерство, в рамках которого люди смогут проигрывать свои плейлисты из Spotify в машинах Uber при помощи всего одной кнопки.

Будущее интерфейсов (или их отсутствия)

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

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

Ключ в подстройке под нужды конкретного пользователя. Это требует знаний о пользователе практически на уровне близости, но не дали ли мы уже IT-компания доступ к ним?

Благодаря социальным API они знают, что мы любим. Благодаря онлайновому и мобильному шопингу они знают, что нам нужно и что доставляет нам удовольствие. Благодаря GPS, Wi-Fi и iBeacon они знают, где мы бываем и сколько времени мы там проводим. Черт, они даже могут использовать Big Data что бы понять, когда и где мы обычно занимаемся сексом.

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

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

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

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

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

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

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

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

Делаем сайт интуитивным в использовании

В этой рубрике публикуются интересные материалы, связанные с юзабилити интерфейсов Ваших сайтов.

Мифы о почтовом маркетинге

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

Когда пользователи оставляют поле поиска пустым.

Думаю, вы как и я уделяете кучу времени, пытаясь усовершенствовать каждую деталь вашего сайта: от превосходного отображения на различных устройствах, до создания занимательных страницы 404! В то же время, вы когда-то задумывались, что произойдёт, если пользователь оставит поле поиска пустым, а затем нажмёт Enter?

Разумная достаточность: что это означает при заполнении форм?

Термин “разумная достаточность” относится к склонности человека использовать минимальные ресурсы для успешного завершения работы. Это явление, которое осуществляется на подсознательном уровне: чаще всего мы даже не задумываемся о том, что сейчас нам необходимо использовать самый минимум усилий для выполнения определённой задачи.

Семёрка дизайнерских тенденций, формирующих будущее UX

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

Три устаревших UX подхода и их альтернативы

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

15 правил формирования ссылок для людей с ограниченными возможностями

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

Решаем проблемы навигации на крупных сайтах

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

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