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

У меня есть некоторые идеи для более эффективного редизайна, но проверить их я хочу не на каком-то мелком, несуразном продукте, так как это будет очень легко. Я выбрал Sketch по 2 причинам:

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

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

Первые шаги

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

“Не чини, коли не поломано”

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

  • Вопрос: Оправдывает ли продукт основные ожидания пользователя?
  • Ответ: Да, так что тут ничего не сломано, можем идти дальше.

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

Технический анализ

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

Редизайн Sketch, как улучшить что-то, что уже само по себе хорошо? | Технический анализ

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

  • Блок 1, цель: навигация по слоям и страницам. Тут все более-менее, но мы бы могли внести некоторые улучшения на визуальном уровне, чтобы улучшить понимание представленной информации, ее читабельность.
  • Блок 2, цель: Открытая площадка для творения дизайна, “простая в управлении”. Определенно и тут все неплохо, не очень нравится та простота, с которой я создаю свои артборды и могу передвигать их для упорядочивания и построения визуальных структур. Я бы ничего не менял (пока что).
  • Блок 3, цель: иметь все необходимые инструменты для управления свойствами объектов дизайна под рукой. Вот тут не все хорошо. Почему? Потому что даже с учетом того, что эта панель гораздо удобнее аналогичной в Photoshop, новичкам все равно бывает сложно в ней разобраться. Это не критичный недостаток, но есть, над чем поработать в визуальном аспекте, чтобы сделать панель более понятной и удобоваримой.
  • Блок 4, цель: Честно, я без понятия, но думаю, что он создан для каких-то более высокоуровневых опций (?). Эта часть неудачна. Почему? Потому что занимает много места на экране, а ее ценность для моего рабочего процесса (вы же помните, я опираюсь чисто на свои ощущения) минимальна. Она могла бы быть и лучше, и я могу помочь повысить ее ценность для дизайнеров.

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

Анализ стиля / брендинга

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

Как же обстоят дела с брендингом в Sketch? Неплохо, но однозначно могло бы быть и лучше. Сейчас Sketch использует множество родных визуальных компонентов. К счастью, Apple располагает приличной библиотекой компонентов, но если нужно вывести продукт на новый уровень, Sketch нужна более оригинальная и выделяющаяся индивидуальность.

Как этого достичь? Как мы можем понять, что такое идеальная индивидуальность продукта? К сожалению, в рамках этого эксперимента, нам придется опустить множество аспектов, так как нужны серьезные затраты времени и сил, включая множество детальных обсуждений, мудбордов, интервью и прочее. Поэтому я бегло проанализирую эту часть с очень субъективной точки зрения (своей).

По моему убеждению, Sketch — очень чистый и удобный; это лучшие ценности, которыми располагает продукт. Он не такой засоренный, как Photoshop, он удобен, и, поработав в нем совсем немного, вы заметите, что в плане UX он утилизировал в себе большую часть ценностей Apple. И если это достигается за счет визуальных элементов, давайте строить улучшения на их основе, то есть на дизайне чего-то очень лаконичного и еще более простого в использовании.

Результаты

Я работал над своим вариантом неделю, и после нескольких очень продуктивных дней получился такой результат:

Редизайн Sketch, как улучшить что-то, что уже само по себе хорошо? | Неактивное состояние
Неактивное состояние

Рассмотрим улучшения по каждому блоку:

Блок 1

Тут было немного недостатков; главная цель — улучшение читабельности. Чтобы ее улучшить, нужно сначала понять иерархию элементов:

  • Страницы > Артборды > Слои / Группы > Слои / Группы (…)

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

Редизайн Sketch, как улучшить что-то, что уже само по себе хорошо? | Блок 1

Это небольшое изменение, но в сочетании с более оригинальным и чистым визуальным стилем, включая полоски-зебру только для открытого артборда, получилось эффективное решение для данного блока. Идем дальше.

Блок 2

Как я говорил раньше, в этом блоке менять особо нечего. Тем не менее, все это пустое пространство дает возможность передвинуть некоторые общие опции, включая масштаб или управление сеткой и направляющими, в эту часть окна. Я поясню причину в Блоке 4. Например, при активированных направляющих (Guidelines) блок выглядит и работает так:

Редизайн Sketch, как улучшить что-то, что уже само по себе хорошо? | Блок 2
Неактивное состояние с активированными направляющими

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

Блок 3

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

Редизайн Sketch, как улучшить что-то, что уже само по себе хорошо? | Блок 3
Состояние выделения простой фигуры, показывающее опции вверху и параметры справа

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

Блок 4

Это самая тяжелая часть работы. Так как этот блок нуждается в большем внимании, рассмотрим изменения детальнее.

Редизайн Sketch, как улучшить что-то, что уже само по себе хорошо? | Блок 4
Стратегия для блока 4

Я разделил блок на 3 области:

Область 1: Главная цель этой области — обеспечить доступный способ добавления новых объектов. Сейчас все объединено в одну кнопку, но есть 2 вида объектов, которые нуждаются в отдельном триггере: Символы и Текстовые стили.

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

Редизайн Sketch, как улучшить что-то, что уже само по себе хорошо? | Добавление символа
Добавление созданного символа из древовидной структуры

Текстовые стили сейчас живут как часть панели параметров. Мы можем повысить удобство их использования, создав более четкую структуру. Это очень важно, потому что при реализации дизайна, у вас есть предопределенная структура в коде (h1, h2, h3, p, ссылки и другие HTML метки). Было бы здорово, если бы дизайн соответствовал этой структуре, это улучшит работу с текстами из Sketch, превратив дизайнеров и фронт-енд разработчиков в лучших друзей.

Редизайн Sketch, как улучшить что-то, что уже само по себе хорошо? | Тексты
Идеальная структура для Texts

Область 2: Эта область будет менять содержимое в зависимости от выделенных элементов. А вариант, когда не будет ничего выделено, будет отображать избранные объекты. Это будет очень практичная опция, потому что у нас всегда есть объекты вроде кнопок, символов и прочего, которые активно используются по всему дизайну, поэтому будет удобно перетаскивать их отсюда в артборды.

Редизайн Sketch, как улучшить что-то, что уже само по себе хорошо? | Избранное
Добавлены некоторые объекты из избранных, и на данный момент перетаскивается еще один

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

Редизайн Sketch, как улучшить что-то, что уже само по себе хорошо? | Выделение фигуры
Кейс с выделением фигуры

Есть множество других кейсов помимо фигур, в которых эта часть блока может быть более полезной; тексты, символы, изображения и т.д. Каждый со своими потребностями. Это должно превратить часть в более полезный и “умный” компонент. Я не покрываю все возможные случаи, но уверен, что вы поняли мою идею ; )

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

Редизайн Sketch, как улучшить что-то, что уже само по себе хорошо? | Craft
Как должен выглядеть Craft. Некоторые тултипы будут полезны

Другие опции такие же, как мы видим их сейчас в Sketch. Тут я слегка переделал внешний вид кнопок. Это необходимо для сокращения высоты блока. Каждый уменьшенный пиксель пойдет в пользу Блока 2, где происходит все самое интересное.

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

Бонус

Какое же хорошее ПО без приветственного блока? Снова, цель — не изобрести велосипед заново, потому что в Sketch итак довольно удачный приветственный блок. Это лишь мои личные предложения…

Редизайн Sketch, как улучшить что-то, что уже само по себе хорошо? | Приветственный экран
Приветственный экран

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