Проектирование мобильных интерфейсов отличается от проектирования для настольных компьютеров. У мобильных интерфейсов меньше пространства, они работают от батареи, являются более личными устройствами, поддерживают сенсорное управление и, как правило, требуют подключения к интернету.
Хотя проектирование для десктопов по-прежнему актуально, популярность мобильных устройств стремительно растет. Все больше веб-трафика поступает с мобильных устройств, так как пользователи проводят всё больше времени в социальных сетях, совершают покупки, играют, смотрят видео и участвуют в рабочих встречах со своих смартфонов или планшетов. Поэтому дизайнеру важно учитывать контекст мобильного использования и технические ограничения, чтобы создавать удобные, интуитивные и функциональные интерфейсы.
Что такое мобильное устройство
Мобильное устройство — это гаджет, который можно легко носить с собой и использовать на ходу. Такие устройства имеют сенсорный экран, подключаются к интернету по беспроводной связи и помещаются в руке или сумке. Распространенные примеры — смартфоны, планшеты и умные часы.
Современные мобильные устройства делают намного больше, чем просто звонки или сообщения. У них есть камеры, карты и сенсоры, которые помогают в повседневных задачах. По сути, это карманные компьютеры.
Большинство людей сегодня используют мобильные устройства как основной способ выхода в интернет и взаимодействия с приложениями. Это делает мобильные устройства особенно важными для дизайнеров при разработке сайтов и приложений.
Типы мобильных устройств
В целом мобильные устройства делятся на следующие категории:
- Смартфоны: совмещают мобильный телефон и карманный компьютер в одном устройстве, которое можно носить в кармане и которое почти всегда подключено к интернету. Некоторые современные смартфоны могут раскрываться, превращаясь в планшеты.
- Планшеты: обладают теми же преимуществами, что и смартфоны, но имеют больший размер. Управляются пальцами или стилусом, часто распознают рукописный ввод. Лучше всего подходят для задач, требующих большой батареи и экрана — таких как презентации, игры и потоковое видео в высоком качестве.
- Носимые устройства (умные часы и фитнес-браслеты) и электронные книги: это более простые мобильные устройства, которые обеспечивают доступ к интернету и позволяют выполнять определенные задачи.
- Другие типы включают электронные ридеры вроде Kindle, предназначенные для чтения книг, и игровые устройства.
Некоторые источники относят ноутбуки к мобильным устройствам, однако они не попадают в эту категорию из-за большого размера, веса и невозможности комфортного использования одной рукой или на ходу.
Размер экрана
Размеры экранов мобильных устройств сильно различаются — от маленьких дисплеев умных часов около 1,5 дюймов до больших планшетов с диагональю более 12 дюймов. Большинство смартфонов обычно имеют экраны от 5 до 7 дюймов по диагонали. Это разнообразие создаёт вызов для дизайнеров, которым нужно разрабатывать интерфейсы, хорошо работающие на разных размерах экранов.
Наиболее распространённые размеры экранов следуют определённым шаблонам, основанным на стандартах производителей и предпочтениях пользователей. Например, размеры экранов iPhone варьируются от 4,7 до 6,9 дюймов, а смартфоны на Android предлагают ещё больше вариантов. Планшеты чаще всего имеют диагонали от 7 до 13 дюймов.
Понимание этих различий помогает дизайнерам создавать гибкие макеты, которые адаптируются к разным экранам без сбоев.
Плотность пикселей
Плотность пикселей означает, сколько пикселей умещается в одном дюйме экрана. Она измеряется в PPI (pixels per inch) или DPI (dots per inch). Более высокая плотность пикселей означает более чёткие и ясные изображения и текст. Современные смартфоны обычно имеют плотность от 300 до 500 PPI, а у планшетов она может быть немного ниже из-за большего размера экрана.
Производители устройств часто используют маркетинговые названия для экранов с высокой плотностью пикселей. Apple называет такие дисплеи «Retina Display» — впервые этот термин был применён при плотности 326 PPI в iPhone 4. Другие производители используют термины вроде «Super AMOLED» или «Liquid Retina», хотя они описывают также и другие характеристики, такие как точность цветопередачи, яркость, контрастность и технологии экрана.
Понимание плотности пикселей помогает дизайнерам создавать чёткую графику и удобочитаемый текст. Например, текст, который легко читается на экране с низкой плотностью, может казаться слишком мелким на экране с высокой плотностью, если масштабирование выполнено неправильно. Поэтому дизайнеры работают с относительными единицами, а не с фиксированными значениями в пикселях.
Ориентация
Портретная ориентация — самая распространённая для смартфонов, поэтому дизайнеры всегда должны начинать с проектирования именно для этого случая. Однако задача дизайнера — также обеспечить, чтобы интерфейс не ломался при повороте экрана в нестандартную ориентацию.
Разработка под альбомную ориентацию особенно важна, если в приложении предполагается частый ввод текста — большая клавиатура будет удобнее. Мобильные игры также часто используют альбомную ориентацию, так как для них важно большее горизонтальное пространство для обзора и удобства.
Пользователи должны иметь доступ ко всем основным функциям вне зависимости от того, как они держат устройство. Заставлять их менять ориентацию, чтобы получить доступ к базовой функциональности — плохая практика.
Типы клавиатур
При проектировании мобильных форм выбирайте соответствующие типы клавиатур для разных полей ввода, чтобы минимизировать усилия пользователя. Включайте цифровую клавиатуру для ввода телефонных номеров, PIN-кодов и чисел. Для полей электронной почты используйте клавиатуру с удобным доступом к символу @ и подсказками доменов — это значительно снижает стоимость взаимодействия, экономит время и помогает избежать случайных ошибок.
Используйте клавиатуру с иконкой поиска вместо клавиши возврата в поисковых полях. Для полей с паролем добавьте переключатель видимости пароля, чтобы пользователь мог убедиться в правильности ввода. Поля для ввода URL должны вызывать клавиатуру с быстрым доступом к популярным доменным зонам (.com, .org) и косой черте (/) для упрощения ввода веб-адресов.
Также поддерживайте альтернативные методы ввода наряду с традиционной клавиатурой. Голосовой ввод обеспечивает доступность без рук и важен для пользователей с нарушениями моторики. Включите поддержку ввода свайпом — пользователи могут скользить пальцем по буквам, формируя слова. Предлагайте предиктивный ввод, ускоряющий набор текста и снижающий количество ошибок, но при этом предоставьте возможность легко отключить эту функцию по желанию пользователя.
Мобильное использование против десктопного
Пользователи мобильных устройств, как правило, взаимодействуют с контентом в коротких и частых сессиях, в отличие от пользователей десктопов. Они часто пользуются устройством на ходу, в процессе многозадачности или в короткие промежутки времени, например, во время поездки. Это приводит к более целенаправленному, задачно-ориентированному поведению, когда пользователи стремятся быстро достичь конкретной цели.
Люди предпочитают мобильные устройства для просмотра, но возвращаются к десктопу, когда необходимо внимательно прочитать большой объём текста или принять важное решение, связанное с конфиденциальными данными. Десктопная версия сайта или продукта вызывает у пользователей больше доверия и чувства безопасности.
Также стоит помнить, что пользователи держат мобильное устройство ближе к лицу, чем экран настольного компьютера, но при этом чаще отвлекаются на окружающую обстановку. Сенсорный интерфейс требует достаточного пространства между интерактивными элементами, чтобы избежать случайных нажатий — в отличие от десктопов, где элементы могут располагаться плотнее, так как взаимодействие происходит с помощью мыши.
Жесты
Мобильные жесты — это касательные движения, управляющие функциями устройства. К ним относятся движения пальцами (нажатие, свайп, перетаскивание) и движения всего устройства (встряхивание, наклон, поворот). Системные жесты, такие как «щипок» для увеличения или уменьшения масштаба, хорошо известны большинству пользователей, тогда как жесты, характерные для отдельных приложений, часто выступают в роли ярлыков для продвинутых пользователей.
Распространённые жесты пальцами включают: нажатие (выбор), двойное нажатие (увеличение), долгое нажатие (вызов опций), свайп (переключение), щипок (уменьшение масштаба) и разведение пальцев (увеличение масштаба). К движениям устройства относятся: поворот экрана, встряхивание (например, для отмены действия) и наклон (например, в играх).
Тем не менее, у жестов есть важные ограничения. Основные сложности с управлением с помощью жестов связаны с их обнаруживаемостью (пользователи не видят, какие жесты доступны), непоследовательностью (в разных приложениях жесты могут означать разные действия) и доступностью (многие жесты требуют двух рук или точного моторного контроля). Всегда предоставляйте видимые альтернативные элементы управления и учитывайте потребности пользователей с разными возможностями и в различных контекстах использования.