Connect with us

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

Как сделать фейслифт и не превратить его в фейспалм: часть 2

Если вы решили, что пора взять в руки кисть (или молоток) и навести порядок в вашем пользовательском интерфейсе, эти рекомендации как раз для вас.

Джей лаб

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

/

     
     

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

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

Если вы решили, что пора взять в руки кисть (или молоток) и навести порядок в вашем пользовательском интерфейсе, эти рекомендации как раз для вас.

1. Слушайте своих пользователей

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

2. Создайте опрос

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

3. Настройте фокус-группы и бета-тестирование

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

4. Используйте A/B-тестирование

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

5. Подключайте аналитику

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

6. Играйте адвоката дьявола

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

7. Запомните главное правило ​​дизайна пользовательского интерфейса: форма следует за функцией

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

Комментарии
Если вы нашли опечатку - выделите ее и нажмите 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

Спасибо!

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