Connect with us

Дизайн и прототипирование

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

UX-дизайнер Давид Исмайлов о сложном балансе между знакомыми и уникальными вещами в создании интерфейса.

Анна Гуляева

Опубликовано

/

     
     

UX-дизайнер Давид Исмайлов о сложном балансе между знакомыми и уникальными вещами в создании интерфейса.

В 2007 люди выстраивались в очереди, чтобы купить первый в мире iPhone. Счастливчики, получившие первые устройства, открыли коробки, включили смартфоны и… вуаля! Они сразу понимали, как его использовать. Они знали, как пользоваться новым продуктом с уникальным интерфейсом, который они только что вытащили из коробки. Как Apple создала такой интуитивный интерфейс? Ответ: оказывается, он не такой уж интуитивный.

Интуитивный = Знакомый

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

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

Для сравнения: реклама Apple к Рождеству 2013 года уже снималась вокруг эмоций людей. В видео были показаны растроганные бабушки и дедушки и дети, целующие собак, но экран iPhone ни разу не появился. Почему? К тому времени все уже были знакомы с iPhone. Он стал интуитивным.

Процесс обучения

Давайте вернемся назад во времени, к Windows 3.x. Microsoft добавил игры в операционную систему, чтобы научить пользователей использовать новые взаимодействия. Как Джаред Спул объяснил в этой статье, одно из условий знакомства с дизайном, это “обучение пользователя, но естественным образом”. Джаред рассказывает о пробеле между текущими и желаемыми знаниями и о том, как обучение помогает соединить их. Я думаю, что уровень мотивации такого обучения улучшает процесс тренировки и ускоряет его. Поэтому идея Microsoft по использованию игр для мотивации людей к изучению новых взаимодействий была хорошей.

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

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

Если мы взглянем на путь потенциального клиента Apple в 2007, мы сможем увидеть в нем применение теории социального обучения Альберта Бандуры. Вот как происходит этот процесс:

  1. Внимание. Вы должны уделить внимание, чтобы научиться чему-то по поведению другого человека. Вспомните человека в рекламе, который демонстрирует, как управлять iPhone. На этой стадии целевая аудитория учится использовать смартфон, хотя iPhone ещё даже не доступен в магазинах.
  2. Удержание. Чтобы удержать то, чему вы научились, вы должны смотреть на это поведение снова и снова. С бюджетом Apple на рекламу вы точно увидите много повторений.
  3. Воспроизведение. Здесь вы должны продемонстрировать, чему вы научились. Человека заходит в магазин, чтобы попробовать воспользоваться iPhone, который он видел по телевизору. Практика очень важна для сохранения новых знаний.
  4. Мотивация. Мотивация к повторению поведения важна, чтобы вы продолжали практику. Так владельцы iPhone демонстрируют новое устройство своим друзьям и вознаграждаются их вниманием.

Уникальный интерфейс

UX-дизайнеры часто спорят с людьми, принимающими решения в корпорации, о том, что создает отличный пользовательский опыт. На встречах, касающихся дизайна, слово “интуитивный” упоминают бесчисленное множество раз рядом со словами Apple и iPhone. Многие упускают, что если вы хотите создать следующий отличный пользовательский опыт, ваш интерфейс не может быть интуитивным или знакомым. Вы должны определить ядро вашего продукта или сервиса и найти уникальный и простой интерфейс для него.

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

Знайте ограничения своего MVP

Так как движения Lean и Agile захватили мир стартапов, пользовательские продукты начинают с небольшого минимального жизнеспособного продукта (MVP). Но это инструмент для обучения и изучения рынка, а не законченный продукт. Чтобы достичь пользователей, вам нужно определить конечный продукт, который достаточно яркий для привлечения внимания, но достаточно простой, чтобы быстро научиться.

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

Создание отличного опыта

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

Мобильные UX-паттерны, которые вы используете неправильно

 

Комментарии
Если вы нашли опечатку - выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать info@apptractor.ru.
Advertisement
Click to comment

You must be logged in to post a comment Login

Leave a Reply

Дизайн и прототипирование

Hyperion

Hyperion – встраиваемый в iOS-приложения плагин, помогающий контролировать верстку.

Леонид Боголюбов

Опубликовано

/

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

  

 

 

Комментарии
Продолжить чтение

Дизайн и прототипирование

Flawless

Леонид Боголюбов

Опубликовано

/

Flawless – система для сравнения макета и получившегося iOS-приложения.

