Дмитрий Ваницкий написал, как с помощью сторифреймов подружить исследования и прототипирование. И про другие артефакты, которые полезно сделать до вайрфреймов.

Исследователи создают 200-страничные отчёты с детальным описанием всех-всех ранжированных проблем. С этими отчётами непонятно как работать, и полезная информация не учитывается при создании решения.

Исследования и прототипирование должны идти параллельно. Прототипирование — это не конкретно создание вайрфреймов, а процесс моделирования решений для их проверки и улучшения. Модель сначала размыта и поверхностна, но с каждой итерацией всё больше походит на финальный продукт. Происходит движение от абстрактного к конкретному.

Чем абстрактнее, тем быстрее и дешевле вносить изменения. Вайрфреймы — далеко не отправная точка (максимум абстракции). Отправной точкой может быть простой текстовый рассказ о взаимодействии пользователя с продуктом (storyframe). Сторифреймы можно создавать ещё во время исследования.

Исследования обычно начинаются с интервью: с заказчиками, потенциальными пользователями, ретроспективные интервью, тестирование «мысли вслух». Цель — выявить проблемы, барьеры и преграды, с которыми сталкиваются пользователи и предложить решения.

Но если задать вопрос «Как бы вы хотели, чтобы это работало?», можно получить черновой вариант сторифрейма. Точного решения ответ не даст, но позволит найти основной фокус.

Сторифреймы субъективны: они подойдут только для генерации удачного решения, но бесполезны в тестировании, так как каждый увидит в них своё. Если сторифрейм дополнить деталями, получится User’s journey map.

Затем можно рисовать на бумаге скетчи страниц и микрофреймы. Последние показывают переходы между состояниями системы и мелочи, о которых часто забывают: всплывающие окна, уведомления и прочее. Они позволяют проверить систему на замкнутость и возможность достижения пользовательских целей. Недостаток — субъективность интерпретации.

Далее, при создании вайрфреймов, нет задачи получить чёрно-белую версию всех экранов. Здесь прорабатываются шаблоны взаимодействия, навигационные решения и композиция. Работаем с вниманием пользователя. Для минимизации риска появления нерабочих решений лучше сразу использовать реальные данные. На вайрфрейме можно протестировать поток внимания (и прибавить контраста там, где необходимо) и доступность интерфейса.

На готовых макетах можно провести эвристическое тестирование: 10 эвристик Якоба Нильсена или универсальные эвристики Бена Шнейдермана.

Илья Бирман предложил список вопросов для проверки интерфейса на замкнутость. Замкнутость — это что-то вроде математически полной продуманности интерфейса, когда все случаи рассмотрены и противоречия разрешены.

1. Для каждой нарисованной кнопки: что произойдёт, если нажать? Не обязательно должна быть прям картинка следующего состояния, но понадобится внятный ответ.

2. Для каждой кнопки «Закрыть», «Скрыть» и подобных: как снова открыть, показать?

3. Для каждой переменной величины: что, если значение будет отрицательным, нулём, единицей, в сто раз больше, в сто раз меньше, длиннее, короче? Что, если значение изменится в реальном времени?

4. Для каждого переменного числа элементов (список, матрица иконок и т.д.): что, если элементов будет ноль, один; в сто раз больше, чем нарисовано. Что, если число элементов изменится в реальном времени?

https://ilyabirman.ru/meanwhile/all/completeness-questions/

«Если бы я спросил людей, чего они хотят, они бы попросили лошадей побыстрее», — Генри Форд.

Вы наверняка слышали эту цитату, так как связаны с IT.

Музей Генри Форда провёл исследование и не нашёл подобной фразы в его письмах и статьях. Впервые она появилась в 2001 году в письме английскому журналу Marketing Week и, скорее всего, просто ему приписана.

Из книги Скотта Фаранелло Practical UX Design.

https://designpub.ru/дизайн-в-вакууме-adcdc0a039d2

Павел Шерер написал об особенностях проектирования стартапов, которые ещё не профинансированы так, чтобы топить офис деньгами.

1. Совмещение проектировщиком нескольких ролей: потребуется быть почти техническим директором (см. ниже), управлять проектом (в целом, хорошая практика) и знать его лучше всех остальных (документация быстро устаревает).

2. Внимательное изучение технических ограничений: как на возможности продукта повлияют особенности используемых библиотек и сторонних решений.

3. Использование знакомых технологий: у технологий «с острия прогресса» в середине разработки могут вылезти баги, разобраться с которыми будет крайне сложно. Или очередное обновление с беты на релиз сломает API.

4. Понимание, чем отличаются разные лицензии: MIT, GPLv2, BSD, MPL CCA и т.п.

