Предоставляйте информацию с меньшей нагрузкой на глаза

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

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

#UX #UI #Деструктивность

Принцип сходства в визуальном дизайне

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

#Design #UI

Социальное доказательство

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

Пользователи покупают продукт, который имеет хороший рейтинг или положительные отзывы группы людей. Такой продукт вызывает больше доверия.

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

#Psychology

Чему Pixar может научить UX-дизайнеров, и при чем тут сторителлинг?

Сторителлинг сам по себе является одной из задач UX. Роль UX-дизайнера заключается не только в разработке продукта, но и помощи команде, визуализации мечты, объединении заинтересованных сторон. Истории помогут вам сделать это.

В 2011 году бывшая сотрудница Pixar Эмма Коутс (сейчас она работает в Google Assistant) написала в Твиттере трэд, который потом превратился в «22 правила сторителлинга от Pixar». Мы же выделили самые важные из них. Эти 8 правил могут помочь связать нужды пользователей и ваши решения.
Читать статью

#Pixar #UX

20 примеров крутых геометрических паттернов, и как их использовать в дизайне

У каждой формы свое значение. Самые популярные можно выделить в следующие категории:

-Прямоугольники/квадраты: баланс и традиции;
-Круги: бесконечность, защита и женственность;
-Треугольники: стабильность, энергия и агрессия;
-Ромб: яркость и современность;
-Шестиугольник: единство и баланс.

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

Но, возможно, вы хотите начать с чего-то попроще. Если это так, геометрические паттерны – то, что вам нужно. Ниже мы рассмотрим 20 примеров, которые помогут вам в создании собственных идей, и советы о том, как их применять.
Читать статью

#патерны

Компоненты Figma с фиксированным соотношением сторон

До появления Figma Auto Layout наши дни были мрачными и полными ужасов. Чтобы отобразить разные состояния одного и того же элемента, нам приходилось создавать массу компонентов. С Auto Layout 2.0 все изменилось. Стало намного проще изменять кнопки, списки и карточки. Но, едва поставив последнее обновление, мы уже жаждем новых функций…

1.Асимметричные внутренние отступы.
2.Отрицательные внутренние отступы.
3.Фиксированное соотношение сторон.
Читать далее

#AutoLayout

5 шагов для улучшения ваших навыков UI дизайнера

Простые и полезные способы улучшить свои дизайны

Есть несколько простых вещей, которые вы можете сделать, чтобы повысить свои профессиональные навыки, и вам не нужно тратить деньги на дорогие онлайн-курсы или учебники.
Читать статью

#UI

Графический дизайн для соцсетей: 7 практических советов

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

Фотобанк Depositphotos собрал простые, но эффективные советы по созданию графического дизайна для социальных сетей. Они помогут привлечь внимание пользователей, сделать рекламные кампании и SMM-стратегию эффективными и сформировать единый визуальный стиль бренда.
Читать статью

#GraphicDesign

Заставь свои деньги двигаться

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

#MotionDesign #UI

Серьезные ошибки UX, мешающие продажам

Найдите и исправьте их с помощью этого руководства.

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

И электронная и мобильная коммерция находятся на подъеме, поскольку доступ к портативным устройствам становится все проще и проще. Об этом свидетельствуют следующие факты:

Сейчас примерно 4 из 5 американцев совершают покупки в Интернете, при этом более половины из них делают это с помощью мобильных устройств.
Вероятность, что пользователи, получившие отрицательный опыт использования вашего мобильного магазина снова, что-то купят у вас снижается на 62%.
В этой статье мы рассмотрим наиболее распространенные ошибки UX, которые встретила на веб-сайтах.

Читать статью

#UX

Лучшие практики UI-дизайна

В жизни есть определенные правила, которые нельзя нарушать. В дизайне пользовательского интерфейса тоже есть правила, по которым нужно жить. Их называют «эвристикой» или общими принципами, улучшающими юзабилити интерфейсов. Это повторяемые паттерны, проверенные временем и помогающие пользователям ориентироваться в интерфейсе. Хорошо спроектированный интерфейс всегда учитывает изложенные ниже принципы. В не очень хорошо спроектированном интерфейсе наверняка не хватает одного или нескольких принципов. Вы UI-дизайнер, так зачем вам нарушать хотя бы одно из этих правил и создавать проблемы для пользователей?

Читать статью

#UI #Design

9 трендов в дизайне интерфейсов в 2020 году

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

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

#Trends #Design

​​Дизайнерское исследование или четкие принципы? Когда можно нарушать правила в дизайне

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

Как бы вы к этому не относились, но сотворчество с клиентом – утопический идеал совместного видения, который имеет свои недостатки. Наверняка вы очень много раз слышали слова «стратегия бренда», прежде чем столкнулись с этим на деле. Никогда еще не было так заманчиво отдать предпочтение исследованиям и консультациям как в эпоху WordPress, Drupal и, осмелюсь сказать, Wix. Вместо создания структуры принципов с нуля, почему бы не состряпать что-то из уже существующих шаблонов за долю секунды?

На самом деле, бывают ситуации, когда простой подход будет как никогда кстати. Хитрость в том, чтобы знать, когда именно.
Читать подробнее

#DesignLessons

​​10 правил юзабилити. Разбираемся на примерах

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

#UXLessons

Отзывчивый веб-дизайн и учёт высоты окна браузера

У многих появится вопрос о том, почему у этой статьи такой необычный заголовок. Как связаны «отзывчивый веб-дизайн» и «высота окна браузера»? Пожалуй, этот заголовок кажется необычным из-за того, что под «отзывчивым дизайном», как правило, понимают проектирование страниц таким образом, чтобы они подстраивались бы под ширину области просмотра, чтобы они хорошо бы выглядели на разных устройствах. Сайты всегда тестируют, уменьшая ширину браузера и наблюдая за происходящим. Но я практически никогда не сталкивался с некими указаниями по тестированию какого-то проекта, в которых сказано, что страницы исследуют путём уменьшения высоты окна браузера. Возможно, вы когда-нибудь ловили себя на такой мысли: «Надо ли проверять страницы в окнах браузера разной высоты?». Я полагаю, что делать это надо, и собираюсь убедить в этом всех, кто прочитает эту статью.

#WebDesign #UX

Как анимировать интерфейсы в After Effects

Анимация — неотъемлемый скилл для UX/UI дизайнера, если вы претендуете на позицию выше, чем Junior. Ни для кого из дизайнеров не секрет, что самый продвинутый инструмент для анимации — After Effects.

Нужно ли разбираться в таком сложном инструменте, если есть более простые программы. Мой ответ — да. Вы не сделаете в Principle, Proto.io… то, что можно сделать в AE, и рано или поздно придется изучать возможности этой программы. Тем более YouTube кишит туториалами практически под любую задачу.

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

#AE | #WebDesign | #интрфейсы

FigmaExport: как автоматизировать экспорт UI-Kit из Figma в Xcode и Android Studio проекты

Если вы iOS- или Android-разработчик и дизайн вашего проекта разрабатывается в Figma, то скорее всего вы сталкиваетесь с проблемами при экспорте ресурсов: цвета выгрузить нельзя, а иконки и картинки экспортировать неудобно. В этой статье я расскажу, как можно облегчить себе жизнь и автоматизировать экспорт UI-Kit из Figma напрямую в Xcode и Android Studio.
Читать статью

#FigmaLesson