Унификация интерфейсов: опыт e-commerce-проектов mail.ru group

Posted on by riasevastopol

В начале 2012 года в Mail.Ru Group было реорганизовано e-commerce-направление, и перед нами поднялась задача совершить обновление всех сервисов. В рамках обновления интерфейсы всех проектов были приведены к единому знаменателю. В этом посте Кирилл Голышев поведает о том, что на практике дает унификация, и какими способами возможно свести к минимуму затраты при работе с масштабными проектами.

Вводные эти

В направление электронной коммерции Mail.Ru Group входят Товары, Деньги, Путешествия и Недвижимость. Не считая них, в течение года мы трудились над новыми продуктами — спутниками главных сервисов. Итогом стало появление новых проектов Авиабилеты, Ремонт и Финансы.

Отечественной главной задачей было создать в короткие сроки базисный интерфейс, что позднее возможно и необходимо будет совершенствовать и масштабировать.

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

Унификация интерфейсов: опыт e-commerce-проектов mail.ru group

Исходя из сроков и ресурсов была выяснена стратегия предстоящей работы — унификация интерфейсов всех проектов. Так как столь масштабная унификация в Mail.Ru Group первенствовала , нужно было четкое обоснования аналогичного ответа.

Для чего нужна унификация?

Увеличение узнаваемости бренда

Прежде всего, единая визуальная платформа повышает узнаваемость бренда, повышая его вес и стоимость на рынке. Единообразие усиливает сообщение продуктов с брендом и вносит больше доверия в его отношения с пользователями.

Экономическая польза при разработке

Унификация проектов разрешает сократить время на проектирование интерфейсов, создание дизайна и разработку фронтенда. Но самое основное — унифицированная платформа разрешает скоро и безболезненно соединять различные сервисы между собой, переносить модули с проекта на проект и с меньшими затратами создавать сервисы-спутники. В конечном счете мы приобретаем универсальный конструктор для интерфейсов.

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

Экономическая польза при помощи

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

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

Виды унификации

Унификацию возможно поделить на две составляющие: функциональную и визуальную.

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

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

Эта часть описывается в так называемых UI kit.

У двух составляющих унификации разные области и разное назначение реализации.

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

Так, предстоящее сокращение времени на коммуникации нивелируется временем на поддержку и составление гайдов.

Но визуальная унификация — только вершина айсберга. Большинство работ по унификации приходится на функциональную составляющую.

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

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

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

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

К примеру, при создании Авиа Mail.ru был использован white-label продукт стороннего поставщика. Единственным вариантом приблизить данный проект к нашему бренду была визуальная унификация — мы заменили UI kit и стилистическую составляющую проекта, наряду с этим не трогая механику интерфейса.

Способы

Разовый подход к проблеме

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

Плюс способа:

— наличие неспециализированной картины и аналитики по проектам

Минусы:

— создание для того чтобы решения может "настойчиво попросить" достаточно большое количество времени и сил

— большая цена неточности

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

«Эволюционный» подход

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

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

Плюсы ответа:

— дабы начать «сказать», не нужна сложная совокупность, возможно сделать это прямо тут и по сей день

— низкая цена неточности, её исправление не будет трудозатратным

— большая гибкость создаваемой совокупности, неизменно безболезненно возможно скорректировать выбранный курс

Минус:

— отсутствие полной аналитики

Но данный недочёт сглаживается четко заданной стратегией развития интерфейса.

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

Стратегия

Мы сделали ставку на минималистичный, легкий дизайн, где основное — несложная и интуитивно понятная механика интерфейса.

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

Помимо этого, такое ответ более долговечно. Мы начали редизайн в начале 2012 года, и выбранное нами направление до сих пор актуально, среди них и по окончании прихода Windows 8 UI и без того именуемого flat-дизайна.

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

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

Функциональная унификация

Сетка, навигация, поисковые формы, модули интерфейса

Модульные сетки

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

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

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

Разглядим две категории товаров: «Компьютеры» и «Одежда». Для одежды разумеется серьёзен внешний вид в виде фотографий, для компьютеров — характеристики в виде текста. Тогда как картины смогут занимать практически всю площадь экрана без утраты читаемости, текст имеет ограничение по ширине.

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

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

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

Мы выделили в качестве приоритетной части бронирование, и сервис взял фиксированную сетку.

Навигационные и поисковые модули

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

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

Для размещения элементов использована F-образная территория, которая по итогам юзабилити-тестирований оптимальнеечитается пользователями. Такое размещение делает поиск и навигацию максимально приоритетными и сквозными на всех проектах.

Мы создали пара правил и простых сценариев, каковые применяли в работе над всеми проектами.

Правило 1

Навигация первого и второго уровня находится сверху, под портальной шапкой 

У всех проектов портала Mail.Ru имеется единые требования к общепортальной шапке с поиском и логотипом проекта.

Мы максимально выделили навигацию по проекту посредством чёрной плашки, сыграв на контрасте с синей портальной шапкой и белым фоном. Это решение прижилось, и по сей день его возможно заметить кроме этого вне проектов электронной коммерции, к примеру, на проектах Афиша и Ответы и Спорт

