Думай как разработчик: дизайн пограничных состояний

С одной стороны разработка программного обеспечения, с другой — процессы и языки UX-дизайна. Как преодолеть пропасть между ними?

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

Что такое пограничное состояние (edge кейс)?

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

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

Пример непоправимой ошибки в результате столкновения пользователя и пограничного состояния. Источник.

Что я подразумеваю под фразой «создавайте дизайн для пограничных случаев»? Это причудливый способ сказать вам: думайте о каждом вашем пользователе. Вы можете разрабатывать дизайн для edge кейсов, прибегая к отладке с помощью экстремальных пользователей и локализуя не только для языков, но и для культур.

Отладка с экстремальными пользователями

Грейс Хоппер обнаружила первый в истории баг. Источник.

Иногда приложения для программного обеспечения сталкиваются как с программными, так и с аппаратными ошибками, которые возникают из-за багов (проблем в коде). Грейс Хоппер, одна из первых женщин-программистов, обнаружила первый программный «баг» (от англ. bug — букашка). Она нашла мотылька в одном из компонентов компьютера Mark II. Кто знает, что он там забыл, но с тех пор именно баги стали виновниками всех ошибок в работе программного обеспечения.

Отличным способом отладки проблем в вашем дизайне будет изучение экстремальных пользователей — людей, у которых все cлетает почти сразу, а также тех, у кого программа летает так быстро, что они были бы не прочь, если бы она превратилась в ракету. Если говорить серьезно, экстремальные пользователи — это либо «отрицатели», которые удаляют ваше приложение или перестают им пользоваться вскоре после установки, либо продвинутые пользователи, юзающие ваш продукт и днем, и ночью. Экстремалы играют важную роль, так как помогают вам определить все уязвимые места.

Отрицатели < Большинство пользователей > Продвинутые пользователи. Источник.

Каждую неделю мы выделяем несколько часов рабочего времени на общение с нашими пользователями. Продвинутые юзеры могут задавать нам вопросы с помощью платформы обмена сообщениями. Обычно к таким обсуждениям присоединяются люди из службы поддержки и из продакт-команды.

На первых стадиях работы приложения Periscope прямые эфиры исчезали через 24 часа. Однажды мы получили фидбек от одного из продвинутых пользователей о том, что его/ее фанаты делали скриншоты во время эфира, и человек никак не мог об этом узнать. Ситуация была довольно неоднозначной, так как мы обещали своим пользователям, что их эфиры будут исчезать бесследно. И мы хотели решить эту деликатную проблему наиболее осмотрительным образом.

Сердечко в виде камеры (Periscope)

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

Локализация: знайте свою аудиторию

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

Вот ряд вопросов, которые вам необходимо задать самому себе, создавая дизайн для последующей локализации:

Самый элементарный вопрос: на каком языке вы разрабатываете дизайн?

Мы разрабатываем дизайн на английском, так как он — общая основа и известен каждому в нашей команде. Покажу на конкретном примере: текст кнопок. У фразы «Go live» (Выйти в прямой эфир) есть одна проблема: слово «live» можно прочитать как [lɪv] и как [laɪv]. А так как суть Твиттера — передавать то, что происходит именно сейчас, мы решили, что LIVE, написанное заглавными буквами, будет читаться как [laɪv]. Помимо использования заглавных букв, мы также часто помещаем это слово в красную прямоугольную рамку и вставляем ее как значок «прямой эфир» на тв.

Какие переводы вы включаете в ваши дизайны?

Использование переводов в мокапах может иметь ОГРОМНОЕ значение.

К тому же, нам важно разрабатывать дизайн для некоторых наших крупнейших рынков. Это довольно просто сделать, помещая в мокапы уже переведенный текст. Например, вернемся к уже упомянутому нами тексту на кнопках. Одни из наших самых больших рынков это Турция и Россия, и переведенные фразы «Canlı Yayın Başlat» и «начать трансляцию в прямом эфире» в соответствующем контексте выглядят гораздо длиннее.

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

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

Использование образа пера для иконки создания поста в Twitter.

Создание твита можно считать самым важным действием на всей платформе. Однако западный образ пера как инструмента для письма не сработает на Востоке. Например, в Японии — одном из наших самых быстрорастущих рынков — никогда не использовались перья, только кисти. Исследование показало, что очень многие японцы нажимали на иконку, пытаясь обновить ленту, так как для них она была похожа на кнопку «Обновить». В итоге мы пришли к решению поместить на иконку всего одно слово: Tweet («твитнуть»). Твитнуть — это слово, придуманное Twitter. И оно универсально для всех пользователей платформы.

От программного обеспечения к дизайну

Основные термины для запоминания:

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

Программный баг — проблема в программе, из-за которой возникает программная ошибка.

Отладка — решение проблемы в программе.

Локализация в программном обеспечении — перевод и адаптация программы.

Основные процессы для запоминания:

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

Отладка с экстремальными пользователями: они могут поделиться оценкой пользовательского опыта изнутри.

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

Чтобы стать супердизайнером, надо думать как разработчик. Источник.

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

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

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