Женя Арутюнов выложил в публичный доступ 4-ю главу книги «Сложный дизайнер». Глава посвящена работе с трудными клиентами.
— Трудный клиент — это такой ярлычок для перекладывания ответственности. Если трудно, хочется сказать, что это из-за того, что он такой человек (или вы такой человек, потому что трудно вам);
— Плохое поведение провоцируют: 1) Среда, в которой оно считается нормой; 2) Ситуация, в которой человек чувствует опасность и защищается;
— Если проблемы дизайнера звучат как «я боюсь сказать», «мне все говорят, что делать» и «меня заставляют делать плохо», лучше обратиться за психологической помощью;
— Когда клиент ведёт себя не так, надо понять настоящую причину, тогда будет проще отреагировать правильно;
— Если клиент хочет «больше дизайна», потому что не уверен в ценности своего сообщения и хочет от дизайна весомости, это корректный запрос. Иногда картинка нужна, чтобы один человек почувствовал себя увереннее;
— Если он хочет срочно, потому что не подумал заранее: 1) Отказывайтесь; 2) Предлагайте намеренно упрощённое решение, чтобы не заставлять искать замену, но и не поддерживать иллюзию, будто срочное можно сделать нормально. Если просит выручить, но не воспринимает упрощённый вариант, значит, это просто манипуляция;
— Если хочет больше вариантов, потому что у него есть образ решения, но он этого не понимает или специально скрывает, надо осознать, что есть важное не выявленное требование к дизайну, попытаться его раскопать и показать такой вариант;
— Если затягивает процесс, потому что реально не успевает делать всё, даже важное, предлагайте укрупнить проект: «Давайте мы возьмём на себя этот вопрос целиком? Сами проконтролируем соответствие всем критериям, сами договоримся с производством и проследим за реализацией»;
— Если советуется с другими людьми, потому что у проекта несколько стейкхолдеров, будьте на этих встречах и управляйте дискуссией: находите убедительные аргументы, пресекайте попытки голосовать за дизайн простым большинством, гарантируйте, что никого не забудут спросить;
— У вас есть право на «нет». Базовый уровень — «нет» в ответ на просьбу: «Успеете к пятнице? И пытаться не будем»;
— Самая страшная тайна: можно не работать с клиентом просто потому, что он вам не нравится, без уважительной причины;
— Первый проект с клиентом должен быть маленьким, ведь первый проект — единственная настоящая проверка совместимости;
— Полной совместимости не бывает. Всегда будут возникать ситуации, требующие осознания и вмешательства. Важно понимать, что это война не со злом, а с хаосом, и не против клиента, а вместе с ним;
— Важно не скатываться в серую зону, где всё делается по инерции. Если нормально работать не можете, приложите усилия, чтобы уйти или исправить ситуацию. Если ничего не сделать, всё останется как есть.
https://intuition.team/book/chapter-4-free
— Трудный клиент — это такой ярлычок для перекладывания ответственности. Если трудно, хочется сказать, что это из-за того, что он такой человек (или вы такой человек, потому что трудно вам);
— Плохое поведение провоцируют: 1) Среда, в которой оно считается нормой; 2) Ситуация, в которой человек чувствует опасность и защищается;
— Если проблемы дизайнера звучат как «я боюсь сказать», «мне все говорят, что делать» и «меня заставляют делать плохо», лучше обратиться за психологической помощью;
— Когда клиент ведёт себя не так, надо понять настоящую причину, тогда будет проще отреагировать правильно;
— Если клиент хочет «больше дизайна», потому что не уверен в ценности своего сообщения и хочет от дизайна весомости, это корректный запрос. Иногда картинка нужна, чтобы один человек почувствовал себя увереннее;
— Если он хочет срочно, потому что не подумал заранее: 1) Отказывайтесь; 2) Предлагайте намеренно упрощённое решение, чтобы не заставлять искать замену, но и не поддерживать иллюзию, будто срочное можно сделать нормально. Если просит выручить, но не воспринимает упрощённый вариант, значит, это просто манипуляция;
— Если хочет больше вариантов, потому что у него есть образ решения, но он этого не понимает или специально скрывает, надо осознать, что есть важное не выявленное требование к дизайну, попытаться его раскопать и показать такой вариант;
— Если затягивает процесс, потому что реально не успевает делать всё, даже важное, предлагайте укрупнить проект: «Давайте мы возьмём на себя этот вопрос целиком? Сами проконтролируем соответствие всем критериям, сами договоримся с производством и проследим за реализацией»;
— Если советуется с другими людьми, потому что у проекта несколько стейкхолдеров, будьте на этих встречах и управляйте дискуссией: находите убедительные аргументы, пресекайте попытки голосовать за дизайн простым большинством, гарантируйте, что никого не забудут спросить;
— У вас есть право на «нет». Базовый уровень — «нет» в ответ на просьбу: «Успеете к пятнице? И пытаться не будем»;
— Самая страшная тайна: можно не работать с клиентом просто потому, что он вам не нравится, без уважительной причины;
— Первый проект с клиентом должен быть маленьким, ведь первый проект — единственная настоящая проверка совместимости;
— Полной совместимости не бывает. Всегда будут возникать ситуации, требующие осознания и вмешательства. Важно понимать, что это война не со злом, а с хаосом, и не против клиента, а вместе с ним;
— Важно не скатываться в серую зону, где всё делается по инерции. Если нормально работать не можете, приложите усилия, чтобы уйти или исправить ситуацию. Если ничего не сделать, всё останется как есть.
https://intuition.team/book/chapter-4-free
Дмитрий Подлужный кратко рассказал о 7 основных артефактах проектирования интерфейса.
1. Дерево KPI. Очевидные, измеримые, проранжированные цели проекта (стратегические и более мелкие операционные) помогают избавиться от лишних споров и сфокусироваться на главном при принятии решений;
2. Стратегический план. Показывает отдельные шаги (действия и тактические задачи), необходимые для достижения цели. Помогает видеть объём предстоящих работ и понимать влияние разных факторов на результат;
3. Поведенческая сегментация. Позволяет выделить группы пользователей со схожими поведенческими паттернами, подумать о триггерах перехода на следующий этап взаимодействия. Характеристики одного и того же пользователя меняются в зависимости от этапа взаимодействия с продуктом;
4. Верхнеуровневый прототип. На ключевых страницах показывает общее видение продукта, его функций, логики взаимодействия с пользователями, основные принципы построения интерфейса. Позволяет получить раннюю обратную связь от бизнеса, экспертов и пользователей;
5. Сценарии. Описывают действия пользователя и ожидаемые результаты, помогают проверить полноту проектного решения. Должны быть написаны понятным языком, могут быть приоритизированы;
6. Информационная архитектура. Позволяет увидеть составляющие продукт объекты, их количество и взаимосвязи и, как следствие, уточнить объем работ по проектированию и ещё раз проверить полноту проектного решения. Большая часть названий и обозначений, зафиксированных в ИА, переходит в интерфейс;
7. Детальный прототип. Фиксирует представление о том, как пользователь будет взаимодействовать с продуктом, включая интерфейсный текст. Может не показывать все варианты поведения системы — так его проще воспринимать и экономится время дизайнеров.
https://habr.com/ru/company/agima/blog/577056/
1. Дерево KPI. Очевидные, измеримые, проранжированные цели проекта (стратегические и более мелкие операционные) помогают избавиться от лишних споров и сфокусироваться на главном при принятии решений;
2. Стратегический план. Показывает отдельные шаги (действия и тактические задачи), необходимые для достижения цели. Помогает видеть объём предстоящих работ и понимать влияние разных факторов на результат;
3. Поведенческая сегментация. Позволяет выделить группы пользователей со схожими поведенческими паттернами, подумать о триггерах перехода на следующий этап взаимодействия. Характеристики одного и того же пользователя меняются в зависимости от этапа взаимодействия с продуктом;
4. Верхнеуровневый прототип. На ключевых страницах показывает общее видение продукта, его функций, логики взаимодействия с пользователями, основные принципы построения интерфейса. Позволяет получить раннюю обратную связь от бизнеса, экспертов и пользователей;
5. Сценарии. Описывают действия пользователя и ожидаемые результаты, помогают проверить полноту проектного решения. Должны быть написаны понятным языком, могут быть приоритизированы;
6. Информационная архитектура. Позволяет увидеть составляющие продукт объекты, их количество и взаимосвязи и, как следствие, уточнить объем работ по проектированию и ещё раз проверить полноту проектного решения. Большая часть названий и обозначений, зафиксированных в ИА, переходит в интерфейс;
7. Детальный прототип. Фиксирует представление о том, как пользователь будет взаимодействовать с продуктом, включая интерфейсный текст. Может не показывать все варианты поведения системы — так его проще воспринимать и экономится время дизайнеров.
https://habr.com/ru/company/agima/blog/577056/
Хабр
7 артефактов проектирования, которые улучшат дизайн
Когда кто-то сегодня говорит о UX, довольно часто он имеет в виду не проектирование пользовательского опыта, а визуальный дизайн. И это объяснимо. Сам по себе интерфейс (UI) уже представляет собой...
Bang Bang Education опубликовали беседу с Владимиром Зиминым.
— Первая книга о проектировании — «Психбольница в руках пациентов» Алана Купера;
— У нас такая область, что надо напрашиваться в компанию мечты и забывать все знания на практике. Не должно быть только теории;
— Когда из компании уходят руководители, внутри это всегда воспринимают сильно острее, чем снаружи. Кажется, что компания разваливается, у неё нет будущего. Будущее, конечно же, есть (про Альфа-банк);
— Фразу «Делай как у Гугла» я слышал каждый день. Это оказалось не интересно (про Яндекс Облако);
— Когда работаешь с людьми, например, при проведении пользовательского тестирования, снобизму (какие они тупые) и предвзятости нет места. Надо понять, что ими движет и какие у них проблемы;
— Если в команде 5−6 дизайнеров, наиболее эффективна плоская структура. Вы вместе общаетесь и принимаете решения. Если людей больше 10−15, неизбежна иерархия, как бы дизайнерская душа этой бюрократизации ни противилась;
— Когда дизайн-менеджер приходит из дизайна, сложно научиться делегировать, потому что все его сотрудники всё делают не так. Надо учиться бить себя по рукам и давать людям самим находить и исправлять ошибки;
— Дизайн-менеджер не должен заниматься контролем качества дизайна и арт-дирекшеном, чтобы не стать бутылочным горлышком и чтобы дизайн не отвечал интересам только одного человека;
— Встречи 1 на 1 позволяют замерять температуру коллектива, смотреть, есть ли у людей проблемы в профессиональной и личной жизни, и стараться помочь. Особенно это важно в удалённой работе;
— Если говорить прямо, главная задача встречи — понять, не собирается ли человек уйти в ближайшее время;
— Про встречи 1 на 1 на Ютубе есть классная лекция Сергея Кондаурова из Яндекса;
— Дизайнерам стоит прочитать книги «Человек, который принял жену за шляпу» (в ней можно увидеть, какими невероятно разными бывают люди) и «Гарри Поттер и методы рационального мышления». Также можно рекомендовать «Думай медленно, решай быстро» Канемана и «Искусство войны»;
— На собеседовании люди, бывает, отвечают не на те вопросы. Обсуждая, что для человека продукт и как он строит дизайн-процесс, за 15 минут можно выяснить, понимаем ли мы друг друга и получится ли у нас светлое будущее;
— Многое зависит от ответов, почему человек выбрал нашу компанию и почему уходит из текущей. Ответ, что «это крупная, стабильно развивающаяся компания» кажется правильным, но в нём нет какой-то искорки. Для человека это просто работа. Если он жалуется на текущую компанию, это худший соискатель на свете;
— Хорошо, когда у дизайнера есть цель (например, изменить какое-то направление, изменить всю компанию), даже небольшая. Плохо, если он зарывается в свой продукт и не смотрит по сторонам;
— Дизайн-мышление больше ориентировано на бизнес, а не дизайнеров. Оно помогает вовлечь бизнес в дизайн-процесс, поверить в его важность;
— Дизайн — в первую очередь функция, но и форма тоже имеет значение, и клиенты с большей вероятностью будут пользоваться привлекательными продуктами;
— Сейчас знаний и источников столько, что начинаешь сомневаться в их качестве и правильности выбора источника. Но научиться что-либо делать уже проще, чем раньше. Важна хорошая настройка фильтра. Хорошим дизайнером может стать человек с хорошим системным и критическим мышлением.
https://www.youtube.com/watch?v=Sle3o1HRjYc
— Первая книга о проектировании — «Психбольница в руках пациентов» Алана Купера;
— У нас такая область, что надо напрашиваться в компанию мечты и забывать все знания на практике. Не должно быть только теории;
— Когда из компании уходят руководители, внутри это всегда воспринимают сильно острее, чем снаружи. Кажется, что компания разваливается, у неё нет будущего. Будущее, конечно же, есть (про Альфа-банк);
— Фразу «Делай как у Гугла» я слышал каждый день. Это оказалось не интересно (про Яндекс Облако);
— Когда работаешь с людьми, например, при проведении пользовательского тестирования, снобизму (какие они тупые) и предвзятости нет места. Надо понять, что ими движет и какие у них проблемы;
— Если в команде 5−6 дизайнеров, наиболее эффективна плоская структура. Вы вместе общаетесь и принимаете решения. Если людей больше 10−15, неизбежна иерархия, как бы дизайнерская душа этой бюрократизации ни противилась;
— Когда дизайн-менеджер приходит из дизайна, сложно научиться делегировать, потому что все его сотрудники всё делают не так. Надо учиться бить себя по рукам и давать людям самим находить и исправлять ошибки;
— Дизайн-менеджер не должен заниматься контролем качества дизайна и арт-дирекшеном, чтобы не стать бутылочным горлышком и чтобы дизайн не отвечал интересам только одного человека;
— Встречи 1 на 1 позволяют замерять температуру коллектива, смотреть, есть ли у людей проблемы в профессиональной и личной жизни, и стараться помочь. Особенно это важно в удалённой работе;
— Если говорить прямо, главная задача встречи — понять, не собирается ли человек уйти в ближайшее время;
— Про встречи 1 на 1 на Ютубе есть классная лекция Сергея Кондаурова из Яндекса;
— Дизайнерам стоит прочитать книги «Человек, который принял жену за шляпу» (в ней можно увидеть, какими невероятно разными бывают люди) и «Гарри Поттер и методы рационального мышления». Также можно рекомендовать «Думай медленно, решай быстро» Канемана и «Искусство войны»;
— На собеседовании люди, бывает, отвечают не на те вопросы. Обсуждая, что для человека продукт и как он строит дизайн-процесс, за 15 минут можно выяснить, понимаем ли мы друг друга и получится ли у нас светлое будущее;
— Многое зависит от ответов, почему человек выбрал нашу компанию и почему уходит из текущей. Ответ, что «это крупная, стабильно развивающаяся компания» кажется правильным, но в нём нет какой-то искорки. Для человека это просто работа. Если он жалуется на текущую компанию, это худший соискатель на свете;
— Хорошо, когда у дизайнера есть цель (например, изменить какое-то направление, изменить всю компанию), даже небольшая. Плохо, если он зарывается в свой продукт и не смотрит по сторонам;
— Дизайн-мышление больше ориентировано на бизнес, а не дизайнеров. Оно помогает вовлечь бизнес в дизайн-процесс, поверить в его важность;
— Дизайн — в первую очередь функция, но и форма тоже имеет значение, и клиенты с большей вероятностью будут пользоваться привлекательными продуктами;
— Сейчас знаний и источников столько, что начинаешь сомневаться в их качестве и правильности выбора источника. Но научиться что-либо делать уже проще, чем раньше. Важна хорошая настройка фильтра. Хорошим дизайнером может стать человек с хорошим системным и критическим мышлением.
https://www.youtube.com/watch?v=Sle3o1HRjYc
YouTube
Беседа с Владимиром Зиминым
Годовая программа по UX/UI:
https://ux.bangbangeducation.ru
Владимир Зимин — дизайн-директор Почты России. Руководит несколькими командами дизайнеров, которые отвечают за продукты Почты для людей, бизнесов и автоматизации внутренних процессов компании. В…
https://ux.bangbangeducation.ru
Владимир Зимин — дизайн-директор Почты России. Руководит несколькими командами дизайнеров, которые отвечают за продукты Почты для людей, бизнесов и автоматизации внутренних процессов компании. В…
Михаил Букин поделился нехитрыми рекомендациями, как сделать «бесконечный скрол» удобнее.
— Закрепляйте панель навигации, чтобы она была на виду и до неё не надо было долго скролить;
— На мобильных устройствах скрывайте её и отображайте при скроле наверх;
— Если в подвале сайта есть важные ссылки, вместо бесконечного скрола используйте кнопку «Показать ещё». Или выносите их вбок, как в веб-версии Инстаграма;
— Если пользователь перешёл из такого списка на другую страницу, кнопка «Назад» должна возвращать его в то место списка, на котором он остановился;
— Добавьте возможность сохранять элементы списка в избранное;
— Показывайте индикатор загрузки, пока новые элементы списка подгружаются. Также можно добавить поясняющий текст.
https://deadsign.ru/ux/best-practices-for-infinite-scrolling/
А вот ещё статья Baymard Institute об использовании бесконечного скрола, пагинации и кнопки «Показать ещё»: https://vandergrav.ru/pagination-infinite-scrolling-load-more-buttons/
— Закрепляйте панель навигации, чтобы она была на виду и до неё не надо было долго скролить;
— На мобильных устройствах скрывайте её и отображайте при скроле наверх;
— Если в подвале сайта есть важные ссылки, вместо бесконечного скрола используйте кнопку «Показать ещё». Или выносите их вбок, как в веб-версии Инстаграма;
— Если пользователь перешёл из такого списка на другую страницу, кнопка «Назад» должна возвращать его в то место списка, на котором он остановился;
— Добавьте возможность сохранять элементы списка в избранное;
— Показывайте индикатор загрузки, пока новые элементы списка подгружаются. Также можно добавить поясняющий текст.
https://deadsign.ru/ux/best-practices-for-infinite-scrolling/
А вот ещё статья Baymard Institute об использовании бесконечного скрола, пагинации и кнопки «Показать ещё»: https://vandergrav.ru/pagination-infinite-scrolling-load-more-buttons/
DEADSIGN
Как создать бесконечный скролл: лучшие практики - DEADSIGN
Пять советов о том, как создать бесконечный скролл, который будет полезен вам и пользователю: не скроет навигацию, позволит не терять контент и не оставит пользователя в растерянности.
Вадим Митякин опубликовал 8-ю главу книги «Метод параноика» (@theparanoidmethod). Глава посвящена роли продюсера цифровых продуктов.
— Продюсер участвует в создании концепции продукта и обладает компетенциями для управления проектом;
— В глазах проектной команды он представляет собой заказчика, а в глазах бизнеса — партнёра, помогающего найти технологическое решение;
— Многие компании относятся к привлечению внешних участников скорее как к исключению. Проблема в том, что внутри компании нельзя собрать всех, кто необходим для уникального проекта: иногда нужны люди с неожиданными компетенциями; крутые специалисты, без которых не найти нестандартных решений, ищут интересные задачи и участвуют в разных проектах;
— Продюсер несёт ответственность за результат проекта и наделён полномочиями, в том числе правом менять состав команды;
— Его 1-я функция — найти, как решить задачи бизнеса с помощью цифровых инструментов, описать принципиальную схему решения и выстроить обновлённую бизнес-модель, связанную с продуктом;
— 2-я функция — определить наиболее подходящий способ воплощения найденного решения в виде цифрового продукта. Участники проекта в рамках своих компетенций могут учесть отдельные факторы, влияющие на устройство продукта, но собрать всё вместе может только продюсер;
— 3-я функция — организовать проектную работу (не управлять): выявить требования к команде, подобрать подходящих специалистов, запустить рабочий процесс. Управление распределяется между ключевыми участниками;
— Обладание информацией само по себе ничего не даёт, нужна способность к её интерпретации, критерии для оценки;
— Повторение схемы работы конкурента даёт её снимок на определённый момент, но не вектор развития. Пока вы её скопируете, конкурент сделает следующий шаг, и вы останетесь догоняющими;
— Крайне важно, чтобы тот, кто формулирует бизнес-модель, делал это для себя (не консультант);
— Работоспособность бизнес-модели проявляется в способности находиться компании в нужной среде продолжительное время и извлекать из этого пользу;
— Нельзя просто нанять разработчиков для создания цифровых инструментов под одновременно формулируемую бизнес-модель. Это напрасная и часто невосполнимая трата времени и денег;
— Бессмысленно делать это после того, как бизнес в своих терминах сформулировал схему работы, так как модель должна быть выстроена вокруг сценариев использования цифровых инструментов;
— Базовый набор продюсера: компетенции в технологиях, навыки системного мышления и проектирования, опыт управления проектами, предпринимательский опыт;
— Он понимает исходные цели, лежащие в основе проекта, и может донести их до проектной команды, не потеряв важные детали;
— При необходимости продюсер готов искать решение и без использования цифровых инструментов.
https://paranoidmethod.org/paranoid-method-book-08
— Продюсер участвует в создании концепции продукта и обладает компетенциями для управления проектом;
— В глазах проектной команды он представляет собой заказчика, а в глазах бизнеса — партнёра, помогающего найти технологическое решение;
— Многие компании относятся к привлечению внешних участников скорее как к исключению. Проблема в том, что внутри компании нельзя собрать всех, кто необходим для уникального проекта: иногда нужны люди с неожиданными компетенциями; крутые специалисты, без которых не найти нестандартных решений, ищут интересные задачи и участвуют в разных проектах;
— Продюсер несёт ответственность за результат проекта и наделён полномочиями, в том числе правом менять состав команды;
— Его 1-я функция — найти, как решить задачи бизнеса с помощью цифровых инструментов, описать принципиальную схему решения и выстроить обновлённую бизнес-модель, связанную с продуктом;
— 2-я функция — определить наиболее подходящий способ воплощения найденного решения в виде цифрового продукта. Участники проекта в рамках своих компетенций могут учесть отдельные факторы, влияющие на устройство продукта, но собрать всё вместе может только продюсер;
— 3-я функция — организовать проектную работу (не управлять): выявить требования к команде, подобрать подходящих специалистов, запустить рабочий процесс. Управление распределяется между ключевыми участниками;
— Обладание информацией само по себе ничего не даёт, нужна способность к её интерпретации, критерии для оценки;
— Повторение схемы работы конкурента даёт её снимок на определённый момент, но не вектор развития. Пока вы её скопируете, конкурент сделает следующий шаг, и вы останетесь догоняющими;
— Крайне важно, чтобы тот, кто формулирует бизнес-модель, делал это для себя (не консультант);
— Работоспособность бизнес-модели проявляется в способности находиться компании в нужной среде продолжительное время и извлекать из этого пользу;
— Нельзя просто нанять разработчиков для создания цифровых инструментов под одновременно формулируемую бизнес-модель. Это напрасная и часто невосполнимая трата времени и денег;
— Бессмысленно делать это после того, как бизнес в своих терминах сформулировал схему работы, так как модель должна быть выстроена вокруг сценариев использования цифровых инструментов;
— Базовый набор продюсера: компетенции в технологиях, навыки системного мышления и проектирования, опыт управления проектами, предпринимательский опыт;
— Он понимает исходные цели, лежащие в основе проекта, и может донести их до проектной команды, не потеряв важные детали;
— При необходимости продюсер готов искать решение и без использования цифровых инструментов.
https://paranoidmethod.org/paranoid-method-book-08
Роман Камушкин рассмотрел примеры использования аватарок (userpic) в интерфейсах. Полезно, если планируете сделать хороший компонент или дизайните взаимодействие с группами и отдельными пользователями.
— Состояния: пустое, инициалы, фото;
— Размеры: 24−40dp для шапки сайта, 40−48dp для списков; 56+dp для пользовательского профиля и настроек;
— Дополнительные элементы: индикатор статуса (например, что человек онлайн), бейдж с числом (количество сообщений от человека), кнопка действия с этим пользователем;
— Рядом с аватаром может быть текст: имя пользователя, расшифровка статуса, дополнительные детали (например, когда был онлайн, должность);
— В профиле текст часто размещают под аватаркой;
— Об отдельных событиях (пользователь опубликовал новую историю) можно сообщить с помощью рамки вокруг аватара;
— Пользовательский прогресс можно показать частично закрашенной рамкой;
— То, что пользователь выбран из списка, можно показать рамкой и бейджем с галочкой или большой галочкой поверх аватара;
— Плюс рядом с группой аватаров символизирует возможность добавить ещё людей;
— А число (например, +5) — что по нажатию можно увидеть ещё 5 пользователей из этой группы;
— При наведении курсора на аватар в группе можно показать тултип с именем пользователя.
Перевод плохой, так что ссылки две:
— Перевод: https://ux.pub/vse-chto-nuzhno-znat-o-dizayne-avatarok/
— Оригинал [English]: https://blog.prototypr.io/a22af3daa1f2
— Состояния: пустое, инициалы, фото;
— Размеры: 24−40dp для шапки сайта, 40−48dp для списков; 56+dp для пользовательского профиля и настроек;
— Дополнительные элементы: индикатор статуса (например, что человек онлайн), бейдж с числом (количество сообщений от человека), кнопка действия с этим пользователем;
— Рядом с аватаром может быть текст: имя пользователя, расшифровка статуса, дополнительные детали (например, когда был онлайн, должность);
— В профиле текст часто размещают под аватаркой;
— Об отдельных событиях (пользователь опубликовал новую историю) можно сообщить с помощью рамки вокруг аватара;
— Пользовательский прогресс можно показать частично закрашенной рамкой;
— То, что пользователь выбран из списка, можно показать рамкой и бейджем с галочкой или большой галочкой поверх аватара;
— Плюс рядом с группой аватаров символизирует возможность добавить ещё людей;
— А число (например, +5) — что по нажатию можно увидеть ещё 5 пользователей из этой группы;
— При наведении курсора на аватар в группе можно показать тултип с именем пользователя.
Перевод плохой, так что ссылки две:
— Перевод: https://ux.pub/vse-chto-nuzhno-znat-o-dizayne-avatarok/
— Оригинал [English]: https://blog.prototypr.io/a22af3daa1f2
UXPUB 🇺🇦 Дизайн-спільнота
Все что нужно знать о дизайне аватарок
В этой статье вы узнаете состояния, стили, размеры, использование и шаблоны аватаров
В Passteam написали о транзакционных уведомлениях.
— Они сообщают пользователю о том, что происходит в системе после его действий и касается его;
— Пользователи относятся к ним лучше, чем к рекламным сообщениям;
— Своевременное информирование по делу повышает качество обслуживания;
— Но такие уведомления тоже напоминают клиентам о компании (повышают узнаваемость бренда) и могут подталкивать их к определённым действиям.
Например, можно отправлять:
— Приветствие после регистрации, подталкивающее клиента к следующему шагу;
— Начисление и списание баллов в программе лояльности (также полезно сообщить, если баллы скоро сгорят);
— Напоминание о запланированном взаимодействии с компанией;
— Просьба оставить отзыв после состоявшегося взаимодействия и получить бонус;
— Благодарность за покупку с полезным советом, который с ней связан, чтобы не становиться спамом;
— Подтверждение заказа и изменение его статуса.
https://vc.ru/marketing/289646
— Они сообщают пользователю о том, что происходит в системе после его действий и касается его;
— Пользователи относятся к ним лучше, чем к рекламным сообщениям;
— Своевременное информирование по делу повышает качество обслуживания;
— Но такие уведомления тоже напоминают клиентам о компании (повышают узнаваемость бренда) и могут подталкивать их к определённым действиям.
Например, можно отправлять:
— Приветствие после регистрации, подталкивающее клиента к следующему шагу;
— Начисление и списание баллов в программе лояльности (также полезно сообщить, если баллы скоро сгорят);
— Напоминание о запланированном взаимодействии с компанией;
— Просьба оставить отзыв после состоявшегося взаимодействия и получить бонус;
— Благодарность за покупку с полезным советом, который с ней связан, чтобы не становиться спамом;
— Подтверждение заказа и изменение его статуса.
https://vc.ru/marketing/289646
vc.ru
Присылай пользу: что такое транзакционные уведомления и почему они нравятся людям — Маркетинг на vc.ru
Компания Sap&LoadHouse провела исследование «Преимущества смс» и сделала вывод: 76% опрошенных клиентов считают транзакционные уведомления хорошим способом повысить качество обслуживания.
Джастин Бейкер написал вводную статью о проектировании тактильного взаимодействия.
— Тактильные ощущения человек получает с помощью осязания. Обратная связь может быть тактильной;
— С помощью вибрации можно сообщить пользователю: а) Что-то пошло не так; б) Что-то случилось или не случилось, в) Что стоит посмотреть на экран (навигатор привёл к развилке);
— Есть паттерны сообщений о позитивных, нейтральных и негативных событиях. Например, позитивное событие — несколько импульсов возрастающей силы. У импульсов есть характеристики, которыми можно управлять;
— Резкость — насколько остро импульс ощущается. Понижайте её в обратной связи для длительных событий (нажатая педаль газа в игре);
— Интенсивность — насколько сильным импульс ощущается. Понижайте её в дополнительной обратной связи для нейтральных событий (добавление товара в корзину) и повышайте для транзакционных (успешная оплата);
— Тактильной должна быть дополнительная обратная связь. Об успешной оплате надо сообщать в первую очередь визуально, и уже дополнительно — вибрацией;
— Используйте тактильные сигналы экономно, чтобы не отвлекать пользователя, не снижать эффективность тактильной обратной связи и не повышать расход батареи;
— Учтите, что вибрация может мешать другим действиям, например, фокусировке камеры и вводу текста;
— Анализируйте потребность в такой обратной связи и используйте её целенаправленно. Например, когда пользователь загружает в приложение фото, он переключается между приложением и камерой и может не увидеть визуальное подтверждение загрузки фото. Тактильное сообщение о загрузке будет весьма кстати;
— Тактильный сигнал помогает сообщить об активации скрытой функции (когда нет визуального подтверждения).
https://ux.pub/haptic-ux-dizayn-taktilnyh-oschuscheniy-sensornogo-interfeysa/
— Тактильные ощущения человек получает с помощью осязания. Обратная связь может быть тактильной;
— С помощью вибрации можно сообщить пользователю: а) Что-то пошло не так; б) Что-то случилось или не случилось, в) Что стоит посмотреть на экран (навигатор привёл к развилке);
— Есть паттерны сообщений о позитивных, нейтральных и негативных событиях. Например, позитивное событие — несколько импульсов возрастающей силы. У импульсов есть характеристики, которыми можно управлять;
— Резкость — насколько остро импульс ощущается. Понижайте её в обратной связи для длительных событий (нажатая педаль газа в игре);
— Интенсивность — насколько сильным импульс ощущается. Понижайте её в дополнительной обратной связи для нейтральных событий (добавление товара в корзину) и повышайте для транзакционных (успешная оплата);
— Тактильной должна быть дополнительная обратная связь. Об успешной оплате надо сообщать в первую очередь визуально, и уже дополнительно — вибрацией;
— Используйте тактильные сигналы экономно, чтобы не отвлекать пользователя, не снижать эффективность тактильной обратной связи и не повышать расход батареи;
— Учтите, что вибрация может мешать другим действиям, например, фокусировке камеры и вводу текста;
— Анализируйте потребность в такой обратной связи и используйте её целенаправленно. Например, когда пользователь загружает в приложение фото, он переключается между приложением и камерой и может не увидеть визуальное подтверждение загрузки фото. Тактильное сообщение о загрузке будет весьма кстати;
— Тактильный сигнал помогает сообщить об активации скрытой функции (когда нет визуального подтверждения).
https://ux.pub/haptic-ux-dizayn-taktilnyh-oschuscheniy-sensornogo-interfeysa/
UXPUB 🇺🇦 Дизайн-спільнота
Haptic UX – дизайн тактильных ощущений сенсорного интерфейса
В этой статье мы рассмотрим базовый набор тактильных ощущений, их применения в UX и лучшие практики
Марина Яланска написала о контрасте в интерфейсе.
— Максимально возможный контраст изображения называется динамическим диапазоном;
— Люди с нарушениями зрения различают видимые объекты в основном за счёт контраста;
— В академическом искусстве контраст применяется не только для управления вниманием, но и для создания настроения, атмосферы, добавления разнообразия, визуального интереса или драматизма в произведение;
— В дизайне интерфейсов это один из ключевых факторов, влияющих на визуальную иерархию и возможность беглого изучения страниц;
— Способы создания контраста: 1) Цвет; 2) Размер; 3) Форма (форма одного элемента отличается от формы остальных); 4) Расположение; 5) Текстура; 6) Ориентация (один элемент повёрнут относительно остальных);
— Полезно чёрно-белое тестирование интерфейса. Цветной интерфейс может выглядеть иначе на других экранах, низкий контраст неудобен дальтоникам;
— Есть разные типы типографского контраста. Например: контраст начертаний (жирное начертание выделяется на фоне основного) или структур (формы букв разных шрифтов);
— Среди менее популярных типов — контраст через ритм. Элементы, нарушающие ритм, привлекают больше внимания;
— Позаботьтесь о контрасте, если размещаете текст поверх изображения;
— Слишком большой контраст вызывает чрезмерное напряжение глаз и усложняет взаимодействие. Контраст мешает на страницах с длинным текстом;
— Много разного контраста = его отсутствие. Также возрастает время, необходимое для изучения системы, выполнения задачи и запоминания маршрутов в системе;
— Не забывайте о негативном пространстве, которое помогает элементам интерфейса дышать и повышает эффективность разных типов контраста.
https://www.uprock.ru/articles/tipy-kontrasta-v-ui-dizayne
— Максимально возможный контраст изображения называется динамическим диапазоном;
— Люди с нарушениями зрения различают видимые объекты в основном за счёт контраста;
— В академическом искусстве контраст применяется не только для управления вниманием, но и для создания настроения, атмосферы, добавления разнообразия, визуального интереса или драматизма в произведение;
— В дизайне интерфейсов это один из ключевых факторов, влияющих на визуальную иерархию и возможность беглого изучения страниц;
— Способы создания контраста: 1) Цвет; 2) Размер; 3) Форма (форма одного элемента отличается от формы остальных); 4) Расположение; 5) Текстура; 6) Ориентация (один элемент повёрнут относительно остальных);
— Полезно чёрно-белое тестирование интерфейса. Цветной интерфейс может выглядеть иначе на других экранах, низкий контраст неудобен дальтоникам;
— Есть разные типы типографского контраста. Например: контраст начертаний (жирное начертание выделяется на фоне основного) или структур (формы букв разных шрифтов);
— Среди менее популярных типов — контраст через ритм. Элементы, нарушающие ритм, привлекают больше внимания;
— Позаботьтесь о контрасте, если размещаете текст поверх изображения;
— Слишком большой контраст вызывает чрезмерное напряжение глаз и усложняет взаимодействие. Контраст мешает на страницах с длинным текстом;
— Много разного контраста = его отсутствие. Также возрастает время, необходимое для изучения системы, выполнения задачи и запоминания маршрутов в системе;
— Не забывайте о негативном пространстве, которое помогает элементам интерфейса дышать и повышает эффективность разных типов контраста.
https://www.uprock.ru/articles/tipy-kontrasta-v-ui-dizayne
www.uprock.ru
Типы контраста в UI-дизайне — читайте на UPROCK
Типы контраста в UI-дизайне: читайте полезные статьи о дизайне в блоге UPROCK
В «Собаке Павловой» написали о быстром формате предоставления результатов пользовательского тестирования.
— При обработке результатов тестирования легко потерять важную информацию. Кажется, что нужно фиксировать каждое слово, но это долго и дорого;
— Для предоставления результатов важно выбрать формат. Он зависит от того, а) кто будет их использовать, б) зачем они нужны, в) на какой стадии готовности находится интерфейс;
— В «Собаке Павловой» используют 3 формата, отличающиеся подробностью: 1) Скринкаст тестирования с полной расшифровкой; 2) Скринкаст с заметками в виде структурированного конспекта; 3) Инсайты, важные комментарии, ошибки;
— 3-й формат стоит попробовать, когда исследователь полностью в теме или нельзя записывать экран. Нужен навык мультизадачного активного слушателя;
— Можно записывать аудио, но не обязательно. Главное, зафиксировать всё важное: инсайты, комментарии, ошибки;
— В результатах надо обозначить, как респонденты выполняют сценарии, микросценарии и задачи. Подходит табличная форма;
— Не стоит интерпретировать результаты с точки зрения частотности. Но если проблема возникла только у одного респондента, возможно, это его индивидуальная непонятливость;
— Находки тестирования удобно передавать не в таблице, а прямо в контексте — комментариями к макетам в Фигме или Миро;
— В зависимости от задачи, цветом можно кодировать источник проблемы (пользовательское тестирование или экспертная оценка), её критичность или сложность исправления;
— От заказчика не требуется большой квалификации, чтобы перевести найденные проблемы в задачи для разработчиков: пробежался глазами по экранам и показал пальцем, что делать, а потом проверил внедрение.
https://vc.ru/design/297038
— При обработке результатов тестирования легко потерять важную информацию. Кажется, что нужно фиксировать каждое слово, но это долго и дорого;
— Для предоставления результатов важно выбрать формат. Он зависит от того, а) кто будет их использовать, б) зачем они нужны, в) на какой стадии готовности находится интерфейс;
— В «Собаке Павловой» используют 3 формата, отличающиеся подробностью: 1) Скринкаст тестирования с полной расшифровкой; 2) Скринкаст с заметками в виде структурированного конспекта; 3) Инсайты, важные комментарии, ошибки;
— 3-й формат стоит попробовать, когда исследователь полностью в теме или нельзя записывать экран. Нужен навык мультизадачного активного слушателя;
— Можно записывать аудио, но не обязательно. Главное, зафиксировать всё важное: инсайты, комментарии, ошибки;
— В результатах надо обозначить, как респонденты выполняют сценарии, микросценарии и задачи. Подходит табличная форма;
— Не стоит интерпретировать результаты с точки зрения частотности. Но если проблема возникла только у одного респондента, возможно, это его индивидуальная непонятливость;
— Находки тестирования удобно передавать не в таблице, а прямо в контексте — комментариями к макетам в Фигме или Миро;
— В зависимости от задачи, цветом можно кодировать источник проблемы (пользовательское тестирование или экспертная оценка), её критичность или сложность исправления;
— От заказчика не требуется большой квалификации, чтобы перевести найденные проблемы в задачи для разработчиков: пробежался глазами по экранам и показал пальцем, что делать, а потом проверил внедрение.
https://vc.ru/design/297038
vc.ru
Фиксируем результаты UX-тестирования интерфейса на бегу: экономим время и обходимся без объемных документов — Дизайн на vc.ru
Мы уже рассказывали, как подготовить макеты к тестированию и подготовиться самому, а про проведение рассказывают и так все. Так что в последней части нашей серии мы поговорим про фиксацию результатов на бегу. По отдельным кускам интерфейса и с мгновенной…
Эдвард Скотт написал об обработке опечаток в предложениях автозаполнения.
— Пользователи часто полагаются на предложения автозаполнения в строке поиска;
— Автозаполнение не умеет работать с опечатками на 69% сайтов, исследованных Baymard Institute, — предложения становятся нерелевантными или просто пропадают;
— В этом случае, если пользователь опечатывается, он тратит время на исправление ошибки, меняет стратегию поиска (переключается на поиск по категориям) или покидает сайт, посчитав, что на нём нет нужных товаров;
— Проблема особенно актуальна на мобильных устройствах: опечататься проще, исправить ошибку сложнее;
— Многие сайты исправляют опечатки уже потом, при отображении результатов поиска, но проблема в том, что часть пользователей не отправляет запрос, пока автозаполнение не предложит что-то релевантное;
— В свободном доступе есть решения для проверки орфографии, но они могут ничего не знать о брендах и узкоспециализированных товарах. Плюс, их может быть сложно интегрировать с некоторыми поисковыми движками;
— Анализируйте логи запросов автозаполнения, чтобы узнать, какие ошибки совершают ваши пользователи.
https://ux.pub/issledovanie-kak-otsutstvie-avtozapolneniya-dlya-zaprosov-s-oshibkami-mozhet-zatrudnit-poisk-produktov/
— Пользователи часто полагаются на предложения автозаполнения в строке поиска;
— Автозаполнение не умеет работать с опечатками на 69% сайтов, исследованных Baymard Institute, — предложения становятся нерелевантными или просто пропадают;
— В этом случае, если пользователь опечатывается, он тратит время на исправление ошибки, меняет стратегию поиска (переключается на поиск по категориям) или покидает сайт, посчитав, что на нём нет нужных товаров;
— Проблема особенно актуальна на мобильных устройствах: опечататься проще, исправить ошибку сложнее;
— Многие сайты исправляют опечатки уже потом, при отображении результатов поиска, но проблема в том, что часть пользователей не отправляет запрос, пока автозаполнение не предложит что-то релевантное;
— В свободном доступе есть решения для проверки орфографии, но они могут ничего не знать о брендах и узкоспециализированных товарах. Плюс, их может быть сложно интегрировать с некоторыми поисковыми движками;
— Анализируйте логи запросов автозаполнения, чтобы узнать, какие ошибки совершают ваши пользователи.
https://ux.pub/issledovanie-kak-otsutstvie-avtozapolneniya-dlya-zaprosov-s-oshibkami-mozhet-zatrudnit-poisk-produktov/
UXPUB 🇺🇦 Дизайн-спільнота
Исследование. Как отсутствие автозаполнения для запросов с ошибками может затруднить поиск продуктов
Предлагайте релевантные подсказки автозаполнения для поисковых запросов с незначительными ошибками
Маргарита Хохлова сформулировала принципы, как писать уместный и этичный интерфейсный текст.
— Помните, что пользователи могут быть мужчинами и женщинами, и ищите гендерно-нейтральные формулировки. «Понял, принял» → «Понятно, принято»;
— Учитывайте, что у них может быть разный опыт. 2GIS показывает, сколько каллорий можно сжечь, если пройти путь пешком. Для людей с пищевыми расстройствами, дефицитом веса и ожирением эта информация может быть источником стресса, а скрыть её нельзя;
— Не спрашивайте о личном без необходимости. Вместо секретного вопроса «Как называла вас бабушка» лучше спросите про любимую книгу;
— Продумывайте разные жизненные ситуации, когда человек может воспользоваться продуктом. Странно видеть сообщение «Вы отправили заявку на карту. Замечательный день», если старая карта украдена или (в случае с кредиткой) срочно понадобились деньги;
— Не шутите на темы физического и ментального здоровья. В приложении для отслеживания уровня сахара в крови режим более точного контроля называется «Режим параноика». Но он может пригодиться и тем, кто только столкнулся с диагнозом, людям с тяжёлым течением болезни и так далее;
— Не поддерживайте гендерные, национальные и культурные стереотипы. Не вставляйте в сообщение о Беларуси эмодзи картошки;
— Не оценивайте людей по возрасту. Выбор репетитора по возрасту → по опыту;
— Осторожнее с пользовательским контентом. Человек часто обращался в службу поддержки, а почтовик сообщил, что этот адрес электронной почты — «Ваш любимка».
https://vc.ru/design/310380
— Помните, что пользователи могут быть мужчинами и женщинами, и ищите гендерно-нейтральные формулировки. «Понял, принял» → «Понятно, принято»;
— Учитывайте, что у них может быть разный опыт. 2GIS показывает, сколько каллорий можно сжечь, если пройти путь пешком. Для людей с пищевыми расстройствами, дефицитом веса и ожирением эта информация может быть источником стресса, а скрыть её нельзя;
— Не спрашивайте о личном без необходимости. Вместо секретного вопроса «Как называла вас бабушка» лучше спросите про любимую книгу;
— Продумывайте разные жизненные ситуации, когда человек может воспользоваться продуктом. Странно видеть сообщение «Вы отправили заявку на карту. Замечательный день», если старая карта украдена или (в случае с кредиткой) срочно понадобились деньги;
— Не шутите на темы физического и ментального здоровья. В приложении для отслеживания уровня сахара в крови режим более точного контроля называется «Режим параноика». Но он может пригодиться и тем, кто только столкнулся с диагнозом, людям с тяжёлым течением болезни и так далее;
— Не поддерживайте гендерные, национальные и культурные стереотипы. Не вставляйте в сообщение о Беларуси эмодзи картошки;
— Не оценивайте людей по возрасту. Выбор репетитора по возрасту → по опыту;
— Осторожнее с пользовательским контентом. Человек часто обращался в службу поддержки, а почтовик сообщил, что этот адрес электронной почты — «Ваш любимка».
https://vc.ru/design/310380
vc.ru
Как UX-дизайнерам и редакторам писать уместные и этичные тексты — Дизайн на vc.ru
Меня зовут Маргарита Хохлова, я занимаюсь продуктовыми текстами больше трёх лет. Сначала казалось, что можно стать хорошим редактором, если отлично разобраться в синтаксисе интерфейсов, прокачать продуктовое мышление, научиться строить пользовательские сценарии…
В GTE Localize написали об ошибках при создании многоязычного сайта.
— При автоматическом переводе возникнут проблемы со специальными терминами и неправильным контекстом;
— В США (а также Мьянме и Либерии, но под эти рынки вряд ли кто-то станет локализовать свой сайт) вместо метрической системы всё считают в унциях, футах и дюймах;
— В США даты указывают в формате «месяц / день / год»;
— Кнопку изменения языка сайта размещайте в поле зрения пользователя, например, в правом верхнем углу страницы. Название языка можно сопроводить изображением флага;
— Если языковых версий несколько, список языков для выбора размещайте в раскрывающемся меню;
— В идеале сайт должен определять, откуда пользователь, и сразу показывать содержимое на правильном языке.
Перевести текст недостаточно, дизайн должен учитывать особенности разных стран и культур:
— В цветовой палитре: сайт Макдональдса для Норвегии использует жёлтый и зелёный цвет;
— Количестве контента: на сайте Старбакса для Японии намного больше текстового контента;
— Ориентации текста: сайт ООН на арабском языке отзеркален по горизонтали.
https://www.uprock.ru/articles/4-tipichnye-oshibki-pri-sozdanii-mnogoyazychnogo-sayta
— При автоматическом переводе возникнут проблемы со специальными терминами и неправильным контекстом;
— В США (а также Мьянме и Либерии, но под эти рынки вряд ли кто-то станет локализовать свой сайт) вместо метрической системы всё считают в унциях, футах и дюймах;
— В США даты указывают в формате «месяц / день / год»;
— Кнопку изменения языка сайта размещайте в поле зрения пользователя, например, в правом верхнем углу страницы. Название языка можно сопроводить изображением флага;
— Если языковых версий несколько, список языков для выбора размещайте в раскрывающемся меню;
— В идеале сайт должен определять, откуда пользователь, и сразу показывать содержимое на правильном языке.
Перевести текст недостаточно, дизайн должен учитывать особенности разных стран и культур:
— В цветовой палитре: сайт Макдональдса для Норвегии использует жёлтый и зелёный цвет;
— Количестве контента: на сайте Старбакса для Японии намного больше текстового контента;
— Ориентации текста: сайт ООН на арабском языке отзеркален по горизонтали.
https://www.uprock.ru/articles/4-tipichnye-oshibki-pri-sozdanii-mnogoyazychnogo-sayta
www.uprock.ru
4 типичные ошибки при создании многоязычного сайта — читайте на UPROCK
4 типичные ошибки при создании многоязычного сайта: читайте полезные статьи о дизайне в блоге UPROCK
Николай Бабич написал, что такое чекбоксы и переключатели, как их правильно использовать и чем они друг от друга отличаются.
«Когда пользователь взаимодействует с чекбоксами (например, заполняя какую-то форму), он не ждёт мгновенной обратной связи. Изменения произойдут потом, когда он нажмёт „Сохранить“ или „Отправить“.
С переключателями всё наоборот. Когда пользователь двигает переключатель, он ожидает немедленных изменений. Мы привыкли к этому в реальной жизни: когда щёлкаешь выключателем, сразу загорается свет».
In English. #checkbox #toggle
«Когда пользователь взаимодействует с чекбоксами (например, заполняя какую-то форму), он не ждёт мгновенной обратной связи. Изменения произойдут потом, когда он нажмёт „Сохранить“ или „Отправить“.
С переключателями всё наоборот. Когда пользователь двигает переключатель, он ожидает немедленных изменений. Мы привыкли к этому в реальной жизни: когда щёлкаешь выключателем, сразу загорается свет».
In English. #checkbox #toggle
Продуктовый дизайн (UX/UI), брендинг и аналитика
Когда использовать чекбокс, а когда переключатель - Продуктовый дизайн (UX/UI), брендинг и аналитика
Переключатели предназначены для моментальных действий. Чекбоксы требуют нажатия кнопки. Почему так? Читайте в этой статье.
Александр Васин (Groza.design) опубликовал трек «Русский дизайн», записанный для альманаха «Лепота».
https://www.youtube.com/watch?v=jP6gTio9e1Y
https://www.youtube.com/watch?v=jP6gTio9e1Y
YouTube
Русский дизайн / Александр Васин и группа «Ижица»
«Русский дизайн»
музыка и слова — Александр Васин
Мария Дубровина — вокал
Полина Ларина — вокал
Сергей Емельяненко — аранжировка, балалайка
Сергей Максимкин — баян
Пётр Черниенко — звукорежиссер
клип:
Арсений Надеев — режиссер монтажа
Дарья Андреева — исполнительный…
музыка и слова — Александр Васин
Мария Дубровина — вокал
Полина Ларина — вокал
Сергей Емельяненко — аранжировка, балалайка
Сергей Максимкин — баян
Пётр Черниенко — звукорежиссер
клип:
Арсений Надеев — режиссер монтажа
Дарья Андреева — исполнительный…
Роман Бунин рассказал, как спроектировать хороший дашборд.
— Соберите требования у всех заинтересованных сторон. Надо понять: а) как работает подразделение, которому нужен дашборд, б) кто им будет пользоваться, в) ответы на какие вопросы они будут искать и какие бизнес-решения принимать, г) в каком контексте и с каких устройств будут это делать;
— Для ответа на каждый пользовательский вопрос предложите как минимум один элемент дашборда. Например: «Какова общая обстановка? → Фактоиды + мини-графики»; «Какова динамика количества сделок? → Бар-чарт по количеству сделок во времени»;
— Вёрстка дашборда — достаточно рутинное занятие, если требования собраны качественно. Основные приёмы: F-паттерн чтения и контраст;
— Десктопную и мобильную версию обычно верстают отдельно. Здесь пригодится понимание контекста. В энтерпрайзе мобильные дашборды — редкость (в основном из-за проблем с безопасностью данных);
— Для разных дашбордов подходят разные инструменты: разовые сложные визуализации удобно делать с помощью R или Python, операционные дашборды — в Tableau или Yandex DataLens, сложную операционку с высокими требованиями к скорости и дизайну — с помощью d3.js или самописных инструментов;
— Аналитик — не специалист по проектированию дашбордов, ему не хватает навыков дизайна и правильной компоновки данных. Если в компании с дашбордами будет работать больше 20 человек, возможно, стоит нанять специалиста по проектированию дашбордов;
— Чтобы дашборды работали быстрее, не стоит собирать визуализацию «всё в одном». Правильный подход к архитектуре — проваливаться из одного отчета в другой, а не путешествовать по разным уровням детализации внутри одного дашборда.
https://sense23.com/post/kak-sozdavat-poleznye-dlya-biznesa-dashbordy-algoritm-printsipy-verstki-instrumenty-arhitektura
— Соберите требования у всех заинтересованных сторон. Надо понять: а) как работает подразделение, которому нужен дашборд, б) кто им будет пользоваться, в) ответы на какие вопросы они будут искать и какие бизнес-решения принимать, г) в каком контексте и с каких устройств будут это делать;
— Для ответа на каждый пользовательский вопрос предложите как минимум один элемент дашборда. Например: «Какова общая обстановка? → Фактоиды + мини-графики»; «Какова динамика количества сделок? → Бар-чарт по количеству сделок во времени»;
— Вёрстка дашборда — достаточно рутинное занятие, если требования собраны качественно. Основные приёмы: F-паттерн чтения и контраст;
— Десктопную и мобильную версию обычно верстают отдельно. Здесь пригодится понимание контекста. В энтерпрайзе мобильные дашборды — редкость (в основном из-за проблем с безопасностью данных);
— Для разных дашбордов подходят разные инструменты: разовые сложные визуализации удобно делать с помощью R или Python, операционные дашборды — в Tableau или Yandex DataLens, сложную операционку с высокими требованиями к скорости и дизайну — с помощью d3.js или самописных инструментов;
— Аналитик — не специалист по проектированию дашбордов, ему не хватает навыков дизайна и правильной компоновки данных. Если в компании с дашбордами будет работать больше 20 человек, возможно, стоит нанять специалиста по проектированию дашбордов;
— Чтобы дашборды работали быстрее, не стоит собирать визуализацию «всё в одном». Правильный подход к архитектуре — проваливаться из одного отчета в другой, а не путешествовать по разным уровням детализации внутри одного дашборда.
https://sense23.com/post/kak-sozdavat-poleznye-dlya-biznesa-dashbordy-algoritm-printsipy-verstki-instrumenty-arhitektura
Блог ProductSense
Как создавать полезные для бизнеса дашборды: алгоритм, принципы верстки, инструменты, архитектура
Плохой дашборд — как неудобная приборная панель автомобиля: способен исказить данные, ввести пользователя в заблуждение и серьезно замедлить принятие решений. Хороший — подсвечивает важные данные, …
Опубликованы видео с Avito Text Talk 2021:
1. Виолетта Шматкова, Авито — Как выстроить взаимодействие редактора и дизайнера в продукте
Почему дизайнер, продакт и разработчик не должны писать текст. На каком этапе звать редактора и как получить от него максимум пользы. В каких ситуациях можно сэкономить на редакторе (нервы, деньги, время).
youtube.com/watch?v=qHdMCkW_jSA
2. Маргарита Хохлова, Профи — Зачем UX-редактору дружить с поддержкой
Как работа с поддержкой помогает лучше понимать пользователей, развивать эмпатию, находить продуктовые инсайты и неприятные ошибки. Как наладить взаимодействие и не выгореть из-за негатива.
youtube.com/watch?v=lFI-agXA6zk
3. Кирилл Егерев, Детский мир — Ищите троих: почему один специалист не напишет всё быстро и хорошо
О сложности переключения с одного текста на другой. Особенно, когда ежедневно приходится решать массу задач разного типа в десятке продуктов.
youtube.com/watch?v=u1jeVicikM4
1. Виолетта Шматкова, Авито — Как выстроить взаимодействие редактора и дизайнера в продукте
Почему дизайнер, продакт и разработчик не должны писать текст. На каком этапе звать редактора и как получить от него максимум пользы. В каких ситуациях можно сэкономить на редакторе (нервы, деньги, время).
youtube.com/watch?v=qHdMCkW_jSA
2. Маргарита Хохлова, Профи — Зачем UX-редактору дружить с поддержкой
Как работа с поддержкой помогает лучше понимать пользователей, развивать эмпатию, находить продуктовые инсайты и неприятные ошибки. Как наладить взаимодействие и не выгореть из-за негатива.
youtube.com/watch?v=lFI-agXA6zk
3. Кирилл Егерев, Детский мир — Ищите троих: почему один специалист не напишет всё быстро и хорошо
О сложности переключения с одного текста на другой. Особенно, когда ежедневно приходится решать массу задач разного типа в десятке продуктов.
youtube.com/watch?v=u1jeVicikM4
YouTube
Как выстроить взаимодействие редактора и дизайнера в продукте | Виолетта Шматкова, Авито
Виолетта рассказала о том, как устроен процесс совместной работы редактора и дизайнера над интерфейсными текстами и поделилась своими приёмами по экономии времени.
00:00 — Представление спикера и темы
00:28 — Кто должен писать текст
02:57 — Почему в Авито…
00:00 — Представление спикера и темы
00:28 — Кто должен писать текст
02:57 — Почему в Авито…
Кейт Каплан из Nielsen Norman Group написала о пустых состояниях в сложных продуктах.
Типичные сценарии, когда пользователь с ними сталкивается:
— Не добавил чего-либо в избранное, и связанный контейнер («Избранное») остался пустым;
— Не настроил уведомления, и панель, на которой они должны отображаться, не используется;
— Продукт состоит из рабочих пространств или дашбордов, а пользователь ничего в эти области не поместил;
— Нулевые результаты поиска или фильтрации.
Рекомендации:
— Используйте пустые состояния, чтобы сообщить о статусе системы, иначе пользователь может запутаться;
— Например, посчитать непроработанное пустое состояние ошибкой или продолжающейся загрузкой данных;
— Не показывайте состояние «Ничего не найдено» временно, пока обрабатывается запрос или загружаются данные (особенно, если это занимает время);
— Рассказывайте, какое содержимое в этом месте может появиться;
— Объясняйте, что для этого надо сделать. Такие контекстные подсказки не мешают, так как связаны с элементом, с которым пользователь собирается взаимодействовать. Часто их можно сразу же применить и таким образом лучше усвоить. Иногда можно сопроводить их ссылкой на справочную статью;
— Помогайте прямо из пустого состояния сделать первый шаг, чтобы в этом месте появился контент;
— В сложных системах можно предложить пользователю сгенерировать демонстрационные данные для безопасного исследования продукта.
https://ux.pub/3-rekomendatsii-po-proektirovaniyu-pustyh-sostoyaniy-v-slozhnyh-prilozheniyah/
Типичные сценарии, когда пользователь с ними сталкивается:
— Не добавил чего-либо в избранное, и связанный контейнер («Избранное») остался пустым;
— Не настроил уведомления, и панель, на которой они должны отображаться, не используется;
— Продукт состоит из рабочих пространств или дашбордов, а пользователь ничего в эти области не поместил;
— Нулевые результаты поиска или фильтрации.
Рекомендации:
— Используйте пустые состояния, чтобы сообщить о статусе системы, иначе пользователь может запутаться;
— Например, посчитать непроработанное пустое состояние ошибкой или продолжающейся загрузкой данных;
— Не показывайте состояние «Ничего не найдено» временно, пока обрабатывается запрос или загружаются данные (особенно, если это занимает время);
— Рассказывайте, какое содержимое в этом месте может появиться;
— Объясняйте, что для этого надо сделать. Такие контекстные подсказки не мешают, так как связаны с элементом, с которым пользователь собирается взаимодействовать. Часто их можно сразу же применить и таким образом лучше усвоить. Иногда можно сопроводить их ссылкой на справочную статью;
— Помогайте прямо из пустого состояния сделать первый шаг, чтобы в этом месте появился контент;
— В сложных системах можно предложить пользователю сгенерировать демонстрационные данные для безопасного исследования продукта.
https://ux.pub/3-rekomendatsii-po-proektirovaniyu-pustyh-sostoyaniy-v-slozhnyh-prilozheniyah/
UXPUB 🇺🇦 Дизайн-спільнота
3 рекомендации по проектированию пустых состояний в сложных приложениях
В статье содержится руководство по проектированию пустого состояния диалоговых окон с контейнерами без содержимого
Опубликованы видео с Mail Design Conf & Dribbble Meetup 2021:
1. Олег Турбаба (Clay), Светлана Мовчан (GeexArts), Крис Анфалова — О пользе Dribbble для дизайнеров
youtube.com/watch?v=5wnWB9zhehI
2. Signal by ONY — Бренд в эпоху уникальности
youtube.com/watch?v=lM0Hb05ZKJg
3. Музей как место встречи: доступность и инклюзивные проекты Третьяковской галереи и Музея Гараж
youtube.com/watch?v=3duS5qOK11A
4. AIC — Три дизайнера на границе эстетики и функции
youtube.com/watch?v=8mrfesNAKXI
5. Создание умной колонки Капсула Мини
youtube.com/watch?v=7XVM8hSiZ54
6. Яндекс Дзен — Дизайн себя: функция и эстетика во внешнем виде дизайнера
youtube.com/watch?v=mO_f1cOASXU
7. Лев Маврин — Советская дизайн-утопия
youtube.com/watch?v=neimjcqL4No
8. Команда Ситимобил и Ситидрайв
youtube.com/watch?v=P_Htl880yVk
9. Ультимативный гид по фестивалям от REDKEDS и RedCollar
youtube.com/watch?v=yTMVVUOPq5s
10. MaxBionic — О самых красивых протезах. Как менять жизни не просто предметом дизайна
youtube.com/watch?v=1ruqa2CR_L0
11. Даня Трабун — Как полюбить себя и причём тут 3D-обувь
youtube.com/watch?v=d-CkaOynEAE
12. Моноспекталь Сергея Гурова и Станислава Белозерова
youtube.com/watch?v=EJHBfiPKIdY
— Все видео одном плейлисте: youtube.com/playlist?list=PLzqQCeTtpSBpBdqU8095DtoD0YNfofjiv
— Альбом в ВК: vk.com/video/playlist/-50773057_49
1. Олег Турбаба (Clay), Светлана Мовчан (GeexArts), Крис Анфалова — О пользе Dribbble для дизайнеров
youtube.com/watch?v=5wnWB9zhehI
2. Signal by ONY — Бренд в эпоху уникальности
youtube.com/watch?v=lM0Hb05ZKJg
3. Музей как место встречи: доступность и инклюзивные проекты Третьяковской галереи и Музея Гараж
youtube.com/watch?v=3duS5qOK11A
4. AIC — Три дизайнера на границе эстетики и функции
youtube.com/watch?v=8mrfesNAKXI
5. Создание умной колонки Капсула Мини
youtube.com/watch?v=7XVM8hSiZ54
6. Яндекс Дзен — Дизайн себя: функция и эстетика во внешнем виде дизайнера
youtube.com/watch?v=mO_f1cOASXU
7. Лев Маврин — Советская дизайн-утопия
youtube.com/watch?v=neimjcqL4No
8. Команда Ситимобил и Ситидрайв
youtube.com/watch?v=P_Htl880yVk
9. Ультимативный гид по фестивалям от REDKEDS и RedCollar
youtube.com/watch?v=yTMVVUOPq5s
10. MaxBionic — О самых красивых протезах. Как менять жизни не просто предметом дизайна
youtube.com/watch?v=1ruqa2CR_L0
11. Даня Трабун — Как полюбить себя и причём тут 3D-обувь
youtube.com/watch?v=d-CkaOynEAE
12. Моноспекталь Сергея Гурова и Станислава Белозерова
youtube.com/watch?v=EJHBfiPKIdY
— Все видео одном плейлисте: youtube.com/playlist?list=PLzqQCeTtpSBpBdqU8095DtoD0YNfofjiv
— Альбом в ВК: vk.com/video/playlist/-50773057_49
YouTube
О пользе Dribbble для дизайнеров. Олег Турбаба, Clay / Светлана Мовчан, GeexArts / Крис Анфалова
Олег Турбаба из команды Clay, Светлана Мовчан из GeexArts и Крис Анфалова о своих работах, о пользе Dribbble для дизайнеров, сложностях и лайфхаках в его использовании.
______________
Telegram https://t.me/mailrudesign
Instagram https://www.instagram.…
______________
Telegram https://t.me/mailrudesign
Instagram https://www.instagram.…
Markswebb поделились инсайтами, как улучшить чекаут. Некоторые из них:
— Один из основных барьеров в корзине — неожиданно высокая стоимость доставки. Чтобы сохранить клиентов, не готовых за неё платить, показывайте, как получить доставку бесплатно;
— Учитывайте особенности разных категорий товаров. При заказе цветов показывайте в чекауте фото букета, при заказе крупной техники спрашивайте о доставке до двери и подъёме на этаж, при заказе одежды — о вариантах примерки;
— Чекаут — не только создание заказа, но и обогащение данных о клиенте. Детский мир узнаёт любимый магазин клиента, адрес и способ оплаты. И может при следующих заказах сразу показывать экран проверки, на котором клиенту останется нажать «Готово»;
— Ввод реквизитов пластиковой карты можно улучшить с помощью токенизации, когда их не надо вводить для каждой новой покупки;
— Чтобы не перегружать интерфейс оплаты, вариант рассрочки или оплаты долями можно показывать только от определённой стоимости заказа;
— При высокой стоимости заказа показывайте бонусы, с помощью которых её можно снизить;
— Покупателям важно получить заказ, состоящий из нескольких товаров, за один раз, а не частями. Если покупатель исключил какой-то товар из заказа, сразу после экрана успеха предлагайте дозаказать его со скидкой, выбрать другой способ доставки.
https://vc.ru/trade/309952
— Один из основных барьеров в корзине — неожиданно высокая стоимость доставки. Чтобы сохранить клиентов, не готовых за неё платить, показывайте, как получить доставку бесплатно;
— Учитывайте особенности разных категорий товаров. При заказе цветов показывайте в чекауте фото букета, при заказе крупной техники спрашивайте о доставке до двери и подъёме на этаж, при заказе одежды — о вариантах примерки;
— Чекаут — не только создание заказа, но и обогащение данных о клиенте. Детский мир узнаёт любимый магазин клиента, адрес и способ оплаты. И может при следующих заказах сразу показывать экран проверки, на котором клиенту останется нажать «Готово»;
— Ввод реквизитов пластиковой карты можно улучшить с помощью токенизации, когда их не надо вводить для каждой новой покупки;
— Чтобы не перегружать интерфейс оплаты, вариант рассрочки или оплаты долями можно показывать только от определённой стоимости заказа;
— При высокой стоимости заказа показывайте бонусы, с помощью которых её можно снизить;
— Покупателям важно получить заказ, состоящий из нескольких товаров, за один раз, а не частями. Если покупатель исключил какой-то товар из заказа, сразу после экрана успеха предлагайте дозаказать его со скидкой, выбрать другой способ доставки.
https://vc.ru/trade/309952
vc.ru
Как создать лучший опыт чекаута. Инсайты Markswebb Checkout CX Talk — Торговля на vc.ru
Корзина — одно из самых сложных мест в интернет-магазине. Здесь интересы бизнеса пересекаются с желаниями покупателей и возможностями продукта. О том, как прокачать чекаут и обеспечить лучший клиентский опыт покупателей, в прямом эфире 20 октября говорили…
Викалп Кошик написал о тултипах.
— Тултипы появляются при наведении курсора (или нажатии) на определённые элементы страницы и содержат подсказки, связанные с этими элементами, например: справки, дополнительную информацию или инструкции по заполнению полей;
— Старайтесь не прятать в них подсказки. Часть пользователей не сможет их обнаружить;
— Выбирая место появления тултипа (справа, сверху, слева или снизу от вызывающего его объекта), не перекрывайте им важную информацию. Инструкция по заполнению поля не должна перекрывать содержимое этого поля;
— Иногда пользователь случайно наводит курсор на объект с тултипом. Чтобы избежать лишнего мельтешения, тултип можно отображать, если курсор какое-то время задерживается на объекте;
— Если тултип отображается при наведении курсора, подумайте о пользователях с сенсорными экранами, пользующихся только клавиатурой, а также о других ограничениях;
— У тултипа обычно нет заголовка;
— Не стоит закрывать тултип автоматически через заданное время;
— Тултип должен быть полезным, а его текст — ясным и кратким.
https://deadsign.ru/ui/how-to-design-and-style-better-tooltips/
— Тултипы появляются при наведении курсора (или нажатии) на определённые элементы страницы и содержат подсказки, связанные с этими элементами, например: справки, дополнительную информацию или инструкции по заполнению полей;
— Старайтесь не прятать в них подсказки. Часть пользователей не сможет их обнаружить;
— Выбирая место появления тултипа (справа, сверху, слева или снизу от вызывающего его объекта), не перекрывайте им важную информацию. Инструкция по заполнению поля не должна перекрывать содержимое этого поля;
— Иногда пользователь случайно наводит курсор на объект с тултипом. Чтобы избежать лишнего мельтешения, тултип можно отображать, если курсор какое-то время задерживается на объекте;
— Если тултип отображается при наведении курсора, подумайте о пользователях с сенсорными экранами, пользующихся только клавиатурой, а также о других ограничениях;
— У тултипа обычно нет заголовка;
— Не стоит закрывать тултип автоматически через заданное время;
— Тултип должен быть полезным, а его текст — ясным и кратким.
https://deadsign.ru/ui/how-to-design-and-style-better-tooltips/
DEADSIGN
Тултипы: как создавать удобные всплывающие подсказки - DEADSIGN
Разбираемся в том, что такое тултипы: говорим об их недостатках и способах их избежать или исправить и приводим несколько практических советов, которые могут поднять UX ваших тултипов на новый уровень.