Пост №1. О "кирпичиках" в проектировании.
Когда я помогаю младшим коллегам что-то пилить, то постоянно вижу, как они хватают  большой и сложный интерфейс (страницу, форму, несколько страниц, целый раздел в системе и пр.), пытаются его как-то одновременно продумать и нарисовать.

Прямо сегодня помогал студентке (я веду курс по UX, нет времени объяснять, просто читай) с проектом о рекламе на транспорте.  Своего рода CRM.

Нам нужно было сделать страничку с карточками. Как Трелло, только не Трелло. В карточках много данных, при перекидывании карточек по столбцам данные меняются, в системе много разделов, и сложный сценарий работы.

Моя функция сегодня свелась к тому, что я заставил человека сузить фокус, и заниматься ТОЛЬКО карточкой, в ОДНОМ состоянии, забив на все остальное. В результате мы пошли НАМНОГО быстрее. И вместо невнятной, непонятно, неработающей, но зато целой страницы, у нас появился четкий и толковый кирпичик, из которого можно строить все остальное.

Мораль: ищи кирпичик, сделай на его основе несколько кирпичиков, построй из них дом и подари мне биткоин.

А вот как выгладел наш кирпичик (в двух вариантах). Прототип, не дизайн.

Что отличает выдающегося проектировщика/дизайнера/юиксера от просто хорошего? Умение думать (в частности рассуждать), ставить конкретные цели, и эти ваши софт скиллы.

Выглядит так, что можно набрать хард скиллов (фотошоп, скетч и прочие сетки-анимации), стать крепким середнячком, а потом качать софт, учиться коммуницировать, приоретзировать и в целом учиться думать.

Стратегия разумная, но есть нюансы. (кто бы сомневался)

Возьмем то же целеполагание. Если ты еще в начале карьеры научишься ОЧЕНЬ ЧЕТКО И КОНКРЕТНО описывать то, чего хочешь (например, описывать желаемую специализацию) — дальше развитие пойдет СИЛЬНО быстрее. Я не один раз наблюдал такой рывок у тех ребят, которых менторил.

Нюанс второй. Хард скиллы быстро устаревают, а софт скиллы вечны.

Мораль:  учись думать, учись учиться, учись коммуницировать, учись целеполаганию. Качай вечные навыки.

Хорошая выжимка по формам. Я часто встречал у студентов ошибки, которые здесь упомянуты. Но, не стоит воспринимать как Библию, у каждого правила есть исключения.

Как улучшить любую веб-форму

В журнале Телеграф.дизайн вышел перевод статьи «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  #дизайн_форм  #высушено

На #it_subbotnik в EPAM (где я работаю), играюсь с VR. Пройдут годы, VR-интерфейсы будут везде. Интересно, как это повлияет на UX и на нашу работу?

В нашей работе критически важно убирать лишнее.

Настолько, что я решил написать серию постов, которые пояснят, почему это нужно и как это делать.

1. Simple and stupid
http://telegra.ph/Simple-and-stupid-12-25

С новым годом, ребят!:)

Как докопаться до сути проблемы в интервью с пользователем?

Итак, вы захотели провести интервью с потребителями. “Хочу собрать инсайты и услышать потребности клиентов” — типичная мотивация в голове неопытного продакта. Эта цель слишком расплывчата. Она ведет к расплывчатым результатам. С таким подходом из интервью мы узнаем только очевидные вещи.

Чтобы получить инсайты из интервью, мы должны “протаранить” стену очевидных ответов пользователей.

В 1963 зоолог Нико Тинберген получил нобелевку за изучение поведения животных. Он предложил рассматривать поведение с четырех сторон:
1) для чего оно нужно?
2) как оно работает?
3) как оно было выработано?
4) как оно эволюционировало?

Давайте используем это на людях…
Пример: почему мы останавливаемся на красный свет светофора?

Функция: защищаемся от травм и проблем с ГИБДД
Как работает: мозг распознает красный свет, сигнал передается в нервную систему и останавливает шаг
Онтогенез: этому учат в школе и так поступают родственники/друзья/по ТВ
Филогенез: с 1868 года красный свет используется в светофорах

По такому принципу можно рассматривать любые вопросы поведения, в т.ч. и пользователей на сайте и в приложениях.

Алгоритм разговора:
1) задаем наводящий вопрос юзеру
2) слушаем ответ
3) копаем вглубь вопросами Нико Тинбергена
4) записываем ценную информацию
5) задаем следующий наводящий вопрос

Почитать подробнее и посмотреть примеры вопросов для продуктового исследования можно в статье “Going Beyond the Obvious”.

Хороший текст, пусть будет под рукой :)

📈🤑📱
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

Рекомендую ознакомиться с каналом. Выкладывают довольно много UI-китов и прочих файлов, на которых вы можете посмотреть организацию (вложенность символов и пр)

Полезно!

#GIF  Как красить иконки через маску, задавая цвет в оверрайде

Хорошая статья о колористике. МОжет помочь, когда вы будете выбирать цвета для вашего дизайна http://deadsign.ru/design/color-glossary-for-designers-terms-and-definitions/

Недавно моя коллега, Лена Полякова, провела занятие про Value Proposition Сanvas. Я присутствовал (как организатор) и написал статью с советами по часто встречающимся проблемам.

Ребята, думаю, что вам дальше написать. Помогите :)

Какие вопросы перед вами стоят? Что вам хочется узнать о UX? Чему научиться?

Самые смелые — пишите вопросы в комментариях или мне в личку, остальных просьба проголосовать :)

1️⃣  Scenarios, workflows, personas e t.c. Как делать эти артефакты,  практические нюансы, примеры и пр.

2️⃣  Как собирать данные для артефактов. Что делать, чтобы не плодить булшит персон например :)

3️⃣  Прототипирование. Группировка и композиция, акценты, UI-elements, типографика и пр.

4️⃣  Валидация ваших UX-решений. Тестирование, статистика, и пр.

Ну что, пожелания более-менее понятны. Хочется и UX-research, и проектирования, и валидаций. Но проектирования немного больше.

Соответственно, я постараюсь вести два более-менее параллельных потока контента.

1) Верхнеуровневые артефакты и валидация. Это лучше всего показать на примере разработки какого-то небольшого нового продукта, который будет решать реальную проблему. Рано или поздно в этой ветке будет и проектирование, но не сразу.

2) Прототипирование и дизайн. Тут пожалуй возьму шотов с дриббла, или существующий продукт, и дорисую "усы", чтобы сразу (почти) приступить к картинкам, без долгого рисеча.

На следующей неделе будут первые посты.

Цикл работ в UX. Какие есть этапы, что делать/чему стремиться на каждом из них. Немного примеров того, как это бывает в жизни. Ничего нового для опытных UX-дизайнеров, но вполне ок тем, кто помладше.