14 полезных расширений Chrome для дизайнеров
Этот список содержит 14 расширений Chrome, которые автор собрал за последние десять лет с 2011 года. Хотя некоторые из них могут быть устаревшими, большинство из них используются почти каждый день.
1. ColorZilla
2. WhatFont
3. Dimensions
4. SVG Gobbler
5. CSS Peeper
6. View Image Info
7. Window Resizer
8. VisBug
9. Live editor for CSS, Less & Sass — Magic CSS.
10. SEO Pro Extension
11. Lighthouse
12. Momentum
13. Earth View from Google Earth.
14. Muzli 2 — Stay Inspired
Подробнее о каждом в источнике: https://ux.pub/12-poleznyh-rasshireniy-chrome-dlya-dizaynerov/
Этот список содержит 14 расширений Chrome, которые автор собрал за последние десять лет с 2011 года. Хотя некоторые из них могут быть устаревшими, большинство из них используются почти каждый день.
1. ColorZilla
2. WhatFont
3. Dimensions
4. SVG Gobbler
5. CSS Peeper
6. View Image Info
7. Window Resizer
8. VisBug
9. Live editor for CSS, Less & Sass — Magic CSS.
10. SEO Pro Extension
11. Lighthouse
12. Momentum
13. Earth View from Google Earth.
14. Muzli 2 — Stay Inspired
Подробнее о каждом в источнике: https://ux.pub/12-poleznyh-rasshireniy-chrome-dlya-dizaynerov/
Исследование главной страницы сайтов электронной коммерции. 8 распространенных UX-ошибок
Основные выводы:
Тест 60 веб-сайтов электронной коммерции, проведенный в конце 2020 года показывает, что в целом у домашних страниц неплохой UX.
Однако 32% сайтов предоставляют либо посредственный, либо плохой опыт.
Недопущение 8 распространенных ошибок, обсуждаемых в этой статье – первый шаг к улучшению UX домашней страницы.
Домашняя страница остается «входной дверью» для многих пользователей, начинающих обзор сайта.
Однако, при тестировании заметили, что она также действует как навигационный якорь и «безопасный» способ вернуться к началу.
Поэтому очень важно, чтобы домашняя страница давала понять пользователям (как новичкам, так и опытным), где найти три основных способа поиска продуктов: навигация по категориям, поиск и рекомендации.
Тест содержит 10 900+ элементов домашней страницы и категорий, которые были вручную проверены и оценены командой UX-исследователей Baymard, а также 3100 примера от 60 самых прибыльных сайтов электронной коммерции США и Европы.
В этой статье проанализируют часть этого набора данных, чтобы увидеть текущее состояние UX домашних страниц сайтов электронной коммерции, а также обозначим 8 распространенных ошибок дизайна и стратегических упущений, встречаемых на большинстве сайтов.
Содержание:
Текущее состояние UX домашних страниц
8 распространенных UX-ошибок и стратегических упущений домашних страниц
1. На главной странице 6% сайтов представлен недостаточно широкий ассортимент товаров
2. 59% сайтов используют на главной странице чрезмерно агрессивную и отвлекающую рекламу
3. 75% сайтов, использующих карусели, используют их неправильно
4. 62% сайтов не помогают пользователям выбрать определенную область действия непосредственно с главной страницы
5. 19% сайтов не используют на главной странице персонализированные изображения и дизайн
6. 22% сайтов не отображают поле поиска на главной странице
7. 35% сайтов неправильно используют выбор страны и языка
8. 43% сайтов не используют эффективный стиль интерактивных элементов интерфейса
Качество UX домашней страницы снизилось
Читать: https://ux.pub/issledovanie-glavnoy-stranitsy-saytov-elektronnoy-kommertsii-8-rasprostranennyh-ux-oshibok/
Основные выводы:
Тест 60 веб-сайтов электронной коммерции, проведенный в конце 2020 года показывает, что в целом у домашних страниц неплохой UX.
Однако 32% сайтов предоставляют либо посредственный, либо плохой опыт.
Недопущение 8 распространенных ошибок, обсуждаемых в этой статье – первый шаг к улучшению UX домашней страницы.
Домашняя страница остается «входной дверью» для многих пользователей, начинающих обзор сайта.
Однако, при тестировании заметили, что она также действует как навигационный якорь и «безопасный» способ вернуться к началу.
Поэтому очень важно, чтобы домашняя страница давала понять пользователям (как новичкам, так и опытным), где найти три основных способа поиска продуктов: навигация по категориям, поиск и рекомендации.
Тест содержит 10 900+ элементов домашней страницы и категорий, которые были вручную проверены и оценены командой UX-исследователей Baymard, а также 3100 примера от 60 самых прибыльных сайтов электронной коммерции США и Европы.
В этой статье проанализируют часть этого набора данных, чтобы увидеть текущее состояние UX домашних страниц сайтов электронной коммерции, а также обозначим 8 распространенных ошибок дизайна и стратегических упущений, встречаемых на большинстве сайтов.
Содержание:
Текущее состояние UX домашних страниц
8 распространенных UX-ошибок и стратегических упущений домашних страниц
1. На главной странице 6% сайтов представлен недостаточно широкий ассортимент товаров
2. 59% сайтов используют на главной странице чрезмерно агрессивную и отвлекающую рекламу
3. 75% сайтов, использующих карусели, используют их неправильно
4. 62% сайтов не помогают пользователям выбрать определенную область действия непосредственно с главной страницы
5. 19% сайтов не используют на главной странице персонализированные изображения и дизайн
6. 22% сайтов не отображают поле поиска на главной странице
7. 35% сайтов неправильно используют выбор страны и языка
8. 43% сайтов не используют эффективный стиль интерактивных элементов интерфейса
Качество UX домашней страницы снизилось
Читать: https://ux.pub/issledovanie-glavnoy-stranitsy-saytov-elektronnoy-kommertsii-8-rasprostranennyh-ux-oshibok/
UXPUB 🇺🇦 Дизайн-спільнота
Исследование главной страницы сайтов электронной коммерции. 8 распространенных UX-ошибок
В этой статье мы проанализируем домашние страницы сайтов, а также обозначим 8 распространенных ошибок дизайна и стратегических упущений, встречаемых на большинстве сайтов
6 важных обновлений Behance. Интеграция прототипов, 3D-объектов, NFT-токенов, стримы
Интеграция интерактивных прототипов
Раньше можно было встраивать прототипы из InVision или Marvel, в этой функции нет ничего инновационного, но после обновления функциональности прототипа в Figma кейсы можно украсить макетами с анимацией и эффектом наведения курсора. Это лучше, чем просто JPEG, не так ли?
Чтобы добавить в кейс прототип, вам необходимо связать макеты в Figma, нажать кнопку «Get embed code» в разделе просмотра прототипа и вставить код в кейс с помощью кнопки «Embed Media» или «Embed Prototype». Аналогичный алгоритм присутствует в Adobe XD, но лично я больше привык работать с сервисом Figma. Если вы хотите использовать прототипы из Figma, будьте осторожны, так как к исходному коду можно получить доступ через инспектор кода. Чтобы этого избежать, вы можете перенести макеты в новый документ, запретить копирование объектов или растрировать все элементы в прототипе. А для особо любопытных можно оставить пасхалку в исходном файле.
Добавление 3D-объектов
Эта функция поможет дизайнерам интерьеров показать комнату изнутри, позволяя наблюдателю совершить прогулку с помощью 3D-тура. Кроме того, эта функция подходит, если вам нужно вставить 3D-объект. Например, если вы хотите показать дизайн созданного вами предмета. Чтобы добавить объект, просто скопируйте ссылку из Sketchfab, ArtStation или Autodesk.
Алгоритм действий такой же, как и у прототипов. Кроме того, список источников для импорта довольно обширен: Adobe XD, Adobe Spark, Adobe Voice, Amazon Widget, Appointy, Artstation, Bandcamp и др.
Несмотря на то, что Figma является прямым конкурентом Adobe XD, захватившим значительную часть рынка Adobe, было приятно увидеть ее в этом списке.
Возможность прикрепить файл к кейсу
При создании кейса вы можете указать ссылку на скачивание файла. У вас есть возможность предоставить ссылку на покупку шрифта, который использовался в кейсе или ui-kit, который вы не прочь подарить Junior-дизайнерам для экспериментов. Это было возможно и раньше, но Adobe решила избавиться от этого костыля.
Creative Challenges
Это раздел с небольшими мастер-классами по продуктам Adobe: Photoshop, Illustrator, XD. Здесь вы найдете ежедневные задания для практического изучения функциональности графических редакторов. Задачи короткие и простые, идеально подходят для начинающих. По завершении результат можно отобразить в виде кейса, а лучшие работы получат достижения. Приятным бонусом станет дополнительная ачивка для коллекции.
Проведение собственных стримов
Теперь вы можете не только смотреть прямые трансляции и вебинары, но и записывать свои собственные. Теперь Behance предоставляет возможность проведения вебинаров на собственной платформе. Стримы можно записывать, демонстрируя работу на iPad или ПК. Если у вас есть что рассказать о работе с Fresco, Illustrator или Photoshop на iPad, сделайте это на Behance. Раздел Live был создан именно для этого. Завершенные трансляции будут сохранены в разделе Live Streams.
Платные подписки на авторов
Дизайнеры и художники теперь имеют возможность монетизировать свой контент с помощью Behance. Вы можете пометить файлы для загрузки или видео-уроки с помощью кнопки «Premium Content». Такой контент можно скачать по подписке; размер ежемесячной подписки зависит от вас. На момент написания этой статьи данная функция доступна не всем пользователям, но ее можно получить, подав заявку на участие в бета-тестировании.
Маркетплейс NFT-объектов
Нет, это не шутка. Теперь вы можете разместить в портфолио свои NFT-токены.
Behance позволяет размещать работы в своем профиле на вкладке NFT, если вы продаете свои работы через торговые площадки. Для этого вам необходимо добавить кошелек и привязать учетную запись платформы к своему портфолио с помощью MetaMask, Phantom или Temple. Тип фреймворка, на котором хранится ваш NFT-токен, не имеет значения; главное, чтобы через MetaMask можно было сделать ссылку.
Источник
Интеграция интерактивных прототипов
Раньше можно было встраивать прототипы из InVision или Marvel, в этой функции нет ничего инновационного, но после обновления функциональности прототипа в Figma кейсы можно украсить макетами с анимацией и эффектом наведения курсора. Это лучше, чем просто JPEG, не так ли?
Чтобы добавить в кейс прототип, вам необходимо связать макеты в Figma, нажать кнопку «Get embed code» в разделе просмотра прототипа и вставить код в кейс с помощью кнопки «Embed Media» или «Embed Prototype». Аналогичный алгоритм присутствует в Adobe XD, но лично я больше привык работать с сервисом Figma. Если вы хотите использовать прототипы из Figma, будьте осторожны, так как к исходному коду можно получить доступ через инспектор кода. Чтобы этого избежать, вы можете перенести макеты в новый документ, запретить копирование объектов или растрировать все элементы в прототипе. А для особо любопытных можно оставить пасхалку в исходном файле.
Добавление 3D-объектов
Эта функция поможет дизайнерам интерьеров показать комнату изнутри, позволяя наблюдателю совершить прогулку с помощью 3D-тура. Кроме того, эта функция подходит, если вам нужно вставить 3D-объект. Например, если вы хотите показать дизайн созданного вами предмета. Чтобы добавить объект, просто скопируйте ссылку из Sketchfab, ArtStation или Autodesk.
Алгоритм действий такой же, как и у прототипов. Кроме того, список источников для импорта довольно обширен: Adobe XD, Adobe Spark, Adobe Voice, Amazon Widget, Appointy, Artstation, Bandcamp и др.
Несмотря на то, что Figma является прямым конкурентом Adobe XD, захватившим значительную часть рынка Adobe, было приятно увидеть ее в этом списке.
Возможность прикрепить файл к кейсу
При создании кейса вы можете указать ссылку на скачивание файла. У вас есть возможность предоставить ссылку на покупку шрифта, который использовался в кейсе или ui-kit, который вы не прочь подарить Junior-дизайнерам для экспериментов. Это было возможно и раньше, но Adobe решила избавиться от этого костыля.
Creative Challenges
Это раздел с небольшими мастер-классами по продуктам Adobe: Photoshop, Illustrator, XD. Здесь вы найдете ежедневные задания для практического изучения функциональности графических редакторов. Задачи короткие и простые, идеально подходят для начинающих. По завершении результат можно отобразить в виде кейса, а лучшие работы получат достижения. Приятным бонусом станет дополнительная ачивка для коллекции.
Проведение собственных стримов
Теперь вы можете не только смотреть прямые трансляции и вебинары, но и записывать свои собственные. Теперь Behance предоставляет возможность проведения вебинаров на собственной платформе. Стримы можно записывать, демонстрируя работу на iPad или ПК. Если у вас есть что рассказать о работе с Fresco, Illustrator или Photoshop на iPad, сделайте это на Behance. Раздел Live был создан именно для этого. Завершенные трансляции будут сохранены в разделе Live Streams.
Платные подписки на авторов
Дизайнеры и художники теперь имеют возможность монетизировать свой контент с помощью Behance. Вы можете пометить файлы для загрузки или видео-уроки с помощью кнопки «Premium Content». Такой контент можно скачать по подписке; размер ежемесячной подписки зависит от вас. На момент написания этой статьи данная функция доступна не всем пользователям, но ее можно получить, подав заявку на участие в бета-тестировании.
Маркетплейс NFT-объектов
Нет, это не шутка. Теперь вы можете разместить в портфолио свои NFT-токены.
Behance позволяет размещать работы в своем профиле на вкладке NFT, если вы продаете свои работы через торговые площадки. Для этого вам необходимо добавить кошелек и привязать учетную запись платформы к своему портфолио с помощью MetaMask, Phantom или Temple. Тип фреймворка, на котором хранится ваш NFT-токен, не имеет значения; главное, чтобы через MetaMask можно было сделать ссылку.
Источник
UXPUB 🇺🇦 Дизайн-спільнота
6 важных обновлений Behance. Интеграция прототипов, 3D-объектов, NFT-токенов, стримы
6 важных обновлений Behance, которые сделают ваше портфолио интереснее и выделит среди других
Типографика данных в интерфейсах
Текст составляет большую часть содержимого внутренних, операционных продуктов. Среди множества меток, значений и другой полезной информации, помещенной в диаграммы, графики, списки столбцов и т.п., текст выполняет множество функций и принимает множество форм. Поэтому, когда мы обновили систему интервалов и макет внутренних продуктов, мы знали, что придется заняться и нашей типографикой.
Обзор
В нашей дизайн-системе есть 4 основных стиля типографики, которые помогают потребительским товарам оставаться простыми (принцип K.I.S.S.): стили Headline, Title, Subtitle, и Body.
Базовый набор типографики
В большинстве контекстов, ориентированных на потребителя (в основном мобильных), дизайнерам нужно комбинировать несколько стилей для каждого экрана, чтобы предоставить простой, последовательный и целенаправленный опыт.
Но, когда вы составляете мультизональный макет с навигацией по всему сайту, внутристраничной навигацией, таблицей данных с разбивкой на страницы, соответствующими фильтрами и боковой панелью для дополнительных деталей, вы спрашиваете себя, есть ли еще варианты, которые были бы полезны. И оценив (неправильное) использование наших стилей шрифтов в более чем 75 операционных продуктах Lyft, мы пришли к выводу, что такие варианты есть.
Дизайнеры будут использовать семантически неподходящие стили просто для того, чтобы получить подходящий размер или вес в нужном месте продукта.
Чтобы получить более целостное и подробное представление о потребностях дизайнеров, мы изучили ответы 15 дизайнеров операционных / внутренних инструментов, чтобы узнать какие аспекты типографики необходимо изменить для их продуктов:
Рабочие продукты должны умещаться в более плотном пространстве, например, в таблицах, диаграммах и графиках. Требуются текст и компоненты меньшего размера, которые могут уместиться в ограниченном пространстве.
Размер некоторых шрифтов слишком велик, чтобы нормально работать во всех случаях.
Для типографики нужны наборы шрифтов меньшего размера и семейства шрифтов с открытым исходным кодом.
Требуется моноширинный шрифт для числовых значений в таблице или списке столбцов, чтобы можно было легко сканировать и сравнивать цифры по вертикали.
Наши основные стили и рекомендации не учитывали все сценарии использования оперативной типографики. Так появился TVA (Type Variance Authority), задача которого не только устранять наиболее серьезные нарушения, но и находить варианты, необходимые для поддержки типографики данных.
Сокращение стилей шрифта
Типографика, ориентированная на цель использования
Прежде чем сразу перейти к новым стилям шрифтов, мы обратились за помощью к дизайнерам из команд 10 операционных продуктов, чтобы собрать в таблицу аудита ключевые экраны и организовать различные варианты использования типографики. Мы определили группы категорий свойств шрифтов или паттернов (по оси Y), задав вопрос:
Как дизайнер, размещающий этот кусок текста в интерфейсе, скажите, какую цель или функциональную роль он играет в опыте?
Источник
Текст составляет большую часть содержимого внутренних, операционных продуктов. Среди множества меток, значений и другой полезной информации, помещенной в диаграммы, графики, списки столбцов и т.п., текст выполняет множество функций и принимает множество форм. Поэтому, когда мы обновили систему интервалов и макет внутренних продуктов, мы знали, что придется заняться и нашей типографикой.
Обзор
В нашей дизайн-системе есть 4 основных стиля типографики, которые помогают потребительским товарам оставаться простыми (принцип K.I.S.S.): стили Headline, Title, Subtitle, и Body.
Базовый набор типографики
В большинстве контекстов, ориентированных на потребителя (в основном мобильных), дизайнерам нужно комбинировать несколько стилей для каждого экрана, чтобы предоставить простой, последовательный и целенаправленный опыт.
Но, когда вы составляете мультизональный макет с навигацией по всему сайту, внутристраничной навигацией, таблицей данных с разбивкой на страницы, соответствующими фильтрами и боковой панелью для дополнительных деталей, вы спрашиваете себя, есть ли еще варианты, которые были бы полезны. И оценив (неправильное) использование наших стилей шрифтов в более чем 75 операционных продуктах Lyft, мы пришли к выводу, что такие варианты есть.
Дизайнеры будут использовать семантически неподходящие стили просто для того, чтобы получить подходящий размер или вес в нужном месте продукта.
Чтобы получить более целостное и подробное представление о потребностях дизайнеров, мы изучили ответы 15 дизайнеров операционных / внутренних инструментов, чтобы узнать какие аспекты типографики необходимо изменить для их продуктов:
Рабочие продукты должны умещаться в более плотном пространстве, например, в таблицах, диаграммах и графиках. Требуются текст и компоненты меньшего размера, которые могут уместиться в ограниченном пространстве.
Размер некоторых шрифтов слишком велик, чтобы нормально работать во всех случаях.
Для типографики нужны наборы шрифтов меньшего размера и семейства шрифтов с открытым исходным кодом.
Требуется моноширинный шрифт для числовых значений в таблице или списке столбцов, чтобы можно было легко сканировать и сравнивать цифры по вертикали.
Наши основные стили и рекомендации не учитывали все сценарии использования оперативной типографики. Так появился TVA (Type Variance Authority), задача которого не только устранять наиболее серьезные нарушения, но и находить варианты, необходимые для поддержки типографики данных.
Сокращение стилей шрифта
Типографика, ориентированная на цель использования
Прежде чем сразу перейти к новым стилям шрифтов, мы обратились за помощью к дизайнерам из команд 10 операционных продуктов, чтобы собрать в таблицу аудита ключевые экраны и организовать различные варианты использования типографики. Мы определили группы категорий свойств шрифтов или паттернов (по оси Y), задав вопрос:
Как дизайнер, размещающий этот кусок текста в интерфейсе, скажите, какую цель или функциональную роль он играет в опыте?
Источник
UXPUB 🇺🇦 Спільнота дизайнерів
Типографика данных в интерфейсах
Текст составляет большую часть содержимого внутренних, операционных продуктов. Среди множества меток,...
Доступность: искусство дизайна для всех
7 рекомендаций по созданию более инклюзивного интерфейса.
Одно из самых распространенных модных словечек в дизайн-сообществе – доступность. Но действительно ли мы знаем, что это значит? Доступность – это не только о возможности считывания с экрана, контрасте или больших шрифтах. На фундаментальном уровне доступность – это право каждого человека на доступ к информации. Мы живем в разнообразном мире, и просто неправильно предполагать, что люди получают доступ к цифровым продуктам и воспринимают их одинаково. То, что на самом деле означает доступность, – это проверка, доступен ли ваш контент для всех людей в равной степени.
Существует укоренившийся миф о том, что создание доступного опыта это сложно/дорого/творчески ограничивает процесс. Но если вы думаете о доступности с самого начала, она не потребует дополнительных функций или контента. Следовательно, не будет и дополнительных затрат и усилий. Кроме того, доступность НЕ является препятствием для инноваций. Фактически, творчество любит ограничения. Работа в рамках такого набора заставит вас придумывать творческие решения, которые принесут пользу более широкой аудитории и помогут создать лучшие продукты.
В любом случае имейте в виду: исправление существующего сайта, который не является доступным, обычно требует значительных усилий. Начать можете с использования расширения Axe Chrome для выявления любых нарушений доступности. Если вам повезет, некоторые исправления могут быть относительно простыми.
Читать статью: https://design-glory.com/?p=9322
7 рекомендаций по созданию более инклюзивного интерфейса.
Одно из самых распространенных модных словечек в дизайн-сообществе – доступность. Но действительно ли мы знаем, что это значит? Доступность – это не только о возможности считывания с экрана, контрасте или больших шрифтах. На фундаментальном уровне доступность – это право каждого человека на доступ к информации. Мы живем в разнообразном мире, и просто неправильно предполагать, что люди получают доступ к цифровым продуктам и воспринимают их одинаково. То, что на самом деле означает доступность, – это проверка, доступен ли ваш контент для всех людей в равной степени.
Существует укоренившийся миф о том, что создание доступного опыта это сложно/дорого/творчески ограничивает процесс. Но если вы думаете о доступности с самого начала, она не потребует дополнительных функций или контента. Следовательно, не будет и дополнительных затрат и усилий. Кроме того, доступность НЕ является препятствием для инноваций. Фактически, творчество любит ограничения. Работа в рамках такого набора заставит вас придумывать творческие решения, которые принесут пользу более широкой аудитории и помогут создать лучшие продукты.
В любом случае имейте в виду: исправление существующего сайта, который не является доступным, обычно требует значительных усилий. Начать можете с использования расширения Axe Chrome для выявления любых нарушений доступности. Если вам повезет, некоторые исправления могут быть относительно простыми.
Читать статью: https://design-glory.com/?p=9322
Design Glory
Design Glory - Сайт для дизайнеров
Материалы для начинающих и опытных UX\UI дизайнеров. Делимся инсайдами от лучших брендов, даем практические советы и публикуем свежие новости сферы дизайна.
Дизайн-система: синдром LEGO-наборов
Обеспечение баланса между согласованностью и вкладом в развитие дизайн-систем должно быть первоочередной задачей дизайнера.
Что произойдет, если 5 дизайнеров будут одновременно создавать текстовое поле?
Они получат ненужные различия: разные цвета границ, разное закругление углов или разные структуры.
Подобная непреднамеренная несогласованность имеет, как минимум, два негативных момента. Во-первых, она создает для пользователей проблему юзабилити и приводит к дорогостоящим затратам на взаимодействие. Во-вторых, это нагружает разработчиков дополнительной работой.
Библиотека паттернов обычно помогает решить эту проблему. Команда будет использовать существующую библиотеку вместо того, чтобы создавать ненужные противоречия. Хотя этот подход может предотвратить появление непреднамеренных несоответствий, мы должны быть осторожны, потому что он может привести к другой проблеме.
Библиотека паттернов может породить синдром наборов LEGO
Без сомнения, собранные наборы конструктора LEGO выглядят великолепно.
Однако, как отмечает доктор философии Дерек Кабрера, взрослые, производящие наборы LEGO, мыслят творчески. Но в итоге дети учатся следовать инструкциям.
Когда культура, окружающая дизайн-систему, посылает сигнал: «Пожалуйста, используйте библиотеку паттернов, чтобы сохранить последовательность». Подобный образ мышления эгоистичен.
Команда разработчиков дизайн-системы видит успех, когда их библиотеки широко принимают, и в итоге стремится к последовательности ради последовательности.
Такой подход заставляет дизайнеров смотреть на дизайн-систему, как на наборы LEGO.
В результате, когда дизайнеры работают над конкретной проблемой взаимодействия, они думают: «Хорошо, какие из доступных компонентов или паттернов я могу использовать?» И при этом они не оценивают поможет ли компонент эффективно решить проблему.
Я видел это снова и снова. Но результат исследования дизайн-системы, проведенный Seesparkbox, может стать сигналом. 54% респондентов опроса сообщили, что пользователи их дизайн-системы редко вносят вклад в ее развитие или вообще не участвуют в ее развитии.
Я подозреваю, что синдром наборов LEGO – один из факторов, которые не дают нам возможности внести свой вклад.
Проблема этого явления заключается в том, что система устаревает. Без какого-либо участия и вклада со стороны сообщества это просто библиотека паттернов, а не дизайн-система.
Поиск баланса
Если вы хотите использовать библиотеку паттернов для устранения непреднамеренной несогласованности, подумайте, какую культуру в компании вы хотите сформировать.
Участие и вклад сообщества – вот что отличает дизайн-системы от библиотек паттернов. Я узнал это на собственном горьком опыте в предыдущей компании, и потратил более 3 месяцев, чтобы решить проблему отсутствия вклада в развитие дизайн-системы.
Как с этим бороться? Подумайте о формировании сообщества, о чем мы подробнее поговорим в следующей статье.
Мысленное упражнение
— Как часто пользователи системы предоставляют информацию о вашей библиотеке паттернов?
— Как часто пользователи системы предлагают новый компонент или паттерн?
— Если вклад относительно невелик, что им мешает внести свой вклад в развитие системы? Вы думали о создании опыта участия?
— Как бы вы отреагировали на пользователей системы, которые создали новый компонент, не передавая его обратно в дизайн-систему?
—Что пользователи дизайн-системы думают о ней?
Источник
Обеспечение баланса между согласованностью и вкладом в развитие дизайн-систем должно быть первоочередной задачей дизайнера.
Что произойдет, если 5 дизайнеров будут одновременно создавать текстовое поле?
Они получат ненужные различия: разные цвета границ, разное закругление углов или разные структуры.
Подобная непреднамеренная несогласованность имеет, как минимум, два негативных момента. Во-первых, она создает для пользователей проблему юзабилити и приводит к дорогостоящим затратам на взаимодействие. Во-вторых, это нагружает разработчиков дополнительной работой.
Библиотека паттернов обычно помогает решить эту проблему. Команда будет использовать существующую библиотеку вместо того, чтобы создавать ненужные противоречия. Хотя этот подход может предотвратить появление непреднамеренных несоответствий, мы должны быть осторожны, потому что он может привести к другой проблеме.
Библиотека паттернов может породить синдром наборов LEGO
Без сомнения, собранные наборы конструктора LEGO выглядят великолепно.
Однако, как отмечает доктор философии Дерек Кабрера, взрослые, производящие наборы LEGO, мыслят творчески. Но в итоге дети учатся следовать инструкциям.
Когда культура, окружающая дизайн-систему, посылает сигнал: «Пожалуйста, используйте библиотеку паттернов, чтобы сохранить последовательность». Подобный образ мышления эгоистичен.
Команда разработчиков дизайн-системы видит успех, когда их библиотеки широко принимают, и в итоге стремится к последовательности ради последовательности.
Такой подход заставляет дизайнеров смотреть на дизайн-систему, как на наборы LEGO.
В результате, когда дизайнеры работают над конкретной проблемой взаимодействия, они думают: «Хорошо, какие из доступных компонентов или паттернов я могу использовать?» И при этом они не оценивают поможет ли компонент эффективно решить проблему.
Я видел это снова и снова. Но результат исследования дизайн-системы, проведенный Seesparkbox, может стать сигналом. 54% респондентов опроса сообщили, что пользователи их дизайн-системы редко вносят вклад в ее развитие или вообще не участвуют в ее развитии.
Я подозреваю, что синдром наборов LEGO – один из факторов, которые не дают нам возможности внести свой вклад.
Проблема этого явления заключается в том, что система устаревает. Без какого-либо участия и вклада со стороны сообщества это просто библиотека паттернов, а не дизайн-система.
Поиск баланса
Если вы хотите использовать библиотеку паттернов для устранения непреднамеренной несогласованности, подумайте, какую культуру в компании вы хотите сформировать.
Участие и вклад сообщества – вот что отличает дизайн-системы от библиотек паттернов. Я узнал это на собственном горьком опыте в предыдущей компании, и потратил более 3 месяцев, чтобы решить проблему отсутствия вклада в развитие дизайн-системы.
Как с этим бороться? Подумайте о формировании сообщества, о чем мы подробнее поговорим в следующей статье.
Мысленное упражнение
— Как часто пользователи системы предоставляют информацию о вашей библиотеке паттернов?
— Как часто пользователи системы предлагают новый компонент или паттерн?
— Если вклад относительно невелик, что им мешает внести свой вклад в развитие системы? Вы думали о создании опыта участия?
— Как бы вы отреагировали на пользователей системы, которые создали новый компонент, не передавая его обратно в дизайн-систему?
—Что пользователи дизайн-системы думают о ней?
Источник
UXPUB 🇺🇦 Дизайн-спільнота
Дизайн-система: синдром LEGO-наборов
Команда разработчиков дизайн-системы видит успех, когда их библиотеки широко принимают, и в итоге стремится к последовательности ради последовательности
Приложения с лучшими примерами онбординга
Качественный онбординг знакомит пользователей с основным функционалом, улучшает пользовательский опыт и создает позитивное первое впечатление от приложения.
1. Blinkist
Это сервис для читателей, которые хотят послушать краткое изложение книг. Превращает книги в статьи на 5-15 минут чтения. Экраны помогают пользователю понять основную идею сервиса.
2. Vimeo
Приложение связано с созданием и редактированием видео, подробно описывают красоту и функциональность своей платформы.
3. Revolut
Это платёжная система, пoзвoляющaя пpoвoдить финансовые oпepaции. Используя простой текст и изображения рассказывают пользователям о доступных функциях.
4. Strava
Сервис для отслеживания активности спортсменов. Кратко и понятно описывают функционал и особенности своего приложения.
5. Cash App
Мобильный платёжный сервис, позволяющий пользователям переводить деньги. С помощью красивых иллюстраций и однострочных пояснений его создателям удается объяснить его назначение.
Источник
Качественный онбординг знакомит пользователей с основным функционалом, улучшает пользовательский опыт и создает позитивное первое впечатление от приложения.
1. Blinkist
Это сервис для читателей, которые хотят послушать краткое изложение книг. Превращает книги в статьи на 5-15 минут чтения. Экраны помогают пользователю понять основную идею сервиса.
2. Vimeo
Приложение связано с созданием и редактированием видео, подробно описывают красоту и функциональность своей платформы.
3. Revolut
Это платёжная система, пoзвoляющaя пpoвoдить финансовые oпepaции. Используя простой текст и изображения рассказывают пользователям о доступных функциях.
4. Strava
Сервис для отслеживания активности спортсменов. Кратко и понятно описывают функционал и особенности своего приложения.
5. Cash App
Мобильный платёжный сервис, позволяющий пользователям переводить деньги. С помощью красивых иллюстраций и однострочных пояснений его создателям удается объяснить его назначение.
Источник
Скрытое vs Неактивное состояние
Когда следует использовать скрытые/неактивное состояние?
Неактивное состояние применяют к компоненту, когда пользователю не разрешено взаимодействовать с ним из-за определенных требований. Когда элемент управления неактивный, он обычно выглядит слегка прозрачным или менее контрастным, чем состояние по умолчанию. Он перестает принимать данные (состояние только для чтения). Когда же элемент управления скрыт, его больше нет в интерфейсе вообще. В обоих случаях отключенные состояния полностью удаляют интерактивную функцию компонента.
Неактивное состояние
Преимущества отображения кнопки в неактивном состоянии:
Обнаруживаемость: многие пользователи учатся использовать приложение, читая ярлыки. Не убирая неактивные элементы, мы показываем им, на что способно приложение. Даже когда для включения кнопки требуются дополнительные действия.
Обучаемость: пользователь может узнать, где расположены элементы управления и кнопки в пользовательском интерфейсе.
Недостатки отображения кнопки в неактивном состоянии:
Это увеличивает когнитивную нагрузку: оставленные неактивные кнопки заставляют пользователей лишний раз думать. Вид неактивной кнопки вызывает у них замешательство: почему она недоступна и как ее активировать? Согласно «Не заставляйте меня думать» Стива Круга, мы должны удалить элементы, которые заставляют пользователя думать.
Некоторым пользователям кнопка покажется интерактивной: если они не реализованы правильно, неактивные кнопки могут сбить пользователей с толку. Например, некоторые пользователи могут принять серые кнопки за второстепенные действия.
Доступность: их трудно увидеть – Руководство по обеспечению доступности веб-контента не требует достаточных коэффициентов контрастности для неактивных кнопок. Они также не дают никакого фидбека пользователям.
Скрытое состояние
Преимущества скрытия кнопки:
Снижает когнитивную нагрузку: пользователи могут больше сосредоточиться на выполняемой задаче. Показывая им только то, что нужно, мы убираем отвлекающие факторы.
Простота: исключение неактивных кнопок экономит место. Оно позволяет нам изменять элементы управления, используя одно и то же пространство для разных состояний.
Недостатки скрытия кнопки:
При чрезмерном использовании это может отвлекать. Постоянное скрытие и отображение кнопок может отвлекать, потому что постоянно меняется вид.
Плохая обнаруживаемость: пользователи могут искать скрытый вариант.
Какой способ использовать?
Прежде чем решить, какое состояние использовать, попытайтесь ответить на следующие вопросы: Что нужно знать пользователю на этом этапе? Что пользователю нужно сделать на этом этапе? Узнает ли пользователь об этой функции? Будет ли пользователь тратить много времени на ее поиски?
Ответы на вышеуказанные вопросы могут помочь нам выяснить, какое состояния использовать.
Выбирайте неактивное состояние, когда:
Кнопка временно неактивна или требует от пользователя каких-то действий для изменения ее статуса. В этом случае было бы полезно добавить пузыри-подсказки/всплывающие подсказки/кнопки раскрытия подробностей, объясняющие критерии использования и информирующие пользователей о том, какие действия они могут предпринять, чтобы активировать кнопку.
Если вы хотите, чтобы пользователь знал, что элемент управления существует, но сейчас неактивен.
Если пользователь где-то уже видел эту функцию, то теперь вдруг не сможет найти ее снова, если она будет скрыта. И если при этом нет никаких объяснений, почему сейчас функция пропала.
Выбирайте скрытое состояние, когда:
Пользователь не имеет права использовать элемент управления, а ситуация, когда этот элемент будет ему доступен, не наступит никогда.
Если это элемент управления, который активен только в очень редких ситуациях. Не показывайте пользователю кнопку, которую нельзя использовать или которую нельзя активировать какими-то действиями.
Если на странице много отключенных функций. Например, целый дополнительный блок входных данных формы.
Источник
Когда следует использовать скрытые/неактивное состояние?
Неактивное состояние применяют к компоненту, когда пользователю не разрешено взаимодействовать с ним из-за определенных требований. Когда элемент управления неактивный, он обычно выглядит слегка прозрачным или менее контрастным, чем состояние по умолчанию. Он перестает принимать данные (состояние только для чтения). Когда же элемент управления скрыт, его больше нет в интерфейсе вообще. В обоих случаях отключенные состояния полностью удаляют интерактивную функцию компонента.
Неактивное состояние
Преимущества отображения кнопки в неактивном состоянии:
Обнаруживаемость: многие пользователи учатся использовать приложение, читая ярлыки. Не убирая неактивные элементы, мы показываем им, на что способно приложение. Даже когда для включения кнопки требуются дополнительные действия.
Обучаемость: пользователь может узнать, где расположены элементы управления и кнопки в пользовательском интерфейсе.
Недостатки отображения кнопки в неактивном состоянии:
Это увеличивает когнитивную нагрузку: оставленные неактивные кнопки заставляют пользователей лишний раз думать. Вид неактивной кнопки вызывает у них замешательство: почему она недоступна и как ее активировать? Согласно «Не заставляйте меня думать» Стива Круга, мы должны удалить элементы, которые заставляют пользователя думать.
Некоторым пользователям кнопка покажется интерактивной: если они не реализованы правильно, неактивные кнопки могут сбить пользователей с толку. Например, некоторые пользователи могут принять серые кнопки за второстепенные действия.
Доступность: их трудно увидеть – Руководство по обеспечению доступности веб-контента не требует достаточных коэффициентов контрастности для неактивных кнопок. Они также не дают никакого фидбека пользователям.
Скрытое состояние
Преимущества скрытия кнопки:
Снижает когнитивную нагрузку: пользователи могут больше сосредоточиться на выполняемой задаче. Показывая им только то, что нужно, мы убираем отвлекающие факторы.
Простота: исключение неактивных кнопок экономит место. Оно позволяет нам изменять элементы управления, используя одно и то же пространство для разных состояний.
Недостатки скрытия кнопки:
При чрезмерном использовании это может отвлекать. Постоянное скрытие и отображение кнопок может отвлекать, потому что постоянно меняется вид.
Плохая обнаруживаемость: пользователи могут искать скрытый вариант.
Какой способ использовать?
Прежде чем решить, какое состояние использовать, попытайтесь ответить на следующие вопросы: Что нужно знать пользователю на этом этапе? Что пользователю нужно сделать на этом этапе? Узнает ли пользователь об этой функции? Будет ли пользователь тратить много времени на ее поиски?
Ответы на вышеуказанные вопросы могут помочь нам выяснить, какое состояния использовать.
Выбирайте неактивное состояние, когда:
Кнопка временно неактивна или требует от пользователя каких-то действий для изменения ее статуса. В этом случае было бы полезно добавить пузыри-подсказки/всплывающие подсказки/кнопки раскрытия подробностей, объясняющие критерии использования и информирующие пользователей о том, какие действия они могут предпринять, чтобы активировать кнопку.
Если вы хотите, чтобы пользователь знал, что элемент управления существует, но сейчас неактивен.
Если пользователь где-то уже видел эту функцию, то теперь вдруг не сможет найти ее снова, если она будет скрыта. И если при этом нет никаких объяснений, почему сейчас функция пропала.
Выбирайте скрытое состояние, когда:
Пользователь не имеет права использовать элемент управления, а ситуация, когда этот элемент будет ему доступен, не наступит никогда.
Если это элемент управления, который активен только в очень редких ситуациях. Не показывайте пользователю кнопку, которую нельзя использовать или которую нельзя активировать какими-то действиями.
Если на странице много отключенных функций. Например, целый дополнительный блок входных данных формы.
Источник
Градиенты и как их правильно использовать в UI-дизайне
Уже довольно давно градиенты плотно обосновались в UI-дизайне. Но что они такое и как они выглядят? В чем разница между линейными, радиальными и угловыми градиентами? И как правильно использовать градиенты в вашем UI?
Градиент – это постепенный переход от одного цвета к другому или нескольким цветам. В современном UI-дизайне градиенты очень популярны. Сегодня я объясню, зачем использовать градиенты, покажу, как их создавать, как выбирать для них цвета.
Содержание статьи
Что такое градиент с научной точки зрения?
Что такое градиент на человеческом языке?
Еще одна причина использовать градиенты
Типы градиентов
— Линейный градиент
— Радиальный градиент
— Угловой градиент
— Сетчатые градиенты
Выбор цветов для градиентов
— Для плавности градиентов выбирайте цвета похожих оттенков
— Избегайте сероватых цветов в центре
— Родственные цвета
— Изображение-тизер
Читать: https://design-glory.com/?p=10651
Уже довольно давно градиенты плотно обосновались в UI-дизайне. Но что они такое и как они выглядят? В чем разница между линейными, радиальными и угловыми градиентами? И как правильно использовать градиенты в вашем UI?
Градиент – это постепенный переход от одного цвета к другому или нескольким цветам. В современном UI-дизайне градиенты очень популярны. Сегодня я объясню, зачем использовать градиенты, покажу, как их создавать, как выбирать для них цвета.
Содержание статьи
Что такое градиент с научной точки зрения?
Что такое градиент на человеческом языке?
Еще одна причина использовать градиенты
Типы градиентов
— Линейный градиент
— Радиальный градиент
— Угловой градиент
— Сетчатые градиенты
Выбор цветов для градиентов
— Для плавности градиентов выбирайте цвета похожих оттенков
— Избегайте сероватых цветов в центре
— Родственные цвета
— Изображение-тизер
Читать: https://design-glory.com/?p=10651
Design Glory
Design Glory - Сайт для дизайнеров
Материалы для начинающих и опытных UX\UI дизайнеров. Делимся инсайдами от лучших брендов, даем практические советы и публикуем свежие новости сферы дизайна.
Пошаговый план. Как вернуть творческую работу в нужное русло после большой паузы
Художница и дизайнер Колин Байк рассказывает, как сделать набор слайдов «Что дальше?»
Как вернутся к проекту, который слишком долго лежал на полке? Это так сложно: вы берете его в руки, и вам хочется снова начать над ним работать. Но вы не можете заставить себя, потому что даже не знаете, с чего начать. Этому и посвящена сегодняшняя статья Колин Байк. Она учит нас, как сделать набор слайдов «Что дальше?», который поможет вам восстановить контекст для вашей творческой работы и подобрать проект, который вы так долго держали на полке.
Когда в марте прошлого года в Нью-Йорке разразилась пандемия, я отложила анимационный фильм, над которым тогда работала. Фактически, я перестала творить.
Поразительно, как всего за одну ночь я плавно перестала рисовать, хотя до этого делала 60 иллюстраций в день. В один из дней я работала в привычном быстром темпе. А на следующий день я вообще ничего не делала. И я не боролась с этим. Это казалось естественным, это было подобно возвращению в утробу матери.
После президентских выборов в США в 2020 году и начала вакцинации я почувствовала, что выхожу из спячки. Были небольшие сигналы, подобные покалыванию нервов, когда конечность снова обретает чувствительность: я поймала себя на мысли, что снова думаю о своей анимационной короткометражке, которую давно отложила в сторону. Я захотела закончить ее, показать миру, начать что-то еще.
После почти года незапланированной паузы я проделала следующее упражнение, чтобы вернуться в нормальное состояние. Я создала набор слайдов, посвященных невероятно непоэтичным и приземленным вещам.
И все же я не могу не отметить, насколько мощной и эффективной оказался этот способ. Он помог мне перегруппироваться и вернуть былую скорость и продуктивность. Он помог мне выбраться из колеи и начать новую главу.
В конце статьи я добавляю ссылку на шаблон на тот случай, если вы решите самостоятельно изучить нечто подобное.
Я методично начала с вопросов и провокаций. Чтобы систематизировать свои мысли, я использовала Keynote – приложение, с помощью которого я изучала истории продуктов и создавала быстрые и грубые прототипы, работая дизайнером в Twitter много лет назад. Это универсальный инструмент с мощными возможностями перехода и обработки растровых изображений.
Слайды заставляют вас последовательно излагать мысли в контексте повествования. Рассказывая кому-то историю, вы соединяете точки. Чтобы быть эффективным, набор слайдов должен быть четким, кратким и понятным. Он идеально подходит для представления сложных идей.
В то же время слайды освобождают вас от бремени предварительной организации, потому что их очень легко переупорядочивать и перегруппировывать. Вы можете быть лаконичными, вкладывая более развернутые мысли в заметки. Вы можете во многом полагаться на визуальные эффекты.
Читать: https://ux.pub/poshagovyy-plan-kak-vernut-tvorcheskuyu-rabotu-v-nuzhnoe-ruslo-posle-bolshoy-pauzy/
Художница и дизайнер Колин Байк рассказывает, как сделать набор слайдов «Что дальше?»
Как вернутся к проекту, который слишком долго лежал на полке? Это так сложно: вы берете его в руки, и вам хочется снова начать над ним работать. Но вы не можете заставить себя, потому что даже не знаете, с чего начать. Этому и посвящена сегодняшняя статья Колин Байк. Она учит нас, как сделать набор слайдов «Что дальше?», который поможет вам восстановить контекст для вашей творческой работы и подобрать проект, который вы так долго держали на полке.
Когда в марте прошлого года в Нью-Йорке разразилась пандемия, я отложила анимационный фильм, над которым тогда работала. Фактически, я перестала творить.
Поразительно, как всего за одну ночь я плавно перестала рисовать, хотя до этого делала 60 иллюстраций в день. В один из дней я работала в привычном быстром темпе. А на следующий день я вообще ничего не делала. И я не боролась с этим. Это казалось естественным, это было подобно возвращению в утробу матери.
После президентских выборов в США в 2020 году и начала вакцинации я почувствовала, что выхожу из спячки. Были небольшие сигналы, подобные покалыванию нервов, когда конечность снова обретает чувствительность: я поймала себя на мысли, что снова думаю о своей анимационной короткометражке, которую давно отложила в сторону. Я захотела закончить ее, показать миру, начать что-то еще.
После почти года незапланированной паузы я проделала следующее упражнение, чтобы вернуться в нормальное состояние. Я создала набор слайдов, посвященных невероятно непоэтичным и приземленным вещам.
И все же я не могу не отметить, насколько мощной и эффективной оказался этот способ. Он помог мне перегруппироваться и вернуть былую скорость и продуктивность. Он помог мне выбраться из колеи и начать новую главу.
В конце статьи я добавляю ссылку на шаблон на тот случай, если вы решите самостоятельно изучить нечто подобное.
Я методично начала с вопросов и провокаций. Чтобы систематизировать свои мысли, я использовала Keynote – приложение, с помощью которого я изучала истории продуктов и создавала быстрые и грубые прототипы, работая дизайнером в Twitter много лет назад. Это универсальный инструмент с мощными возможностями перехода и обработки растровых изображений.
Слайды заставляют вас последовательно излагать мысли в контексте повествования. Рассказывая кому-то историю, вы соединяете точки. Чтобы быть эффективным, набор слайдов должен быть четким, кратким и понятным. Он идеально подходит для представления сложных идей.
В то же время слайды освобождают вас от бремени предварительной организации, потому что их очень легко переупорядочивать и перегруппировывать. Вы можете быть лаконичными, вкладывая более развернутые мысли в заметки. Вы можете во многом полагаться на визуальные эффекты.
Читать: https://ux.pub/poshagovyy-plan-kak-vernut-tvorcheskuyu-rabotu-v-nuzhnoe-ruslo-posle-bolshoy-pauzy/
UXPUB 🇺🇦 Дизайн-спільнота
Пошаговый план. Как вернуть творческую работу в нужное русло после большой паузы
Художница и дизайнер Колин Байк рассказывает, как построить процесс работы со слайдами и вернуть проект, который долго лежал на полке
3 рекомендации по проектированию пустых состояний в сложных приложениях
Пустые состояния предоставляют дизайнерам возможность сообщать о состоянии системы, облегчают ее освоение и указывают прямые пути для решения ключевых задач. В этой статье содержится руководство по проектированию пустого состояния диалоговых окон с контейнерами без содержимого.
Иногда пользователи будут сталкиваться с пустыми состояниями в приложении: контейнерами, экранами или панелями, для которых контент еще не существует или не может быть отображен по какой-либо причине.
Пустые состояния, особенно в сложных приложениях, которые не были полностью настроены пользователем, часто встречаются во время онбординга и первого использования. Вот ряд типичных сценариев, когда пользователи могут столкнуться с пустыми состояниями в приложении:
Когда пользователь не отметил какие-либо элементы, как избранные или еще не открывал файлы – контейнеры, предназначенные для отображения списков избранного или недавно просмотренных элементов, будут пустыми.
Когда приложение поддерживает предупреждения, но пользователь еще не настроил их – панель или диалоговое окно, где в конечном итоге появятся эти предупреждения, будут пустыми.
Когда приложение состоит из различных рабочих пространств или дашбордов, но пользователь не добавил контент в эти области.
Список результатов поиска, если ничего не найдено, а также в других случаях, когда команда приводит к нулевому результату.
По умолчанию пустое пространство остается пустым, не отображая контент для пользователя, пока оно не будет настроено или кастомизировано. Хотя такой подход может сэкономить время разработки (или даже быть намеренным решением во время раннего бета-проектирования продукта, когда в приоритете другие функции), он в конечном итоге создает путаницу и снижает доверие пользователей. Вы упускаете возможности для повышения юзабилити и легкости освоения приложения, а также наглядности ключевых функций.
Пустые состояния, которые были созданы намеренно, а не оставлены на потом, могут быть использованы для:
Сообщения пользователю статуса системы
Помощи пользователям в обнаружении неиспользуемых функций и повышения легкости освоения приложения
Обеспечения путей для начала выполнения ключевых задач.
Читать полностью: https://ux.pub/3-rekomendatsii-po-proektirovaniyu-pustyh-sostoyaniy-v-slozhnyh-prilozheniyah/
Пустые состояния предоставляют дизайнерам возможность сообщать о состоянии системы, облегчают ее освоение и указывают прямые пути для решения ключевых задач. В этой статье содержится руководство по проектированию пустого состояния диалоговых окон с контейнерами без содержимого.
Иногда пользователи будут сталкиваться с пустыми состояниями в приложении: контейнерами, экранами или панелями, для которых контент еще не существует или не может быть отображен по какой-либо причине.
Пустые состояния, особенно в сложных приложениях, которые не были полностью настроены пользователем, часто встречаются во время онбординга и первого использования. Вот ряд типичных сценариев, когда пользователи могут столкнуться с пустыми состояниями в приложении:
Когда пользователь не отметил какие-либо элементы, как избранные или еще не открывал файлы – контейнеры, предназначенные для отображения списков избранного или недавно просмотренных элементов, будут пустыми.
Когда приложение поддерживает предупреждения, но пользователь еще не настроил их – панель или диалоговое окно, где в конечном итоге появятся эти предупреждения, будут пустыми.
Когда приложение состоит из различных рабочих пространств или дашбордов, но пользователь не добавил контент в эти области.
Список результатов поиска, если ничего не найдено, а также в других случаях, когда команда приводит к нулевому результату.
По умолчанию пустое пространство остается пустым, не отображая контент для пользователя, пока оно не будет настроено или кастомизировано. Хотя такой подход может сэкономить время разработки (или даже быть намеренным решением во время раннего бета-проектирования продукта, когда в приоритете другие функции), он в конечном итоге создает путаницу и снижает доверие пользователей. Вы упускаете возможности для повышения юзабилити и легкости освоения приложения, а также наглядности ключевых функций.
Пустые состояния, которые были созданы намеренно, а не оставлены на потом, могут быть использованы для:
Сообщения пользователю статуса системы
Помощи пользователям в обнаружении неиспользуемых функций и повышения легкости освоения приложения
Обеспечения путей для начала выполнения ключевых задач.
Читать полностью: https://ux.pub/3-rekomendatsii-po-proektirovaniyu-pustyh-sostoyaniy-v-slozhnyh-prilozheniyah/
UXPUB 🇺🇦 Дизайн-спільнота
3 рекомендации по проектированию пустых состояний в сложных приложениях
В статье содержится руководство по проектированию пустого состояния диалоговых окон с контейнерами без содержимого
7 вредных советов дизайнеру
1. Все-все делай в одиночку
Хорошего дизайнера отличает то, что он никого не отвлекает и может выполнить все самостоятельно. Он знает все технические аспекты проекта, бизнес-логику заказчика, все паттерны проектирования. Сам напишет все тексты, нарисует все иконки. Исследования в одиночку будут, конечно же, объективными. Не важно, насколько профессионально все будет выполнено или сколько лишних часов будет потрачено, главное, что сам!
P.S. Конечно, самостоятельная работа прокачивает тебя, но у этого тоже есть минусы. Взгляд может замылиться, или ты можешь не так глубоко понять, что нужно заказчику. Не забывай задавать уточняющие вопросы, даже когда уже прошло интервью с заказчиком. Не бойся задавать вопросы и коллегам.
2. Помни, что на работе тебя всему научат
Попадая в команду дизайнеров, будь уверен, что у каждого сотрудника будет много времени на твое обучение, что компания готова на это тратить свои ресурсы. Ты придешь, и тебя всему научат.
P.S. Очень часто новички ищут компанию, в которой их будут обучать, но это не так часто случается, поэтому даже после того, как тебе дали проект, следует учиться дальше. Хорошо, если тебе повезло, и есть дизайнер, с которым можно посоветоваться. Но если такого нет, то обучаться придется на своих ошибках, и в этом нет ничего плохого.
3. Будь перфекционистом
Макеты настоящего профессионала точные до пикселя, в которых нет дробных частей. Композиции построены по золотому сечению. Состояния отрисованы до мельчайших подробностей.
P.S. Если всегда так работать, то можно много времени потратить просто на то, чтобы доводить макеты до идеального состояния. Не говоря о уже том, что такой темп работы ведет к выгоранию. Используй, например, размеры кратные 8 пикселям и просто предупреди об этом разработку. Закладывай время на возможные правки, ошибки, коммуникацию с разработчиками.
4. Правки — это плохо
Если кто-то делает замечание по поводу твоих макетов – воспринимай это как личное оскорбление, ведь дизайнер тут ты! Ты всегда знаешь, как лучше. Заказчик ведь совсем не разбирается в дизайне.
P.S. Возможно, заказчик не сможет объяснить, что его смущает в твоей работе и предложит свой вариант, который, по твоему мнению, будет не самым удачным. Но в твоих силах попробовать его понять, найти компромисс или предложить еще один или два варианта.
5. Изобретай велосипед, придумывай новые паттерны
Чем уникальнее твое решение, тем лучше, и ничего страшного, что пользователей и заказчика оно будет вгонять в ступор. А коллеги из разработки не будут спать ночами, вспоминая, какой ты крутой дизайнер, воплощая твою гениальную задумку в жизнь.
P.S. Да, использовать хорошие паттерны – это отличная идея, и пользователи чаще всего с ними будут уже знакомы. С разработчиками тоже нужно искать компромиссы, а по нестандартным решениям лучше консультироваться с ними заранее.
6. Используй конференции по дизайну для обучения
Очень важно ходить на конференции, сидеть с тетрадкой и записывать все слова спикеров. Конечно, не нужно знакомиться и общаться с участниками конференции. Это будет отвлекать тебя от усвоения новой информации.
P.S. Не стесняйся общаться с такими же дизайнерами, как и ты, в перерывах между докладами, ищи своих единомышленников. Оффлайн конференции – отличный способ для этого. Такие действия – хорошая прокачка софт скиллов, которые тебе будут очень нужны в работе на всех этапах.
7. Прокачивай только хард скиллы
Как и в совете выше, не стоит распыляться на что-то, кроме изучения дизайна и инструментов. Если ты отлично проектируешь интерфейс, знаешь наизусть гайдлайны Android и iOS – все двери тебе открыты. Дизайнеру не обязательно уметь искать общий язык с разработчиками и заказчиками.
P.S. Прокачивая навыки в инструментах, типографике, не забывай учиться договариваться и понимать людей, с которыми ты работаешь. Разберись немного в психологии. Это также поможет тебе понимать пользователей и их цели, и ты будешь эффективнее защищать свои решения.
Источник
1. Все-все делай в одиночку
Хорошего дизайнера отличает то, что он никого не отвлекает и может выполнить все самостоятельно. Он знает все технические аспекты проекта, бизнес-логику заказчика, все паттерны проектирования. Сам напишет все тексты, нарисует все иконки. Исследования в одиночку будут, конечно же, объективными. Не важно, насколько профессионально все будет выполнено или сколько лишних часов будет потрачено, главное, что сам!
P.S. Конечно, самостоятельная работа прокачивает тебя, но у этого тоже есть минусы. Взгляд может замылиться, или ты можешь не так глубоко понять, что нужно заказчику. Не забывай задавать уточняющие вопросы, даже когда уже прошло интервью с заказчиком. Не бойся задавать вопросы и коллегам.
2. Помни, что на работе тебя всему научат
Попадая в команду дизайнеров, будь уверен, что у каждого сотрудника будет много времени на твое обучение, что компания готова на это тратить свои ресурсы. Ты придешь, и тебя всему научат.
P.S. Очень часто новички ищут компанию, в которой их будут обучать, но это не так часто случается, поэтому даже после того, как тебе дали проект, следует учиться дальше. Хорошо, если тебе повезло, и есть дизайнер, с которым можно посоветоваться. Но если такого нет, то обучаться придется на своих ошибках, и в этом нет ничего плохого.
3. Будь перфекционистом
Макеты настоящего профессионала точные до пикселя, в которых нет дробных частей. Композиции построены по золотому сечению. Состояния отрисованы до мельчайших подробностей.
P.S. Если всегда так работать, то можно много времени потратить просто на то, чтобы доводить макеты до идеального состояния. Не говоря о уже том, что такой темп работы ведет к выгоранию. Используй, например, размеры кратные 8 пикселям и просто предупреди об этом разработку. Закладывай время на возможные правки, ошибки, коммуникацию с разработчиками.
4. Правки — это плохо
Если кто-то делает замечание по поводу твоих макетов – воспринимай это как личное оскорбление, ведь дизайнер тут ты! Ты всегда знаешь, как лучше. Заказчик ведь совсем не разбирается в дизайне.
P.S. Возможно, заказчик не сможет объяснить, что его смущает в твоей работе и предложит свой вариант, который, по твоему мнению, будет не самым удачным. Но в твоих силах попробовать его понять, найти компромисс или предложить еще один или два варианта.
5. Изобретай велосипед, придумывай новые паттерны
Чем уникальнее твое решение, тем лучше, и ничего страшного, что пользователей и заказчика оно будет вгонять в ступор. А коллеги из разработки не будут спать ночами, вспоминая, какой ты крутой дизайнер, воплощая твою гениальную задумку в жизнь.
P.S. Да, использовать хорошие паттерны – это отличная идея, и пользователи чаще всего с ними будут уже знакомы. С разработчиками тоже нужно искать компромиссы, а по нестандартным решениям лучше консультироваться с ними заранее.
6. Используй конференции по дизайну для обучения
Очень важно ходить на конференции, сидеть с тетрадкой и записывать все слова спикеров. Конечно, не нужно знакомиться и общаться с участниками конференции. Это будет отвлекать тебя от усвоения новой информации.
P.S. Не стесняйся общаться с такими же дизайнерами, как и ты, в перерывах между докладами, ищи своих единомышленников. Оффлайн конференции – отличный способ для этого. Такие действия – хорошая прокачка софт скиллов, которые тебе будут очень нужны в работе на всех этапах.
7. Прокачивай только хард скиллы
Как и в совете выше, не стоит распыляться на что-то, кроме изучения дизайна и инструментов. Если ты отлично проектируешь интерфейс, знаешь наизусть гайдлайны Android и iOS – все двери тебе открыты. Дизайнеру не обязательно уметь искать общий язык с разработчиками и заказчиками.
P.S. Прокачивая навыки в инструментах, типографике, не забывай учиться договариваться и понимать людей, с которыми ты работаешь. Разберись немного в психологии. Это также поможет тебе понимать пользователей и их цели, и ты будешь эффективнее защищать свои решения.
Источник
Хабр
7 вредных советов дизайнеру
Наверное, в детстве многие читали Остера. Так вот: недавно ученые открыли, что на свете бывают непослушные дизайнеры, которые все делают наоборот. Им дают полезн...
Подборка аккаунтов instagram для вдохновения - Анимация
@patagraph
@linus_dahlgren_
@antonkvo
@zolloc
@katie.scarlett
@hubuluck_illustration
@fjg_3d
@edvincindrak
Источник
@patagraph
@linus_dahlgren_
@antonkvo
@zolloc
@katie.scarlett
@hubuluck_illustration
@fjg_3d
@edvincindrak
Источник