Проектирование опыта взаимодействия с мобильным приложением

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

Основываясь на типичных вариантах поведения пользователей, Л. Вроблевски перечисляет следующие виды взаимодействия с мобильным интерфейсом [3, с. 22]:

  • — поиск (срочная информация, местный масштаб). Пользователь осуществляет поиск необходимой информации в связи со своим положением, например ориентирование на местности, сравнение цен на товары в разных магазинах;
  • — изучение / развлечение (скука, местный масштаб). Пользователь располагает некоторым временем, которое можно занять восприятием интересной информации или игрой (во время поездки в транспорте, ожидания в очереди, перерыва между делами и проч.);
  • — проверка / статус (повторяющиеся занятия, микрозадачи). Пользователь заинтересован получать некоторую оперативную информацию о состоянии дел или статусе, быть в курсе событий (общение в социальных сетях, чтение новостных лент, отслеживание курса валют и др.);
  • — редактирование / создание (срочное изменение, микрозадачи). Пользователь в оперативном режиме стремится что-то сделать (например, отредактировать документ, который был прислан по почте).

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

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

Основаниями для проектирования взаимодействия пользователя с мобильным интерфейсом заключается в специфике и способах ввода информации. Преобладающим вариантом является непосредственное манипулирование элементами интерфейса, что стало возможным за счет реализации «многоконтактных» (multi-touch) технологий сенсорных экранов.

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

Multi-touch-технология позволяет одновременно фиксировать координаты нескольких точек касания, идентифицировать пользователей и разнообразные жесты при манипуляциях в пределах сенсорного экрана. При работе с сенсорным экраном пользователь имеет возможность осуществлять управление графическими объектами при помощи нескольких пальцев рук (multi-finger) или пальцами двух рук (multi-hand) [21, с. 134J.

Характеристики контактного интерфейса зависят от параметров аппаратной и программной частей (таб. 2.1).

Таблица 2.1. Программная и аппаратная часть ТоисИ-интерфейса

Программная часть

Аппаратная часть

Свойства сенсорной панели:

  • — разрешение,
  • — чувствительность к силе нажатия,
  • — возможности масштабирования и позиционирования переносимых объектов

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

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

  • 1) дисплеев (ЭЛТ или ЖК) и накладной чувствительной прозрачной пленки;
  • 2) проецируемого изображения и чувствительной к нажатию панели;
  • 3) видеокамер, фиксирующих положение пальцев человека.

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

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

Манипуляция — это незамедлительная реакции объекта или элемента пользовательского интерфейса на жест.

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

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

  • 1) сложность исследования и описания наиболее типичных жестов, на основе которых осуществляется определенного типа манипуляция, и определение цели их использования;
  • 2) сложность определения расположения и размеров активных элементов, а точнее, их визуальных и сенсорных целей (зон) касания;
  • 3) необходимость продумывания того, как и чем заменить привычные для пользователя способы манипуляции, осуществляемые при помощи мыши. Важно помнить, что манипулирование при помощи мыши значительно отличается от манипулирования при помощи пальцев с точки зрения точности и скорости попадания в активную зону, а также вариантов жестов.

При использовании любой технологии контекстного взаимодействия распознавание жестов осуществляется путем оцифровки (построения растрой сетки) изображения указателей (пальцев, стилосов). В результате описываются следующие параметры: положение, ориентация, векторы движений при перемещении и повороте объектов [21, с. 134].

Л. Вроблевски, Д. Уиллис, К. Вилламори, проанализировав техническую документацию разных мобильных платформ и контактных устройств: IOS и OS компании Apple; Android компании Google; WindowsPhone и Surface компании Microsoft; WebOS компании Palm; графического планшета Bamboo компании Wacom. Они составили руководство по жестам, используемым для Touch-интерфейсов [76]. Это руководство (lukew.com) содержит задачи пользователей, типичные жесты, соответствующие задачам, и их описание, указывается также способ реализации действия на соответствующих платформах. Типичный набор действий для каждой из платформ:

  • — одинарное или двойное нажатие;
  • — продолжительное нажатие;
  • — перемещение;
  • — пролистывание;
  • — масштабирование;
  • — продолжительное нажатие с перемещением;
  • — разновидности поворотов.

