10 заповедей дизайна мобильных приложений
Опубликовано: 2017-09-20Не усложняй вещи
В Google Play Store более 3,4 миллиона приложений, а в Apple App Store — чуть более 2 миллионов. Это означает, что в среднем в Google Play Store в день добавляется 3389 приложений, и хотя Apple немного более избирательна, 1557 приложений по-прежнему попадают в App Store ежедневно.
Если вы разработчик мобильных приложений и хотите, чтобы ваше приложение выделялось из ежедневного потока, вы должны создать продукт, который будет красивым и приятным в использовании.
Вам нужно небольшое руководство, чтобы убедиться, что вы делаете все возможное для разработки успешного приложения? Не нужно лезть на гору — у нас есть 10 заповедей дизайна мобильных приложений прямо здесь:
Не усложняй вещи
Как дизайнер приложений, легко увлечься. Когда вы выводите новое приложение на рынок, возникает ощущение, что вам нужно втиснуть в него всевозможные функции, которые (на данный момент) кажутся такими необходимыми. Это особенно верно, когда вы работаете над проектом с командой. Никто не хочет быть человеком, который постоянно держит топор над чужими идеями, или человеком, известным тем, что вырезал из проекта убойную функцию. Тем не менее, в дизайне мобильных приложений включение дополнительных функций на периферии часто приводит к путанице пользователей и созданию загроможденного, несфокусированного пользовательского интерфейса.
«Мобильные пользователи хотят простой и быстрый пользовательский интерфейс. Загружать приложение кучей дополнительных шагов или даже пытаться скопировать интерфейс рабочего стола для продукта — это неправильный подход к дизайну», — говорит Марк Тухшерер, президент Geeks Chicago. «Мобильные пользователи предпочтут минималистский подход превыше всего».
Мы согласны — ограничьте свои функции только тем, что необходимо, и, пока вы это делаете, убедитесь, что ваш пользовательский интерфейс отражает подобное мышление. Ваш пользовательский интерфейс должен делать именно то, что нужно пользователю, и ничего более.
Вы должны убедиться, что ваш дизайн доступен
Как мы уже говорили ранее, доступность — это не просто то, что приятно иметь, это важнейшая функция, которая обязательно должна присутствовать в вашем приложении. Откровенно говоря, если вы не ставите доступность во главу угла дизайна своего мобильного приложения, вам нужно вернуться к чертежной доске.
Во-первых, совершенно необходимо охватить репрезентативную аудиторию, учитывая, что 57 миллионов американцев имеют инвалидность. На самом деле, американцев с нарушениями слуха в Интернете больше, чем всего итальянцев в мире. То же самое касается американцев с нарушениями зрения. Имейте в виду — это всего лишь американцы!
Кроме того, доступный дизайн — это просто хороший дизайн. Лучшие практики разработки специальных возможностей, предложенные как Apple, так и Android, подчеркивают вещи, которые вы должны делать в любом случае, например, точно обозначать элементы управления пользовательским интерфейсом, предлагать навигацию на основе фокуса и избегать отзывов приложений только со звуком.
И, конечно же, независимо от того, разрабатываете ли вы приложение для Android или iOS, вам обязательно нужно протестировать свое приложение на широкой аудитории. Не разносите его по своему офису — дайте его в руки разнообразному населению. Последнее, чего вы хотите, — это чтобы ваше приложение не использовалось большей частью рынка.
Не изобретай велосипед
Хотя устройств может быть много, есть несколько универсальных дизайнерских и UX-подсказок, которым следуют почти все. Подумайте о собственном опыте использования приложений: когда вы взаимодействуете со своим экраном, вы ожидаете, что произойдут определенные вещи. В некоторых приложениях это может означать, что вы ожидаете, что меню появится сбоку, когда вы проведете по нему большим пальцем. Для других это могут быть логичные и знакомые сенсорные жесты, такие как перемещение объектов с помощью перетаскивания.
Мы не предлагаем вам просто собирать свое приложение по частям на основе элементов пользовательского интерфейса, которые уже используются в дикой природе, но вы должны знать, что ваши пользователи ожидают от своего приложения. Любые новые элементы, которые вы добавляете, должны быть объяснены либо с помощью пользовательского процесса адаптации, либо с помощью интуитивного обучения. Это добавляет дополнительный уровень сложности для вашего пользователя. Если у вас абсолютно нет другого выбора, его следует избегать.
Подумайте об этом так: если бы вы загрузили приложение для просмотра своих фотографий, и оно потребовало бы от вас изучения совершенно нового способа взаимодействия с экраном (скажем, с помощью жестов, с которыми вы не знакомы), продолжили бы вы использовать Это? Что, если бы существовало другое приложение, позволяющее использовать уже знакомые вам жесты?
Не отказывайтесь от условностей только для того, чтобы выделиться среди конкурентов. Вы всегда должны работать в рамках языка дизайна, с которым знакомы ваши пользователи, за исключением случаев, когда добавление новых элементов является неизбежным и добавляет что-то к работе с приложением.
Ты всегда должен помнить, для кого ты проектируешь
Если вы разрабатываете мобильное приложение для редактирования фотографий для фотографов, у вас будут другие приоритеты, чем если вы разрабатываете игру для запоминания слов для малышей. Каждая аудитория, для которой вы создаете дизайн, будет иметь разные ожидания, и каждая будет реагировать на разные типы дизайна.
Может быть полезно разработать персонажей для вымышленных пользователей вашего приложения, чтобы смоделировать то, как вы ожидаете, что люди будут взаимодействовать с ним. Вы проектируете для профессионалов? Студент? Доктор? Предприятие? Малый бизнес? Вы создаете что-то, что предназначено для использования клиентами или персоналом? Программисты или дизайнеры? Музыканты или бегуны?
Прежде чем приступить к наброску дизайна, убедитесь, что вы точно знаете, что вы создаете и для кого вы это делаете. Вы должны уметь свести свою цель и целевую демографическую группу к одной простой фразе: «Приложение для знакомств для любителей путешествий». «Приложение для студийного микширования для начинающих продюсеров». «Сетевой диагностический инструмент для ИТ-специалистов».
Рекомендуется для вас:
Если вы изо всех сил пытаетесь сделать это, подумайте, почему это так — вы действительно сосредоточены на создании наилучшего опыта для вашего пользователя или просто пытаетесь создать что-то, что вам кажется крутым? Никогда не теряйте фокус своей цели.
Ты должен использовать шрифты, которые не неприятны
Мы все испытали этот дизайнерский грех. Неважно, находится ли он в приложении, на фирменном бланке из кабинета вашего врача или на слайде PowerPoint — когда шрифт не подходит, мы это замечаем.
О крахе Comic Sans или Papyrus написано достаточно, и можно подумать, что дизайнеры мобильных приложений будут уделять немного больше внимания шрифтам, которые они используют в своих проектах, но это не всегда так. И просто избежать нескольких плохих шрифтов недостаточно, чтобы сделать ваше приложение красивым. Вы должны найти шрифт, который подходит вашему приложению и не отвлекает от вашего UX.
«Типографика — неотъемлемая часть взаимодействия с пользователем, поэтому важно использовать четкие и простые веб-шрифты, — говорит Майк Спенсер, старший инженер по UX/UI в Pointman. «Я предпочитаю шрифты без засечек для мобильных приложений, но действительно важно, чтобы они соответствовали вашему дизайну и были удобочитаемыми».
Ты должен оставаться последовательным
Вам нужно сделать выбор дизайна и придерживаться его во всем приложении. Не располагайте верхнюю панель навигации на каждой странице перед тем, как резко переключиться на выдвижную боковую панель на нескольких избранных экранах. Не используйте мягкие земляные тона для заставки и переключитесь на пастельные тона, как только она загрузится. Если одна кнопка в вашем приложении имеет определенное количество отступов, то и все они должны иметь одинаковые отступы. Ваше приложение должно быть единым во всем, иначе оно будет неприятным и раздражающим для пользователя.
Поддержание согласованности касается не только эстетики. Элементы дизайна, которые вы используете, тонко учат вашего потенциального пользователя чему-то о вашем приложении. Если вы вдруг измените правила, то вы их отбросите и запутаете.
Если есть другие приложения, похожие на ваше, обратите внимание на то, что они делают с точки зрения дизайна. Это покажет вам, какие ожидания пользователи привнесут в ваше приложение. Вы заметите, что все приложения Google выглядят одинаково — то же самое и для Apple. Если вы разрабатываете что-то для определенной компании или отрасли, убедитесь, что ваше приложение соответствует их стилю. Точно так же, если вы создаете приложение для определенной отрасли, оно должно эстетически выглядеть «правильным» для этой отрасли.
Ты должен помнить о мобильных устройствах
Дизайн мобильного приложения… ну, мобильный. Несмотря на это, многие дизайнеры, кажется, забывают, что пользователи будут перемещаться по своим приложениям пальцами (а во многих случаях только большими пальцами). Несмотря на то, что за последние несколько лет телефоны стали больше, все еще существует множество пользователей и вариантов использования, которые требуют удобства использования одной рукой.
Вы также должны подумать о среде, в которой будут находиться ваши пользователи. Они могут сидеть в движущемся транспортном средстве или нажимать кнопки во время ходьбы. Если у вас слишком много кнопок, расположенных слишком близко друг к другу, или экран загроможден ненужными элементами дизайна, ваше приложение будет трудным для понимания и неприятным в использовании. Ваш пользовательский интерфейс должен быть чистым и лаконичным, чтобы ваши пользователи могли легко найти нужную им функцию и нажать нужную кнопку.
Роберт Грашуис и Джейсон Мочча, ИТ-директор и генеральный директор OneSpring соответственно, отмечают важность использования большого количества пустого пространства, чтобы помочь пользователям ориентироваться в вашем приложении. «Слишком много активности на экране отвлекает читателей. Разумно используйте пустое пространство, чтобы уменьшить беспорядок и помочь пользователю сосредоточиться».
Ты должен помнить о пользовательском потоке
Каким бы чистым ни был ваш дизайн, если ваше приложение не имеет естественного потока, оно не завоюет доверие пользователей. Прежде чем погрузиться в дизайн мобильных приложений, вам нужно задать себе несколько основных вопросов, таких как:
- Какую цель ваше приложение служит для пользователя?
- Как они будут перемещаться по нему, чтобы добраться до нужных им функций?
- Сколько страниц им придется анализировать?
- Сколько кликов меню потребуется, чтобы получить доступ к определенной кнопке?
- Какие функции должны быть наиболее доступными?
Это может помочь в разработке вашего дизайна, показывая вам, что именно должно быть включено на каждой странице. В идеале этот шаг должен быть выполнен до того, как вы начнете делать наброски (или прототипы) своего приложения. В пустом документе или на листе бумаги вы можете наметить поток пользователей для различных задач. Например, если вы разрабатываете приложение, которое помогает музыкантам настраивать свои инструменты, у вас может быть примерно такой процесс:
Главный экран > Выберите инструмент [Guitar] > Выберите настройку [Стандартный] > Выберите струну [E]
Вы можете решить упростить поток для общих задач. Например, ваш тюнер может позволить пользователям сохранять конкретный инструмент и комбинацию настроек для кнопки на главном экране. После того, как они выбрали предпочитаемый инструмент и настройку, процесс будет выглядеть следующим образом:
Главный экран > Сохраненный инструмент/настройка > Выбрать струну [E]
Подобное картирование поведения пользователей может помочь вам разработать приложение, которое работает естественно. Это также гарантирует, что вы не забудете добавить определенный элемент дизайна, который может иметь решающее значение для успеха вашего приложения.
Ты должен создать реалистичный прототип
Разработка приложения, не говоря уже о его кодировании, может быть долгим и утомительным процессом. Почти каждый дизайнер или разработчик сталкивался с тем, что придумывал невероятный дизайн, кодировал его и отправлял клиенту только для того, чтобы ему сказали, что это не то, что он ищет.
Точно так же жонглирование набросками может только продвинуть вас. Есть довольно большая разница между чем-то, выгравированным на обратной стороне салфетки, и реалистичным прототипом, который вы можете протестировать. В то время как набросок может передать общую идею, интерактивный, реалистичный прототип может заставить вашего клиента вскочить со своего места. И даже если они не в восторге от него, работающий прототип значительно облегчит получение обратной связи и внесение необходимых изменений.
Proto.io дает вам возможность создавать реалистичные, интерактивные, детализированные прототипы, которые ведут себя так же, как «настоящие» приложения, не требуя от вас написания ни единой строки кода. Таким образом, вы можете дать своему клиенту и команде QA настоящий практический опыт, прежде чем погрузиться слишком глубоко.
И говоря о контроле качества…
Ты проверишь, а потом проверишь еще
По правде говоря, когда мы впервые начали обрисовывать этот пост в блоге, у нас возник соблазн провести от 1 до 10 «тестов» — вот насколько важен контроль качества. Это должно быть очевидно — на самом деле, почти каждый разработчик или дизайнер на планете скажет вам, что тестирование имеет решающее значение для создания плавного UX.
И тем не менее, у всех нас был одинаковый опыт загрузки приложения и совершенно сбитых с толку тем, насколько плохо оно работает — может быть, оно не загружается должным образом на наших телефонах, или, может быть, процесс регистрации настолько ужасен, что вы немедленно удаляете Это. В качестве альтернативы, он может работать нормально технически, но иметь элементы дизайна, которые не имеют смысла, или текст, который неразборчив.
Даже если в вашем приложении нет фатального недостатка, пользователи могут быть непостоянными. Одной крошечной ошибки может быть достаточно, чтобы они больше никогда не использовали ваше приложение. Чтобы избежать этого, тестируйте свое приложение на протяжении всего процесса. От вашего первого прототипа до момента, когда вы отправили готовое к запуску приложение для проверки, вы всегда должны искать вещи, которые нужно исправить или улучшить.
Хотя эти 10 правил помогут вам не сбиться с пути, дизайн мобильного приложения — это не просто следование руководствам или вычеркивание пунктов из списка дел. Вы должны проявить творческий подход — лучшие приложения находят сложные проблемы и изящно решают их.
[Это сообщение впервые появилось на Proto.io и воспроизведено с разрешения.]