UX Notes

Дизайн

UX Notes
Дизайн
Подписаться
Опубликованы видео с Avito Design Talk:


1. Настя Ларкина, Авито
- Точки роста для дизайнера в крупной компанииyoutube.com/watch?v=4qBiY4XkPmE


2. Алексей Кандауров, Циан
- Значимость дизайнера на разных скоростях разработкиyoutube.com/watch?v=1YjKkbaMekU


3. Владимир Погорелов, Тинькофф
- Дизайн в краудсорсинге и краудсорсинг в дизайнеyoutube.com/watch?v=wpol2li9NPM


4. Круглый стол «Личные проекты дизайнеров»youtube.com/watch?v=Da76M0gkUM0


- Все видео и презентации: habr.com/ru/company/avito/blog/533620/
- Все видео в альбоме ВК: vk.com/videos-50773057?section=album_45

UX Notes
Дизайн
Подписаться
Борис Юзефпольский написал об особенностях пользовательских интервью онлайн.


1. Нет живого контакта с респондентом, иногда нет изображения. Зато в интервью может участвовать вся команда.

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


2. Между «договориться об интервью» и «провести интервью»
- пропасть. Люди забывают, им сложно планировать.

Настроили систему напоминаний. Но несмотря на напоминания, выбор удобного времени и вознаграждение, 10% респондентов не подключаются из-за технических проблем, а 20−30% не приходят вовсе.


3. У респондентов разные технические условия. Первые минуты интервью приходится тратить на технические неполадки.

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


4. Сложно проводить большие фокус-группы.

В спорах и дискуссиях внутри фокус-групп исследователи обычно находят много полезного. Онлайн приходится жертвовать этим в угоду порядку и чётким правилам взаимодействия. Зато можно услышать мнения всех респондентов.


5. Детям сложно раскрыться в онлайн-интервью. Зато они уверенно чувствуют себя в юзабилити-тестах.

https://vc.ru/uchi.ru/192356

UX Notes
Дизайн
Подписаться
Игорь Штанг написал о выравнивании текста и размере полей.

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

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

https://nobelfaik.livejournal.com/
220315.html

UX Notes
Дизайн
Подписаться
В Mojo написали, как сделать удобный интерфейс для пожилых.

К 2050 году каждый 6-й человек в мире будет старше 65 лет. Да и все мы когда-нибудь состаримся. С какими проблемами сталкиваются пожилые:


1. Мелкий текст. Используйте кегль от 14 pt, гарнитуры с крупными буквами (14 кегль Futura PT выглядит как 10 кегль Roboto), позвольте регулировать размер текста;
избегайте шрифтов с необычным начертанием.


2. Низкая контрастность. Размещайте текст на чистом фоне без изображений;
проверяйте контрастность и сохраняйте её на высоком уровне;
вместо серого текста на сером фоне ищите другие способы управлять пользовательским вниманием.


3. Непонятные иконки. Добавляйте текстовые метки, которые видны без наведения курсора;
их дизайн должен быть простым и схематичным;
тестируйте иконки на узнаваемость и запоминаемость.


4. Отсутствие гибкости: поля, принимающие данные только в определённом формате;
неспособность распознавать опечатки.


5. Непонятные формулировки.

Отдельные рекомендации:
- Делайте область нажатия больше самой кнопки или ссылки;

- Старайтесь не разделять задачи на несколько экранов, если пользователю придётся запоминать предыдущие действия;

- Для длительных задач давайте чёткую обратную связь о прогрессе.

https://vc.ru/design/194193

UX Notes
Дизайн
Подписаться

Собрал самые популярные публикации UX Notes по числу лайков и репостов в ВК за прошедший год.

В топ-20 попали:
- 8 подборок записей докладов с мероприятий: UX-марафон, World Usability Day, митап «Инклюзивный дизайн», митап «Гибридный дизайнер», G8, ProfsoUX, митап «Сила взаимодействия;

- 6 переводов статей: Майтрик Катария, Дэнни Сапио, Тарас Бакусевич, Гаррет Кролл, Том Кенни, Джордж Кейв;

- 5 оригинальных статей: Павел Шерер, Павел Голюдов, Евгений Игнашов, Максим Жуков, Дарья Дундукова;

- 1 видео: Пабло Стэнли.

Спасибо, что читаете и рекомендуете @uxnotes знакомым дизайнерам и проектировщикам. Спасибо авторам полезных и интересных материалов.

https://vandergrav.ru/popular-ux-notes-2020/

UX Notes
Дизайн
Подписаться
Екатерина Авакова написала, что делать в сложных ситуациях на глубинном интервью.


1. Респондент говорит обо всём, кроме того, что нужно;

2. Респондент отвечает односложно, не раскрывая подробностей;

3. В рассказе постепенно появляются детали, в которых теряется и интервьюер, и респондент;