В Приложении Д представлены наиболее часто используемые жесты.

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

Как отмечалось ранее, экраны мобильных устройств малы, что приводит к необходимости упрощения интерфейса, уменьшения числа и размера активных элементов. В связи с этим в технических руководствах мобильных операционных систем зафиксированы рекомендации размеров и расположения зон касания на сенсорных экранах. Ст. Хубер (81. НооЬег) указывает три аспекта в отношении определения зоны касания:

  • 1) дизайн визуальных целей (активных зон касания);
  • 2) дизайн сенсорных целей (зон касания);
  • 3) учет и предотвращение ошибочных действий [62]. Визуальные цели — индикация зоны касания — призваны привлекать внимание и указывать на активные элементы интерфейса, поэтому они должны быть легко распознаваемыми, достаточно заметными и отображать несколько состояний (неактивное и активное). Ст. Хубер (81. НооЬег) приводит расширенные данные о размерах визуальных зон с учетом размеров экранов мобильных устройств и требований разных операционных систем (табл. 2.2).

Таблица 2.2. Размеры визуальных зон с учетом размеров экранов устройств

[62]

Тип элемента

Экран 2,5 дюйма

Экран 3,5—5 дюймов

Экран 9—10 дюймов

Текст

4 пт / 1,4 мм

6 пт / 2,1 мм

8 пт / 2,8 мм

Иконки

6 пт / 2,1 мм

8 пт / 2,8 мм

10 пт / 3,5 мм

При проектировании визуальных целей важно учитывать, что рука и пальцы пользователя во время работы закрывают часть экрана, поэтому измененное (активное) состояние зоны касания должно находиться в видимой (на закрытой) области экрана. Ст. Хубер проводил исследование, которое заключалось в наблюдении за тем, как люди взаимодействуют со смартфонами в различных местах. Было выявлено три основных варианта использования [61].

  • 1. Пользователь держит смартфон одной рукой и работает одним большим пальцем — преобладающий способ использования пользователя в движении, когда вторая рука занята (в процессе ходьбы, в магазине, в транспорте и др.). На рис. 2.3 выделены зоны комфортной и легкой работы, зоны довольно легкой работы с меньшим комфортом, зоны крайне затруднительного использования.
  • 2. Пользователь обхватывает телефон одной рукой, а второй поддерживает и работает большим пальцем или не поддерживает и работает указательным пальцем (рис. 2.4). Такой способ работы позволяет стабилизировать телефон, т.е. нивелировать тряску,
Удерживание и работа со смартфоном одной рукой

Рис 2.3. Удерживание и работа со смартфоном одной рукой

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

Удерживание смартфона одной рукой, и работа пальцем второй руки

Рис 2.4. Удерживание смартфона одной рукой, и работа пальцем второй руки

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

Удерживание смартфона двумя руками, работа двумя большими пальцами

Рис 2.5. Удерживание смартфона двумя руками, работа двумя большими пальцами

Рассмотрев эти варианты, можно указать некоторые аспекты, на которые стоит обратить внимание:

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

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

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

Распознавание размера пятна касания зависит от типа сенсорного дисплея. В настоящее время чаще всего используются емкостные или резистивные дисплеи. Фиксирование координат и размеров зон касания на емкостных дисплеях основано на изменениях электрического поля, возникающих в ответ на касание пальцем [41]. Резистивные дисплеи позволяют распознавать и точку касания, определяя координаты и давление на специальный слой

Размер зон касания в зависимости от давления

Рис. 2.6. Размер зон касания в зависимости от давления

