Мобильный дизайн: Страница не найдена | 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, в конечном счете будет содержать невидимый дефект, когда будет перенесен в реальный мир. Вот почему так важно протестировать ваше приложение с реальными пользователями на различных мобильных устройствах. Вы должны попросить реальных пользователей, выполнить стандартные задачи, и только после этого вы увидите, насколько хорош на самом деле ваш дизайн. Обращайтесь с вашим приложением, как с непрерывно развивающейся сущностью, используя данные аналитики и фидбэк от пользователей, чтобы постоянно улучшать опыт.

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

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

10 универсальных правил для дизайна мобильных приложений | GeekBrains

Что стоит помнить дизайнеру.

https://d2xzmw6cctk25h.cloudfront.net/post/1509/og_cover_image/6e6c6d523fe45c706b24e7b2a0a1b94d

Благодаря мобильным приложениям офис, развлекательный центр, библиотека и супермаркет помещаются в кармане. Как выполнить дизайн приложения так, чтобы он радовал пользователя каждый день, рассказала преподаватель GeekBrains Алевтина Шаталова.

Следуйте гайдлайнам

Жизнь дизайнера мобильных приложений значительно проще, чем у коллег-«графиков». Все благодаря Apple и Google, которые выпустили набор рекомендаций Human Interface Guidelines и Material Design. Изучаем, руководствуемся!

Выражайте эмоции

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

• Текст – эпитеты, метафоры, ирония работают на выразительность.
• Шрифт – у каждой гарнитуры свой характер. Используйте его, чтобы создать атмосферу.
• Композиция – противостояние, динамику, статику, гармонию и целую палитру ощущений можно передать, по-разному сочетая объекты.
• Цвет – практика показывает, что именно цвет – самый быстрый способ донести эмоцию, а цветовая кодировка запоминается пользователям лучше всего;
• Фото – правильно подобранные фотографии станут ключом к целевой аудитории, заинтересуют пользователей и зададут эмоциональный тон.

Помогайте в решении задач

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

Используйте разумную навигацию

Мир ускоряется, и гаджетами мы пользуемся на ходу. Нужна простая и интуитивно понятная навигация. Для этого все методы хороши: можно использовать двойное описание (иконка + текст) в навигации, А/Б-тесты, пользовательский опыт платформ iOS и Android.

Рассказывайте о преимуществах

Пользователь может заранее не знать о том, насколько ваше приложение способно облегчить ему жизнь. Об этом стоит рассказать с помощью welcome-скринов.

Помните об особенностях мобильных платформ

Палец – не курсор, поэтому отказываемся от десктопных вариантов мелких объектов. Можно заменить их достойной альтернативой – прокруткой с помощью жеста swype.

Презентуйте работу

Правильная подача – половина дела. И дизайнер должен использовать в презентации лучшие средства визуального языка.

Анимируйте правильно

Целесообразная анимация для каждого объекта, как и грамотная постановка хореографии всех графических элементов в приложении – «знак качества» в дизайне.

Будьте внимательны к деталям

Минимализм, свойственный современному дизайну, коварен: он обнажает недостаток опыта у исполнителя. Поэтому каждая деталь требует особого внимания. Чтобы найти случайные, не органичные решения, посмотрите на каждый объект и задайте себе вопрос: «Почему он именно такой?» Если не найдется ответа по поводу формы, цвета, фактуры или положения – это случайный элемент, от которого нужно отказаться или лучше продумать его внешний вид.

Знайте и применяйте правила

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

10 трендов в дизайне мобильных приложений | by Trinity Digital

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

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

Дизайн, сохраняющий время

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

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

Линейный путь пользователя

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

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

Упрощение пути

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

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

Нейтральные интерфейсы и опыт, ориентированный на контент

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

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

Поэтапное представление информации

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

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

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

Руководство и помощь

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

В самой простой форме это может быть конкретная информация о том, как решить проблему.

Осведомленность о местоположении

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

Принятие решений за пользователя

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

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

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

Хороший пример такого проектирования предлагает сервис Spotify: в нем еженедельно автоматически создается плейлист на основе личных музыкальных предпочтений. Благодаря этому пользователю не нужно тратить время на поиск музыки — приложение делает это за него.

Использование возможностей смартфона

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

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

