Какие показатели влияют на пользу интерфейса
Перейти к содержимому

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

  • автор:

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

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

1 Один столбец вместо нескольких

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

image

2 Подарите что-либо вместо того, чтобы сразу пытаться продать

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

image

3 Объединяйте схожую функциональность, а не фрагментировать UI

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

image

4 Предоставьте доказательства от других людей, а не только рассказ о себе

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

image

5 Повторяйте призыв к основному действию

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

image

6 Хорошо различимые контрастные стили вместо размытых

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

image

7 Рекомендации вместо нескольких равнозначных вариантов

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

image

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

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

image

9 Выделяйте аудиторию сервиса, а не предлагать её всем подряд

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

image

10 Будьте решительными

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

image

11 Контраст вместо однообразия

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

image

12 Вместо общего описания – конкретика о происхождении вашего сервиса

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

image

13 Поменьше полей для ввода

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

image

14 Показывайте возможности, а не прячьте их

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

image

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

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

image

16 Удерживайте внимание и не забрасывайте ссылками

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

image

17 Отображайте текущее состояние услуги

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

image

18 Кнопки с объяснениями преимуществ вместо обычных функциональных

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

image

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

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

image

20 Сразу показывайте поля ввода, а не прячьте их на отдельной странице

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

image

21 Плавная анимация вместо внезапных выпрыгиваний

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

image

22 Постепенное вовлечение пользователя

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

image

23 Меньше рамок и границ

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

image

24 Продавайте выгоду, а не функционал

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

image

25 Разработайте дизайн для случая, когда данных нет, а не только для тех случаев, когда данных очень много

В списках бывает 10000 элементов, а бывает и 10, 1 и даже 0. Обычно данные накапливаются, и наборы данных идут от нуля до нескольких пунктов и далее. Часто дизайнер забывает о тех случаях, когда данных ещё нет и нечего показывать. В этом случае есть риск оттолкнуть пользователя. Когда он смотрит на ваше приложение и видит просто пустое место без всяких подсказок – вы теряете свой шанс. Нулевое количество данных – отличный шанс начать обучение пользователя, показав ему, что делать дальше. Хороший интерфейс – масштабируемый интерфейс.

image

26 Подтверждение по умолчанию

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

image

27 Последовательный интерфейс, не требующий постоянного обучения

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

image

28 Умные элементы управления вместо лишней работы

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

image

29 Стандарты и соглашения вместо изобретения велосипеда

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

image

30 Предлагайте избегать потерь вместо рекламы приобретений

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

image

31 Визуальная иерархия вместо однообразия

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

image

32 Группируйте элементы по смыслу

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

image

33 Проверка ввода на месте

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

image

34 Прощающие поля ввода

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

image

35 Подгоняйте пользователя

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

image

36 Дефицит вместо изобилия

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

image

37 Узнавание вместо вспоминания

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

image

38 Элементы большего размера

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

image

39 Уменьшайте время загрузки

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

image

40 Горячие клавиши, а не просто кнопки

Когда ваш продукт используется часто, неплохо бы вспомнить о продвинутых пользователях, которые возвращаются к вам и проводят с ним много времени. Люди ищут способы исполнять повторяющиеся задачи быстрее. После запоминания горячих клавиш скорость использования интерфейса кардинально вырастает. Например, Gmail, Twitter and Tumblr предлагают клавиши J и K как навигацию «предыдущий» и «следующий». В кнопках нет ничего плохого, но всегда хорошо иметь дополнение к ним.

image

41 Идите от больших чисел к меньшим

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

image

42 Опережающий прогресс вместо чистого листа

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

image

43 Постепенное раскрытие действий

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

image

44 Небольшие обязательства

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

image

45 Ненавязчивые запросы вместо модальных окон

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

image

46 Многофункциональные элементы управления вместо нескольких отдельных элементов

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

image

47 Подписи к иконкам

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

image

48 Естественный язык вместо сухого текста

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

image

49 Играйте на любопытстве

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

image

50 Заверяйте пользователей

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

image

51 Ценовые иллюзии вместо обычных цен

