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

Статью «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 года.

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

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

Учёные, из-за которых мы залипаем в смартфонах

Статью «The scientists who make apps addictive» написал Айан Лесли в сентябре 2016 года.

Сокращённый перевод большой статьи из журнала 1843 (проект газеты The Economist) об учёных, которые сделали большой вклад в создание приложений, вызывающих привыкание.

Читать далее Учёные, из-за которых мы залипаем в смартфонах

Быстрые прототипы и 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 года.

Исследование Airbnb на рынке Китая

Статью «User research: Airbnb for the Chinese market» написала Джесси Чен 22 июля 2016 года. Джесси — UX/UI-дизайнер из Сан-Франциско. Она поделилась результатом пользовательского исследования того, как дизайн помогает межкультурному бизнесу Airbnb.

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

Читать далее Исследование Airbnb на рынке Китая

Дизайн в вакууме

Несколько интересных историй из книги Practical UX Design Скотта Фаранелло. Предлагаю вам занять место Генри Форда, посмеяться над корпорацией Кавасаки и ответить на вопрос, может ли творец жить в башне из слоновой кости.

Читать далее Дизайн в вакууме

Об иконках

Статью «On Icons» написал Оливер Райхенштейн 2 июня 2016 года.

Иконки экономят место и выглядят свежо. Иконки — это быстрый ответ на сложные вопросы:

  • Как сделать красивее?
  • Как нам это забрендировать?
  • Как сделать веселее?

Мы любим иконки. Пока не начинаем в них путаться.

Читать далее Об иконках

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

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

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

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

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

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

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

Микротекст: часть интерфейса, сильно влияющая на UX

Статью «Microcopy: Tiny Words With A Huge UX Impact» написал Николай Бабич 1 марта 2016 года.

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

Читать далее Микротекст: часть интерфейса, сильно влияющая на UX

Лучшая иконка — это текст

Статью «The best icon is a text label» написал Томас Байтибер 23 марта 2015 года.

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

Читать далее Лучшая иконка — это текст