Пост №1. О "кирпичиках" в проектировании.
Когда я помогаю младшим коллегам что-то пилить, то постоянно вижу, как они хватают большой и сложный интерфейс (страницу, форму, несколько страниц, целый раздел в системе и пр.), пытаются его как-то одновременно продумать и нарисовать.
Прямо сегодня помогал студентке (я веду курс по UX, нет времени объяснять, просто читай) с проектом о рекламе на транспорте. Своего рода CRM.
Нам нужно было сделать страничку с карточками. Как Трелло, только не Трелло. В карточках много данных, при перекидывании карточек по столбцам данные меняются, в системе много разделов, и сложный сценарий работы.
Моя функция сегодня свелась к тому, что я заставил человека сузить фокус, и заниматься ТОЛЬКО карточкой, в ОДНОМ состоянии, забив на все остальное. В результате мы пошли НАМНОГО быстрее. И вместо невнятной, непонятно, неработающей, но зато целой страницы, у нас появился четкий и толковый кирпичик, из которого можно строить все остальное.
Мораль: ищи кирпичик, сделай на его основе несколько кирпичиков, построй из них дом и подари мне биткоин.
Когда я помогаю младшим коллегам что-то пилить, то постоянно вижу, как они хватают большой и сложный интерфейс (страницу, форму, несколько страниц, целый раздел в системе и пр.), пытаются его как-то одновременно продумать и нарисовать.
Прямо сегодня помогал студентке (я веду курс по UX, нет времени объяснять, просто читай) с проектом о рекламе на транспорте. Своего рода CRM.
Нам нужно было сделать страничку с карточками. Как Трелло, только не Трелло. В карточках много данных, при перекидывании карточек по столбцам данные меняются, в системе много разделов, и сложный сценарий работы.
Моя функция сегодня свелась к тому, что я заставил человека сузить фокус, и заниматься ТОЛЬКО карточкой, в ОДНОМ состоянии, забив на все остальное. В результате мы пошли НАМНОГО быстрее. И вместо невнятной, непонятно, неработающей, но зато целой страницы, у нас появился четкий и толковый кирпичик, из которого можно строить все остальное.
Мораль: ищи кирпичик, сделай на его основе несколько кирпичиков, построй из них дом и подари мне биткоин.
👍1
Что отличает выдающегося проектировщика/дизайнера/юиксера от просто хорошего? Умение думать (в частности рассуждать), ставить конкретные цели, и эти ваши софт скиллы.
Выглядит так, что можно набрать хард скиллов (фотошоп, скетч и прочие сетки-анимации), стать крепким середнячком, а потом качать софт, учиться коммуницировать, приоретзировать и в целом учиться думать.
Стратегия разумная, но есть нюансы. (кто бы сомневался)
Возьмем то же целеполагание. Если ты еще в начале карьеры научишься ОЧЕНЬ ЧЕТКО И КОНКРЕТНО описывать то, чего хочешь (например, описывать желаемую специализацию) — дальше развитие пойдет СИЛЬНО быстрее. Я не один раз наблюдал такой рывок у тех ребят, которых менторил.
Нюанс второй. Хард скиллы быстро устаревают, а софт скиллы вечны.
Мораль: учись думать, учись учиться, учись коммуницировать, учись целеполаганию. Качай вечные навыки.
Выглядит так, что можно набрать хард скиллов (фотошоп, скетч и прочие сетки-анимации), стать крепким середнячком, а потом качать софт, учиться коммуницировать, приоретзировать и в целом учиться думать.
Стратегия разумная, но есть нюансы. (кто бы сомневался)
Возьмем то же целеполагание. Если ты еще в начале карьеры научишься ОЧЕНЬ ЧЕТКО И КОНКРЕТНО описывать то, чего хочешь (например, описывать желаемую специализацию) — дальше развитие пойдет СИЛЬНО быстрее. Я не один раз наблюдал такой рывок у тех ребят, которых менторил.
Нюанс второй. Хард скиллы быстро устаревают, а софт скиллы вечны.
Мораль: учись думать, учись учиться, учись коммуницировать, учись целеполаганию. Качай вечные навыки.
👍2
Хорошая выжимка по формам. Я часто встречал у студентов ошибки, которые здесь упомянуты. Но, не стоит воспринимать как Библию, у каждого правила есть исключения.
👍1
Forwarded from /designer
Как улучшить любую веб-форму
В журнале Телеграф.дизайн вышел перевод статьи «16 дизайн-правил в дизайне форм» Дмитрия Коваленко из Readdle. Он проанализировал проблемы веб-форм и рассказал как их улучшить:
http://telegraf.design/16-dizajn-printsipov-kotorye-uprostyat-zapolnenie-lyuboj-formy/
Оригинал:
https://medium.com/@justd/the-18-must-do-principles-in-the-form-design-fe89d0127c92
Я выделил 10 лучших советов и добавил примеров от себя:
Спрашивай только самое необходимое в данный момент
Если на этапе регистрации от пользователя достаточно его электронной почты и имени, а номер телефона понадобится позже, то нет смысла спрашивать всё сразу. Чем большее усилие должен совершить пользователь, тем меньше будет конверсия формы. Информацию надо выуживать постепенно, чтобы пользователь не устал.
Фокусируй первое поле по умолчанию
Подсказывай респонденту, откуда начинать и тем ты сэкономишь ему клик. Кроме того, явно выделенное первое поле побуждает к заполнению формы.
Используй одну колонку
Структурированная форма воспринимается лучше, её легче сканировать глазами как оглавление. В противном случае глаза двигаются зигзагом, на что уходит больше сил пользователя и дизайнера.
Разделяй поля по смысловым группам
Большая бесформенная куча полей демотивирует. Если разделить её на группы и сделать отступы между ними, будет проще воспринимать информацию. Вспомни сплошной текст без деления на абзацы.
Как можно раньше информируй об ошибках
Используй ограничения на ввод данных. Например, в поле ввода карты не нужно вводить буквы.
Делай поля пропорциональными их контенту
Если в поле нужно ввести две буквы, оно не должно занимать целую строку.
В сообщении об ошибке пиши причину
Если поле введено неверно, это понятно уже из красного цвета. Фраза «Что-то пошло не так» не делает мир лучше. Лучше писать что-то вроде: «В пароле должно быть 8 символов».
Поощряй пользователя: ставь ему зелёную галочку за каждое заполненное поле
Если поле заполнено корректно, это можно понять уже на этапе ввода следующего. Срабатывает психологический эффект: заполнил поле — похвалили галочкой.
Не отвлекай от заполнения
Никаких лишних отвлекающих ссылок, которые могут прервать сценарий. Пользователь уже сделал подвиг: он сфокусировал внимание. Наша задача — затаить дыхание и дождаться, чтобы он закончил и отправил её. Если нужно что-то объяснить, это надо делать словами и всплывашками.
Обоснуй, зачем тебе именно эти данные
Информация, которую готов дать пользователь, дорога ему. Не имея мотивации, он её просто так не отдаст. Чтобы развеять его сомнения, хорошо бы объяснить, с какой стати мы спрашиваем у него группу крови на сервисе авиабилетов.
Бонус не из статьи: Сохраняй введённые данные
Данные пользователя бесценны. Если после нажатия кнопки «Отправить» пользователь видит ошибку 404, о красивом дизайне формы он уже не вспомнит и в бешенстве закроет страницу. Современный фронтенд позволяет проверять, произойдёт ли успешная отправка. Если нет интернета или есть ошибки, сайт должен выводить предупреждение до того, как случилась катастрофа.
#UX #дизайн_форм #высушено
В журнале Телеграф.дизайн вышел перевод статьи «16 дизайн-правил в дизайне форм» Дмитрия Коваленко из Readdle. Он проанализировал проблемы веб-форм и рассказал как их улучшить:
http://telegraf.design/16-dizajn-printsipov-kotorye-uprostyat-zapolnenie-lyuboj-formy/
Оригинал:
https://medium.com/@justd/the-18-must-do-principles-in-the-form-design-fe89d0127c92
Я выделил 10 лучших советов и добавил примеров от себя:
Спрашивай только самое необходимое в данный момент
Если на этапе регистрации от пользователя достаточно его электронной почты и имени, а номер телефона понадобится позже, то нет смысла спрашивать всё сразу. Чем большее усилие должен совершить пользователь, тем меньше будет конверсия формы. Информацию надо выуживать постепенно, чтобы пользователь не устал.
Фокусируй первое поле по умолчанию
Подсказывай респонденту, откуда начинать и тем ты сэкономишь ему клик. Кроме того, явно выделенное первое поле побуждает к заполнению формы.
Используй одну колонку
Структурированная форма воспринимается лучше, её легче сканировать глазами как оглавление. В противном случае глаза двигаются зигзагом, на что уходит больше сил пользователя и дизайнера.
Разделяй поля по смысловым группам
Большая бесформенная куча полей демотивирует. Если разделить её на группы и сделать отступы между ними, будет проще воспринимать информацию. Вспомни сплошной текст без деления на абзацы.
Как можно раньше информируй об ошибках
Используй ограничения на ввод данных. Например, в поле ввода карты не нужно вводить буквы.
Делай поля пропорциональными их контенту
Если в поле нужно ввести две буквы, оно не должно занимать целую строку.
В сообщении об ошибке пиши причину
Если поле введено неверно, это понятно уже из красного цвета. Фраза «Что-то пошло не так» не делает мир лучше. Лучше писать что-то вроде: «В пароле должно быть 8 символов».
Поощряй пользователя: ставь ему зелёную галочку за каждое заполненное поле
Если поле заполнено корректно, это можно понять уже на этапе ввода следующего. Срабатывает психологический эффект: заполнил поле — похвалили галочкой.
Не отвлекай от заполнения
Никаких лишних отвлекающих ссылок, которые могут прервать сценарий. Пользователь уже сделал подвиг: он сфокусировал внимание. Наша задача — затаить дыхание и дождаться, чтобы он закончил и отправил её. Если нужно что-то объяснить, это надо делать словами и всплывашками.
Обоснуй, зачем тебе именно эти данные
Информация, которую готов дать пользователь, дорога ему. Не имея мотивации, он её просто так не отдаст. Чтобы развеять его сомнения, хорошо бы объяснить, с какой стати мы спрашиваем у него группу крови на сервисе авиабилетов.
Бонус не из статьи: Сохраняй введённые данные
Данные пользователя бесценны. Если после нажатия кнопки «Отправить» пользователь видит ошибку 404, о красивом дизайне формы он уже не вспомнит и в бешенстве закроет страницу. Современный фронтенд позволяет проверять, произойдёт ли успешная отправка. Если нет интернета или есть ошибки, сайт должен выводить предупреждение до того, как случилась катастрофа.
#UX #дизайн_форм #высушено
• —
16 дизайн принципов, которые упростят заполнение любой формы
Дмитрий Коваленко, Head of Product Design в Readdle, о том, как улучшить дизайн форм и почему это важно для сервисов и пользователей.
👍1
На #it_subbotnik в EPAM (где я работаю), играюсь с VR. Пройдут годы, VR-интерфейсы будут везде. Интересно, как это повлияет на UX и на нашу работу?
👍1
В нашей работе критически важно убирать лишнее.
Настолько, что я решил написать серию постов, которые пояснят, почему это нужно и как это делать.
1. Simple and stupid
http://telegra.ph/Simple-and-stupid-12-25
Настолько, что я решил написать серию постов, которые пояснят, почему это нужно и как это делать.
1. Simple and stupid
http://telegra.ph/Simple-and-stupid-12-25
Telegraph
Simple and stupid
Ты думаешь о том, что добавить. Подумай о том, что убрать или упростить.
👍1
Forwarded from Product × Science
Как докопаться до сути проблемы в интервью с пользователем?
Итак, вы захотели провести интервью с потребителями. “Хочу собрать инсайты и услышать потребности клиентов” — типичная мотивация в голове неопытного продакта. Эта цель слишком расплывчата. Она ведет к расплывчатым результатам. С таким подходом из интервью мы узнаем только очевидные вещи.
Чтобы получить инсайты из интервью, мы должны “протаранить” стену очевидных ответов пользователей.
В 1963 зоолог Нико Тинберген получил нобелевку за изучение поведения животных. Он предложил рассматривать поведение с четырех сторон:
1) для чего оно нужно?
2) как оно работает?
3) как оно было выработано?
4) как оно эволюционировало?
Давайте используем это на людях…
Пример: почему мы останавливаемся на красный свет светофора?
Функция: защищаемся от травм и проблем с ГИБДД
Как работает: мозг распознает красный свет, сигнал передается в нервную систему и останавливает шаг
Онтогенез: этому учат в школе и так поступают родственники/друзья/по ТВ
Филогенез: с 1868 года красный свет используется в светофорах
По такому принципу можно рассматривать любые вопросы поведения, в т.ч. и пользователей на сайте и в приложениях.
Алгоритм разговора:
1) задаем наводящий вопрос юзеру
2) слушаем ответ
3) копаем вглубь вопросами Нико Тинбергена
4) записываем ценную информацию
5) задаем следующий наводящий вопрос
Почитать подробнее и посмотреть примеры вопросов для продуктового исследования можно в статье “Going Beyond the Obvious”.
Итак, вы захотели провести интервью с потребителями. “Хочу собрать инсайты и услышать потребности клиентов” — типичная мотивация в голове неопытного продакта. Эта цель слишком расплывчата. Она ведет к расплывчатым результатам. С таким подходом из интервью мы узнаем только очевидные вещи.
Чтобы получить инсайты из интервью, мы должны “протаранить” стену очевидных ответов пользователей.
В 1963 зоолог Нико Тинберген получил нобелевку за изучение поведения животных. Он предложил рассматривать поведение с четырех сторон:
1) для чего оно нужно?
2) как оно работает?
3) как оно было выработано?
4) как оно эволюционировало?
Давайте используем это на людях…
Пример: почему мы останавливаемся на красный свет светофора?
Функция: защищаемся от травм и проблем с ГИБДД
Как работает: мозг распознает красный свет, сигнал передается в нервную систему и останавливает шаг
Онтогенез: этому учат в школе и так поступают родственники/друзья/по ТВ
Филогенез: с 1868 года красный свет используется в светофорах
По такому принципу можно рассматривать любые вопросы поведения, в т.ч. и пользователей на сайте и в приложениях.
Алгоритм разговора:
1) задаем наводящий вопрос юзеру
2) слушаем ответ
3) копаем вглубь вопросами Нико Тинбергена
4) записываем ценную информацию
5) задаем следующий наводящий вопрос
Почитать подробнее и посмотреть примеры вопросов для продуктового исследования можно в статье “Going Beyond the Obvious”.
www.userfocus.co.uk
Going Beyond the Obvious
In which we go on safari, stop at a red light, meet a zoologist, and discover four classic questions that can help us design better UX research.
👍1
Forwarded from Дизайн-Телега 🔥
📈🤑📱
Crpt Bank iOS UI Kit
#appdesign #sketch #uikit #figma #iOS
👁 preview:
https://goo.gl/RNY9fU
⬇️ download psd or figma file:
https://t.me/psdmockups/542
Crpt Bank iOS UI Kit
#appdesign #sketch #uikit #figma #iOS
👁 preview:
https://goo.gl/RNY9fU
⬇️ download psd or figma file:
https://t.me/psdmockups/542
👍1