4 способа задокументировать вашу дизайн-систему с помощью Storybook
Storybook используется для создания самых популярных дизайн-систем в Интернете, в том числе Shopify Polaris, IBM Carbon, Salesforce Lightning, Auth0 Cosmos и Github Primer.
С помощью аддона Storybook Docs команды по всему миру могут работать быстрее и с меньшими затратами. Он автоматически генерирует документацию на основе существующих историй. Но это только отправная точка. Расширьте рабочий процесс документирования, интегрировав Storybook с дополнительными инструментами.
В этой статье я расскажу, как Storybook используется в реальных дизайн-системах для улучшения документации.
Читать: https://ux.pub/editorial/4-sposoba-zadokumientirovat-vashu-dizain-sistiemu-s-pomoshchiu-storybook-38ij
Storybook используется для создания самых популярных дизайн-систем в Интернете, в том числе Shopify Polaris, IBM Carbon, Salesforce Lightning, Auth0 Cosmos и Github Primer.
С помощью аддона Storybook Docs команды по всему миру могут работать быстрее и с меньшими затратами. Он автоматически генерирует документацию на основе существующих историй. Но это только отправная точка. Расширьте рабочий процесс документирования, интегрировав Storybook с дополнительными инструментами.
В этой статье я расскажу, как Storybook используется в реальных дизайн-системах для улучшения документации.
Читать: https://ux.pub/editorial/4-sposoba-zadokumientirovat-vashu-dizain-sistiemu-s-pomoshchiu-storybook-38ij
14 лучших инструментов для выбора цветовых схем
1. Adobe Color CC
Adobe – мощная корпорация, в которой есть инструменты для всего. Поэтому креативщики компании не могли пройти мимо и создали инструмент и для работы с цветовыми схемами. Этот ресурс поможет создавать и сохранять различные цветовые схемы, каждая из которых состоит из 5 цветов. Он доступен в браузерных вариантах и в настольных версиях. В последнем случае вы можете импортировать свою схему сразу в Photoshop, Illustrator или InDesign.
2. Check my Colours
Предназначен для проверки переднего плана и фона цветовых сочетаний всех элементов DOM для определения достаточного контраста при просмотре. Все тесты основаны на алгоритмах, предложенных World Wide Web Consortium (W3C). Алгоритм работы максимально прост: вы указываете адрес сайта, который хотите проверить, а инструмент делает вам полную раскладку.
3. The Color App
Инструмент The Color App стремится сделать поиск цветов гораздо проще с большой цветовой сеткой. Он также позволяет предварительно просматривать цвета, узнавать значения RGB, HEX и HSLA и создавать палитры цветов, чтобы посмотреть, как они работают вместе. Работает на iOS и Mac.
4. TinEye
Этот сайт использует 10 миллионов общедоступных картинок, собранных с Flickr, чтобы вы могли исследовать цветовые сочетания. Это, пожалуй, самый быстрый способ находить сочетания цветов. Кроме того, TinEye – увлекательный ресурс, который проверяет вашу интуицию.
5. Colordot
Потрясающий в своей простоте инструмент. Нужный оттенок ищется с помощью движения мышки, а Colordot сразу выдает вам цифровой код. Сохранить можно бесконечно много оттенков – еще один удобный способ оценить, как ваша палитра будет работать вместе.
6. SpyColor.com
Это полезный сервис, на котором можно узнать информацию про любую цветовую модель (RGB, CMYK и др.).
7. Designspiration
Гениальный инструмент для поиска референсов и картинок по заданным цветам. Выбирайте до 5 оттенков цвета с палитры – и инструмент покажет фото с ними. Вы можете сохранить фото в своей коллекции на сайте или купить стоковую фотографию, если собираетесь использовать ее в проекте.
8. COLOURIovers
Это сообщество строится вокруг обмена цветами, палитрами и паттернами. В нем пользователи делятся собственно созданными палитрами. Проще говоря, это форум и Pinterest для фанатов палитр, которые хотят делиться с такими же фанатами.
9. Paletton
Здесь, составляя цветовые схемы, можно выбирать не просто отдельные цвета, но и еще указывать их яркость, контраст, насыщенность.
10. COPASO
Сайт предлагает полный спектр инструментов выделения цвета в пределах простого интерфейса, в том числе возможность добавлять примечания к палитрам, загружать изображения, вводить ссылки CMYK и выбирать различные операции для построения своей цветовой гаммы.
11. ColourMod
Этот ресурс предлагает полезный способ выбрать и определить цвет без необходимости запуска дополнительных инструментов посерьезнее.
12. ColorZilla
Сначала этот ресурс был доступен только как Firefox-плагин, но теперь он есть и в браузере Google Chrome. Он включает палитры цветов, пипетки, генератор градиента CSS и палитры браузера.
13. Colormunki
Это интернет-приложение позволяет создавать цветовые палитры из Pantone-образцов, используя ряд различных методик для создания занятных комбинаций.
14. ColorBlender
Один из самых простых и доступных инструментов. Он позволяет выбрать образец, настроить цвет и в режиме реального времени наблюдать за тем, как он генерирует набор из 5 сочетаемых цветов. Готовые палитры могут быть загружены непосредственно в Photoshop или Illustrator в виде файла EPS.
Источник
1. Adobe Color CC
Adobe – мощная корпорация, в которой есть инструменты для всего. Поэтому креативщики компании не могли пройти мимо и создали инструмент и для работы с цветовыми схемами. Этот ресурс поможет создавать и сохранять различные цветовые схемы, каждая из которых состоит из 5 цветов. Он доступен в браузерных вариантах и в настольных версиях. В последнем случае вы можете импортировать свою схему сразу в Photoshop, Illustrator или InDesign.
2. Check my Colours
Предназначен для проверки переднего плана и фона цветовых сочетаний всех элементов DOM для определения достаточного контраста при просмотре. Все тесты основаны на алгоритмах, предложенных World Wide Web Consortium (W3C). Алгоритм работы максимально прост: вы указываете адрес сайта, который хотите проверить, а инструмент делает вам полную раскладку.
3. The Color App
Инструмент The Color App стремится сделать поиск цветов гораздо проще с большой цветовой сеткой. Он также позволяет предварительно просматривать цвета, узнавать значения RGB, HEX и HSLA и создавать палитры цветов, чтобы посмотреть, как они работают вместе. Работает на iOS и Mac.
4. TinEye
Этот сайт использует 10 миллионов общедоступных картинок, собранных с Flickr, чтобы вы могли исследовать цветовые сочетания. Это, пожалуй, самый быстрый способ находить сочетания цветов. Кроме того, TinEye – увлекательный ресурс, который проверяет вашу интуицию.
5. Colordot
Потрясающий в своей простоте инструмент. Нужный оттенок ищется с помощью движения мышки, а Colordot сразу выдает вам цифровой код. Сохранить можно бесконечно много оттенков – еще один удобный способ оценить, как ваша палитра будет работать вместе.
6. SpyColor.com
Это полезный сервис, на котором можно узнать информацию про любую цветовую модель (RGB, CMYK и др.).
7. Designspiration
Гениальный инструмент для поиска референсов и картинок по заданным цветам. Выбирайте до 5 оттенков цвета с палитры – и инструмент покажет фото с ними. Вы можете сохранить фото в своей коллекции на сайте или купить стоковую фотографию, если собираетесь использовать ее в проекте.
8. COLOURIovers
Это сообщество строится вокруг обмена цветами, палитрами и паттернами. В нем пользователи делятся собственно созданными палитрами. Проще говоря, это форум и Pinterest для фанатов палитр, которые хотят делиться с такими же фанатами.
9. Paletton
Здесь, составляя цветовые схемы, можно выбирать не просто отдельные цвета, но и еще указывать их яркость, контраст, насыщенность.
10. COPASO
Сайт предлагает полный спектр инструментов выделения цвета в пределах простого интерфейса, в том числе возможность добавлять примечания к палитрам, загружать изображения, вводить ссылки CMYK и выбирать различные операции для построения своей цветовой гаммы.
11. ColourMod
Этот ресурс предлагает полезный способ выбрать и определить цвет без необходимости запуска дополнительных инструментов посерьезнее.
12. ColorZilla
Сначала этот ресурс был доступен только как Firefox-плагин, но теперь он есть и в браузере Google Chrome. Он включает палитры цветов, пипетки, генератор градиента CSS и палитры браузера.
13. Colormunki
Это интернет-приложение позволяет создавать цветовые палитры из Pantone-образцов, используя ряд различных методик для создания занятных комбинаций.
14. ColorBlender
Один из самых простых и доступных инструментов. Он позволяет выбрать образец, настроить цвет и в режиме реального времени наблюдать за тем, как он генерирует набор из 5 сочетаемых цветов. Готовые палитры могут быть загружены непосредственно в Photoshop или Illustrator в виде файла EPS.
Источник
Реальная насмотренность. Как её тренировать и применять
Слушая преподавателей и наставников в творческих сферах, непременно услышишь от каждого из них про важность насмотренности при создании творческой работы и развития в целом. Но, как это часто бывает, просто «насматривать» работы профессионалов в нужной сфере недостаточно для ощутимого эффекта. Да и результат этого процесса часто не так легко заметить, тем более измерить или осознанно применить. Так действительно ли насмотренность так важна, и как получить от неё реальный эффект?
В первую очередь нужно понять, что именно насмотренность формирует наше воображение.
Хорошенько задумавшись над насмотренностью в творчестве, я понял что оно является материалом для нашего воображения. Ведь когда человек рождается, у него нет элементов чтобы что-либо собрать у себя в голове, даже несмотря на то, что его мозг ещё и не способен вообразить что-либо выходящее за рамки первичных рефлексов и инстинктов.
Фантазируя, в голове моделируются образы, собирающиеся из картинок и звуков реального мира. Когда мы воображаем, то сплетаем, подобно пластилину, насмотренную базу, которую успели накопить в своей памяти на данный момент времени. И именно от того, как много разнообразного материала мы успели скопить, зависит количество доступных нам инструментов, соответственно, и их комбинаций. Ведь если человек всю свою жизнь проведёт в четырёх стенах, то ему просто не из чего будет моделировать в своём воображении новые проекты. Это также можно сравнить со словарным запасом для поэта, который либо ограничивает его потенциал, либо даёт ему раскрыться.
Поэтому важно понять, что ширина нашего воображения напрямую зависит от насмотренности. Нельзя проектировать для миллионов, наблюдая за одним человеком, тем более если этот человек вы.
Далее стоит отметить, что насмотренность — это социальный фактор, который даёт понимание трендов и норм.
Несложным анализом можно пронаблюдать, что насмотренность формирует объективное понимание правильного в визуальном или аудиальном мире, сформированное жизненным опытом.
Чтобы было понятнее, представьте планету Y, на которой и женщинам и мужчинам принято сбривать брови и ресницы. А впрочем пускай весь волосяной покров на лице считается непристойностью. Теперь отправим взрослого человека планеты Y на планету Земля. Уверен, он ужаснётся с наших заросших лиц, так как его насмотренность говорит ему о том, что даже самые именитые модники нашей планеты выглядят непристойно и смехотворно.
Собственно, можно не мучать своё воображение, а обратиться к истории и посмотреть на одеяния элиты мужского общества 16-18 веков.
В современном мужском обществе что-то подобное можно увидеть только на премии grammy.
Всё это говорит о том, что насмотренность формирует понимание красивого в конкретном обществе. И она важна, чтобы разбираться в трендах.
Слушая преподавателей и наставников в творческих сферах, непременно услышишь от каждого из них про важность насмотренности при создании творческой работы и развития в целом. Но, как это часто бывает, просто «насматривать» работы профессионалов в нужной сфере недостаточно для ощутимого эффекта. Да и результат этого процесса часто не так легко заметить, тем более измерить или осознанно применить. Так действительно ли насмотренность так важна, и как получить от неё реальный эффект?
В первую очередь нужно понять, что именно насмотренность формирует наше воображение.
Хорошенько задумавшись над насмотренностью в творчестве, я понял что оно является материалом для нашего воображения. Ведь когда человек рождается, у него нет элементов чтобы что-либо собрать у себя в голове, даже несмотря на то, что его мозг ещё и не способен вообразить что-либо выходящее за рамки первичных рефлексов и инстинктов.
Фантазируя, в голове моделируются образы, собирающиеся из картинок и звуков реального мира. Когда мы воображаем, то сплетаем, подобно пластилину, насмотренную базу, которую успели накопить в своей памяти на данный момент времени. И именно от того, как много разнообразного материала мы успели скопить, зависит количество доступных нам инструментов, соответственно, и их комбинаций. Ведь если человек всю свою жизнь проведёт в четырёх стенах, то ему просто не из чего будет моделировать в своём воображении новые проекты. Это также можно сравнить со словарным запасом для поэта, который либо ограничивает его потенциал, либо даёт ему раскрыться.
Поэтому важно понять, что ширина нашего воображения напрямую зависит от насмотренности. Нельзя проектировать для миллионов, наблюдая за одним человеком, тем более если этот человек вы.
Далее стоит отметить, что насмотренность — это социальный фактор, который даёт понимание трендов и норм.
Несложным анализом можно пронаблюдать, что насмотренность формирует объективное понимание правильного в визуальном или аудиальном мире, сформированное жизненным опытом.
Чтобы было понятнее, представьте планету Y, на которой и женщинам и мужчинам принято сбривать брови и ресницы. А впрочем пускай весь волосяной покров на лице считается непристойностью. Теперь отправим взрослого человека планеты Y на планету Земля. Уверен, он ужаснётся с наших заросших лиц, так как его насмотренность говорит ему о том, что даже самые именитые модники нашей планеты выглядят непристойно и смехотворно.
Собственно, можно не мучать своё воображение, а обратиться к истории и посмотреть на одеяния элиты мужского общества 16-18 веков.
В современном мужском обществе что-то подобное можно увидеть только на премии grammy.
Всё это говорит о том, что насмотренность формирует понимание красивого в конкретном обществе. И она важна, чтобы разбираться в трендах.
И третьим пунктом хотел бы зафиксировать, что под насмотренностью нужно понимать весь спектр человеческого восприятия, а не только визуальный опыт.
Потому что мы живём в мире систем, где всё вокруг взаимосвязано. Будучи фотографом не стоит ограничивать круг своего вдохновения только визуальной сферой. Наш мозг сложный и мощный механизм, который удивительным способом может генерировать идеи даже из совершенно разных сфер. Мы не можем наверняка знать, из чего именно наш мозг создаст озарение для нового проекта. Это может быть серия картин в галерее, куда человек специально пришёл для поиска вдохновения в собственных живописных работах. Но может быть и пластика танца шамана африканского племени, которая наведёт на решение в проектировании стиля музыкального магазина.
Насмотренность во всех сферах человеческой жизни расширяет эрудированность нашего воображения. Любое новое занятие, впечатление, общество или место может не только натолкнуть на решение актуального вопроса, но и координально изменить жизнь. Возможно, Ник Вудман никогда не придумал бы камеру Go Pro, если не решил отправиться в сёрф-тур в Австралию, где он захотел сфотографировать себя, катаясь на доске.
Собирая вышеперечисленное вместе можно заключить:
— насмотренность даёт материал для воображения;
— она помогает нам понимать актуальные запросы общества;
— насмотренность подразумевает все сферы человеческого восприятия.
По своему опыту могу сказать, что насмотренность, действительно, расширяет границы мысли. Иногда, участвуя в мозговых штурмах, замечаю за собой высказывания типа: «был в аптекарском огороде и видел подходящее нам…» или «на выставке Dubai Expo было классное решение…», и нередко это рождало интересные идеи. И только благодаря тому, что я был в этих местах, нужные идеи появлялись на свет.
Конечно, редко насмотренность развивается ощутимо, будто переходишь на новый уровень в игре. Скорее это можно сравнить с изменениями тела при занятии спортом. Они происходят плавно и незаметно, но если сравнить разницу в 1 год или 10 лет, то результат будет очевиден.
Поэтому чтобы ускорить процесс нужно не только увеличивать осведомлённость в своей профессиональной сфере, но и во всей человеческой деятельности. Чаще пробуйте совершенно новые и неожиданные для себя занятия. Будьте голодны как ребёнок до новых эмоций и впечатлений. Соглашайтесь на смелые и нехарактерные для вас активности. И как знать, может быть спонтанная экскурсия по пивоварне или первое в жизни занятие в гончарной мастерской повернут вашу жизнь на 180 градусов и приблизят к желаемым звёздам.
P.S. Делюсь несколькими ссылками, где я насматриваю визуальную часть.
Pinterest (фотохостинг, который хорошо подбирает похожие изображения)
Behance (сервис с развёрнутыми портфолио креаторов со всего мира)
Dribbble (платформа с изображениями работ креаторов со всего мира)
Muzli (расширение для браузера Google Chrome)
ArtStation (CG галерея)
Источник
Потому что мы живём в мире систем, где всё вокруг взаимосвязано. Будучи фотографом не стоит ограничивать круг своего вдохновения только визуальной сферой. Наш мозг сложный и мощный механизм, который удивительным способом может генерировать идеи даже из совершенно разных сфер. Мы не можем наверняка знать, из чего именно наш мозг создаст озарение для нового проекта. Это может быть серия картин в галерее, куда человек специально пришёл для поиска вдохновения в собственных живописных работах. Но может быть и пластика танца шамана африканского племени, которая наведёт на решение в проектировании стиля музыкального магазина.
Насмотренность во всех сферах человеческой жизни расширяет эрудированность нашего воображения. Любое новое занятие, впечатление, общество или место может не только натолкнуть на решение актуального вопроса, но и координально изменить жизнь. Возможно, Ник Вудман никогда не придумал бы камеру Go Pro, если не решил отправиться в сёрф-тур в Австралию, где он захотел сфотографировать себя, катаясь на доске.
Собирая вышеперечисленное вместе можно заключить:
— насмотренность даёт материал для воображения;
— она помогает нам понимать актуальные запросы общества;
— насмотренность подразумевает все сферы человеческого восприятия.
По своему опыту могу сказать, что насмотренность, действительно, расширяет границы мысли. Иногда, участвуя в мозговых штурмах, замечаю за собой высказывания типа: «был в аптекарском огороде и видел подходящее нам…» или «на выставке Dubai Expo было классное решение…», и нередко это рождало интересные идеи. И только благодаря тому, что я был в этих местах, нужные идеи появлялись на свет.
Конечно, редко насмотренность развивается ощутимо, будто переходишь на новый уровень в игре. Скорее это можно сравнить с изменениями тела при занятии спортом. Они происходят плавно и незаметно, но если сравнить разницу в 1 год или 10 лет, то результат будет очевиден.
Поэтому чтобы ускорить процесс нужно не только увеличивать осведомлённость в своей профессиональной сфере, но и во всей человеческой деятельности. Чаще пробуйте совершенно новые и неожиданные для себя занятия. Будьте голодны как ребёнок до новых эмоций и впечатлений. Соглашайтесь на смелые и нехарактерные для вас активности. И как знать, может быть спонтанная экскурсия по пивоварне или первое в жизни занятие в гончарной мастерской повернут вашу жизнь на 180 градусов и приблизят к желаемым звёздам.
P.S. Делюсь несколькими ссылками, где я насматриваю визуальную часть.
Pinterest (фотохостинг, который хорошо подбирает похожие изображения)
Behance (сервис с развёрнутыми портфолио креаторов со всего мира)
Dribbble (платформа с изображениями работ креаторов со всего мира)
Muzli (расширение для браузера Google Chrome)
ArtStation (CG галерея)
Источник
В первую очередь важно юзабилити, а не согласованность или унификация
Существует вредоносный миф, который влияет на принятие дизайн-решений. На первый взгляд это предположение кажется настолько разумным, что мало кто в нем усомниться. И все же при неосторожном применении это заблуждение может нанести реальный вред.
Я говорю о согласованности или последовательности дизайнов.
Часто ее рассматривают, как аргумент в пользу инициативы. Но многие люди, стремящиеся к согласованности, не перестают задавать простой вопрос:
Согласованности с чем?
Согласованность может быть очень полезной, если делает дизайн удобнее. Но если вы не знаете, с чем хотите согласовать дизайн и почему, то согласованность может сбить пользователей с толку.
Читать статью: https://ux.pub/editorial/v-piervuiu-ochieried-vazhno-iuzabiliti-a-nie-soghlasovannost-ili-unifikatsiia-clp
Существует вредоносный миф, который влияет на принятие дизайн-решений. На первый взгляд это предположение кажется настолько разумным, что мало кто в нем усомниться. И все же при неосторожном применении это заблуждение может нанести реальный вред.
Я говорю о согласованности или последовательности дизайнов.
Часто ее рассматривают, как аргумент в пользу инициативы. Но многие люди, стремящиеся к согласованности, не перестают задавать простой вопрос:
Согласованности с чем?
Согласованность может быть очень полезной, если делает дизайн удобнее. Но если вы не знаете, с чем хотите согласовать дизайн и почему, то согласованность может сбить пользователей с толку.
Читать статью: https://ux.pub/editorial/v-piervuiu-ochieried-vazhno-iuzabiliti-a-nie-soghlasovannost-ili-unifikatsiia-clp
UXPUB 🇺🇦 Дизайн-спільнота
В первую очередь важно юзабилити, а не согласованность или унификация
Согласованность может быть очень полезной, если делает дизайн удобнее. Но если вы не знаете, с чем хотите согласовать дизайн и почему, то согласованность может сбить пользователей с толку
8 советов по дизайну цен
1. Знак рубля
Давно существует знак рубля, потому используйте его, а не «руб» или «р»
2. Пробелы между ценой и валютой
Если знак валюты указан после цены, то разделите их неразрывным пробелом. Знак «$» ставится перед ценой, поэтому пробелом не отделяется
3. Экономия места
Старую цену просто перечеркните для экономии места
4. Контраст
Для контраста цен используйте тонкий и толстый шрифты, чтобы новая цена визуально казалась меньше, чем старая
5 .Пробелы в цене
Если цена находится в диапазоне 1000–9999, то не разделяйте разряды пробелами. Правильно будет использовать эти числа без пробела, плюс это визуально уменьшит цену
6. Эльдорадо
Если есть возможность изменить цены, то используйте сокращение новой цены на 1–10 рублей. Так цена 99 кажется ниже 100.
7. Выгода
Покажите в процентах или рублях, сколько сэкономит покупатель
8. Акцент
Старую цену можно сделать менее заметной с помощью цвета, так акцент останется на новой цене и на скидке, которую получит покупатель
Источник
1. Знак рубля
Давно существует знак рубля, потому используйте его, а не «руб» или «р»
2. Пробелы между ценой и валютой
Если знак валюты указан после цены, то разделите их неразрывным пробелом. Знак «$» ставится перед ценой, поэтому пробелом не отделяется
3. Экономия места
Старую цену просто перечеркните для экономии места
4. Контраст
Для контраста цен используйте тонкий и толстый шрифты, чтобы новая цена визуально казалась меньше, чем старая
5 .Пробелы в цене
Если цена находится в диапазоне 1000–9999, то не разделяйте разряды пробелами. Правильно будет использовать эти числа без пробела, плюс это визуально уменьшит цену
6. Эльдорадо
Если есть возможность изменить цены, то используйте сокращение новой цены на 1–10 рублей. Так цена 99 кажется ниже 100.
7. Выгода
Покажите в процентах или рублях, сколько сэкономит покупатель
8. Акцент
Старую цену можно сделать менее заметной с помощью цвета, так акцент останется на новой цене и на скидке, которую получит покупатель
Источник
Доступный дизайн: как сделать интерфейс удобным для пожилых
Дизайн не только решает коммерческие задачи, но и делает жизнь людей комфортнее. UX — концепция, которая основана на идее качества и удобства, и перед ней все должны быть равны.
Проблемы юзабилити для пожилых
1. Мелкий кегль. Отметим, что размер кегля зависит от гарнитуры. Некоторые из них сами по себе крупные, какие-то — поменьше. Например, Asos использует Futura PT. 14 кегль Futura PT выглядит как 10 кегль Roboto.
К слову, мелкие буквы в тексте отталкивают не только старшее поколение — подростки не любят их так же сильно. Причиной тому ранние проблемы со зрением из-за плохой осанки.
2. Низкая контрастность текста. Прежде, чем вы решите использовать светло-серый текст на белом фоне, посмотрите на себя в зеркало и спросите, зачем. Если вы пытаетесь уменьшить заметность одного элемента, чтобы сместить фокус на другие — есть способы лучше.
3. Иконки с непонятными значениями. Человеку без бэкграунда в цифровой среде потребуется время, чтобы понять, что всё это значит.
4. Отсутствие гибкости. В интерфейсе должно быть место для ошибок пользователей, особенно, когда речь о возрастной аудитории. Сайты и приложения, которые позволяют вводить данные только в одном формате, разочаровывают юзеров. Сюда же относится способность распознавать опечатки.
5. Плохой UX-копирайтинг. Сюда относятся сообщения об ошибках с непонятными формулировками и невнятный текст в навигации. Ещё одна проблема — незаметное размещение оповещения на экране среди множества других элементов интерфейса.
Рекомендации по дизайну
Используйте размер кегля от 14pt. Расстояние, на котором мы можем читать буквы, влияет на скорость чтения. Такой кегль позволит комфортно изучать информацию. Помните: если человеку нужно щуриться или наклоняться ближе, чтобы прочитать текст — он этого делать не станет.
Обеспечьте высокий контраст между текстом и фоном. Предпочтительно использовать чистый фон вместо текстурированного. Фон с паттерном мешает распознавать мелкие детали в тексте.
Когда информацию трудно расшифровать, читатели вынуждены выбирать: напрягать глаза или пропустить контент. Уже догадываетесь, какое решение они примут?
Расширение браузера Chrome Color Contrast Analyzer от NCSU покажет, какой фон подходит для наложения текста.
В Figma проверить коэффициент контрастности можно с помощью плагина Color Contrast Checker.
Контрастность — это отношение яркости элемента к яркости фона. Она измеряется в диапазоне от 1:1 (минимальная контрастность — белый текст на белом фоне) до 21:1 (максимальная контрастность — черный текст на белом фоне).
Требования к контрастности описаны в рекомендациях по доступности вебконтента (WCAG). В них предлагают уровни поддержки AAA, AA, AAA Large и AA Large.
AAA и AA — для небольших шрифтов (меньше 14pt для жирных и 18pt для обычных)
AAA Large и AA Large для заголовков (больше 14pt для жирных и 18pt для обычных).
Какие коэффициент контрастности рекомендуют
AAA — 7:1
AAA Large — 4,5:1
AA — 4,5:1
AA Large — 3:1
Поддержка AAA-стандарта нужна для людей с умеренно сниженным зрением, а АА-стандарта — для людей со зрением ниже среднего.
Чем проще шрифт — тем лучше. Избегайте гарнитур с декоративными элементами, засечками и шрифтов странной формы. Например, имитирующих почерк или готический стиль. Они ухудшают читаемость.
Симулятор плохого зрения
NoCoffee Vision Simulator можно использовать для имитации нарушений зрения, в том числе разных форм дальтонизма.
Дизайн не только решает коммерческие задачи, но и делает жизнь людей комфортнее. UX — концепция, которая основана на идее качества и удобства, и перед ней все должны быть равны.
Проблемы юзабилити для пожилых
1. Мелкий кегль. Отметим, что размер кегля зависит от гарнитуры. Некоторые из них сами по себе крупные, какие-то — поменьше. Например, Asos использует Futura PT. 14 кегль Futura PT выглядит как 10 кегль Roboto.
К слову, мелкие буквы в тексте отталкивают не только старшее поколение — подростки не любят их так же сильно. Причиной тому ранние проблемы со зрением из-за плохой осанки.
2. Низкая контрастность текста. Прежде, чем вы решите использовать светло-серый текст на белом фоне, посмотрите на себя в зеркало и спросите, зачем. Если вы пытаетесь уменьшить заметность одного элемента, чтобы сместить фокус на другие — есть способы лучше.
3. Иконки с непонятными значениями. Человеку без бэкграунда в цифровой среде потребуется время, чтобы понять, что всё это значит.
4. Отсутствие гибкости. В интерфейсе должно быть место для ошибок пользователей, особенно, когда речь о возрастной аудитории. Сайты и приложения, которые позволяют вводить данные только в одном формате, разочаровывают юзеров. Сюда же относится способность распознавать опечатки.
5. Плохой UX-копирайтинг. Сюда относятся сообщения об ошибках с непонятными формулировками и невнятный текст в навигации. Ещё одна проблема — незаметное размещение оповещения на экране среди множества других элементов интерфейса.
Рекомендации по дизайну
Используйте размер кегля от 14pt. Расстояние, на котором мы можем читать буквы, влияет на скорость чтения. Такой кегль позволит комфортно изучать информацию. Помните: если человеку нужно щуриться или наклоняться ближе, чтобы прочитать текст — он этого делать не станет.
Обеспечьте высокий контраст между текстом и фоном. Предпочтительно использовать чистый фон вместо текстурированного. Фон с паттерном мешает распознавать мелкие детали в тексте.
Когда информацию трудно расшифровать, читатели вынуждены выбирать: напрягать глаза или пропустить контент. Уже догадываетесь, какое решение они примут?
Расширение браузера Chrome Color Contrast Analyzer от NCSU покажет, какой фон подходит для наложения текста.
В Figma проверить коэффициент контрастности можно с помощью плагина Color Contrast Checker.
Контрастность — это отношение яркости элемента к яркости фона. Она измеряется в диапазоне от 1:1 (минимальная контрастность — белый текст на белом фоне) до 21:1 (максимальная контрастность — черный текст на белом фоне).
Требования к контрастности описаны в рекомендациях по доступности вебконтента (WCAG). В них предлагают уровни поддержки AAA, AA, AAA Large и AA Large.
AAA и AA — для небольших шрифтов (меньше 14pt для жирных и 18pt для обычных)
AAA Large и AA Large для заголовков (больше 14pt для жирных и 18pt для обычных).
Какие коэффициент контрастности рекомендуют
AAA — 7:1
AAA Large — 4,5:1
AA — 4,5:1
AA Large — 3:1
Поддержка AAA-стандарта нужна для людей с умеренно сниженным зрением, а АА-стандарта — для людей со зрением ниже среднего.
Чем проще шрифт — тем лучше. Избегайте гарнитур с декоративными элементами, засечками и шрифтов странной формы. Например, имитирующих почерк или готический стиль. Они ухудшают читаемость.
Симулятор плохого зрения
NoCoffee Vision Simulator можно использовать для имитации нарушений зрения, в том числе разных форм дальтонизма.
Что ещё учесть
уменьшите расстояние между последовательными элементами интерфейса. Например, полями формы. Убедитесь, что они находятся на расстоянии не менее 2 миллиметров друг от друга;
основные кнопки на сенсорных интерфейсах должны быть не менее 44×44 px;
элементы интерфейса, которые нужно щёлкать мышью, должны быть не менее 11 миллиметров по диагонали. Всегда делайте область нажатия больше самой кнопки или гиперссылки.
Что-то с памятью моей стало
Кратковременная, эпизодическая и рабочая память особенно уязвимы с возрастом. Это значит, что пожилым людям сложнее понимать сценарии взаимодействия в цифровых продуктах.
Перспективная память (воспоминание, что нужно сделать в будущем) также страдает.
Что делать
постепенно вводите функции продукта, чтобы предотвратить умственную перегрузку;
избегайте разделения задач на несколько экранов, если они требуют запоминания предыдущих действий;
во время длительных задач давайте чёткую обратную связь о прогрессе.
К слову, эти рекомендации подойдут и в работе с молодой аудиторией. Особенно, если она не очень лояльна к вашему проекту.
Дизайн иконок
Опытные пользователи узнают иконки дома, печати и увеличительного стекла для поиска. Вне этих примеров большинство значков неоднозначны из-за разного контекста в интерфейсах. Люди, которые только попали в цифровую среду, тем более ничего не поймут.
Чтобы подсказать значение иконки стоит внедрить текстовые метки. Они должны быть видны всегда, даже без участия юзера.
Особенно это важно для значков навигации. Не полагайтесь на наведение, чтобы показать пояснения.
Во-первых, на сенсорном экране такую механику будет сложно реализовать.
Во-вторых, человеку придётся приложить больше умственных и физических усилий, чтобы достигнуть цели. Как однажды сказал дизайнер и консультант по юзабилити Брюс Тоньяццини: «Слово стоит тысячи картинок».
1. Сохраняйте дизайн простым и схематичным. Меньше графических деталей — их всё равно не распознают в маленьком значке.
2. Используйте правило пяти секунд. Если вы тратите больше 5 секунд, чтобы придумать иконку — она не передаст суть.
3. Проверьте значки на узнаваемость: спросите людей, что они ожидают от взаимодействия с ними.
4. Проверьте значки на запоминаемость: посмотрите, вспомнит ли целевая аудитория их значение через две недели после контакта.
Сообщения об ошибке
У пожилых людей часто возникают проблемы с чтением сообщений об ошибках. Они не понимают формулировок, либо просто не знают причины сбоя. Здесь простота становится даже более важной, чем обычно.
Сообщение об ошибке должно включать:
1. Явное указание на то, что что-то пошло не так. Когда пользователи ошибаются и не получают обратной связи, они полностью теряются. Точно опишите проблему.
2. Понятный язык вместо отраслевых терминов вроде «произошла ошибка класса 2».
3. Вежливую фразу, которая не обвиняет пользователей и не подразумевает, что они глупы.
4. Конструктивный совет, как исправить проблему. Например, проверить опечатку, посмотреть рекомендации в файле или перезагрузить страницу.
Наиболее частое оповещение в интернете «404 not found» нарушает большинство этих рекомендаций. Лучше написать собственное сообщение об ошибке.
5. Не используйте только красный цвет для обозначения ошибок. Включайте дополнительные подсказки, которые могут видеть дальтоники.
6. Сохраните как можно больше работы пользователя. Позвольте человеку редактировать исходное действие, а не делать все заново. Если посетитель ввёл хоть какую-то информацию, даже без ошибки мы должны её использовать заново во всех доступных сценариях. Это часть принципа «пусть потеет машина».
7. Сократите работу по исправлению ошибки. Если возможно, угадывайте правильное действие и дайте пользователям выбрать его из небольшого списка исправлений. Например, вместо того, чтобы просто сказать «город и почтовый индекс не совпадают», дайте посетителю выбрать город, который соответствует введенному им почтовому индексу.
Источник
уменьшите расстояние между последовательными элементами интерфейса. Например, полями формы. Убедитесь, что они находятся на расстоянии не менее 2 миллиметров друг от друга;
основные кнопки на сенсорных интерфейсах должны быть не менее 44×44 px;
элементы интерфейса, которые нужно щёлкать мышью, должны быть не менее 11 миллиметров по диагонали. Всегда делайте область нажатия больше самой кнопки или гиперссылки.
Что-то с памятью моей стало
Кратковременная, эпизодическая и рабочая память особенно уязвимы с возрастом. Это значит, что пожилым людям сложнее понимать сценарии взаимодействия в цифровых продуктах.
Перспективная память (воспоминание, что нужно сделать в будущем) также страдает.
Что делать
постепенно вводите функции продукта, чтобы предотвратить умственную перегрузку;
избегайте разделения задач на несколько экранов, если они требуют запоминания предыдущих действий;
во время длительных задач давайте чёткую обратную связь о прогрессе.
К слову, эти рекомендации подойдут и в работе с молодой аудиторией. Особенно, если она не очень лояльна к вашему проекту.
Дизайн иконок
Опытные пользователи узнают иконки дома, печати и увеличительного стекла для поиска. Вне этих примеров большинство значков неоднозначны из-за разного контекста в интерфейсах. Люди, которые только попали в цифровую среду, тем более ничего не поймут.
Чтобы подсказать значение иконки стоит внедрить текстовые метки. Они должны быть видны всегда, даже без участия юзера.
Особенно это важно для значков навигации. Не полагайтесь на наведение, чтобы показать пояснения.
Во-первых, на сенсорном экране такую механику будет сложно реализовать.
Во-вторых, человеку придётся приложить больше умственных и физических усилий, чтобы достигнуть цели. Как однажды сказал дизайнер и консультант по юзабилити Брюс Тоньяццини: «Слово стоит тысячи картинок».
1. Сохраняйте дизайн простым и схематичным. Меньше графических деталей — их всё равно не распознают в маленьком значке.
2. Используйте правило пяти секунд. Если вы тратите больше 5 секунд, чтобы придумать иконку — она не передаст суть.
3. Проверьте значки на узнаваемость: спросите людей, что они ожидают от взаимодействия с ними.
4. Проверьте значки на запоминаемость: посмотрите, вспомнит ли целевая аудитория их значение через две недели после контакта.
Сообщения об ошибке
У пожилых людей часто возникают проблемы с чтением сообщений об ошибках. Они не понимают формулировок, либо просто не знают причины сбоя. Здесь простота становится даже более важной, чем обычно.
Сообщение об ошибке должно включать:
1. Явное указание на то, что что-то пошло не так. Когда пользователи ошибаются и не получают обратной связи, они полностью теряются. Точно опишите проблему.
2. Понятный язык вместо отраслевых терминов вроде «произошла ошибка класса 2».
3. Вежливую фразу, которая не обвиняет пользователей и не подразумевает, что они глупы.
4. Конструктивный совет, как исправить проблему. Например, проверить опечатку, посмотреть рекомендации в файле или перезагрузить страницу.
Наиболее частое оповещение в интернете «404 not found» нарушает большинство этих рекомендаций. Лучше написать собственное сообщение об ошибке.
5. Не используйте только красный цвет для обозначения ошибок. Включайте дополнительные подсказки, которые могут видеть дальтоники.
6. Сохраните как можно больше работы пользователя. Позвольте человеку редактировать исходное действие, а не делать все заново. Если посетитель ввёл хоть какую-то информацию, даже без ошибки мы должны её использовать заново во всех доступных сценариях. Это часть принципа «пусть потеет машина».
7. Сократите работу по исправлению ошибки. Если возможно, угадывайте правильное действие и дайте пользователям выбрать его из небольшого списка исправлений. Например, вместо того, чтобы просто сказать «город и почтовый индекс не совпадают», дайте посетителю выбрать город, который соответствует введенному им почтовому индексу.
Источник
Nielsen Norman Group
Icon Usability
Due to the absence of a standard usage for individual icons, text labels are necessary to communicate meaning and reduce ambiguity in an icon-based design.
9 UI/UX инструментов обязательных для любого дизайнера
Есть инструменты, которые должен знать каждый UI / UX дизайнер, и инструменты, которые просто полезно знать. Давайте рассмотрим некоторые из них!
1. Google
Что ж, кто-то скажет, что Google – не совсем инструмент, но без Google мы бы блуждали в темноте. Вероятно, любые сомнения, вопросы или проблемы, можно решить с помощью Google. Если вы не являетесь гением и признанным специалистом в конкретной области, всегда есть люди с большим опытом и / или просто знающие ответ на ваш вопрос. В UI / UX дизайне (как и в большинстве профессий) вы постоянно учитесь и читаете.
Когда чего-то не знаете – загуглите. Когда в чем-то не уверены – загуглите. Загуглите, возможно уже есть ответы на большинство вопросов, для которых вы планировали провести A/B тесты.
Конечно, в этот раздел я включаю: Medium, Youtube, Reddit, Quora, Wiki How и другие ресурсы, материалы которых найдет Google.
2. Ручка и бумага
Быть может, это очевидно, но это, возможно, лучший инструмент для создания макетов, и не только. Предлагаю всем использовать их почаще. Помимо набросков, с их помощью можно сортировать карточки, собрать идеи, написать заметки. Советую вам оттачивать навык рисования. Даже если вы никогда не рисуете, ваши наброски будут намного привлекательнее для потенциального клиента.
3. Sketch/Figma/Adobe XD
Сегодня большинство UI / UX дизайнеров использует эти три инструмента. Они очень похожи друг на друга, и содержат лишь небольшие отличия.
3.1 Sketch
SketchApp –
крестный отец всех инструментов дизайна. Это Mercedes-Benz, первый 100% инструмент UI / UX дизайна в отрасли. Подавляющее большинство инструментов для создания прототипов хорошо работают со Sketch. До Sketch веб-дизайнеры работали с Photoshop / Illustrator / Corel. И, честно говоря, после Sketch бессмысленно использовать эти инструменты, если вы не проектируете какой-то очень уникальный веб-сайт или приложение, которому не подходят простые формы. И не поймите меня неправильно, я уважаю Photoshop больше, чем любой другой инструмент дизайна, но возможности Photoshop слишком велики для UI дизайна. Corel Draw и Illustrator – это векторные программы, которые в основном используются для создания логотипов, полиграфического дизайна, иллюстраций и т. д.
3.2 Figma
Figma – мой любимый инструмент. Он взял все самое лучшее от Sketch и добавил много вещей, которые Sketch упустил. Лучшее достоинство Figma заключается в том, что она основана на браузере (поэтому не зависит от платформы) и все синхронизируется. Один член команды что-то меняет, и это изменение моментально применяется во всем проекте, без необходимости публикации изменений. Еще одним плюсом Figma является наличие CSS, и вам не нужно использовать третий инструмент, такой как Zeplin или Inspect от Invision Studio, для передачи проекта разработчикам. Кстати, Figma постоянно совершенствуется, например, недавно в прототип добавили анимацию скролла.
3. 3 Adobe XD
XD – отличный инструмент, когда вы работаете в быстром темпе. Он позволяет быстрее решать проблемы, но у него почти те же проблемы, что и у Sketch (за исключением того, что Sketch доступен только для Mac, а XD доступен как для Windows, так и для Mac), а еще в XD нет функции внутренней тени (в чем проблема ее добавить?).
Я могу говорить об инструментах UI дизайна бесконечно, но думаю, это тема для отдельной статьи.
Есть инструменты, которые должен знать каждый UI / UX дизайнер, и инструменты, которые просто полезно знать. Давайте рассмотрим некоторые из них!
1. Google
Что ж, кто-то скажет, что Google – не совсем инструмент, но без Google мы бы блуждали в темноте. Вероятно, любые сомнения, вопросы или проблемы, можно решить с помощью Google. Если вы не являетесь гением и признанным специалистом в конкретной области, всегда есть люди с большим опытом и / или просто знающие ответ на ваш вопрос. В UI / UX дизайне (как и в большинстве профессий) вы постоянно учитесь и читаете.
Когда чего-то не знаете – загуглите. Когда в чем-то не уверены – загуглите. Загуглите, возможно уже есть ответы на большинство вопросов, для которых вы планировали провести A/B тесты.
Конечно, в этот раздел я включаю: Medium, Youtube, Reddit, Quora, Wiki How и другие ресурсы, материалы которых найдет Google.
2. Ручка и бумага
Быть может, это очевидно, но это, возможно, лучший инструмент для создания макетов, и не только. Предлагаю всем использовать их почаще. Помимо набросков, с их помощью можно сортировать карточки, собрать идеи, написать заметки. Советую вам оттачивать навык рисования. Даже если вы никогда не рисуете, ваши наброски будут намного привлекательнее для потенциального клиента.
3. Sketch/Figma/Adobe XD
Сегодня большинство UI / UX дизайнеров использует эти три инструмента. Они очень похожи друг на друга, и содержат лишь небольшие отличия.
3.1 Sketch
SketchApp –
крестный отец всех инструментов дизайна. Это Mercedes-Benz, первый 100% инструмент UI / UX дизайна в отрасли. Подавляющее большинство инструментов для создания прототипов хорошо работают со Sketch. До Sketch веб-дизайнеры работали с Photoshop / Illustrator / Corel. И, честно говоря, после Sketch бессмысленно использовать эти инструменты, если вы не проектируете какой-то очень уникальный веб-сайт или приложение, которому не подходят простые формы. И не поймите меня неправильно, я уважаю Photoshop больше, чем любой другой инструмент дизайна, но возможности Photoshop слишком велики для UI дизайна. Corel Draw и Illustrator – это векторные программы, которые в основном используются для создания логотипов, полиграфического дизайна, иллюстраций и т. д.
3.2 Figma
Figma – мой любимый инструмент. Он взял все самое лучшее от Sketch и добавил много вещей, которые Sketch упустил. Лучшее достоинство Figma заключается в том, что она основана на браузере (поэтому не зависит от платформы) и все синхронизируется. Один член команды что-то меняет, и это изменение моментально применяется во всем проекте, без необходимости публикации изменений. Еще одним плюсом Figma является наличие CSS, и вам не нужно использовать третий инструмент, такой как Zeplin или Inspect от Invision Studio, для передачи проекта разработчикам. Кстати, Figma постоянно совершенствуется, например, недавно в прототип добавили анимацию скролла.
3. 3 Adobe XD
XD – отличный инструмент, когда вы работаете в быстром темпе. Он позволяет быстрее решать проблемы, но у него почти те же проблемы, что и у Sketch (за исключением того, что Sketch доступен только для Mac, а XD доступен как для Windows, так и для Mac), а еще в XD нет функции внутренней тени (в чем проблема ее добавить?).
Я могу говорить об инструментах UI дизайна бесконечно, но думаю, это тема для отдельной статьи.
4. Прототипирование с помощью InVision Studio/Proto.io/Marvel/Origami
InVision Studio
– это набор из 4 отличных инструментов, которые очень полезны для UI / UX дизайнеров.
Prototyping
– это не просто отличный инструмент с классной интерактивной анимацией.
Inspect предназначен для передачи CSS разработчикам.
Freehand помогает создавать вайрфреймы, карты сайта и, как правило, он действует как ручка и бумага на вашем компьютере с множеством уже имеющихся полезных шаблонов.
Craft – это, по сути, инструмент проектирования пользовательского интерфейса.
Кроме того, InVision Studio отлично работает со Sketch.
4.2 Proto.io – это инструмент прототипирования, который помогает дизайнерам создавать реалистичные Hi-Fi прототипы.
4.3 Marvel – еще один инструмент, который помогает создавать Lo-Fi или Hi-Fi прототипы, вайрфреймы, а также передавать разработчикам CSS и HTML. Это еще один инструмент прототипирования, который благодаря отличному взаимодействию делает прототип похожим на конечный продукт.
4.4 Origami – это инструмент, который, возможно, обеспечивает самые продвинутые, реалистичные взаимодействия, и он хорошо работает со Sketch.
Однако есть минусы: он не передает код взаимодействия, работает только на Mac, и его сложно освоить. Для новичков он может быть очень сложным.
5. Zeplin
Zeplin – это инструмент, который переводит интерфейс в CSS. Это отличный инструмент для сотрудничества и передачи проекта разработчикам. И он отлично работает со Sketch, XD, Photoshop и многими другими программами. Я использую Zeplin относительно редко, поскольку в Figma есть весь основной функционал, а, как упоминалось ранее, я большой фанат Figma.
6. Google Analytics
Знаю, я уже упоминал Google, но Google Analytics – это совершенно другой инструмент. Как следует из названия – он занимается анализом данных. Это отличный инструмент для сбора статистики о том, как работает ваш сайт в полевых условиях, получения количественных данных и т. д.
7. Стратегическое планирование с помощью Flowmap/Balsamiq
7.1 Flowmapp – это инструмент, который поможет определить стратегию в начале работы над проектом. Это отличный инструмент для создания информационной архитектуры, карты сайта и юзерфлоу.
7.2 Balsamic – простой, но отличный инструмент для создания вайрфреймов. Он практически не требует обучения. В нем уже есть много элементов вайрфреймов, и с помощью простого перетаскивания можно сделать довольно хороший каркас.
8. Качественное исследование с помощью Bugsee/Appsee/Hotjar
8.1 Bugsee – это инструмент, предназначенный для выявления ошибок и сбоев мобильных приложений.
8.2 С другой стороны, Appsee не фокусируется на багах. Он помогает понять пользователей и оптимизировать UX и производительность.
8.3 Hotjar – это инструмент, который выполняет анализ веб-сайта и предоставляет фидбек пользователей. Он также помогает узнать о пользователях и их опыте использования продукта. Среди его функций есть записи флоу пользователя, анализ форм, опросы, рекрутирование тестировщиков и т. д.
9. Инструменты пользовательского тестирования: User Report/Usabilla
9.1 User Report – еще один отличный инструмент, основанный на опросах и отзывах. Он работает как часть вашего веб-сайта или приложения, и помогает узнавать о пользователях, а также общаться с ними. Кроме того, у него есть интеграция с Google Analytics.
9.2 Usabilla – это программа для сбора фидбека. Она обеспечивает обратную связь от пользователей в режиме реального времени. Она также помогает определить ваши вопросы и тайминг.
Есть еще много инструментов, которые UI / UX-дизайнерам следует знать, я упомянул лишь некоторые из них. И каждую секунду появляется новый инструмент, который может стать следующим лучшим продуктом. Нам просто нужно быть бдительными и не упустить момент изучения этой новинки.
Источник
InVision Studio
– это набор из 4 отличных инструментов, которые очень полезны для UI / UX дизайнеров.
Prototyping
– это не просто отличный инструмент с классной интерактивной анимацией.
Inspect предназначен для передачи CSS разработчикам.
Freehand помогает создавать вайрфреймы, карты сайта и, как правило, он действует как ручка и бумага на вашем компьютере с множеством уже имеющихся полезных шаблонов.
Craft – это, по сути, инструмент проектирования пользовательского интерфейса.
Кроме того, InVision Studio отлично работает со Sketch.
4.2 Proto.io – это инструмент прототипирования, который помогает дизайнерам создавать реалистичные Hi-Fi прототипы.
4.3 Marvel – еще один инструмент, который помогает создавать Lo-Fi или Hi-Fi прототипы, вайрфреймы, а также передавать разработчикам CSS и HTML. Это еще один инструмент прототипирования, который благодаря отличному взаимодействию делает прототип похожим на конечный продукт.
4.4 Origami – это инструмент, который, возможно, обеспечивает самые продвинутые, реалистичные взаимодействия, и он хорошо работает со Sketch.
Однако есть минусы: он не передает код взаимодействия, работает только на Mac, и его сложно освоить. Для новичков он может быть очень сложным.
5. Zeplin
Zeplin – это инструмент, который переводит интерфейс в CSS. Это отличный инструмент для сотрудничества и передачи проекта разработчикам. И он отлично работает со Sketch, XD, Photoshop и многими другими программами. Я использую Zeplin относительно редко, поскольку в Figma есть весь основной функционал, а, как упоминалось ранее, я большой фанат Figma.
6. Google Analytics
Знаю, я уже упоминал Google, но Google Analytics – это совершенно другой инструмент. Как следует из названия – он занимается анализом данных. Это отличный инструмент для сбора статистики о том, как работает ваш сайт в полевых условиях, получения количественных данных и т. д.
7. Стратегическое планирование с помощью Flowmap/Balsamiq
7.1 Flowmapp – это инструмент, который поможет определить стратегию в начале работы над проектом. Это отличный инструмент для создания информационной архитектуры, карты сайта и юзерфлоу.
7.2 Balsamic – простой, но отличный инструмент для создания вайрфреймов. Он практически не требует обучения. В нем уже есть много элементов вайрфреймов, и с помощью простого перетаскивания можно сделать довольно хороший каркас.
8. Качественное исследование с помощью Bugsee/Appsee/Hotjar
8.1 Bugsee – это инструмент, предназначенный для выявления ошибок и сбоев мобильных приложений.
8.2 С другой стороны, Appsee не фокусируется на багах. Он помогает понять пользователей и оптимизировать UX и производительность.
8.3 Hotjar – это инструмент, который выполняет анализ веб-сайта и предоставляет фидбек пользователей. Он также помогает узнать о пользователях и их опыте использования продукта. Среди его функций есть записи флоу пользователя, анализ форм, опросы, рекрутирование тестировщиков и т. д.
9. Инструменты пользовательского тестирования: User Report/Usabilla
9.1 User Report – еще один отличный инструмент, основанный на опросах и отзывах. Он работает как часть вашего веб-сайта или приложения, и помогает узнавать о пользователях, а также общаться с ними. Кроме того, у него есть интеграция с Google Analytics.
9.2 Usabilla – это программа для сбора фидбека. Она обеспечивает обратную связь от пользователей в режиме реального времени. Она также помогает определить ваши вопросы и тайминг.
Есть еще много инструментов, которые UI / UX-дизайнерам следует знать, я упомянул лишь некоторые из них. И каждую секунду появляется новый инструмент, который может стать следующим лучшим продуктом. Нам просто нужно быть бдительными и не упустить момент изучения этой новинки.
Источник
UXPUB 🇺🇦 Дизайн-спільнота
9 UI/UX инструментов обязательных для любого дизайнера
Есть инструменты, которые должен знать каждый UI / UX дизайнер, и инструменты, которые просто полезно знать. Давайте рассмотрим некоторые из них
Подготовка иконок к работе в дизайн системе
Помещайте иконки во фреймы
Поскольку все иконки разного размера в силу своих геометрических особенностей, все они должны быть помещены во фреймы одинакового размера.
Допустим, у нас три иконки: 22x15px, 18x20px и 10x5px. Каждая из них должна быть во фрейме 24x24px.
Оставлять иконки без фрейма нельзя
Всегда помещайте иконки во фрейм
Экспортировать иконки нужно также во фрейме.
Важно! Экспортировать нужно именно иконку во фрейме, а не слой иконки. После чего помещать ее уже в контейнер 24x24px.
Причем, важно делать именно в такой последовательности, поскольку дизайнер зачастую выравнивает иконку изнутри фрейма по визуальному центру, а не по фактическому. Разработчик же зачастую выравнивает иконку по фактическому центру не замечая разницы.
Иконка выровнена по фактическому центру. Отступы: слева и справа по 10px. Но из-за особенностей формы иконки возникает ощущение, что она сдвинута влево.
Иконка выровнена по визуальному центру. Отступы: слева 12px, справа 8px. Иконка специально сдвинута вправо, чтобы визуально казалось, что иконка располагается по центру.
Компонент из фрейма с иконкой
Создайте компонент из фрейма с иконкой.
Это поможет вам быстро заменить одну иконку на другую, использовав функцию «Instance».
Чтобы замена через инстанс сработала, компоненты иконок должны находиться в одном фрейме (об этом дальше).
Замена иконок с помощью функции “Instance”
Иконки лучше всего именовать на английском. Если вы скачали иконку, а у нее уже есть название на английском — не переименовывайте ее.
Так вы быстрее запомните название иконок и будете легко находить на тех ресурсах, где их берете.
Заодно и новые слова на английском выучите если у вас с ним беда, как и у меня.
Хранение иконок
Один проект может содержать иконки разных размеров. Например, стандартные 24x24px, 16x16px или 20x20px для элементов меньшего размера.
Основные иконки 24x24px мы храним в артборде “Icons 24”. Остальные иконки размер которых больше или меньше 24px храним в “Other Icons”. Обычно их не очень много.
Артборд “Trash Icons” нужен чтобы хранить в нем различные варианты иконок. Например, вы подобрали или нарисовали три иконки чата, выбрали из них одну и поместили ее в артборд “Icons 24”, а другие два варианта иконки перемещаете в артборд “Trash Icons”. На случай, если вы передумаете и захотите изменить свой выбор вам не придется искать их снова.
Фон и цвет
Чтобы при выделении компонентов с иконкой в настройках Fill не отображались лишние цвета — удалите у компонента белый фон, даже если он отключен.
Так же рекомендую сразу применять к иконке стиль цвета, чтобы при дальнейшей работе было удобнее менять цвет иконки.
Удаление фона и применение стиля цвета
Стиль цвета нужен чтобы при замене через инстанс вы не забывали перекрашивать иконку в нужный цвет.
Советую выбрать броский цвет, который вы очень редко используете на проекте. Оставляя иконку черной или серой есть вероятность что вы будете забывать ее перекрашивать. Я выбрал коричневый.
Яркий цвет иконки четко дает понять, что после замены ее нужно перекрасить в нужный стиль.
Констрейнтс
Настройте у слоя с иконкой constraints по вертикальному и горизонтальному центру. Это нужно на случай, если вы захотите уменьшить или увеличить компонент иконки, но так чтобы сама иконка не меняла свой размер.
Важно! Сonstraints нужно настраивать именно у слоя с иконкой, а не у всего компонента.
Помещайте иконки во фреймы
Поскольку все иконки разного размера в силу своих геометрических особенностей, все они должны быть помещены во фреймы одинакового размера.
Допустим, у нас три иконки: 22x15px, 18x20px и 10x5px. Каждая из них должна быть во фрейме 24x24px.
Оставлять иконки без фрейма нельзя
Всегда помещайте иконки во фрейм
Экспортировать иконки нужно также во фрейме.
Важно! Экспортировать нужно именно иконку во фрейме, а не слой иконки. После чего помещать ее уже в контейнер 24x24px.
Причем, важно делать именно в такой последовательности, поскольку дизайнер зачастую выравнивает иконку изнутри фрейма по визуальному центру, а не по фактическому. Разработчик же зачастую выравнивает иконку по фактическому центру не замечая разницы.
Иконка выровнена по фактическому центру. Отступы: слева и справа по 10px. Но из-за особенностей формы иконки возникает ощущение, что она сдвинута влево.
Иконка выровнена по визуальному центру. Отступы: слева 12px, справа 8px. Иконка специально сдвинута вправо, чтобы визуально казалось, что иконка располагается по центру.
Компонент из фрейма с иконкой
Создайте компонент из фрейма с иконкой.
Это поможет вам быстро заменить одну иконку на другую, использовав функцию «Instance».
Чтобы замена через инстанс сработала, компоненты иконок должны находиться в одном фрейме (об этом дальше).
Замена иконок с помощью функции “Instance”
Иконки лучше всего именовать на английском. Если вы скачали иконку, а у нее уже есть название на английском — не переименовывайте ее.
Так вы быстрее запомните название иконок и будете легко находить на тех ресурсах, где их берете.
Заодно и новые слова на английском выучите если у вас с ним беда, как и у меня.
Хранение иконок
Один проект может содержать иконки разных размеров. Например, стандартные 24x24px, 16x16px или 20x20px для элементов меньшего размера.
Основные иконки 24x24px мы храним в артборде “Icons 24”. Остальные иконки размер которых больше или меньше 24px храним в “Other Icons”. Обычно их не очень много.
Артборд “Trash Icons” нужен чтобы хранить в нем различные варианты иконок. Например, вы подобрали или нарисовали три иконки чата, выбрали из них одну и поместили ее в артборд “Icons 24”, а другие два варианта иконки перемещаете в артборд “Trash Icons”. На случай, если вы передумаете и захотите изменить свой выбор вам не придется искать их снова.
Фон и цвет
Чтобы при выделении компонентов с иконкой в настройках Fill не отображались лишние цвета — удалите у компонента белый фон, даже если он отключен.
Так же рекомендую сразу применять к иконке стиль цвета, чтобы при дальнейшей работе было удобнее менять цвет иконки.
Удаление фона и применение стиля цвета
Стиль цвета нужен чтобы при замене через инстанс вы не забывали перекрашивать иконку в нужный цвет.
Советую выбрать броский цвет, который вы очень редко используете на проекте. Оставляя иконку черной или серой есть вероятность что вы будете забывать ее перекрашивать. Я выбрал коричневый.
Яркий цвет иконки четко дает понять, что после замены ее нужно перекрасить в нужный стиль.
Констрейнтс
Настройте у слоя с иконкой constraints по вертикальному и горизонтальному центру. Это нужно на случай, если вы захотите уменьшить или увеличить компонент иконки, но так чтобы сама иконка не меняла свой размер.
Важно! Сonstraints нужно настраивать именно у слоя с иконкой, а не у всего компонента.