Ограничения мобильного UX-дизайна, лучшие практики и работа с разработчиками

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

Что такое мобильный UX-дизайн?

В недавней статье на TechCrunch указывалось, что на мобильную электронную коммерцию приходилось почти треть всех онлайн-продаж в праздничный период Дня благодарения в 2018 году, а Digital Trends сообщил в 2017 году, что 5 миллиардов человек во всем мире теперь имеют мобильные устройства. Google также объявил, что индексирование с приоритетом мобильных устройств теперь используется более чем для половины веб-страниц в его результатах поиска.

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

Дизайн взаимодействия с мобильным пользователем (UX) относится к дизайну положительного опыта при использовании мобильных устройств и носимых устройств, а также приложений или сервисов, работающих на таких устройствах… Дизайн мобильного UX сильно ориентирован на эффективность и возможность обнаружения. - Фонд интерактивного дизайна

Для дизайнеров UX эти тенденции мобильных устройств представляют собой как проблемы, так и возможности. С одной стороны, мы должны учитывать разнообразие устройств и способов их использования. С другой стороны, это открывает совершенно новый набор направлений в UX-дизайне, а это означает создание положительного опыта для совершенно нового поколения пользователей.

Лучшие практики мобильного UX-дизайна

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

25 советов по мобильному UX-дизайну от Google

В 2015 году Google опубликовал 25 лучших практик мобильного UX-дизайна, основанных на внутренних исследованиях. Эти советы были недавно обновлены, чтобы сделать их более актуальными. Автор также включает загружаемый PDF-файл со всеми 25 советами, которые приятно держать под рукой для любого мобильного UX-проекта.

Рекомендации Apple по человеческому интерфейсу

Еще один отличный ресурс, который нужно держать под рукой, — руководство Apple по человеческому интерфейсу для мобильного дизайна. Они легко читаются, имеют красивый макет и приправлены передовым опытом, советами и собственным подходом Apple к принципам дизайна. Для дизайнеров мобильных UX эти рекомендации являются отличным ресурсом для обеспечения высококачественного взаимодействия с пользователем.

Дополнительные рекомендации по мобильному UX

Вот еще несколько лучших практик мобильного UX-дизайна, которые могут быть не так известны, как Google, но не менее важны для мобильных дизайнеров.

• UX-исследования . В какой-то момент мы можем почувствовать склонность сразу перейти к макетам или прототипам, однако сначала провести надлежащее исследование UX — это то, что нельзя недооценивать. Всегда помните, что «вы не ваш пользователь», и положительный пользовательский опыт в каждом случае зависит от тщательного исследования UX. Вот подробное руководство Adobe по методам исследования UX для дальнейшего использования.
• Беспорядок . Мы все испытывали тревогу из-за беспорядка на рабочем столе — представьте себе это на мобильном устройстве! Каждая добавленная кнопка, изображение, фрагмент контента и т. д. делает все намного сложнее. Это хорошая идея — избавиться от всего, что не является абсолютно необходимым в мобильном интерфейсе. Отличный совет — стремиться к минимализму, но не в ущерб удобству использования. Часто этого можно достичь, установив приоритет одного основного действия на каждом экране.
• Расставить приоритеты . Существует тенденция пытаться добавить как можно больше функций. Мы считаем, что если что-то убрать, это каким-то образом создаст меньше впечатлений для пользователей. Наоборот, сфокусируйте функции на основных целях и улучшите дизайн, проанализировав, какие функции используются чаще всего, а затем приложите усилия, чтобы сделать эти функции интуитивно понятными и приятными.
• Коснитесь Цели . Пользователи могут физически разозлиться и начать бить свои мобильные устройства, когда они нажимают на что-то, а оно не отвечает. Исследование, проведенное в Массачусетском технологическом институте, показало, что они нажимали на что-то слишком маленькое. Лучше всего создавать элементы управления, кнопки, ссылки и т. д. (все, что является мишенью для касания) не менее 7–10 мм, что соответствует средней ширине кончика пальца. Также рекомендуется обеспечить достаточное расстояние между этими элементами пользовательского интерфейса.
• Разборчивый текст . Поскольку многое из того, что делают пользователи, основано на потреблении контента, чтобы обеспечить единообразие работы на всех типах мобильных устройств, убедитесь, что вы выбрали шрифты, которые хорошо работают в разных размерах и весах. Рекомендуется размер шрифта не менее 11 пунктов, чтобы уменьшить нагрузку на глаза. Чистые и легко читаемые шрифты, такие как Roboto и Noto от Google или новый шрифт San Francisco от Apple, — отличный выбор для изучения.
• Обратная связь пользовательского интерфейса . Хорошо разработанные приложения информируют нас о том, как мы с ними взаимодействуем. Отсутствие хорошей обратной связи может сбить пользователей с толку и заставить их задаться вопросом, произошло ли что-то, происходит или почему это произошло/не произошло. Лучше всего использовать различные формы обратной связи (звук, тактильные ощущения, визуализация) в зависимости от элемента пользовательского интерфейса или текущего состояния приложения.
• Доступность . Вероятно, это один из самых недооцененных аспектов дизайна пользовательского интерфейса и особенно мобильного UX-дизайна. 15% населения мира имеют ту или иную форму инвалидности. Руководство по обеспечению доступности веб-контента — это свободно доступный ресурс, а для цифровых дизайнеров он обязательно должен быть в их наборе инструментов.

Ограничения мобильного UX-дизайна

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

Ограничения хранения

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

Мобильное приложение, в отличие от веб-приложения, использует хранилище прямо на мобильном устройстве. Это влияет на дизайн мобильного UX, поскольку вводит потенциальные ограничения на качество видео, аудио и изображений, которые можно использовать.

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

Экраны и элементы управления

Еще одно ограничение, с которым мы сталкиваемся при разработке мобильного UX, — это размер экрана и элементы управления на наших мобильных устройствах.

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

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

Окружающая обстановка

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

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

Маленький размер экрана, одно окно

Еще одно ограничение, с которым сталкиваются дизайнеры мобильного UX-дизайна, — это ограниченный размер экрана. Из-за этого люди могут видеть только одно окно за раз, и это сильно ограничивает пользовательский опыт.

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

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

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

Как люди держат мобильные устройства

Есть еще одно ограничение, о котором следует помнить: держать наши гаджеты. Как люди их держат и что это значит для мобильного UX-дизайна?

Согласно исследованию Стивена Хубера, изложенному в книге «Дизайн для пальцев, прикосновений и людей, часть 2», было обнаружено, что люди по-разному взаимодействуют со своими устройствами в зависимости от того, как они их держат, что впоследствии оказывает влияние на мобильный UX-дизайн.

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

Вот несколько дополнительных советов по мобильному UX из исследования Стивена:

• Дизайн для каждого пользователя и любого типа и размера мобильного устройства
• Дизайн для всех различных способов работы людей со своими устройствами
• Учтите, что в большинстве случаев пользователи предпочитают касаться центра экрана.
• Разместите ключевые действия в средней половине или двух третях экрана.
• Убедитесь, что пальцы не закрывают содержимое
• Выбираемые элементы должны быть достаточно большими, чтобы их было удобно нажимать.

Работа с разработчиками

Независимо от того, работаете ли вы в гибкой/бережливой среде UX или нет, именно разработчики должны интерпретировать и реализовывать проекты, которые были так тщательно созданы. Рекомендуется заранее установить с разработчиками проверенные и настоящие передовые методы, чтобы убедиться, что проекты реализованы так, как задумано. Вот несколько предложений и советов.

Мокапы

При подготовке и передаче макетов старайтесь, чтобы имена файлов были простыми, последовательными и описательными. Это сэкономит много времени на переходы туда и обратно. Также рекомендуется завершить все макеты, прежде чем делиться ими с разработчиками, чтобы они получали только одну версию каждого экрана. Еще один совет, позволяющий сэкономить время, — протестировать все взаимодействия с прототипами, чтобы они работали и функционировали. Хорошие инструменты для обмена мокапами: InVision и Marvel .

Функциональные характеристики

Большая часть работы, выполняемой UX-дизайнерами, связана с разработчиками на ранних стадиях проекта, и отличный способ облегчить постоянное понимание процесса проектирования и создать лучшую линию связи — это создать и использовать документ функциональной спецификации или «функциональное описание». - Спец.

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

Хороший пример работающей Func-Spec показан ниже:

Копировать

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

Как показано выше, контекст помогает разработчику понять, когда сообщение должно появиться или исчезнуть. Он должен сообщать разработчику, что происходит, чтобы ему не приходилось гадать. Сообщение является фактической копией, которая появится. Используйте настоящую копию, а не тарабарщину (например, lorem ipsum). Разработчики не хотят быть копирайтерами, и мы хотим максимально упростить для них задачу.

Характеристики

Это одна из самых важных частей обмена проектами с разработчиками. Вот где такие инструменты, как Zeplin и InVision Inspect, действительно блестят, потому что они заботятся о передаче спецификаций, таких как размеры, руководства по стилю, шрифты, поток взаимодействия с пользователем и то, как работает каждая часть дизайна.

Общение в реальной жизни (в реальной жизни)

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

Связывание всего вместе

Мобильный не уходит. В 2016 году количество пользователей, выходящих в Интернет с мобильных устройств, впервые превысило число пользователей настольных компьютеров. Для UX-дизайнеров более широкое внедрение мобильных устройств и распространение различных типов устройств сделает дизайн взаимодействия с пользователем намного более сложным.

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

• • •

Дальнейшее чтение в блоге Toptal Design:

• Принципы дизайна и их важность
• Лучшие портфолио дизайнеров UX — вдохновляющие тематические исследования и примеры
• Изучение гештальт-принципов дизайна
• Adobe XD против Sketch — какой UX-инструмент вам подходит?
• 10 UX-результатов, которые используют лучшие дизайнеры