Как улучшить UX готового продукта

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

Как улучшить UX продукта, когда пройдены уровни структуры и компоновки? И сделать это минимальными силами разработчиков, то есть без геймификации и машинного обучения.

Читать далее Как улучшить UX готового продукта

Всплывающие подсказки — зло

Статью «Why tooltips are terrible and why you should use them for your product» написал Пулкит Агравал 28 апреля 2016 года.

Сервис Braid пригласил его исправить процесс знакомства. Положение было плачевным:

Читать далее Всплывающие подсказки — зло

Интерфейсная борьба с расизмом

Статью «How Nextdoor reduced racist posts by 75%» написал Кашмир Хилл 25 августа 2016 года.

Интересный пример влияния на пользовательское поведение через небольшие изменения интерфейса.

Читать далее Интерфейсная борьба с расизмом

Результат проектирования

Проектная документация

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

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

Всё это повышает шансы проекта на реализацию.

Карл Вигерс, автор книги «Разработка требований к программному обеспечению», подсчитал, что на американском рынке разработки 40% бюджета проекта уходит на переделки из-за того, что заказчик и исполнитель плохо сформулировали требования к продукту и вообще не поняли друг друга.

Читать далее Результат проектирования

Быстрые прототипы и AR

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

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

Быстрые прототипы

Проблема в том, что мы не понимаем, в чём проблема.

Пол МакКриди

В 1959 году Генри Кремер учредил награду за создание летательного аппарата, который можно привести в движение человеческой силой. Чтобы выиграть 50 000 фунтов, нужно было пролететь на нём путь в форме восьмёрки общей длиной в милю (1,6 км).

18 лет изобретатели не могли справиться с задачей. Их отлично сконструированные машины сходили с дистанции и зачастую разбивались. Ремонт и усовершенствование занимали не меньше года.

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

Инженер Пол МакКриди размышлял над этими вопросами, наблюдал за конкурентами, и со временем увидел решение. Проблема была не в дизайне, а во времени, которое занимал ремонт после неудачной попытки.

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

С первым аэропланом не вышло. Он был слишком хлипким. Но МакКриди хотел получить аппарат, который можно отремонтировать за часы. Это позволило сократить цикл разработки — переделывать, тестировать, учиться на ошибках можно было за часы и дни, а не за месяцы и годы.

Аза Раскин, «Вы решаете не ту проблему»
Gossamer Condor

В 1977 году его аэроплан Gossamer Condor выиграл первый приз Кремера. Через 2 года Gossamer Albatross перелетел Ла-Манш и принёс МакКриди второй приз — ещё 100 000 фунтов.

Gossamer Albatross

Кстати, такие аппараты называют «мускулолётами». Мы не можем махать крыльями так же интенсивно, как птицы. На грудные мышцы человека приходится всего 1% массы тела. У птиц — 17%.

Зато у нас неплохо развиты ноги, поэтому конструкционно мускулолёты — это летающие велосипеды, только вращение педалей передаётся не на колёса, а на пропеллер.

Из книги Скотта Фаранелло Practical UX Design и статей о призе Кремера и мускулолётах на Википедии.

Прототипирование дополненной реальности

Все дизайнеры знают, что такое прототип. Это самый простой способ показать своё решение другим участникам процесса и ускорить разработку. Но с прототипированием опыта виртуальной и дополненной реальности — VR и AR — возникают сложности.

Работа в трёхмерном пространстве сложнее: у пользователя есть разные углы обзора и больше способов взаимодействия. Кроме этого, VR — новая тема. Мы легко оцениваем трудозатраты на создание обычных приложений, так как целый день работаем с ними на плоских экранах. Даже микровзаимодействия не вызывают вопросов. Но что делать, если новая среда — неизведанная территория?

Прототипирование трёхмерного взаимодействия на плоскости просто не работает. Набросок или рисунок на раскадровке (storyboard) не передаст все нюансы решения, которое должно быть реализовано в VR.

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

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

Происходил примерно такой разговор:

— Погоди, ты думал, что ученики будут на самом деле строить ветряки?
— А ты думал, что не будут?

— Я думал, мы увидим количество производимой ветряками энергии.
— Да, смотри, будет меняться цвет.
— Почему цвет, а не число?