4. Придуманный на ходу вопрос уводит обсуждение в сторону;

5. Структура вопросника задаёт рамки беседы, которые мешают рассуждениям респондента.

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

Респондент может:
- Решить, что вы невнимательны, и потерять интерес к интервью;

- Запутаться в должностях, компаниях и продуктах, и вы придёте к неправильным выводам при разборе интервью.

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

https://medium.com/userhouse/e72ec6a64b1d

UX Notes
Дизайн
Подписаться
Максим Жуков написал о фильтрации в интернет-магазинах.


- Предложите пользователю выбрать категорию, а уже потом фильтровать. Список категорий может располагаться над фильтрами или над списком товаров;

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

- Если параметр товара настолько важен, что отображается в списке товаров, дайте возможность по нему фильтровать;

- Добавьте тематические фильтры. Например: по стилю, времени года и так далее. Потребуется дополнительная разметка товаров, но покупатели это оценят;

- Добавьте параметр совместимости товаров (особенно в сегменте электроники и бытовой техники). Выбор таких товаров как запчасти, расходные материалы и аксессуары определяется совместимостью;

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

- Добавьте поиск в длинный список значений параметра фильтрации;

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

- Добавьте подсказки к значениям параметров фильтрации;

- Если пользователь настроил фильтры так, что ни один из товаров не подходит, не показывайте нулевые результаты фильтрации. Исключите последний применённый параметр фильтрации или отобразите соответствующие значения в фильтре неактивными.

https://vc.ru/design/187926

UX Notes
Дизайн
Подписаться
Вчера В К перевели всех пользователей веб-версии на новый дизайн.

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

Теперь:
- Веб-версия ВК стала ближе по дизайну к мобильной версии;

- Интерфейс стал заметно проще и лаконичнее;

- Пользователям проще фокусироваться на общении и контенте;

- Стало больше белого цвета, фирменный синий тоже остался, а самое интересное
- новый логотип в шапке профиля.

Из минусов можно выделить разве что отсутствие тёмной темы, что в 2020-м довольно странно. Но, вроде, её обещают добавить в ближайшем будущем.

Подробнее о том, как разрабатывали новый дизайн: https://vk.com/blog/design-2020

Нативная интеграция

UX Notes
Дизайн
Подписаться

Олег Биргер, автор канала @cxdao, написал о развитии клиентского опыта (на примере «Газпромнефти»).

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

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

https://habr.com/ru/company/gazpromneft/blog/531232/

UX Notes
Дизайн
Подписаться
Джон Сайто написал о метафорах в интерфейсе.

Метафора
- употребление слова или выражения в переносном смысле на основе аналогии, сходства или сравнения.

Шестерёнка
- метафора настроек. Продуктовая корзина
- метафора заказа. В сравнении сайтов с книгами работают метафоры «Добавить в закладки», «Опубликовать», в сравнении с домами
- «Войти как гость», «Домашняя страница». Уже сложился набор понятных всем метафор для взаимодействия в интернете.

Есть необычные метафоры. Например, на Медиуме статьи сравнивают с шоу: читатели реагируют на статьи аплодисментами и хлопками, у авторов появляются фанаты.

Хорошо, если при выборе метафоры можно провести параллели с реальным миром. Чем метафора абстрактнее, тем сложнее её понять.

Есть тяжёлые метафоры, когда за одним элементом скрывается много разных смыслов. Например, кнопка Share в iOS.

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

https://ux-journal.ru/metafory-i-analogii-v-produktovom-dizajne.html

UX Notes
Дизайн
Подписаться
В Canvs Editorial написали, как мотивировать пользователя завершить начатое.

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

Например:
- На карточке накопления 10 штампов для получения бесплатной услуги 2 штампа поставлены по умолчанию;

- Пользователь только зарегистрировался, но уже на 20% заполнил свой профиль.

Эффекты:
- Человек понимает, что начал выполнять задачу, и мысленно возвращается к ней, пока не завершит её (эффект Зейгарник);

- Чем человек ближе к цели, тем больше он хочет её достичь (эффект градиента цели);

- Визуальное представление цели и оставшегося пути помогает в её достижении (эффект визуализации цели).

https://ux.pub/kak-motivirovat-polzovatelya-zakonchit-progress-effekt-obespechennogo-progressa/

UX Notes
Дизайн
Подписаться
Как найти любимую работу дизайнером и приятный заработок?

В Yellow Images, маркетплейсе, где дизайнеры с разными талантами в 2D и 3D графике могут зарабатывать на том, что действительно нравится делать. В разделе Creative Store можно выкладывать шаблоны презентаций, UX/UI киты, шрифты, иллюстрации, текстуры и наборы мокапов, и не ограничиваться одним видом дизайна.

Круто, что цену можно выставлять самим, и получать 50% комиссии на старте, а также вырасти до 71% приглашая друзей или делясь ссылкой на продукты в качестве аффилиата и повышая прибыль до 60%.