5. Масштабируемые решения: при создании дашборда надо учесть, что на нём могут выводиться не только 2−3 ключевых показателя, но и десяток второстепенных, о которых вы пока даже не знаете. Если вы создаете список пользователей для модераторов, нужно быть готовым, что за два дня их станет больше в 40 раз.

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

7. Планирование аналитики заранее: не продумаете аналитику сначала — потом будете терять какие-то показатели, потому что не готова серверная часть или связка попросту не реализуема.

8. Минимальные вложения в админку: должна быть только та функциональность, которая нужна на старте. Всю аналитику выносите вовне.

9. Главное: не перфекционируйте.

По законодательству РФ интернет-магазины не имеют права устанавливать дополнительные комиссии при оплате товара банковской картой.

Если делаете прототип или макет небольшого магазина, в котором цена зависит от способа оплаты, помните про формулировки:
— Есть базовая цена для других способов оплаты;
— И цена со скидкой для оплаты наличными.

Например, магазин на скриншоте защищён от Роспотребнадзора:
— Нигде не сказано, что цена при оплате картой больше из-за комиссии;
— В подсказке к цене на жёлтой подложке написано, что это цена со скидкой от базовой цены.

Кент Салливан написал о разработке дизайна Windows 95: использование в качестве основы Windows 3.1, итеративный подход, прототипы на Visual Basic, пользовательское тестирование (новички, средние и продвинутые), фиксирование проблем и решений в багтрекере, ранжирование проблем.

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

Золтан Коллин написал о трении в интерфейсе, как его уменьшить и в каких случаях этого лучше не делать.

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

1. Замедлиться, чтобы избежать ошибки:
— Подтверждение действий с серьезными последствиями;
— Предотвращение возможных ошибок. Gmail спрашивает, действительно ли пользователь хочет отправить письмо без прикреплённых файлов, когда он упоминал их в тексте письма;
— Задержка выполнения действий, которые нельзя отменить.

2. Дополнительные шаги для повышения безопасности:
— Предотвращение случайных транзакций;
— Многошаговая аутентификация;
— Повторная аутентификация перед важными действиями. Авторизованный пользователь вводит текущий пароль ещё раз, чтобы заменить его на новый.

3. Повышение восприятия качества и ощущения безопасности:
— Обменник монет на банкноты слишком быстро выдавал их, и люди считали, что он считает неверно;
— Сканер сетчатки глаза в банковском приложении работал слишком быстро, и пользователям казалось, что проверка недостаточно тщательна.

4. Обучение пользователей и стимулирование определённого поведения:
— Slack предупреждает перед отправкой уведомления группе;
— На кухне Google конфеты размещены в непрозрачных контейнерах, а фрукты в прозрачных.

5. Управление продуктом:
— Продажа. Всплывающие окна с акциями и предложением подписаться;
— Фильтрация клиентов. Сложный для родителей интерфейс Snapchat;
— Создание ценности. Рекламные вставки на бесплатном тарифе Spotify.

In English.

Давид Теодореску написал о манипуляциях с помощью дефицита.

Почему они работают:
— Боязнь потери продукта и свободы выбора;
— Социальное доказательство: обычно продукт становится дефицитным из-за высокого спроса;
— Ожидание, что отказ от предложения вызовет в будущем сожаление.

Формы дефицита:
1. По времени: Lightning Deals на Амазоне;
2. По количеству товаров: поиск номеров на Booking, бронь билетов на Ryan Air;
3. Ограниченный доступ: подписка на Медиуме, присоединение к Tinder Select;

Метод этично использовать, когда цифры реальны. Если выдумывать поддельные акции и искусственные членства, в долгосрочной перспективе это приведёт к потере доверия.

In English.

3 доклада с Open Epic Day, проведённого школой Epic Skills 10 марта:

1. Креативные методики против вдохновения — Никита Прядко из «Золотого сечения»: https://youtu.be/i3j3hyGeh-g

2. Тёмная и светлая сторона дизайнера интерфейсов — Анастасия Атюнина из Heads and Hands: https://youtu.be/MgFW6Sbp548

3. Как говорить о дизайне с заказчиком — Даша Почекуева из Kelnik: https://youtu.be/EkRmmosHj-0

Элеана Гожка написала об использовании принципов гештальта в дизайне интерфейсов.

Люди:
— Склонны идентифицировать сначала общую форму элементов. Мозг распознает целое быстрее, чем составляющие;
— Могут распознавать объекты, даже если их части отсутствуют. Мозг сопоставляет объекты со знакомыми шаблонами и заполняет пробелы;
— Часто интерпретируют неоднозначные объекты более чем одним способом, переключаясь между альтернативами в поиске определённости;
— Распознают простые объекты независимо от их вращения, масштаба и перемещения.

