Нейросети и дизайн интерфейсов

Стали часто попадаться, статьи, как вот эта, про то, какие залипательные интерфейсы могут создавать нейросети. И действительно, то что выдает нейронка Midjourney на первый взгляд впечатляет: цветовая палитра, эффекты, композиция смотрятся довольно красивенько. А вот в профессиональной среде творчество нейросетей вызывает раздражение. Иллюстраторы на Artstation уже выразили свой протест против применения ИИ. Стоит ли дизайнерам тоже напрячься? Пока что нет – тут я присоединюсь к автору вышеупомянутой статьи. То, что сейчас создают нейросети – это максимум визуальные концепты, а не дизайн интерфейса. ИИ способен только подражать тому, на основе чего он был изначально обучен.

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

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

А что вы думаете по этому поводу?

Оптические иллюзии в дизайне – вертикально-горизонтальная иллюзия

Любое проектирование макета начинается с базовых элементов – квадратов. Их можно встретить в карточках, тизерах, в ленте на соцсетях или шотах на Dribbble.

Именно с квадратом связана одна интересная иллюзия. Если поместить квадрат в прямоугольник, то создается впечатление, что его пропорции нарушились: вертикальные стороны выглядят длиннее горизонтальных. При этом на самом деле, перед нами идеальный равносторонний квадрат. Это и есть – вертикально-горизонтальная иллюзия.

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


Вывод

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

Было полезно? Дайте знать в реакциях!

Психология в дизайне - Пиковое правило

Пиковое правило, также известное как "правило пика и завершения" — когнитивное искажение, описывающее то, как люди запоминают прошлые события.

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


Как применить в дизайне

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

Хороший пример тому – инструмент управления проектами Asana на картинке под постом: выполнив задание, иногда, можно увидеть, как по экрану пролетает единорог.

– Определите и проработайте UX тех моментов, когда продукт наиболее полезен и ценен вашим пользователям

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

– Поощряйте пользователей после совершения ключевого действия


Заключение

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

Было полезно? Вдарьте по реакциям!

Методы исследования UX – Опросы

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

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


Когда применять

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


Как проводить опоросы

Для начала проведите подготовительную работу:

1) Сформулируйте цель исследования

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

Например, после заказа товара в интернет-магазине можно попросить покупателя оценить его опыт взаимодействия задав несколько коротких вопросов.

2) Подберите респондентов

Один из наиболее сложных этапов это, подбор нужных респондентов. Если у вас есть клиентская база тут все просто – делаете рассылку, пишите напрямую, стимулируете участие в опросе всякими плюшками. Сам попрос можно проводить, например через Google Forms или Surveymonkey. Можно также воспользоваться специализированными сервисами например от ЯндексВзгляд, anketolog.ru или oprosso.ru, но тут всегда есть риск, что на сторонней платформе вы не найдете свою ЦА.

3) Сформулируйте вопросы

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

Рассмотрим наиболее частые типы вопросов:

Вопросы да/нет
Помогают узнать отношение респондента к чему-либо или отсортировать аудиторию по категориям. Например:

– Вы когда-нибудь пользовались сервисом каршеринга?
– Вы бы заказали медикаменты через онлайн-сервис?

Вопросы с вариантами ответов
Могут быть использованы для сбора детальной информации о ЦА. Например:

– Как часто вы осуществляете покупки через интернет-магазины?
– Укажите ваши любимые спортивные бренды.

Открытые вопросы
Для уточнения какой-либо дополнительной информации или пожеланий можно предложить респонденту добавить развернутый ответ. Например:

– Какие дополнительные функции вы бы пожелали увидеть?

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

– Оцените сложность выполнения задания по 5-бальной шкале

Как задавать вопросы

Задавайте вопросы в логичной последовательности не перемешивая разные темы. Всегда лучше разбить вопросы на группы.

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

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

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

На этом все! Надеюсь было полезно.

#методы

Визуальные тренды года

Год неумолимо подходит к концу. Время подвести итоги... Редакция платформы EditorX выкатила обзор наиболее популярных приемов визуального дизайна этого года. Многие из них мы несомненно увидим и в предстоящем году. Что любопытно: нет никакой стилистической целостности в плане дизайна. Тут и ностальгия по интернет движу 90-х, и Веб 3, хэндмейд коллажи, мягкие 3д элементы, яркие цвета... В общем огромная поляна для экспериментов! 