Чтобы выбраться из тупика, команда Moment изменила процесс. Они создали бумажные прототипы всех объектов, которые участвуют во взаимодействии. Виртуальные — из оранжевой бумаги, чтобы отличать их от реальных.

Затем они по ролям разыграли урок, на котором учитель и ученики используют платформу. Для большей точности они написали сценарий урока и реалистичный учебный план, ориентированный на 10-летних школьников.

Они сфотографировали урок и разместили фото на раскадровке со всеми необходимыми подписями, которые объясняли, что происходит. Как комикс.

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

  • Становится ли урок с этой технологией лучше?
  • Нужно ли добавить ещё компонентов для совместной работы?
  • Правильно ли то, что мы делаем акцент на конструировании реальных объектов?
  • Подсказывает ли 3D-модель, что делать ученикам?

Из статьи Андреа Эверман «Прототипирование для дополненной реальности» и описания проекта Peer.

Книга о прототипировании

Возможно, коллеги или просто знакомые джуниоры-проектировщики иногда спрашивают, что почитать о прототипировании, и в памяти всплывает «Прототипирование. Практическое руководство» Тодда Заки Варфела. Не рекомендую тратить время на эту книгу!

Она делится на 3 части:

  1. О пользе прототипов и о прототипировании в целом;
  2. Обзор и анализ инструментов прототипирования;
  3. О тестировании прототипов.

В ней всё по верхам. О первом хорошо написано в книге «Дизайн-мышление в бизнесе» и в курсе Design Thinking Action Lab. Третью часть благодаря меньшей сумбурности и большей детализации превосходит книга Стива Круга о тестировании.

Вторая часть устарела, даже если учесть, что бум инструментов для прототипирования был уже после её выхода. Axure рассматривается версии 5.5. На момент публикации русского перевода была уже версия 6.5 (о чём заботливо сообщил редактор). Сейчас я работаю в версии 8. А это значит, что устарели и анализ, и пошаговое «а теперь создадим наш первый прототип» с перечислением цепочки действий.

Актуален рассказ про бумажные прототипы, один приём я даже взял на вооружение. Но про бумагу есть отдельная книга, автор её упоминает: Paper Prototyping.

Впервые опубликовано в рассылке 11 сентября 2016 года.

Русскоязычные рассылки для дизайнера и проектировщика

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

Хотел узнать, что ещё кроме рассылки «Проектората» читают проектировщики. Получился любопытный список, который пригодится не только мне:

Читать далее Русскоязычные рассылки для дизайнера и проектировщика

Как стать проектировщиком: ответы на простые вопросы

Альберту нравилось и проектирование, и разработка. Он написал мне ВКонтакте и задал несколько простых вопросов о проектировании, чтобы определиться с областью.

Привожу наш диалог в отредактированном виде, чтобы ссылаться на него и не повторяться в будущем.

Читать далее Как стать проектировщиком: ответы на простые вопросы

Бесконечный скрол, пагинация и кнопка «Загрузить ещё»

Статью «Infinite Scrolling, Pagination Or „Load More“ Buttons? Usability Findings In eCommerce» написал Кристиан Холст 1 марта 2016 года. Сокращённый перевод: 14 минут чтения на английском → 5 минут на русском.

Baymard Institute исследует интерфейсы интернет-магазинов и публикует результаты своих наблюдений. Из тех, что я перевёл:

Сооснователь института Кристиан Холст сравнил шаблоны представления списка товаров:

  • Автоматическая подгрузка («бесконечный скрол»);
  • Постраничная навигация («пагинация»);
  • Кнопка «Загрузить ещё».

Постраничная навигация — решение по умолчанию на многих платформах электронной коммерции, поэтому встречается чаще всего. «Бесконечный скрол» иногда бывает неудобен: в результатах поиска и на мобильных. А вот «Загрузить ещё» в сочетании с «ленивой» подгрузкой товаров создаёт приятный опыт использования.

Читать далее Бесконечный скрол, пагинация и кнопка «Загрузить ещё»

Axure 7 для начинающих за 100 минут

В Epic Skills я рассказываю начинающим дизайнерам об Axure, инструменте для создания интерактивных прототипов. В течение 3 часов (минус небольшой перерыв) объясняю, как работают те возможности программы, которые нужны мне для большинства проектов. И закрепляю знания практикой.

Читать далее Axure 7 для начинающих за 100 минут