В чем основные плюсы Yellow?


• Есть обучение в Академии Авторов
• Практика на основе прикладных заний
• Портфолио готовых работ
• Прибыль в долларах
• Сейчас можно получить 100$ бонусом при продаже работ на $100Для начала просто регистрируемся:https://bit.ly/Become_Author_UXNts

Публикация оплачена

UX Notes
Дизайн
Подписаться
Эдуард Христусь написал об объектно-ориентированном дизайне.ООД помогает:

Эдуард Христусь написал об объектно-ориентированном дизайне.

ООД помогает:
1. Понять, с чего начать. Если проектируете приложение для заказа котиков с доставкой, в нём наверняка будут сущности: «пользователь», «заказ» и «котик». С ними будут связаны определённые параметры и способы взаимодействия;

2. Сэкономить. Прототипирование
- дорогой и сложный подпроцесс проектирования. Генерировать и отметать идеи в прототипе не эффективно;

3. Создать MVP;

4. Всей команде равномерно двигаться при декомпозиции проекта. Сначала объекты, потом способы взаимодействия с ними.

Процесс:
1. Выявите все объекты системы. Помогут пользовательские истории;

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

3. Определите способы взаимодействия с объектами (функции);

4. Укажите свойства параметров. Например: автоматический параметр (проставляется системой автоматически), фильтруемый (используется для фильтрации списка объектов), ручной (задаётся вручную пользователем или администратором) и так далее;

5. Укажите свойства функций. Например: доступные без ограничений, доступные с ограничениями;

6. Покажите наборы параметров и функций для разных состояний объекта. Например: закрытую вакансию можно только посмотреть.

Не стоит применять ООД для небольших корпоративных сайтов из нескольких страниц.

https://habr.com/ru/post/531466/

UX Notes
Дизайн
Подписаться
Константин Ефимов написал об ошибках при проведении глубинного интервью. Например:

Принятие декларативных ответов за реальные:
- Исследователь фокусируется на представлениях респондента о продукте и отношении к нему, игнорирует реальный опыт, не исследует ситуации использования продукта;

- Не уточняет, насколько реалистично, что респондент будет пользоваться функциональностью, которую тот просит добавить в продукт;

- Не вычленяет социально желательные ответы, не проверяет декларации на реалистичность.

Процедурные нарушения:
- Исследователь не делает заметки, не ведёт запись;

- Опаздывает на интервью, не соблюдает временные рамки;

- Не отключает звук на своём телефоне;

- Отвлекается на телефон или ноутбук, переписывается параллельно с интервью;

- Не называет код тестируемого образца (создаёт проблемы при анализе результатов).

https://vc.ru/marketing/178315

UX Notes
Дизайн
Подписаться
Киннерет Ифра написала о тексте в диалоговых окнах подтверждения.

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

Если пользователь скорее всего знает, что делает, можно не показывать диалог, но дать возможность отменить действие.

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

- Важность последствий;

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

- Частотность действия. Постоянное подтверждение становится пользовательской привычкой и перестаёт работать.

Заголовок:
- В заголовке сообщите о действии, которое надо подтвердить. «Вы уверены?» → «Удалить проект?»;

- Сделайте его вопросом, на который можно дать 2 взаимоисключающих ответа;

- Удалите лишние вступления: «Вы уверены…», «Это действие приведет к…», «Вы действительно…»;

- Особое внимание обратите на диалоги, связанные с отменой чего-либо. Примеров таких диалогов с кнопками «Отменить · Отмена» много, ещё один будет лишним.

Пояснение (текст под заголовком):
- Если к заголовку добавить нечего, текст пояснения не нужен;

- Добавьте его, если действие влияет на связанные элементы и настройки, другие учётные записи и устройства. Чем важнее действие и сложнее отмена, тем нужнее пояснение;

- Если опасаетесь, что пользователь пропустит пояснение, вынесите важные детали в заголовок: «Удалить папку и всё её содержимое?»;

- Сообщите, если действие необратимо: «Удалить папку и всё её содержимое без возможности восстановления?»;

- Если кроме удаления есть другое решение проблемы, расскажите о нём в пояснении.

Кнопки:
- Можно добавить название действия в надписи на кнопках: «Да, отправить», «Всё равно выйти»;

- Используйте в заголовке и на кнопках одни и те же слова: «Деактивировать ключ лицензии? · Да, деактивировать · Отмена».

https://habr.com/ru/company/directum/blog/530770/

Рейтинг авторов

  • "Записки Дизайнера" (про дизайн и только про него 157 157 157
  • (Не) только немецкий 157 157 157
  • #анямастерконтента 157 157 157
  • #Фудтех 157 157 157
  • 10 идей и трендов дня 157 157 157
Показать весь рейтинг
Загрузка ...