Шпаргалка по законам и принципам дизайна интерфейсов
Коротко и простыми словами опишем известные эвристики / законы / принципы, которые нужно знать и применять при разработке дизайна интерфейсов
1. Эффект эстетики в юзабилити: Эстетически приятный дизайн воспринимается как более удобный, маскируя мелкие проблемы юзабилити.
2. Порог Доэрти: Система должна давать обратную связь в течение 400 миллисекунд для повышения продуктивности и удержания внимания пользователей.
3. Закон Фиттса: Время достижения цели прямо пропорционально расстоянию до неё и обратно пропорционально её размеру. Важные элементы должны быть крупными и легкодоступными.
4. Закон Хика: Время принятия решения растет с увеличением количества и сложности вариантов. Упрощайте выбор, разбивая сложные задачи на этапы.
5. Закон Якоба: Пользователи предпочитают, чтобы сайт работал так же, как другие знакомые им сайты. Используйте общепринятые дизайн-паттерны.
6. Закон общего пространства: Элементы в общей области с четкой границей воспринимаются как группа. Используйте границы для визуального группирования.
7. Закон прегнантности: Люди интерпретируют сложные образы как простейшие формы. Стремитесь к простоте и порядку в дизайне.
8. Закон близости: Объекты, расположенные рядом, воспринимаются как группа. Группируйте связанные элементы.
9. Закон подобия: Схожие элементы воспринимаются как целостная группа. Обеспечьте единообразие стиля для связанных элементов.
10. Закон визуальной связности: Визуально связанные элементы воспринимаются как единое целое. Используйте цвета, линии, рамки для группировки.
11. Закон Миллера: Человек может одновременно держать в памяти 7±2 элемента. Группируйте информацию в блоки по 5-9 элементов.
12. Бритва Оккама: Выбирайте простейшее решение из возможных. Удаляйте лишние элементы без ущерба функциональности.
13. Принцип Парето: 80% последствий обусловлены 20% причин. Сосредоточьтесь на функциях, приносящих наибольшую пользу большинству пользователей.
14. Закон Паркинсона: Работа занимает всё отведенное на неё время. Устанавливайте реалистичные сроки для задач.
15. Закон Постеля: Будьте либеральны в том, что принимаете, и консервативны в том, что отправляете. Проявляйте гибкость к действиям пользователей.
16. Эффект серийной позиции: Лучше запоминаются первый и последний элементы в серии. Располагайте ключевые элементы в начале и конце списков.
17. Закон Теслера: В любой системе есть сложность, которую нельзя уменьшить. Стремитесь упростить систему для пользователей, даже если это усложнит разработку.
18. Эффект фон Ресторфф: Отличающийся объект запоминается лучше остальных. Выделяйте важную информацию или ключевые действия.
19. Эффект Зейгарник: Незавершенные задачи запоминаются лучше завершенных. Используйте индикаторы прогресса для сложных задач.
Полную версию с объяснениями и примерами читайте тут: awdee.ru/laws-of-ux
#awd_article #awd_ux
Коротко и простыми словами опишем известные эвристики / законы / принципы, которые нужно знать и применять при разработке дизайна интерфейсов
1. Эффект эстетики в юзабилити: Эстетически приятный дизайн воспринимается как более удобный, маскируя мелкие проблемы юзабилити.
2. Порог Доэрти: Система должна давать обратную связь в течение 400 миллисекунд для повышения продуктивности и удержания внимания пользователей.
3. Закон Фиттса: Время достижения цели прямо пропорционально расстоянию до неё и обратно пропорционально её размеру. Важные элементы должны быть крупными и легкодоступными.
4. Закон Хика: Время принятия решения растет с увеличением количества и сложности вариантов. Упрощайте выбор, разбивая сложные задачи на этапы.
5. Закон Якоба: Пользователи предпочитают, чтобы сайт работал так же, как другие знакомые им сайты. Используйте общепринятые дизайн-паттерны.
6. Закон общего пространства: Элементы в общей области с четкой границей воспринимаются как группа. Используйте границы для визуального группирования.
7. Закон прегнантности: Люди интерпретируют сложные образы как простейшие формы. Стремитесь к простоте и порядку в дизайне.
8. Закон близости: Объекты, расположенные рядом, воспринимаются как группа. Группируйте связанные элементы.
9. Закон подобия: Схожие элементы воспринимаются как целостная группа. Обеспечьте единообразие стиля для связанных элементов.
10. Закон визуальной связности: Визуально связанные элементы воспринимаются как единое целое. Используйте цвета, линии, рамки для группировки.
11. Закон Миллера: Человек может одновременно держать в памяти 7±2 элемента. Группируйте информацию в блоки по 5-9 элементов.
12. Бритва Оккама: Выбирайте простейшее решение из возможных. Удаляйте лишние элементы без ущерба функциональности.
13. Принцип Парето: 80% последствий обусловлены 20% причин. Сосредоточьтесь на функциях, приносящих наибольшую пользу большинству пользователей.
14. Закон Паркинсона: Работа занимает всё отведенное на неё время. Устанавливайте реалистичные сроки для задач.
15. Закон Постеля: Будьте либеральны в том, что принимаете, и консервативны в том, что отправляете. Проявляйте гибкость к действиям пользователей.
16. Эффект серийной позиции: Лучше запоминаются первый и последний элементы в серии. Располагайте ключевые элементы в начале и конце списков.
17. Закон Теслера: В любой системе есть сложность, которую нельзя уменьшить. Стремитесь упростить систему для пользователей, даже если это усложнит разработку.
18. Эффект фон Ресторфф: Отличающийся объект запоминается лучше остальных. Выделяйте важную информацию или ключевые действия.
19. Эффект Зейгарник: Незавершенные задачи запоминаются лучше завершенных. Используйте индикаторы прогресса для сложных задач.
Полную версию с объяснениями и примерами читайте тут: awdee.ru/laws-of-ux
#awd_article #awd_ux
Оди. О дизайне
Законы дизайна интерфейсов — Оди. О дизайне
Автор сайта Laws of UX собрал в одном месте законы и эффекты человеческого восприятия, которые прямо влияют на проектирование взаимодействия. Мы перевели их на русский язык. Эффект эстетики в юзабилити Пользователи часто воспринимают эстетически приятный…
1👍37🔥14😁1
Media is too big
VIEW IN TELEGRAM
Public Work — 100 тысяч снимков, сканов, иллюстраций и других винтажных материалов
Всё содержимое коллекции находится в статусе Public Domain, то есть уже не защищено авторским правом из-за давности и может свободно распространяться и использоваться
https://public.work
#awd_free_download #awd_retro #awd_collection
Всё содержимое коллекции находится в статусе Public Domain, то есть уже не защищено авторским правом из-за давности и может свободно распространяться и использоваться
https://public.work
#awd_free_download #awd_retro #awd_collection
🔥32👌6👍5
Media is too big
VIEW IN TELEGRAM
Удивительный рекламный ролик производителя корма для животных Mifuma с необычными аналоговыми анимациями
С помощью вибраций разной частоты, авторы проекта заставили зёрна двигаться по поверхности и таким образом получили динамичные геометрические композиции
Подробности проекта: aerosoap.com/en/grain-waltz
#awd_video #awd_ad
С помощью вибраций разной частоты, авторы проекта заставили зёрна двигаться по поверхности и таким образом получили динамичные геометрические композиции
Подробности проекта: aerosoap.com/en/grain-waltz
#awd_video #awd_ad
🔥20👍11
Бесплатные шаблоны для UX-дизайнеров в Notion
В Notion UX-дизайнеры могут легко оптимизировать рабочие процессы. В нём можно хранить и организовывать любые данные, включая исходные материалы, референсы, конкурентный анализ, результаты исследований, тестов и многое другое. Кроме того, Notion позволяет создавать доски для управления проектами, где можно отслеживать задачи и сроки их выполнения
Мы выбрали бесплатные шаблоны, которые вы можете скопировать к себе. Они помогут ускорить процесс работы над дизайном:
— Design system — организация и хранение компонентов дизайн-системы
— Roadmap — отслеживание прогресса при работе над проектом. В шаблоне можно указать требования к проекту, сроки выполнения этапов, задач и исправления багов
— User research — планирование исследований с пользователями. Внутри вы сможете ставить сроки проведения исследований, указывать, в каком статусе они находятся, формулировать задачи и хранить контакты участников
— Customer Journey Map — создание карты пути пользователей. Можно указывать этапы, цели, болевые точки клиентов, делать описание персон
— Designer Portfolio — портфолио для дизайнеров для демонстрации проектов с разделом «О себе». Можно использовать пользовательский домен, а это значит, что у вас будет собственный сайт
— Meeting Notes — хранение заметок со всех деловых встреч в одном месте. Там вы сможете указать тему совещания, время его проведения и список участников
Бонус: Notionway — коллекция из 20 бесплатных шаблонов для Notion под разные цели, включая таск-менеджер, трекер привычек, целей, финансов, прочитанных книг, планировщик путешествий, контент-план и другие
#awd_free_download
В Notion UX-дизайнеры могут легко оптимизировать рабочие процессы. В нём можно хранить и организовывать любые данные, включая исходные материалы, референсы, конкурентный анализ, результаты исследований, тестов и многое другое. Кроме того, Notion позволяет создавать доски для управления проектами, где можно отслеживать задачи и сроки их выполнения
Мы выбрали бесплатные шаблоны, которые вы можете скопировать к себе. Они помогут ускорить процесс работы над дизайном:
— Design system — организация и хранение компонентов дизайн-системы
— Roadmap — отслеживание прогресса при работе над проектом. В шаблоне можно указать требования к проекту, сроки выполнения этапов, задач и исправления багов
— User research — планирование исследований с пользователями. Внутри вы сможете ставить сроки проведения исследований, указывать, в каком статусе они находятся, формулировать задачи и хранить контакты участников
— Customer Journey Map — создание карты пути пользователей. Можно указывать этапы, цели, болевые точки клиентов, делать описание персон
— Designer Portfolio — портфолио для дизайнеров для демонстрации проектов с разделом «О себе». Можно использовать пользовательский домен, а это значит, что у вас будет собственный сайт
— Meeting Notes — хранение заметок со всех деловых встреч в одном месте. Там вы сможете указать тему совещания, время его проведения и список участников
Бонус: Notionway — коллекция из 20 бесплатных шаблонов для Notion под разные цели, включая таск-менеджер, трекер привычек, целей, финансов, прочитанных книг, планировщик путешествий, контент-план и другие
#awd_free_download
🍓8✍5👍2🦄1
Новый логотип Лондонского музея
Авторы иронично отразили двойственность города, в котором блеск роскоши сочетается с грязью и нищетой
Получилось смелое, и, если можно так сказать в этом контексте, свежее художественное решение. Как минимум, запоминается
А вам как? :–)
#awd_logo #awd_fun via londonmuseum.org.uk/blog/how-we-created-the-new-london-museum-brand
Авторы иронично отразили двойственность города, в котором блеск роскоши сочетается с грязью и нищетой
Получилось смелое, и, если можно так сказать в этом контексте, свежее художественное решение. Как минимум, запоминается
А вам как? :–)
#awd_logo #awd_fun via londonmuseum.org.uk/blog/how-we-created-the-new-london-museum-brand
😁35🕊21🤪10👍8💩4
Перевод статьи Анны Кейли из Nielsen Norman Group, из которой вы узнаете, в чём разница между всплывающим окном и модальным, какие проблемы могут вызвать всплывающие окна своим появлением и какие факторы необходимо учитывать при их проектировании. Автор также рассказывает о дизайн-решениях, которые могут заменить попапы и донести до посетителей сайта или приложения важную информацию, но при этом будут менее навязчивыми
awdee.ru/10-problems-of-popups
#awd_ui #awd_ux #awd_article
Please open Telegram to view this post
VIEW IN TELEGRAM
Оди. О дизайне
10 проблем попапов и как их решить — Оди. О дизайне
Перевод статьи Анны Кейли из Nielsen Norman Group, из которой вы узнаете, в чём разница между всплывающим окном и модальным, какие проблемы могут вызвать всплывающие окна своим появлением и какие факторы необходимо учитывать при их проектировании. Автор также…
👍11🔥2
Дизайн упаковки посуды канадского бренда Kana
Отличный пример очень функционального дизайна и его недорогой реализации. Сразу видно, что в коробке, но не за счёт вырубки или сложной конструкции, а благодаря простым иллюстрациям в линейной технике
Минималистичный стиль дополняет современная антиква в логотипе и приглушённая цветовая палитра
#awd_pack via packagingoftheworld.com/2023/02/kana-bakeware-packaging.html
Отличный пример очень функционального дизайна и его недорогой реализации. Сразу видно, что в коробке, но не за счёт вырубки или сложной конструкции, а благодаря простым иллюстрациям в линейной технике
Минималистичный стиль дополняет современная антиква в логотипе и приглушённая цветовая палитра
#awd_pack via packagingoftheworld.com/2023/02/kana-bakeware-packaging.html
👍39❤🔥21🔥5👌1
Как выглядит хороший макет
Михаил Озорнин в ответ на заметки Романа Шамина про дизайнеров и фронтов опубликовал часть гайдов своей команды про «хорошо переданный макет». Эти гайды более детально и с примерами описывают, как передавать макеты, как их делать удобными для разработчиков, чтобы они не ошибались и тратили на реализацию меньше времени
mikeozornin.ru/blog/all/what-is-a-good-handoff
#awd_article
Михаил Озорнин в ответ на заметки Романа Шамина про дизайнеров и фронтов опубликовал часть гайдов своей команды про «хорошо переданный макет». Эти гайды более детально и с примерами описывают, как передавать макеты, как их делать удобными для разработчиков, чтобы они не ошибались и тратили на реализацию меньше времени
mikeozornin.ru/blog/all/what-is-a-good-handoff
#awd_article
👍20💋5