Forwarded from Compound Designer (Alexander Karavaev)
Портфолио, часть 1. Общие советы
При отклике на вакансию вы посылаете три артефакта, по которым вас будут судить: портфолио, CV и профиль Linkedin. Все они должны рассказывать одну историю: количество лет опыта, компании в которых работали, основные проекты, набор скилов и так далее. Напишу отдельно о каждом из них, начну с портфолио.
Рассказ о портфолио будет в четырёх частях. Сегодня первая часть — общие советы.
Где делать
Где удобнее, там и делайте: тильда, ноушн, личный сайт, дизайнер на фрилансе. Главное чтобы портфолио было доступно онлайн и на него можно было легко сослаться. Хороший сайт производит впечатление, но главное чтобы портфолио хорошо рассказывало о вас — поэтому где можете, там и делайте. Задача — чтобы портфолио было доступно максимально быстро.
Первое портфолио я сделал в Ноушене и с ним меня позвали на несколько собесов. Моя подруга получила оффер от нидерландской компании с портфолио также в ноушене. А когда Ноушн с портфолио уже работал, я постепенно собрал сайт и переехал на aakaravaev.com.
Мобильная версия
Смартфоны есть у всех и ваше портфолио будут смотреть с них тоже. Важно, чтобы на мобилке портфолио выглядело хорошо. Ноушен мобайлфрендли из коробки. Остальные конструкторы сайтов наверное тоже (не проверял). Моё портфолио собрано на Бутстрапе и про мобилки знает. Яндекс.метрика на моём сайте показывает треть заходов с мобилки. Это огромное число и оставлять без внимания мобильную версию не нужно.
Проверьте, чтобы сайт в принципе был доступен
С отдельным доменом могут быть проблемы. Я сначала жил на российском хостинге и из-за рубежа он не был доступен. Я написал в поддержку и меня перевели на другой айпи. Потом были проблемы с доступностью из-за отсутствия SSL. Починил и это. Так что проверяйте доступность. Попросите друзей в разных странах открыть ваш сайт, попробуйте из России зайти на сайт под ВПН.
Английский язык
Если вы ищете работу на международном рынке, то все тексты у вас должны быть только на английском. Мне было сложно писать на английском сразу большие тексты. Поэтому я писал на русском и потом переводил с помощью Deepl. Когда портфолио будет готово, обязательно проверьте его на ошибки. Можно воспользоваться Граммарли или отправить кому-нибудь на вычитку.
Упражнение перед созданием портфолио
Перед тем как делать портфолио, сделайте хорошее упражнение. Найдите двадцать портфолио продуктовых дизайнеров, которые вам понравятся. Не ищите их по подборкам клёвых дизайнов, там уже всё выбрали за вас. Вам надо именно переработать руду, чтобы отыскать золото.
Я искал на Линкедине — вбил в поиске product designer, выбирал в настройках разные страны и открывал подряд сайты с портфолио со страниц дизайнеров.
Чтобы найти двадцать хороших портфолио я перебрал около сотни разных сайтов. В результате чувствуешь себя в шкуре эйчара — начинаешь замечать, насколько похожи сайты дизайнеров, читаешь сотню раз как дизайнеры со всего света пишут одни и те же клише, как не стоит писать о себе, как лучше сделать сайт.
Не открывайте за день слишком много страниц в Линкедине. Он чувствительный, может вас заблокировать несколько часов за подозрительную по его мнению деятельность.
При отклике на вакансию вы посылаете три артефакта, по которым вас будут судить: портфолио, CV и профиль Linkedin. Все они должны рассказывать одну историю: количество лет опыта, компании в которых работали, основные проекты, набор скилов и так далее. Напишу отдельно о каждом из них, начну с портфолио.
Рассказ о портфолио будет в четырёх частях. Сегодня первая часть — общие советы.
Где делать
Где удобнее, там и делайте: тильда, ноушн, личный сайт, дизайнер на фрилансе. Главное чтобы портфолио было доступно онлайн и на него можно было легко сослаться. Хороший сайт производит впечатление, но главное чтобы портфолио хорошо рассказывало о вас — поэтому где можете, там и делайте. Задача — чтобы портфолио было доступно максимально быстро.
Первое портфолио я сделал в Ноушене и с ним меня позвали на несколько собесов. Моя подруга получила оффер от нидерландской компании с портфолио также в ноушене. А когда Ноушн с портфолио уже работал, я постепенно собрал сайт и переехал на aakaravaev.com.
Мобильная версия
Смартфоны есть у всех и ваше портфолио будут смотреть с них тоже. Важно, чтобы на мобилке портфолио выглядело хорошо. Ноушен мобайлфрендли из коробки. Остальные конструкторы сайтов наверное тоже (не проверял). Моё портфолио собрано на Бутстрапе и про мобилки знает. Яндекс.метрика на моём сайте показывает треть заходов с мобилки. Это огромное число и оставлять без внимания мобильную версию не нужно.
Проверьте, чтобы сайт в принципе был доступен
С отдельным доменом могут быть проблемы. Я сначала жил на российском хостинге и из-за рубежа он не был доступен. Я написал в поддержку и меня перевели на другой айпи. Потом были проблемы с доступностью из-за отсутствия SSL. Починил и это. Так что проверяйте доступность. Попросите друзей в разных странах открыть ваш сайт, попробуйте из России зайти на сайт под ВПН.
Английский язык
Если вы ищете работу на международном рынке, то все тексты у вас должны быть только на английском. Мне было сложно писать на английском сразу большие тексты. Поэтому я писал на русском и потом переводил с помощью Deepl. Когда портфолио будет готово, обязательно проверьте его на ошибки. Можно воспользоваться Граммарли или отправить кому-нибудь на вычитку.
Упражнение перед созданием портфолио
Перед тем как делать портфолио, сделайте хорошее упражнение. Найдите двадцать портфолио продуктовых дизайнеров, которые вам понравятся. Не ищите их по подборкам клёвых дизайнов, там уже всё выбрали за вас. Вам надо именно переработать руду, чтобы отыскать золото.
Я искал на Линкедине — вбил в поиске product designer, выбирал в настройках разные страны и открывал подряд сайты с портфолио со страниц дизайнеров.
Чтобы найти двадцать хороших портфолио я перебрал около сотни разных сайтов. В результате чувствуешь себя в шкуре эйчара — начинаешь замечать, насколько похожи сайты дизайнеров, читаешь сотню раз как дизайнеры со всего света пишут одни и те же клише, как не стоит писать о себе, как лучше сделать сайт.
Не открывайте за день слишком много страниц в Линкедине. Он чувствительный, может вас заблокировать несколько часов за подозрительную по его мнению деятельность.
👍110
Владислава Епифанова написала о настройке каналов сбора обратной связи от пользователей.
— ОС помогает узнавать о пользовательских проблемах и быстро исправлять недостатки и находить идеи для улучшения продукта;
— Один из каналов — опросы в сервисе;
— Полезными оказались точечные опросы после релизов для определённых сценариев. Когда задача переходит в разработку, на встрече с проектировщиком и аналитиком можно узнать, какие есть сомнения, что хотелось бы узнать о пользователях или сценарии, и решить, нужен ли опрос, выбрать место для размещения в сценарии и так далее. Опрос позволяет узнать о недовольстве и быстро исправить замечания;
— В техподдержку приходит много ОС, поэтому работу с ней надо автоматизировать. Полезные отчёты: 1) Топ знаний по количеству обращений за месяц и их общее количество; 2) Общая сводка по всем знаниям;
— Важны аномалии в конкретном месяце и динамика знаний, попадающих в топ-5 обращений. Их можно сопоставлять с релизами. Из этого вырастают задачи на исследования;
— Комментарии специалистов техподдержки были расплывчатыми, тяжело было понимать проблемы. Добавили обязательное поле «Описание проблемы» для четырёх знаний, данные которых больше всего интересовали;
— Также, чтобы конкретизировать ОС, пришлось доработать анкету, которую заполняли в отделе активации (работают с теми, кто недоволен сервисом или купил, но не пользуется) при общении с клиентами;
— ОС от отдела продаж решили добавлять в виде инцидентов, с которыми работают специалисты техподдержки. Оттуда она попадает в беклог или напрямую команде (если доработка срочная);
— При этом описали критерии, которые обязательно надо указывать: данные клиента и чек за год, описание задачи или проблемы, как сейчас справляется с проблемой, как часто с ней сталкивается и так далее. Что-то может указать специалист по продажам, что-то — техподдержки;
— Этот канал обратной связи сейчас один из самых эффективных;
— Лучше не браться за всё разом, а идти поэтапно;
— Пробуйте разные каналы ОС для своего продукта. Универсальных решений нет.
#research #feedback
— ОС помогает узнавать о пользовательских проблемах и быстро исправлять недостатки и находить идеи для улучшения продукта;
— Один из каналов — опросы в сервисе;
— Полезными оказались точечные опросы после релизов для определённых сценариев. Когда задача переходит в разработку, на встрече с проектировщиком и аналитиком можно узнать, какие есть сомнения, что хотелось бы узнать о пользователях или сценарии, и решить, нужен ли опрос, выбрать место для размещения в сценарии и так далее. Опрос позволяет узнать о недовольстве и быстро исправить замечания;
— В техподдержку приходит много ОС, поэтому работу с ней надо автоматизировать. Полезные отчёты: 1) Топ знаний по количеству обращений за месяц и их общее количество; 2) Общая сводка по всем знаниям;
— Важны аномалии в конкретном месяце и динамика знаний, попадающих в топ-5 обращений. Их можно сопоставлять с релизами. Из этого вырастают задачи на исследования;
— Комментарии специалистов техподдержки были расплывчатыми, тяжело было понимать проблемы. Добавили обязательное поле «Описание проблемы» для четырёх знаний, данные которых больше всего интересовали;
— Также, чтобы конкретизировать ОС, пришлось доработать анкету, которую заполняли в отделе активации (работают с теми, кто недоволен сервисом или купил, но не пользуется) при общении с клиентами;
— ОС от отдела продаж решили добавлять в виде инцидентов, с которыми работают специалисты техподдержки. Оттуда она попадает в беклог или напрямую команде (если доработка срочная);
— При этом описали критерии, которые обязательно надо указывать: данные клиента и чек за год, описание задачи или проблемы, как сейчас справляется с проблемой, как часто с ней сталкивается и так далее. Что-то может указать специалист по продажам, что-то — техподдержки;
— Этот канал обратной связи сейчас один из самых эффективных;
— Лучше не браться за всё разом, а идти поэтапно;
— Пробуйте разные каналы ОС для своего продукта. Универсальных решений нет.
#research #feedback
Medium
Опыт настройки каналов сбора обратной связи (ОС) от пользователей
Меня зовут Владислава, я — исследователь в Контуре и работаю с несколькими продуктами в направлении недвижимости.
👍16
Екатерина Бессчётнова написала о подготовке прототипа для пользовательского тестирования.
— Прототип строится вокруг сценария тестирования — вопросов и заданий, предлагаемых респондентам;
— Задания следуют из гипотез. Гипотеза: при подборе товара людям неудобно использовать фильтр по цене. Задания: подберите товар Х удобным способом; подберите товар Х не дороже 10 рублей;
— Продумайте точки входа в тестируемый сценарий, чтобы он не начинался для пользователя внезапно;
— Отобразите все граничные случаи, с которыми пользователь может столкнуться, например, сообщение об ошибке, если заполнены не все поля. Страницу с 404-й ошибкой добавлять не надо;
— Добавьте максимум путей решения задачи, чтобы увидеть, куда пользователи на самом деле пойдут, и сравнить эффективность главного и второстепенного пути;
— Добавьте ошибочные пути, чтобы не было гарантии, что все респонденты выполнят задания. Так можно узнать, когда они заметят ошибку и как будут её исправлять. Активны должны быть не все развилки, а только вызывающие сомнения;
— Проработайте не только линейный путь вперёд по сценарию, но и способы вернуться назад;
— Чем ближе прототип к финальному продукту и реалистичнее взаимодействие с элементами интерфейса, тем лучше: визуальные акценты, реалистичный текст и релевантный контент, соответствие тону голоса и так далее;
— Если пользователи должны вводить данные, поля должны быть активны и не заполнены. Если это не прототип в Axure, поля можно заполнять по нажатию. Проверьте, что контент адекватен выполняемому заданию;
— Скройте отображение кликабельных областей и, насколько возможно, служебный интерфейс прототипа;
— Некликабельные элементы, с которыми предположительно могут взаимодействовать респонденты, должны реагировать на наведение курсора и, например, приводить к изменению курсора;
— Учитывайте разрешение устройства, на котором будет проходить тестирование;
— Перед тестированием на респондентах, проверьте прототип внутри команды.
#prototype #user_testing
— Прототип строится вокруг сценария тестирования — вопросов и заданий, предлагаемых респондентам;
— Задания следуют из гипотез. Гипотеза: при подборе товара людям неудобно использовать фильтр по цене. Задания: подберите товар Х удобным способом; подберите товар Х не дороже 10 рублей;
— Продумайте точки входа в тестируемый сценарий, чтобы он не начинался для пользователя внезапно;
— Отобразите все граничные случаи, с которыми пользователь может столкнуться, например, сообщение об ошибке, если заполнены не все поля. Страницу с 404-й ошибкой добавлять не надо;
— Добавьте максимум путей решения задачи, чтобы увидеть, куда пользователи на самом деле пойдут, и сравнить эффективность главного и второстепенного пути;
— Добавьте ошибочные пути, чтобы не было гарантии, что все респонденты выполнят задания. Так можно узнать, когда они заметят ошибку и как будут её исправлять. Активны должны быть не все развилки, а только вызывающие сомнения;
— Проработайте не только линейный путь вперёд по сценарию, но и способы вернуться назад;
— Чем ближе прототип к финальному продукту и реалистичнее взаимодействие с элементами интерфейса, тем лучше: визуальные акценты, реалистичный текст и релевантный контент, соответствие тону голоса и так далее;
— Если пользователи должны вводить данные, поля должны быть активны и не заполнены. Если это не прототип в Axure, поля можно заполнять по нажатию. Проверьте, что контент адекватен выполняемому заданию;
— Скройте отображение кликабельных областей и, насколько возможно, служебный интерфейс прототипа;
— Некликабельные элементы, с которыми предположительно могут взаимодействовать респонденты, должны реагировать на наведение курсора и, например, приводить к изменению курсора;
— Учитывайте разрешение устройства, на котором будет проходить тестирование;
— Перед тестированием на респондентах, проверьте прототип внутри команды.
#prototype #user_testing
Хабр
Чеклист для прототипов
Если вы когда-нибудь занимались тестированием прототипов на респондентах, то наверняка замечали, что люди подсознательно сразу воспринимают прототип как готовый продукт и не «делают скидку» на все его...
👍34
Анна Дегтева написала о проектировании голосового помощника.
— 2 типа запросов: сервисный и поболтать. Важно их не перепутать: представьте, вы хотите включить свет, а голосовой помощник начинает шутить;
— Если она вас не понял, задача сводится к «поболтать» — сгладить коммуникативный провал и рассказать, как избежать его в будущем;
— В 1950-м Алан Тьюринг предположил, что в 2000-м компьютер сможет 5 минут выдавать себя за человека в разговоре с 30% респондентов;
— Это смог чатбот Eugene Goostman, у которого была удачно выбранная личность: 12-летний мальчик из Одессы. Когда диалог на английском, иностранец и ребёнок может ошибаться, чего-то не знать и не понимать;
— Избежать ошибок нельзя, но можно сделать так, чтобы пользователи чаще их прощали;
— Имитация некоторой свободы воли превращает диалогового агента в личность: «Я с ней стал заигрывать, а она меня послала!»;
— Чтобы человек поверил в имитацию связного диалога, нужны: раппорт, эмоциональная поддержка («Ты великолепен!»), совместная деятельность (вербальные игры);
— Раппорт — ощущение, что вы на одной волне. Можно показать, что вы принадлежите одной культуре: читали одни книжки и так далее;
— Как рассказать о характере голосового помощника, когда никто не спрашивает? Обычно легенду зашивают в группу вопросов «Расскажи о себе» (сколько тебе лет, что любишь), но люди редко задают такие вопросы. Характер можно раскрыть при обработке непонимания, агрессии и троллинга, при эмоциональной поддержке;
— Не думайте, что интуитивно понимаете, что такое живая беседа. Поможет социолингвистика, антропология, психология общения;
— Вечерняя фраза «Уже так поздно, ляг, поспи!» от голосового устройства для взрослого — проявление заботы, для ребёнка — повод для обиды;
— При тестировании на детях учтите, что они думают дольше, чем вы заложили на ожидание ответа;
— Хорошо показал себя визуальный сигнал о состоянии системы: устройство ждёт ответа, обрабатывает запрос, что-то пошло не так. Дети за 15 минут научились эти сигналы учитывать: «Нет-нет, сейчас он слушает»;
— Тестировать диалоги лучше в голосовом, а не текстовом режиме, так как время ожидания становится критически важным, и его надо подгонять.
#voice #user_testing
— 2 типа запросов: сервисный и поболтать. Важно их не перепутать: представьте, вы хотите включить свет, а голосовой помощник начинает шутить;
— Если она вас не понял, задача сводится к «поболтать» — сгладить коммуникативный провал и рассказать, как избежать его в будущем;
— В 1950-м Алан Тьюринг предположил, что в 2000-м компьютер сможет 5 минут выдавать себя за человека в разговоре с 30% респондентов;
— Это смог чатбот Eugene Goostman, у которого была удачно выбранная личность: 12-летний мальчик из Одессы. Когда диалог на английском, иностранец и ребёнок может ошибаться, чего-то не знать и не понимать;
— Избежать ошибок нельзя, но можно сделать так, чтобы пользователи чаще их прощали;
— Имитация некоторой свободы воли превращает диалогового агента в личность: «Я с ней стал заигрывать, а она меня послала!»;
— Чтобы человек поверил в имитацию связного диалога, нужны: раппорт, эмоциональная поддержка («Ты великолепен!»), совместная деятельность (вербальные игры);
— Раппорт — ощущение, что вы на одной волне. Можно показать, что вы принадлежите одной культуре: читали одни книжки и так далее;
— Как рассказать о характере голосового помощника, когда никто не спрашивает? Обычно легенду зашивают в группу вопросов «Расскажи о себе» (сколько тебе лет, что любишь), но люди редко задают такие вопросы. Характер можно раскрыть при обработке непонимания, агрессии и троллинга, при эмоциональной поддержке;
— Не думайте, что интуитивно понимаете, что такое живая беседа. Поможет социолингвистика, антропология, психология общения;
— Вечерняя фраза «Уже так поздно, ляг, поспи!» от голосового устройства для взрослого — проявление заботы, для ребёнка — повод для обиды;
— При тестировании на детях учтите, что они думают дольше, чем вы заложили на ожидание ответа;
— Хорошо показал себя визуальный сигнал о состоянии системы: устройство ждёт ответа, обрабатывает запрос, что-то пошло не так. Дети за 15 минут научились эти сигналы учитывать: «Нет-нет, сейчас он слушает»;
— Тестировать диалоги лучше в голосовом, а не текстовом режиме, так как время ожидания становится критически важным, и его надо подгонять.
#voice #user_testing
Хабр
Как протестировать культурный код, или UX-тестирование детского голосового помощника
Привет, Хабр! Меня зовут Анна Дегтева, я — лингвист и антрополог. Почти 20 лет провела на кафедре математической лингвистики СПбГУ, из которых 15 преподавала. Начала заниматься разработкой голосовых...
👍19
В ITpelag написали для начинающих о полях ввода и формах.
— У поля должна быть подпись. В ней указывайте, что должно быть введено («Имя», а не «Введите имя»). Без двоеточия;
— Не размещайте подпись в плейсхолдере — так пользователь не сможет перепроверить правильность заполнения полей в большой форме;
— В плейсхолдере можно показать формат или пример вводимых данных;
— В поле можно расположить контролы, помогающие его заполнить: сканирование из QR-кода, скрытие и отображение пароля, голосовой ввод;
— Если поле часто очищают, предусмотрите контрол его очистки;
— Ширина поля должна соответствовать вводимым данным — так проще понять, что надо ввести, и убедиться, что поле заполнено верно;
— Маски ввода помогают не ошибиться, например, в количестве необходимых символов;
— Отмечайте необязательные поля. Обычно (если форма спроектирована хорошо) необязательных полей меньше, чем обязательных;
— Проверяйте поле на корректность после его заполнения — фокус ушёл с поля или пользователь нажал на кнопку отправки формы;
— Поля большой формы делите на логические группы или даже на отдельные шаги — чтобы не пугать пользователей её монолитностью или количеством полей.
#input #form
— У поля должна быть подпись. В ней указывайте, что должно быть введено («Имя», а не «Введите имя»). Без двоеточия;
— Не размещайте подпись в плейсхолдере — так пользователь не сможет перепроверить правильность заполнения полей в большой форме;
— В плейсхолдере можно показать формат или пример вводимых данных;
— В поле можно расположить контролы, помогающие его заполнить: сканирование из QR-кода, скрытие и отображение пароля, голосовой ввод;
— Если поле часто очищают, предусмотрите контрол его очистки;
— Ширина поля должна соответствовать вводимым данным — так проще понять, что надо ввести, и убедиться, что поле заполнено верно;
— Маски ввода помогают не ошибиться, например, в количестве необходимых символов;
— Отмечайте необязательные поля. Обычно (если форма спроектирована хорошо) необязательных полей меньше, чем обязательных;
— Проверяйте поле на корректность после его заполнения — фокус ушёл с поля или пользователь нажал на кнопку отправки формы;
— Поля большой формы делите на логические группы или даже на отдельные шаги — чтобы не пугать пользователей её монолитностью или количеством полей.
#input #form
vc.ru
Универсальный UI/UX. Как не переучивать посетителей пользоваться вашим сайтом Часть 2. Инпуты и Формы — Дизайн на vc.ru
В первой части нашей статьи мы уже рассказали о том, что такое интуитивно понятный интерфейс и о некоторых базовых UI-элементах. В этой статье мы расскажем о дизайн-элементах, которые помогают получить обратную связь от пользователей. Если вы не читали первую…
👍27👎2❤1🙏1
В форме заполнены не все поля — кнопка отправки формы должна быть…
Anonymous Poll
46%
Активной (Active, Enabled)
54%
Заблокированной (Disabled)
👍13👎8
Ким Салазар написала о возможности выбрать модель при покупке одежды и косметики.
— Покупатели обращают внимание, если товары демонстрируют модели разных размеров, возрастов и рас. Приятно видеть людей, похожих на них и проще определиться с выбором. Так магазин показывает, что ориентируется на таких клиентов;
— Дайте возможность выбрать модель (например, по размеру и росту). Одежда сидит по-разному в зависимости от типа фигуры, а восприятие макияжа зависит от тона кожи;
— Делать это можно на странице товара и странице категории;
— Объясняйте, к каким категориям товаров будет применяться выбранная модель, и сохраняйте выбор модели в этих категориях;
— В списке товаров и на странице товара отображайте их изображения с выбранной моделью;
— Учитывайте размеры товаров. Нет смысла показывать на стандартных моделях товары plus-size, если у них даже нет стандартных размеров (но это скорее к вопросу об использовании реальных фото);
— Используйте реальные фотографии. Затея не будет иметь смысла, если автоматически растягивать (сжимать) изображение товара под размер модели;
— Возможность выбора модели имеет смысл, если большинство товаров в категории (если не все) могут быть на ней отображены;
— Если это не так, можно просто показать фото с разными моделями на странице товара;
— Покупатели высоко ценят функцию выбора модели, сделайте её заметной.
In English. #ecommerce
— Покупатели обращают внимание, если товары демонстрируют модели разных размеров, возрастов и рас. Приятно видеть людей, похожих на них и проще определиться с выбором. Так магазин показывает, что ориентируется на таких клиентов;
— Дайте возможность выбрать модель (например, по размеру и росту). Одежда сидит по-разному в зависимости от типа фигуры, а восприятие макияжа зависит от тона кожи;
— Делать это можно на странице товара и странице категории;
— Объясняйте, к каким категориям товаров будет применяться выбранная модель, и сохраняйте выбор модели в этих категориях;
— В списке товаров и на странице товара отображайте их изображения с выбранной моделью;
— Учитывайте размеры товаров. Нет смысла показывать на стандартных моделях товары plus-size, если у них даже нет стандартных размеров (но это скорее к вопросу об использовании реальных фото);
— Используйте реальные фотографии. Затея не будет иметь смысла, если автоматически растягивать (сжимать) изображение товара под размер модели;
— Возможность выбора модели имеет смысл, если большинство товаров в категории (если не все) могут быть на ней отображены;
— Если это не так, можно просто показать фото с разными моделями на странице товара;
— Покупатели высоко ценят функцию выбора модели, сделайте её заметной.
In English. #ecommerce
www.uprock.ru
Модели имеют значение: почему стоит использовать изображения разных людей на сайтах электронной коммерции
Много лет интернет-магазины использовали для демонстрации товаров исключительно фотографии идеальных моделей. Однако большинство покупателей не ассоциирует себя с ними, что не только порождает комплексы, но и мешает принимать обоснованные решения о покупке.
👍30👎2❤1
Добавить ещё реакций в UX Notes кроме лайка и дизлайка?
Anonymous Poll
38%
Да, мне этого не хватает, чтобы выразить своё отношение
29%
Нет, так будет непонятно, хорошая статья или плохая
33%
Это ложная дихотомия
👍20👎14
Андрей Маркелов написал о диаграммах рассеяния.
— На английском их называют Scatter Plot. Они показывают зависимость двух параметров. Например, на горизонтальной оси — размер зарплаты, на вертикальной — уровень счастья, а каждая точка на диаграмме — человек с конкретным размером зарплаты и уровнем счастья;
— Кроме положения на осях у точек могут быть визуальные отличия: цвет, форма и размер фигуры. Цветом можно показать пол человека, размером вес, а формой — семейное положение, что позволит увидеть связь, например, между уровнем зарплаты и весом человека;
— Если используется один цвет, а плотность расположения фигур очень высокая, их можно наложить в режиме смешивания Multiply (свойство есть в CSS). Диаграмма не будет блеклой и позволит оценить плотность данных;
— Иногда показывают «среднюю линию» — линию, проходящую максимально близко ко всем точкам в среднем. Она может быть не прямой;
— На диаграмме можно показать несколько наборов данных со своими средними линиями;
— В интерактивном формате легенду можно поместить в верхний левый угол и дать возможность скрывать отдельные наборы данных;
— Чтобы показать, какой точка прошла путь, можно отобразить на графике её хвост с временными отметками. Чтобы не загромождать, график движения можно показывать под диаграммой по нажатию на конкретную точку;
— Иногда на диаграмме отображают тысячи точек. Тогда в иллюстративных целях можно нанести области плотности, похожие на тепловые карты;
— Бывает, что конкретные точки менее важны, чем общее понимание плотности их распределения. Тогда точки (фигуры) можно заменить на ступенчатый градиент, показывающий плотность фигур в разных областях диаграммы.
#data_visualization
— На английском их называют Scatter Plot. Они показывают зависимость двух параметров. Например, на горизонтальной оси — размер зарплаты, на вертикальной — уровень счастья, а каждая точка на диаграмме — человек с конкретным размером зарплаты и уровнем счастья;
— Кроме положения на осях у точек могут быть визуальные отличия: цвет, форма и размер фигуры. Цветом можно показать пол человека, размером вес, а формой — семейное положение, что позволит увидеть связь, например, между уровнем зарплаты и весом человека;
— Если используется один цвет, а плотность расположения фигур очень высокая, их можно наложить в режиме смешивания Multiply (свойство есть в CSS). Диаграмма не будет блеклой и позволит оценить плотность данных;
— Иногда показывают «среднюю линию» — линию, проходящую максимально близко ко всем точкам в среднем. Она может быть не прямой;
— На диаграмме можно показать несколько наборов данных со своими средними линиями;
— В интерактивном формате легенду можно поместить в верхний левый угол и дать возможность скрывать отдельные наборы данных;
— Чтобы показать, какой точка прошла путь, можно отобразить на графике её хвост с временными отметками. Чтобы не загромождать, график движения можно показывать под диаграммой по нажатию на конкретную точку;
— Иногда на диаграмме отображают тысячи точек. Тогда в иллюстративных целях можно нанести области плотности, похожие на тепловые карты;
— Бывает, что конкретные точки менее важны, чем общее понимание плотности их распределения. Тогда точки (фигуры) можно заменить на ступенчатый градиент, показывающий плотность фигур в разных областях диаграммы.
#data_visualization
👍17❤1🤡1
Таня из Everest написала о формах поиска на сайтах клиник.
— Поле поиска заметнее просто иконки;
— Если по нажатию отображать модальное окно поиска, внимание пользователя будет сосредоточено на ключевом действии и появится место для популярных запросов и плейсхолдера, который подскажет, что именно можно искать («Ищите врачей, услуги, статьи и другие материалы»);
— Популярные запросы лучше разделить на категории: анализы, процедуры, приём врача;
— Стоит отображать кнопку «Найти», так как многие привыкли на неё нажимать. Но и нажатие на Enter тоже должно работать;
— После ввода символов в поле стоит показывать подсказки. Удобен переключатель с разделами (врачи, услуги, новости), в которых найдены подходящие страницы, — можно конкретизировать список подсказок;
— Или хотя бы указать категорию конкретной подсказки;
— Стоит выделять, в чём конкретная подсказка совпадает с запросом, чтобы было понятно, почему она отображается;
— На странице с результатами поиска количество найденного помогает решить, готов ли пользователь к такому объёму информации или стоит уточнить запрос;
— Результаты поиска надо группировать по категориям;
— С помощью списка подходящих под запрос категорий можно фильтровать результаты поиска (по умолчанию стоит выбрать категорию, которую выбрал пользователь в модальном окне поиска) или быстро перемещаться между блоками на странице с результатами;
— Полезны способы уточнить запрос: чекбокс «По полису ДМС», по расположению отделения или врача.
#form #search #health
— Поле поиска заметнее просто иконки;
— Если по нажатию отображать модальное окно поиска, внимание пользователя будет сосредоточено на ключевом действии и появится место для популярных запросов и плейсхолдера, который подскажет, что именно можно искать («Ищите врачей, услуги, статьи и другие материалы»);
— Популярные запросы лучше разделить на категории: анализы, процедуры, приём врача;
— Стоит отображать кнопку «Найти», так как многие привыкли на неё нажимать. Но и нажатие на Enter тоже должно работать;
— После ввода символов в поле стоит показывать подсказки. Удобен переключатель с разделами (врачи, услуги, новости), в которых найдены подходящие страницы, — можно конкретизировать список подсказок;
— Или хотя бы указать категорию конкретной подсказки;
— Стоит выделять, в чём конкретная подсказка совпадает с запросом, чтобы было понятно, почему она отображается;
— На странице с результатами поиска количество найденного помогает решить, готов ли пользователь к такому объёму информации или стоит уточнить запрос;
— Результаты поиска надо группировать по категориям;
— С помощью списка подходящих под запрос категорий можно фильтровать результаты поиска (по умолчанию стоит выбрать категорию, которую выбрал пользователь в модальном окне поиска) или быстро перемещаться между блоками на странице с результатами;
— Полезны способы уточнить запрос: чекбокс «По полису ДМС», по расположению отделения или врача.
#form #search #health
research.everest.cx
#15 UX форм поиска на сайтах российских клиник
В исследовании рассмотрели, как реализован функционал поиска на сайтах клиник. Разобрали, какие решения помогают пользователям решать свои задачи, а какие могут мешать достижению цели.
💊27👍10👎1🐳1
Вадик Михалев написал, как минимизировать трудозатраты при найме дизайнера в пока ещё бедный стартап.
— Опишите вакансию максимально живо и интересно, добавьте сюжета, личной истории и открыто поделитесь текущими показателями. В статье есть ссылка на пример классного описания;
— Напишите, что ожидаете увидеть в отклике (поможет отсеять тех, кто не читал текст вакансии);
— Если откликов много, снижайте ожидания соискателей, чтобы оставались самые мотивированные. Например, можно переслать видео с рассказом о текущей дизайн-системе, сложности и масштабе проекта;
— Так как стартап ещё бедный, на входе можно спрашивать об ожидаемом уровне зарплаты и отсеивать слишком дорогих кандидатов;
— Чтобы экономить время, рассказ об особенностях работы в компании тоже можно записать на видео. Это видео также поможет управлять ожиданиями;
— Выделите слоты для интервью и дайте возможность соискателям без дополнительного согласования выбрать удобное время. С этим поможет Calendly;
— Созванивайтесь только с теми, кто выполнил тестовое на нужном уровне и показал в нём свой подход к работе. Спорная рекомендация: в этом случае основатели стартапа экономят своё время, но тратят много времени соискателей. После 35 сделанных тестовых наняли одного. И под вопросом, сколько времени надо для адекватной оценки всех тестовых.
Ставьте 🖕 если не делаете тестовые и 🧑💻 если делаете. #hiring
— Опишите вакансию максимально живо и интересно, добавьте сюжета, личной истории и открыто поделитесь текущими показателями. В статье есть ссылка на пример классного описания;
— Напишите, что ожидаете увидеть в отклике (поможет отсеять тех, кто не читал текст вакансии);
— Если откликов много, снижайте ожидания соискателей, чтобы оставались самые мотивированные. Например, можно переслать видео с рассказом о текущей дизайн-системе, сложности и масштабе проекта;
— Так как стартап ещё бедный, на входе можно спрашивать об ожидаемом уровне зарплаты и отсеивать слишком дорогих кандидатов;
— Чтобы экономить время, рассказ об особенностях работы в компании тоже можно записать на видео. Это видео также поможет управлять ожиданиями;
— Выделите слоты для интервью и дайте возможность соискателям без дополнительного согласования выбрать удобное время. С этим поможет Calendly;
— Созванивайтесь только с теми, кто выполнил тестовое на нужном уровне и показал в нём свой подход к работе. Спорная рекомендация: в этом случае основатели стартапа экономят своё время, но тратят много времени соискателей. После 35 сделанных тестовых наняли одного. И под вопросом, сколько времени надо для адекватной оценки всех тестовых.
Ставьте 🖕 если не делаете тестовые и 🧑💻 если делаете. #hiring
vc.ru
Гайд: как асинхронно нанять продакт-дизайнера в стартап без бюджета за 10 дней и не поехать кукухой — Вадик Михалев на vc.ru
Я — Вадик, ко-фаундер Orchestra. Рассказываю, как мы быстро наняли себе в команду офигенного дизайнера. Без рекрутёра, заоблачной зарплаты, холодных рассылок, бардака с письмами и телеграм-чатами; собрали 80+ откликов и вложили только ~8 часов в собеседования…
👍13🖕8👨💻6🤔4❤1👎1
Forwarded from Изюм
This media is not supported in your browser
VIEW IN TELEGRAM
Помните жест для выбора сообщений? Оказывается, во всех системных списках можно водить двумя пальцами для выделения элементов.
😱54👍21🔥4
В Heads and Hands написали о законах UX.
— Закон Парето. Фокусируйте внимание на 20% функций приложения, которые закрывают потребности 80% пользователей. Например, сделайте их легко доступными, когда пользователь держит телефон одной рукой и нажимает большим пальцем;
— Закон Фиттса. Элементы, на которые пользователь может нажимать в рамках одного сценария, располагайте рядом. Например, поле поиска, фильтры и сортировки. Так после ввода поискового запроса будет проще перейти к уточнению его результатов;
— Закон Якоба. «Пользователи проводят большую часть времени на других сайтах, а не на вашем. Поэтому они хотят, чтобы ваш сайт работал так же». Используйте привычные шаблоны взаимодействия, свойственные продуктам, похожим на ваш;
— Закон Хика. Сокращайте количество вариантов для выбора, группируйте, выделяйте основные;
— Эффект Зейгарник. Разделяйте большие задачи на несколько маленьких. Сложнее бросить то, что уже частично сделано;
— Модель Кано. Делите фичи на базовые (определяют жизнеспособность продукта), желаемые и восхищающие (определяют его конкурентоспособность).
#laws
— Закон Парето. Фокусируйте внимание на 20% функций приложения, которые закрывают потребности 80% пользователей. Например, сделайте их легко доступными, когда пользователь держит телефон одной рукой и нажимает большим пальцем;
— Закон Фиттса. Элементы, на которые пользователь может нажимать в рамках одного сценария, располагайте рядом. Например, поле поиска, фильтры и сортировки. Так после ввода поискового запроса будет проще перейти к уточнению его результатов;
— Закон Якоба. «Пользователи проводят большую часть времени на других сайтах, а не на вашем. Поэтому они хотят, чтобы ваш сайт работал так же». Используйте привычные шаблоны взаимодействия, свойственные продуктам, похожим на ваш;
— Закон Хика. Сокращайте количество вариантов для выбора, группируйте, выделяйте основные;
— Эффект Зейгарник. Разделяйте большие задачи на несколько маленьких. Сложнее бросить то, что уже частично сделано;
— Модель Кано. Делите фичи на базовые (определяют жизнеспособность продукта), желаемые и восхищающие (определяют его конкурентоспособность).
#laws
vc.ru
Как создавать интерфейсы, которые нравятся пользователям: 6 законов UX — Дизайн на vc.ru
Собрали основные законы и принципы, которые стоит учитывать при разработке интерфейсов.
👍67💩10❤7
Леви Ковач написал о мобильных формах.
— Если в раскрывающемся списке от 2 до 5 вариантов для выбора, лучше заменить его на Segmented Control. Так сделать выбор можно меньшим количеством нажатий;
— Если вариантов 2 и это, например, «Показать» и «Скрыть», можно заменить его на чекбокс или переключатель;
— Если варианты — это значения в рамках определённого диапазона, можно использовать ползунок;
— Если варианты — числовые значения и пользователи обычно не сильно меняют значения по умолчанию, подойдёт степпер. Меньше нажатий и ошибок;
— Иногда несколько раскрывающихся списков можно объединить в один. Например, выбор даты;
— Располагайте поля в одну колонку;
— Сообщения об ошибке при заполнении поля показывайте рядом с этим полем и показывайте по мере заполнения формы, не перечисляйте неправильно заполненные поля в конце или начале формы;
— Не повторяйте, что поле обязательно для заполнения. Старайтесь исключить из формы необязательные поля. Подписывайте необязательные поля, если такие всё-таки оказались в форме;
— Группируйте связанные поля.
In English. #form #mobile
— Если в раскрывающемся списке от 2 до 5 вариантов для выбора, лучше заменить его на Segmented Control. Так сделать выбор можно меньшим количеством нажатий;
— Если вариантов 2 и это, например, «Показать» и «Скрыть», можно заменить его на чекбокс или переключатель;
— Если варианты — это значения в рамках определённого диапазона, можно использовать ползунок;
— Если варианты — числовые значения и пользователи обычно не сильно меняют значения по умолчанию, подойдёт степпер. Меньше нажатий и ошибок;
— Иногда несколько раскрывающихся списков можно объединить в один. Например, выбор даты;
— Располагайте поля в одну колонку;
— Сообщения об ошибке при заполнении поля показывайте рядом с этим полем и показывайте по мере заполнения формы, не перечисляйте неправильно заполненные поля в конце или начале формы;
— Не повторяйте, что поле обязательно для заполнения. Старайтесь исключить из формы необязательные поля. Подписывайте необязательные поля, если такие всё-таки оказались в форме;
— Группируйте связанные поля.
In English. #form #mobile
Оди. О дизайне
Как делать хорошие мобильные формы ввода — Оди. О дизайне
Мы перевели статью компании Mobiscroll о том, как правильно проектировать формы ввода в мобильных интерфейсах. На сравнительных иллюстрированных примерах автор показывает, какие приёмы в дизайне помогут сделать такие формы ввода, чтобы пользователи могли…
👍28🔥4❤1
Forwarded from И тут он говорит:
Женя привет, мне твоя помощь нужна, посмотришь мой сайт резюме-портфолио? Я сейчас в поиске работы, много отказов по вакансиям, я не понимаю, почему, потому что обратную связь от эйчаров получить практически невозможно. Ищу работу продуктовым дизайнером, есть мысль, что отказы, потому что именно в продуктовых командах опыт нужен 3+ лет, а у меня и года нет. Если так, то как тогда быть? https://perfecti-ist.com
тэкс, ну всё просто оказалось
твоё портфолио никаким местом не говорит «продуктовый дизайнер»
оно говорит «дизайнер-изобретатель, который что-то там своё нахуевертил колонки какие-то блять чё чёёёёё ааааа закрыть»
это если поверхностно смотреть (как все и смотрят)
а если глянуть повнимательнее, то это то, что сейчас называется «UI»
и всякий графдизайн
я ровно месяц назад нанимал «продуктового дизайнера», посмотрел полсотни резюме, десятки портфолио, 5-6 собеседований мы провёли
короче, рассказываю
опыт в годах вообще не важен, не в этом проблема — довольно много дизайнеров с 5-7-10-летним опытом, они называют себя продуктовыми, потому что хотят деняк, но у них нет квалификации
а бывают ребята с опытом в 2-3 года, у которых квалификация есть
(но да, конечно же, не бывает с опытом до года)
Как выглядит портфолио продуктового дизайнера:
— это всегда ноушен, и в этом ноушене рассказы о проделанной работе; очень мало картинок, и это не очень-то крупные картинки, очень много жизы, страданий и фейлов
(биханс почти всегда означает, что там будут одни картинки, видимо, на бихансе не очень удобно рассказывать; там бывает пара абзацев текста для приличия, но это не то)
— любой проект начинается не с картинок, а с блоксхем, си-джей-эмов, исследований, с цветных стикеров всяких
— и заканчивается чем-то в духе «ни хуя не смогли внедрить, пидарасы, я уволился»; ну или «вот эту мааааленькую штучку за полгода внедрили, она заработала миллиард, но почему, никто так и не понял»
как стать продуктовым дизайнером — никто не знает
видимо, ты работаешь дизайнером интерфейсов, потом замечаешь в себе «аналитические наклонности» и «лидерские качества» (грубо говоря, тебя штырит полдня сидеть в экселе и гугл-аналитикс, а потом полдня рубиться со всеми, пытаясь что-то изменить в продукте)
и так в нескольких местах по году-полутора, на сколько хватит отчаянности
и тогда у тебя появляются сюжеты для вот этих рассказов в ноушене
и с ними ты устраиваешься в контору, которой вроде как именно такие ребята и нужны
и там всё по новой
тэкс, ну всё просто оказалось
твоё портфолио никаким местом не говорит «продуктовый дизайнер»
оно говорит «дизайнер-изобретатель, который что-то там своё нахуевертил колонки какие-то блять чё чёёёёё ааааа закрыть»
это если поверхностно смотреть (как все и смотрят)
а если глянуть повнимательнее, то это то, что сейчас называется «UI»
и всякий графдизайн
я ровно месяц назад нанимал «продуктового дизайнера», посмотрел полсотни резюме, десятки портфолио, 5-6 собеседований мы провёли
короче, рассказываю
опыт в годах вообще не важен, не в этом проблема — довольно много дизайнеров с 5-7-10-летним опытом, они называют себя продуктовыми, потому что хотят деняк, но у них нет квалификации
а бывают ребята с опытом в 2-3 года, у которых квалификация есть
(но да, конечно же, не бывает с опытом до года)
Как выглядит портфолио продуктового дизайнера:
— это всегда ноушен, и в этом ноушене рассказы о проделанной работе; очень мало картинок, и это не очень-то крупные картинки, очень много жизы, страданий и фейлов
(биханс почти всегда означает, что там будут одни картинки, видимо, на бихансе не очень удобно рассказывать; там бывает пара абзацев текста для приличия, но это не то)
— любой проект начинается не с картинок, а с блоксхем, си-джей-эмов, исследований, с цветных стикеров всяких
— и заканчивается чем-то в духе «ни хуя не смогли внедрить, пидарасы, я уволился»; ну или «вот эту мааааленькую штучку за полгода внедрили, она заработала миллиард, но почему, никто так и не понял»
как стать продуктовым дизайнером — никто не знает
видимо, ты работаешь дизайнером интерфейсов, потом замечаешь в себе «аналитические наклонности» и «лидерские качества» (грубо говоря, тебя штырит полдня сидеть в экселе и гугл-аналитикс, а потом полдня рубиться со всеми, пытаясь что-то изменить в продукте)
и так в нескольких местах по году-полутора, на сколько хватит отчаянности
и тогда у тебя появляются сюжеты для вот этих рассказов в ноушене
и с ними ты устраиваешься в контору, которой вроде как именно такие ребята и нужны
и там всё по новой
👍97😁38🔥19🍓8❤6💩1
Кинерет Ифра написала о пустых состояниях.
— 1. Пользователь не создал то, что должно отображаться на экране. Например, не добавил товаров в избранное;
— В заголовке напишите, чего он ещё не сделал: «Вы ещё не добавили ничего в избранное». В тексте добавьте мотивации: «Сохраните товар, который привлёк ваше внимание, чтобы вернуться к нему потом». Кнопка может вести на первый шаг в нужном направлении, например: «Посмотреть бестселлеры»;
— 2. Пользователь не сделал чего-то, что приводит к появлению здесь данных. Пустое состояние не сильно отличается от первого. В тексте стоит объяснить, как наполняется этот экран: «После того как пригласите пользователей, вы сможете отслеживать здесь их активность»;
— 3. Пользователь всё сделал, но для появления данных нужно время. Предложите вернуться позже и объясните, как работает система: «Нужны 24 часа после старта рекламной кампании, чтобы собрать достоверные данные»;
— 4. Пользователь всё удалил, и это часть рабочего процесса, например, пустой инбокс или список задач. Похоже на первый тип, но в этом случае стандартное пустое состояние будет выглядеть неуместно. Можно похвалить пользователя за продуктивность;
— 5. Содержимое экрана недоступно из-за выбранного тарифа. Кроме отображения кнопки перехода на нужный тариф (или начала бесплатного периода) стоит написать о ценности, как именно функция может быть полезна;
— 6. Ничего не найдено без фильтров. Возьмите ответственность на себя: «Мы не нашли то, чего вы искали». Предложите исправить или изменить введённый текст, покажите результаты поиска по похожим запросам, предложите расширенный поиск, предложите сообщить, когда появится то, чего пользователь искал;
— 7. Ничего не найдено с фильтрами. Предложите убрать некоторые фильтры, покажите то, что почти подходит, предложите сообщить, когда появится.
In English. #empty_state #writing
— 1. Пользователь не создал то, что должно отображаться на экране. Например, не добавил товаров в избранное;
— В заголовке напишите, чего он ещё не сделал: «Вы ещё не добавили ничего в избранное». В тексте добавьте мотивации: «Сохраните товар, который привлёк ваше внимание, чтобы вернуться к нему потом». Кнопка может вести на первый шаг в нужном направлении, например: «Посмотреть бестселлеры»;
— 2. Пользователь не сделал чего-то, что приводит к появлению здесь данных. Пустое состояние не сильно отличается от первого. В тексте стоит объяснить, как наполняется этот экран: «После того как пригласите пользователей, вы сможете отслеживать здесь их активность»;
— 3. Пользователь всё сделал, но для появления данных нужно время. Предложите вернуться позже и объясните, как работает система: «Нужны 24 часа после старта рекламной кампании, чтобы собрать достоверные данные»;
— 4. Пользователь всё удалил, и это часть рабочего процесса, например, пустой инбокс или список задач. Похоже на первый тип, но в этом случае стандартное пустое состояние будет выглядеть неуместно. Можно похвалить пользователя за продуктивность;
— 5. Содержимое экрана недоступно из-за выбранного тарифа. Кроме отображения кнопки перехода на нужный тариф (или начала бесплатного периода) стоит написать о ценности, как именно функция может быть полезна;
— 6. Ничего не найдено без фильтров. Возьмите ответственность на себя: «Мы не нашли то, чего вы искали». Предложите исправить или изменить введённый текст, покажите результаты поиска по похожим запросам, предложите расширенный поиск, предложите сообщить, когда появится то, чего пользователь искал;
— 7. Ничего не найдено с фильтрами. Предложите убрать некоторые фильтры, покажите то, что почти подходит, предложите сообщить, когда появится.
In English. #empty_state #writing
www.uprock.ru
Пустые состояния: 7 типов и как использовать каждый из них — читайте на UPROCK
Как пустые состояния улучшают опыт взаимодействия.. читайте полезные статьи о дизайне в блоге UPROCK
✍43👍23❤6
Николай написал о механиках сервисов знакомств, перспективах развития, особенностях поведения их пользователей и почему люди ими пользуются — статья на 53 минуты чтения 0_0
— Для сохранения отношений положительных эмоций должно быть больше, чем отрицательных. Надо минимизировать конфликт интересов. Некоторые особенности человека (в привычках, интересах) могут не нравиться другим людям, приводить к компромиссам;
— Разве любить друг друга — не главное? Статистика разводов показывает, что, видимо, нет;
— Для поиска идеальной пары сервис должен знать человека максимально подробно. Настройки предпочтений должны быть минимум 3-позиционными: нравится, могу терпеть, не могу терпеть. С возможностью задать компенсационное условие: могу терпеть увлечение рэпом, если человек разделяет мои литературные предпочтения;
— Проблема — астрологи, нумерологи и им подобные. Они добавляют лишние критерии выбора;
— Чем больше выборка, тем больше шанс найти идеал. Поиск через интернет — вполне рациональное решение. Но люди не любят рассказывать о себе. Плюс, интернет даёт анонимность, что влияет на поведение;
— У поиска 2 составляющих: ищем, помогаем себя найти — но всё упирается в заполнение анкеты. Кроме формализуемых критериев бывают специфические пожелания, которые попадают в поле «О себе». Часто там отражается предыдущий опыт общения через сервис;
— Обычно берут плату за размещение анкеты в специальных блоках («В центре внимания»), но они не всегда региональные, что плохо, и за поиск анкет по дополнительным параметрам;
— Автор рассказал и о других механиках монетизации;
— А также, почему пользователи часто ведут себя странно или неадекватно: просматривают анкеты, но не пишут (иногда это ограничения сервисов или анкета отбивает желание знакомиться), пишут странные вещи (иногда это лакмусовые бумажки, например, предложения переспать за деньги), отправляют интимные фото (своего рода сообщение-опенер, но есть и другие трактовки), грубят в ответ на «Привет, как дела?» (некоторые сервисы подталкивают к таким фразам, другие умеют предлагать темы для разговора), создают фейковые анкеты (проституция, мошенничество, месть, провокация своих половинок);
— Узкотематические сайты могут привлекать людей со специфическим настроем, но в итоге все анкеты попадают на общий сайт. Кто искал долгих отношений, оказывается на узкотематическом сайте с теми, кто ищет коротких отношений. Если человек зарегистрировался на нескольких таких сайтах, его анкета задваивается;
— Автор прошёлся по тёмным паттернам вроде платного доступа к результатам поиска после того, как человек зарегистрировался и потратил время на заполнение анкеты. Или отображения несуществующих на сайте фильтров (по национальности) для привлечения трафика из поисковых систем;
— И по мошенническим схемам (в том числе выгодным сервисам). Даже личное знакомство не исключает мошенничество;
— Чтобы сервис знакомств заработал, нужно много пользователей. Новый сервис с уникальной фишкой, но без существующей базы пользователей, скорее всего, не взлетит. VK Знакомства нагоняют пользователей из VK в рамках разных акций (за награды, как задания), что приводит к наводнению сервиса теми, кто в знакомствах не заинтересован.
Ставьте 🥱 если интересно, но 53 минуты — слишком много. #ugc
— Для сохранения отношений положительных эмоций должно быть больше, чем отрицательных. Надо минимизировать конфликт интересов. Некоторые особенности человека (в привычках, интересах) могут не нравиться другим людям, приводить к компромиссам;
— Разве любить друг друга — не главное? Статистика разводов показывает, что, видимо, нет;
— Для поиска идеальной пары сервис должен знать человека максимально подробно. Настройки предпочтений должны быть минимум 3-позиционными: нравится, могу терпеть, не могу терпеть. С возможностью задать компенсационное условие: могу терпеть увлечение рэпом, если человек разделяет мои литературные предпочтения;
— Проблема — астрологи, нумерологи и им подобные. Они добавляют лишние критерии выбора;
— Чем больше выборка, тем больше шанс найти идеал. Поиск через интернет — вполне рациональное решение. Но люди не любят рассказывать о себе. Плюс, интернет даёт анонимность, что влияет на поведение;
— У поиска 2 составляющих: ищем, помогаем себя найти — но всё упирается в заполнение анкеты. Кроме формализуемых критериев бывают специфические пожелания, которые попадают в поле «О себе». Часто там отражается предыдущий опыт общения через сервис;
— Обычно берут плату за размещение анкеты в специальных блоках («В центре внимания»), но они не всегда региональные, что плохо, и за поиск анкет по дополнительным параметрам;
— Автор рассказал и о других механиках монетизации;
— А также, почему пользователи часто ведут себя странно или неадекватно: просматривают анкеты, но не пишут (иногда это ограничения сервисов или анкета отбивает желание знакомиться), пишут странные вещи (иногда это лакмусовые бумажки, например, предложения переспать за деньги), отправляют интимные фото (своего рода сообщение-опенер, но есть и другие трактовки), грубят в ответ на «Привет, как дела?» (некоторые сервисы подталкивают к таким фразам, другие умеют предлагать темы для разговора), создают фейковые анкеты (проституция, мошенничество, месть, провокация своих половинок);
— Узкотематические сайты могут привлекать людей со специфическим настроем, но в итоге все анкеты попадают на общий сайт. Кто искал долгих отношений, оказывается на узкотематическом сайте с теми, кто ищет коротких отношений. Если человек зарегистрировался на нескольких таких сайтах, его анкета задваивается;
— Автор прошёлся по тёмным паттернам вроде платного доступа к результатам поиска после того, как человек зарегистрировался и потратил время на заполнение анкеты. Или отображения несуществующих на сайте фильтров (по национальности) для привлечения трафика из поисковых систем;
— И по мошенническим схемам (в том числе выгодным сервисам). Даже личное знакомство не исключает мошенничество;
— Чтобы сервис знакомств заработал, нужно много пользователей. Новый сервис с уникальной фишкой, но без существующей базы пользователей, скорее всего, не взлетит. VK Знакомства нагоняют пользователей из VK в рамках разных акций (за награды, как задания), что приводит к наводнению сервиса теми, кто в знакомствах не заинтересован.
Ставьте 🥱 если интересно, но 53 минуты — слишком много. #ugc
Хабр
Всё, что вы НЕ хотели бы знать о сервисах онлайн знакомств… [много букОв и иллюстраций + регулярно дополняется]
Компьютерные сети изменили мир и подарили нам возможность не выбирать «меньшее из зол» из ограниченного числа сложившихся по жизни контактов, а найти по-настоящему любимого человека, даже если он...
🥱32👍14❤1
Станислав Хрусталёв написал о быстрых действиях в iOS.
— Разместите в них полезные действия, часто совершаемые пользователями в приложении. Хорошие кандидаты — действия, для перехода к которым в приложении надо больше одного касания;
— Нет смысла размещать там переход на главный экран, который открывается при запуске приложения;
— Добавьте 4 действия (столько сейчас возможно) — кому-то из пользователей это упростит жизнь. Можно отслеживать использование быстрых действий и заменять непопулярные;
— Но не обновляйте их слишком часто и кардинально, чтобы не ломать привычки;
— Действия могут быть динамическими и зависеть от контекста и стадии пользовательского пути. Скрывайте нерелевантные действия. Например, «Открыть заказы» не имеет смысла, если пользователь ещё ничего не заказывал;
— Расскажите о быстрых действиях в онбординге. Не все пользователи iOS знакомы с этой функцией;
— Проверьте, что названия у действий есть, они краткие, не обрезаются, локализованы, форматированы единообразно, дают понять, что произойдёт. Сделать действие понятнее помогают подзаголовки;
— Если добавлять подзаголовки, то лучше для всех пунктов;
— Добавьте релевантные иконки. Они не должны дублироваться. Хорошо, если метафоры совпадают с иконками таких же действий в приложении;
— Сделайте толщину иконок и размер такими же, как у иконок системных действий;
— Для приложения магазина в быстрых действиях можно разместить: бонусная карта (и статус программы лояльности в подзаголовке), акции, новинки, избранное, список покупок, корзина, где мой заказ, штрихкод заказа (или данные для его получения), оценка заказа, промокод, магазины, авторизация.
#ecommerce #mobile
— Разместите в них полезные действия, часто совершаемые пользователями в приложении. Хорошие кандидаты — действия, для перехода к которым в приложении надо больше одного касания;
— Нет смысла размещать там переход на главный экран, который открывается при запуске приложения;
— Добавьте 4 действия (столько сейчас возможно) — кому-то из пользователей это упростит жизнь. Можно отслеживать использование быстрых действий и заменять непопулярные;
— Но не обновляйте их слишком часто и кардинально, чтобы не ломать привычки;
— Действия могут быть динамическими и зависеть от контекста и стадии пользовательского пути. Скрывайте нерелевантные действия. Например, «Открыть заказы» не имеет смысла, если пользователь ещё ничего не заказывал;
— Расскажите о быстрых действиях в онбординге. Не все пользователи iOS знакомы с этой функцией;
— Проверьте, что названия у действий есть, они краткие, не обрезаются, локализованы, форматированы единообразно, дают понять, что произойдёт. Сделать действие понятнее помогают подзаголовки;
— Если добавлять подзаголовки, то лучше для всех пунктов;
— Добавьте релевантные иконки. Они не должны дублироваться. Хорошо, если метафоры совпадают с иконками таких же действий в приложении;
— Сделайте толщину иконок и размер такими же, как у иконок системных действий;
— Для приложения магазина в быстрых действиях можно разместить: бонусная карта (и статус программы лояльности в подзаголовке), акции, новинки, избранное, список покупок, корзина, где мой заказ, штрихкод заказа (или данные для его получения), оценка заказа, промокод, магазины, авторизация.
#ecommerce #mobile
Hardclient
Проектируем быстрые действия в iOS: 58 гайдлайнов
Лучшие практики UX/UI мобильных приложений
👍16🍌3
Кирилл Шерстобитов написал о подготовке прототипа к тестированию.
— Определите, что вы хотите проверить с помощью прототипа;
— Чтобы увидеть проблемы и сформулировать гипотезы, часто проводят модерируемые тесты, для которых подходят даже недоработанные прототипы — модератор может смягчить связанные с ними негативные эффекты;
— Для проверки интерфейсных гипотез лучше подходят количественные методы (от 100 человек на тест). Здесь модератор уже не поможет, поэтому важны понятное задание и работоспособность прототипа (в том числе быстрая загрузка);
— Чтобы проверить навигацию на удобство и понятность, не обязательно делать прототип, можно провести First click test;
— Прототипом можно проверить сценарии поведения в интерфейсе, взаимодействие с интерактивными элементами;
— Разбивайте интерфейс на короткие сценарии под конкретные задачи. Так проще будет готовить прототип, и грузиться он будет быстрее;
— Оптимизируйте прототип для более быстрой загрузки: убирайте лишние скрытые элементы, используйте облегчённые изображения вместо хайрезов;
— Часть советов повторяет статью Екатерины Бессчётновой, которая уже была в UX Notes.
#prototype #user_testing
— Определите, что вы хотите проверить с помощью прототипа;
— Чтобы увидеть проблемы и сформулировать гипотезы, часто проводят модерируемые тесты, для которых подходят даже недоработанные прототипы — модератор может смягчить связанные с ними негативные эффекты;
— Для проверки интерфейсных гипотез лучше подходят количественные методы (от 100 человек на тест). Здесь модератор уже не поможет, поэтому важны понятное задание и работоспособность прототипа (в том числе быстрая загрузка);
— Чтобы проверить навигацию на удобство и понятность, не обязательно делать прототип, можно провести First click test;
— Прототипом можно проверить сценарии поведения в интерфейсе, взаимодействие с интерактивными элементами;
— Разбивайте интерфейс на короткие сценарии под конкретные задачи. Так проще будет готовить прототип, и грузиться он будет быстрее;
— Оптимизируйте прототип для более быстрой загрузки: убирайте лишние скрытые элементы, используйте облегчённые изображения вместо хайрезов;
— Часть советов повторяет статью Екатерины Бессчётновой, которая уже была в UX Notes.
#prototype #user_testing
vc.ru
Чеклист для тестирования прототипа: 5 пунктов, которые нужно учесть, чтобы не потратить ресурсы впустую — Дизайн на vc.ru
В прошлой статье рассказал, почему не люблю тесты прототипов на Figma и предложил альтернативу. Здесь расскажу о подготовке любых прототипов к тестированию. Чеклист составил по наблюдениям за сотнями проектов на Fastuna. Бонус: прохождение двух тестов.
👌14👍9
Лена из Red Collar написала о слайдере для ввода суммы и проектировании кредитного калькулятора в целом.
— Поле для ввода суммы можно объединить со слайдером, чтобы пользователь указывал её, не переключаясь на клавиатуру;
— Кружок слайдера, который пользователь двигает, может быть небольшим, но с областью нажатия от 32 пикселей;
— Длина слайдера должна быть не маленькой, чтобы легко устанавливать нужное значение, но и не большой, чтобы взгляду и курсору не преодолевать большие расстояния по горизонтали;
— Если в слайдере можно указывать значения только с определённым шагом и вариантов для выбора немного, вместо поля со слайдером подойдёт Segmented contol;
— Если числа большие (стоимость недвижимости), округляйте вводимые слайдером суммы до 10000. Так проще воспринимать числа и обсуждать с кредитным менеджером условия;
— Для суммы первоначального взноса показывайте, какой процент она составляет от стоимости недвижимости;
— Для ввода суммы первоначального взноса и срока кредита можно добавить кнопки быстрого выбора популярных значений (например, для первоначального взноса — 15, 20, 25 и 30%);
— Не скрывайте размер переплаты и итоговую сумму, которую заплатит клиент;
— Расскажите о налоговом вычете, который можно получить;
— Покажите размер минимального дохода, необходимого для того, чтобы получить нужный кредит;
— Добавьте подсказки для терминов и пояснений к вычисленным суммам (например, как появилась сумма налогового вычета).
#slider #calculator #form
— Поле для ввода суммы можно объединить со слайдером, чтобы пользователь указывал её, не переключаясь на клавиатуру;
— Кружок слайдера, который пользователь двигает, может быть небольшим, но с областью нажатия от 32 пикселей;
— Длина слайдера должна быть не маленькой, чтобы легко устанавливать нужное значение, но и не большой, чтобы взгляду и курсору не преодолевать большие расстояния по горизонтали;
— Если в слайдере можно указывать значения только с определённым шагом и вариантов для выбора немного, вместо поля со слайдером подойдёт Segmented contol;
— Если числа большие (стоимость недвижимости), округляйте вводимые слайдером суммы до 10000. Так проще воспринимать числа и обсуждать с кредитным менеджером условия;
— Для суммы первоначального взноса показывайте, какой процент она составляет от стоимости недвижимости;
— Для ввода суммы первоначального взноса и срока кредита можно добавить кнопки быстрого выбора популярных значений (например, для первоначального взноса — 15, 20, 25 и 30%);
— Не скрывайте размер переплаты и итоговую сумму, которую заплатит клиент;
— Расскажите о налоговом вычете, который можно получить;
— Покажите размер минимального дохода, необходимого для того, чтобы получить нужный кредит;
— Добавьте подсказки для терминов и пояснений к вычисленным суммам (например, как появилась сумма налогового вычета).
#slider #calculator #form
Хабр
Проектируем дизайн честного кредитного калькулятора
Перед вами задача спроектировать калькулятор для банковского сервиса. Рассказываем, с чего начать, какие практики упростят работу пользователя и сделают калькулятор честным. Привет! Меня...
👍28🔥4❤3🤯1
Юлиана Шевчук написала о сценарии модерируемого пользовательского тестирования.
— Сценарий — не только легенда и задания. Важны и другие составляющие: вводная, инструктаж, завершение;
— Вводная включает приветствие, цель встречи, установление контакта (small talk) и задаёт настрой. Если с респондентом договаривался не сам исследователь, а рекрутёр, вводной надо уделить больше внимания;
— В онлайне для установления контакта подготовьте общие вопросы, на которые человек легко ответит и которые помогут больше узнать о его контексте;
— Не скатывайтесь в монолог, сделайте паузу после приветствия, чтобы можно было ответить, беседуйте;
— Разбейте инструктаж на блоки, чтобы проще было усвоить. Открыв прототип, расскажите, что это и как с ним работать;
— Также расскажите: что будет происходить, об озвучивании мыслей вслух, что любые реакции приветствуются, чего ожидать от исследователя, что на часть вопросов вы ответите только в конце;
— Подготовьте краткие формулировки;
— Легенда описывает ситуацию, в которой оказался пользователь. Задания — что ему надо сделать в сервисе. Это должна быть жизненная (часто встречающаяся в жизни целевой аудитории) и логично развивающаяся история (чтобы не менять контекст);
— Иногда одного задания не хватает для проверки всех гипотез, это нормально;
— В заданиях придерживайтесь контекста, чтобы респондент не запутался и не стал игнорировать непонятные моменты, о которые споткнулся бы в реальности;
— Не формулируйте задания как инструкции, чтобы не исказить результаты исследования. «Перейдите в документы и проверьте статус оплаты по счету» → «Проверьте, оплатил ли клиент заказ»;
— В завершение попросите поделиться впечатлениями, пожеланиями по продукту, поблагодарите и подчеркните ценность тестирования.
#user_testing
— Сценарий — не только легенда и задания. Важны и другие составляющие: вводная, инструктаж, завершение;
— Вводная включает приветствие, цель встречи, установление контакта (small talk) и задаёт настрой. Если с респондентом договаривался не сам исследователь, а рекрутёр, вводной надо уделить больше внимания;
— В онлайне для установления контакта подготовьте общие вопросы, на которые человек легко ответит и которые помогут больше узнать о его контексте;
— Не скатывайтесь в монолог, сделайте паузу после приветствия, чтобы можно было ответить, беседуйте;
— Разбейте инструктаж на блоки, чтобы проще было усвоить. Открыв прототип, расскажите, что это и как с ним работать;
— Также расскажите: что будет происходить, об озвучивании мыслей вслух, что любые реакции приветствуются, чего ожидать от исследователя, что на часть вопросов вы ответите только в конце;
— Подготовьте краткие формулировки;
— Легенда описывает ситуацию, в которой оказался пользователь. Задания — что ему надо сделать в сервисе. Это должна быть жизненная (часто встречающаяся в жизни целевой аудитории) и логично развивающаяся история (чтобы не менять контекст);
— Иногда одного задания не хватает для проверки всех гипотез, это нормально;
— В заданиях придерживайтесь контекста, чтобы респондент не запутался и не стал игнорировать непонятные моменты, о которые споткнулся бы в реальности;
— Не формулируйте задания как инструкции, чтобы не исказить результаты исследования. «Перейдите в документы и проверьте статус оплаты по счету» → «Проверьте, оплатил ли клиент заказ»;
— В завершение попросите поделиться впечатлениями, пожеланиями по продукту, поблагодарите и подчеркните ценность тестирования.
#user_testing
Medium
Как составить сценарий юзабилити-тестирования
На основе опыта обучения новичков рассказываем как составить сценарий, о частых ошибках и как их избежать
👍19❤6🔥3