- PVSM.RU - https://www.pvsm.ru -
Первоначально мы готовили очередной корпоративный пост о том, на сколько процентов новый Acronis True Image 2015 стал быстрее бекапить, но, раз уж задачу доверили дизайнерам, то расскажем кое о чем более интересном — сегодня мы поделимся историей создания нового интерфейса программы, а также покажем, что у нас в итоге получилось.
Стоит начать с того, что за последние несколько лет интерфейс программы особенно не менялся — концепция, впервые представленная осенью 2010 года, была довольно удачной и вполне устраивала и нас, и пользователей. Естественно, мы не стояли на месте — рисовались новые рюшечки, перепроектировались отдельные сценарии, обновлялись иконки, но по сути все улучшения продукта оставались незаметными для рядовых пользователей (большая часть новых фишек была “под капотом”).
Найди 10 отличий
Наконец, в этом году мы решили начать с белого листа и спроектировать True Image с нуля. Почему это произошло только сейчас? Вот несколько весомых причин:
— Накопился фидбек от пользователей. В некоторых аспектах продукт оставался сложным и непонятным для непосвящённых пользователей, о чём недвусмысленно намекал ворох тикетов Salesforce с пометками Usability difficulty. И хотя каждую из проблем мы локально поправили и даже в очередной раз перерисовали старый интерфейс, мы понимали, что наше детище уже не отвечает духу времени и в этот релиз нужно было менять всё по-серьёзному.
Те же яйца, только в профиль
— Компания взяла новый курс: с приходом нового СЕО наши продукты должны были стать проще, понятнее, эффективнее. Мы стали евангелистами бекапа — если в прошлом резервное копирование было уделом суровых айтишников и гиков, то теперь это насущная необходимость для всех, включая пенсионеров и домохозяек. Наш список персон для проектирования был дополнен Машей — молодой красавицей, которой нет дела до бекапа, но у которой было полно данных, достойных защиты True Image.
Слайд из внутренней презентации
— У компании появился совершенно новый чумовой логотип: сильный, лаконичный, предполагающий мало украшательств. Как водится, в комплекте с ним шёл фирменный стиль и сногсшибательный корпоративный цвет — #00204D. С таким логотипом выпускать продукт с просто хорошим интерфейсом было просто непозволительно :)
— Сегодня почти все PC продаются с Windows 8 на борту, многие из них оснащены тачскринами. Стоит ли говорить, что True Image 2014 на этой ОС и выглядел не ахти, и с пальцевым вводом не особо дружил.
Огурец, как выяснилось, вполне неплохо заменяет стилус
Выкинули всё и начали проектировать каждый сценарий сначала. Правда, перед этим мы перелопатили около 3200 тикетов в Salesforce, собрали (и даже частично проспали) несколько десятков митингов с представителями нашего замечательного саппорта, прочитали и проанализировали сотни пользовательских сообщений на нашем форуме. В общем, мы охотились за фидбеком как могли и всеми силами искали проблемные места в текущем интерфейсе программы. В результате у нас в руках оказался детальный список локализованных проблем UI, каждая из которых сопровождалась коэффициентом важности и подробным описанием.
Далее наступил период пламенных брейнштормов, на которых мы медленно, но верно развивали новую парадигму интерфейса. После каждого митинга на маркерных досках оставались наброски, которые мы переносили на бумагу, и затем и в Axure (а потом и в Illustrator, и в Keynote — в чём только мы ни готовили презентабельные макеты для топ-менеджемента). Спустя несколько недель мы начали вполне чётко осознавать то, как должен работать новый True Image.
Одной из главных наших целей был отказ от модальности интерфейса. Мы решили убрать всплывающие окна и сделать приложение, где все взаимодействия были бы в рамках одного-единственного окна. Это позволило бы фокусировать внимание пользователя на текущей задаче, используя при этом максимум экранного пространства для размещения необходимых элементов управления.
Для основных сущностей, с которыми работает пользователь, — бекапами и синхронизациями — мы использовали трёхпанельное представление, где левая панель — глобальное меню навигации, средняя — список пользовательских бекапов или синок, а самая правая, наиболее крупная, — это выбранный левее бекап или синхронизация, со всеми своими атрибутами и органами управления. Подобный подход используется во многих приложениях — например, в почтовых клиентах.
Определившись в общих чертах с парадигмой взаимодействия, мы взялись за меню навигации по приложению — туда должны были попасть текущие вкладки Backup, Synchronisation, Tools и некоторые важные функции, которые в предыдущих версиях программы были спрятаны по потаённым уголкам интерфейса. Внутри команды мы никак не могли прийти к решению, как это меню будет выглядеть и работать: будут ли подписи к иконкам, будем ли его разворачивать и скрывать, нужны ли выделенные разделы для лицензирования… В конечном итоге пришли к наиболее привычной реализации: статичное меню, где каждый пункт представлен иконкой и подписью. Быть может, не очень революционно, зато всё стало лаконичнее и пользователи точно не заблудятся. Более того, о наиболее важных событиях внутри разделов мы сообщаем симпатичными бейджами-нотификаторами.
Почувствуйте разницу
Почти всё, что не попало в меню, было контекстным — что-то относилось к управлению бекапами, что-то — к разруливанию лицензии и т.п. Было логично перенести всё это внутрь соответствующих разделов меню, что и было сделано.
Продолжаем двигаться слева направо. Списки бекапов и синхронизаций изменились достаточно заметно — теперь они используются только для выделения (select), а все органы управления также “уехали” в правую панель.
На плашках бекапов осталось только самое важное — название бекапа, местоположение бекапа и его статус. Этого вполне достаточно, чтобы с первого взгляда оценить ситуацию. Даже если в списке много бекапов, можно сразу увидеть, какие из них работают как часы, а какие пофейлились и требуют вмешательства.
На десерт — самое интересное :) Переходим к самой правой колонке, где отображаются все атрибуты бекапа или синхронизации и где располагаются все элементы управления. Эта область стала, пожалуй, самым сложной для проектирования. В спорах о том, что и как там должно отображаться, было сломано немало копий. Какие только безумные идеи ни предлагались — вплоть до показа иллюстрированных статей из википедии о том, какие опасности могут настигнуть пользовательские данные, если вовремя не забекапиться. Но мы всё-таки смогли обсуздать фантазию и сделали, на наш взгляд, простой и понятный экран бекапа (и синхронизации).
Но мы его не покажем.
Желающие пощупа оценить результат нашей работы уже сейчас могут скачать бета-версию True Image 2015 для Windows [1].
Нам нужен ваш фидбек! Мы подарим по лицензии программы трём авторам самых конструктивных комментариев.
P.S. А ещё у нас совершенно новый прекрасный инсталлятор!
Автор: buranik
Источник [2]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/dizajn-interfejsov/68080
Ссылки в тексте:
[1] бета-версию True Image 2015 для Windows: http://dl2.acronis.com/u/beta/TrueImage2015_web_ru-RU.exe
[2] Источник: http://habrahabr.ru/post/234107/
Нажмите здесь для печати.