Мобильный дизайн: Страница не найдена | UXPUB

Мобильный UX дизайн: Основные принципы | by Writes

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

Хороший дизайн пользовательского интерфейса решает обе эти проблемы:

• Для того, чтобы быть полезными, мобильные приложения должны быть ориентированными на пользователя. Пользователи устанавливают ваше приложение, потому что хотят решить какие-то проблемы. Таким образом, приложение имеет ярко выраженную «целеустремленность» Подумайте о том, чего ваши пользователи будут пытаться достичь и сосредоточьтесь на их основных целях. Уберите с их пути все препятствия.
• Вы должны принести ясность в свой UI. Что бы эффективно решать свои задачи, используя ваш интерфейс, люди должны понимать, как его использовать. Там просто не должно быть места для путаницы.

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

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

Есть знаменитая цитата Антуана де Сент-Экзюпери: «Совершенство достигается, когда уже нечего отнять» В мобильном дизайне надо избавляться от всего, что не имеет первостепенной необходимости. Снижение беспорядка улучшит понимание.

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

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

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

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

• Мобильная навигация должна быть плотной. Не перемещайте элементы навигации на новое место и не скрывайте их на разных страницах. Это дезориентирует пользователя.
• Мобильная навигация должна сообщать текущее местоположение. Невыполнение этого условия, наверное, самая частая ошибка, допускаемая в меню. «Где я?» Является одним из основных вопросов, на который пользователи должны быть в состоянии ответить, чтобы успешно ориентироваться.

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

Возьмите, например, Apple Music. Вы можете создать плейлист на Mac, и он тут же станет доступен на вашем iPhone. Apple понимает, что хотя дизайн мобильного приложения очень важен, создание бесшовного опыта на iPhone, десктопе и IPad так же важно для пользователей.

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

Создавайте элементы управления, размером 7–10 мм, и по ним будет легко нажимать пальцем. Такой тэп таргет позволяет пальцу пользователя плотно прилегать к цели. Края цели видны, когда пользователь на нее нажимает. Это дает им понять, что они точно попали в цель.

Кроме того, убедитесь, что между тэп таргетами есть достаточно свободного места.

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

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

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

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

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

• Небольшой текст должен иметь коэффициент контрастности не менее 4,5: 1 к его фону.
• Большой текст (14 пт жирным шрифтом/18 пт обычным, и выше) должен иметь коэффициент контрастности не менее 3:1 к его фону.

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

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

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

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

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

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

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

• Удалите из форм все ненужные поля, что бы их было проще заполнять

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

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

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

Перевод статьи Ника Бабича

Дизайн мобильных приложений – Приложения для iOS, Android, Windows Phone / Хабр

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

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

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

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

Перезваниваю дизайнеру, спрашиваю, где планируете использовать макет?

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

 

Сегодня в Google Play Store насчитывается более 3,4 миллионов мобильных приложений. В App Store их меньше – порядка двух миллионов. Новые приложения появляются на этих платформах ежедневно, их становится все больше. Разработчики мобильных приложений делают все возможное для того, чтобы их работа выделялась в этом огромном медиапотоке и пытаются создавать продукты, которые одновременно красивы и приятны в использовании. Сегодня для того, чтобы сделать популярное приложение, нужно придерживаться нескольких правил мобильного дизайна. FreelanceToday предлагает вам ознакомиться с 10 заповедями дизайна мобильных приложений.

 

Не усложняйте

 

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

 

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

 

Сделайте дизайн доступным

 

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

 

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

 

Не изобретайте велосипед

 

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

 

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

 

 

Помните, для кого вы проектируете

 

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

 

Всегда нужно держать в уме портрет идеального пользователя. Кто это? Студент? Врач? Малый бизнес? А может, спортсмен или музыкант? Проектируя интерфейс, нужно стремиться к тому, чтобы вся структура приложения соответствовала какой-либо ключевой фразе. Например: «приложение для любителей путешествий». Или «приложение для микширования звука». Такой подход позволяет лучше сфокусироваться на основном функционале.

 

Используйте правильные шрифты

 

Ошибки при работе с типографикой допускают все дизайнеры. Очень важно подбирать правильные шрифты, просто потому, что неверный выбор очень заметен. Конечно, сегодня вряд ли удастся найти дизайнера, который будет использовать Comic Sans или Papirus, но приложений с отвратительной типографикой все еще очень много. В мобильном дизайне шрифтам нужно уделить самое пристальное внимание. И самое главное – шрифт должен быть не только красивым, но и читаемым. Для мобильных приложений лучше подходят шрифты без засечек, но это не аксиома, нужно подбирать шрифт так, чтобы он соответствовал идее приложения и хорошо вписывался в дизайн.

 

Оставайтесь последовательными

 

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

 

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

 

 

Не забывайте о мобильности

 

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

 

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

 

Помните о логичности

 

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

 

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

 

Создавайте реалистичные прототипы

 

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

 

Не забывайте о тестировании

 

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

 

 

Источник

Переход с веб-версии на мобильный дизайн. Что нужно знать?

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

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

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

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

Хорошие новости: это все еще дизайн

«Как досадить своим друзьям-дизайнерам и вызвать у них мигрень.»

 

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

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

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

Разнообразие устройств

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

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

Основные операционные системы

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

3D-исполнение логотипа компании Apple и робота-талисмана Android, задействованных в световых боях, с логотипом Windows на заднем плане.

 

Просто в качестве примера. Я недавно начал работать над дизайном Android-приложения для своего личного проекта. Не так давно я перешел от использования iPhone-устройств, поэтому, к сожалению, немного подзабыл, как пользоваться Android-устройствами. Я должен постоянно напоминать себе, что есть кнопка «back» на устройствах Android и что drawermenu является основной моделью при навигации. И это лишь некоторые из незначительных различий между этими двумя ОС.

При переходе с веб-дизайна на дизайн мобильных приложений также важно быть ознакомленным с гайдлайнами — iOSHumanInterfaceGuidelines и AndroidMaterialDesignGuidelines. Кроме того, дизайнеры мобильных приложений должны иметь достаточно личного опыта, используя устройства с различными ОС. Они также должны немного разбираться в технических моментах и иногда просматривать документацию разработчиков.

Что еще необходимо знать о мобильном дизайне приложений для нескольких платформ? Не накладывайте дизайн, предназначенный для одной платформы, на другую. Это верный способ убить юзабилити. Изучайте эти моменты при помощи использования приложений каждой из платформ. Обратите внимание на модели взаимодействия и нативные UI-компоненты. Используйте готовые UI-наборы, чтобы сэкономить время на копирование UI-элементов для каждой операционной системы. Или же используйте такой мощный инструмент, как Proto.io, который содержит встроенные нативные компоненты, ускоряющие процесс дизайна.
 

Сложность простоты

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

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

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

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

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

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

 

Быстро развивающийся мир приложений

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

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

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

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

Давайте сообща сделаем этот шаг от веб к мобильному дизайну приложения!

Источник

Разработка дизайна мобильного приложения | KOLORO

Этапы разработки дизайна мобильного приложения

Из чего складывается разработка дизайна приложения?