Связанными воспринимаются объекты:
— Находящиеся рядом друг с другом;
— Находящиеся в одной замкнутой области (рамка);
— Похожие визуально;
— Создающие вместе узнаваемую форму;
— Расположенные симметрично;
— Расположенные на линии или гладкой кривой;
— Движущиеся в одном направлении.

In English.

Настя Травкина написала о дофаминовой петле.

В 2001 году стэнфордский ученый Брайан Кнутсон доказал, что дофамин отвечает именно за предвкушение удовольствия. Это способ мотивации и поощрения эволюционно верных действий, способствующих выживанию. Дофамин использует тягу к удовольствию как морковку перед мордой осла, чтобы заставить человека совершить правильные действия. Он вынуждает нас искать удовольствие — но не испытывать его. Работой именно этого гормона и обусловлены психологические болезни общества потребления.

Приводят к выработке дофамина: лайки (социальное одобрение), сладкая и жирная еда, бесплатные пробы еды и напитков, манящий аромат, аппетитные картинки, сексуальность, новизна, элементы геймификации, неожиданность, риск потери.

Стабилизировать работу префронтальной коры и дофаминовой системы помогают: достаточное количество сна, снижение стресса, здоровое питание, исключение кофе, сигарет и алкоголя, физическая активность, фокусировка на том, что любите.

Джим Росс написал о распространённых ошибках в прототипировании и как их избежать.

1. Приступать к созданию прототипов слишком быстро. Надо начать с бумажных набросков и поиска наиболее подходящей концепции;
2. Работать без чёткого плана. Надо определить, какие страницы и функции должны войти в прототип, и заниматься только ими;
3. Ошибаться с уровнем точности прототипа. Надо понять, какую задачу он решает и какие есть временные ограничения на его создание;
4. Включать в прототип слишком много всего. Надо показать основные страницы и функции, а на второстепенные переключаться только после получения обратной связи по основным;
5. Не объяснять клиентам и пользователям, что за прототип перед ними. Надо объяснять в начале и повторять перед каждым ревью. И проверяйте, что все ссылки в прототипе ведут туда, куда надо;
6. Не готовить инструкцию по навигации в прототипе. Для разработчиков стоит сделать отдельный документ с состояниями экранов и принципами взаимодействия, чтобы им было проще разобраться, как всё работает.

In English. Копия перевода в Вебархиве.

Митя Гизатов искал работу дизайнером, за 4 месяца прошёл более 30 собеседований и поделился впечатлениями.

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

Например:
— Стоит откликаться на вакансии, даже если не соответствуете требованиям на 100%;
— Знакомиться (проводить первое интервью в серии) лучше не лично, а по видеосвязи;
— Если тестовое задание обязательно, не надо спрашивать об отношении соискателя к тестовым заданиям. Никто их не любит делать;
— Обратная связь после выполнения тестового — обязательный пункт.

Максим Ильяхов рассказал, как больше зарабатывать. Он учит редакторов, но рекомендации полезны и дизайнерам.

— Соответствуйте базовым требованиям к нормальным подрядчикам: вовремя отвечайте на письма, укладывайтесь в названные сроки, закладывайте время на согласования и так далее;
— Берите больше от клиентского бюджета, делайте смежные задачи вроде вёрстки;
— Делайте проекты только тем, для кого ваша работа — вопрос жизни и смерти. Не делайте факультативные и не особо важные задачи;
— Научитесь договариваться с клиентами, которым дорого;
— Заявляйте о себе: ведите блоги, показывайте работы, участвуйте в конкурсах, делайте сервисы.

Видео.

Джон Мур написал, что иногда забывают спроектировать.

1. Вход: восстановление пароля, благодарность за регистрацию, приветственное письмо, условия использования и конфиденциальность.

2. Первое использование: знакомство пользователя с продуктом, пустые состояния, раздел помощи, выход из профиля.

3. Всякие мелочи: страница 404, порядок переключения кнопкой Tab, закрепление элементов при прокрутке, постраничная навигация, сортировка и фильтрация таблиц, отсутствие результатов поиска, состояния ошибок, системные уведомления, автозаполнение в раскрывающемся списке, состояние загрузки.

4. Профиль: настройка уведомлений, список выставленных счетов, удаление профиля, кадрирование фото для профиля, переход на повышенный тарифный план.

5. Пользовательские сценарии: изменение адреса, добавление новой карты, массовое добавление объектов, создание пользовательского фильтра, возможность поделиться, создание объекта из существующего, приглашение пользователей, редактирование прав пользователей, восстановление только что удалённого.

In English.

Никита Ларионов выложил конспект лекций с курса Игоря Штанга «Типографика и вёрстка», который недавно прошёл в Волгограде. Например:

Одинаковое содержание в одинаковых модулях выглядит скучно. Чтобы интересно расположить его в рамках готового пространства есть 7 приёмов.

1. Заполнять модули не до конца. Оставьте некоторые модули пустыми, обтравите фотографии.

2. Оформить элементы по-разному. Разделите их цветом или шрифтом. Представьте себе однообразную структуру, в которой расставлены акценты.

3. Заполнить элементами разных классов или разного качества. Вставьте в каталог товаров ссылку на статью или цитату из отзыва.

4. Предусмотреть область, которая будет выглядет по-другому. Сетка одна, но модули объединяются по-разному.

5. Выйти за пределы модуля. У вас есть чёткие куски, но некоторые изображения вылетают за пределы своих модулей. Если у вас прослеживается деление на модули, то можно подумать, как заводить элементы один на другой. Если у вас «каша из элементов», то лучше в это не лезьте.

6. Добавить новый слой. Подчеркните особенную динамику и направление. Например, текст стоит с чётким ритмом, а картинки летают как хотят.

7. Соблюсти баланс порядка и хаоса. Структура должна остаться читаемой. В хорошем макете сначала думают о структуре, а потом о разнообразии.

http://vonoiral.com/all/kurs-igorya-shtanga-tipografika-i-vyorstka-v-volgograde/

Иван Величко рассказал о финансах дизайн-бюро «Щука»:

Формат оплаты:
— Почасовая оплата только с Pure. Такая модель не интересна, так как размер прибыли зафиксирован и может только уменьшиться, если сотрудник напортачил;
— Остальным клиентам предлагаются фиксированные бюджет и время;
— Сколько часов дизайнеры потратят на проект, прикидывает арт-директор.

Как считают часы:
— Для западных заказчиков час работы стоит 60 евро, для российских — 3000 рублей;
— Повышение стоимости не привело к уменьшению количества заказов;
— Сотрудники работают максимум 6 часов в день;
— Они склонны занижать потраченное время, боясь показаться неэффективными.

Общие показатели:
— В штате 14 сотрудников;
— В 2017 году выручка составила 25 млн рублей;
— За счёт повышения стоимости и более точной оценки проектов во 2-м полугодии удалось получить 2 млн прибыли;
— Плановая норма прибыли — 20%. Хотят поднять до 30% за счёт снижения транзакционных издержек и более чёткой постановки задач;
— На счетах есть финансовая подушка около 4 млн рублей (в районе двухмесячного оборота).

Стоимость проектов:
— Средний бюджет — 700 тысяч рублей;
— Перестали брать проекты меньше 500 тысяч. Разматывать маховик пресейла и концептуального проектирования ради меньшего нецелесообразно;
— Если дизайнеру нечем заняться, лучше обновлять портфолио, а не делать дешёвый проект.

https://incrussia.ru/fly/kejs-byuro-shhuka-kak-otsenit-rabotu-dizajnera-vo-vremeni-i-vyjti-iz-ubytkov/

Адам Ватан и Стив Шёгер предложили 7 простых приёмов, с помощью которых можно улучшить дизайн.

1. Использовать для создания иерархии цвет и толщину, а не размер текста.

2. Отказаться от серого текста на цветном фоне. Лучше полупрозрачный белый или отдельный гармонирующий с фоном цвет (особенно, когда используются фоновые изображения).

3. Добавить вертикальное смещение теней и уменьшить их размытие и растягивание.

4. Уменьшить количество рамок и разделительных линий. Вместо них можно добавить блоку тень, раскрасить фон, добавить отступы.

5. Использовать векторные иконки в том размере, для которого они рисовались. Не увеличивать их слишком сильно.

6. Добавлять акценты с помощью цветной границы блока.

7. Не забывать про иерархию, раскрашивая кнопки в семантически подходящие цвета.

In English.

Дмитрий Мелентьев написал о тестировании на этапе проектирования: бумажных прототипов, интерактивных прототипов в мелкой детализации, интерактивных макетов, альфа-версий продуктов, похожих продуктов.

Про интерактивные макеты:

Дизайнер делает красивый интерфейс, в котором вы размечаете области, при взаимодействии с которыми должно что-то происходить. Обычно это просто «on click» или «on move».

Вся эта красота делается интерактивной и тестируется на пользователях:
— Насколько конкретный элемент, который ранее был большой кнопкой, а сейчас стал красивеньким тонким баром, понятен пользователю;
— Акценты и видимость всех важных элементов дизайна.

Есть небольшой нюанс: надо постоянно напоминать, что это прототип. Потому что такой прототип уж слишком похож на реальность.

https://habrahabr.ru/company/netologyru/blog/334694/