Денис Кортунов. Беспощадный редизайн приложения. РИФ-Воронеж 2016
•Download as PPTX, PDF•
0 likes•296 views
Реальный кейз как мы делали полнейший редизайн Acronis True Image (Windows + Mac). Как мы сделали дизайн для 20-летних девочек, а пользуются им 50-летние мальчики. Гипотезы, концепты, вот это всё...
Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (13)
Similar to Денис Кортунов. Беспощадный редизайн приложения. РИФ-Воронеж 2016
Similar to Денис Кортунов. Беспощадный редизайн приложения. РИФ-Воронеж 2016 (20)
Денис Кортунов. Беспощадный редизайн приложения. РИФ-Воронеж 2016
- 1. ДЕНИС КОРТУНОВ СТАРШИЙ ДИРЕКТОР ПО ДИЗАЙНУ БЕСПОЩАДНЫЙ РЕДИЗАЙН ПРИЛОЖЕНИЯ
- 7. прошлое
- 8. Acronis True Image 2010
- 9. Acronis True Image 2011
- 10. Acronis True Image 2013
- 11. редизайн
- 12. Проблемы • Устаревший дизайн • Интерфейс выглядит слишком сложно • Сделано для Windows XP • Не базируется на сценариях • Много лишних элементов
- 13. Цели • Каждый может пользоваться • Поддержка нового стиля бренда Acronis • Простой и чистый интерфейс • Рекомендации и умные настройки • Современный стиль • Поддержка touch-устройств • Версия для Mac OS X
- 14. исследование
- 15. Мария 20, Студент Вениамин 28, Сисадмин Елена 32, Журналист Вячеслав 62, Пенсионер Персоны
- 18. Реальные пользователи Nelson Alexander David Nick Peter Richard Lucas Max
- 19. Интервью с нашими реальными пользователями
- 20. стратегия
- 21. Взаимодействие с пользователем Продукт рекомендует важные данные для бекапа и подходящие хранилища Пользователь должен знать, что продукт работает и его данные под защитой Отзывчивый интерфейс, анимации как часть навигации Бекап в один клик: умные настройки по умолчанию
- 22. Баланс требований Чего хочет бизнес Чего хочет пользователь Решения в продукте
- 23. Дизайн-стратегия 1. Следовать фирменному стилю Acronis 2. Консистентность очень важна (иконки, цвета, шрифты) 3. Нативные приложения с одинаковыми функциями 4. Большое внимание тексту в интерфейсе 5. Максимально использовать контекст 6. Наступило время делать крутой дизайн
- 24. «Торговля» с менеджерами и разработчиками
- 25. поиск решения
- 28. Показываем все диски сразу
- 29. Список бекапов
- 30. Список бекапов
- 31. Уровень защиты
- 32. Версия для Mac OS
- 33. что главное?
- 34. что? куда?
- 37. Acronis True Image for Windows
- 38. Выбор данных для резервного копирования
- 39. UI Kit
- 41. Версия для Mac OS
- 42. ошибки
- 43. Большинство пользователей привыкли к старому интерфейсу
- 44. Убрали синий фон в Mac OS версии
- 45. Адаптация интерфейса для Windows 10
- 49. A superb product! I've been using it for more than 15 years. PAUL HANSKNECHT forget others… JOHN RUSHWORTH Quality as usual! JERRY LYLES Exactly what we needed in double quick time! DEBBIE THEOBALD Very user friendly… RAYMOND FRISON Very fast after set up. DONNA SMILEY Excellent software - performs as expected. DAVID SWIFT Easy to use and can get you out of a disaster! PETER HUGHES Does what it is supposed to without problems JOHN LINNELL Excellent - would recommend! MO WILKES
- 50. спасибо!
Editor's Notes
- Всем привет! Сначала расскажу вам пару слов о себе. Меня зовут Денис Кортунов. Я занимаюсь дизайном интерфейсов уже около 15 лет. Можно сказать, что я начал еще тогда, когда это не было мейнстримом. Около 12 лет я проработал в собственной студии Турбомилк, где делал дизайн иконок, сайтов, приложений для клмпаний по всему миру. Потом я решил пойти работать в продуктовую компанию. Кстати, а есть в зале дизайнеры? Кто работает в агенстве или студии? А кто работает в продуктовых компаниях? Почему я перешел из собственного дела в чужую компанию? Потому что хотелось доделать дело до конца, иметь полный контроль, иметь возможность что-то переделать. Раньше мы делали только визуальный дизайн, но весь юзер экспириенс делался на стороне клиента.
- Итак, сейчас я работаю в компании Acronis. Три года назад я начал как продуктовый дизайнер и работал над интерфейсами. Сейчас я отвечаю за весь дизайн в компании. В отделе дизайна у нас сейчас 12 дизайнеров из них 6 человек работают над интерфейсами.
- Немного статистики. Приложением, про которое я сегодня буду рассказывать, пользуются 5 миллионов человек. В основном нашими решениями пользуются в германоговорящей Европе, США, Японии. У нас 23 офиса по всему миру. Доля России очень небольшая, но не потому что здесь никто не теряет данные, а потому что пока у населения нет привычки покупать программное обеспечение.
- Еще один интересный факт про Acronis. Буквально месяц назад мы стали спонсорами гоночной команды Формулы 1 Toro Rosso. Когда в следующий раз будете смотреть трансляцию орчередной гонки – вы знаете за кого болеть. Тем более, что там выступает единственный российский пилот Даниил Квят. Кстати, пару лет назад я нарисовал новый логотип компании и мне очень приятно, что мой дизайн украшает болид Формулы 1 и сотни миллионов людей видят мою работу.
- Здесь представлены некоторые наши продукты. Часть из них еще в разработке. Мы занимаемся системами управления и защищенного доступа к данным, резервным копированием, мониторингом, облачными хранилищами и всем что связано с данными.
- Сегодня я расскажу вам про редизайн нашего самого знаменитого продукта – Acronis True Image. Он позволяет делать дисковые или файловые бекапы в разные места: на локальные или сетевые диски и в наши облачные хранилища. Уже много лет миллионы людей используют это решение для того чтобы не потерять свои данные.
- Вернемся в прошлое. Впервые Acronis True Image бы выпущен в 2003 году. Довольно давно. Насколько я знаю, сейчас уже 19 версия продукта. Я поленился и не смог найти старых скриншотов продукта в хорошем качестве. Но чтобы вы понимали, что такое 2003 год – сервис YouTube (который был всегда) появится еще через 2 года – в 2005 году.
- Но я нашел скриншоты версии 2010. Основа продукта – закладочки слева. Можно делать бекап, восстанавливать данные и все такое. Очень много разных ссылочек и не совсем понятно что происходит.
- Далее 2011 год. На мой взгляд, навигация стала более запутаной. Но видна попытка понять сценарии использования продукта. Из плюсов – больше внимания плашкам с бекапами (вот они внизу), стало понятно что происходит. Но на экране опять же – много-много кнопочек и ссылок.
- Это версия 2013 года. На мой взгяд, здесь достаточно уместно использован микросовтовский риббон, весьма модный в то время. Закладочки и тулбар работают очень хорошо. Основной фокус на плашки с бекапами, которые имеют компактный вид, но могут раскрываться. Сейчас я понимаю, что это хороший и удобный интерфейс.
- Но вернемся к основной теме. Как вы помните, она звучит как «Беспощадный редизайн». Заметьте, я не говорю «бессмысленный и беспощадный».
- Я выявил следующие проблемы в текущей версии. Их нужно было исправить.
- Ставить цели – очень полезно. Мы попробовали сделать себе небольшой план. Основная задача редизайна – привлечь новых пользователей. Сделать очень простой продукт, которым могли бы пользоваться даже неопытные пользователи. Еще важный момент: в компанию пришел новый генеральный директор Сергей Белоусов. Он хотел «взбодрить» компанию после не очень удачного американского менеджмента. Сергей понимал важность хорошего дизайна. Мы начали с того, что сменили логотип и фирменный стиль Acronis. Далее, нужно было сделать ЗАМЕТНЫЕ изменения в продукте, чтобы они были заметны и все поняли, что это обновленный продукт.
- Раньше я считал себя очень умным и считал, что исследования – для слабаков. Но жизнь научила меня тому, что перед тем как что-то сделать, бывает полезным сначала подумать.
- Мы начали в выдуманных пользователей, которые могли бы пользоваться нашим продуктом. Особенные надежды мы возлагали на Марию и Елену. Кроме того, что они симпатичные, именно таких пользователей мы хотели бы заполучить.
- Мы продумали сценарии для каждой персоны. Какими устройствами они пользуются, какие данные у них хранятся, какие риски с этим связаны. Далее мы придумали каким должен быть наш продукт, чтобы удовлетворить этого пользователя.
- Мы придумали некие уровни защиты данных. Дело в том, что не все данные одинаковы. Есть восполнимые данные, например, операционная система, приложения, фильмы и музыка из интернета. Если вы их потеряете, то потом потратив время, вы можете их восполнить. Есть уникальные данные, например, фотографии вашей семьи, какие-то ваши документы – если вы их потеряете, то никогда больше не сможете их восстановить. Именно поэтому в первую очередь делать резервное копирование именно невосполнимых данных.
- Так же мы поговорили с нашими реальными пользователями. Как видите, к сожалению, Марины и Елены тут нет...
- Мы узнали как они пользуются продуктом, какие у них проблемы, какие у них устройства. Меня удивило насколько наши пользователи были дружелюбными и желали помочь. Они предлагали нам много своих идей: какие-то фичи. Но важно было не воспринимать эти предложения напрямую, а понять какие проблемы за этим стоят. По результатам исследования, мы сделали довольно большой документ с разной аналитикой, но, к сожалению, этот документ для внутреннего использования и я не могу его сейчас показать.
- Мы решили продумать стратегию того, как мы будем менять продукт
- 4 важных принципа
- Кроме желаний пользователей и собственных дизайнерскиз амбиций, очень важно учитывать запросы бизнеса. Нам очень важно продавать наш продукт и зарабатывать на нем деньги. Как раз в то время мы сделали свое собственное облачное хранилище. Разместили свои серверы по нескольким дата-центрам по всему миру. Совершенно логичным было продвигать наше «облако» не только на уровне маркетинга, но и прямо в интерфейсе продукта.
- Мы сформулировали дизайн-стратегию.
- Раз секция называется «дизайн в рамках ограничений», приведу пример из своего опыта. Это касается коммуникации и ограничений в головах дизайнеров. Я придумал это сам, но уверен, что потобная штука уже где-то и как-то описана. Суть в следующем: то что нарисовано это решение, которое учитывает все ограничения: время, технологии, коммуникации. Но правильной стратегией будет сделать больше и лучше. Понятно, что такое решение сделать не возможно. Но существуют разные направления торговли: время, квалификация, технические ограничения – по каждому из направлений можно торговаться. Таким образом, финальное решение может быть больше и лучше, чем изначальные требования.
- Ну наконец-то мы расчехлили любимые графические редакторы и начали рисовать концепты приложения.
- Мы сконцентрировались на самой важной части продукта – создании и управлении резевным копированием. Здесь некий визард, который исходит из того какие хранилища данных у вас есть.
- Сдесь мы решили отталкиваться от данных, которые есть у пользователя
- Здесь мы решили угодить нашим продвитнутым пользователям – показывать диски партиции. Вылядит очень сложно и профессионально.
- Вот список работающих бекапов, как и в предыдущей версии, здесь мы показываем некие карточки, которые показывают что куда и когда копируется
- Здесь показан даже не редизайн, а так называемый рескининг старого приложения. Сделали тоже самое, но в стиле Windows 8.
- Вот довольно интересный концепт. Мы решили абстрагироваться от идеи резервного копирования. А ввести концепцию защиты данных. Вы просто тяните некий слайдер, который сам за вас придумывает что и куда копировать. Для того чтобы появился следующий уровень защиты, продукт просит вас подключить внешний диск или купить место в облачном хранилище.
- Параллельно мы думали как это все будет представлено на Маках. Так как продукт новый, то функций там значительно меньше. Некий MVP. Мы старались учитывать гайдлайны операционной системы.
- Вместо того, чтобы перебирать концепты, мы решили подумать – что главное в бекапе?
- Бекап легко определяют две вещи: данные и хранилище, все остальное – второстепенные детали
- Я тут же нарисовал прототип в блокнотике. Задача решена. Далее следует немного дизайна и мы получаем вот это...
- Так продукт выглядит сейчас. На этом можно было бы и закончить, но давайте посмотрим на интерфейс поближе.
- Экран бекапа приложения. Левая колонка: разные разделы приложения (да, их слишком много!), средняя колонка – список бекапов, справа схема бекапа. Всем сразу понятно что когда и куда копируется.
- Выбор данных для бекапа. По умолчанию – весь компьютер в облако – мы хотим зарабатывать на нашем облаке.
- Мы сделали UI Kit, который лег в основу дизайна всего приложения.
- Вот разные скрины нашего приложения. Все аккуратненько и с любовью.
- Версию для Мака мы решили сделать в нашем фирменном цвете. В основном, она копируем версию для Windows.
- В целом, редизайн прошел успешно. Но, конечно же, мы допустили рядо ошибок. Дело в том, что я пришел из агенства, где я очень хорошо научился «продавать» свои решения. Убеждать клиента, навязывать свою точку зрения. И я поначалу довольно много всего «напродавал». Но в продуктовой компании нету заказчика, есть только коллеги. И очень важно уметь слушать.
- Мы узнали, что большинство наших пользователей используют наш пробкет дольно давно. Для них редизайн оказался большим стрессом. Правильнее было бы растянуть изменения на несколько лет. Но мы сделали все сразу.
- Со временем мы сменили радикальный темно-синий цвет в мак-версии на более легкий белый
- Неожиданно приятная история. Мы совершенно случайо «попали» в стиль Windows 10. Перед выходом новой операцинной системы, у нас была задача адаптировать наше приложение. Но выяснилось, что мы случайно уже сделали приложение, которое соответствует стилю Вин10.
- Это не совсем ошибка, но очень нетривиальная вещь. С одной стороны, хорошо когда все происходит автоматически. Но наши пользователи привыкли все держать под контролем. Знать наверняка какие данные куда кпируются. Когда мы смотрим, как в реальности люди пользуются продуктом – почти никто не используют настройки по умолчанию, все смотрят в настройки.
- Продукт можно сравнить с двигателем автомобиля – сложный механизм. Видно все шестеренки: ремни и трубы...
- Мы закрыли все внутенности для пользователя. Все выглядит очень просто, работает как нужно. Но пользователи хотят понимать продукт: видеть что происходи, понимать как происходит копирование. Сейчас мы стараемся сделать Acronis True Image более прозрачным, вытащить скрытые процессы, но при этом не перегружать и не усложнять интерфейс.
- Ну и самый приятный момент в нашей работе чиать хорошие отзывы о нашей работе. На самом деле, отзывов много самых разных. Но мы просим ребят из службы поддержки присылать нам только хорошие...
- Спасибо! Задавайте вопросы. Я за них могу раздать карточки продукт, в который входит гигабайтное облако для ваших данных.