В первую очередь мы вместе с заказчиком обтачиваем идею продукта. Что надо сделать: оптимизировать бизнес-процессы, создать приложение с нуля или привлечь клиентов к веб-ресурсу?

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

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

Наши маркетологи умеют задавать правильные вопросы и находить верные ответы! Закажите исследование агентству KOLORO.

Мы рассматриваем дизайн приложения ios и андроид приложений – для разных платформ есть свои тонкости. Например, android-программа дольше разрабатывается из-за необходимости долгого тестирования на большом количестве устройств. А пользователи Apple чаще покупают продукт, чем скачивают бесплатно.

Также при анализе рынка мы уточняем следующее:

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

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

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

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

Примерный срок разработки – 2 месяца. Расценки можно увидеть в разделах «Разработка приложений для iOS» и «Разработка приложений для Android».

10 лекций по дизайну мобильных приложений

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

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

Тестирование дизайна мобильных приложений

Лектор: Андраш Густи

Советы дизайнеру мобильных приложений при устройстве на работу

Лектор: Андраш Густи

Мобильное приложение как минимально жизнеспособный продукт

Лектор: Андраш Густи

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

Лектор: Андраш Густи

Разбор мобильных кейсов в ИТМО

Лектор: Андраш Густи

Мобильные приложения на страже продаж

Лектор: Андраш Густи

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

Лектор: Дмитрий Ванеев

Процесс дизайна приложений в SoftFacade

Лектор: Александр Хмелевский

Что нужно знать о дизайнерах мобильных приложений

Лектор: Вячеслав Бралл

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

Лектор: Павел Александров

Принципы мобильного дизайна — DEADSIGN

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

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

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

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

Законы природы

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

Ниже я расположил дизайнерские установки следующим образом (от высшего к низшему):

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

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

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

Разработка принципов

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

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

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

Создание принципов дизайна

Снова и снова я повторял одни и те же фразы, чтобы объяснить те или иные дизайны, паттерны, или отговорить от использования каких-то дизайнерских идей в работе.

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

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

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

1. В дизайне не должно присутствовать какое—либо мнение.
2. Не все данные вам подходят.
3. Не существует такого понятия как «нормальный пользователь».
4. Подключайте свои сильные стороны.
5. Пусть компьютеры занимаются компьютерной работой, а люди — человеческой.
6. Никогда не создавайте заново то, что можно позаимствовать или на что можно сослаться.
7. Делайте системы гибкими.
8. Относитесь уважительно к информации, предоставленной пользователями.
9. Создайте список заданий в порядке важности и следуйте ему.
10. Сначала займитесь базой.
11. Радуйте тех, кого сможете, но не вызывайте ни у кого гнев.

1. В дизайне не должно присутствовать какое—либо мнение

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

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

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

Как сказал Ричард Фейнмен, «первый принцип заключается в том, чтобы не одурачить самого себя; а самого себя одурачить проще всего». Чтобы одновременно ослабить влияние своей точки зрения и подключить в работу всю команду, я созываю всех своих коллег, и мы вместе пытаемся принять правильные решения, основанные на имеющихся данных. Я прошу их поделиться своим мнением, и таким образом мы можем провести грань между собственными точками зрения и дизайном.

2. Не все данные вам подходят

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

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

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

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

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

3. Не существует такого понятия как «нормальный пользователь»

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

Люди любят инфографику, ведь гораздо легче читать что-то в виде карт, таблиц и графиков, верно? По крайней мере, некоторые точно любят. Но обычно понимание людей разнообразных таблиц и карт происходит по так называемой колоколообразной кривой. Большинство ценит графические или пространственные изображения, а некоторые только их и понимают. Другие понимают только текстовые диаграммы, таблицы и списки. Учитывая все это, я всегда использую и то, и другое. В качестве примера могу привести Google Maps: посмотрите, как они одновременно выдают списки близлежащих ресторанов и показывают те же рестораны на карте.

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

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

4. Подключайте свои сильные стороны

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

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

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

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

Пользователей исправить сложнее всего. Смиритесь с этим, и не пытайтесь их изменить.

Для какой бы системы вы ни создавали дизайн, вашей самой большой проблемой будут оставаться пользователи. Пользователей исправить сложнее всего. Смиритесь с этим, и не пытайтесь их изменить. Обучение или FAQ иногда предпринимают попытки изменить пользовательское поведение, чтобы люди вели себя так, как от них этого хочет система. Я же глубоко убежден, что этого следует избегать. Успешные индустрии наоборот обращаются и прислушиваются к пользовательским интересам, а не меняют их взгляды, чтобы заставить людей желать какой-то новый продукт.

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

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

6. Никогда не создавайте заново то, что можно позаимствовать или на что можно сослаться

Если вы работаете с дизайном веб—сайта или приложения для ПК, то формы обратной связи или формы для жалоб и предложений лучше всего будет создать самим. Вы создаете поля, пользовательский интерфейс (UI), ссылки, которые будут соединяться с вашим сервером, и т.д.

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

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

Карта, созданная клиентом, представляла собой пошаговые указания, в каком направлении следует двигаться, и другие подобные вещи. Я пробежался по жалобам пользователей и понял, что никому это не нужно. Они хотели видеть карту в том виде, в каком они привыкли ее видеть в любимых навигационных приложениях. Каких именно — нас это не интересовало. Им удобнее пользоваться тем, что им знакомо. Поэтому мы изъяли из приложения всю навигацию и сделали ссылку на навигационное приложение. Таким образом, не нужно было создавать что-то новое и постоянно поддерживать это. Жалобы прекратились, а количество пользователей увеличилось.

7. Делайте систему гибкими

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

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

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

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

8. Относитесь уважительно к информации, предоставленной пользователями

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

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

Никогда и ни за что не давайте введенным данным исчезнуть. Я бы даже еще раз напомнил о существовании очень удобных иконок Х для удаления информации в поле ввода. Если пользователь хочет, к примеру, нажать Search, а вместо этого нажал Delete, уже нельзя будет ничего сделать. Использовать же Backspace, удаляя по одному значку, возможно, будет для кого-то утомительно, но большинство пользователей смогут с этой помощью обезопасить себя от потери данных.

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

9. Создайте список заданий в порядке важности и следуйте ему

Для меня информационный дизайн имеет смысл, и работа с ним в свое время породила немалое количество идей в моей голове.

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

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

Когда я хочу убедиться, вся ли представленная на сайте или в приложении информация имеет смысл, я следую одному ключевому правилу, которое я для себя открыл во время своих «касательных исследований»: люди смотрят и нажимают на центральную область. Спустя время я развил эту тему и написал Пункт № 7 в своей колонке на тему «касательных установок».

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

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

10. Сначала займитесь базой

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

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

Фактические стандарты отличаются от официальных. К чему на самом деле привыкли ваши клиенты на своих девайсах? Необходимо уделять большое внимание стандартам машинной эпохи. Как в наше время люди обычно решают свои проблемы? Можно многому научиться, если обратиться к способам создания устаревших информационных продуктов (будь то печатные или цифровые версии). Они существовали на протяжении десятилетий или даже веков, значит, есть что-то особое в их дизайне. А вы знаете, что?

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

