В последние полгода мы работали над новым слоем краски для пользовательского интерфейса Figma, и сегодня это большое открытие. От типографики и макета до цвета и пиктограмм вы заметите множество мелких различий во всем инструменте.
Наша цель состояла в том, чтобы сделать это обновление как можно более ненавязчивым. Мы сосредоточились в первую очередь на поверхностных изменениях, а не на структурных, и провели месяцы качественных и количественных исследований. У нас были долгие и глубокие внутренние дискуссии по деталям, чтобы убедиться, что разные команды были на борту с конечным продуктом.
Невозможно порадовать всех редизайном — и дизайнеры, конечно, особенно чувствительны к этому виду вещи. В этой статье мы хотели дать вам общее представление о том, почему мы внесли изменения, которые мы сделали, процесс, который мы предприняли, чтобы добиться этого, и уроки, которые мы извлекли на этом пути. (Мы не вдавались в подробности модификаций — вы увидите их сами, когда откроете Figma!)
Рано или поздно большинство продуктов должны пройти визуальное обновление какого-то рода, поэтому мы также поделились несколькими инструментами и шаблонами, которые помогут вам начать подобное путешествие.
Итак, как вы узнаете, когда пора заняться редизайном? Обычно не бывает одного момента молнии, когда небеса открываются, и Дизайнер Зевс вглядывается и заявляет: «Время!» Вместо этого, как у лобстера в кастрюле с кипящей водой, давление постепенно растет со временем.
В Figma у нас неуклонно росло чувство, что наш пользовательский интерфейс работал не так хорошо, как вчера. Мы обнаружили, что изобретаем компоненты на лету — и создаем индивидуальные решения для новых функций, когда существующие элементы не соответствуют нашим потребностям. В результате мы получили бесконечное разнообразие таблиц, кнопок и элементов управления вводом, а также несколько оттенков серого, красного и синего в инструменте.
Наши пользователи замечают несоответствия и эстетические детали, и мы тоже. Мы обсуждали отдельные вопросы в случайных разговорах, которые в конечном итоге переросли в неформальные групповые чаты.
Не удивительно, что мы продолжали сталкиваться с ограничениями нашей оригинальной системы. В конце концов, в последний раз, когда мы целостно анализировали наш интерфейс, у Figma не было мультиплеера или компонентов. Другими словами, мы создали основу нашего пользовательского интерфейса еще до того, как Figma была Figma .
В конце концов наши опасения относительно пользовательского интерфейса слились, и мы решили чтобы сделать что-то с этим. Мы запланировали двухчасовой мозговой штурм со всей командой дизайнеров, где мы собрались вместе, чтобы каталогизировать причуды и недостатки нашего пользовательского интерфейса, а также вещи, которые нам действительно понравились.
Мы провели пока мы играли с Figma на наших компьютерах, входили в закоулки продукта, мы делали заметки и скриншоты всего, что заметили, и бросали все это (что еще?) в файл Figma.
Через час или около того команда обсуждала разные вещи, которые мы нашли, переводя устные заметки в общий текстовый документ, пока мы шли по номер. Когда у всех в группе была громкая реакция на что-то (момент «о, черт, это плохо»), мы отметили это, собирая ранний сигнал о том, что может оказать большое влияние.
Затем мы взяли несколько дней вдали от информационной перегрузки. Хотите следовать аналогичному процессу в своем собственном редизайне? Мы создали этот простой шаблон мозгового штурма в Figma, который вы можете использовать, чтобы начать:
figma.com/file/J3XZEzlgTHP3Xj2ELcNywG
Шаг второй: Организовать и синтезировать вселенную
[ ] Крайне важно иметь это пространство после мозгового штурма, потому что это дает команде время для умственной обработки всего. Семена мысли выросли из Разговор и мнения людей развились за одну ночь.
Мы обсудили все это на следующей встрече. Некоторые из нас осознали, что некоторые проблемы были не так важны, как мы изначально полагали. Другие удвоили свои причины, выдвинув убедительные аргументы. почему конкретные проблемы должны быть исправлены.
После того, как все случаи были заслушаны, мы разделили список равномерно, и каждый из них взял кусок элементов для передачи в пост-заметки, выполнив некоторый специальный синтез по путь.
Например, если список содержит несколько элементов, относящихся к уведомлениям, лицо, передающее этот список, не будет копировать такие мелочи, как: «Предупреждение об уведомлении отличается в этой части пользовательский интерфейс ». Вместо этого на пост-он говорят:« Нам нужна система для обработки уведомлений в инструменте ». Наш первоначальный список был сокращен таким образом, потому что некоторые пост-это будет представлять несколько различные предметы.
Когда мы помещали пост-свою на стену, мы собирали их по «подобию». Например, пост-его ссылка на цвет, естественно, начала группироваться вместе, как и пост-его о разборчивости или использование пустого пространства. Во всяком случае, это не был идеальный процесс — было много повторений среди отдельных заметок, — но это помогло поднять отношение сигнал / шум наших наиболее значимых проблем.
В итоге мы вывели несколько категорий из кластеры:
Значки, типография, разборчивость, цвет, диалоги, тон голоса, панель инструментов, редактор против браузера файлов, режимы, страница команды, браузер файлов, боковая панель свойств, компоненты, слои, история, обмен, публикация, экспорт. PHEW.
Затем мы допустили ошибку, пытаясь наложить еще одно измерение поверх этого, расположив эти категории вдоль оси от визуального → фундаментального. В конечном итоге это было слишком сложно.
Учитесь на нашей ошибке : в вашем собственном визуальном обновлении Мозговой штурм, не задумывайтесь над своей организацией. Постарайтесь найти категории, которые имеют смысл и не слишком абстрактны. Например, «индивидуальность» продукта — это слишком высокий уровень темы, потому что почти все в нее вписывается. Не делайте свои категории слишком конкретными (например, сосредотачиваясь исключительно на одном типе диалогового окна).
В конце собрания каждый дизайнер Figma взял одну из тем и ввел их обратно в ту же общую папку. текстовый документ, теперь аккуратно организованный по категориям.
Шаг третий: Сокращение области действия
Мы знали, что собрали слишком много на наших мозговых штурмах. Исправление всех этих нам может потребоваться два года или больше — стоимость, которую мы не можем себе позволить в качестве быстро растущего стартапа.
Итак, на нашей третьей встрече мы решили расширить проект с помощью довольно простого мысленного эксперимента: если мы только была неделя, что бы мы исправили? Люди в комнате сразу же получили ответы, что дало нам ясность в правильном направлении.
Мы поняли, что изменения на уровне поверхности решат множество самых насущных недостатков нашего пользовательского интерфейса. Когда мы подробно рассмотрели: «Почему это здесь не работает?», Ответом часто будет что-то вроде: «Мы никогда не создавали всплывающее окно с несколькими параметрами, поэтому мы настраивали множество различных всплывающих окон для удовлетворить наши потребности ».
Наши компоненты больше не поддерживали то, что мы делали, потому что то, что мы делали, сильно изменилось с 2015 года.
В то же время мы поняли, что Фундаментальная структура Figma — с точки зрения информационной архитектуры — работала довольно хорошо, и у нас было довольно мало проблем с ней. Да, возможно, мы могли бы переходить между режимом комментариев или другими режимами более плавно, но это были не «проблемы с пожарами», как это было.
Если вы планируете охватить свой собственный проект редизайна, стоит проанализировать, какой путь выбрать заранее. Есть три варианта для рассмотрения:
Поверхность: Сосредоточьтесь на том, как вещи отображаются в пользовательском интерфейсе, такие как элементы управления вводом, значки, типографика, поведение кнопок и т. Д.
Основание: Сосредоточьте внимание на том, как вещи сочетаются друг с другом и лежащая в основе ментальная модель, такая как модальность и информационная архитектура.
Гибрид поверхности и фундамента: Вы можете вносить как поверхностные, так и структурные изменения, но только для части продукта (в противном случае вы ' делает все это).
В Figma мы чувствовали, что получили бы более широкое влияние, если бы efresh коснулся всего продукта, поэтому мы выбрали путь № 1 — сосредоточиться на улучшении поверхности пользовательского интерфейса.
Чтобы еще больше сузить область применения, мы примерно решили, сколько времени мы хотим потратить на него. Мы были готовы посвятить 3 человека полный рабочий день, от проектирования, дизайна и управления продуктом, в течение 5 месяцев. Это ограничение помогло нам сделать большой выбор заранее. А именно, мы решили, что это будет не полная переработка пользовательского интерфейса, а визуальное обновление . Свежий слой краски или новая мебель, но без движения стен.
Конечно, было больно делать такой вызов. Как дизайнеры, наша работа заключается в том, чтобы заботиться об этих вещах (и как дизайнеры, создающие инструмент для других дизайнеров, мы знаем что вы заметили все детали). Но мы в конечном итоге не смогли решить все это, учитывая наши временные ограничения. Это был, пожалуй, самый большой урок обновления пользовательского интерфейса: мы должны были согласиться с отпуском.
Учитесь на нашем опыте : Когда группа дизайнеров начинает говорить о списке пожеланий изменений в интерфейсе, вещи могут выйти из-под контроля, быстро. Непроверенная обработка может быть бесконечной задачей, поэтому один из самых важных шагов, когда вы рассматриваете редизайн, — это выяснить, как его охватить. Задайте себе вопрос:
Если бы у вас была всего одна неделя, чтобы заняться этим проектом, что бы вы исправили?
У вас самые большие проблемы на поверхности или они встроены в структуру ваш продукт?
Сколько времени вы готовы потратить на это?
Как только мы решили придерживаться обновления уровня Figma, мы потратили следующие пару недель на исследования подготовить. Мы назначили рабочие группы по 3-4 человека для решения каждой из основных тем, синтезированных в упражнении «Записки»:
Цвет
Типография и иконография
Интервалы, сетки и метрики
Цель состояла в том, чтобы исследовать идеи и направления, возможные в каждой категории, изучая, как мы делаем вещи в настоящее время в Figma и как другое программное обеспечение решает подобные проблемы. Каждая группа создала файл результатов Figma со своим собственным предложением об изменениях. Например, команда, работающая над цветом, предложила увеличить контрастность или глубину «Figma blue», чтобы было легче читать в сочетании с белым.
Все они помнили о четырех основных целях проекта. :
Модернизация пользовательского интерфейса. Времена меняются и ожидания меняются, это просто факт. Что чувствует себя от нашего интерфейса? Как мы отличаем тенденции от законного развития и улучшений от того, что ощущается текущим и современным?
Разборчивость и доступность. Есть много методов и философий для анализа читабельности и контраста. Мы решили, что самым важным было выбрать один метод цветового контраста и быть последовательным, и мы пошли с WCAG2. Типография была еще одной темой в этой категории.
Простота. Поскольку продукт стал более богатым и сложным, пришло время взглянуть на то, как мы можем уменьшить количество используемых шаблонов. Например: у нас были правильные виды пользовательских элементов управления вводом? Позволила ли наша система маркировки пользовательского интерфейса четко и кратко выразить иерархию? У нас слишком много всего происходило на панели инструментов?
Удобство использования. Мы хотели сосредоточиться на простоте использования и понимания, поэтому мы рассмотрели возможность обнаружения в продукте. Могут ли люди найти боковую панель компонентов с иконкой в углу? Легко ли и просто перемещаться между страницами документа?
Была также не упомянутая цель: можем ли мы перемещать сыр, чтобы люди не замечали это негативно? Если пользователи не могли сразу сказать, что изменилось, возможно, это был признак того, что мы хорошо справились с визуальным обновлением.
Через несколько недель команды снова собрались вместе и представили свои выводы. Мы обсудили предложенные предложения и договорились об общих изменениях, которые мы хотели сделать (но не определили предписывающие решения). Например, мы согласились: «Этот текущий синий Figma не работает», но мы не решили, какой синий использовать вместо этого.
Как только мы согласились с этими выводами высокого уровня, мы назначили один конкретный дизайнер (я!), который выступит в качестве лидера проекта обновления пользовательского интерфейса, и один инженер-разработчик, который будет его создавать.
Это был правильный призыв вовлечь всю команду разработчиков в этот ранний процесс мозгового штурма и определения приоритетов. Таким образом, все были увлечены принятыми нами решениями и имели представление об изменениях, происходящих в будущем.
Остальная часть проекта прошла так, как вы можете себе представить. Хотя только один дизайнер посвятил этому все свое время, мы проводили ежедневные проверки с остальной частью команды дизайнеров, плюс три раза в неделю проводились более формальные проверки дизайна. Мы говорили о работе на постоянной основе, поэтому никто не был застигнут врасплох.
Жизнь с вашими решениями
С таким проектом вы должны жить со своими проектами, чтобы знать свои решения правы. Так рано, мы установили сжатые сроки, чтобы закончить уменьшенную версию обновления, которое мы могли бы протестировать внутри. (В нашей повседневной работе Figma опирается на частную промежуточную среду, чтобы помочь нам выявлять ошибки, прежде чем мы отправим их публике.)
В частности, мы внесли изменения в типографику, цвет и сетку в «базовый слой». Пользовательского интерфейса в редакторе — это те части, которые всегда на экране, такие как панель инструментов и боковая панель свойств. После того, как наши инженеры построили его, мы начали использовать изменения внутри компании, чтобы увидеть, что сработало, как ожидалось, а что … нет.
Еще один урок : Если вы решите собачью еду, то ваш собственный редизайн поэтапно будьте готовы к тому, что все станет грязно. Например, мы изменили бы часть панели инструментов, но ничего больше. Понятно, что это будет выглядеть откровенно, пока мы не отправим другие аспекты обновления. Мы рекомендуем вам общаться с остальной частью компании, что они должны ожидать через личные встречи и сообщения Slack / электронной почты.
После достижения большего прогресса по всему продукту мы провели несколько этапов пользовательских исследований, чтобы убедиться, что наше обновление не вызывает каких-либо серьезных проблем или проблем. Мы знали, что люди не будут в восторге от изменения — во многих продуктах редизайн часто встречается со скептицизмом со стороны существующего сообщества. Но мы хотели убедиться, что мы не наносили активного вреда нашим пользователям с изменениями.
В этом проекте было гораздо больше, чем я хотел бы поделиться с вами, но для этого может потребоваться еще 3000 слов итак.
А пока мы оставим вам самый важный урок из всех. Если вы проходите собственную модернизацию пользовательского интерфейса, настройте свой проект с четкой и выполнимой областью … чтобы вы не трудились вечно в мире редизайна.
Я надеюсь, вам понравится обновленное лицо Figma: -.)
В конце концов наши опасения относительно пользовательского интерфейса слились, и мы решили чтобы сделать что-то с этим. Мы запланировали двухчасовой мозговой штурм со всей командой дизайнеров, где мы собрались вместе, чтобы каталогизировать причуды и недостатки нашего пользовательского интерфейса, а также вещи, которые нам действительно понравились.
Через час или около того команда обсуждала разные вещи, которые мы нашли, переводя устные заметки в общий текстовый документ, пока мы шли по номер. Когда у всех в группе была громкая реакция на что-то (момент «о, черт, это плохо»), мы отметили это, собирая ранний сигнал о том, что может оказать большое влияние.
Крайне важно иметь это пространство после мозгового штурма, потому что это дает команде время для умственной обработки всего. Семена мысли выросли из Разговор и мнения людей развились за одну ночь.
Например, если список содержит несколько элементов, относящихся к уведомлениям, лицо, передающее этот список, не будет копировать такие мелочи, как: «Предупреждение об уведомлении отличается в этой части пользовательский интерфейс ». Вместо этого на пост-он говорят:« Нам нужна система для обработки уведомлений в инструменте ». Наш первоначальный список был сокращен таким образом, потому что некоторые пост-это будет представлять несколько различные предметы.
Учитесь на нашей ошибке : в вашем собственном визуальном обновлении Мозговой штурм, не задумывайтесь над своей организацией. Постарайтесь найти категории, которые имеют смысл и не слишком абстрактны. Например, «индивидуальность» продукта — это слишком высокий уровень темы, потому что почти все в нее вписывается. Не делайте свои категории слишком конкретными (например, сосредотачиваясь исключительно на одном типе диалогового окна).
Шаг третий: Сокращение области действия 
Мы знали, что собрали слишком много на наших мозговых штурмах. Исправление всех этих нам может потребоваться два года или больше — стоимость, которую мы не можем себе позволить в качестве быстро растущего стартапа.
Если вы планируете охватить свой собственный проект редизайна, стоит проанализировать, какой путь выбрать заранее. Есть три варианта для рассмотрения:
Загрузка...
