Как создать отличный мобильный UX

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

Давайте посмотрим на статистику.

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

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

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

Давайте взглянем.

Как создать отличный мобильный UX: что говорит статистика

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

Глобальная технологическая компания Criteo, специализирующаяся на коммерческом маркетинге, выпустила пресс-релиз, в котором сообщается, что мобильные продажи только в США в настоящее время составляют 52% всех транзакций электронной коммерции. Очевидно, что если вы хотите эффективно и успешно продавать… вам нужно очень эффективное мобильное присутствие с отличным UX.

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

Согласно отчету Adobe Mobile Retail Report, конверсия на настольных компьютерах в 2,8 раза выше, чем на мобильных устройствах. Если вы думаете, что это означает, что оптимизация для мобильных устройств не важна, подумайте еще раз. На самом деле это еще одна причина, чтобы придерживаться стратегии, ориентированной на мобильные устройства, тем более что на мобильные устройства по-прежнему приходится больше трафика, чем на настольные компьютеры.

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

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

Это в пределах вашей досягаемости. Вот что делать.

Дизайн для больших пальцев… но не в первую очередь для больших пальцев

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

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

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

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

Шесть способов таковы:

• В колыбели (одна рука поддерживает телефон, а большой палец другой руки касается)
• Держите и касайтесь (одна рука поддерживает телефон, а указательный палец другой руки постукивает)
• Две руки для горизонтальной ориентации (подумайте, как бы вы держали портативное игровое устройство, такое как Nintendo 2DS XL)
• Одна рука – первый порядок (одна рука держит телефон, а большой палец той же руки постукивает по телефону)
• Одна рука – второй порядок (одна рука держит телефон, а большой палец той же руки постукивает, но из более высокого исходного положения)
• Две руки для портретной ориентации (подумайте, как бы вы держали портативное игровое устройство на этот раз, например, старый Nintendo Gameboy)

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

• Нажатие на ссылки — чаще всего держите и нажимайте или качайте.
• Отметка флажков — «Большинство колыбели» или «Удерживайте и коснитесь»
• Печатание — большинство используют два пальца или большие пальцы одновременно или удерживают и нажимают
• Короткая прокрутка — чаще всего удерживайте и нажимайте или качайте
• Более длинная прокрутка — чаще всего колыбель или удержание и нажатие

Итог: спроектируйте свой мобильный сайт так, чтобы он соответствовал различным способам, которыми люди держат свои телефоны.

Большие кнопки лучше

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

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

Ошибаться в сторону большего лучше.

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

Напрашивается вопрос, насколько большой?

Согласно собственным рекомендациям Google по целевому размеру сенсорного экрана для дизайна материалов, мобильные кнопки должны иметь размер сенсорного экрана от 7 до 10 миллиметров. Другими словами, кнопки должны иметь физический размер примерно 1 сантиметр, независимо от того, на каком экране они появляются. Это обеспечивает отличный баланс между:

• Плотность информации
• «Нацеливаемость» элементов пользовательского интерфейса

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

Отдавайте предпочтение самому важному контенту

Ответ на вопрос: как создать отличный мобильный UX? иногда заключается в том, что вы вычитаете, а не добавляете. В случае экранного контента это правило применяется на 100%.

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

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

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

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

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

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

Сосредоточьтесь на конечном пользователе

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

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

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