11. Радуйте тех, кого сможете, но не вызывайте ни у кого гнев

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

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

Этот вопрос относится ко всем уровням работы. Ваш продукт, пользовательский интерфейс, слова, используемые в тексте, и практика деловых отношений должны работать не на конкретного человека, а на всех пользователей. Поговорите с людьми, занимающимися продажами и маркетингом, о стоимости проекта, и имейте это в виду, когда кто-нибудь скажет: «Да люди это переживут» или «Мы можем сделать дополнительное обучение».

Конечно, иногда бывает так, что ничего нельзя сделать. Я знаю много клиентов, для которых все изменения в практике деловых отношений предрешены людьми гораздо выше меня по статусу. А еще могут быть различные нормативные ограничения. По крайней мере, постарайтесь объяснить, почему необходимо что-то исправить. Желательно это делать на английском и как можно раньше, а если возникнет необходимость — приврите. Вы можете все исправить, как минимум упростив или приукрасив то, что все портит. Плохой back—end? Установите промежуточное ПО и прокэшируйте данные. Возникли проблемы с региональными дестрибьютерскими соглашениями? Создайте центральный eStore, лишним не будет, и сделайте рассылку дистрибьютерам.

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

А какие принципы у вас?

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

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

Лучшие практики мобильного UX-дизайна — от начала до конца

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

Что такое мобильный UX-дизайн?

В недавней статье на TechCrunch указывалось, что мобильная электронная коммерция составляла почти треть всех онлайн-продаж в праздничный период Дня благодарения 2018 года, а Digital Trends сообщила в 2017 году, что 5 миллиардов человек во всем мире теперь имеют мобильные устройства.Google также объявил, что индексирование с ориентацией на мобильные устройства теперь используется более чем для половины веб-страниц в результатах поиска.

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

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

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

Лучшие практики для мобильного UX-дизайна

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

25 советов по дизайну мобильного UX от Google

В 2015 году Google опубликовал 25 лучших практик мобильного UX-дизайна на основе внутренних исследований. Эти советы были недавно обновлены, чтобы сделать их более актуальными. Автор также включает загружаемый PDF-файл со всеми 25 советами, который удобно держать под рукой для любого мобильного UX-проекта.

Руководство Apple по человеческому интерфейсу

Еще один отличный ресурс, который нужно держать под рукой, — это Apple Human Interface Guidelines для мобильного дизайна. Их легко читать, они имеют красивый макет и приправлены передовыми практиками, советами и собственным подходом Apple к принципам дизайна.Для мобильных UX-дизайнеров эти рекомендации — отличный ресурс для обеспечения высокого качества пользовательского опыта.

Руководство Apple по интерфейсу взаимодействия с пользователем подробно описывает принципы дизайна мобильного UX. (от Apple)

Дополнительные передовые методы мобильного UX

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

• UX Research . В какой-то момент мы можем почувствовать склонность сразу перейти к макетам или прототипам, однако сначала провести надлежащее исследование UX — это то, что нельзя недооценивать.Всегда помните, что «вы не ваш пользователь», и положительный пользовательский опыт в каждом случае зависит от тщательного исследования UX. Вот подробное руководство Adobe по методам исследования UX для дальнейшего использования.
• Беспорядок . Все мы испытали тревогу из-за захламленного рабочего стола — представьте это на мобильном устройстве! Каждая добавленная кнопка, изображение, часть контента и т. Д. Значительно усложняют работу. Рекомендуется избавиться от всего, что не является абсолютно необходимым в пользовательском интерфейсе мобильного устройства.Отличный совет — стремиться к минимализму, но не рисковать хорошим удобством использования. Этого часто можно достичь, назначив приоритет одному главному действию на каждом экране.
• Приоритет . Существует тенденция пытаться добавить как можно больше функций. Мы чувствуем, что упущение чего-то каким-то образом создаст меньше впечатлений для пользователей. Напротив, сосредоточьтесь на функциях, основываясь на основных целях, и уточните дизайн, проанализировав, какие функции используются чаще всего, а затем приложите усилия, чтобы сделать эти функции интуитивно понятными и приятными.
• Сенсорные мишени . Пользователи могут физически разозлиться и начать бить свои мобильные устройства, когда они нажимают на что-то, а оно не отвечает. Исследование, проведенное в Массачусетском технологическом институте, показало, что они нажимали на то, что имело слишком маленькую цель касания. Лучше всего создавать элементы управления, кнопки, ссылки и т. Д. (Все, что связано с сенсорным экраном) не менее 7–10 мм, что составляет среднюю ширину кончика пальца. Также рекомендуется убедиться, что между этими элементами пользовательского интерфейса есть достаточно места.
• Разборчивый текст . Поскольку многое из того, что делают пользователи, основано на потреблении контента, чтобы обеспечить единообразие работы на всех типах мобильных устройств, убедитесь, что вы выбрали шрифты, которые хорошо работают в разных размерах и весах. Рекомендуется использовать шрифт размером не менее 11 пунктов, чтобы не утомлять глаза. Чистые и легко читаемые шрифты, такие как Google Roboto и Noto или новый шрифт Apple San Francisco, — отличный выбор для изучения.
• Обратная связь по пользовательскому интерфейсу .Хорошо разработанные приложения информируют нас о том, как мы с ними взаимодействуем. Отсутствие хорошей обратной связи может сбить с толку пользователей и заставить их сомневаться в том, что что-то произошло, происходит или почему это произошло / не произошло. Лучше всего использовать различные формы обратной связи (звук, тактильные ощущения, визуализации) в зависимости от элемента пользовательского интерфейса или текущего состояния приложения.
• Доступность . Это, вероятно, один из самых недооцененных аспектов дизайна пользовательского опыта и особенно мобильного UX-дизайна.15% населения мира имеют ту или иную форму инвалидности. Руководство по обеспечению доступности веб-контента является свободно доступным ресурсом, и для цифровых дизайнеров оно обязательно должно быть частью их набора инструментов.

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

Ограничения проектирования мобильного UX

Цель большинства UX-дизайнеров — обеспечить приятный опыт и создать отличный дизайн, который обеспечивает как простоту обнаружения (какие действия возможны), так и понимание (как предполагается использовать продукт).Однако в случае мобильных устройств возникают некоторые ограничения, связанные с размером, портативностью и средой, в которой используются эти устройства.

Ограничения по хранению

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

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

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

Экраны и элементы управления

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

Мобильные экраны меньше: чтение через глазок увеличивает когнитивную нагрузку и делает его примерно вдвое труднее для понимания.- Якоб Нильсен, консультант по веб-юзабилити.

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

Мобильные устройства представляют собой совершенно новый набор проблем для UX-дизайна. (фото Jaelynn Castillo)

Окружающая среда

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

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

Маленький размер экрана, единое окно

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

Есть попытки приспособить «многоэкранность» и «многозадачность», но они еще не стали нормой и имеют свои собственные наборы ограничений.

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

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

Как люди держат мобильные устройства

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

