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

Общие принципы в создании мобильных приложений для начинающего UX/UI-дизайнера

дизайн мобильных приложений правила. 0e233bff8a5d41e0baa6314679ec3574. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-0e233bff8a5d41e0baa6314679ec3574. картинка дизайн мобильных приложений правила. картинка 0e233bff8a5d41e0baa6314679ec3574.

Привет! После предыдущих моих постов мне часто писали ребята, которые начинают изучать тему UI/UX. Это так классно, спасибо вам! И в этой статье я делюсь принципами, которые будут интересны и полезны новичку.

Обучение (Onboarding)

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

Ещё они нужны, когда выходит классное обновление в приложении, и грех его не выделить.

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.
Яндекс.Транспорт рассказывает о новых фишках.

Среднее количество слайдов 3-4, больше читать неинтересно.

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.

Методические рекомендации (guidelines)

Например, в iOS основное меню находится снизу в Tab bar, а в Android –– это боковое меню.

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.

Пример отображения экрана на iOS и Android.

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

Шрифт (iOS)

9-ая операционная система поддерживается не на всех устройствах, т.е. рисуя макеты для iPhone 6, используя шрифт SF, необходимо понимать, что у некоторых пользователей будет старая добрая гельветика. (Это нестрашно, разве что, может помешать в максимальном значении символов в одной строке)

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.

В принципе, разница не раздражает, а кому-то и совсем не видна.

Элементы (iOS)

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

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

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.

Один экран на разных разрешениях.

Nothing

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

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

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

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.

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

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.

А ещё можно встретить вот такие баги.

Элементы (Android)

Здесь ситуация ещё интереснее, чем в iOS. Размеров смартфонов даже в одной ветке (XH, например) много, и сделать на всех устройствах идеально невозможно. Но может помочь выработка принципа отображения элементов. Как вариант, выяснить для себя, что отображение функций на экране девайса 2:1 и передать эту информацию разработчику.

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.

Тут стоит не забывать проработать момент с клавиатурой и набором текста.

Пожалуйста, любите детали!

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

Источник

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

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

дизайн мобильных приложений правила. 621addc42d0ef13282a2daee9b99b759. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-621addc42d0ef13282a2daee9b99b759. картинка дизайн мобильных приложений правила. картинка 621addc42d0ef13282a2daee9b99b759.

дизайн мобильных приложений правила. fb734d62681dbfee5aab5955fa70711e. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-fb734d62681dbfee5aab5955fa70711e. картинка дизайн мобильных приложений правила. картинка fb734d62681dbfee5aab5955fa70711e.

Качпер Рудуха
(Kacper Ruducha)

дизайн мобильных приложений правила. 14100802102019 27e9aa5bdf801f94f7728fe14d1ac08405e5a691. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-14100802102019 27e9aa5bdf801f94f7728fe14d1ac08405e5a691. картинка дизайн мобильных приложений правила. картинка 14100802102019 27e9aa5bdf801f94f7728fe14d1ac08405e5a691.

Графический дизайнер из Варшавы. Рисовал с детства, но не понимал, что делать со своими рисунками, — пока не пришёл в графдизайн. Мечтает о своей дизайн-студии. Ведёт блог на Medium.

дизайн мобильных приложений правила. 21203526092019 b0cb10573acb7482b6a94118a0f1121dc48fff3c. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-21203526092019 b0cb10573acb7482b6a94118a0f1121dc48fff3c. картинка дизайн мобильных приложений правила. картинка 21203526092019 b0cb10573acb7482b6a94118a0f1121dc48fff3c.

Перевожу, пишу, редактирую. Люблю живую речь.
Уважаю букву Ё.
Формализм мастдай.

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

дизайн мобильных приложений правила. 13454402102019 db52642fc67f6c7c46657360f234a883af322464. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-13454402102019 db52642fc67f6c7c46657360f234a883af322464. картинка дизайн мобильных приложений правила. картинка 13454402102019 db52642fc67f6c7c46657360f234a883af322464.

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

Android против iOS

Сегодня у нас дуополия (от латинского «два» и греческого «продаю». Ситуация, при которой есть только два продавца определённого товара, ведущие независимую друг от друга политику. — Ред.). Две главные мобильные операционки — Android от Google и iOS от Apple. По данным StatCounter Global Stats, на март 2019 года их доли на рынке составляют 75,33% и 22,4% соответственно:

дизайн мобильных приложений правила. 13454402102019 e3ea06ecc4efe66fd609360c227a5daace25eda6. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-13454402102019 e3ea06ecc4efe66fd609360c227a5daace25eda6. картинка дизайн мобильных приложений правила. картинка 13454402102019 e3ea06ecc4efe66fd609360c227a5daace25eda6.

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

О чём нужно помнить дизайнерам мобильных приложений — неважно, работаете вы с Android или же с iOS?

Опирайтесь на соглашения платформы

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

Для Android написан Google Material Design, а для iOS — Human Interface Guidelines. Непременно добавьте эти странички в закладки, вы будете часто возвращаться к ним при работе. Проштудируйте их, познакомьтесь с образцами нейминга, дизайна и юзабилити. Не забывайте, что документы эти регулярно обновляются, поэтому пересматривайте их время от времени, чтобы быть в курсе изменений.

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

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

Проектирование и инструментарий

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

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

Что происходит с инструментами
для UX и UI-дизайна

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

Во-первых, пора монополий прошла: пока ещё легко выбрать предпочтительный инструмент для каждого этапа проектирования, но всё слишком быстро меняется. Например, дизайнеров всё больше привлекают приложения Figma и Adobe XD, бросившие вызов Sketch.

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

дизайн мобильных приложений правила. 13454402102019 d58f50d1222620cd1cfe95da3a91221bd0d26e65. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-13454402102019 d58f50d1222620cd1cfe95da3a91221bd0d26e65. картинка дизайн мобильных приложений правила. картинка 13454402102019 d58f50d1222620cd1cfe95da3a91221bd0d26e65.

Особенности мобильного дизайна: помните об ограничениях.

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

Меньший размер дисплея

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

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

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

Ограничения трафика и производительности

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

…и не забывайте о возможностях

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

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

Источник

Дизайн мобильного приложения. Как добиться оптимального результата?

дизайн мобильных приложений правила. 570194f9c4e34d47a02e8a5daf8df022. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-570194f9c4e34d47a02e8a5daf8df022. картинка дизайн мобильных приложений правила. картинка 570194f9c4e34d47a02e8a5daf8df022.

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

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

1. Правила, которые всегда работают

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

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

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

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

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

Фидбек и время ответа. Отклик приложения должен давать пользователю представление о том, выполнена задача или нет. Это может быть обычный звуковой сигнал или нечто более сложное — например, модальное окно. Убедитесь в том, что фидбек приложения соответствует положениям, установленным Nielsen Norman Group.

Как верно заметил Эндрю Майер (Andrew Maier) в своей статье, эти пять правил должны стать основой, определяющей проектирование любого типа взаимодействия.

2. Знать своих пользователей

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

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.

В этом вопросе есть четкая тактика, состоящая из трех положений:

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

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

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

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

Отличные советы по этому вопросу дает Джефф Саурос (Jeff Sauros).

3. Контент и поведение пользователей

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

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.

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

[Раз в месяц][Дважды в месяц]

[Через неделю][Каждую неделю]

[Выбрать календарный день]

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

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

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

4. Улучшение юзабилити с использованием знакомых пользователю схем

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

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.

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

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

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

Оживление: здесь имеется в виду анимация, которая сделает приложение более живым. Рекомендуем объединить анимацию с жестовым управлением.

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.

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

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.

Yelp — отличный пример приложения с интуитивно понятным интерфейсом.

5. Учитываем размер пальцев пользователя

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

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

Вот что стоит учитывать, проектируя кнопки и другие сенсорные элементы:

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

Наши пальцы действительно большие. Их ширина составляет около 45–57 пикселей, что больше, чем рекомендует большинство руководств для тестовых устройств. Apple, например, рекомендует цель квадратной формы с размером стороны в 44 пикселя. А этого далеко не всегда достаточно.

6. Не отказывайтесь от градиента и теней

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

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.

Тень обычно очень актуальна при проектировании кнопок, переключателей и подобных элементов.

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.

Тени и градиент отдельных элементов делают интерфейс более понятным пользователю. Эти приемы оформления можно использовать для создания объемных кнопок и полей ввода.

7. Убираем хаос

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

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

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

Источник

Чеклист по UX из 30 пунктов для мобильных приложений

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.

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

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.
Статья переведена при поддержке компании EDISON Software, которая разрабатывает приложения и сайты, а также занимается пользовательскими интерфейсами.

1. Вход / Регистрация

Заставка показывается при запуске приложения. Это первое что видит пользователь, это создает первое впечатление о продукте, еще до начала работы.

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.

Rider Launch Transition by Uber

Средний человек зарегистрирован в 90 онлайн-сервисах, которые требуют пароль. Поэтому часто пароли «забыватся». Согласно статистике 21% пользователей забываю пароль в течение 2 недель, а 25% забывают один пароль минимум раз в день. Если ваше приложение требует пароль, то позаботьтесь о форме восстановления пароля.

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.

2. Первый опыт

3. Экран с приветствием/инструкция при первом запуске (Onboarding )

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

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.

Animated onboarding experience by Cuberto

4. Экран с оповещением об успешном подтверждение данных

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

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.

Для этого экрана жизненно важно обеспечить:

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

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

дизайн мобильных приложений правила. 5dee5301f0e7fe31cda3e82880bd7ce9. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-5dee5301f0e7fe31cda3e82880bd7ce9. картинка дизайн мобильных приложений правила. картинка 5dee5301f0e7fe31cda3e82880bd7ce9.

6. Дефолтная аватарка пользователя

95% по данным Jared M. Spool ) не меняют настройки по умолчанию. Это значит что у пользователей будет та аватарка, которую выбрали для них вы.

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.

Cute default user avatar in Dropbox

3. Ежедневные взаимодействия

7. Экран запросов на разрешение

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

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.

Notification Permission Dialog by Anton Tkachuk

8. Различные состояния для интерактивных элементов

Кнопки и прочие интерактивные элементы имеют несколько состояний. Очень важно продумать состояния «по умолчанию»/«нажата»/«не доступно» для каждого интерактивного элемента в вашем приложении.

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.

Три состояния кнопки

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.

Material design button by Vadim Gromov

Будет лучше, если ваши иконки будут единого стиля.

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.

Tab bar icons in the Twitter app for iOS

10. Сообщения об ошибке

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

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.

Error Interaction by Dwinawan

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

11. Процесс загрузки

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

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

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.

Smile loader for AI product design by Gleb Kuznetsov

12. Сообщение о том, что вы всё сделали правильно

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

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.

Confirmation screen in Booking.com

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

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.

14. Отменить операцию

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

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.

Undo for Delete item. Image: Sashoto Seeam

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.

Undo for sending email. Image: Tyler Beauchamp

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

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.

Upvote button in different languages. Image: Chier Hu

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

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.

Help and Feedback by Alex Muench

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

4. Уведомления

18. Уведомления в приложении / Push-уведомления

Знаете ли вы, что паршивые уведомления являются основной причиной, по которой пользователи удаляют приложение?

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.

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

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

19. Настройки уведомлений

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

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.

Настройка параметров уведомлений в Slack

5. Параметры аккаунта

20. Инструмент для обрезки фото профиля

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

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.

Редактирование аватара от Scott Thomas

21. Экраны для просмотра/изменения личных данных

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

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.

Домашний адрес и адрес офиса доступны для редактирования. Выберите адрес доставки от Dhiraj S. Karki

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

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.

Logout in Facebook for iOS

23. Условия использования

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

дизайн мобильных приложений правила. 03ab14de4c95408600c91fdf04721864. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-03ab14de4c95408600c91fdf04721864. картинка дизайн мобильных приложений правила. картинка 03ab14de4c95408600c91fdf04721864.

24. Настройки конфиденциальности

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

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.

Image: Vitaly Friedman

25. Отправить отзыв

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

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.

Skype для iOS дает пользователям возможность «Оставить отзыв», «Сообщить о проблеме» или «Предложить функцию».

6. Лента

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

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.

Обратите внимание, что область заголовка сворачивается при прокрутке. Craiglist Mobile animation by Aurélien Salomon

Поиск внутри приложения

27. Поведение «по умолчанию»

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

28. Поделиться/Добавить в закладки

Позвольте пользователям делиться и добавлять в закладки то, что они нашли.

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.

Like, Bookmark and Share options in the App AE by Martin Berbesson

29. Пустая формочка для «Нет результатов»

Что увидят пользователи, если они что-то искали, а результатов поиска нет? Экран «Нет результатов» не должен означать конец. Подскажите пользователю, какой нужно сделать следующий шаг.

дизайн мобильных приложений правила. image loader. дизайн мобильных приложений правила фото. дизайн мобильных приложений правила-image loader. картинка дизайн мобильных приложений правила. картинка image loader.

Приложение Google Flights предлагает пользователям очистить все фильтры, чтобы найти рейс

8. AppStore/GooglePlay

30. Иконка для приложения

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

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *