UX_UI_Design_DNA

Исследования

Дизайн мобильных приложений: как надо правильно

Admin

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

Краткая история тачскрина

История взаимодействия человека с экранами устройств началась со стилуса. Эта тонкая длинная палочка была предшественником компьютерной мыши, и, в принципе позволяла выполнять достаточно объёмный набор действий: указывать, выделять, копировать и вставлять. Стилусы используются и по сей день, правда, технология шагнула далеко вперёд — наиболее продвинутые из них умеют определять степень нажатия и угол наклона стило, добавляя новые возможности использования.

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

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

Ёмкостные сенсорные экраны лишены этого недостатка. На внутренней поверхности экрана расположена сетка электродов. При прикосновении человека к экрану система «Человек-Электроды» превращаются в конденсатор. Контроллер измеряет ёмкость системы и очень точно просчитывает точку касания экрана. С ёмкостными сенсорными экранами появилась возможность считывать множественные одновременные касания — мультитач. У этой категории дисплеев есть свои недостатки, однако, на данный момент эта технология является наиболее распространённой у производителей мобильных устройств.

Yomkostnoy-Display

Немного физиологии

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

Thumb-Sweep-Chart

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

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

How-To

Исследования позволили выделить следующие закономерности:

  • Люди по-разному держат смартфон в зависимости от самого девайса, обстоятельств, и надобностей;
  • Тип хвата выбирается неосознанно;
  • 75% пользователей используют только один большой палец для взаимодействия с экраном;
  • Менее 50% пользователей держат телефон одной рукой;
  • 36% пользователей держат телефон обеими руками;
  • 10% пользователей держат смартфон одной рукой, а нажимают на его экран большим пальцем другой руки.

Центру — основное внимание

Благодаря технологии eye-tracking мы знаем, что на десктопе взгляд пользователя практически всегда скользит от левого верхнего угла экрана к правому нижнему. Однако на дисплеи мобильных устройств пользователи смотрят иначе — в основном на центральную часть экрана, краям же и углам достаётся гораздо меньше внимания. Исходя из этого наиболее правильным и удобным для пользователя будет следующее расположение:

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

Touch-friendly-design

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

Удивительно, но люди по-разному держат телефон в том числе и в зависимости от того, что они делают на нём:

What-To-Do

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

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

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

HeatMap-Touchscreen-2

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

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

Расстояние имеет значение

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

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

Free-Space

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

Scroll

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

Многочисленные исследования выявили ещё одну любопытную зависимость: чем больше диагональ экрана, тем больше расстояние от глаз пользователя до поверхности дисплея требуется для удобного просмотра. Обычный смартфон мы держим на расстоянии в 30 сантиметров от глаз, а на экраны больших планшетов нам удобно смотреть на расстоянии вытянутой руки. При этом, чем меньше устройство по размеру, тем чаще оно используется «на ходу», в движении. Такие устройства, как фаблеты и планшеты до 25% времени используются как настольный компьютер, при этом примерно 10% таких устройств управляется стилусом, а не пальцами.

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

Ссылки на оригинальные статьи:

http://www.uxmatters.com/mt/archives/2017/03/design-for-fingers-touch-and-people-part-1.php

http://www.uxmatters.com/mt/archives/2017/05/design-for-fingers-touch-and-people-part-2.php


31.05.2017