Согласно исследованию Стивена Хубера, описанному в книге «Дизайн для пальцев, касания и людей», часть 2, было обнаружено, что люди по-разному взаимодействуют со своими устройствами в зависимости от того, как они их держат, что впоследствии влияет на дизайн мобильного UX.

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

Как люди держат и используют свой телефон (Стивен Хубер).

Вот несколько дополнительных советов по мобильному UX из исследования Стивена:

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

Работа с разработчиками

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

Мокапы

При подготовке и передаче макетов старайтесь, чтобы имена файлов были простыми, последовательными и информативными. Это сэкономит много времени, перемещаясь вперед и назад. Также рекомендуется доработать все макеты, прежде чем делиться ими с разработчиками, чтобы они получали только по одной версии каждого экрана. Еще один совет по экономии времени — протестировать все взаимодействия с прототипами, чтобы они работали и функционировали.Хорошие инструменты для обмена мокапами: InVision и Marvel .

Функциональные характеристики

Большая часть работы, выполняемой UX-дизайнерами, вовлекает разработчиков на ранних этапах проекта, и отличный способ облегчить постоянное понимание процесса проектирования и наладить лучшую коммуникацию — это создание и использование документа функциональной спецификации или « Func-Spec. »

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

Хороший пример работающей Func-Spec показан ниже:

Хорошая практика мобильного UX для работы с разработчиками — это функциональная спецификация. (Миклоша Филипса)

Копия

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

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

Как видно выше, контекст помогает разработчику понять, когда сообщение должно появиться или исчезнуть.Он должен сообщить разработчику, что происходит, чтобы ему не приходилось гадать. Сообщение — это фактическая копия, которая появится. Используйте настоящую копию, а не тарабарщину (например, lorem ipsum). Разработчики не хотят быть копирайтерами, и мы хотим, чтобы для них все было максимально гладко.

Технические характеристики

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

Связь IRL (в реальной жизни)

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

Связывая все вместе

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

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

• • •

Дополнительная литература в блоге Toptal Design:

Что такое дизайн мобильного взаимодействия с пользователем (UX)?

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

При разработке для мобильных устройств необходимо учитывать множество факторов, многие из которых относятся к стандартному UX; также будут учитываться особенности дизайна мобильных устройств. Собираетесь ли вы интегрировать свое мобильное предложение со своим текущим предложением? Будете ли вы использовать адаптивный дизайн или адаптивный дизайн?

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

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

Джош Кларк, автор книги Tapworthy — Designing Great iPhone Apps, предлагает три категории для мобильного доступа в Интернет:

• Микрозадачи: когда пользователь взаимодействует со своим устройством в течение коротких, но безумных периодов активности
• Local: когда пользователь хочет знать, что происходит вокруг него
• Скучно: когда пользователю нечего делать и он хочет, чтобы его развлекали или отвлекали иным образом

Основные принципы проектирования для мобильного Интернета

Маленькие экраны

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

Вы хотите сосредоточиться на подходе «сначала мобильные», что означает проектирование для самых маленьких мобильных платформ и дальнейшее увеличение сложности.

Хороший процесс для подражания:

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

Не забывайте, что для мобильного Интернета и всего Интернета доступно множество различных типов браузеров.Вы должны быть уверены, что поддерживаете как можно больше из них, включая устаревшие (например, BlackBerry и Nokia WebKit).

Автор / Правообладатель: Филип Йегенштедт. Условия авторских прав и лицензия: CC0 1.0

Keep Navigation Simple

Клавиатуры и сенсорные экраны не обеспечивают точной навигации, как мыши, поэтому постарайтесь:

• Расставьте приоритеты для навигации в зависимости от того, как пользователи работают с функциональными возможностями — самые популярные идут вверху
• Минимизировать задействованные уровни навигации
• Обеспечьте четкость и лаконичность надписей для навигации
• Предлагать быстрый доступ к различным функциям
• Не забудьте предложить пространство 30×30 пикселей для точек касания сенсорного экрана
• Убедитесь, что ссылки визуально различимы и ясно, когда они были активированы
• Упростите переключение между мобильным и полным сайтом (если вы решите реализовать отдельные версии)

Сведите содержание к минимуму

Не перегружайте пользователей — уважайте маленькое пространство на экране.Сведите содержание к минимуму.

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

Делайте описания страниц краткими и по существу — с соответствующими закладками.

Уменьшите количество входов, требуемых от пользователей

Чем меньше пользователю приходится возиться со своим телефоном; тем больше им понравится ваше мобильное веб-предложение. Рассмотреть возможность:

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

Автор / Правообладатель: Субхашиш Паниграхи.Условия авторских прав и лицензия: CC BY-SA 3.0

Помните, что мобильные соединения нестабильны.

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

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

Автор / Правообладатель: Стефано Де Саббата и Марк Грэм.Условия авторских прав и лицензия: CC BY-SA 3.0

Непрерывный интегрированный опыт

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

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

The Take Away

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

Ссылки и где узнать больше

Курс: Дизайн мобильного взаимодействия с пользователем (UX):
https: // www.Interaction-design.org/courses/mobile-user-experience-design

Creative Bloq предлагает сосредоточиться на этих 10 принципах интерактивного дизайна для мобильных устройств — http://www.creativebloq.com/mobile/10-principles-mobile- интерфейс-дизайн-4122910

Give Good UX предлагает 5 простых советов по мобильному дизайну — http://www.givegoodux.com/5-crucial-principles-great-mobile-design/

Smashing Magazine предлагает 7 принципов мобильного UX-дизайна — http://www.smashingmagazine.com/2011/07/seven-guidelines-for-designing-high-performance-mobile-user-experiences/

InfoWorld считает, что вам нужно изучить эти 10 советов, чтобы правильно разрабатывать мобильные приложения — http: // www.infoworld.com/article/2612190/mobile-apps/heed-these-10-expert-tips-for-mobile-app-design.html

Изображение героя: Автор / Правообладатель: Майкл Шон Галлахер. Условия авторских прав и лицензия: CC BY-SA 2.0

Полное руководство для экспертов 2021

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

«… в среднем приложение теряет 77% своих DAU (примечание редактора: ежедневные активные пользователи) в течение первых 3 дней после установки.»- Эндрю Чен

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

Что такое мобильный UX-дизайн?

Mobile UX охватывает субъективное восприятие пользователя мобильным приложением. Сюда входят как хорошие, так и плохие переживания, а также эмоции.

UX Design — это процесс создания продукта, с которым приятно взаимодействовать и который обеспечивает значимый и актуальный опыт.Он включает в себя такие аспекты, как взаимодействие, контент и звуковой дизайн, и принимает во внимание весь цикл взаимодействия с клиентом.

Не перепутайте User Experience (UX) и User Interface (UI) . Оба очень тесно взаимодействуют друг с другом, но это не одно и то же.

Пользовательский интерфейс является частью UX, но UX не ограничивается пользовательским интерфейсом.

Wh y Важен ли мобильный UX-дизайн?

Пользовательский интерфейс включает в себя все, что связано с графическим дизайном.

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

Элементы хорошего мобильного UX-дизайна показаны в сотах Питера Морвилла.

Элементы хорошего UX-дизайна

Полезно:

Система должна соответствовать пожеланиям и потребностям пользователей.

Используемый:

Система должна быть максимально простой и самоописательной.

Желательно:

Стиль системы должен вызывать положительные эмоции и признательность. Пользователь должен захотеть использовать вашу систему.

Можно найти:

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

Доступный:

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

Достоверный:

Пользователь должен доверять вам и вашему продукту.

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

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

1. Размер

Рабочие столы: Они большие. Вы можете разместить много материала и информации на одной странице, и она будет выглядеть отлично и организованно.

Смартфоны: Если вы уменьшите свой веб-сайт до стандартного размера мобильного устройства 4–5 ½ дюйма, ничего не меняя, он будет выглядеть ужасно и сбивать с толку пользователя.

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

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

2. Ориентация экрана

Рабочие столы: Они ориентированы горизонтально. Пользователь не может изменить эту ориентацию.

Смартфоны: На мобильных устройствах у пользователя есть возможность изменить ориентацию экрана. 94% пользователей используют смартфон вертикально, а 6% — горизонтально.

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

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

3. Навигация и ввод

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

Смартфоны: На мобильном устройстве у пользователя нет мыши или физической клавиатуры для ввода или выбора. В мобильных устройствах есть сенсорные экраны.

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

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

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

4. Окружающая среда

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

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

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

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

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

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

5. Разделенный экран

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

Смартфон: Новые смартфоны поддерживают разделение экранов. Он не так часто используется, как на рабочем столе, поэтому суть по-прежнему важна. Вы должны заботиться о большинстве ваших пользователей, у которых есть смартфоны без функции разделения экрана. Если пользователю необходимо сравнить курсы валют или проверить местоположение города, чтобы полностью использовать ваше приложение, а вы не предлагаете этой функции, ему, возможно, придется покинуть ваше приложение и открыть калькулятор или Google Карты.Это может побудить его полностью закрыть ваше приложение — возможно, потому, что он отвлекается на другое открытое приложение или раздражен тем, что вы не предложили ему все функции, необходимые для полноценного использования вашего приложения.

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

6. Обозначения

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

7. Бесшовная конструкция

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

FAQ

Что такое UX приложений?

App UX охватывает опыт пользователей до, во время и после использования мобильного приложения.

Кто изобрел UX?

UX окружает людей с момента изобретения первого продукта. Однако человек, который официально придумал термин «пользовательский опыт», — это Дональд Норман. Дональд Норман работал в Apple, а Nielsen Norman Group и по сей день является влиятельным лидером в области UX.

Как вы проводите исследования UX?

UX-исследование требует наблюдения за поведением пользователей.Для этого вы можете использовать такие инструменты, как UXCam или Applause. Полный список UX-методов можно найти здесь.

Статьи по теме:

10 правил мобильного UX-дизайна

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

Во-первых, что нужно делать

1. Исследование перед проектированием

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

Практические рекомендации:

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

Дополнительные рекомендации по исследованию см. В нашей статье «Всеобъемлющее руководство по методам исследования UX».

2. Приоритезация функций

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

Практическая рекомендация:

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

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

3. Избавьтесь от беспорядка

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

К мобильному UX-дизайну применима известная поговорка Антуана де Сент-Экзюпери: «Совершенство достигается, когда нечего отнимать». Очень важно избавиться от всего, что не является абсолютно необходимым в мобильном дизайне, потому что уменьшение беспорядка улучшит понимание.

Практические рекомендации:

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

4. Сделайте навигацию очевидной

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

Практические рекомендации:

• Убедитесь, что навигация знакома пользователям. Люди счастливы, когда приложение оправдывает их ожидания.Для этого используйте шаблоны навигации, знакомые вашей целевой аудитории, чтобы навигация не требовала никаких объяснений.
• Разработайте хорошую информационную архитектуру. Информационная архитектура — это организация информации в ясной и логичной форме. Организуйте свою информацию таким образом, чтобы для ее достижения требовалось минимальное количество действий.
• Навигация не должна отвлекать внимание от контента. Он должен быть реализован таким образом, чтобы поддерживать структуру приложения, не привлекая к себе внимания.
• Сообщите текущее местоположение. Люди всегда должны знать, где они находятся в вашем приложении, чтобы они могли успешно ориентироваться.
• Стремитесь к последовательности. Не перемещайте элементы навигации в новое место и не скрывайте их на других страницах. Это запутает и дезориентирует ваших пользователей.
• Обеспечьте свободный путь. Пользователи должны быстро перейти к нужному им контенту. Путь по содержанию должен быть логичным (с точки зрения пользователя).

Дополнительные рекомендации см. В нашей статье «Основные шаблоны мобильной навигации».

5. Создавайте удобные для пальцев мишени касания

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

Практические рекомендации:

• Обеспечьте достаточное количество точек касания для интерактивных элементов. Создавайте элементы управления размером не менее 7–10 мм, чтобы по ним можно было точно постучать пальцем.

Мишень размером 10 мм позволяет пальцу пользователя плотно прилегать к цели. Изображение предоставлено UXMag.

• Убедитесь, что между метками есть правильное расстояние.

6. Сделайте текст разборчивым

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

Практические рекомендации:

• Выберите шрифт, который хорошо работает в различных размерах и весах, чтобы сохранить удобочитаемость и удобство использования любого размера. . Безопасная ставка — полагаться на шрифт платформы по умолчанию. Apple использует семейство шрифтов San Francisco, чтобы обеспечить единообразие чтения на всех платформах. Roboto и Noto — стандартные гарнитуры в Google Android.
• Используйте разборчивый шрифт размером . Текст должен иметь размер не менее 11 пунктов, чтобы пользователи могли читать его на обычном расстоянии просмотра без увеличения.

Мелкий шрифт вызывает утомление глаз. Изображение от Apple.

• Используйте достаточный цветовой контраст для текста . Из-за недостаточной контрастности текст сливается с фоном. Стремитесь к минимальному коэффициенту контрастности 4,5: 1 для основного текста и текста изображения.

Текст слева не соответствует рекомендациям по цветовому контрасту — его трудно читать на фоне.Изображение от Apple.

7. Обеспечьте обратную связь о взаимодействиях

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

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

Практические рекомендации:

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

Интерактивные элементы меняют свой стиль при нажатии. Изображение предоставлено Ramotion.

8. Сведите к минимуму необходимость набора текста.

Набор текста на мобильном устройстве — медленный и подверженный ошибкам процесс. Поэтому всегда лучше попытаться свести к минимуму объем набора текста на небольшом устройстве.

Практические рекомендации:

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

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

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

Дополнительные рекомендации см. В нашей статье «Проектирование более эффективных форм: структура, входы, метки и действия».

9. Обеспечьте бесперебойную работу

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

Практическая рекомендация:

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

10. Всегда тестируйте свой дизайн

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

Практические рекомендации:

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

А теперь нет

1. Не пытайтесь создать идеальный опыт с первой попытки

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

Практические рекомендации:

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

2. Не создавайте изолированно

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

Практические рекомендации:

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

3. Не запрашивать разрешения сразу при запуске

Довольно часто первое, что мы видим при запуске только что загруженного приложения, — это диалоговое окно с запросом разрешения (например, «Разрешить приложению X использовать ваше местоположение? ») Когда приложение запрашивает разрешения прямо при запуске, пользователи часто отклоняют такие запросы разрешений. Почему? Потому что на данный момент у пользователя нет никакого контекста для принятия решения.Они не знают, зачем вам эти разрешения.

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

Спрашивать разрешения в контексте задачи. Пользователи не будут беспокоиться о запросе разрешения, если очевидно, зачем он нужен приложению. Изображение от Think With Google.

Практические рекомендации:

• Спрашивайте только то, что явно нужно вашему приложению . Не запрашивайте все возможные типы разрешений. Было бы подозрительно, если бы приложение запрашивало разрешения без очевидной необходимости в них (например, приложение-будильник, запрашивающее разрешения на доступ к вашему списку контактов).

4. Не заставляйте пользователей ждать содержимого

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

Практическая рекомендация:

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

Скелет экрана для ленты новостей в приложении Facebook. Пользователям дается представление о структуре страницы.

5. Не используйте жаргон в пользовательском интерфейсе.

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

Неизвестные термины или фразы увеличивают когнитивную нагрузку на пользователя. Изображение от Think With Google.

Практическая рекомендация:

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

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

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

Практическая рекомендация:

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

7. Не копируйте веб-интерфейс в приложениях

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

Практическая рекомендация:

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

Форма входа из приложения TD Bank для iOS.Такое ощущение, что команда разработчиков разработала мобильный веб-сайт, а не мобильное приложение — ссылки подчеркнуты, а под ними даже есть уведомление об авторских правах.

8. Не создавайте тупиковые страницы

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

. Он просто не помогает пользователям понять основную причину проблемы и не отвечает на вопросы: «Почему это происходит и что я могу с этим поделать?»

Практическая рекомендация:

• Ничто в вашем приложении не должно быть тупиковым .Состояния ошибок и пустые состояния должны содержать инструкции и действия для продвижения вперед.

9. Не открывайте пользователям браузер

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

Отрицательный пример. Когда пользователь нажимает на «Забыли пароль?» в приложении Facebook для Android, приложение пытается запустить браузер смартфона.

Практическая рекомендация:

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

10. Не просите пользователя поставить оценку вашему приложению во время первого знакомства с ним

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

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

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

Практическая рекомендация:

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

Заключение

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

Поразите своих пользователей 31 передовой практикой UX для мобильного дизайна

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

Требуется ли обновление вашего существующего мобильного приложения? Планируете ли вы создать новое приложение, которое поразит ваших пользователей? Или, может быть, вы просто любите все вещи UX и UI и всегда внимательно следите за полезными советами и рекомендациями?

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

Бесшовные поток мобильных приложений

1.Поддерживайте согласованность дизайна.

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

Revolut обеспечивает согласованный пользовательский интерфейс на всех экранах

2. Устраните сомнения пользователя.

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

3. Уменьшите количество шагов.

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

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

4.Разбейте действия пользователя.

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

Приложение MoneyTap придерживается принципа UX: один экран = одна цель.

5. Обрежьте свой интерфейс.

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

6. Расставьте приоритеты для элементов пользовательского интерфейса.

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

Чтобы выделить важную информацию, Target держит ее вверху экрана

7.Сделайте прокрутку интуитивно понятной.

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

8. Рассмотрим панели вкладок.

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

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

9. Обеспечьте плавный переход из книжной / альбомной ориентации.

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

Ориентированность на пользователя

10. Создайте разные пути пользователя.

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

Фрилансеры получают несколько различных вариантов регистрации, чтобы присоединиться к сервису Fiverr

11.Будь проще!

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

12. Настройте приложение под уровень пользователя.

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

Trip.com отлично справляется с задачей быстрого и эффективного подключения пользователей

13. Примите знакомство.

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

14. Оставьте место для персонализации.

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

Allrecipes Dinner Spinner позволяет пользователям персонализировать свой корм с помощью индивидуальных рекомендаций рецептов

15. Минимизируйте ввод данных.

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

16. Предложите помощь пользователю.

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

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

Простота использования и доступность

17.Дизайн для использования одной рукой.

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

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

18. Обеспечьте высокую контрастность изображения.

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

19. Избегайте случайного выбора цвета.

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

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

Четкая и лаконичная цветовая схема Babbel с одним доминирующим цветом помогает учащимся оставаться активными и сосредоточенными

Приложение Freelancer использует богатую, но хорошо сбалансированную цветовую палитру, чтобы различать категории услуг.

20. Дизайн удобен для пальцев.

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

21. Пусть кнопки будут кнопками.

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

22. Сделайте интерактивные элементы узнаваемыми.

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

WebMD подсказывает действия пользователя с помощью легко различимых кнопок и значимых значков

23. Настройте параметры отображения, чтобы сделать приложение доступнее.

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

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

24.Проверьте размер шрифта.

Стандартная рекомендация для размера шрифта в мобильном дизайне — не менее 16 пикселей. В идеале используйте не более двух-трех размеров для разных типов контента. Будьте осторожны с заголовками, так как крупный шрифт может привести к тому, что ваши строки будут содержать по 1 или 2 слова каждая. Всегда просматривайте свое приложение на устройстве, прежде чем отправлять код в рабочую среду.

25. Поддерживайте читабельность и единообразие стилей шрифтов.

Типографика играет решающую роль в дизайне мобильного UX и UI и требует глубоких размышлений.В общем, старайтесь свести количество стилей шрифта к минимуму. Помните, что шрифты без засечек легче читать при более низком разрешении экрана. Также имейте в виду, что выделяется курсивом, а трудно читать, особенно для пользователей с дислексией. То же самое касается ВСЕХ ЗАГЛАВНЫХ букв, поэтому текст, в котором все буквы заглавные. Заглавные буквы хорошо сочетаются с логотипами и аббревиатурами, но когда вы злоупотребляете ими для заголовков и заголовков, они замедляют скорость сканирования.

Агрегаторы новостей, такие как Google News или BBC News, обычно используют простые шрифты без засечек, в то время как мобильные газеты, такие как WSJ или The NYT, часто сочетают их с более традиционными стилями

26.Обучайте пользователей жестам.

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

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

27. Облегчите поиск.

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

В Healthtap пользователи могут легко найти ответы на любой вопрос, связанный со здоровьем, через строку поиска

Производительность

28.Дизайн для оптимальной производительности.

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

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

29. Используйте каркасные сетки.

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

Экран-скелет приложения LinkedIn

30. Не отвлекайтесь.

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

Отвлекайте внимание пользователя с помощью морфического экрана загрузки (кредит: Валентин Сэлмон)

Развлекайте пользователей, ожидающих удаления файлов из вашего приложения (кредит: Hanna Jung)

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

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

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

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

Мобильный первый дизайн окончен.Добро пожаловать в Mobile In Mind.

Зачем кому-то использовать GitHub на своем телефоне? Это был вопрос, который скептики задали Райану Нистрому, техническому директору GitHub и бывшему руководителю отдела разработки iOS в Instagram, когда вскоре после приема на работу ему было поручено сократить на десятилетие рабочие процессы, инструменты и обмен сообщениями на сайте хостинга разработки программного обеспечения. в фреймворк для мобильного приложения.

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

Но, судя по данным об использовании и вовлеченности, они ошибались. С момента запуска бета-версии в начале 2020 года на GitHub приложение было загружено три миллиона раз и использовалось для 1,2 миллиона проверок кода и 600000 слияний кода, говорится в электронном письме, которое представитель компании поделился с Built In.

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

«Гораздо проще начать с малого, чем начинать с огромного холста и сокращать вещи».

«[Mobile-first] — это именно то, о чем говорится», — сказал мне Нистром. «Вместо того, чтобы брать то, что традиционно было разработано для больших экранов, больших мониторов, ноутбуков или чего-то еще, вы начинаете с действительно крошечного экрана, а затем увеличиваете масштаб, потому что намного, намного проще начать с малого, чем начать с малого. огромный холст и сжимайте вещи ».

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

Но что, если ваша компания разрабатывает программное обеспечение для инвестиционного аналитика, сканирующего два монитора на торговой площадке? Или исследователь Министерства сельского хозяйства США, отслеживающий региональные популяции растений на большом экране? Или пользователи с физическими ограничениями или живущие в частях света с неразвитыми широкополосными сетями? Или любой из 161 миллиона подписчиков Netflix, просматривающих персонализированное меню в поисках чего-нибудь интересного?

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

Тактический подход к проектированию Mobile-in-Mind

1. Оцените привычки и потребности вашей пользовательской базы. Это поможет определить, стоит ли ориентироваться на мобильные устройства.
2. Определите приоритеты контента, чтобы установить удобную для пользователя иерархию информации.
3. Выберите стратегию адаптивного или адаптивного дизайна, чтобы перенести взаимодействие между устройствами и окнами просмотра.
4. Определите области для устранения неэффективного использования пространства, такие как желоба и планки выступов.
5. Создайте библиотеку компонентов с мобильными функциями. Автоматически сгенерированные текстовые ответы, липкие вкладки навигации и складываемые карточки могут улучшить удобство использования.
6. Сборник лучших практик. Обратите внимание на рекомендации Google по дизайну и индексации для мобильных устройств, руководства по Kotlin для Android и рекомендации Apple по пользовательскому интерфейсу.
7. Разработка прототипов для проверки взаимодействия с пользователем.

«Я смотрел на своем телефоне, например, серию Во все тяжкие, , но это не оптимально, правда?» — сказал Райан Хэтч, стратег по UX-контенту в провайдере чата Stream из Колорадо.«Я готов поспорить, что в офисах Facebook они не думают в первую очередь о мобильных устройствах. Они думают прежде всего о продукте, прежде всего о покупателе, прежде всего о пользователе. И где бы этот человек ни был, они смогут связаться с ним ».

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

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

«Разработка мобильных устройств в первую очередь очень важна, потому что она помогает выделить то, что является наиболее важным для бизнеса», — сказала Эмма Мур, основательница агентства по развитию PVT Group в Колорадо и ранее проводившая исследования UX, управления продуктами и пользовательского интерфейса. должности дизайнера в компаниях, включая Disney.«Таким образом, вы получаете эту иерархию информации очень органично».

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

Оцените свою пользовательскую базу

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

«Самое важное — это действительно понять, как, когда и почему аудитория будет использовать ваш продукт», — сказал он.

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

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

Подробнее об удобном для мобильных устройств дизайне 12 отличных примеров адаптивного дизайна

Изображение: GiTHub

Оптимизация информационной архитектуры

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

Стандартные размеры экрана смартфонов в среднем от 4,7 до 6,5 дюймов, а наиболее распространенное разрешение экрана мобильных устройств составляет всего 360 на 640 пикселей. Это означает, что у дизайнеров ограниченное пространство для ключевых функций и сообщений, а приоритезация контента имеет решающее значение для конструктивного взаимодействия.

«Вещи должны складываться, они не могут загружаться вечно, и нужны действительно быстрые CTA [призывы к действию]», — пояснил Хэтч.

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

Приоритеты мобильного дизайна Stream

1. Получайте электронные письма посетителей сайта для потенциальных клиентов.
2. Удовлетворите ценностное предложение продукта и основные функции чата.

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

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

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

«Три или четыре распространенных новичка, которые Facebook предоставил, по сути, говорят:« Эй, это доступно? »« Эй, не могли бы вы рассмотреть меньшее? »« Эй, вы предлагаете доставку? »И это как: выберите, бум, и просто отправьте его мне, — сказал Хэтч.«Это помогает уменьшить незащищенность».

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

Это решение требует компромиссов. Некоторые разработчики не хотят использовать панели вкладок в мобильных приложениях, потому что они занимают и без того ограниченное место.По словам Нистрома, на ранней модели iPhone с разрешением 320 на 480 пикселей типичная панель вкладок из 50 пунктов могла занимать до 10 процентов высоты области просмотра. Но когда альтернативой является нажатие на значок стрелки назад полдюжины раз для достижения точки входа в систему навигации, панель вкладок может оказаться наиболее безболезненным и удобным решением.

Затем возникает проблема плотности информации: сколько белого пространства следует оставлять между текстом, изображениями и кнопками, чтобы дисплей не выглядел тесным? Когда Нистром был в Instagram, белое пространство считалось частью «расслабляющего и приятного опыта», который команда стремилась передать.Но база пользователей GitHub совершенно другая. Оказывается, кодеры предпочитают более плотно упакованные компоновки.

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

Изображение: Shutterstock

Выберите адаптивный или адаптивный дизайн

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

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

«Даже Disney не очень много занимается адаптивным дизайном, потому что это слишком сложно для инженеров постоянно», — сказал мне Мур.

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

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

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

«Если вы слышите такие слова, как:« Мы не можем сделать это прямо сейчас; нам нужно подождать ». Или, если вы слышите слова« технический долг »или« Давай сначала сделаем это », возникает проблема с бюджетом, и у тебя не будет свободы делать все.Вы должны быть действительно стройными, умными и проворными, — сказал Мур.

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

«Создайте мобильный интерфейс, не спрашивайте», — сказал Мур.«Никогда не просите об этом. Начни с мобильного. А если возникнет вопрос, скажите: «Это отраслевой стандарт».

«В Google Analytics можно проводить мошеннические эксперименты», — добавила она. «Распространите мобильную версию примерно на 5 процентов вашего рынка, чтобы никто не волновался. А если через полтора месяца конверсия станет лучше, значит, у вас есть аргумент, основанный на данных «.

Подробнее об информационной архитектуре Что такое информационная архитектура в UX?

Изображение: Shutterstock

Сделайте удобство использования вашим первым делом

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

Disney — компания, которая хорошо понимает такие контекстные факторы, — сказал мне Мур. Изображения в приложении Disney World сворачиваются в вертикальную стопку, в которой наиболее подходящие слайды располагаются сверху, часто со встроенными рекламными объявлениями.

«Вы заметите, что все можно легко локализовать», — объяснил Мур.«Изображения очень светлые, потому что связь в Индии может быть медленнее, чем в Америке. Люди по-прежнему хотят планировать свою поездку. Так что практичность намного важнее [эстетического] опыта ».

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

«Не бойтесь, если ваш файл Adobe Sketch имеет длину 25 дюймов. Вот такой опыт «.

Не зря, например, бесконечная прокрутка стала популярной в мобильных приложениях, таких как New York Times ’, Facebook и Snapchat. Благодаря неисчерпаемому запасу контента, который предлагает переменные вознаграждения по мере того, как пользователи сталкиваются с новыми историями или сообщениями, приложения не дают пользователям веских причин для ухода. В мобильном приложении, где пользователи, скорее всего, просеивают контент пальцем, прокрутка — это отзывчивое взаимодействие, которое удерживает их на крючке.

«Как дизайнеры заманчиво, и я прохожу через это прямо сейчас, построить модуль с четырьмя кранами, чтобы пробивать все», — сказал Хэтч. «И это может хорошо работать на настольном компьютере, но не так хорошо на мобильных устройствах. Так что не бойтесь, если ваш файл Adobe Sketch имеет длину 25 дюймов. Вот такой опыт «.

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

«Очень сложно взять неограниченное количество конфигураций и стилей, которые вы можете получить с помощью Markdown и HTML, а затем перенести их на телефон, используя собственные библиотеки рендеринга текста», — сказал Нистром. «Это не только должно работать, но и должно быть очень быстрым. И он должен быть стабильным ».

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

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

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

Изображение: Google

Учитывайте стандарты материального дизайна и инструментарий

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

Хотя для создания единообразного взаимодействия на всех устройствах может потребоваться адаптация CSS и условные операторы кода для определенных анимаций и интерактивных эффектов, распространение таких технологий «сборка один раз, развертывание повсюду» ограничивает необходимость нанимать разные инженерные группы для отдельной разработки Android и iOS. версии одного и того же приложения.

«Что делает React Native для UI / UX, так это позволяет вам делать действительно хорошие встроенные сообщения об ошибках и обеспечивать быструю обратную связь с пользователем», — сказал Мур. «Так что знание того, как работает React Native, может дать вам большую свободу в микровзаимодействиях, которые нравятся людям, и это не требует больших затрат для компании, потому что большая часть этого уже сделана заранее».

«Я настоятельно рекомендую следовать многому из того, что крупные технологические компании сделали и узнали, и, вероятно, не изобретать велосипед заново.”

В то же время рекомендации Google по дизайну и индексации для мобильных устройств, учебные пособия по Kotlin для Android и рекомендации Apple по пользовательскому интерфейсу представляют собой поучительные схемы для дизайнеров и разработчиков.

«Я настоятельно рекомендую следовать многому из того, что крупные технологические компании сделали и узнали, и, вероятно, не изобретать колесо», — сказал Нистром. «Есть отличные фреймворки, инструменты и документация как для дизайна, так и для базовых технологий, которые делают это намного безопаснее и удобнее.

Нистром сказал мне, что современные мобильные приложения делятся на два основных лагеря: приложения, разработанные как TikTok и Snapchat, с искусной анимацией и жестами, которые создают «плавное ощущение толпы», и стандартные приложения, которые «выглядят и ощущаются почти так, как будто они были сделаны Apple или Google и принадлежат вашему телефону ».

Мобильное приложение GitHub больше похоже на последнее. Строго придерживаясь руководящих принципов разработки Google и Apple, команда дизайнеров создала приложения для Android и iOS с нуля с учетом визуальной разборчивости и простоты использования.Большая часть шестимесячного процесса была потрачена на создание библиотеки компонентов с использованием Figma для размещения стандартных компонентов пользовательского интерфейса из UIKit от Apple, Swift и библиотек компонентов и дизайна материалов от Google.

«Вы почти перетаскиваете компоненты в конструкции и прототипы», — пояснил Нистром. «Я говорю так, будто мы получаем все это бесплатно. Это не так просто. Но, по большому счету, наличие реальной системы проектирования и фреймворка и использование Figma было супер, супер полезным ».

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

«Даже когда мы дома, нам все равно нужны наши телефоны», — сказал Хэтч. «Я думаю, что основная основная цель — это просто прямое общение: друг с другом и с компаниями. «Привет, ребята, вы сегодня открыты?» «Разрешаете ли вы обедать в магазине?» «Могу я связаться с кем-нибудь?» И это происходит из чата в приложении, текстовых сообщений и электронной почты.

«Возможно, через пять лет мы не будем носить с собой телефоны, — добавил он, — но мы прошли через 12 версий iPhone, и на практике мы держим телефон, который очень похож на него. сделал 10 лет назад. И, если я собираюсь держать пари, мы будем делать то же самое в 2030 году ».

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

Что такое Mobile First Design? Почему это важно и как это сделать? | Винсент Ся

На Всемирном мобильном конгрессе в 2010 году Эрик Шмидт, генеральный директор Google, заявил, что дизайнеры должны следовать правилу «сначала мобильные» в дизайне продуктов.Что означает «сначала мобильный дизайн»? Почему это важно? Как это сделать? Я отвечу на эти 3 вопроса в следующей части.

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

1. Адаптивный веб-дизайн (RWD)

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

2. «Постепенное развитие» и «постепенная деградация»

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

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

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

Progressive Advancement на данный момент выиграла игру, насколько я могу судить.Если UI / UX-дизайнеры начнут разработку продукта с его настольной версии, они неизбежно захотят воспользоваться большинством преимуществ продвинутой версии. Например, эффект наведения курсора мыши; Изображения HD и сложные диаграммы, которые могут отображаться нормально только при наличии недавней пропускной способности. Таким образом, дизайнеры будут прилагать усилия, чтобы завершить потрясающую настольную версию, и только обнаруживают, что ее вряд ли можно будет использовать на мобильных устройствах, если они не откажутся от множества красивых идей.Если так, то мобильная версия будет больше похожа на запоздалую мысль, неполный продукт, который разбавлен.

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

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

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

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

1. Использование мобильного Интернета превысило использование настольных компьютеров в 2016 году.

2. Люди проводят все больше и больше времени в Интернете с мобильных устройств.

3. В начале 2012 года продажи смартфонов превысили продажи ПК.

Рост числа мобильных устройств побуждает дизайнеров обращать внимание на мобильные устройства и следовать правилу «сначала мобильный» в дизайне продукта.

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

В следующей части объясняется продвижение продукта от мобильного телефона до ПК.

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

* Название веб-сайта

* Отель (Внутренний отель, Иностранный отель, Часовой номер, Особый отель)

* Выбор времени (время регистрации, время отправления)

* Мой заказ

* Служба поддержки

* Продвижение и реклама

Затем мы получаем такую ​​версию для мобильных устройств:

Приложение для бронирования отелей — создано с помощью Mockplus

Местные, зарубежные отели и выбор времени являются наиболее важным контентом.Они расположены в самой заметной части интерфейса.

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

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

No related posts.