поверхности экрана [41]. Именно такой тип дисплея используется для производства мобильных устройств.

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

Рекомендуется определять размер зон касания в мм (или пт), а не пикселях, поскольку экраны разных устройств имеют разное разрешение и соответственно варьируемый размер пикселей. В руководстве компании Microsoft рекомендуется делать минимальный размер зоны касания не менее 7x7 мм, максимальный — не более 9x9 мм, а минимальное расстояние между touch-зонами должно быть не менее 2 мм [73].

Ст. Хубер относительно сенсорных целей приводит несколько другие цифры: минимум — 17 пт / 6 мм, предпочтительно — 23 пт / 8 мм, максимум — 43 пт / 15 мм. Расстояние между целями с условием исключения помех: минимум — 23 пт / 8 мм, предпочтительно — 28 пт / 10 мм [62].

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

  • — лучше использовать стандартные элементы управления и типичные жесты в целях поддержания имеющегося у пользователя опыта контактного взаимодействия;
  • — командные кнопки, а также наиболее важные и часто используемые элементы управления надо делать более заметными визуально и увеличивать зону касания (не менее 10x10 мм);
  • — зоны касания лучше делать избыточными по сравнению с визуальными целями. Так, например, текст ссылки может быть заметен, но мал для активации. В некоторых случаях текст делают более крупным, но лучше увеличить и подсветить окружающую зону;
  • — расстояние между активными элементами должно быть заметным и достаточным, чтобы исключить активацию нескольких рядом расположенных зон касания. В руководстве о проектировании UX для touch-интерфейсов компании Microsoft рекомендовано увеличивать высоту активных строк списков меню, а также вертикальное расстояние между вариантами выбора. Рекомендуемый интервал лучше определять не визуально, а «на ощупь»;
  • — небольшие по размеру элементы управления лучше не располагать близко к границам сенсорного экрана, что может затруднить их нажатие;
  • — при уменьшении интервала между кнопками необходимо увеличивать их размер;
  • — в случае необходимости обеспечивать плавное панорамирование и масштабирование, при этом контактные точки должны оставаться под пальцами;
  • — необходимо снабжать пользователей контекстными подсказками о возможности использования определенных жестов, в особенности это актуально при реализации нетипичных жестов или их использования в нестандартных ситуациях.

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

  • — обеспечить пользователя заметной и удобной командой «Отмена / Возврат», что позволяет последовательно возвращаться к предыдущему действию. При этом по возможности необходимо обеспечить сохранение предыдущих этапов работы;
  • — обеспечить пользователя доступным и легким способом исправления ошибок и повторного ввода информации;
  • — по возможности указать при помощи сопротивления движению, что определенные жесты невыполнимы. Иными словами, если жест невозможен, то пользователь должен это точно понять, а не думать, что произошел какой-то сбой. Если масштабирование страницы не предусмотрено, то при разведении пальцами экран может немного сотрясаться, как бы демонстрируя замкнутость в имеющихся размерах;
  • — использовать средства (кнопки, формы и др.) для подтверждения пользователем каких-то критичных действий (например, перенос элемента в корзину) или команд, которые могут привести к непредвиденным последствиям (например, применить внесенные изменения);
  • — критичные активные элементы (например, кнопка «Удалить»), лучше располагать вне зоны комфортной работы, но в хорошо обозреваемой зоне (не под пальцем), чтобы избежать автоматического нажатия;
  • — по возможности научить устройство идентифицировать характер и типы случайных действий (не критичных для работы), чтобы их автоматически исправлять или игнорировать и не загружать пользователя постоянными подтверждениями [73].

