Джон Айзлвуд написал, как избежать раздробленности дизайна при гибкой разработке продукта.
Вы наверняка замечали: сайты, где шапка выбивается из основного дизайна; страницы в системах бронирования, которые явно отличаются от остальных элементов. Обновления этих проектов выходят стабильно, но им явно не хватает полноценного взгляда со стороны.
1. Постарайтесь в самом начале (нулевой спринт) как можно лучше изучить продукт и связанные с ним ограничения;
2. Сделайте концептуальное проектирование: используя полученные знания, набросайте эскизы всех возможных экранов. Найдите и заполните выявленные пробелы;
3. Определите точное креативное направление, создайте элементные коллажи — мудборды вымышленных и реальных элементов интерфейса;
4. Подключите разработчиков как можно раньше. Они укажут на технические ограничения и не решённые дизайнерские задачи;
5. Запустите дизайн с форой минимум в один спринт перед разработкой;
6. Запланируйте остановки, чтобы взглянуть со стороны на то, что в целом получается;
7. Выделите 10% времени спринта на исправление ошибок в дизайне, чтобы повысить целостность и улучшить восприятие продукта.
https://deadsign.ru/workflow/agile-and-design-how-to-avoid-frankensteining-your-product/
Вы наверняка замечали: сайты, где шапка выбивается из основного дизайна; страницы в системах бронирования, которые явно отличаются от остальных элементов. Обновления этих проектов выходят стабильно, но им явно не хватает полноценного взгляда со стороны.
1. Постарайтесь в самом начале (нулевой спринт) как можно лучше изучить продукт и связанные с ним ограничения;
2. Сделайте концептуальное проектирование: используя полученные знания, набросайте эскизы всех возможных экранов. Найдите и заполните выявленные пробелы;
3. Определите точное креативное направление, создайте элементные коллажи — мудборды вымышленных и реальных элементов интерфейса;
4. Подключите разработчиков как можно раньше. Они укажут на технические ограничения и не решённые дизайнерские задачи;
5. Запустите дизайн с форой минимум в один спринт перед разработкой;
6. Запланируйте остановки, чтобы взглянуть со стороны на то, что в целом получается;
7. Выделите 10% времени спринта на исправление ошибок в дизайне, чтобы повысить целостность и улучшить восприятие продукта.
https://deadsign.ru/workflow/agile-and-design-how-to-avoid-frankensteining-your-product/
DEADSIGN
Agile и дизайн: как не зафранкенштейнить свой проект? - DEADSIGN
Это сокращенная версия одного из выступлений на мини-конференции Clearleft в июле 2019 года.
Дима Хими написал, что надо учесть при создании юзабилити-лаборатории.
1. Простой вход для респондентов, без предъявления документов и заказа пропусков;
2. Туалет поблизости, чтобы не отвлекать исследователей на сопровождение гостей по офисным закоулкам;
3. Отсутствие прозрачных стен и дверей, чтобы респонденты не отвлекались на проходящих мимо людей;
4. Хорошее освещение, которое не слепит и не бликует на экранах;
5. Наличие окон. Респонденты бывают разные, иногда надо хорошо проветрить помещение;
6. Возможность напоить респондента водой, кофе или чаем;
7. Звукоизоляция, чтобы респонденты не отвлекались на посторонние звуки;
8. Доступный вайфай, чтобы легко протестировать сайт на устройстве респондента;
9. Вешалка для одежды и стул для вещей респондента;
10. Отсутствие растений или цветов, которые могут вызывать аллергию;
11. Большие и непрозрачные столы. Респондент не должен быть слишком близко к исследователю. Респондентам в коротких юбках может быть некомфортно за прозрачным столом;
12. Комфортная температура.
И ещё:
— Оборудование должно быть постоянно подключено и настроено, необходимые программы обновлены, их лицензии продлены;
— В комнате должны быть дублирующие кабели, зарядки и розетки;
— Должны быть источники бесперебойного питания.
https://medium.com/dimahimi/71e4b240a10e
1. Простой вход для респондентов, без предъявления документов и заказа пропусков;
2. Туалет поблизости, чтобы не отвлекать исследователей на сопровождение гостей по офисным закоулкам;
3. Отсутствие прозрачных стен и дверей, чтобы респонденты не отвлекались на проходящих мимо людей;
4. Хорошее освещение, которое не слепит и не бликует на экранах;
5. Наличие окон. Респонденты бывают разные, иногда надо хорошо проветрить помещение;
6. Возможность напоить респондента водой, кофе или чаем;
7. Звукоизоляция, чтобы респонденты не отвлекались на посторонние звуки;
8. Доступный вайфай, чтобы легко протестировать сайт на устройстве респондента;
9. Вешалка для одежды и стул для вещей респондента;
10. Отсутствие растений или цветов, которые могут вызывать аллергию;
11. Большие и непрозрачные столы. Респондент не должен быть слишком близко к исследователю. Респондентам в коротких юбках может быть некомфортно за прозрачным столом;
12. Комфортная температура.
И ещё:
— Оборудование должно быть постоянно подключено и настроено, необходимые программы обновлены, их лицензии продлены;
— В комнате должны быть дублирующие кабели, зарядки и розетки;
— Должны быть источники бесперебойного питания.
https://medium.com/dimahimi/71e4b240a10e
Medium
Важные моменты при создании Юзабилити-лаборатории
Я решил написать важные моменты по Юзабилити-лаборатории (UX Лабе), так как вроде материалы есть, но везде написано по чуть-чуть, и нет…
Михаил Греков написал, как сделать удобнее таблицы, с помощью которых пользователи управляют данными (CRM, ERP и прочие системы).
В первой статье разбирается просмотр данных.
1. Рабочая таблица должна занимать максимум места на экране. Как вариант — опция «на весь экран».
2. Объединяйте данные. Если есть данные о фамилии, имени и отчестве, их целесообразно вывести в один столбец ФИО. Должность или роль в системе тоже можно присоединить к ФИО.
3. Бесконечная прокрутка и кнопка «Показать ещё» не подходят для отображения строк таблицы. Делайте постраничную навигацию. Это удобно и для коллективной работы с таблицей.
4. Показывайте по умолчанию больше строк на одной странице: 50, 100, 500.
5. Используйте цветовые индикаторы. Красить строку целиком стоит только при отклонении от нормы.
6. При наличии цветовых индикаторов полезно отображать легенду цветов.
7. Храните пользовательские настройки вида, не сбрасывайте их после окончания сеанса.
8. Связанные сущности (название организации может быть связано с карточкой организации) полезно делать ссылками на соответствующие карточки. Но если таких сущностей в строке много, выделите только полезные в работе.
9. Строка должна подсвечиваться при наведении курсора. Должна быть возможность выделить строку кликом на неё.
10. Нет ничего страшного при появлении горизонтальной прокрутки.
11. В некоторых случаях полезно маркировать просмотренные записи.
12. Должна быть настройка отображения столбцов с системными свойствами (ID, дата создания, автор, дата изменения).
13. Переход к просмотру записи удобно сделать по двойному клику.
14. Иногда удобен режим предпросмотра, когда по клику открывается не вся запись, а сводка по ней, как в Google Drive.
«Строка в таблице часто является прелюдией к просмотру полной информации по записи. На моей практике в 99% рабочих таблиц модальный режим просмотра уступал просмотру записи на отдельной странице».
https://designpub.ru/5ea60df37f12
В первой статье разбирается просмотр данных.
1. Рабочая таблица должна занимать максимум места на экране. Как вариант — опция «на весь экран».
2. Объединяйте данные. Если есть данные о фамилии, имени и отчестве, их целесообразно вывести в один столбец ФИО. Должность или роль в системе тоже можно присоединить к ФИО.
3. Бесконечная прокрутка и кнопка «Показать ещё» не подходят для отображения строк таблицы. Делайте постраничную навигацию. Это удобно и для коллективной работы с таблицей.
4. Показывайте по умолчанию больше строк на одной странице: 50, 100, 500.
5. Используйте цветовые индикаторы. Красить строку целиком стоит только при отклонении от нормы.
6. При наличии цветовых индикаторов полезно отображать легенду цветов.
7. Храните пользовательские настройки вида, не сбрасывайте их после окончания сеанса.
8. Связанные сущности (название организации может быть связано с карточкой организации) полезно делать ссылками на соответствующие карточки. Но если таких сущностей в строке много, выделите только полезные в работе.
9. Строка должна подсвечиваться при наведении курсора. Должна быть возможность выделить строку кликом на неё.
10. Нет ничего страшного при появлении горизонтальной прокрутки.
11. В некоторых случаях полезно маркировать просмотренные записи.
12. Должна быть настройка отображения столбцов с системными свойствами (ID, дата создания, автор, дата изменения).
13. Переход к просмотру записи удобно сделать по двойному клику.
14. Иногда удобен режим предпросмотра, когда по клику открывается не вся запись, а сводка по ней, как в Google Drive.
«Строка в таблице часто является прелюдией к просмотру полной информации по записи. На моей практике в 99% рабочих таблиц модальный режим просмотра уступал просмотру записи на отдельной странице».
https://designpub.ru/5ea60df37f12
Medium
#1. UX таблиц, с которыми работают. ч1 — Просмотр данных
Описал кейсы, накопленные за 12 лет работы с реальными пользователями.
Павел Голюдов написал о композиции в дизайне интерфейсов.
Композиция интерфейса — это взаимодействие его элементов, которое подсказывает пользователю, как с помощью интерфейса удовлетворить его потребность.
В статической композиции есть одно ключевое действие, на которое мы хотим обратить внимание, вся композиция строится вокруг него. В динамической композиции иерархия элементов сложнее, мы выделяем самые важные элементы, затем второстепенные и так далее.
Задачи композиции:
1. Управление вниманием. Мы выстраиваем порядок, в котором пользователь будет изучать интерфейс;
2. Cохранение внимания. Пользователю проще воспринимать структурированную информацию. Чем меньше усилий он тратит, тем дольше может сохранять внимание.
Выделить информацию, добавить ей визуального веса можно размером, цветом, формой и негативным пространством. Сложная форма выделяет объект среди объектов с простой формой. Также пустое место вокруг объекта выделяет его.
Создать гармоничную композицию помогает:
— Расположение якорных объектов (самых заметных объектов) в одном из углов, в центре прямоугольника или у одной из его сторон;
— Соблюдение ритма, когда одинаковые объекты обладают одинаковым размером, отступом и так далее;
— Близкое расположение связанных объектов. Создание таких групп облегчает восприятие информации.
https://vc.ru/design/108307
Композиция интерфейса — это взаимодействие его элементов, которое подсказывает пользователю, как с помощью интерфейса удовлетворить его потребность.
В статической композиции есть одно ключевое действие, на которое мы хотим обратить внимание, вся композиция строится вокруг него. В динамической композиции иерархия элементов сложнее, мы выделяем самые важные элементы, затем второстепенные и так далее.
Задачи композиции:
1. Управление вниманием. Мы выстраиваем порядок, в котором пользователь будет изучать интерфейс;
2. Cохранение внимания. Пользователю проще воспринимать структурированную информацию. Чем меньше усилий он тратит, тем дольше может сохранять внимание.
Выделить информацию, добавить ей визуального веса можно размером, цветом, формой и негативным пространством. Сложная форма выделяет объект среди объектов с простой формой. Также пустое место вокруг объекта выделяет его.
Создать гармоничную композицию помогает:
— Расположение якорных объектов (самых заметных объектов) в одном из углов, в центре прямоугольника или у одной из его сторон;
— Соблюдение ритма, когда одинаковые объекты обладают одинаковым размером, отступом и так далее;
— Близкое расположение связанных объектов. Создание таких групп облегчает восприятие информации.
https://vc.ru/design/108307
vc.ru
Композиция и её законы в дизайне интерфейсов — Дизайн на vc.ru
Законы композиции используется людьми во многих сферах деятельности, основные — живопись, музыка, литература, архитектура. Но, как вы уже догадались из названия темы, речь пойдет о композиции и её законах для дизайна интерфейсов.
👍1
Майтрик Катария собрал примеры дизайна мобильных приложений, удобных для использования одной рукой.
Получилось 6 категорий UX-шаблонов:
1. Навигация: строки меню, вкладки и жесты для лёгкого перемещения между наиболее важными разделами приложения;
2. Действия: создание, редактирование, размещение, добавление, удаление и другие действия, использующие основные функциональные возможности приложения;
3. Шоппинг, транзакции и расчёт в магазине;
4. Поиск, сортировка и фильтрация, когда пользователи хотят быстро найти или просмотреть контент;
5. Ввод и взаимодействие: слайдеры, пикеры, селекторы, раскрывающиеся списки, формы, масштабирование, прокрутка;
6. Прочее: воспроизведение мультимедиа, фотосъёмка, редактирование фотографий, навигация по картам.
Решения для навигации:
1. Использовать вылетающее снизу меню (Flyout Menu), а не полноэкранное;
2. При нажатии на пункт «Ещё» на нижней панели навигации показывать расширенную версию этой панели;
3. Дать пользователям возможность настроить меню;
4. Использовать жесты для доступа к основным возможностям приложения;
5. Использовать жесты для перемещения между экранами. Например, закрывать открытые на весь экран карточки свайпом вниз;
6. Дать возможность перейти к определённой секции страницы с помощью специального закреплённого меню (Floating Tab Bars) и жестов (смотрите примеры в статье).
https://habr.com/ru/post/490018/
Получилось 6 категорий UX-шаблонов:
1. Навигация: строки меню, вкладки и жесты для лёгкого перемещения между наиболее важными разделами приложения;
2. Действия: создание, редактирование, размещение, добавление, удаление и другие действия, использующие основные функциональные возможности приложения;
3. Шоппинг, транзакции и расчёт в магазине;
4. Поиск, сортировка и фильтрация, когда пользователи хотят быстро найти или просмотреть контент;
5. Ввод и взаимодействие: слайдеры, пикеры, селекторы, раскрывающиеся списки, формы, масштабирование, прокрутка;
6. Прочее: воспроизведение мультимедиа, фотосъёмка, редактирование фотографий, навигация по картам.
Решения для навигации:
1. Использовать вылетающее снизу меню (Flyout Menu), а не полноэкранное;
2. При нажатии на пункт «Ещё» на нижней панели навигации показывать расширенную версию этой панели;
3. Дать пользователям возможность настроить меню;
4. Использовать жесты для доступа к основным возможностям приложения;
5. Использовать жесты для перемещения между экранами. Например, закрывать открытые на весь экран карточки свайпом вниз;
6. Дать возможность перейти к определённой секции страницы с помощью специального закреплённого меню (Floating Tab Bars) и жестов (смотрите примеры в статье).
https://habr.com/ru/post/490018/
Хабр
Как проектировать мобильные приложения для одной руки
tl;dr У 90% современных смартфонов диагональ экрана превышает пять дюймов. Появление таких дисплеев представило принципиально новые проблемы для разработчиков приложений и дизайнеров. Давайте...
👍1
Опубликованы видео с митапа «Кто такой гибридный дизайнер, или нужен ли веб-дизайнеру фронтенд?».
1. Арт-директор «Газпром нефти» Вадик Матвеев рассказал, кто такой гибридный дизайнер, какие у него преимущества и как им стать
youtube.com/watch?v=vZUM8z4sR8Q
2. UX/UI-дизайнер JetBrains Егор Алексеев рассказал, почему дизайнерам стоит научиться верстать, и показал примеры разработки дизайна через код
youtube.com/watch?v=osT3p3HlLSc
1. Арт-директор «Газпром нефти» Вадик Матвеев рассказал, кто такой гибридный дизайнер, какие у него преимущества и как им стать
youtube.com/watch?v=vZUM8z4sR8Q
2. UX/UI-дизайнер JetBrains Егор Алексеев рассказал, почему дизайнерам стоит научиться верстать, и показал примеры разработки дизайна через код
youtube.com/watch?v=osT3p3HlLSc
YouTube
Гибридный дизайнер
Арт-директор «Газпром нефти» Вадик Матвеев рассказал, кто такой гибридный дизайнер, какие у него преимущества и как им стать.
В том числе:
— Как грамотно оценить свои дизайн-решения;
— Налаженная коммуникация между дизайнером и фронтендером: миф или реальность;…
В том числе:
— Как грамотно оценить свои дизайн-решения;
— Налаженная коммуникация между дизайнером и фронтендером: миф или реальность;…
Ирина Бушуева написала о трёх типах пользовательских целей.
1. Цели опыта взаимодействия — что пользователь хочет ощущать при взаимодействии с продуктом, например:
— Сознавать собственную компетенцию и способность контролировать происходящее;
— Получать удовольствие;
— Чувствовать себя и свои данные в безопасности;
— Ощущать себя современным.
Если продукт систематически нарушает цели опыта использования, он обречён на провал, как бы не стремился к достижению других целей.
2. Конечные цели — что мотивирует пользователя справиться с задачей, например:
— Купить билет;
— Развлечься;
— Оставаться на связи с близкими и друзьями.
Если продукт не удовлетворяет конечные цели, пользователь не будет тратить на него время и деньги.
3. Жизненные цели — глубинные движущие силы и мотивы пользователя, которые помогают объяснить, почему он пытается достигнуть своих конечных целей. Например:
— Выглядеть хорошим в своих глазах и в глазах окружающих;
— Добиться успеха в чём-либо;
— Хорошо разбираться в чем-либо;
— Быть привлекательным и популярным, пользоваться уважением.
Если продукт приближает пользователя к достижению жизненных целей, это привлечет его гораздо эффективнее любой маркетинговой компании.
https://designpub.ru/d874e7089fc1
1. Цели опыта взаимодействия — что пользователь хочет ощущать при взаимодействии с продуктом, например:
— Сознавать собственную компетенцию и способность контролировать происходящее;
— Получать удовольствие;
— Чувствовать себя и свои данные в безопасности;
— Ощущать себя современным.
Если продукт систематически нарушает цели опыта использования, он обречён на провал, как бы не стремился к достижению других целей.
2. Конечные цели — что мотивирует пользователя справиться с задачей, например:
— Купить билет;
— Развлечься;
— Оставаться на связи с близкими и друзьями.
Если продукт не удовлетворяет конечные цели, пользователь не будет тратить на него время и деньги.
3. Жизненные цели — глубинные движущие силы и мотивы пользователя, которые помогают объяснить, почему он пытается достигнуть своих конечных целей. Например:
— Выглядеть хорошим в своих глазах и в глазах окружающих;
— Добиться успеха в чём-либо;
— Хорошо разбираться в чем-либо;
— Быть привлекательным и популярным, пользоваться уважением.
Если продукт приближает пользователя к достижению жизненных целей, это привлечет его гораздо эффективнее любой маркетинговой компании.
https://designpub.ru/d874e7089fc1
Medium
Теория когнитивной обработки Дона Нормана
И ее влияние на проектирование интерфейсов
Настя Красноперова написала об опыте парного проектирования в агентстве.
Преимущества:
— Работа идёт быстрее. Проектировщики могут поделить продукт и отдельно прорабатывать его части;
— В споре рождается истина. В диалоге часто получается придумать более оптимальное решение;
— Качество выше. Исполнители находят ошибки друг друга и предлагают способы улучшения;
— Обмен опытом происходит сам собой в ходе работы. Это полезно для развития исполнителей;
— Экспертиза не замыкается на одном участнике команды. Один из проектировщиков может уехать в отпуск со спокойной душой и уверенностью, что второй закроет все оставшиеся по проекту вопросы.
(Почти всех этих преимуществ можно достичь при помощи ревью прототипов.)
https://medium.com/notamediapr/dcb2f979343b
Преимущества:
— Работа идёт быстрее. Проектировщики могут поделить продукт и отдельно прорабатывать его части;
— В споре рождается истина. В диалоге часто получается придумать более оптимальное решение;
— Качество выше. Исполнители находят ошибки друг друга и предлагают способы улучшения;
— Обмен опытом происходит сам собой в ходе работы. Это полезно для развития исполнителей;
— Экспертиза не замыкается на одном участнике команды. Один из проектировщиков может уехать в отпуск со спокойной душой и уверенностью, что второй закроет все оставшиеся по проекту вопросы.
(Почти всех этих преимуществ можно достичь при помощи ревью прототипов.)
https://medium.com/notamediapr/dcb2f979343b
Medium
Парное проектирование интерфейсов
Привет! Меня зовут Настя Красноперова, я специалист по продукту в digital-агентстве Notamedia. Наш отдел проектирует сайты и мобильные…
Вадим Шлячков написал, сколько респондентов надо для выявления большинства ошибок юзабилити.
Якоб Нильсен на основе своих экспериментов вывел правило: 5 пользователей достаточно для выявления 85% ошибок (при условии, что вероятность обнаружения ошибки в рамках одного тестирования — 31%).
— Он был не первым и не единственным исследователем этого вопроса;
— Есть 2 похожие формулы: 1) В основе формулы Lewis и Virzi биномиальное распределение; 2) У Нильсена — распределение Пуассона;
— Под исследованием авторы понимали именно поиск ошибок интерфейса. Они не рассматривали возможность применения формулы в других исследованиях. Формат тестирования юзабилити соответствует условиям применения биномиального распределения.
Формулы Lewis&Virzi и Нильсена связаны и позволяют вычислить вероятность обнаружить ошибку хотя бы 1 раз с заданного количества попыток (5 попыток, то есть 5 респондентов) и с определённой минимальной вероятностью обнаружения ошибки (31% в правиле Нильсена).
Если мы вычисляем вероятность обнаружения одной ошибки, почему в правиле говорится про обнаружение 85% всех ошибок? Это следует из формулы и классического определения вероятности.
Для поиска оптимального количества респондентов по формуле Нильсена надо знать общее количество ошибок. Но если мы его знаем, пропадает смысл в тестировании. В формуле Lewis&Virzi такого нет.
В статье есть таблица с количеством респондентов, вероятностью обнаружения отдельной ошибки и общим процентом обнаруженных ошибок. (Например, чтобы при прочих равных найти 95% ошибок, зовите 9 респондентов.)
Таким образом, более точная формулировка правила Нильсена будет такой: «Если во время тестирования эксперименты будут независимыми, а выборка по крайней мере квазислучайной, то мы можем предположить, что при тестировании 5 пользователей мы обнаружим 85% ошибок, с которыми сталкиваются не менее 31% пользователей».
https://medium.com/v.shliachkov/6d7ab67596da
Якоб Нильсен на основе своих экспериментов вывел правило: 5 пользователей достаточно для выявления 85% ошибок (при условии, что вероятность обнаружения ошибки в рамках одного тестирования — 31%).
— Он был не первым и не единственным исследователем этого вопроса;
— Есть 2 похожие формулы: 1) В основе формулы Lewis и Virzi биномиальное распределение; 2) У Нильсена — распределение Пуассона;
— Под исследованием авторы понимали именно поиск ошибок интерфейса. Они не рассматривали возможность применения формулы в других исследованиях. Формат тестирования юзабилити соответствует условиям применения биномиального распределения.
Формулы Lewis&Virzi и Нильсена связаны и позволяют вычислить вероятность обнаружить ошибку хотя бы 1 раз с заданного количества попыток (5 попыток, то есть 5 респондентов) и с определённой минимальной вероятностью обнаружения ошибки (31% в правиле Нильсена).
Если мы вычисляем вероятность обнаружения одной ошибки, почему в правиле говорится про обнаружение 85% всех ошибок? Это следует из формулы и классического определения вероятности.
Для поиска оптимального количества респондентов по формуле Нильсена надо знать общее количество ошибок. Но если мы его знаем, пропадает смысл в тестировании. В формуле Lewis&Virzi такого нет.
В статье есть таблица с количеством респондентов, вероятностью обнаружения отдельной ошибки и общим процентом обнаруженных ошибок. (Например, чтобы при прочих равных найти 95% ошибок, зовите 9 респондентов.)
Таким образом, более точная формулировка правила Нильсена будет такой: «Если во время тестирования эксперименты будут независимыми, а выборка по крайней мере квазислучайной, то мы можем предположить, что при тестировании 5 пользователей мы обнаружим 85% ошибок, с которыми сталкиваются не менее 31% пользователей».
https://medium.com/v.shliachkov/6d7ab67596da
Medium
Сколько надо пользователей, чтобы… Часть 1. О формуле Нильсена и вероятности.
В индустрии стандартом необходимого количества пользователей для юзабилити исследований давно стало число 5.
Олег Якубенков написал о повышении полезности дашборда с помощью отображения пичков.
Обычно дашборд отвечает на вопрос «Всё ли хорошо?». Если всё нормально, то на этом потребность в дашборде отпадает. Если какая-то важная метрика сильно просела, то идут разбираться с причинами.
Каждый день для вашего продукта что-то меняется. Сегодня про вас написали в прессе, вчера вы заменили ключевые слова в сторе, позавчера был сильный дождь, до этого вы выкатили апдейт. Каждая точка на графике вашего дашборда — это результат эксперимента над вашим продуктом.
Ищите «пичок» (пик на графике) и докапывайтесь до его причин. В большинстве случаев найти причины не получится, потому что многие пички будут объясняться случайностью. Но некоторые будут вызваны факторами, о которых вы раньше не задумывались. А это именно то, что вы ищете, — рычаги влияния, которые позволят двинуть ваш продукт вперед.
Во время ежемесячных распродаж мы рассылаем пуши на десяти языках. Обычно конверсии в открытие пуша для всех языков почти не отличаются, но тут конверсия в русском языке была заметно выше.
Оказалось, в русском пуше была лишь первая часть сообщения: «У меня для тебя есть сюрприз!». Вместо «У меня для тебя есть сюрприз! Скидка 50%!».
У пуша без текста о скидке конверсия должна была быть ниже. Мы решили проверить идею и в следующий раз убрали упоминание скидки из всех языков. В итоге распродажа принесла в 2 раза больше денег, чем обычно.
https://gopractice.ru/pichok-dashboard/
Обычно дашборд отвечает на вопрос «Всё ли хорошо?». Если всё нормально, то на этом потребность в дашборде отпадает. Если какая-то важная метрика сильно просела, то идут разбираться с причинами.
Каждый день для вашего продукта что-то меняется. Сегодня про вас написали в прессе, вчера вы заменили ключевые слова в сторе, позавчера был сильный дождь, до этого вы выкатили апдейт. Каждая точка на графике вашего дашборда — это результат эксперимента над вашим продуктом.
Ищите «пичок» (пик на графике) и докапывайтесь до его причин. В большинстве случаев найти причины не получится, потому что многие пички будут объясняться случайностью. Но некоторые будут вызваны факторами, о которых вы раньше не задумывались. А это именно то, что вы ищете, — рычаги влияния, которые позволят двинуть ваш продукт вперед.
Во время ежемесячных распродаж мы рассылаем пуши на десяти языках. Обычно конверсии в открытие пуша для всех языков почти не отличаются, но тут конверсия в русском языке была заметно выше.
Оказалось, в русском пуше была лишь первая часть сообщения: «У меня для тебя есть сюрприз!». Вместо «У меня для тебя есть сюрприз! Скидка 50%!».
У пуша без текста о скидке конверсия должна была быть ниже. Мы решили проверить идею и в следующий раз убрали упоминание скидки из всех языков. В итоге распродажа принесла в 2 раза больше денег, чем обычно.
https://gopractice.ru/pichok-dashboard/
GoPractice
ᐈ В поисках пичков. Повышаем эффективность дашбордов
Как повысить эффективность работы с дашбордами? Почему важно отслеживать «пички» — внезапные колебания на графике?
Сергей Сурганов рассказал о своём профессиональном пути.
— О собственном проекте (сайт с переводом книг Тафти), который помог найти первую работу (СКБ Контур);
— Как много его увольняли (с первой работы — за твит) и почему это оказывалось в результате хорошо;
— Как много книг по дизайну он почитал, чтобы так и не найти ответа на вопрос «Что делать?»;
— Как он учился программированию и вообще делать вещи (например, через копирование);
— Почему вернулся в Москву из Сан-Франциско;
— Чем вдохновляется сейчас (всё, что не веб);
— Почему пишет в канале то, что пишет;
— И многое другое про свой путь.
(С этим докладом Сергей выступал на последнем Дизайн-просмотре в СПб.)
https://www.youtube.com/watch?v=Qje03vysJSw
— О собственном проекте (сайт с переводом книг Тафти), который помог найти первую работу (СКБ Контур);
— Как много его увольняли (с первой работы — за твит) и почему это оказывалось в результате хорошо;
— Как много книг по дизайну он почитал, чтобы так и не найти ответа на вопрос «Что делать?»;
— Как он учился программированию и вообще делать вещи (например, через копирование);
— Почему вернулся в Москву из Сан-Франциско;
— Чем вдохновляется сейчас (всё, что не веб);
— Почему пишет в канале то, что пишет;
— И многое другое про свой путь.
(С этим докладом Сергей выступал на последнем Дизайн-просмотре в СПб.)
https://www.youtube.com/watch?v=Qje03vysJSw
YouTube
Сергей Сурганов - «честность, радость, любопытство»
Лекция Сергея Сурганова
В «Студии Евгения Ярового» сделали 6-й выпуск «ДжонФёдора», где обсудили:
— Рейтинг Tagline и новых лиц в топе дизайна;
— Продуктовый дизайн и влияние дизайнера на показатели;
— Хамит ли Раменский людям, если да, то зачем;
— Как кидают дизайн-студии сотрудников, почему это общая проблема и кто в неё втянут;
— Бюджет за проект или в часах.
https://www.youtube.com/watch?v=VJYZaaXMBj4
А я опубликовал интервью с Евгением Яровым:
— Как основал студию, а до этого стал дизайнером. Чем интересен дизайн как вид деятельности (совмещение бизнеса и креатива);
— Как работает студия. Почему редко сотрудничают с фрилансерами. Преимущества работы в офисе. Формат работы с клиентами. База знаний и обучение сотрудников. Зарплата среднего дизайнера;
— Текучка кадров в регионах и мотивация сотрудников;
— Способы привлечения клиентов: «грязные лиды» с контекстной рекламы, точечная реклама, видео («ДжонФёдор» и «Референт»), «когда тебя советуют другие дизайнеры»;
— Как пришла идея снимать видео;
— Почему так много политики в предпоследнем выпуске «ДжонаФёдора» (высказывания Олега Чулакова, пропаганда Артемия Лебедева). Оружие второго удара. Мир постправды;
— Зачем хейтить другие студии (на примере Pinkman). Дизайнер должен быть критичным;
— Будущее студии;
— Русский дизайн;
— Скетч или Фигма;
— Рекомендации начинающим дизайнерам, предпринимателям в сфере дизайна, командам. Две книги и один блог.
https://www.youtube.com/watch?v=qB23jtCM_Kg
— Рейтинг Tagline и новых лиц в топе дизайна;
— Продуктовый дизайн и влияние дизайнера на показатели;
— Хамит ли Раменский людям, если да, то зачем;
— Как кидают дизайн-студии сотрудников, почему это общая проблема и кто в неё втянут;
— Бюджет за проект или в часах.
https://www.youtube.com/watch?v=VJYZaaXMBj4
А я опубликовал интервью с Евгением Яровым:
— Как основал студию, а до этого стал дизайнером. Чем интересен дизайн как вид деятельности (совмещение бизнеса и креатива);
— Как работает студия. Почему редко сотрудничают с фрилансерами. Преимущества работы в офисе. Формат работы с клиентами. База знаний и обучение сотрудников. Зарплата среднего дизайнера;
— Текучка кадров в регионах и мотивация сотрудников;
— Способы привлечения клиентов: «грязные лиды» с контекстной рекламы, точечная реклама, видео («ДжонФёдор» и «Референт»), «когда тебя советуют другие дизайнеры»;
— Как пришла идея снимать видео;
— Почему так много политики в предпоследнем выпуске «ДжонаФёдора» (высказывания Олега Чулакова, пропаганда Артемия Лебедева). Оружие второго удара. Мир постправды;
— Зачем хейтить другие студии (на примере Pinkman). Дизайнер должен быть критичным;
— Будущее студии;
— Русский дизайн;
— Скетч или Фигма;
— Рекомендации начинающим дизайнерам, предпринимателям в сфере дизайна, командам. Две книги и один блог.
https://www.youtube.com/watch?v=qB23jtCM_Kg
YouTube
Tagline и Раменский, кидалы студии, неоморфизм, репутация, продуктовый дизайн | ДжонФедор #6
«ДжонФёдор» – это рубрика, в которой наша команда делится
мнением о людях, явлениях и событиях в веб-среде. Если у вас были проблемы с работодателями (дизайн, разработка), сообщайте нам в Telegram: @yarovoyevgeniy
Проект «Ищу дизайнера» – designer.ru
Группа…
мнением о людях, явлениях и событиях в веб-среде. Если у вас были проблемы с работодателями (дизайн, разработка), сообщайте нам в Telegram: @yarovoyevgeniy
Проект «Ищу дизайнера» – designer.ru
Группа…
В студии «Сибирикс» написали, как сделать хороший фильтр в интернет-магазине.
— Предложите пользователю сначала выбрать из нескольких категорий и только затем — фильтровать;
— Горизонтальная панель фильтров удобнее и эффективнее боковой, но подходит не для всех типов товаров;
— Если для какого-то параметра фильтрации вы скрываете часть значений, проверьте, что а) не скрыты популярные значения, б) ссылка для раскрытия полного списка значений хорошо видна и понятна;
— Мгновенное обновление списка товаров после изменения любого из параметров фильтрации полезно пользователям, которые не знают точно, чего хотят;
— Обновление списка товаров только после нажатия на «Фильтровать» хорошо экономит время при медленном интернете или огромной базе товаров;
— Не обновляя список товаров после изменения параметра фильтрации, можно показывать количество найденных товаров;
— Деактивируйте те значения параметров, выбор которых приведёт к нулевым результатам фильтрации;
— Над списком товаров повторите выбранные пользователем параметры фильтрации и дайте удалить ненужный;
— Названия параметров должны быть предсказуемыми, без жаргона и сленга, простыми и понятными.
#filter
— Предложите пользователю сначала выбрать из нескольких категорий и только затем — фильтровать;
— Горизонтальная панель фильтров удобнее и эффективнее боковой, но подходит не для всех типов товаров;
— Если для какого-то параметра фильтрации вы скрываете часть значений, проверьте, что а) не скрыты популярные значения, б) ссылка для раскрытия полного списка значений хорошо видна и понятна;
— Мгновенное обновление списка товаров после изменения любого из параметров фильтрации полезно пользователям, которые не знают точно, чего хотят;
— Обновление списка товаров только после нажатия на «Фильтровать» хорошо экономит время при медленном интернете или огромной базе товаров;
— Не обновляя список товаров после изменения параметра фильтрации, можно показывать количество найденных товаров;
— Деактивируйте те значения параметров, выбор которых приведёт к нулевым результатам фильтрации;
— Над списком товаров повторите выбранные пользователем параметры фильтрации и дайте удалить ненужный;
— Названия параметров должны быть предсказуемыми, без жаргона и сленга, простыми и понятными.
#filter
Журнал
UX-фильтры для интернет-магазина
Фильтр позволяет пользователю сориентироваться в огромном каталоге сайта. Но сложный, непонятный и недружелюбный фильтр может просто напугать покупателя, что затруднит конверсию. Как настроить фильтры так, чтобы не терять клиентов: основные правила по расположению…
❤1
В Autooptimize собрали 43 способа увеличить конверсию сайта. Вот некоторые из них:
1. В заголовке примерное количество замените на конкретное. «Узнайте, как этот блог вырос до 10471 подписчиков всего за 12 месяцев». Конкретное количество звучит правдоподобнее и не выглядит искусственным.
2. Призыв к действию («Добавить в корзину», «Зарегистрироваться») разместите над видео, а не под ним. Кому не нужны доводы в пользу вашего продукта, тому будет проще сделать следующий шаг (зарегистрироваться).
3. Не показывайте форму заказа, пока пользователь добавляет товары в корзину. Так каталог будет выглядеть менее шумно. Показывайте её после нажатия на «Перейти в корзину». Так пользователь выполняет небольшое действие на начальном этапе покупки — это увеличивает вероятность последующего действия.
4. Разместите отзывы под рекламным видео. Отзывы уменьшат сомнения, которые останутся после его просмотра.
5. Добавьте надписи «Бесплатная доставка», «100% безопасность», «Гарантия возврата денег», печать доверия Verisign и другие элементы, которые успокаивают пользователя во время покупки.
6. Измените цвет и форму кнопки с призывом к действию. Протестируйте различные варанты.
7. Если есть бесплатная пробная версия продукта, разместите большую заметную кнопку «FREE TRIAL». Часть пользователей просто хочет двигаться вперёд, чем проще это сделать, тем лучше.
8. Попробуйте поменять цвет заголовка на красный, даже если он не будет соответствовать вашему дизайну.
9. Если предложение ограничено по времени, добавьте таймер обратного отсчёта.
https://vc.ru/growth/113356
1. В заголовке примерное количество замените на конкретное. «Узнайте, как этот блог вырос до 10471 подписчиков всего за 12 месяцев». Конкретное количество звучит правдоподобнее и не выглядит искусственным.
2. Призыв к действию («Добавить в корзину», «Зарегистрироваться») разместите над видео, а не под ним. Кому не нужны доводы в пользу вашего продукта, тому будет проще сделать следующий шаг (зарегистрироваться).
3. Не показывайте форму заказа, пока пользователь добавляет товары в корзину. Так каталог будет выглядеть менее шумно. Показывайте её после нажатия на «Перейти в корзину». Так пользователь выполняет небольшое действие на начальном этапе покупки — это увеличивает вероятность последующего действия.
4. Разместите отзывы под рекламным видео. Отзывы уменьшат сомнения, которые останутся после его просмотра.
5. Добавьте надписи «Бесплатная доставка», «100% безопасность», «Гарантия возврата денег», печать доверия Verisign и другие элементы, которые успокаивают пользователя во время покупки.
6. Измените цвет и форму кнопки с призывом к действию. Протестируйте различные варанты.
7. Если есть бесплатная пробная версия продукта, разместите большую заметную кнопку «FREE TRIAL». Часть пользователей просто хочет двигаться вперёд, чем проще это сделать, тем лучше.
8. Попробуйте поменять цвет заголовка на красный, даже если он не будет соответствовать вашему дизайну.
9. Если предложение ограничено по времени, добавьте таймер обратного отсчёта.
https://vc.ru/growth/113356
vc.ru
10 идей по оптимизации сайта и увеличению продаж
Ребята из Autooptimize создали электронную книгу «43 проверенных способа, как увеличить конверсию сайта». Команда Telegram-канала Epic Growth отобрала самые интересные идеи.
Евгений Честнов написал об интерфейсах SCADA-систем.
Это комплексные системы диспетчеризации инженерных и технических коммуникаций (свет, вентиляция, кондиционирование, теплоснабжение, водоотведение и многое другое). Проще говоря, это системы умного дома в масштабах огромного склада или торгового центра.
При разработке таких систем подрядчики редко когда тратят время и силы на интерфейсы, выходящие за рамки стандартных библиотек. За большим исключением они выглядят застрявшими где-то в начале нулевых.
1. На объекте всегда горят сроки. Создание системы диспетчеризации — последняя стадия, которая начинается, когда все инженерные системы прошли пусконаладочные работы.
2. Зачастую этим занимается программист. Система диспетчеризации — 12 тысяч переменных и 10 рабочих дней только на то, чтобы привязать их к элементам интерфейса.
3. Среди заказчиков распространено мнение, что пользователям таких систем красивые картинки не нужны, и нет понимания, что суть такого интерфейса не в картинках.
Евгений показал примеры интерфейсов и рассказал, как развивает их с учётом всех ограничений.
https://vc.ru/design/116964
Это комплексные системы диспетчеризации инженерных и технических коммуникаций (свет, вентиляция, кондиционирование, теплоснабжение, водоотведение и многое другое). Проще говоря, это системы умного дома в масштабах огромного склада или торгового центра.
При разработке таких систем подрядчики редко когда тратят время и силы на интерфейсы, выходящие за рамки стандартных библиотек. За большим исключением они выглядят застрявшими где-то в начале нулевых.
1. На объекте всегда горят сроки. Создание системы диспетчеризации — последняя стадия, которая начинается, когда все инженерные системы прошли пусконаладочные работы.
2. Зачастую этим занимается программист. Система диспетчеризации — 12 тысяч переменных и 10 рабочих дней только на то, чтобы привязать их к элементам интерфейса.
3. Среди заказчиков распространено мнение, что пользователям таких систем красивые картинки не нужны, и нет понимания, что суть такого интерфейса не в картинках.
Евгений показал примеры интерфейсов и рассказал, как развивает их с учётом всех ограничений.
https://vc.ru/design/116964
vc.ru
Что не так с интерфейсами SCADA-систем
Ссылка на проект логистического центра: Ссылка на проект торгового центра: На сайте можете посмотреть другие наши работы. Наша группа специалистов по автоматизации и электрике в Telegram.
👍1
Сати Тащиба написала, как дизайнеру выжить в первый месяц работы в зарубежной компании.
1. Задавайте много вопросов, уточняйте значения терминов и аббревиатур. Не бойтесь показаться неопытным специалистом. Записывайте ответы. Узнайте, где искать ответы на вопросы, чтобы потом спокойно изучить детали.
2. Не стесняйтесь своего английского. Если есть барьер на личном уровне, договоритесь с кем-нибудь из коллег вместе сходить на обед и обсудить нерабочие темы.
3. Просите обратную связь как можно раньше. Возможно, вы не знаете чего-то важного и взялись за решение проблемы не с той стороны. Спрашивайте совета у коллег, учитесь у них.
4. Составляйте список дел на день и неделю, отслеживайте время, которое тратите на выполнение той или иной задачи.
5. Выполняйте обещания. Пообещали что-то сделать к определённому дню, сделайте это в срок (а лучше раньше).
6. Готовьтесь к встречам. Заранее отправляйте участникам встречи повестку, чтобы они могли подготовиться. Знайте, что вы хотите решить или согласовать на встрече. Фиксируйте, что обсудили и решили и какие шаги предстоят.
7. Проводите воркшопы, чтобы вовлечь команду в сбор знаний о продукте и генерирование идей.
https://designpub.ru/8a1fbcd474e2
1. Задавайте много вопросов, уточняйте значения терминов и аббревиатур. Не бойтесь показаться неопытным специалистом. Записывайте ответы. Узнайте, где искать ответы на вопросы, чтобы потом спокойно изучить детали.
2. Не стесняйтесь своего английского. Если есть барьер на личном уровне, договоритесь с кем-нибудь из коллег вместе сходить на обед и обсудить нерабочие темы.
3. Просите обратную связь как можно раньше. Возможно, вы не знаете чего-то важного и взялись за решение проблемы не с той стороны. Спрашивайте совета у коллег, учитесь у них.
4. Составляйте список дел на день и неделю, отслеживайте время, которое тратите на выполнение той или иной задачи.
5. Выполняйте обещания. Пообещали что-то сделать к определённому дню, сделайте это в срок (а лучше раньше).
6. Готовьтесь к встречам. Заранее отправляйте участникам встречи повестку, чтобы они могли подготовиться. Знайте, что вы хотите решить или согласовать на встрече. Фиксируйте, что обсудили и решили и какие шаги предстоят.
7. Проводите воркшопы, чтобы вовлечь команду в сбор знаний о продукте и генерирование идей.
https://designpub.ru/8a1fbcd474e2
Medium
Ошибки дизайнера в первый месяц работы за рубежом.
Наверняка каждому новичку знакомы стресс и легкая неуверенность в себе на новом месте. В первые месяцы работы не избежать огромного потока…
Эмилия Городовых написала, что важно обсудить с заказчиком перед началом исследования.
Обсуждать надо с тем, кто принёс задачу, кому важен результат и кто планирует с ним дальше работать. Договорённости лучше зафиксировать. На некоторые вопросы у заказчика может не быть ответов — обсуждайте и решайте вместе.
1. Цель исследования: какой результат заказчик хочет получить и как им воспользоваться, с какими вопросами пришёл, как поймёт, что результат получен.
2. Сроки: сколько исследование может занять, когда начнётся, есть ли у заказчика дедлайн.
3. Что уже известно: результаты других исследований, знания бизнес-процесса и его участников, описанная аналитика и статистика.
4. Что известно о пользователях и сценариях, чтобы точнее сформировать выборку для исследования.
5. Гипотезы для проверки. Что будет, если гипотеза не подтвердится?
6. Взаимодействие с заказчиком: насколько глубоко он хочет погрузиться в процесс, в какие моменты будет синхронизация (например, ревью скрипта, работа с выборкой), в каком виде удобно воспринимать результат исследования.
https://medium.com/designkontur/c86115454448
Обсуждать надо с тем, кто принёс задачу, кому важен результат и кто планирует с ним дальше работать. Договорённости лучше зафиксировать. На некоторые вопросы у заказчика может не быть ответов — обсуждайте и решайте вместе.
1. Цель исследования: какой результат заказчик хочет получить и как им воспользоваться, с какими вопросами пришёл, как поймёт, что результат получен.
2. Сроки: сколько исследование может занять, когда начнётся, есть ли у заказчика дедлайн.
3. Что уже известно: результаты других исследований, знания бизнес-процесса и его участников, описанная аналитика и статистика.
4. Что известно о пользователях и сценариях, чтобы точнее сформировать выборку для исследования.
5. Гипотезы для проверки. Что будет, если гипотеза не подтвердится?
6. Взаимодействие с заказчиком: насколько глубоко он хочет погрузиться в процесс, в какие моменты будет синхронизация (например, ревью скрипта, работа с выборкой), в каком виде удобно воспринимать результат исследования.
https://medium.com/designkontur/c86115454448
Medium
В одной лодке: что важно обсудить с заказчиком перед исследованием.
Как UX-исследователь, я ни раз сталкивалась со сложностями при взаимодействии с заказчиком. Например, у нас были разные ожидания от итогов…
Матвей Правосудов написал о визуальной культуре в дизайне интерфейсов.
Случайный дизайн, неопрятный, без должной любви к разработке — преступление, ведь с помощью красоты мы можем улучшать визуальную среду вокруг людей, прививать вкус, вызывать доверие и тёплые чувства.
Красота — прекрасные чувства и эмоции, которые у нас вызывает объект. Простота — отсутствие препятствий при взаимодействии, мгновенное понимание механизма взаимодействия с объектом. С накоплением опыта у пользователей в разные моменты истории простыми считались разные интерфейсы.
Вкус — наше мерило красоты. Он помогает за мгновение сказать, плохая картинка или хорошая. Его можно тренировать, рассматривая много картинок и пытаясь анализировать, что в них хорошего.
У людей разная «разрешающая способность». Когда вы создаёте макет, в какой-то момент вкус отказывает — вам кажется, что макет хороший, дальше нужно нести арт-директору. У него глаз сильнее намётан, он замечает косяки и прописывает правочки.
Наряду со вкусом есть ещё здравый смысл — то, что помогает измерять адекватность сценариев и делать интерфейс логичным.
Интерфейс с выверенными отступами, аккуратными шрифтами, приятными цветами не кажется сломанным. Он такой, каким его задумал человек.
Важно показывать, что объект или интерфейс создан людьми, а не роботами. Человечность проглядывается в заботливом тексте, который в нужный момент рассказывает о комиссии, в понятных названиях кнопок, милых иконках, грамотно подобранных цветах, шрифтах, нестоковых фотографиях, шутках там, где они уместны, и вообще во всём, что нельзя сгенерировать.
К «дрибловой» красоте можно приблизиться, если варьировать плотность информации. В сервисе, где много важных данных, которые нужно быстро сосканировать, чтобы принять решение, нужно вместить больше информации на квадратный пиксель. В более расслабленных (не утилитарных) приложениях, можно добавить воздуха и разрядить элементы.
Люди не читают текст, а сканируют. Глаз цепляется за цветовые пятна, большие кегли, контрастирующие элементы. Чтобы помочь человеку и снизить нагрузку на мозг, нужно выстроить визуальную иерархию. Хорошая иерархия — это последовательная история.
Дизайнеры придумали проверять вёрстку самостоятельно, чтобы найти недочёты (в том числе в дизайне). У них проверка получается быстрее, им не нужно сравнивать вёрстку и макет: все косяки видны сразу.
Принцип Вижуал Перфект — важно не столько совпадение вёрстки и макета, сколько красота вёрстки в результате.
https://designpub.ru/937a74b90c99
Случайный дизайн, неопрятный, без должной любви к разработке — преступление, ведь с помощью красоты мы можем улучшать визуальную среду вокруг людей, прививать вкус, вызывать доверие и тёплые чувства.
Красота — прекрасные чувства и эмоции, которые у нас вызывает объект. Простота — отсутствие препятствий при взаимодействии, мгновенное понимание механизма взаимодействия с объектом. С накоплением опыта у пользователей в разные моменты истории простыми считались разные интерфейсы.
Вкус — наше мерило красоты. Он помогает за мгновение сказать, плохая картинка или хорошая. Его можно тренировать, рассматривая много картинок и пытаясь анализировать, что в них хорошего.
У людей разная «разрешающая способность». Когда вы создаёте макет, в какой-то момент вкус отказывает — вам кажется, что макет хороший, дальше нужно нести арт-директору. У него глаз сильнее намётан, он замечает косяки и прописывает правочки.
Наряду со вкусом есть ещё здравый смысл — то, что помогает измерять адекватность сценариев и делать интерфейс логичным.
Интерфейс с выверенными отступами, аккуратными шрифтами, приятными цветами не кажется сломанным. Он такой, каким его задумал человек.
Важно показывать, что объект или интерфейс создан людьми, а не роботами. Человечность проглядывается в заботливом тексте, который в нужный момент рассказывает о комиссии, в понятных названиях кнопок, милых иконках, грамотно подобранных цветах, шрифтах, нестоковых фотографиях, шутках там, где они уместны, и вообще во всём, что нельзя сгенерировать.
К «дрибловой» красоте можно приблизиться, если варьировать плотность информации. В сервисе, где много важных данных, которые нужно быстро сосканировать, чтобы принять решение, нужно вместить больше информации на квадратный пиксель. В более расслабленных (не утилитарных) приложениях, можно добавить воздуха и разрядить элементы.
Люди не читают текст, а сканируют. Глаз цепляется за цветовые пятна, большие кегли, контрастирующие элементы. Чтобы помочь человеку и снизить нагрузку на мозг, нужно выстроить визуальную иерархию. Хорошая иерархия — это последовательная история.
Дизайнеры придумали проверять вёрстку самостоятельно, чтобы найти недочёты (в том числе в дизайне). У них проверка получается быстрее, им не нужно сравнивать вёрстку и макет: все косяки видны сразу.
Принцип Вижуал Перфект — важно не столько совпадение вёрстки и макета, сколько красота вёрстки в результате.
https://designpub.ru/937a74b90c99
Medium
Визуальная культура
Про вкусовщину, идеалы, красоту, доверие и заботу
Лена Бородина написала о 5-секундном тесте для проверки дизайна.
Он подходит, чтобы узнать впечатления людей именно от визуального дизайна. Помогает не скатиться во вкусовщину и многочасовые споры при обсуждении концепции (стилеобразующих экранов).
Покажите респонденту изображение одного или нескольких экранов на 5−10 секунд и попросите описать внешний вид продукта. Предложите выбрать эпитеты из заготовленного списка или придумать свои. Например, не более 3 эпитетов.
Провести тест можно с помощью сервисов UsabilityHub и Five second tests или в личном разговоре с респондентами.
В случае с придумыванием эпитетов тест даёт качественные данные — слова, которыми пользователи характеризуют дизайн.
Чтобы ответить на вопрос, годный дизайн или нет (какое общее впечатление), каждую характеристику надо отнести к одной из групп: положительные, отрицательные или неоднозначные. Это уже количественные данные, для которых нужна большая выборка.
Ещё можно сопоставить реальные пользовательские характеристики с тем, что хотели услышать заказчики. Если топовые слова в обоих списках совпадают, значит, цель достигнута.
https://medium.com/borodish/b4b9290e5ed6
Он подходит, чтобы узнать впечатления людей именно от визуального дизайна. Помогает не скатиться во вкусовщину и многочасовые споры при обсуждении концепции (стилеобразующих экранов).
Покажите респонденту изображение одного или нескольких экранов на 5−10 секунд и попросите описать внешний вид продукта. Предложите выбрать эпитеты из заготовленного списка или придумать свои. Например, не более 3 эпитетов.
Провести тест можно с помощью сервисов UsabilityHub и Five second tests или в личном разговоре с респондентами.
В случае с придумыванием эпитетов тест даёт качественные данные — слова, которыми пользователи характеризуют дизайн.
Чтобы ответить на вопрос, годный дизайн или нет (какое общее впечатление), каждую характеристику надо отнести к одной из групп: положительные, отрицательные или неоднозначные. Это уже количественные данные, для которых нужна большая выборка.
Ещё можно сопоставить реальные пользовательские характеристики с тем, что хотели услышать заказчики. Если топовые слова в обоих списках совпадают, значит, цель достигнута.
https://medium.com/borodish/b4b9290e5ed6
Medium
Дизайн годный или нет: как проверить только внешний вид продукта, а не клиентский опыт в целом
Привет! Меня зовут Лена Бородина, я развиваю пользовательские исследования в ИТ-компаниях. Сейчас работаю в Joom, а до этого руководила…
Антон Шнайдер рассказал о дизайне без дизайна и показал много примеров.
Для документалки о русском дизайне (5 минут): youtube.com/watch?v=iLafkzWDIr8
Нет никакого русского дизайна. Окей, может быть, он есть, но его сложно отделить от мирового. Есть просто правильный дизайн и всё, но если мы хотим найти какой-то наш стиль, вкус, направление, то скорее всего это что-то очень прямолинейное, простое, очень функциональное, сделанное скорее инженерами, чем дизайнерами.
Просто работает, аккуратно сделано, на создание дизайна не положено много сил. Видно материал, ничего не спрятано, не скрыто, предмет не пытается казаться чем-то другим.
Предмет должен выглядеть так, чтобы встать где угодно и вписаться в окружение. В поле эстетики ты перестаёшь о нём рассуждать. При этом он максимально эстетичен, как будто создан природой.
Подробнее в докладе «Дизайн без дизайна» (35 минут): youtube.com/watch?v=PeAFLzzeXIk
Дизайн без дизайна — ты не делаешь дизайн, и он всё равно есть, но он не так сильно торчит.
Когда у вещей есть придуманный дизайн (плохой), ты их покупаешь, ставишь дома и думаешь: кажется мне нужен шкаф, чтобы их убрать и не видеть, потому что они никак друг с другом не сочетаются. Или ты должен упороться и купить так, чтобы всё сочеталось. Это бесит.
Когда вещи сделаны из физических предпосылок, они такие почему-то, они друг с другом круто сочетаются.
Для документалки о русском дизайне (5 минут): youtube.com/watch?v=iLafkzWDIr8
Нет никакого русского дизайна. Окей, может быть, он есть, но его сложно отделить от мирового. Есть просто правильный дизайн и всё, но если мы хотим найти какой-то наш стиль, вкус, направление, то скорее всего это что-то очень прямолинейное, простое, очень функциональное, сделанное скорее инженерами, чем дизайнерами.
Просто работает, аккуратно сделано, на создание дизайна не положено много сил. Видно материал, ничего не спрятано, не скрыто, предмет не пытается казаться чем-то другим.
Предмет должен выглядеть так, чтобы встать где угодно и вписаться в окружение. В поле эстетики ты перестаёшь о нём рассуждать. При этом он максимально эстетичен, как будто создан природой.
Подробнее в докладе «Дизайн без дизайна» (35 минут): youtube.com/watch?v=PeAFLzzeXIk
Дизайн без дизайна — ты не делаешь дизайн, и он всё равно есть, но он не так сильно торчит.
Когда у вещей есть придуманный дизайн (плохой), ты их покупаешь, ставишь дома и думаешь: кажется мне нужен шкаф, чтобы их убрать и не видеть, потому что они никак друг с другом не сочетаются. Или ты должен упороться и купить так, чтобы всё сочеталось. Это бесит.
Когда вещи сделаны из физических предпосылок, они такие почему-то, они друг с другом круто сочетаются.
YouTube
«33 слова о дизайне». Фрагмент с Антоном Шнайдером
В России в седьмой раз проходит фестиваль документального кино о новой культуре Beat Weekend. Одна из премьер этого года — фильм «33 слова о дизайне», герои которого пытаются ответить на вопрос, что такое «русский дизайн». «Медуза» публикует ответ Антона…
Forwarded from Сарычева
Как было
— Вы что, серьезно поставили вотермарк на ролик?
— Разумеется
Как правильно
— Сергей, я вижу на ролике Вотермарк. Можете рассказать, зачем вы его поставили?
— Да, без проблем, извините, что сразу не предупредил. Я всегда ставлю вотермарк, когда работаю с клиентом впервые, а после оплаты присылаю ролик без него. Я понимаю, что это может быть непривычным, это мой личный пунктик, я параноик.
Как можно было предотвратить
— Максим, ролик готов. Я пока поставил на него вотермарк, это не потому что я вам не доверяю или хочу обидеть, это мой личный пунктик, я параноик и ставлю вотермарк всегда, когда работаю с клиентом впервые.
*****
1. Скандалы порой случаются на ровном месте, просто потому что кто-то не сдержал эмоций. Лучшее правило: возмутился — подожди. Успокоился — сформулируй без наезда и отправляй.
2. Конфликт легко предовратить одной фразой, если заранее предупредить собеседника о спорном вопросе. Сказал бы дизайнер сразу, что ролик будет с вотермарком, скандала бы не произошло.
3. Меня много раз выручала фраза «Простите, это просто мой личный пунктик». Люди с пониманием относятся к личным пунктикам, когда в них открыто признаешься.
К фразе «Меня однажды кинули, поэтому я теперь так делаю» трудно относиться с пониманием, потому что это обвинение и перенос ответственности.
****
Публиковать переписку с заказчиком — это днище. Это неэтично и еще это признание собственного непрофессионализма: «Я не смог разрулить проблему сам, пусть разрулит общественность».
— Вы что, серьезно поставили вотермарк на ролик?
— Разумеется
Как правильно
— Сергей, я вижу на ролике Вотермарк. Можете рассказать, зачем вы его поставили?
— Да, без проблем, извините, что сразу не предупредил. Я всегда ставлю вотермарк, когда работаю с клиентом впервые, а после оплаты присылаю ролик без него. Я понимаю, что это может быть непривычным, это мой личный пунктик, я параноик.
Как можно было предотвратить
— Максим, ролик готов. Я пока поставил на него вотермарк, это не потому что я вам не доверяю или хочу обидеть, это мой личный пунктик, я параноик и ставлю вотермарк всегда, когда работаю с клиентом впервые.
*****
1. Скандалы порой случаются на ровном месте, просто потому что кто-то не сдержал эмоций. Лучшее правило: возмутился — подожди. Успокоился — сформулируй без наезда и отправляй.
2. Конфликт легко предовратить одной фразой, если заранее предупредить собеседника о спорном вопросе. Сказал бы дизайнер сразу, что ролик будет с вотермарком, скандала бы не произошло.
3. Меня много раз выручала фраза «Простите, это просто мой личный пунктик». Люди с пониманием относятся к личным пунктикам, когда в них открыто признаешься.
К фразе «Меня однажды кинули, поэтому я теперь так делаю» трудно относиться с пониманием, потому что это обвинение и перенос ответственности.
****
Публиковать переписку с заказчиком — это днище. Это неэтично и еще это признание собственного непрофессионализма: «Я не смог разрулить проблему сам, пусть разрулит общественность».