Пять основных проблем при разработке мобильного Интернет-магазина
Пять китов мобильного Интернет-магазина: сенсорный интерфейс, размер экрана, трансформация десктопного сайта, защита от ошибок пользователя и производительность.
01.12.2014 | Автор: Джейми Эпплсид (Jamie Appleseed), перевод: Proactivity 
Восьмая, заключительная, часть из цикла статей, написанных по материалам отчета о юзабилити мобильных интернет-магазинов.
В семи предыдущих статьях мы рассказали о некоторых специфических вопросах разработки мобильных интернет-магазинов, таких как: названия внутри полей (7), цели касания в списках товаров (6), навигация в виде выпадающего меню (4), правило «одно поле для одного пункта анкеты» (1), расположение названий (2) и списки сопутствующих товаров (3).
Эти статьи содержат не просто обзор результатов тестирования — они показывают, каким мельчайшим деталям должны уделять внимание разработчики мобильных интернет-магазинов. Но и это только вершина айсберга: полный отчёт об исследовании содержит 147 рекомендаций. В заключительной статье цикла мы сделаем шаг назад и рассмотрим более общие вопросы, на которые надо обратить самое пристальное внимание при проектировании мобильных интернет-магазинов (и любых других мобильных сайтов):
1Сенсорные интерфейсы Сенсорные устройства по праву считаются более удобными и интуитивно понятными по сравнению с мышью или тачпадом ноутбука: здесь пользователи просто нажимают на то, что видят, и «листают» страницы с контентом. Однако касание как способ взаимодействия накладывает на сайт ряд серьезных ограничений по сравнению с мышью или клавиатурой, которые были основными способами ввода в операционных системах на момент их появления ответственно три и четыре десятилетия назад.
Тестирование юзабилити мобильной версии сайта toysrus.com:
Сенсорные устройства лишены таких элементов взаимодействия, как нависающий курсор или правый и левый щелчки мышью — вместо них мы имеем набор «скрытых жестов». Кроме того, касания менее точны (с мышью мы можем выбирать объекты с точностью до пикселя, на сенсорном экране — с точностью до нескольких миллиметров, в зависимости от размера наших пальцев). Это особенно заметно на сенсорных клавиатурах, которые — несмотря на то что занимают половину и без того небольшого экрана, а при горизонтальной ориентации до 82% — как правило имеют очень маленькие кнопки.
Во время исследования 50% пользователей испытывали трудности с попаданием по тем или иным элементам на сайте, несмотря на то, что 18 тестируемых сайтов — лидеры интернет-торговли. Мы не будем следовать общей тенденции и называть это «проблемой толстого пальца». В конце концов, анатомия человеческого пальца первична по отношению к смартфонам (с разницей около 150 000 лет). Нам остается лишь сделать вывод о том, что, если половина пользователей не может попасть по ссылке, в этом виноват неудачный дизайн.
Оставив в стороне споры о неверных спецификациях, обратимся к основным проблемам мобильного дизайна, связанным с ограничениями для сенсорных устройств:
a) Несоответствие размеров экранов мобильных устройств размерам человеческих пальцев требует от нас увеличения целей касания и промежутков между ними по сравнению с используемыми на десктопных сайтах. Компании Microsoft, Nokia и Apple провели исследования и пришли к выводу, что минимальный размер кликабельного элемента составляет приблизительно 7×7 мм, а минимальный промежуток между двумя целями касания — 2×2 мм. (Измерения проводились на существующих потребительских смартфонах — с развитием технологий следует ожидать увеличения разрешения экранов и вносить в расчёты соответствующие поправки.)
б) Не имея возможности навести на объект курсор, пользователи обречены осваивать интерфейс методом проб и ошибок — решение, приемлемое для популярных игр и приложений по управлению временем. Если ваш продукт не принадлежит к их числу — следует чётко обозначить все кликабельные и некликабельные элементы, например, ссылки и кнопки должны быть сразу заметны, а их функции — не вызывать никаких сомнений. Тестирование показало, что непоследовательность в оформлении ссылок и некликабельные иконки на мобильных сайтах приводят к гораздо большим неудобствам, чем те же ошибки на десктопных сайтах.
c) Из-за маленького размера сенсорных клавиатур пользователи смартфонов медленнее набирают текст и допускают больше ошибок. Поэтому следует как можно чаще предлагать им специальные клавиатуры (например, цифровые панели или панели для набора телефонных номеров или электронных адресов) — это позволит увеличить цели касания.
Например, чувствительная к касанию зона клавиш цифровой панели на 471% больше, чем чувствительная зона обычной сенсорной клавиатуры (209×108 px против 52×76 px).
2Размер экрана
Проведём простой тест: возьмите со стола любую визитную карточку и оцените её размер. Он приблизительно равен размеру окошка, через которое пользователи видят весь ваш интернет-магазин. На практике оно нередко оказывается ещё меньше — часть пространства отнимают ОС и рамка браузера, сенсорные клавиатуры, всплывающие при заполнении форм, и чувствительные к прикосновению области для скроллинга и нажатий. Размер экрана смартфона составляет 3–5 дюймов, и каким бы ни было его разрешение, контент всегда будет ограничен физическими размерами дисплея.
На маленьком экране зачастую невозможно разместить весь необходимый контекст, и пользователи чувствуют себя «потерянными» на странице. Поэтому:
Все подсказки и пояснения должны располагаться строго напротив тех мест, где у пользователей могут возникнуть вопросы. Вспомогательный текст, например, всплывающие подсказки и описания полей формы, помогут пользователям не запутаться и уверенно пройти процесс оформления покупки и её оплаты.
Качественный микротекст приобретает в этом случае особое значение. Когда контекст минимален, всё зависит от точности названий полей и заголовков, и если они помогут задать контекст, интерфейс только выиграет. Один из известных принципов компании 37signals гласит: «Написание текста — тоже дизайн», и для интернет-магазинов это особенно верно.
«Последовательное раскрытие» — отличный способ упростить восприятие сложного контента и компенсировать отсутствие курсора. В ходе тестирования мы не раз наблюдали, как испытуемые использовали контент первого экрана для оценки всего остального содержимого страницы. Разумеется, они пролистывали её вниз, но информация первого экрана предопределяла все их ожидания от сайта. Таким образом, главные функции должны всегда располагаться наверху страницы, и эффективный способ этого добиться — использовать последовательное раскрытие (разворачивающиеся поля, аккордеонные формы, всплывающие подсказки и т.д.)
3Отличия мобильного сайта от десктопного Немало исследований и споров посвящено вопросу: должен ли мобильный сайт содержать весь контент и функционал «полной версии» сайта или стоит ограничиться избранными материалами и функциями. (В сущности, само выражение «полная версия сайта» указывает на некоторую ограниченность и вторичность мобильной версии по отношению к десктопной.) Как бы то ни было, тестирование пользователей показало, что сокращённый контент мобильной версии приводит их в замешательство, качество пользовательского опыта падает, а количество брошенных корзин возрастает.
В частности, много проблем было связано с невозможностью найти тот или иной товар в каталоге или нужный раздел помощи.
Как часто бывает в вопросах юзабилити, всё здесь сводится к ожиданиям пользователей. Они не сомневаются, что смогут найти все доступные товары на десктопном сайте магазина. Почему же на мобильном сайте их должно быть меньше — ведь этот тот же бренд и тот же магазин! Десять минут пользователи безуспешно искали полный каталог одежды H&M и так и не поняли, что на мобильном сайте представлены только 10–20 избранных товаров. Кто-то решил, что плохо ищет, кто-то — что сайт сломан, но, так или иначе, все они закрыли страницу. Мораль: мобильный сайт должен содержать весь доступный контент.
В то же время, функции и макет мобильного сайта могут (а зачастую и должны) отличаться от функций и макета десктопной версии. Очевидно, что макет и разметка контента должны быть оптимизированы под меньший размер экрана и сенсорное взаимодействие. Аналогично можно изменить и функционал. Например, мобильный сайт можно дополнить такими функциями, как автоматическое определение местоположения пользователя и «Отправить мне e-mail со ссылкой для последующего просмотра на компьютере». Таким образом, макет и функции надо адаптировать под размер экрана, особенности взаимодействия покупателя с устройством и условия его использования.
Кратко подытожим сказанное: контент мобильной и десктопной версий должен совпадать, но макет и функционал могут отличаться. Подробнее этот вопрос рассмотрен в одной из наших прошлых статей: «Чем должны отличаться мобильный и десктопный сайты?»
4Возобновление взаимодействия после ошибки
Во время тестирования мы убедились, что неточные и случайные нажатия, опечатки и отвлечение на посторонние раздражители (push-уведомления и другие) — обычное дело при использовании смартфона. Хотя большая часть этих проблем никак не зависит от разработчиков, они в силах помочь пользователям быстрее возобновить работу с сайтом. Обратите внимание на следующие моменты:
Как сайт реагирует на ошибки ввода: перезагружает всю страницу полностью, вынуждая пользователя самостоятельно искать ошибку в 1 из 15 полей, или указывает на неё (например, выводит только поле с ошибкой)?
Помогаете ли вы пользователям ввести правильный ответ? Допускаете ли вы ввод данных в нескольких форматах, которые затем преобразуются автоматически, или требуете от пользователей единственный верный ответ? В случае ошибки в написании населённого пункта выводите ли вы подсказки с правильными вариантами или просто сообщаете покупателю, что такого города не существует?
Как сайт работает с кнопкой «Назад» браузера? Во время тестирования пользователи использовали её очень активно — иногда боле 5 раз за сессию. Они возвращались на товарную страницу или к результатам поиска. Поддержка кнопки «Назад» особенно актуальна для тех случаев, когда посетитель хочет вернуться к результатам поиска или странице категории, на которых он применял специальные фильтры или другие настройки. Возможно, больше всего в кнопке «Назад» нуждаются покупатели, заполняющие форму заказа (к сожалению, как правило, здесь она работает хуже всего). В статье про аккордеонные формы мы уже писали о том, как на сайте Footlockers при нажатии на кнопку «Назад» на 4 этапе оформления покупки пользователь попадал не на 3 этап, а на страницу корзины.
Могут ли пользователи изменять ранее введённые данные или выбранные настройки? Например, если на завершающем этапе оформления заказа он вдруг заметит опечатку или решит изменить количество товаров в корзине, насколько просто будет внести изменения?
Можно ли отменить важные операции, например, удаление записи или подтверждение заказа? Важное преимущество этой функции состоит в том, что с ней отпадает необходимость просить пользователей подтверждать все их действия. Именно поэтому функция отмены обязательна для приложений по управлению временем и им подобным, однако она может быть полезна и на сайте крупного интернет-магазина.
Решение упомянутых проблем потребует серьёзной технической работы и тщательных тестирований. Однако все эти усилия окупятся, так как огромное количество корзин бросают именно из-за невозможности быстро возобновить работу с сайтом после ошибки.
5Производительность
Скорость загрузки страницы заметно влияет на качество пользовательского опыта и желание или нежелание покупателей продолжать изучение сайта. Каждый из участников тестов хотя бы раз жаловался на долгую загрузку страниц, которая на некоторых сайтах продолжалась по 30 секунд (при DSL Wi-Fi соединении). Дело в том, что производительность сайта связана не только с загрузкой страниц или медиаресурсов — немало времени требуется на рендеринг страницы и парсинг. Сказанное относится и к десктопным сайтам, просматриваемым на компьютерах, однако на мобильных устройствах проблема ощущается намного сильнее — по причине меньшей мощности процессоров. Таким образом, код мобильного сайта следует продумывать особенно тщательно, дабы обеспечить его удовлетворительную производительность.
Не вдаваясь в технические подробности (эта тема заслуживает отдельной беседы и не уместится в нашу статью), рекомендуем обратить внимание на следующее:
Правильное кэширование ресурсов (обеспечьте бесконечное кэширование ресурсов, а затем используйте временные метки или отпечатки (fingerprints) для его прекращения).
Постарайтесь сделать макет простым и лаконичным, без лишних украшений, которые замедлят рендеринг страницы (например, линейки, градиенты и тени стоит использовать только для самых важных элементов и только если они помогут пользователям лучше ориентироваться на странице).
По возможности используйте «родные» технологии (например, стандартный атрибут ввода вместо настраиваемых при помощи JavaScript, аналогично работайте с CSS — лучше использовать готовый стиль для радиуса закругления линейки).
Если это возможно, сделайте так, чтобы ещё до окончательнойзагрузки JavaScript и парсинга пользователи уже могли видеть контент и взаимодействовать с сайтом. Последняя рекомендация согласуется с подходом, набравшим в последнее время большую популярность — это прогрессивное улучшение (progressive enchancement).
Чтобы сайт загружался и работал быстро, сначала предлагайте пользователям минимальную работающую версию, а затем на основе данных об устройстве подключайте дополнительные функции — это сделает пользовательский опыт намного лучше. Имея информацию о возможностях устройства, их можно использовать вместо стандартных элементов CSS и JavaScript. Это повысит производительность сайта, не говоря уже о том, что «родные» функции более надёжны. Прогрессивное улучшение — отличный способ обеспечить поддержку самых разнообразных устройств: на старых смартфонах со старыми версиями ОС будут отображаться более простые страницы, а на более новых и мощных устройствах пользователи увидят более продвинутые версии сайта.
Что касается поддержки устаревших телефонов, нас часто спрашивают: должен ли сайт поддерживать самые простые мобильные телефоны? Правда заключается в том, что в их случае прогрессивное улучшение может оказаться бессильно — они настолько плохо работают с HTML и JavaScript, что даже самый простой сайт будет работать на них с ошибками, если вообще откроется. Если пользователи «звонилок» составляют важную часть вашей аудитории, для них стоит разработать отдельный сайт. Мы рекомендуем творчески подойти к решению проблемы и подумать об альтернативных сервисах, например, взаимодействии с пользователями через электронные письма или SMS: так они смогут получать сообщения (содержание зависит от характера вашего бизнеса: продажи, погода, информация о товарах), бронировать билеты, комнаты в отеле и т.д. и даже оформлять заказы.
Можно долго говорить о производительности и поддержке старых устройств, но достаточно сказать, что эти компоненты — важные составляющие пользовательского опыта при мобильном шоппинге. Пользователи оценивают производительность сайта при каждом взаимодействии или загрузке страницы: если сайт быстрый и легкий, они будут воспринимать его как активный и отзывчивый, если же он медленный и тяжелый, каждое взаимодействие с ним будет восприниматься как нечто вялое и готовое вот-вот прерваться.
Мы все ещё учимся За последние пять лет мобильный браузинг получил значительное развитие, и интернет-торговля через мобильные сайты переживают расцвет. Но, конечно, пять лет — слишком маленький срок, чтобы говорить о лучших практиках дизайна, проектирования взаимодействия и программирования таких магазинов. Все мы еще учимся: исследователи, разработчики и пользователи. Спустя некоторое время пользователи будут вести себя более предсказуемо, а разработчики получат больше практического материала. Исследователи пользовательского опыта помогут им, анализируя поведение потребителей и преобразуя свои открытия в понятные дизайнерам данные. Мы, сотрудники Baymard Institute, работаем над последней задачей и надеемся, что открытия, рекомендации и наблюдения, изложенные в серии статей и отчёте, уже сейчас будут полезны дизайнерам в дивном новом мире мобильных устройств.
Автор: Джейми Эпплсид (Jamie Appleseed), перевод: Proactivity
Полный текст статьи читайте на CMS Magazine