По данным Apple, средний пользователь iPhone снимание блокировку со своего устройства по 80 раз в день. 89% людей используют для этого Touch ID.

Цвет как функциональный элемент

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

Многоканальность

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

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

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

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

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

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

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

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

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

И действительно, недавно в лифте у меня состоялся короткий разговор с пожилой соседкой. Несмотря на то, что посреди дня я был одет в пижаму, она и сейчас совершенно убеждена в том, что я модельер. Дизайн веб-сайтов или 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».

процесс разработки и этапы проектирования

Согласно Statista, на сегодняшний день в мире 3,5 миллиарда мобильных пользователей и к 2021 году их будет почти 4 миллиарда. Поэтому мобильное приложение для e-commerce проектов уже больше, чем просто рекомендация. Как создается дизайн мобильных приложений? Что отличает мобильное приложение от других проектов? Какие существуют особенности и возможности мобильного приложения, которые стоит учитывать? В этой статье мы покажем процесс, результаты и реальные примеры.

Процесс создания дизайна мобильных приложений

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

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

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

Сбор информации и требований

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

1. Требования пользователя — для кого создается приложение, какие задачи оно должно решать, для чего нужен этот продукт с точки зрения целевой аудитории (ЦА) и т. д.

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

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

• Какую нишу будет занимать приложение?
• Какие задачи должен решать продукт?
• Как мобильное приложение будет монетизироваться?
• Как приложение будет себя позиционировать на рынке? В чем его уникальное торговое предложение (УТП)?
• Кто главные конкуренты?
• Какие есть примеры best practice на рынке?

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

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

Создание архитектуры и навигации

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

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

Создание прототипа

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

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

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

Пример динамики и анимации в детализированном прототипе приложения Spot Hunter

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

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

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

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

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

Подготовка контента для сторов

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

Пример контента для сторов мобильного приложения RetouchMe

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

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

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

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

• Учитывайте, что мобильные устройства имеют

  ограниченный дисплей.

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

• Используйте

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

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

• Помните об

  ориентации экрана мобильного устройства.

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

• Учитывайте

  мобильный трафик интернета.

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

• Продумайте

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

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

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

Лучшие практики мобильного 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:

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. Не просите пользователя поставить оценку вашему приложению во время первого знакомства с ним.

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

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

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

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

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

Заключение

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

UI Вдохновение: 20 привлекательных концепций мобильного дизайна

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

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

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

Концепция приложения электронной коммерции

Tech от Fireart Studio отличается минималистичным и легким интерфейсом, который создает отличный фон для графики предметов; кстати, здесь также есть фотография из нашего фотобанка Moose.

Приложение

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

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

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

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

Концепция приложения

Plant от Fireart Studio основана на оттенках и нюансах, плавных изгибах и удобочитаемой типографике.

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

Концепция приложения

Finance от Sebo выполнена в умеренной бело-синей цветовой гамме с цветовыми акцентами в зеленом цвете.

Красочная и художественная концепция дизайна приложения с пользовательской графикой от Валида Бено для энциклопедии птиц.

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

Вкусный и красочный дизайн приложения от Эдди Лобановски отличается сочетанием иллюстраций с яркими интерактивными элементами.

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

Концепция дизайна приложения по подписке на книги с элементами нейроморфизма, ограниченной цветовой палитрой и нестандартной графикой от Riotters.

Концепция дизайна бизнес-интерфейса для приложения управления хранилищем от Widelab.

Концепция скевоморфного приложения для мобильного банкинга в элегантной темной теме с яркими цветовыми акцентами от Heartbeat Agency.

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

Концепция дизайна монохромного приложения с использованием иллюстраций интерфейса от Nickelfox.

Элегантный и приятный для глаз мобильный интерфейс для приложения с рецептами от Pham Huy.

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

Об авторе: Марина Яланская, автор контента и исследователь дизайна, ответственный редактор блога Icons8.

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

Что такое дизайн мобильного взаимодействия с пользователем (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

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

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

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

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-методов можно найти здесь.

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

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

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

При разработке для мобильных устройств необходимо учитывать множество факторов, и многие из них относятся к стандартному 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

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

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

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

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

Поразите своих пользователей 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. Подтвердите пользователя с помощью тактильных ощущений.

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