Правило 2

Громадные поисковые формы находятся в левой колонке

Они смогут выводиться как в кратком, так и в полном виде. Вертикальное размещение позволяет свободно поменять количество параметров поиска, оставляя его наглядным и сквозным. Это принципиально важно, к примеру, для проектов Недвижимость и Товары.

Правило 3

Малые поисковые формы находятся горизонтально

Поисковые формы с ограниченным числом параметров (к примеру, в проектах Путешествия и Финансы) выводятся под шапкой, на чёрном фоне рядом с навигацией. Данное размещение кроме этого сквозное и разрешает действенно применять площадь экрана. Помимо этого, чёрный фон отделяет поиск от контентной части, что принципиально важно в Путешествиях.

Правило 4

При наличии малой поисковой формы фильтрация находится справа

При таком размещении фильтрация не перетягивает на себя главное внимание пользователя и остается дополнительным элементом управления поисковыми результатами.

Единожды принятые правила экономят время на согласования и поиск решений.

Модули

Наследование модулей есть ударной силой в борьбе за экономию времени и ресурсов. Модулем может являться как простой пагинатор, так и достаточно объемная совокупность добавления комментариев.

Модули постоянно имеют строго заданные сценарии работы, но смогут употребляться вне единой визуальной базы. При наличии продуманного прототипа со сценарием работы дизайн модуля может изменяться из проекта в проект. К примеру, мы создали витрину каталога одежды для Леди Mail.Ru на базе раздела «Одежда» Товаров Mail.Ru.

Чем больше проектов, тем полнее база модулей, и тем больше экономия трудозатрат. Простые модули смогут объединяться в более сложные; в конечном счете получаются типизированные страницы либо блоки страниц — шаблоны (к примеру, блок «Статьи» либо «Создание новой сущности»).

Шаблоны — это не конечное и строго заданное ответ.

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

Объем работы над шаблонами может варьироваться. К примеру, блок статей испытывает недостаток в минимальной доработке.

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

К примеру, «Загрузить фотографии – Обрисовать фотографии – Обрисовать проект – Обнародовать проект».

В итоге мы имеем неспециализированный сценарий работы интерфейса с подвариантами реализации.

Визуальная унификация

Совокупность шрифтов, графика, простые элементы интерфейса

Стилеобразующие элементы

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

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

Такое ответ разрешает нейтрализовать агрессивность светло синий и оранжевого, делая дизайн свежим и броским.

Элементы интерфейса

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

иллюстрации и Иконки

Самый замечательный инструмент визуальной унификации — единый стиль главных графических элементов, иллюстраций и иконок.

Мы создали единую визуальную платформу для иконок: иконки проектов содержат главные цвета бренда Mail.Ru Group на нейтральной подложке, на чёрном фоне для наилучшей читаемости. Мы намерено сосредоточились на несложных формах, каковые легко узнаются в любом размере и прекрасно смотрятся как на вебе, так и на разных мобильных устройствах. Неспециализированное ответ разрешает масштабировать и расширять линейку.

Отечественное ответ годичной давности удачно влилось в текущие тенденции дизайна.

Итоги унификации

Вид проектов до редизайна

Вид проектов по окончании редизайна

Мобильные проекты

Что было сделано

С марта 2012 года, другими словами за 18 месяцев, мы совершили полный редизайн трех веб-проектов — Товары, Путешествия, Недвижимость в базисной версии. В будущем, по итогам юзабилити-изучений, мы продолжили развитие этих проектов и подготовили обновления. Помимо этого, были созданы 3 новых веб-сервиса — Авиа, Финансы и Ремонт.

Кроме веб-проектов, мы деятельно развивали мобильное направление: были созданы четыре мобильных приложения для Денег, Товаров, Путешествий и Недвижимости для двух платформ — iOS и Android.

Занимательная математика

Средняя продолжительность создания веб-проекта — 2,5 месяца

Предельное число участников дизайн-процесса — 4 человека

Среднее количество макетов по одному проекту — 60

Средняя продолжительность создания мобильного проекта — 1 месяц

Среднее количество экранов по одному приложению — 22

Выводы

— Унификация — это эластичный способ управления дизайн-ресурсами и процессами компании

— Существует пара способов унификации, каковые используются в зависимости от потребностей и ситуации.

— При верной методологии возможно унифицировать каждые продукты

Благодарю громадное Полине Выдрич за участие в написании этого огромного количества буковок и работе над всеми вышеописанными проектами. И отдельное благодарю Никите Гуторову за радостных пингвинчиков!

В случае если у вас имеется опыт унификации маленьких либо больших проектов, приглашаю поделиться им в комментариях.

Создатель: Кирилл Голышев, начальник группы дизайна e-commerce Mail.Ru Group 

Источник блог Mail.Ru Group habrahabr.ru

Случайные статьи:

Офис Mail.ru Group (Экскурсия по UI отделу от Юрия Ветрова)


Подборка похожих статей:

riasevastopol

More Posts