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

Интересно, что в финале написания статьи я поняла, что всë написанное, можно смело применять к любому своему проекту! :)

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

Research

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

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

? Одним из важных аспектов является навигация и поиск. Важно понять, как решается подход к навигации и поиску на похожих мультифункциональных платформах.

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

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

⭐️ Визуальная часть и взаимодействие с пользователем. Как упакован продукт? Насколько интуитивно понятен интерфейс? Все эти вопросы помогут оценить качество пользовательского опыта.

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

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

⚠️ Не забывайте и об ошибках, допущенных другими. Изучение неудач может быть столь же ценным, как и анализ успешных примеров. Понимание причин провалов поможет вам избежать подобных проблем в будущем.

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

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

• AntDesign

• Flowbite

• Material

• Контур

• Ростелеком

• Fluent

Кстати, если вы знаете другие витрины, которые, на ваш взгляд, тоже хороши, делитесь в комментариях!

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

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

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

Открытый диалог с пользователями, а также количественные и качественные исследования сыграли ключевую роль в понимании этих привычек. Точные вопросы, направленные на выявление проблем и узких мест, помогли нам определить чëткие направления для улучшений. Мы обнаружили множество недоработок в различных аспектах. Однако результаты опроса по методу UMUX показали, что 72,4 % пользователей удовлетворены текущей платформой. Это довольно высокий показатель.

*_{UMUX (Usability Metric for User Experience) — это метод оценки, используемый для измерения удобства использования и общего опыта пользователя при взаимодействии с продуктом или системой. Этот инструмент представляет собой короткий опросник, состоящий из нескольких пунктов, который помогает исследователям и дизайнерам быстро оценить восприятие продукта пользователями и исзмерить эти данные в процентном соотношении.}

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

Советы

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

Внедрите обязательный этап синхронизации макетов, разработки и задач. Я называю это «Гигиеной процесса». Это необходимо для того, чтобы все элементы вашей работы — макеты, код, планирование и задачи — были согласованы и работали в унисон. Синхронизация является основой успешного проекта: она помогает избежать недоразумений и несоответствий, что в конечном итоге приводит к повышению качества конечного продукта. Синхрон — это НАШЕ ВСЁ!

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

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

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

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

Заключение

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