Можно позволить людям судить о вашем продукте самостоятельно, а можно сделать это за них. Используя иррациональность мышления, покажите ваши цены так, чтобы они выглядели привлекательнее. Используйте слова «всего», «доступный», «недорогой». Цену можно разбить на части – например, 30 копеек за страницу вместо 300 рублей за книгу, или сто рублей в день вместо 3000 в месяц. Также используйте известный трюк с ценами, заканчивающимися на «9». Показывайте меньше цифр – 300 вместо 300,00.

image

52 Благодарите вместо простой констатации окончания сделки

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

image

53 Считайте всё сами, не заставляйте пользователя делать это

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

image

54 Подтверждайте свободу выбора пользователя

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

image

55 Меняющиеся вознаграждения

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

image

56 Управляйте вниманием пользователя

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

image

57 Дружественные и понятные сравнения

Часто нужно сравнить изменившийся контент с предыдущим или несколько продуктов между собой. Можно сделать такие сравнения более понятными и читаемыми. Во-первых, ограничить количество сравниваемых предметов двумя, желательно расположив их поближе друг к другу. Во-вторых, индикация «улучшенных» или «самых свежих» вещей облегчает выбор. В-третьих, чётко покажите, какие свойства поменялись, а какие остались старыми. То есть, что добавлено (или улучшено), что убрано (или ухудшилось), и что осталось тем же.

image

58 Наборы предметов вместо отдельных

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

image

Интерфейс сайта: понятие, элементы, этапы разработки

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

  1. Понятие интерфейса сайта
  2. UI-дизайн интерфейса
  3. UX-дизайн интерфейса
  4. 7 главных требований к интерфейсу сайта
  5. Основные элементы интерфейса сайта
  6. Подготовка к созданию интерфейса
  7. 9 этапов разработки интерфейса сайта
  8. 3 варианта юзабилити-тестирования
  9. 11 полезных советов по созданию хорошего интерфейса сайта
  10. 7 основных трендов в дизайне интерфейсов

Чек-лист: Как добиваться своих целей в переговорах с клиентами
Скачать бесплатно

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

Понятие интерфейса сайта

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

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

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

Понятие интерфейса сайта

Интерфейс веб-сайта выполняет такие функции:

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

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

UI-дизайн интерфейса

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

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

Первый тип предполагает ввод или «input» и дает возможность человеку управлять системой. Второй тип – это вывод или «output», в рамках которого устройство выдает результат действий пользователя.

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

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

UI-дизайн интерфейса

Далее речь пойдет о тех, которые имеют отношение к компьютерам:

  • Графический интерфейс пользователя – в данном случае человек вводит информацию при помощи клавиатуры и мыши, а система отображает ее на мониторе компьютера.
  • Веб-интерфейс, или WUI, представляет собой совокупность средств, позволяющих взаимодействовать с сайтом или приложением через браузер. Новые реализации основаны на Java, JavaScript, AJAX, Adobe Flex, Microsoft.NET и подобных технологиях. Таким образом достигается контроль в режиме реального времени, поэтому нет необходимости в обновлениях, что и лежит в основе HTML-браузеров.
  • Административные веб-интерфейсы также называются панелью управления и применяются для работы с серверами и удаленными компьютерами.
  • Сенсорные экраны – дисплеи, ввод на которые осуществляется за счет касания пальцами или стилусом. Подобные устройства встречаются чаще всего в мобильных устройствах, уличных автоматах, пр.

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

Речь идет о настоящем ремесле, так как результатом проектирования интерфейса сайта является красивая, конкретная система, создаваемая при помощи навыков, знаний, методов и опыта. Дизайнеры пользовательского интерфейса чаще всего применяют «Photoshop», «Illustrator», «Fireworks», «Cinema 4D», «ZBrush», не забывая также о привычной ручке и бумаге. Но не получится добиться успеха в сфере разработки интерфейсов, не зная о UX.

UX-дизайн интерфейса

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

UX является непостоянным понятием, так как его параметры меняются вместе с системами, обстоятельствами, технологиями и проч.

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

UX-дизайн интерфейса

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

Прототипы могут быть:

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

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

Достаточно часто сложно отделить UI от UX, так как эти явления тесно связаны друг с другом. А интерфейс сайта нередко становится составляющей опыта взаимодействия. Однако нужно понимать, что UX может существовать и в отсутствие пользовательского интерфейса.

7 главных требований к интерфейсу сайта

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

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

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

7 главных требований к интерфейсу сайта

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

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

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

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