Вот основные тенденции веб-дизайна этого года, по мнению платформы:

1. Брендинг на основе искусственного интеллекта

2. Кислотный зеленый

3. Динамическая айдентика и логотипы

4. Ретростиль 90-х

5. Субверсивная навигационная иерархия

6. Дружелюбные шрифты

7. Мягкие, тактильные 3D-элементы

8. Цифровые коллажи и эстетика хэндмейд

9. Анимация и триггеры на основе прокрутки

10. Конфетные цвета


Приятного просмотра!

Самый важный навык дизайнера

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

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

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

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

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

С Новым годом, мои дорогие подписчики!

Спасибо, что вы есть и читаете мой канал. Всем мира, добра и позитива в этом году!

Этот год хотелось бы открыть с опроса, он поможет мне понять в каком направлении стоит дальше писать статьи.

Да, опрос был на прошлой неделе, но я, в силу своей криворукости, благополучно его удалил ;) Поэтому, не сочтите за труд проголосовать еще раз.
Если есть предложения о чем еще стоит писать, кидайте в бот @uxtrends_bot или коменты. Спасибо 🙏

Полезное чтиво для саморазвития

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

Майк Монтейро: «Дизайн — это работа»
В книге доступно описан процесс работы в сфере дизайна – начиная от самопрезентации и заканчивая основами общения с клиентом. Автор разбирает распространенные рабочие эпизоды показывая на примерах как избежать многих ошибок.

Остин Клеон: «Кради как художник» 
Практичная и увлекательная книга для всех, кто хочет найти свой путь в творчестве. 
Отличное пособие, полное иллюстраций, упражнений и примеров для тех, кто мечтает реализовать свои идеи в цифровой век.

Дэн Роем: «Визуальное мышление»
Книга учит решать проблемы используя образы и рисунки, анализировать сложные задачи, объединять и обобщать информацию. Кроме того с этой книгой вы научитесь "продавать" свои идеи при помощи визуальных образов.

#почитать

Принципы проектировки интерфейсов – Правило третей

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


Как применять в дизайне

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


Совет

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

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

Визуальная иерархия

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

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

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

Как за 5 минут настроить шрифты в макете


1) Создаем гармоничные размеры

Взяв за основу базовый размер шрифта, например 16px, нужно определить его соотношение размеров – коэффициент с которым мы получим размеры шрифта для заголовков и более мелких надписей. 
Чем выше соотношение – тем контрастнее будет смотреться дизайн.
Наиболее просто, это можно сделать с помощью сервиса https://type-scale.com
Задав базовый размер мы получим 9 гармоничных размеров шрифта.


2) Создаем вертикальный ритм

Теперь необходимо найти оптимальную высоту вертикального отступа между элементами.
Наиболее наглядно это можно сделать с помощью сервиса https://gridlover.net Тут есть все, что нужно – HTML разметка, CSS стили, а также подсветка сетки вертикального ритма. С помощью слайдера можно легко настроить размер шрифта, соотношение размеров и высоту строки.

Дайте знать в реакциях, если было полезно!

Книги для саморазвития, правило третей, визуальная иерархия...

Посты, которые вы могли пропустить за эту неделю.

– Полезное чтиво для саморазвития

– Принципы проектировки интерфейсов – Правило третей

– Визуальная иерархия

– Как за 5 минут настроить шрифты в макете

Вдарьте по реакциям, если посты были для вас полезны!

Темные паттерны в UX – как не надо делать и как не попасться самому

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

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


1. Запрос кредитной карты при регистрации пробного периода

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


2. Автоматическая подписка на рассылку рекламных сообщений

Несмотря на европейский общий регламент по защите данных (GDPR) многие интернет-магазины тайно добавляют своих покупателей в коммерческие рассылки, не предлагая им двойное подтверждение подписки на рассылку (Double-Opt-In).


3. Незаметное добавление лишнего товара или услуги в корзину

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


4. Получение доступа к вашим контактам

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


5. Злоупотребление стимулирующими сообщениями

В электронной коммерции или бронировании билетов многие крупные компании злоупотребляют сообщениями, как например: «Скидка 10% только сегодня», «Этот товар был продан 5 минут назад», «Последнее место по этой цене»  и так далее. Как правило продавец просто пытается манипулировать своими пользователями.


В заключение

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