Фактически это плагин для эмулятора iOS, в котором запускается ваше приложение. Он берет внешний sketch, jpeg, png, tiff или gif и накладывает его (прозрачно поверх или разделяя экран) на реальное приложение.

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

Комментарии
Продолжить чтение

Дизайн и прототипирование

Google исправил бургер и пиво в Android 8.1

В Android 8.1 действительно станет с едой получше – теперь эмодзи бургера в нем соответствует всем канонам.

Леонид Боголюбов

Опубликовано

/

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

В Android 8.1 с едой действительно станет получше – теперь эмодзи бургера в нем соответствует всем канонам:

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

Теперь заживем!

Emoji: больше, чем смайлики

Комментарии
Продолжить чтение

Дизайн и прототипирование

Как потерять доверие пользователей к продукту и чем это чревато?

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

AppTractor

Опубликовано

/

Автор:

Изображение с сайта Kayako.com

Когда я была маленькая, родители сдавали меня на лето на дачу к бабушке. Дама она была очень строгая и не разрешала мне включать телевизор, потому, что не доверяла ему (или мне :)) Аргумент был простой – «у телевизора даже экран бьет током, возьмешься за вилку – тебя убьет!». Ну как тут поспоришь?

Доверие – либо полное, либо его нет. Ощущением доверия измеряется человеческое счастье. Громко звучит? Тем не менее, так и есть. Человек не может чувствовать себя счастливым, если тревожится, что дверь могла не закрыться, утюг не выключился, будильник не прозвенит, календарь не сообщит о мероприятии, изменения не сохранятся и др.

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

Кривизна, кустарщина

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

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

Страница статистики сервиса товарных рекомендаций Retail Rocket

– Оля, ты – дизайнер, ты это видишь, а нормальным людям на такое плевать!

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

God is in the detail, – народная мудрость

Непонятный нейминг

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

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

Фрагмент настроек сервиса колл-трекинга CallbackHunter

Например, подсказка у первого пункта Mouse motion speed гласит Average mouse motion speed analysis. Почему оно равно 9.8, осталось для меня тайной, в чем это 9.8 измеряется – тоже. Если вы понимаете что это все значит – напишите в комментариях, пожалуйста.

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

Сообщения об ошибках

Хотела тут недавно купить биткоины через приложение Coinbase. Вместо того, чтобы провести транзакцию оно сообщило мне «It looks like an unknown error occurred while processing the buy…». Гайз, если вы сами не знаете, что за ошибка у вас произошла – как мне вам доверять свои деньги и криптовалютный кошелек? В поддержку они мне, кстати, тоже не ответили :(

Сообщение об ошибке в мобильном клиенте криптовалютной биржи Coinbase

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

Попап ошибки в системе аренды недвижимости RentLinx

Отображение состояний

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

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

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

Интерфейс PlayStation. Иконки с обозначениями кнопок в самом низу экрана.

Экран «Спасибо за заказ» в приложении доставки еды Just Eat

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

Интерфейс PlayStation. Иконки с обозначениями кнопок в самом низу экрана.

Статусы заказа и интерактивная карта сервиса доставки Glovo

Защита от дурака

Часто слышу от программистов «А зачем пользователь туда полез? Сам виноват». А вот и не так! Если продукт разрешил пользователю «туда полезть» и накосячить, то виноват продукт, вернее, команда, которая его сделала.

Есть масса способов защитить пользователя от ошибок – от масок ввода и принципа «не набирай, а выбирай» до возможности отмены.

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

Функция отмены отправки письма в Gmail

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

Раньше у меня был ноутбук Sharp, у него тоже была кнопка на клавиатуре и она работала мгновенно. Поверьте мне, когда в процессе работы ты случайно промахиваешься мимо Backspace, тыкаешь в Power и теряешь контроль над ноутбуком минут на 10 – это боль.

Платежи и все, что с ними связано

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

На скрине выше форма оплаты в сервисе покупки авиабилетов Southwest Airlines. Выбран радиобатон Credit Card. Но над формой мы видим пункт PayPal, да еще такой заметный с суммой и иконкой. Зачем? К чему он относится? Ну и вообще всего много и как-то кривовато.

Итого

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

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

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

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

Источник: https://olgashavrina.com/.

Комментарии
Продолжить чтение

Наша рассылка

Каждому подписавшемуся - "1 час на UI аудит": бесплатный ускоренный курс для разработчиков веб и мобильных приложений!

Нажимая на кнопку "Подписаться" вы даете согласие на обработку персональных данных.

Популярное

X

Спасибо!

Теперь редакторы в курсе.