Основные элементы интерфейса сайта

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

Главная страница

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

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

Основные элементы интерфейса сайта

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

Меню, навигация

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

  • Кликабельный логотип. Нажатие на него открывает начало главной страницы – таким образом блок «Главная» оказывается не нужен в меню.
  • Хедер, или шапка сайта. Она может содержать в себе меню, контакты, поле для поиска, выбора языка, города. Здесь должны быть представлены направления, играющие для компании ключевую роль, такие как «Доставка» и «Возврат».
  • Активный пункт. Позволяет человеку понять, какой из разделов портала у него открыт. Для выделения можно менять цвет, подчеркивать или зачеркивать пункт, делать насыщеннее, прозрачнее.
  • Кнопка «Наверх» переносит в начало страницы, лишая посетителя необходимости пролистывать ее вручную. Данный элемент может выглядеть как слово, стрелка, либо иметь иной формат.
  • Хлебные крошки. Так называют путь к разделу, в котором находится посетитель. Обычно выглядит следующим образом: главная страница — раздел — подраздел — страница. Данный компонент стоит ввести в структуру интерфейса сайта, если у портала сложная организация и много разделов.
  • Перелинковка. Попробуйте вынести на страницу товара блок с подборкой сопутствующих продуктов «Вам может понравиться», предложите просмотреть другие страницы.
  • Навигация в формате плитки. Отобразите весь перечень предложений компании с картинками и ссылками. Человек сможет кликать по товарам и переходить в их карточки.
  • Фильтры и сортировка. Они упрощают поиск нужного продукта.

Фильтры и сортировка.

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

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

О компании

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

Ключевые компоненты:

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

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

Товары и услуги

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

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

Описание проекта, товара

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

Отзывы об услугах

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

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

Форма для сбора данных

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

Кейс: VT-metall

Узнай как мы снизили стоимость привлечения заявки в 13 раз для металлообрабатывающей компании в Москве

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

Вопросы, ответы

Здесь вы отрабатываете страхи, сомнения потенциальных покупателей. Публикуйте наиболее популярные вопросы и давайте подробные ответы.

Блог, новостной раздел

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

Блог, новостной раздел

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

Контактная информация

Этот блок интерфейса сайта позволяет связаться с компанией и содержит в себе адрес, e-mail, телефон, карту проезда в офис и даже форму обратной связи.

Футер

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

Подготовка к созданию интерфейса

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

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

Подготовка к созданию интерфейса

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

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

9 этапов разработки интерфейса сайта

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

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

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

– зайти в профиль;

– кликнуть по аватарке;

– подтвердить/изменить кадрирование изображения;

9 этапов разработки интерфейса сайта

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

В приведенном примере можно сделать сохранение автоматическим, а обрезание— опциональным.

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

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

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

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

Создание прототипа

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

Рекомендуемые статьи по данной теме:

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

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

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

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

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

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

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

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

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

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

3 варианта юзабилити-тестирования

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

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

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

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

3 варианта юзабилити-тестирования

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

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

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

11 полезных советов по созданию хорошего интерфейса сайта

  1. Попробуйте сделать макет с одной колонкой

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

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

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

11 полезных советов по созданию хорошего интерфейса сайта

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

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

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

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

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

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

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

Не скрывайте возможности

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

Любой лишний клик по ссылке чреват тем, что человек уже не вернется на сайт. Чем меньше таких линков, тем выше вероятность, что пользователь воспользуется кнопкой CTA.

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

Скачайте полезный документ:
Чек-лист: Как добиваться своих целей в переговорах с клиентами

7 основных трендов в дизайне интерфейсов

Сдержанная анимация

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

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

Изображения во весь экран

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

Изображения во весь экран

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

Неоморфизм

Название тренда состоит из слов «нео», то есть новый, и «скеоморфизм».

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

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

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

Беспринципный отказ от правил

Данный тренд в оформлении интерфейсов сайтов вобрал в себя эстетику стрит-арта и анти-дизайнерского брутализма.

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

Беспринципный отказ от правил

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

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

Вариативные шрифты

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

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

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

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

Крафт

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

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

Гибкие дизайн-системы

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

Гибкие дизайн-системы

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

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

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

Как улучшить работу отдела продаж и повысить его эффективность

Челпанов М.

