20 правил для улучшения визуализации данных

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

Содержание статьи 
1. Выберите правильный тип диаграммы
2. Используйте правильные направления построения графика на основе положительных и отрицательных значений
3. Всегда начинайте гистограмму с нулевого базового уровня
4. Используйте для линейных диаграмм адаптивную шкалу оси Y
5. При использовании линейного графика учитывайте временной ряд
6. Не используйте «сглаженные» линейные диаграммы
7. Избегайте путаницы с двумя осями
8.Ограничьте количество секторов, отображаемых на круговой диаграмме
9. Нанесите метку прямо на диаграмму
10. Не наносите метки на сегменты
11. Упорядочите сегменты для более быстрого сканирования
12. Избегайте рандомности
13. Тонкие кольцевые диаграммы невозможно читать
14. Пусть данные говорят сами за себя
15. Выберите цветовую палитру, соответствующую характеру ваших данных
16. Проектируйте для доступности
17. Сосредоточьтесь на удобочитаемости
18. Используйте горизонтальную гистограмму вместо повернутых меток
19. Выберите библиотеку диаграмм
20. Не ограничивайтесь статическими отчетами
Рекомендованная литература

Читать: https://ux.pub/20-pravil-dlya-uluchsheniya-dizayna-vizualizatsii-dannyh/

Как сделать иллюстрации в дизайне маркетинговым инструментом

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

Многие люди страдают от устаревших стереотипов, полагая, что иллюстрация относится исключительно к сфере искусства и не имеет ничего общего с бизнесом. (Расскажите об этом Warner Brothers или Walt Disney Studios!) Этот архаичный взгляд сдерживает вашу компанию и делает ее менее прибыльной, потому что сегодня цифровая иллюстрация – это бизнес.
Итак, давайте развеем эти вредные заблуждения. Иллюстрация – это маркетинговый инструмент, каким бы красивым и милым он ни выглядел. Его цель – продвигать бизнес, предоставлять информацию и привлекать людей.

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

Содержание статьи 
1. Брендинг
Эффективный визуальный маркетинг
Иллюстрированный логотип
Маскот
Бренд-менеджмент
2. Рекламные кампании
Баннеры
Полиграфическая продукция
Сувениры
3. Онлайн присутствие
Представление компании
Представление продуктов или услуг
Социальные сети и списки рассылки
4. Дизайн упаковки

Читать статью: https://ux.pub/kak-sdelat-illyustratsii-v-dizayne-marketingovym-instrumentom/

История дизайна. Почему гиперссылки синие?

Интернет прочно вошел во все сферы нашей жизни, но есть один аспект цифрового мира, который мы считаем само собой разумеющимся. Вы когда-нибудь замечали, что многие ссылки, особенно гиперссылки, синего цвета? Когда коллега спросил меня, почему ссылки синие, я не знал, что ответить. Как дизайнер пользовательского интерфейса, который создает веб-сайты с 2001 года, я всегда делал ссылки синими. Да, я выступал за определенный оттенок синего и за последовательное применение синего, но я никогда не задавался вопросом, почему ссылки синие? Я просто воспринимал это, как факт. Трава зеленая, а гиперссылки синие. В культурном отношении мы так сильно ассоциируем ссылки с синим цветом, что в 2016 году, когда Google изменил цвет ссылок на черный, это произвело ошеломляющий эффект.

Но теперь я полностью поглощен вопросом: ПОЧЕМУ ссылки синие? КТО решил сделать их такими? КОГДА было принято это решение и КАК оно смогло оказать такое долгосрочное влияние?

Я обратился к своим коллегам с просьбой помочь мне в этом исследовании, и мы начали искать ответ. В браузере Mosaic, выпущенном Марком Андреессеном и Эриком Биной ​​23 января 1993 года, были синие гиперссылки. Чтобы по-настоящему понять происхождение и эволюцию гиперссылок, я совершил путешествие по интерфейсам и истории технологий, чтобы изучить, как оформлялись ссылки до эры цветных мониторов и как быстро развивались интерфейсы и гиперссылки с их появлением.

Содержание статьи 
Предки синей гиперссылки
Так кто же сделал ссылки синими
Кто это сделал первым?
Что было после синей ссылки?
Так почему гиперссылки синие?
Рапсодия в цвете #0000FF