При проектировании мобильных интерфейсов количество и организация информационного содержания приобретает критическое значение. Я. Нильсен вместе с коллегами исследовательской группы Нильсена—Нормана тестировали мобильные интерфейсы с позиции количества и объема читаемых текстов и качества их понимания разными пользователями. В результате ученые сделали выводы, что чтение с небольших экранов мобильных устройств несомненно увеличивает когнитивную нагрузку, что значительно затрудняет восприятие и понимание текста. Усложняют эту ситуацию длинные тексты, так как кратковременная память человека ограничивает количество запоминаемой информации на прокручиваемых по вертикали экранах и на экранах, следующих друг за другом в результате использования элементов навигации. Я. Нильсен также указывает, что количество функциональных возможностей должно быть ограничено, и они должны быть связаны исключительно с актуальными задачами и потребностями пользователей. В связи с этим существуют жесткие ограничения [68]:

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

Л. Вроблевски формулирует непреложное правило в отношении проектирования мобильных интерфейсов: «Контент всегда должен иметь приоритет над навигацией» [3, с. 23]. Иными словами, пользователи в первую очередь должны иметь возможность понять, зачем нужно приложение и чем оно полезно, а после разбираться с навигацией и способами взаимодействия для решения своих задач.

При проектировании мобильного интерфейса важно учитывать специфические требования к подготовке и организации контента:

  • — четко сформулировать задачи, которые может решить пользователь в заданных условиях, и функциональные возможности;
  • — привязать контент к функциям, т.е. организовать и сформулировать информацию так, чтобы она помогала и облегчала использование программы;
  • — использовать лаконичный и простой, чистый и целенаправленный язык в описаниях, а также единый литературный стиль, который близок пользователям и соответствует концепции и визуальной стилистике информационного проекта;
  • — объемную информацию, предназначенную для чтения, следует организовать в виде, пригодном для восприятия на маленьком экране, используя правило «перевернутой пирамиды»: самые важные сведения и выводы в начале страницы; ключевые слова и критические данные в начале абзацев, в заголовках и подзаголовках и др.;
  • — дифференцировать информацию для упрощения восприятия, используя заголовки и подзаголовки с ключевыми словами, что поможет пользователю сориентироваться в информационном наполнении и оценить полезность информации, располагаемой ниже;
  • — формулировать тест ссылок и названия активных элементов, с одной стороны, коротко и ясно, а с другой стороны, с учетом всех сведений, которые будут адекватно описывать результат, получаемый после активации соответствующего элемента. Корректное название позволит пользователю определить то, насколько ему интересен ресурс, к которому ведет ссылка, а также уровень затрат времени и средств. В связи с этим текст ссылки должен содержать ключевые слова, четко указывающие на то, что произойдет, а также может включать дополнительные сведения о типе данных, формате и размере загружаемого документа и проч. Если пользователь не сможет на данном мобильном устройстве воспользоваться переходом или загрузить какие-то сведения, то он позже должен иметь возможность сделать это на другом устройстве (например, на ПК).

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

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

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

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

  • — PowerMockup (www.powermockup.com);
  • — Fluid UI (www.fluidui.com);
  • — Wireframe.ee (wireframe.ee);
  • — Balsamiq Mockups (balsamiq.com);
  • — NinjaMock (http://ninjamock.com/);
  • — AxureRP (http://www.axure.com/) и др.

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

Информационная архитектура соотносится с пользовательскими историями, которые декларируют то, как пользователь опреде-

ленной категории ищет информацию и совершает действия [34]. Например, имеется задача, связанная с регистрацией на сайте и последующей авторизацией. Регистрация включает следующую последовательность действий: ввод личных данных пользователя, программная проверка их адекватности, определение логина и пароля, проверка безопасности и окончание регистрации (сохранение данных).

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

Допустим, для банковского приложения могут быть предусмотрены следующие истории:

  • 1) «приветствие» (один или несколько экранов с демонстрацией назначения приложения);
  • 2) «регистрация и авторизация» (обеспечивается вход в личный кабинет);
  • 3) «отчет о состоянии» (общая информация о состоянии счетов);
  • 4) «платежи» (варианты платежей: ЖКХ, телефон, штрафы и проч.) и другие истории. На рис. 2.7 продемонстрирован пример схемы экранов приложения.

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

Таблица 2.3. Характеристика схем навигации мобильного интерфейса

Широкая структура

Глубокая структура

Особенности

Множество элементов навигации на одном экране, повторяются на большинстве экранов

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

Достоинства

Пользователь имеет возможность ознакомиться со всем набором возможностей и перейти сразу к решению запланированной задачи

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

Окончание табл. 2.3

Широкая структура

Глубокая структура

Недостатки

Длинный список ссылок может не уместиться на

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

жестами

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

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

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

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

Пример схемы экранов приложения

Рис. 2.7. Пример схемы экранов приложения

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

  • — при слишком большом числе элементов для облегчения выбора нужно продумать дополнительную группировку (например, события, которые происходят ежемесячно, разделить по интервалам типа [2010 г.], [2011 г.], [2012 г.] и т.д.), предусмотреть форму поиска или реорганизовать список с учетом частоты запроса (например, в начале списка наиболее часто выбираемые элементы, а далее все остальные согласно правилу группировки);
  • — узкая схема навигации возможна, когда последовательность действий пользователям хорошо изучена;
  • — оптимальной длиной пути до целевого экрана является 3—4 перехода;
  • — при сокращении числа постоянных элементов навигации можно предусмотреть варианты выпадающего меню (аналог контекстного меню GUI-интерфейса). Л. Вроблевски в данном случае предлагает использовать следующие варианты [3]:
  • — выпадающее меню может быть организовано непосредственно на экране;
  • — оно появляется при нажатии, а выбор осуществляется пролистыванием;
  • — оно выносится на отдельный экран.

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

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

  • 1) удобство ввода информации и активизации элементов управления;
  • 2) комфортность визуального восприятия.

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

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

В отношении удобства ввода информации важно предусмотреть все возможные варианты облегчения ввода и альтернативные способы вводу текста. Размер кнопок виртуальной клавиатуры часто меньше (особенно при вертикальном расположении экрана), чем минимально требуемая величина (см. выше размеры touch-зон). В отношении мобильных интерфейсов сохраняются большинство привычных для пользователей ПК форм ввода: чекбоксы (флажки), радиокнопки, поля ввода текста и поля ввода пароля, выпадающие списки, кнопки отправки, поля выбора файла. Однако, несмотря на наличие разных вариантов форм ввода, основным способом остается набор текста. Рассмотрим способы облегчения ввода текстовой информации на мобильном устройстве:

  • — при необходимости ввода текстовой информации пользователем важно свести количество обязательного текста к минимуму (например, делать URL-адреса более короткими);
  • — по возможности предоставлять пользователю возможность воспользоваться альтернативными способами ввода информации вместо текста (например, фото местности, которую узнает приложение);
  • — сохранять информацию, которую пользователь уже вводил. При этом важно предоставить пользователю самостоятельно разрешить программе сохранять вид уже заполненной формы (например, сохранять пароль);
  • — сопровождать поля ввода пояснениями (метка label). В приложениях многих мобильных платформ текст с пояснением прописывается уже внутри поля ввода. Однако такое пояснение не должно становиться частью ответа пользователя (или запроса поиска) или похожим на текст, который может ввести пользователь;
  • — в некоторые формы при первоначальном заполнении можно включить значения по умолчанию, которые либо чаше всего вводятся по статистике другими посетителями, либо получены из иных источников устройством (например, город может идентифицироваться посредством индикации зоны подключения);
  • — использовать функцию автозаполнения, когда по нескольким первым символам или словам достраивается соответственно слово или фраза;
  • — автоматически устанавливать формат и язык ввода информации, чтобы избавить пользователя от излишних настроек;
  • — по возможности использовать маски ввода, которые задают

параметры и ограничивают объем вводимых данных. Допустим, при вводе номера сотового оператора на территории РФ маска ограничит набор текстовых символов и укажет границы ввода с учетом количества символов вот так: +7 (_)-_-_-_. Пользова

телю останется ввести цифры, не заботясь о форме записи.

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

  • 1) последовательный набор полей включает в себя перечень вопросов, на которые необходимо ответить пользователю, чтобы решить некоторую задачу, например зарегистрироваться на сайте или осуществить заказ товара в интернет-магазине. В данном случае необходимо стремиться свести к минимуму количество полей для заполнения и удалить лишние;
  • 2) нелинейный набор полей, предполагающий их организацию в виде тематических групп на отдельных экранах или в виде раскрывающихся разделов при активации главного элемента. Например, при редактировании личных данных в социальной сети можно обращаться к разным разделам: «личная информация», «образование», «трудовая деятельность»;
  • 3) контекстный ввод организуется в виде поля ввода в тексте страницы.

Для обеспечения комфортности визуального восприятия важно учитывать требования к минимальным размерам активных элементов и текста на экране.

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

1. Тип шрифта. Для представления текста используется максимум одна-две гарнитуры с полужирным или простым начертанием.

Корректность отображения шрифта следует тестировать на разных устройствах.

Лучше всего читаются шрифты «без засечек» (SansSerif) и с четкими контурами (Verdana, Arial и т.п.), поэтому для них возможно уменьшение кегля. Шрифты «с засечками» (Serif) представляют собой графически выделенные верхние и нижние окончания букв (засечки), которые как бы соединяют буквы друг с другом. Они предназначены для написания длинных текстов (множество строк), поскольку ускоряют чтение множества строк (задают ритм). Для таких шрифтов лучше увеличивать размер текста, чтобы избежать слияния букв. Рукописные шрифты, которые были придуманы не для быстрого чтения текста, а для быстрого написания, читаются сложнее всего. На рис. 2.8 видно, что самым читаемым является заголовок, набранный шрифтом без засечек (Arial).

Тенденции современного рынка Тенденции современного рынка

тенденции современного РЫНКА

'MteHfeHquu сав^ежеННого fiutuca

Рис. 2.8. Влияние типа шрифта на удобочитаемость текста

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

Тенденции соплеменного рынка

Тенденции современного рынка

Рис. 2.9. Варианты контрастности шрифта по отношению к фону

4. Ясность шрифта определяет быструю узнаваемость букв. Если рисунок шрифта будет слишком замысловатым, то это снизит скорость чтения.

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

Тенденции современного рынка 1ГЄГ40ЄГ4СДПП СО0г>СҐиїСГ4Г4О5о Р151Г4І?0

Рис. 2.10. Три варианта шрифтов для одного заголовка

5. Стилевое и смысловое единство. При выборе шрифта важно учитывать не только читаемость, но и контекст. На общее восприятие текста влияет связь рисунка букв с содержанием текста, образность шрифта, а также стилевое единство шрифта и общего оформления презентации. В зависимости от цели, настроения, содержания презентации можно подобрать шрифт с соответствующим рисунком (рис. 2.11).

Arial — стабильный, конформистский Times new Roman — традиционный, профессильнальный Comic Sans — комичный, неформальный Tahoma — открытый юный

Рис. 2.11. Варианты гарнитур шрифта с личными особенностями

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

При использовании изображений важно стремиться к их оптимизации по габаритным размерам и объему памяти, необходимой для их хранения. Так, по сведениям разных источников рекомендуется включать в интерфейс мобильных приложений изображения размером не более 120 х 120 пикселей и объемом до 20 кБ. На экране малого размера многие изображения могут быть крайне малы, что делает невозможным просмотр деталей. Если изображение информативно и будет полезно пользователям, то его стоит делать крупнее, предусмотрев возможность масштабирования. В противоположной ситуации от изображения лучше отказаться.

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

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

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

 
< Пред   СОДЕРЖАНИЕ     След >