Улучшение отдела продаж — задача, которая в каждом бизнесе решается по-своему. Технически можно принести менеджерам обновленный план +100% к продажам и сказать «делайте». Однако сложно представить, чтобы такой подход сработал в реальной жизни.

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

Обычно при оценке KPI отдела продаж указывают метрики, основанные на методиках «большой четверки» консалтинга: PricewaterhouseCoopers, Ernst and Young, Deloitte и KPMG. Это рабочие стратегии, включающие цели бизнеса, глобальные планы и т.д. Такой подход доказал свою эффективность, но он не всегда оправдан для малого и среднего бизнеса в России. Поэтому будем опираться на рекомендации Высшей школы экономики. Выделяют 4 группы показателей.

1. Метрики активности менеджеров

Как управлять продажами?
Курс для руководителей отделами продаж, 252 ак. часа

Действия, которые напрямую влияют на результативность сотрудника (уместно назвать «жесткими навыками»):

  • целевые действия: количество звонков, презентаций и встреч;
  • число действий относительно количества закрытых сделок;
  • среднее число действий для закрытия одного лида;
  • прибыльность действий работника для компании.

2. Сервис и работа с клиентами

Действия менеджера по увеличению LTV — общей прибыли, которую бизнес получает на полный цикл сотрудничества с клиентом. Сюда можно отнести:

  • среднее время отклика на заявку;
  • количество повторных сделок;
  • отток/удержание клиентов.

3. Коммерческие показатели

Эти метрики раскрывают результативность менеджера на длинной дистанции (месяц, квартал, год):

  • средний цикл продаж;
  • окупаемость инвестиций (ROI);
  • дебиторская задолженность.

4. Показатели отдела

Комплексные метрики результативности отдела и его руководителя:

  • рост продаж относительно конечной цели;
  • количество закрытых сделок на отдел/менеджера относительно цели;
  • стоимость закрытых сделок за месяц/отчетный период относительно цели.

Факторы, которые влияют на продажи

Отдел продаж — важное подразделение бизнеса, но не единственное. На финансовые показатели компании влияют и другие факторы. Рассмотрим основные.

Связка маркетинга и продаж

Воронка, которая объединяет продажи и маркетинг

Когда план закрывается ниже прогноза, маркетинг обвиняет продажи, и наоборот. Такого быть не должно, ведь направления работают в связке. В качестве решения бизнес вводит созависимый показатель ответственности — конверсию из лида в сделку. В B2B со средним циклом сделки оптимальной считается конверсия на уровне 10%. На точках продаж в B2C стремятся к 20%.

Воронка, которая объединяет коммерческий блок

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

Комплексная ситуация в бизнесе

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

Маркетолог и консультант Игорь Манн предложил чек-лист основных «болячек» бизнеса, отталкивающих клиентов:

  • По чек-листу оцените, все ли процессы в вашей компании налажены и работают на нужном уровне.

Репутация бизнеса

Больше 5 негативных отзывов в поисковой выдаче способны отпугнуть до 70% потенциальных клиентов. При этом вредят не сами отзывы, а отсутствие реакции на них. Откроем Google-карты или маркетплейс — мало кто отвечает авторам негативных отзывов.

Нейтрализовать негативный отзыв поможет правильная обратная связь.

  • Искусству ответа на жалобы можно научиться по книгам М. Ильяхова «Новые правила деловой переписки» и Д. Барлоу, К. Меллер «Жалоба как подарок».

Как улучшить работу отдела продаж

Как улучшить работу отдела продаж

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

Подобрать правильную мотивацию

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

Гибкое решение — использовать денежную мотивацию, основанную на коэффициентах. Каждому элементу КПД (коэффициент полезного действия) назначается некий удельный вес. Все показатели складываются и добавляются в формулу: Доход сотрудника = оклад + % от оборота x коэффициент KPI

Пример коэффициента KPI:

  • 2% для менеджеров, выполнивших план в 100–300 тыс. руб.
  • 5% для менеджеров, выполнивших план в 301 – 500 тыс. руб.
  • 10% для менеджеров, выполнивших план более 500 тыс. руб.

Организовать качественное обучение

Объем рынка корпоративного обучения в России ежегодно составляет более 73 млрд руб., следует из исследования консалтинговой компании TalentCode. Как правило, бизнес стремится улучшить отдел продаж и сопутствующие подразделения. Идет «гонка вооружений», выигрывают самые «прокачанные» команды продаж.