Читать: https://ux.pub/istoriya-dizayna-pochemu-giperssylki-sinie/

Почему в Figma стоит использовать фреймы, а не группы

Разбираем различия между фреймами и группами и причину, по которой фреймы намного мощнее.

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

Содержание статьи

Группы vs фреймы
Суперсилы фреймов
1) Независимое изменение размера
2) Применение стилей
3) Содержимое, выходящее за края
4) Изменение размера с ограничениями
5) Изменение размера с помощью auto layout
6) Разметки и сетки
7) Создание компонентов
Фрейм-челлендж
Советы, как быстро создавать фреймы в Figma 

Читать статью: https://design-glory.com/8674/pochemu-v-figma-stoit-ispolzovat-frejmy-a-ne-gruppy

Лендинг: лучшие практики дизайна, которые увеличивают конверсию

Когда дело доходит до лендинговых страниц, количество передовых практик просто безмерно.

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

1. Редукторы возражений
2. Последовательный призыв к действию
3. Использование подзаголовков для ответа на вопросы пользователей
4. Отзывы, в которых рассматриваются возражения пользователей
5. Сильный сторителлинг

Читать: https://design-glory.com/9933/lending-luchshie-praktiki-dizajna-kotorye-uvelichivayut-konversiyu

Как создать прототип мобильного приложения в 5 шагов

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

Фундаментальная отсылка. Прототип — это быстрая, черновая реализация будущей системы. А еще это работающая модель, опытный образец устройства или детали в дизайне, конструировании, моделировании. Термин прототип произошел от древнегреческого πρῶτος «первый» + τύπος «отпечаток, оттиск» или первообраз.
«Одна картина стоит тысячи слов. Один прототип стоит 1 000 встреч.»
— Конфуций и Джон Маэда, дизайнер
В этой статье я расскажу о том, как создать прототип мобильного приложения. В результате у вас сложится полное представление о ценности прототипов, и вы даже сможете начать собирать их самостоятельно.

Содержание:
Что такое прототип для чего он нужен
Инструкция по разработке прототипа мобильного приложения
Шаг 1. Определите полезное действие и конек
Шаг 2. Зарисуйте Sketchflow ключевых экранов и протестируйте бумажный прототип
Шаг 3. Перенесите бумажный прототип на интерактивную бумагу
Шаг 4. Придайте прототипу профессиональный облик 
Шаг 5. Поделитесь прототипом с заинтересованными в проекте и потенциальными клиентами и сделайте корректировки
8 моментов, которые важно учесть при создании прототипа
3 примера хороших прототипов мобильных и веб-приложений
Вывод и рекомендация

Читать: https://ux-journal.ru/kak-sozdat-prototip-mobilnogo-prilozheniya-v-5-shagov.html

10 лучших инструментов, которые упростят жизнь UX-дизайнера

Как UX-дизайнер, вы знаете, что легко потеряться в деталях. Иногда работа с клиентами и заинтересованными сторонами может вызывать разочарование, когда они не могут представить очевидные решения проблем. Вот почему UX-инструменты так важны для нас.

Инструменты UX-дизайна помогают упростить процесс и сосредоточиться на творческих аспектах дизайна, не увязая в утомительных задачах или запросах клиентов, которые не соответствуют вашим приоритетам. Ниже представлены 10 инструментов, которые улучшат ваш рабочий процесс и позволят быстрее выполнять большие объемы работы!

Содержание статьи 
Как выбрать правильные инструменты UX-дизайна?
UI и UX дизайн постоянно развиваются
Лучшие инструменты исследования
1. Hotjar — Получайте фидбек от пользователей
2. Google Analytics
3. Пользовательские интервью – старомодный инструмент UX-дизайна
Инструменты для создания вайрфреймов
4. Sketch
5. Balsamiq
Лучшие инструменты создания интерактивных прототипов
6. Adobe Xd
7. Figma
8. InVision
Завершение дизайн процесса. Передача проекта разработчикам
9. Framer
10. Figma

Читать статью:https://ux.pub/10-luchshih-instrumentov-kotorye-uprostyat-zhizn-ux-dizaynera-v-2021-godu/

Исследование главной страницы сайтов электронной коммерции. 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/