Сделал редизайн — потерял миллиард

в 21:15, , рубрики: design, edisonsoftware, redesign, tech, UI, UX, Блог компании Edison, графический дизайн, интерфейсы, Разработка веб-сайтов

Исследуем эпичные провалы редизайна и мотаем на ус.

image

Менеджер по продукту заходит в отдел дизайна и заказывает редизайн сайта. «Наш сайт выглядит таким старым! У всех наших конкурентов есть более яркие сайты. Давайте перепроектируем его. Кнопки с разноцветными тенями — это будущее!»
Дизайнер: «Хорошо, давайте начнем с тестирования юзабилити»
ПМ: «У вас есть 3 недели, и я хочу, чтобы все цвета были заменены на ярко-розовый, ярко-синий или оранжевый».

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

image

Skype Redesign 2018

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

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

Почему редизайн проваливается

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

Редизайн навигации Snapchat’a

image

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

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

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

image

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

image

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

image

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

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

image

image

image

Этот твит стоил Snapchat миллиард долларов

Редизайн Snapchat был катастрофой. Ежедневная посещаемость сократились на 2% до 188 миллионов с 193 миллионов. Показы рекламы и доход снизились на 36%. Многие издатели контента поменяли платформу и стали называть Instagram своим новым домом.

Через 6 месяцев после внедрения редизайна Snapchat внес изменения и объявил об перестановке. Истории друзей перемещены вправо вместе с историями издателей. Цитата:

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

Редакция меню Пуск в Windows 8

Теперь давайте посмотрим, как Microsoft перепроектировала их меню «Пуск» в Windows 8. Давайте попробуем открыть панель управления в Windows 7 и 8.

Чтобы открыть панель управления в Windows 7, вам нужно нажать на кнопку «Пуск», чтобы вывести список всех приложений. И тогда вы нажимаете на панель управления.

image

В Windows 8 вы уже начинаете с меню «Пуск». Хороший старт, верно? Неправильно. В перечисленных приложениях нет панели управления. Также нет возможности перечислить все программы.

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

image

Этот основанный на жестах процесс доступа к панелям был совершенно чужд пользователям при запуске Windows 8. Windows не предоставляла никакой дополнительной информации, чтобы помочь пользователям открыть меню чудо-кнопок. Даже после того, как пользователи обнаружили Charms меню, прибегая к помощи Google или своих друзей, им все равно было неудобно с ним. Жесты и зависания были новыми понятиями для ОС.

Все ли редизайны плохие?

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

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

Редизайн навигации в Facebook

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

image

И Android, и iOS реализовывали навигацию одинаково с одинаковыми панелями действий.

image

Но база мобильных пользователей подтягивалась, и пользователи, начинающие с мобильного, понемногу затеняли пользователей, использующих десктопную версию. Мобильные социальные сети, такие как Instagram, Snapchat и Vine (rip) набирали популярность. Было совершенно очевидно, что в будущем люди будут проводить больше времени за своими телефонами, чем за компьютерами.

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

image

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

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

Уроки

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

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

Редизайн предназначен для решения проблем с конкретными бизнес-ограничениями и требованиями.

image

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

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

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

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

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


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

Автор: rishat_edison

Источник

* - обязательные к заполнению поля