Connect with us

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

Дизайн-линч: новый Сбербанк Онлайн

Дуров верни стену, Яндекс верни Кинопоиск, Сбербанк верни старое приложение! Филипп Фильченко, арт-директор компании MobileUp, разбирается в новом приложении Сбербанка.

MobileUp

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

/

     
     

Дуров верни стену, Яндекс верни Кинопоиск, Сбербанк верни старое приложение! Филипп Фильченко, арт-директор компании MobileUp, разбирается в новом приложении Сбербанка.

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

Сбербанк Онлайн
Сбербанк Онлайн
Разработчик: От Сбербанк России
Цена: Бесплатно

Первая реакция пользователей:

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

Главный экран

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

Помощник

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

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

Редизайн

Редизайн получился радикальным и общество восприняло его неоднозначно. Я еще ни от кого не слышал позитивной оценки. И дизайнеры, и разработчики кричат: «раньше же было нормально», «что за жирные шрифты?», «что за кислота?» – и это еще сдержанные отзывы.

Сам я еще до конца не определился, нравится мне новая картинка или нет, но увидев редизайн впервые, я был в каком-то дизайнерском шоке. Хотя Сбербанк уже давно перестал ассоциироваться с консервативной компанией, я не представляю, как совет директоров в пиджаках и галстуках принимает эту анимированную dribbble концепцию. Это же дикость! :) То есть это круто, что руководство доверилось дизайн-отделу настолько, что пропустило такую версию в массы. Да, может с яркостью и размерами местами пережали, но если присмотреться, то все разделы причесаны, все элементы и графика разработаны с нуля и выдержаны в едином стиле, анимации выверены и смотрятся в меру эффектно. В предыдущей версии было видно, что новые разделы грубо внедрялись в основной дизайн. Сейчас «швов» не видно, и приложение выглядит целостно. Большой группе ЦА не угодили, но работу проделали колоссальную.

Итог

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

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

3 Comments

  1. Александр Токмаков

    07.04.2017 at 10:19

    Какой недоделанный линч. Где старые скрины, где разбор остальных экранов. Поделка какая-то, а не разбор

    • AppTractor

      07.04.2017 at 10:22

      Гм. Зачем старые, если мы разбираем новые. Про остальные – нужно ли разбирать все экраны, если выводы можно сделать по нескольким?

      • Александр Токмаков

        07.04.2017 at 10:43

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

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

Спасибо!

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