Остаться конкурентоспособным поможет организация обучения внутри компании. 3 фактора, которые помогут этого добиться:

  1. Мотивация на обучение. Сотрудник получит повышение, если продемонстрирует владение определенным пулом знаний.
  2. Доступ к обучающим материалам. Бесплатные сервисы вроде Notion позволяют делиться полезными материалами с коллегами.
  3. Тренинги и семинары. Мотивируйте сотрудников на участие в профильных конференциях.

В идеале сотрудники будут чувствовать стабильность, ведь бизнес вкладывается в их развитие.

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

Проводить регулярные встречи

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

На подобных встречах РОП помогает менеджеру расставить приоритеты в стоящих задачах и исправить ошибки.

Пример диалога РОПа и менеджера на личной встрече

Пример диалога руководителя отдела и менеджера

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

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

Распространенная ситуация: у менеджера к началу месяца скапливаются старые клиенты и появляются новые.

  1. До расчета зарплаты еще далеко, поэтому сотрудник закрывает наиболее горячих клиентов, которые сами требуют счета и договоры. Переговоры с остальными движутся медленно.
  2. К концу месяца становится очевидно: план не выполняется. Менеджер вспоминает о клиентах, с которыми работал не так активно, начинает их «дожимать». Именно поэтому покупателям легче выбивать скидки в конце месяца.
  3. Результат: часть клиентов уходит к конкурентам, ведь менеджер не уделял им время. Более лояльные раздражаются резкой сменой тона — они могут уйти или оставить негативный отзыв.

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

Увольнение неэффективных сотрудников

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

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

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

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

Что мешает улучшить работу отдела продаж

Ошибки в работе над улучшением результатов отдела продаж

Усложненный KPI

Формула расчета пенсии. Расчет KPI менеджера по продажам должен быть понятнее

Плохо, если KPI напоминает формулу расчета пенсии. Фото lenta.ru

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

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

Игнорирование CRM-систем

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

Интерфейс Контур.CRM — системы для малого и среднего бизнеса

Интерфейс Контур.CRM — системы для малого и среднего бизнеса

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

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

Стремление решить все проблемы разом

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

П — привлечение клиентов

Р — работа с ними

У — удержание действующих

В — возвращение клиентов

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

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

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

Разработка высокотехнологичных человеко-машинных интерфейсов. Часть 1

Выстаука RUPLASTICA 24

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

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

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

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

Рис. 1. Высокопроизводительный человеко-машинный интерфейс

Рис. 1. Высокопроизводительный человеко-машинный интерфейс

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

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

Безопасность и отчет в собственных действиях

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

Стандарт ISO 9241-11-1998

Этот стандарт задает эргономические требования к офисному оборудованию с визуальными терминалами (англ. VDT — visual display terminal) и определяет его пригодность к использованию как сочетание эффективности, производительности и удовлетворенности при его эксплуатации в рамках системы. Этот же стандарт описывает и показывает такие измерения пригодности, как легкая обучаемость, простота запоминания и низкий уровень ошибок. (Аналогичный документ РФ — ГОСТ Р ИСО 9241-11-2010 «Эргономические требования к проведению офисных работ с использованием видеодисплейных терминалов (VDT). Часть 11. Руководство по обеспечению пригодности использования»). Стандарт предназначен для применения при проектировании, разработке, оценке, приобретении продукции и обмене информацией о пригодности ее применения.

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

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

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

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

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

Рис. 2. Использование графиков и диаграмм поможет операторам оценить поведение переменной во времени

Рис. 2. Использование графиков и диаграмм поможет операторам оценить поведение переменной во времени

Улучшение интерфейса в части удобства его использования

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

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

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

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

Рис. 3. Графическое представление аналоговых значений

Рис. 3. Графическое представление аналоговых значений

Согласованное использование цвета

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

Рис. 4. Использование цветов для указания критических данных и соответствующих статусов в процессе

Рис. 4. Использование цветов для указания критических данных и соответствующих статусов в процессе

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

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

Во второй части статьи основное внимание будет уделено точности восприятия в зависимости от контекста, доступности, визуальной иерархии, сравнению анимации и статической индикации, а также 2D- и 3D-экранов.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *