В КБ «Собака Павлова» написали о процессе и результате исследования, с помощью которого пытались понять:
— Зачем компании заводят несколько счетов в разных банках;
— Зачем отправляют деньги своим контрагентам в другие банки, когда у них есть счета в одном.
Интересно узнать и об организации такого исследования, и об особенностях ведения бизнеса в России, и почему работникам банка сложно исследовать это самостоятельно.
«В основном респондентами были владельцы бизнесов, но также мы пообщались с несколькими финансовыми директорами, потому что в крупных компаниях именно они отвечают за счета.
Рекрутировать таких респондентов — нетривиальная задача, и в подобных ситуациях очень помогает выборка „снежного кома“ или доступных случаев. Мы спрашиваем у каждого респондента, есть ли у него знакомые, потенциально готовые поговорить на эту же тему. Конечно, у такой выборки есть ряд ограничений: она не основана на вероятности, а значит, вопиюще не случайна, а точность результатов оценивается субъективно. Поэтому использовать ее можно, когда невозможно подсчитать генеральную совокупность — общее число представителей интересующей группы. Но есть и плюсы: быстро, просто и иногда единственно возможно для сложнодоступного поля».
«Смог бы банк провести такое исследование сам? Возможно. Существуют варианты исследований, когда интервьюер не сообщает место своей работы. Но объяснить, откуда ты взялся и зачем тебе это, в таких ситуациях становится сложнее. А скрытность может повлиять на откровенность респондента и результаты исследования.
Это одно из главных преимуществ независимого исследования — возможность выстроить доверительное общение с респондентами и получить ценные инсайты».
https://vc.ru/finance/144855
— Зачем компании заводят несколько счетов в разных банках;
— Зачем отправляют деньги своим контрагентам в другие банки, когда у них есть счета в одном.
Интересно узнать и об организации такого исследования, и об особенностях ведения бизнеса в России, и почему работникам банка сложно исследовать это самостоятельно.
«В основном респондентами были владельцы бизнесов, но также мы пообщались с несколькими финансовыми директорами, потому что в крупных компаниях именно они отвечают за счета.
Рекрутировать таких респондентов — нетривиальная задача, и в подобных ситуациях очень помогает выборка „снежного кома“ или доступных случаев. Мы спрашиваем у каждого респондента, есть ли у него знакомые, потенциально готовые поговорить на эту же тему. Конечно, у такой выборки есть ряд ограничений: она не основана на вероятности, а значит, вопиюще не случайна, а точность результатов оценивается субъективно. Поэтому использовать ее можно, когда невозможно подсчитать генеральную совокупность — общее число представителей интересующей группы. Но есть и плюсы: быстро, просто и иногда единственно возможно для сложнодоступного поля».
«Смог бы банк провести такое исследование сам? Возможно. Существуют варианты исследований, когда интервьюер не сообщает место своей работы. Но объяснить, откуда ты взялся и зачем тебе это, в таких ситуациях становится сложнее. А скрытность может повлиять на откровенность респондента и результаты исследования.
Это одно из главных преимуществ независимого исследования — возможность выстроить доверительное общение с респондентами и получить ценные инсайты».
https://vc.ru/finance/144855
vc.ru
Исследование для банка: зачем контрагенты заводят несколько счетов в разных банках — Финансы на vc.ru
Поговорили с десятью предпринимателями и выяснили, зачем они отправляют деньги контрагентам в разные банки, даже когда у обеих сторон есть счета в одной организации.
Джозеф Мюллер проанализировал мобильные проигрыватели разных видеостриминговых платформ и сформулировал рекомендации.
Устраняйте причины, из-за которых пользователю приходится выходить из приложения и останавливать просмотр. Например, Netflix даёт возможность изменить яркость, заблокировать экран, настроить язык и прочее прямо в проигрывателе. Ivi идёт по тому же пути, но смена звуковой дорожки приводит к перезагрузке видео, что плохо.
Обращайте внимание на нюансы мотивации пользователя, так как это может вдохновить на новые решения. Например, Hulu перематывает видео вперёд на 30 секунд (удобнее пропускать ненужные сцены), а назад — всего на 10 (можно точнее находить нужные). Значения можно привязать к длине ролика.
Обучайте пользователя с помощью интерфейса. Например, YouTube показывает область двойного тапа для перемотки, что придаёт уверенности пользовательским действиям.
Прорабатывайте моменты, когда пользователь заканчивает просмотр и переворачивает экран телефона. В этот момент можно предложить посмотреть что-то ещё или оценить просмотренное.
Учитывайте особенности мобильного взаимодействия, чтобы пользователю не приходилось быть чересчур аккуратным. Например, Hulu при перемотке видео показывает время в верхней части экрана. Пользователь может перемещать палец почти по всему экрану и не бояться заслонить им время.
[English] https://uxdesign.cc/6aa81a8f4d2b
Заметка подготовлена совместно с @vanillatime.
Устраняйте причины, из-за которых пользователю приходится выходить из приложения и останавливать просмотр. Например, Netflix даёт возможность изменить яркость, заблокировать экран, настроить язык и прочее прямо в проигрывателе. Ivi идёт по тому же пути, но смена звуковой дорожки приводит к перезагрузке видео, что плохо.
Обращайте внимание на нюансы мотивации пользователя, так как это может вдохновить на новые решения. Например, Hulu перематывает видео вперёд на 30 секунд (удобнее пропускать ненужные сцены), а назад — всего на 10 (можно точнее находить нужные). Значения можно привязать к длине ролика.
Обучайте пользователя с помощью интерфейса. Например, YouTube показывает область двойного тапа для перемотки, что придаёт уверенности пользовательским действиям.
Прорабатывайте моменты, когда пользователь заканчивает просмотр и переворачивает экран телефона. В этот момент можно предложить посмотреть что-то ещё или оценить просмотренное.
Учитывайте особенности мобильного взаимодействия, чтобы пользователю не приходилось быть чересчур аккуратным. Например, Hulu при перемотке видео показывает время в верхней части экрана. Пользователь может перемещать палец почти по всему экрану и не бояться заслонить им время.
[English] https://uxdesign.cc/6aa81a8f4d2b
Заметка подготовлена совместно с @vanillatime.
Medium
Experience is in the details: analyzing the UX of streaming services
Looking at little experience decisions that make all the difference
Дэнни Сапио поделился примечательными советами из Human Interface Guidelines.
Проверяйте цветовую гамму приложения при разном освещении: в помещении, на улице, в разное время суток и при разной погоде. У приложения для работы с циклами сна Sleep Cycle успокаивающий тёмный интерфейс. Он не давит на глаза и идеален, чтобы ставить будильник перед сном.
Откладывайте момент авторизации или, если это возможно, вовсе убирайте регистрацию. Дайте получить максимум от приложения до того, как пользователю придётся ввести пароль.
Отображайте содержимое быстрее. Если оно ещё загружается, откройте нужный пользователю экран и текстом, графикой или анимацией покажите загрузку содержимого.
Избегайте аббревиатур и технического жаргона, непонятных для людей. Изучайте своих пользователей, чтобы определить, подходят ли вам определённые слова и фразы.
Ищите, где пользователь может застрять, и придумывайте, как ему помочь: подсказки, быстрые советы, чат с консультантом, ответы на частые вопросы и так далее.
Если действие пользователя ведёт к потере введённых им данных, сообщите об этом и объясните, как избежать потери.
Не включайте в пуш-уведомления чувствительную, личную или конфиденциальную информацию.
https://habr.com/ru/company/skillfactory/blog/510848/
Проверяйте цветовую гамму приложения при разном освещении: в помещении, на улице, в разное время суток и при разной погоде. У приложения для работы с циклами сна Sleep Cycle успокаивающий тёмный интерфейс. Он не давит на глаза и идеален, чтобы ставить будильник перед сном.
Откладывайте момент авторизации или, если это возможно, вовсе убирайте регистрацию. Дайте получить максимум от приложения до того, как пользователю придётся ввести пароль.
Отображайте содержимое быстрее. Если оно ещё загружается, откройте нужный пользователю экран и текстом, графикой или анимацией покажите загрузку содержимого.
Избегайте аббревиатур и технического жаргона, непонятных для людей. Изучайте своих пользователей, чтобы определить, подходят ли вам определённые слова и фразы.
Ищите, где пользователь может застрять, и придумывайте, как ему помочь: подсказки, быстрые советы, чат с консультантом, ответы на частые вопросы и так далее.
Если действие пользователя ведёт к потере введённых им данных, сообщите об этом и объясните, как избежать потери.
Не включайте в пуш-уведомления чувствительную, личную или конфиденциальную информацию.
https://habr.com/ru/company/skillfactory/blog/510848/
Хабр
10 идей из Human Interface Design Guidelines от Apple
Заслуживающие внимания рекомендации из гайдлайнов по iOS Последние несколько месяцев я разрабатывал приложение для IOS и постоянно обращался к Human Interface Design Guidelines от Apple . Я считаю это...
Виктор Губанов рассказал, зачем и как дизайнерам-новичкам получать обратную связь о своей работе.
Обратная связь — возможность научиться новому, исправить ошибки, найти более удачные решения и восполнить пробелы в теории. В дизайне многие навыки приходят только с практикой. Чужой опыт и обратная связь экономят время и помогают не повторять ошибок.
Запрашивайте фидбек самостоятельно: в чатах и сообществах, пишите опытным дизайнерам и просите прокомментировать вашу работу.
Сообщайте контекст: какая была задача, технические и временные ограничения и иные значимые детали проекта.
Уточняйте область, по которой хотите получить фидбек. Просите не просто посмотреть макет, а укажите, на что именно обратить внимание: типографика, сетка, цвета, динамика и так далее.
Хорошая обратная связь помогает понять, как улучшить результат и не допустить ошибку в будущем. Если вы этого не поняли, задавайте уточняющие вопросы, пока не разберётесь, почему ревьюер дал именно такой фидбек и как его можно применить. Спросите, что можно почитать по этой теме.
Обратную связь можно запросить у заказчика или арт-директора. Чем раньше вы это сделаете, тем меньше вложите сил в неправильное решение в случае, если поняли задачу неправильно.
https://ux.pub/kak-dizayneru-novichku-rabotat-s-fidbekom-chtoby-stat-profi/
Обратная связь — возможность научиться новому, исправить ошибки, найти более удачные решения и восполнить пробелы в теории. В дизайне многие навыки приходят только с практикой. Чужой опыт и обратная связь экономят время и помогают не повторять ошибок.
Запрашивайте фидбек самостоятельно: в чатах и сообществах, пишите опытным дизайнерам и просите прокомментировать вашу работу.
Сообщайте контекст: какая была задача, технические и временные ограничения и иные значимые детали проекта.
Уточняйте область, по которой хотите получить фидбек. Просите не просто посмотреть макет, а укажите, на что именно обратить внимание: типографика, сетка, цвета, динамика и так далее.
Хорошая обратная связь помогает понять, как улучшить результат и не допустить ошибку в будущем. Если вы этого не поняли, задавайте уточняющие вопросы, пока не разберётесь, почему ревьюер дал именно такой фидбек и как его можно применить. Спросите, что можно почитать по этой теме.
Обратную связь можно запросить у заказчика или арт-директора. Чем раньше вы это сделаете, тем меньше вложите сил в неправильное решение в случае, если поняли задачу неправильно.
https://ux.pub/kak-dizayneru-novichku-rabotat-s-fidbekom-chtoby-stat-profi/
UXPUB 🇺🇦 Дизайн-спільнота
Как дизайнеру-новичку работать с фидбеком, чтобы стать профи
Советы для новичков в дизайне, которые помогут использовать фидбэк для профессионального роста
❤1
Люси Тодд рассказала о разных способах визуализации данных: гистограммах, линейных графиках, круговых и кольцевых диаграммах, квантограммах и типографике.
Если данных мало, линейные графики используйте аккуратно. Если есть данные для точек 1 и 3 и ничего не известно о точке 2, скорее всего, вы соедините известные точки прямой линией. Люди могут решить, что это настоящее значение промежуточной точки.
Круговыми и кольцевыми диаграммами нельзя показывать процент изменения показателя. Если просмотры брендированного видео на Ютубе увеличилось на 99%, нельзя показывать это круговой диаграммой, заполненной на 99%.
Квантограмма — повторение пиктограммы или иконки, показывающее количество. Отлично подходит для изображения небольших чисел. Например: на улице открылись 12 новых ресторанов; на улице 3 из 4 ресторанов подают пиццу.
https://vc.ru/design/145809
Если данных мало, линейные графики используйте аккуратно. Если есть данные для точек 1 и 3 и ничего не известно о точке 2, скорее всего, вы соедините известные точки прямой линией. Люди могут решить, что это настоящее значение промежуточной точки.
Круговыми и кольцевыми диаграммами нельзя показывать процент изменения показателя. Если просмотры брендированного видео на Ютубе увеличилось на 99%, нельзя показывать это круговой диаграммой, заполненной на 99%.
Квантограмма — повторение пиктограммы или иконки, показывающее количество. Отлично подходит для изображения небольших чисел. Например: на улице открылись 12 новых ресторанов; на улице 3 из 4 ресторанов подают пиццу.
https://vc.ru/design/145809
vc.ru
5 способов сделать график или диаграмму понятными и клиентам, и коллегам, и себе — Дизайн на vc.ru
Вот ты собрал статистику, скоро нужно будет показать ее клиенту, но как грамотно визуализировать эту информацию? Важно не только знать о существовании графиков, диаграмм и дашбордов, но и грамотно их применять.
Евгений Игнашов написал о GOMS-анализе.
Стоит ли использовать его для оценки удобства интерфейса? Нет, если при работе с интерфейсом никто не умирает от задержки в 0,3 секунды.
The model of Goals, Objects, Methods, and Selection rules (GOMS) — метод исследования, позволяющий предсказать, сколько времени потребуется опытному пользователю на выполнение конкретной операции при использовании конкретного интерфейса.
Время на выполнение задачи — сумма всех временных интервалов, которые потребовались пользователю на выполнение каждого конкретного жеста, например, перенос руки на мышь, нажатие клавиши клавиатуры. Время на каждый жест оценили в лаборатории.
Для примера Евгений проанализировал два разных интерфейса перевода градусов из Цельсия в Фаренгейт и наоборот.
https://habr.com/ru/post/512712/
Стоит ли использовать его для оценки удобства интерфейса? Нет, если при работе с интерфейсом никто не умирает от задержки в 0,3 секунды.
The model of Goals, Objects, Methods, and Selection rules (GOMS) — метод исследования, позволяющий предсказать, сколько времени потребуется опытному пользователю на выполнение конкретной операции при использовании конкретного интерфейса.
Время на выполнение задачи — сумма всех временных интервалов, которые потребовались пользователю на выполнение каждого конкретного жеста, например, перенос руки на мышь, нажатие клавиши клавиатуры. Время на каждый жест оценили в лаборатории.
Для примера Евгений проанализировал два разных интерфейса перевода градусов из Цельсия в Фаренгейт и наоборот.
https://habr.com/ru/post/512712/
Хабр
GOMS-анализ юзабилити интерфейса
Данная статья практически полностью основана на цитатах из книги Джефа Раскина « Интерфейс — новые направления в проектировании компьютерных систем » с моими дополнениями и воссозданием приводимого в...
Пейдж Лаубхаймер из Nielsen Norman Group написал о трёх типах персон.
Прото-персоны — быстро создаются на основе предположений всей команды, без исследования, а значит, дешёвые. Точность таких персон оставляет желать лучшего, для принятия серьёзных решений не годятся… наверное.
Качественные персоны — создаются на основе качественного исследования пользователей. Самый универсальный вид персон, так как не требует больших трудозатрат и обладает достаточной точностью для принятия решений. Этакий перочинный нож или Фольксваген Гольф 2.
Статистические персоны — создаются аналогично качественным, но каждый инсайт дополнительно проверяется на количественных данных. То есть нужно не только провести серию полевых интервью, но ещё и настроить аналитику так, чтобы собирать необходимые данные с необходимых пользователей в необходимое время. Эту махину нужно постоянно обновлять и настраивать, чтобы сохранять актуальность данных. Вы получаете максимально точный инструмент… но стоит ли он того?
[English] https://www.nngroup.com/articles/persona-types/
Заметка подготовлена совместно с @vanillatime.
Прото-персоны — быстро создаются на основе предположений всей команды, без исследования, а значит, дешёвые. Точность таких персон оставляет желать лучшего, для принятия серьёзных решений не годятся… наверное.
Качественные персоны — создаются на основе качественного исследования пользователей. Самый универсальный вид персон, так как не требует больших трудозатрат и обладает достаточной точностью для принятия решений. Этакий перочинный нож или Фольксваген Гольф 2.
Статистические персоны — создаются аналогично качественным, но каждый инсайт дополнительно проверяется на количественных данных. То есть нужно не только провести серию полевых интервью, но ещё и настроить аналитику так, чтобы собирать необходимые данные с необходимых пользователей в необходимое время. Эту махину нужно постоянно обновлять и настраивать, чтобы сохранять актуальность данных. Вы получаете максимально точный инструмент… но стоит ли он того?
[English] https://www.nngroup.com/articles/persona-types/
Заметка подготовлена совместно с @vanillatime.
Nielsen Norman Group
3 Persona Types: Lightweight, Qualitative, and Statistical
For most teams, approaching persona creation qualitatively is the right balance of effort vs. value, but very large or very small organizations might benefit from statistical or lightweight approaches, respectively.
Михаил Озорнин написал о типе визуализации «Регулярные карты».
Регулярные карты сохраняют узнаваемость карты и дают при этом возможность визуализировать данные в удобном формате.
Самое сложное — сохранить узнаваемость. Для США таких карт полно, а Россия в карте из квадратов становится неузнаваемой, так как регионы очень разные по размеру.
В 2017 году прошёл конкурс регулярных карт для России, где победил вариант Ивана Дианова.
— Пост Михаила: http://mikeozornin.ru/blog/all/election-chart-redesign/
— Работы конкурсантов и итоги: https://telegra.ph/Uchastniki-i-ih-raboty-12-03
— О проекте Ивана [English]: https://medium.com/kompany/92190d14e41e
Регулярные карты сохраняют узнаваемость карты и дают при этом возможность визуализировать данные в удобном формате.
Самое сложное — сохранить узнаваемость. Для США таких карт полно, а Россия в карте из квадратов становится неузнаваемой, так как регионы очень разные по размеру.
В 2017 году прошёл конкурс регулярных карт для России, где победил вариант Ивана Дианова.
— Пост Михаила: http://mikeozornin.ru/blog/all/election-chart-redesign/
— Работы конкурсантов и итоги: https://telegra.ph/Uchastniki-i-ih-raboty-12-03
— О проекте Ивана [English]: https://medium.com/kompany/92190d14e41e
mikeozornin.ru
Улучшение визуализации про выборы
Переделываю график по голосованию Максим Кац выложил выложил вчера сводный график по голосованиям
Сделал конспект книги Майка Монтейро «Дизайн — это работа».
Вот, например, маркеры плохого клиента:
— С порога диктует, что нужно, и объясняет, в какой цвет это покрасить. Это не дизайн, а производство;
— Даёт понять, что опускает свою планку, работая с вами. Хорошая работа получится только при взаимном уважении;
— Обратился к вам неохотно и не ценит дизайн. Если он не ценит вашу работу, он неохотно будет платить и сотрудничать. Штатные дизайнеры могут считать, что проект стоило поручить им. Стартаперы — что работа с подрядчиком затормозит работу. Они будут стремиться доказать, что ваши услуги не нужны, и пытаться абстрагироваться от процесса;
— Предлагает работать за долю в бизнесе;
— Говорит, что это хороший проект для портфолио, и хочет работать по ценам ниже рыночных. Если он с самого начала не уважает вас, результат вряд ли будет выдающимся;
— Это не ключевой для бизнеса проект. Не стоит участвовать в конъюнктурных попытках заполнить нишу на рынке. Пока вы работаете, кто-нибудь другой заполнит её, и клиент решит заняться чем-то другим.
https://vandergrav.ru/design-is-job-book-summary/
Вот, например, маркеры плохого клиента:
— С порога диктует, что нужно, и объясняет, в какой цвет это покрасить. Это не дизайн, а производство;
— Даёт понять, что опускает свою планку, работая с вами. Хорошая работа получится только при взаимном уважении;
— Обратился к вам неохотно и не ценит дизайн. Если он не ценит вашу работу, он неохотно будет платить и сотрудничать. Штатные дизайнеры могут считать, что проект стоило поручить им. Стартаперы — что работа с подрядчиком затормозит работу. Они будут стремиться доказать, что ваши услуги не нужны, и пытаться абстрагироваться от процесса;
— Предлагает работать за долю в бизнесе;
— Говорит, что это хороший проект для портфолио, и хочет работать по ценам ниже рыночных. Если он с самого начала не уважает вас, результат вряд ли будет выдающимся;
— Это не ключевой для бизнеса проект. Не стоит участвовать в конъюнктурных попытках заполнить нишу на рынке. Пока вы работаете, кто-нибудь другой заполнит её, и клиент решит заняться чем-то другим.
https://vandergrav.ru/design-is-job-book-summary/
Тесс Гадд написала о радиокнопках и чекбоксах.
Что это такое, анатомия радиокнопки и чекбокса, разница между ними, встречающиеся стили отображения, возможные состояния.
Когда использовать радиокнопки:
— Пользователь может выбрать только один вариант;
— Вариантов меньше шести;
— У пользователя не должно быть возможности «не выбирать», если он уже выбрал один из вариантов. Нажатие на выбранный вариант в группе радиокнопок не приводит к отмене выбора этого варианта;
— Для сохранения выбора пользователь нажимает на специальный контрол (например, кнопку «Сохранить»).
Когда использовать чекбоксы:
— Пользователь может выбрать несколько вариантов или не выбрать ни одного;
— Один вариант, на который пользователь должен ответить «да» или «нет». Например: «[v] Я соглашаюсь с офертой».
https://ux.pub/radio-buttons-checkboxes-i-drugie-vidy-selektorov/
Что это такое, анатомия радиокнопки и чекбокса, разница между ними, встречающиеся стили отображения, возможные состояния.
Когда использовать радиокнопки:
— Пользователь может выбрать только один вариант;
— Вариантов меньше шести;
— У пользователя не должно быть возможности «не выбирать», если он уже выбрал один из вариантов. Нажатие на выбранный вариант в группе радиокнопок не приводит к отмене выбора этого варианта;
— Для сохранения выбора пользователь нажимает на специальный контрол (например, кнопку «Сохранить»).
Когда использовать чекбоксы:
— Пользователь может выбрать несколько вариантов или не выбрать ни одного;
— Один вариант, на который пользователь должен ответить «да» или «нет». Например: «[v] Я соглашаюсь с офертой».
https://ux.pub/radio-buttons-checkboxes-i-drugie-vidy-selektorov/
UXPUB 🇺🇦 Дизайн-спільнота
Radio buttons, checkboxes и другие виды селекторов
Выбери меня! Выбери меня! Нет, выбери меня! В сегодняшней статье мы рассмотрим селекторы и чем они различаются
Джордж Кейв объяснил правила хорошего интерфейса на примере панелей управления из Лего.
Во время Второй мировой войне пилоты «Летающей крепости» при посадке часто выпускали закрылки вместо шасси. Ошибка происходила из-за одинаковой формы рычагов. Придумали обклеивать рычаги разными накладками — пример кодирования по форме.
Кодировать элементы управления можно формой, цветом, размером, текстурой, расположением и типом действия. Крутить рукоятку, нажимать кнопку и поднимать рычаг — действия разного типа.
Важно визуально группировать связанные элементы. Связаны они могут быть:
— Фичей. На одной панели находится весь ввод и вывод отдельной фичи;
— Типом операций. В одном месте собраны все водопроводные счётчики;
— Технологией. В автомобиле есть тачскрин и отдельно — физические кнопки рядом с ним;
— Юзкейсом. Вместе собраны самые популярные элементы или необходимые в рамках определённого сценария.
https://vc.ru/design/148285
Во время Второй мировой войне пилоты «Летающей крепости» при посадке часто выпускали закрылки вместо шасси. Ошибка происходила из-за одинаковой формы рычагов. Придумали обклеивать рычаги разными накладками — пример кодирования по форме.
Кодировать элементы управления можно формой, цветом, размером, текстурой, расположением и типом действия. Крутить рукоятку, нажимать кнопку и поднимать рычаг — действия разного типа.
Важно визуально группировать связанные элементы. Связаны они могут быть:
— Фичей. На одной панели находится весь ввод и вывод отдельной фичи;
— Типом операций. В одном месте собраны все водопроводные счётчики;
— Технологией. В автомобиле есть тачскрин и отдельно — физические кнопки рядом с ним;
— Юзкейсом. Вместе собраны самые популярные элементы или необходимые в рамках определённого сценария.
https://vc.ru/design/148285
vc.ru
Правила хорошего интерфейса: изучаем UI-дизайн на примере Lego — Дизайн на vc.ru
Как провести мастер-класс по UI-дизайну, используя только «бортовые компьютеры» из наборов Lego.
В студии Pragmatica сделали 7-й выпуск «ДжонФёдора»:
— Мнения пожилых людей с улицы о качестве и стоимости логотипа «Памплона кэпитал» (экспресс-дизайн Студии Артемия Лебедева) и логотипа «Общероссийского голосования»;
— Реально ли создавать дизайн нейросетями, в частности, дизайн логотипов — с помощью Николая Иронова. Мнение Юрия Ветрова, который следит за новинками генеративного дизайна;
— Обсуждение вау-сайтов с Евгением Кудрявченко из украинской студии Vintage;
— Новая школа дизайн-студий: иметь сильные стороны кроме самого дизайна (например: 3D, скорость работы, лучшее понимание клиентского бизнеса); быть заметными (выкладывать работы, рассказывать о подходах и кейсах); продавать часы; быть открытыми (показывать процесс);
— Конкурс Артёма Геллера «Нетти» и расчеловечивание.
https://www.youtube.com/watch?v=c_qK13iZ1a8
— Мнения пожилых людей с улицы о качестве и стоимости логотипа «Памплона кэпитал» (экспресс-дизайн Студии Артемия Лебедева) и логотипа «Общероссийского голосования»;
— Реально ли создавать дизайн нейросетями, в частности, дизайн логотипов — с помощью Николая Иронова. Мнение Юрия Ветрова, который следит за новинками генеративного дизайна;
— Обсуждение вау-сайтов с Евгением Кудрявченко из украинской студии Vintage;
— Новая школа дизайн-студий: иметь сильные стороны кроме самого дизайна (например: 3D, скорость работы, лучшее понимание клиентского бизнеса); быть заметными (выкладывать работы, рассказывать о подходах и кейсах); продавать часы; быть открытыми (показывать процесс);
— Конкурс Артёма Геллера «Нетти» и расчеловечивание.
https://www.youtube.com/watch?v=c_qK13iZ1a8
YouTube
Нейросеть Иронов, конкурс «Нетти», советы и ссылки, Юрий Ветров и Евгений Кудрявченко | ДжонФедор 7
«ДжонФёдор» – это рубрика, в которой наша команда делится мнением о людях, явлениях и событиях в веб-среде.
Тайм-код:
0:02 Основные темы выпуска
0:19 Интересные ссылки
0:20 Проект «Суперсобака» от студии Petrick
1:10 Проект «Русский пантеон»
1:47 Telegram…
Тайм-код:
0:02 Основные темы выпуска
0:19 Интересные ссылки
0:20 Проект «Суперсобака» от студии Petrick
1:10 Проект «Русский пантеон»
1:47 Telegram…
Кристиан Холст из Baymard Institute написал о кнопке «Назад».
Пользователи ожидают, что кнопка «Назад» вернёт их к тому, что они считают предыдущей страницей. Новой страницей они считают то, что визуально сильно отличается от текущей страницы или концептуально считается новой страницей. При этом технически это может быть одна и та же страница.
Часто проблем с кнопкой «Назад» доставляют:
1. Всплывающие блоки (например, панель фильтрации на мобильном устройстве или диалоговое окно) и лайтбоксы. Пользователи ожидают, что нажатие «Назад» закроет всплывающий блок или лайтбокс;
2. Результаты фильтрации и сортировки. Пользователи ожидают отменить фильтрацию или вернуться к предыдущим её значениям;
3. Аккордеон оформления заказа. Пользователи ожидают вернуться на предыдущий элемент аккордеона, а не закрывать форму заказа полностью;
4. Страница товара. Пользователи ожидают вернуться в то место списка товаров, где они были перед переходом на страницу товара. Особенно это важно на мобильных устройствах после утомительной прокрутки списка.
Также стоит обратить внимание (пользовательские ожидания зависят от нюансов):
— На многоступенчатые процессы в пределах одной страницы;
— Раскрытие дополнительного содержимого;
— Перемещение по якорным ссылкам;
— Раскрытие усечённого содержимого: пользователь обычно не считает это значимым шагом при взаимодействии;
— Просмотр разных вариантов товара (например, разных цветов): тоже не считает.
https://ux.pub/4-dizayn-patterna-ne-sootvetstvuyuschih-ozhidaniyam-polzovateley-otnositelno-knopki-nazad/
Пользователи ожидают, что кнопка «Назад» вернёт их к тому, что они считают предыдущей страницей. Новой страницей они считают то, что визуально сильно отличается от текущей страницы или концептуально считается новой страницей. При этом технически это может быть одна и та же страница.
Часто проблем с кнопкой «Назад» доставляют:
1. Всплывающие блоки (например, панель фильтрации на мобильном устройстве или диалоговое окно) и лайтбоксы. Пользователи ожидают, что нажатие «Назад» закроет всплывающий блок или лайтбокс;
2. Результаты фильтрации и сортировки. Пользователи ожидают отменить фильтрацию или вернуться к предыдущим её значениям;
3. Аккордеон оформления заказа. Пользователи ожидают вернуться на предыдущий элемент аккордеона, а не закрывать форму заказа полностью;
4. Страница товара. Пользователи ожидают вернуться в то место списка товаров, где они были перед переходом на страницу товара. Особенно это важно на мобильных устройствах после утомительной прокрутки списка.
Также стоит обратить внимание (пользовательские ожидания зависят от нюансов):
— На многоступенчатые процессы в пределах одной страницы;
— Раскрытие дополнительного содержимого;
— Перемещение по якорным ссылкам;
— Раскрытие усечённого содержимого: пользователь обычно не считает это значимым шагом при взаимодействии;
— Просмотр разных вариантов товара (например, разных цветов): тоже не считает.
https://ux.pub/4-dizayn-patterna-ne-sootvetstvuyuschih-ozhidaniyam-polzovateley-otnositelno-knopki-nazad/
UXPUB 🇺🇦 Дизайн-спільнота
4 дизайн паттерна не соответствующих ожиданиям пользователей относительно кнопки «Назад»
Кнопка «Назад» долгое время была одним из основных элементов веб-навигации и это привело к тому, что у пользователей сформировалась весьма специфичная ментальная модель ее поведения
Алёна Юрьева написала, что делать, если заказчик не ставит никаких ограничений, и как в таком режиме она создала конструктор иллюстраций.
— Как и с более конкретными задачами, надо чётко определить, с какой целью всё это делается, кто и как будет этим пользоваться.
— Такая задача требует больше усилий на этапе концепции, так как появляется слишком много способов её решить.
— Если ограничений нет, их стоит придумать самостоятельно, чтобы отсечь часть вариантов.
— В Фигме можно подменять элементы с помощью компонентов. Отсюда появилась идея не просто собирать иллюстрации из готовых персонажей и объектов, а конструировать самих персонажей.
«Задав определённые константы в положении головы или ног, я заложила возможность выбирать из общей базы различные детали персонажа, начиная с бровей и заканчивая ботинками.
Добавить новое выражение глаз, причёску или наряд — вопрос пары минут для дизайнера. А для пользователя конструктора — это несколько дополнительных персонажей».
https://vc.ru/design/154303
— Как и с более конкретными задачами, надо чётко определить, с какой целью всё это делается, кто и как будет этим пользоваться.
— Такая задача требует больше усилий на этапе концепции, так как появляется слишком много способов её решить.
— Если ограничений нет, их стоит придумать самостоятельно, чтобы отсечь часть вариантов.
— В Фигме можно подменять элементы с помощью компонентов. Отсюда появилась идея не просто собирать иллюстрации из готовых персонажей и объектов, а конструировать самих персонажей.
«Задав определённые константы в положении головы или ног, я заложила возможность выбирать из общей базы различные детали персонажа, начиная с бровей и заканчивая ботинками.
Добавить новое выражение глаз, причёску или наряд — вопрос пары минут для дизайнера. А для пользователя конструктора — это несколько дополнительных персонажей».
https://vc.ru/design/154303
vc.ru
Как работать дизайнеру, если в задаче вообще нет ограничений — Дизайн на vc.ru
Можно поспорить о том, в каком случае работать легче — когда заказчик выдвигает жёсткие требования к дизайнерским решениям или когда полностью полагается на решения и вкус дизайнера. В обеих ситуациях все может пойти хорошо или не очень. И дизайнер должен…
Макс Десятых опубликовал 2-й параграф будущего учебника по управлению компанией, создающей цифровые продукты на заказ.
Почему такие компании могут загнать себя в финансовую пирамиду из предоплат:
1. Продажа проектов по фиксированной стоимости. С большими проектами больше вероятность ошибиться в оценке;
2. Убыточные проекты приходится компенсировать предоплатами за следующие проекты;
3. Растущие расходы на команду, которая должна все эти проекты делать, разгоняют процесс. Большой команде нужно много больших проектов (см. пункт 1);
4. Проекты постоянно заканчиваются. Надо искать новые проекты, чтобы загрузить команду. Слабая позиция на переговорах приводит к контрактам на плохих условиях, с фиксированной стоимостью. Круг замыкается.
Что делать:
— Договариваться на Time & Materials или Retainer;
— Считать потраченные на проекты часы;
— Сокращать расходы на команду;
— Отдавать приоритет клиентам, с которыми можно работать годами. Руководителю — лично работать над отношениями с заказчиками;
— Понять, что большинство расходов зависит от времени, а доходы — от менее надёжных вещей: успехов в продажах, качества работ, платёжной дисциплины клиентов.
https://vc.ru/finance/135918
Почему такие компании могут загнать себя в финансовую пирамиду из предоплат:
1. Продажа проектов по фиксированной стоимости. С большими проектами больше вероятность ошибиться в оценке;
2. Убыточные проекты приходится компенсировать предоплатами за следующие проекты;
3. Растущие расходы на команду, которая должна все эти проекты делать, разгоняют процесс. Большой команде нужно много больших проектов (см. пункт 1);
4. Проекты постоянно заканчиваются. Надо искать новые проекты, чтобы загрузить команду. Слабая позиция на переговорах приводит к контрактам на плохих условиях, с фиксированной стоимостью. Круг замыкается.
Что делать:
— Договариваться на Time & Materials или Retainer;
— Считать потраченные на проекты часы;
— Сокращать расходы на команду;
— Отдавать приоритет клиентам, с которыми можно работать годами. Руководителю — лично работать над отношениями с заказчиками;
— Понять, что большинство расходов зависит от времени, а доходы — от менее надёжных вещей: успехов в продажах, качества работ, платёжной дисциплины клиентов.
https://vc.ru/finance/135918
vc.ru
Скорость денег: что делать руководителю студии, чтобы «бассейн» с деньгами не опустел
10 лет я с партнёрами развивал компанию Redmadrobot, а теперь описываю свой опыт в главах будущего учебника по управлению фирмой, оказывающей услуги по разработке цифровых продуктов на заказ.
Павел Шерер опубликовал первую статью цикла о функциональной архитектуре.
ФА — детальное описание и структура функциональности создаваемой системы, спроектированные с учётом технологических, пользовательских и бизнес-требований, а также иерархии функций, их зависимости друг от друга и использования в компонентах такой системы.
Каждое событие в системе, каждый ответ на действие пользователя — функция. Функции могут объединяться в функциональные разделы, могут быть связаны.
Процесс создания цифровых продуктов состоит из продуктового дизайна (исследования, аналитика, дизайн) и разработки (кодинг, девопс и тестирование). Часто разработчикам прилетают только функциональные требования и дизайн-макеты.
Так проектировщики перекладывают свои обязанности (а с ними и риски) на разработчиков, которые вынуждены принимать решения и искать ответы на вопросы вроде «Что будет, если соцсеть не вернула имейл пользователя?»
ФА призвана снизить риски, стабилизировать разработку, заранее найти ответы на значительную часть вопросов, не заставлять обычных программистов принимать общие архитектурные или тонкие юиксовые решения.
Выделенный архитектор, который загрузит себе в голову весь проект, выделит общие части и разложит всё по полочкам, встречается в проектах редко. Никто кроме проектировщика не знает проект настолько хорошо, чтобы это сделать.
#functional_architecture
ФА — детальное описание и структура функциональности создаваемой системы, спроектированные с учётом технологических, пользовательских и бизнес-требований, а также иерархии функций, их зависимости друг от друга и использования в компонентах такой системы.
Каждое событие в системе, каждый ответ на действие пользователя — функция. Функции могут объединяться в функциональные разделы, могут быть связаны.
Процесс создания цифровых продуктов состоит из продуктового дизайна (исследования, аналитика, дизайн) и разработки (кодинг, девопс и тестирование). Часто разработчикам прилетают только функциональные требования и дизайн-макеты.
Так проектировщики перекладывают свои обязанности (а с ними и риски) на разработчиков, которые вынуждены принимать решения и искать ответы на вопросы вроде «Что будет, если соцсеть не вернула имейл пользователя?»
ФА призвана снизить риски, стабилизировать разработку, заранее найти ответы на значительную часть вопросов, не заставлять обычных программистов принимать общие архитектурные или тонкие юиксовые решения.
Выделенный архитектор, который загрузит себе в голову весь проект, выделит общие части и разложит всё по полочкам, встречается в проектах редко. Никто кроме проектировщика не знает проект настолько хорошо, чтобы это сделать.
#functional_architecture
Павел Шерер
Функциональная архитектура цифровых продуктов, часть 1 — Павел Шерер
Что такое функциональная архитектура, зачем она нужна и почему рынок привык работать плохо.
Игорь Штанг поделился записью мастер-класса по стиранию линеек.
Метод:
1. Убрать все линейки и плашки;
2. Если что-то ломается, решить проблему с помощью отступов, выравнивания, оформления;
3. Если не получается, вернуть часть линеек или плашек.
На видео Игорь перевёрстывает 5 макетов и отвечает на вопросы.
01:18 — Вступление;
03:40 — Таблица «Допустимое рабочее давление»;
24:55 — Календарь цен авиакомпании «Победа»;
40:55 — Вклад «Восточного банка»;
47:58 — Интерфейс выписки по счету «Бинбанка»;
1:02:58 — Лицензии словолитни CJ Type;
1:11:57 — Вывод;
1:15:10 — Вопросы.
https://www.youtube.com/watch?v=lAqfdjvxT0U
Метод:
1. Убрать все линейки и плашки;
2. Если что-то ломается, решить проблему с помощью отступов, выравнивания, оформления;
3. Если не получается, вернуть часть линеек или плашек.
На видео Игорь перевёрстывает 5 макетов и отвечает на вопросы.
01:18 — Вступление;
03:40 — Таблица «Допустимое рабочее давление»;
24:55 — Календарь цен авиакомпании «Победа»;
40:55 — Вклад «Восточного банка»;
47:58 — Интерфейс выписки по счету «Бинбанка»;
1:02:58 — Лицензии словолитни CJ Type;
1:11:57 — Вывод;
1:15:10 — Вопросы.
https://www.youtube.com/watch?v=lAqfdjvxT0U
YouTube
DL INTENSIVE | Игорь Штанг
Старт в 21:00 по МСК. Дизайнер, автор курса «Типографика и верстка» Игорь Штанг расскажет о своём методе работы и переверстает макет в режиме реального времени.
Ирина Моторина написала, зачем и как составлять сторифреймы.
Сторифреймы — это дизайн-схема продукта. Никаких серых прямоугольников, только текст. Они помогают с логикой продукта, фичами и tone of voice.
Ирина собирает их в Miro. Там есть шаблон Wireframing, в котором можно настроить переходы и указать кнопки. Это помогает понять продуктовую логику и как будет выглядеть интерфейс.
Пишет сторифреймы в диалогах. Так легче представить, какие вопросы могут появиться у человека и как ему ответит продукт.
Сторифреймы помогают думать о продукте быстрее.
https://medium.com/irinagriaznykh/f0481b0ddf7a
Сторифреймы — это дизайн-схема продукта. Никаких серых прямоугольников, только текст. Они помогают с логикой продукта, фичами и tone of voice.
Ирина собирает их в Miro. Там есть шаблон Wireframing, в котором можно настроить переходы и указать кнопки. Это помогает понять продуктовую логику и как будет выглядеть интерфейс.
Пишет сторифреймы в диалогах. Так легче представить, какие вопросы могут появиться у человека и как ему ответит продукт.
Сторифреймы помогают думать о продукте быстрее.
https://medium.com/irinagriaznykh/f0481b0ddf7a
Medium
Сторифреймы. Зачем и как их составлять
Видовая теория, польза и content first подход к проектированию.
Мэтт Андерсон написал о проблемах подхода Mobile First.
Он основан на прогрессивном улучшении: сначала ориентируемся на менее производительные устройства, а потом добавляем фишки для более производительных.
Нельзя быть уверенным, что настольное устройство мощнее, и у него быстрее интернет. Плюс, есть гибридные устройства: ноутбук с сенсорным экраном, интерактивный стенд и так далее.
Адаптивные состояния интерфейса обычно проектируют под конкретные ширины экрана: 375, 768, 1024 пикселей и так далее. Если эти размеры назначить брейкпоинтами, новые устройства могут отображать не вполне подходящие адаптивные состояния.
На дизайн влияет контекст. Например, дизайн приложения Spotify отличается при использовании за рулём (Car Mode).
Размер устройства часто используют, чтобы определить, какие возможности можно включить. В случае с указателем лучше ориентироваться на различные Pointer API. В базовом дизайне надо ориентироваться на указатели с наименьшими возможностями и добавлять фишки для продвинутых указателей.
Для гироскопа, GPS, камеры, сканера отпечатков пальцев, датчика освещённости, наличия и скорости интернета тоже есть API.
Всегда отправляйте необходимый минимум данных, сжимайте файлы.
— Перевод: https://ux.pub/ne-proektiruyte-dlya-mobilnyh-ustroystv-mobile-first/
— Но лучше читать в оригинале [English]: https://mattanddesign.com/dont-design-for-mobile/
Он основан на прогрессивном улучшении: сначала ориентируемся на менее производительные устройства, а потом добавляем фишки для более производительных.
Нельзя быть уверенным, что настольное устройство мощнее, и у него быстрее интернет. Плюс, есть гибридные устройства: ноутбук с сенсорным экраном, интерактивный стенд и так далее.
Адаптивные состояния интерфейса обычно проектируют под конкретные ширины экрана: 375, 768, 1024 пикселей и так далее. Если эти размеры назначить брейкпоинтами, новые устройства могут отображать не вполне подходящие адаптивные состояния.
На дизайн влияет контекст. Например, дизайн приложения Spotify отличается при использовании за рулём (Car Mode).
Размер устройства часто используют, чтобы определить, какие возможности можно включить. В случае с указателем лучше ориентироваться на различные Pointer API. В базовом дизайне надо ориентироваться на указатели с наименьшими возможностями и добавлять фишки для продвинутых указателей.
Для гироскопа, GPS, камеры, сканера отпечатков пальцев, датчика освещённости, наличия и скорости интернета тоже есть API.
Всегда отправляйте необходимый минимум данных, сжимайте файлы.
— Перевод: https://ux.pub/ne-proektiruyte-dlya-mobilnyh-ustroystv-mobile-first/
— Но лучше читать в оригинале [English]: https://mattanddesign.com/dont-design-for-mobile/
UXPUB 🇺🇦 Дизайн-спільнота
Не проектируйте для мобильных устройств (Mobile-first)
Mobile-first – решение ограничений устройств на заре революции мобильных устройств. Тогда это имело большой смысл, и даже по сей день работает. Но есть одно но
Опубликованы видео с ProfsoUX 2020:
1. Lutz Schmitt — Blank Screens and Muse’s Kisses
https://vimeo.com/453012022
2. Константин Гаврюков — Changing the future of E-commerce. Designing for people, not conversion
https://vimeo.com/453012044
3. Валерия Курмак — CJM как каргокульт
https://vimeo.com/453011954
4. Paula Mariani — Design Leadership
https://vimeo.com/453011944
5. Яна Кулигина — Enterprise UX. Когда твой пользователь – бизнес
https://vimeo.com/408665464
6. Valentina Salvi — Service Design for Social Innovation in Uganda
https://vimeo.com/453011914
7. Brock Dubbels — The role of the mobile app in the new physical market place
https://vimeo.com/408665329
8. Anna Bek — The ugly UX duckling
https://vimeo.com/453011996
9. Анастасия Хапалова — Антиманипуляция. Как убедиться, что вы задаете правильные вопросы
https://vimeo.com/453012096
10. Шейла Шейх, Кирилл Улитин — Как мы заново изобретали интерфейс редактора документов
https://vimeo.com/453011897
11. Антон Дуканич — Матрица компетенций для дизайн-команды
https://vimeo.com/453011836
12. Анна Кануникова — Научный подход к проектированию
https://vimeo.com/408665597
13. Татьяна Фокина — Пишем для тех, кто плохо знает язык
https://vimeo.com/408665779
14. Дмитрий Сергутов — Платформа мессенджера Авито как продукт
https://vimeo.com/324745834
15. Олег Бухтияр — Путь к персонализации контента
https://vimeo.com/453012009
16. Борис Юшенков — Урбанистика и UX
https://vimeo.com/453011818
17. Ольга Ржанова — Что делать, если UX-исследователей мало, а вопросов и гипотез много
https://vimeo.com/453011864
— Все видео в одном месте: http://0x1.tv/Category:ProfsoUX-2020
— Альбом в ВК: https://vk.com/videos-50773057?section=album_40
1. Lutz Schmitt — Blank Screens and Muse’s Kisses
https://vimeo.com/453012022
2. Константин Гаврюков — Changing the future of E-commerce. Designing for people, not conversion
https://vimeo.com/453012044
3. Валерия Курмак — CJM как каргокульт
https://vimeo.com/453011954
4. Paula Mariani — Design Leadership
https://vimeo.com/453011944
5. Яна Кулигина — Enterprise UX. Когда твой пользователь – бизнес
https://vimeo.com/408665464
6. Valentina Salvi — Service Design for Social Innovation in Uganda
https://vimeo.com/453011914
7. Brock Dubbels — The role of the mobile app in the new physical market place
https://vimeo.com/408665329
8. Anna Bek — The ugly UX duckling
https://vimeo.com/453011996
9. Анастасия Хапалова — Антиманипуляция. Как убедиться, что вы задаете правильные вопросы
https://vimeo.com/453012096
10. Шейла Шейх, Кирилл Улитин — Как мы заново изобретали интерфейс редактора документов
https://vimeo.com/453011897
11. Антон Дуканич — Матрица компетенций для дизайн-команды
https://vimeo.com/453011836
12. Анна Кануникова — Научный подход к проектированию
https://vimeo.com/408665597
13. Татьяна Фокина — Пишем для тех, кто плохо знает язык
https://vimeo.com/408665779
14. Дмитрий Сергутов — Платформа мессенджера Авито как продукт
https://vimeo.com/324745834
15. Олег Бухтияр — Путь к персонализации контента
https://vimeo.com/453012009
16. Борис Юшенков — Урбанистика и UX
https://vimeo.com/453011818
17. Ольга Ржанова — Что делать, если UX-исследователей мало, а вопросов и гипотез много
https://vimeo.com/453011864
— Все видео в одном месте: http://0x1.tv/Category:ProfsoUX-2020
— Альбом в ВК: https://vk.com/videos-50773057?section=album_40
Vimeo
20200229AC Blank Screens and Muse’s Kisses
http://0x1.tv/20200229AC Blank Screens and Muse’s Kisses (Lutz Schmitt, ProfsoUX-2020) * Lutz Schmitt ------------- How to spark an inspiration? Where do…