Каким законам UX-дизайна следуют крупные приложения

Эффект эстетики-юзабилити
Пользователи часто воспринимают эстетичный дизайн как более удобный.

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

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

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

Закон Фиттса
Время достижения цели зависит от расстояния до цели и ее размера.

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

Закон Якоба
Пользователи проводят большую часть своего времени в других приложениях. Это означает, что пользователи предпочитают, чтобы ваше приложение работало так же, как другие приложения, которые они уже знают.

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

Эффект Зейгарник
Люди запоминают незавершенные или прерванные задачи лучше, чем завершенные.

Эффект цели-градиента: тенденция достижения цели возрастает по мере приближения к ней.

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

Правило пика-конца
Люди судят опыт в основном по тому, как они себя ощущали на его пике и в конце, а не по общей сумме или среднему значению каждого момента опыта.

Эффект последовательной позиции: у пользователей есть склонность лучше запоминать первый и последний элементы в серии.

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

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

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

Источник

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/