Кстати, есть сайт deceptive.design посвещенный данной тематике, с примерами и подробным разбором всех трюков.

Почему не стоит использовать меню-гамбургер

Исследование проведенное NNGroup в 2016 году пришло к выводу, что кнопка меню-гамбургер с тремя полосками негативно отражается на пользовательском опыте. Главная проблема – пользователи не знают какие разделы там скрыты, поэтому часто даже не пытаются вызвать скрытое меню. 

Как видно из графика под постом в мобильной версии только 57% пользователи вызвали скрытое меню, в версии для ПК таких пользователей было всего 27%
Ссылка на исследование.


Какую альтернативу тут можно использовать?

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


Есть несколько исключений когда меню-гамбургер все-таки можно применить

1)  Если разделы не являются основным, например (настройки профиля, помощь, условия пользования итд.)

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

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

Методы исследования UX – Проверка качества восприятия

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


Как проводится тестирование

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

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

Психология в дизайне – Правило 100

Привило 100 – один из видов когнитивное искажения, при котором форма подачи информации влияет на ее восприятие человеком. Правило гласит:

Если стоимость товара меньше 100 долларов, то скидка в процентах кажется больше.  А если стоимость товара больше 100 долларов, то скидка, выраженная в долларах, кажется больше.

Это значит, что скидка в 10% на рубашку стоимостью $50, будет казаться нам более выгодной, чем скидка в $5. В то время как скидка для более дорогого товара, например для смартфона стоимостью $600, будет казаться нам более привлекательной если она выраженна в абсолютной величине – $120 вместо 20%.


Почему это важно для дизайна

Если применять "правило 100" при оформлении предложений или карточки товара в интернет-магазине то, это поможет значительно улучшить продажи.

Правило 100, один из способов управления восприятия пользователей через, так называемый фрейминг. Его применяют повсеместно: в политике, СМИ, маркетинге и конечно же в пользовательском опыте. О нём напишу позже, если тема вам интересна.

Как провести брифинг с клиентом и не облажаться

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


Подготовка

Перед самим брифингом не поленитесь провести ресёрч. Узнайте, что за компания, чем занимается, какие продукты и кто её возможные конкуренты. Чем больше вы знаете, тем проще будет вникнуть в тему. Также не помешает узнать основную информацию о человеке, с которым вам придется непосредственно вести беседу. Это поможет наладить первый контакт.


Какие вопросы задавать на брифинге с новым клиентом?

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


1. Выясните цели и задачи 

Узнайте вводные данные о проекте и какую задачу бизнеса он решает:
– Какое решение применяется сейчас? Почему оно не устраивает клиента?
– Кто клиенты компании для которых проектируется продукт?
– Какие конкурентные решения уже есть на рынке? 
– Что является УТП (уникальными торговыми предложениями) продукта?


2. Выясните требования

Выясните как клиент видит будущее решение:
– На какой платформе оно должно быть реализовано?
– Какие конкретные пожелания есть по функциональности?
– Какие функциональные и визуальные решения у конкурентных продуктов нравятся заказчику?
– Какие решения заказчик не хотел бы видеть в продукте?


3. Процесс

Согласуйте как будет выстраиваться работа с заказчиком и определите сферу ответственностей:
– Какие сроки отводятся на проектирование, дизайн и реализацию проекта?
– Кто и как будет утверждать результаты работ?
– Кто будет создавать контет (тексты/фото) для продукта?


4. Определите дальнейшие действия

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

Есть еще ряд вещей, которые ни в коем случае нельзя делать на первой встрече. О них поговорим в другой раз, если вам интересно.

Темные паттерны в UX, правило 100, брифинг с клиентом...

На этой неделе также опубликовал статью на vc Как создать продающий лендинг по формуле AIDA с дополнениями к ранее вышедшему посту на канале. Если еще не читали, то не поленитесь!

Посты, вышедшие за эту неделю на канале:

Темные паттерны в UX – как не надо делать и как не попасться самому


Почему не стоит использовать меню-гамбургер


Методы исследования UX – Проверка качества восприятия


Психология в дизайне – Правило 100


Как провести брифинг с клиентом и не облажаться

Как предотвратить дорогие ошибки – правило 1-10-100

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

Следуя правилу, любая задуманная и реализованная идея проходит три стадии:

1. Планирование

2. Воплощение

3. Применение

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

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


Какой вывод можно тут сделать?

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