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

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

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

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

Лучшие статьи, раз в неделю, с доставкой на почту

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

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

Минимизируйте когнитивную нагрузку

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

Наведение порядка

Избавление от беспорядка – одна из главных рекомендаций статьи «10 Do’s and Don’ts of Mobile UX Design». Беспорядок – один из худших врагов хорошего дизайна. Загромождая интерфейс, вы перегружаете пользователей слишком большим объемом информации: каждая добавленная кнопка, изображение и иконка усложняют экран.

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

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

Чистая панель вкладок (справа) намного лучше, чем загроможденная (слева). (Изображение: Apple)

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

Интерфейс показывает больше возможностей после взаимодействия. (Изображение: Ramotion)

Упрощайте задачи

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

Разбивайте задачи на небольшие куски

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

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

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

Поиск фильма и покупка билетов в кинотеатр. (Изображение: Anton Skvortsov)

Используйте знакомые экраны

Знакомые экраны – это экраны, которые пользователи видят во многих приложениях. Такие экраны, как «Начало работы», «Что нового» и «Результаты поиска», де-факто стали стандартами для мобильных приложений. Они не требуют дополнительных объяснений, потому что пользователи уже знакомы с ними. Это позволяет пользователям использовать предыдущий опыт взаимодействия с приложением без необходимости обучения.

Экран профиля пользователя в приложении Quora

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

Минимизируйте ввод информации пользователем

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

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

Основное правило в дизайне форм – чем короче, тем лучше. Объедините несколько полей в одно удобное для заполнения поле. (Изображение: Luke W.)

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

(Изображение: Josh Morony)

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

Встроенная проверка (Изображение: Baymard)

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

Подберите клавиатуру для ввода требуемого текста. (Изображение: ThinkWithGoogle)

Предвосхищайте потребности пользователя

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

Не очевидно, где пользователь может найти штрих-код. Краткая справка рядом с полем ввода будет очень полезной. (Изображение: Hotjar)

Используйте визуальный вес, чтобы подчеркнуть важность

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

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

Избегайте жаргона

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

Неизвестные термины или фразы увеличат когнитивную нагрузку на пользователя. (Изображение: ThinkWithGoogle)

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

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

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

Вот несколько практических рекомендаций по созданию последовательного дизайна:

• Соблюдайте стандарты платформы.
  Каждая мобильная ОС имеет стандартные рекомендации по дизайну интерфейса: Human Interface Guidelines от Apple и Material Design Guidelines от Google. При проектировании для нативных платформ соблюдайте дизайн-рекомендации ОС для обеспечения максимального качества. Причина, по которой важно следовать дизайн-рекомендациям, проста: пользователи знакомятся с паттернами взаимодействия каждой ОС, и все, что противоречит руководящим принципам, вызывает проблемы.
• Не имитируйте элементы интерфейса с других платформ.
  При создании приложения для Android или iOS не переносите элементы интерфейса с других платформ. Иконки, функциональные элементы (поля ввода, флажки, переключатели) и шрифты должны выглядеть естественно. Максимально используйте нативные компоненты, чтобы люди доверяли вашему приложению.
• Следите, чтобы мобильное приложение соответствовало веб-сайту.
  Это пример внешней согласованности. Если у вас есть веб-сервис и мобильное приложение, убедитесь, что оба они имеют сходные характеристики. Это позволит пользователям совершать беспроблемные переходы между мобильным приложением и мобильным сайтом. Несоответствие в дизайне (например, другая навигационная схема или другая цветовая схема) может привести к путанице.

Предоставьте пользователю контроль

Сделайте интерактивные элементы знакомыми и прогнозируемыми

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

Кнопка Назад» должна работать правильно

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

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

Информативные сообщения об ошибках

Человеку свойственно ошибаться. Ошибки возникают, когда люди взаимодействуют с приложениями. Иногда они случаются по вине пользователя. Иногда они случаются из-за сбоя приложения. Независимо от причины ошибки, способы ее обработки имеют огромное влияние на UX. Плохая обработка ошибок в сочетании с бесполезными сообщениями об ошибках может вызвать у пользователей разочарование и стать причиной, по которой пользователи покинут ваше приложение. Возьмем  в качестве примера экран состояния ошибки из Spotify. Он не помогает пользователям понять контекст или найти ответ на вопрос: «Что я могу с этим поделать?»

Экран ошибок Spotify просто говорит: «Произошла ошибка» и не дает каких-либо конструктивных советов о том, как решить проблему

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

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

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

Проектируйте доступный интерфейс

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

Учитывайте цветовую слепоту

4.5% населения мира страдают дальтонизмом (это 1 из 12 мужчин и 1 из 200 женщин), 4% страдают слабым зрением (1 из 30 человек) и 0,6% являются слепыми (1 из 188 человек). Легко забыть, что мы проектируем для этой группы пользователей, потому что большинство дизайнеров не сталкиваются с такими проблемами.

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

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

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

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

Сделайте анимации отключаемыми

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

Сделайте навигацию простой

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

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

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

Side drawer (Android). (Изображение: Material Design) Панель вкладок (iOS). (Изображение: Ramotion)

Подробнее о паттернах навигации читайте в статье «Основные паттерны мобильной навигации: за и против».

Приоритизация навигационных опций

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

Не смешивайте навигационные паттерны

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

Сделайте навигацию заметной

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

Сообщайте текущее местоположение

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

Приложение «Здоровье» (от Apple) предоставляет информацию о текущем разделе (выделена опция навигации «Медданные») и подразделе (заголовок «Активность» отображается в верхней части макета)

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

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

Функциональная анимация может эффективно направлять внимание пользователя и облегчать понимание сложных переходов. (Изображение: Jae-seong, Jeong)

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

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

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

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

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

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

Сфокусируйтесь на первом опыте

Первый опыт может уничтожить мобильное приложение. У вас всего один шанс на создание первого впечатления. И если вы потерпите неудачу, есть большая вероятность, что пользователи больше не запустят ваше приложение. (Исследования Localytics показывают, что 24% пользователей никогда не возвращаются в приложение после первого использования).

Избегайте обязательного входа в учетную запись

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

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

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

Проектируйте хороший опыт обучения новых пользователей

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

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

У Duolingo есть пользовательский тур, который состоит из быстрого теста

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

Пустое состояние в Expensify успокаивает пользователей, сообщая им, с чего начать

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

Не спрашивайте информацию о настройке заранее

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

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

Избегайте с самого начала просить разрешения

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

Паттерны запросов на разрешение, предложенные Google. (Изображение: Material Design)

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

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

Советы:

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

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

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

Чем быстрее ваше приложение, тем лучше будет опыт. (Изображение: Google)

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

Сосредоточьтесь на загрузке контента в заметной области экрана

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

Сделайте понятным, когда закончится загрузка

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

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

Предлагайте визуальное отвлечение

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

Внимание к тонким движениям может приятно удивить пользователя. (Изображение: UI8)

Совет: помните о долголетии. Даже хорошая анимация может раздражать, когда она чрезмерно используется. Создавая анимацию спросите себя: «Будет ли анимация раздражать при сотом использовании или она универсальна и ненавязчива?»

Каркасные экраны (Skeleton Screens)

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

Каркасный экран показывает экран сразу. Плейсхолдеры заменяют любые элементы макета, содержимое которых еще не доступно. (Изображение: Slack)

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

Каркасный экран заполняет интерфейс по мере загрузки контента. (Изображение: Tandem Seven)

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

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

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

Когда мы думаем о контенте, в большинстве случаев мы имеем в виду типографику. Как говорит Оливер Райхенштейн в своем эссе «Веб-дизайн – это на 95% типографика»:

«Оптимизация типографики – это удобочитаемость, доступность, юзабилити (!), общий графический баланс».

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

Сначала несколько практических рекомендаций по читабельности:

• Размер шрифта
  Как правило, все, что меньше 16 пикселей (или 11 точек), сложно читать на любом экране.
• Семейство шрифтов
  Большинство пользователей предпочитают четкий, легкий для чтения шрифт. Проверенный вариант – использовать системный шрифт по умолчанию (Apple iOS использует шрифт San Francisco; Google Android использует Roboto).
• Контрастность
  Светлый текст (например, светло-серый) может выглядеть эстетически привлекательным, но пользователям будет трудно читать его, особенно на светлом фоне. Убедитесь, что между шрифтом и фоном большой контраст для удобства чтения. В руководстве по доступу к веб-контенту WC3  представлены рекомендации по соотношению контрастности для изображений и текста.

Даже высококонтрастный текст трудно читать при ярком свете, но низкоконтрастный текст почти невозможно прочитать

А теперь несколько рекомендаций по удобочитаемости:

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

• Ограничьте длину текстовых строк.
  Хорошее практическое правило – использовать для мобильных устройств от 30 до 40 символов в строке.

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

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

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

HD-качество изображений и правильное соотношение сторон

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

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

Последней проблемой, с которой сталкиваются многие мобильные дизайнеры, является оптимизация UX для iPhone X. Проектирование для iPhone X требует артборд другого размера, чем для любого другого iPhone (вам понадобятся изображения с разрешением 375 x 812 точек при коэффициенте увеличения 3x).

(Изображение: Apple)

Чтобы узнать больше о проектировании для iPhone X рекомендуем к прочтению статью «Проектирование приложений для iPhone X: Что каждый UX дизайнер должен знать о последнем устройстве Apple».

Видеоконтент, оптимизированный для портретной ориентации

Видео быстро становится стандартным методом потребления контента для многих пользователей. По данным YouTube, потребление видео с мобильных устройств растет на 100% каждый год. К 2020 году свыше 75% мирового трафика мобильных данных будет составлять видеоконтент. Это означает, что важно оптимизировать видеоконтент для портретного режима.

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

Facebook Live позволяет смотреть видео на временной шкале Facebook. (Изображение: Giphy)

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

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

Проектируйте для пальцев, а не для курсора

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

Небольшая сенсорная цель увеличивает вероятность ложного выбора. (Изображение: Apple)

При разработке сенсорной цели вы можете положиться на исследование MIT Touch Lab (PDF), чтобы выбрать подходящий размер интерактивных элементов. Это исследование показало, что средний размер подушечек пальцев составляет от 10 до 14 мм, а кончиков пальцев – от 8 до 10 мм, что делает 10 на 10 мм хорошим минимальным размером цели касания.

10 на 10 мм – это хороший минимальный размер сенсорной цели. (Изображение: UXmag)

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

Пример пробела между кнопками. (Изображение: Material Design)

Учитывайте зону большого пальца

Проектирование для больших пальцев — значит не только сделать цели достаточно большими, но также учитывать, как мы держим наши устройства. Многие пользователи держат свой телефон одной рукой. Только часть экрана легко достать большим пальцем. Эта территория называется естественной зоной большого пальца (natural thumb zone). Другие зоны требуют растяжение пальцев или даже смена хвата, чтобы добраться до них. Ниже вы можете увидеть, как выглядит безопасная зона на современном мобильном устройстве.

Зоны большого пальца, согласно исследованию Скотта Херфа. (Изображение: Smashing Magazine)

Чем больше дисплей, тем большая часть экрана менее доступна.

Зона большого пальца для правши, согласно исследованию Скотта Херфа

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

• Зеленая зона – лучшее место для параметров навигации или частых интерактивных действий (например, кнопок призыва к действию).
• Красная зона – лучшее место для потенциально опасных опций (например, «Удалить» или «Стереть»). Пользователи с меньшей вероятностью случайно активируют эту опцию.

Фидбек на взаимодействие

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

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

Делайте цифровой опыт человечным

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

Персонализированный опыт

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

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

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

Starbucks предоставляет предложения и услуги с учетом индивидуальных предпочтений клиентов

Восхитительная анимация

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

Использование восхитительных деталей – это возможность создать эмоциональную связь с вашими пользователями. (Изображение: Serhii Hanushchak)

Оптимизируйте Push-уведомления

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

(Изображение: Appiterate Survey)

Не отправляйте push-уведомления только потому, что можете. Каждое уведомление должно быть ценным и своевременным.

Ценные уведомления

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

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

Не отправляйте много уведомлений за короткий период времени

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

Правильно подбирайте время для уведомлений

Важно не только то, что вы говорите, но и когда вы это говорите. Не отправляйте push-уведомления в странные часы (например, среди ночи). Лучшее время для push-уведомлений – часы пиковой нагрузки на мобильные устройства: с 18:00 до 22:00.

Рассмотрите другие каналы, доставки сообщений

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

Выберите правильный тип уведомления в зависимости от срочности и контента. (Изображение: Appboy)

Оптимизация для мобильных устройств

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

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

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

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

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

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

(Изображение: Business Insider)

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

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

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

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

Приложение Chase Mobile обеспечивает вход в систему одним касанием

Совет: Практические рекомендации по использованию Apple Face ID можно найти в нашей статье « Проектирование приложений для iPhone X: что нужно знать каждому UX-дизайнеру о новейшем устройстве Apple».

Используйте Face ID при входе в систему на iPhone X (в качестве замены пароля). (Изображение: Tesco)

Стремитесь создать многоканальный опыт

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

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

Адаптируйте мобильный дизайн к развивающимся рынкам

По данным Google, в ближайшие пару лет ожидается появление миллиарда новых пользователей онлайн. И подавляющее большинство из них будут с развивающихся рынков (или так называемых стран, ориентированных на мобильные устройства, таких как Индия, Индонезия, Бразилия и Нигерия). Они получат доступ к Интернету через мобильный телефон. Эти пользователи будут иметь опыт и ожидания, отличные от тех, кто проживает в США и Европе.

Если вы хотите стать глобальным, важно учитывать их опыт.

Плохое интернет соединение

В США и Европе пользователи привыкли к возможности повсеместного подключения к сети. Но так, безусловно, не во всем мире. Продукты на развивающихся рынках должны иметь возможность работать с медленным или прерывистым Интернет-соединением. В зависимости от местоположения человека, сеть может переключаться с Wi-Fi на 3G, на 2G или вообще пропасть, и ваш продукт должен это учитывать.

Если вы планируете проектировать для такого рынка, учитывайте следующее:

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

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

YouTube Go позволяет пользователям отправлять и получать видео, когда они вместе, используя peer-to-peer обмен в автономном режиме

Google News & Weather – еще один прекрасный пример приложения, учитывающего плохое Интернет-соединение. В приложении есть функция «Lite mode» для людей, подключенных к сети с низкой пропускной способностью. Когда этот режим активирован, он оставляет только основной контент, чтобы приложение загружалось быстрее. По данным Google, этот режим использует менее трети обычных данных, и он автоматически активируется, когда приложение обнаруживает медленную сеть.

Ограниченные данные

Приблизительно на 95% развивающихся рынков, люди почти полностью полагаются на дорогие мобильные данные с предоплатой. Люди покупают фиксированный объем данных, и многие могут позволить себе только около 250 МБ данных в месяц.

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

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

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

Ограниченные возможности устройства

Смартфоны в странах, ориентированных на мобильные устройства, значительно отличаются от популярных в США моделей Google Pixel и iPhone. Большинство устройств на развивающихся рынках стоят менее $100 и могут поставляться с ограниченными объемом памяти и возможностями обработки. Убедитесь, что проектируемый вами продукт работает со старыми недорогими устройствами и программным обеспечением.

Местная эстетика

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

Региональные особенности

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

Тестирование и фидбек

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

Фидбек

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

Дизайн – это бесконечный процесс

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

Полезные инструменты и ресурсы для дизайнеров

Color Contrast Checker

Удивительно, сколько мобильных приложений не проходят тест АА. Не будьте одним из них! Важно проверить доступность цветового контраста. Используйте Color Contrast Checker от WebAIM для проверки контраста цветовых комбинаций.

Color Contrast Checker от WebAIM

Наборы элементов интерфейса для Adobe XD

Хорошо спроектированный интерфейс сделает ваше приложение великолепным. Замечательно, когда вы можете создавать интерфейс не с нуля, а используя такой прочный фундамент, как набор элементов интерфейса (UI kit). У Adobe XD есть пять наборов элементов интерфейса, которые вы можете скачать абсолютно бесплатно. Эти наборы повысят вашу креативность и помогут создавать визуально интересные дизайны интерфейса.

Navigo Transportation UI Kit (Изображение: Adobe)

Вывод

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

Дизайн мобильных приложений | Закажите дизайн для iOS & Android

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

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

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

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

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

этапы проектирования макетов с примерами

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

Содержание

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

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

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

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

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

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

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

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

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

Этапы разработки mobile design

Существуют два основных этапа работы над дизайном:

1. UX, или User experience — это разработка алгоритма, понимание того, как пользователь будет взаимодействовать с приложением. Иными словами, это некий каркас, архитектура ресурса.

2. UI, или User Interface Design. UI дизайн определяет внешний вид, удобство и эстетику интерфейса. 

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

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

Создание концепции

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

• качественные (интервью, фокус-группы, экспертное мнение) — отвечают на вопросы «как» и «почему»;

• количественные (анкетирование, опрос, телефонное интервью) — отвечают на вопросы «сколько» и «как часто».

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

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

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

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

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

Мозговой штурм

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

Именно мозговой штурм, или брейнсторминг дает жизнь самому интерфейсу, превращая идею в реальность. Можно работать на бумаге или в специальных программах, например, Balsamiq Mockups, Sketch, Photoshop и InVision — дело вкуса и привычки.

Создание User Flow Diagram: пример блок-схемы

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

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

Согласование структуры интерфейса и переходов

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

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

Определение внешнего вида интерфейса и утверждение стиля

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

 

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

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

Демонстрация проекта: макеты, прототипирование и другие варианты

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

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

• Макет. Это более реальная демонстрация готового приложения. Картинки здесь статичны, но заказчику сразу понятно, как и что будет выглядеть. Можно создать презентацию. Ранее макеты часто рисовали с помощью Adobe Photoshop, сейчас ему на смену пришло приложение Sketch.  

• Кликабельный прототип. Это наиболее близкий к реальности прототип мобильного приложения. Здесь можно нажимать кнопки, переходить по ветке меню и делать почти все из того, что будет доступно реальному пользователю. Один из самых наглядных вариантов демонстрации разработки приложения, на создание которого уходит довольно много времени и ресурсов. Для работы часто используют InVision, нередко ее дополняет Craft. 

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

Утверждение дизайна приложения

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

IOS против Android — две глобальные операционные mobile системы

На сегодняшний день 98% рынка поделили между собой IOS от Apple и Android от Google, поэтому все популярные мобильные приложения разрабатываются под одну из этих операционных систем. Для того чтобы улучшить пользовательский опыт, каждый из гигантов IT-индустрии выпустил рекомендации по дизайну, разработке и проектированию приложений:

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

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

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

О том, как создавать приложения для разных операционных систем, мы писали в статьях «Дизайн приложений для IOS» и «Дизайн приложений для android».

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

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

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

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

• сроки выполнения заказа;

• бюджет, который заказчик закладывает в проектирование;

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

• технологии выполнения.. 

Взаимодействие с разработчиками

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

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

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

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

• упрощает сам процесс создания интерфейса;

• упрощает пользование приложением на всех уровнях, так как элементы, скорее всего, уже знакомы потребителю;

• дизайн будет выглядеть более гармонично.

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

Использование UI Kit с самого начала работы над проектом

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

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

• вносить необходимые изменения по мере работы легко;

• дизайнеру в процессе работы все реже приходится отрисовывать что-то с нуля;

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

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

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

почему он важен и где заказать

Содержание статьи

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

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

В 2008 году на рынке разработчиков произошел настоящий бум – компания Apple выпустила iPhone и App Store. Компания Google в этот же год выпускает первый смартфон на операционной системе Android. Появляется такое понятие, как мобильное приложение. Помимо его функциональных возможностей, пользователи оценивают и внешний вид. Если в 2008 году дизайн играл второстепенную роль, то на сегодняшний день – ключевую.

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

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

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

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

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

Вот несколько примеров наших проектов:

1. Мобильное приложение для компании Aptiv. Приложение разрабатывалось для маркетингового отдела. Задача — разработать функциональный удобный каталог с возможностью добавлять продукты и презентационные материалы к ним. В итоге заказчики могут оставлять заявки и выполнять другие функции.

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

3. Разработка и дизайн приложения Jit+. Задача — организовать планирование логистики и обеспечить мониторинг заказов. Помимо веб-платформы, мы разработали приложение со стильным и удобным дизайном. В нем установлен весь необходимый функционал, позволяющий отслеживать и контролировать процессы перевозки.

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

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

• необходимость только UI-дизайна или UX-дизайна;
• построение архитектуры приложения;
• создание пользовательского интерфейса;
• разработка фирменного стиля.

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

Хотите заказать разработку app design?

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

MOBILE-Разработка

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

ЗАКАЗАТЬ MOBILE РАЗРАБОТКУ

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

20 приложений для смартфонов с красивым дизайном

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

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

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

И конечно же выражаю благодарность www.webdesignerdepot.com

Приложение Dribbble для Android

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

Пражский зоопарк

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

UI элементы для приложения — Natalie

Говорят, что это самая сексуальная подборка UI элементов для приложения, которые имеют плавные и округлые формы. Следовательно отсюда и идёт название — Natalie

Будильник

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

Заметки

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

Дизайн Withjack

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

Panvel Ciclos

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

Coffely

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

Приложение Whatsapp

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

Охота на место

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

Плоский дизайн приложения Facebook

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

Bikester

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

Приложение Teamride

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

Web Fest

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

Осознанные сны

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

Ре-дизайн National Geographic

Чудесный дизайн для приложения популярного ресурса National Geographic. Оно точно предоставит Вам незабываемый тур по миру.

Список задач — Taasky

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

Cmplain

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

Мне нужны деньги

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

Погода

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

Заключение

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

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

Согласно 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/UI дизайн мобильных приложений | Агентство KOLORO

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

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

Но на этом еще не все! KOLORO – брендинговое агентство, и мы прекрасно понимаем: мало создать продукт, нужно еще грамотно его продвинуть. Без маркетинга в наше время никуда. Наши специалисты продумывают название продукта, стратегию продвижения.

Дизайн приложения: цена Android или iOS?

Готов красивый прототипный дизайн мобильного приложения? Цена зависит не только от него – еще от выбора операционной системы. При разработке UX дизайна мобильного приложения обязательно возникает вопрос: Android или iOS? Выбор между двумя системами имеет свои тонкости.

Для iOS неважны размер экрана и разрешение, у Apple определены две основные категории устройств: iPad и iPhone. А разработчики Android сталкиваются с разными форматами и размерами. Мало нарисовать экран приложения, надо знать, под что его рисуем.

Ваше приложение будет по-разному зарабатывать деньги:

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

Если вы хотите выйти на рынок iOS, есть смысл выбирать Premuim формат. Пользователи Apple готовы платить за приложение перед загрузкой. На рынке Android предпочитают скачивать много бесплатных приложений – лучше выбрать встроенную рекламу или покупку дополнений.

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

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

Современный дизайн приложений

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

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

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

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

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

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

5 последних примеров дизайна современных веб-приложений (2021)

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

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

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

Что такое дизайн веб-приложения

Дизайн веб-приложения — важный этап при создании веб-приложения. Он фокусируется на внешнем виде веб-приложения.

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

Что такое пользовательский интерфейс в веб-приложении?

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

Что такое UX в веб-приложении?

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

5 наших лучших дизайнов веб-приложений

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

1. Дизайн
2. Юзабилити
3. Творчество

Хорошо, давайте сделаем это!

5. Домофон

Первым в нашем списке стоит Домофон.

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

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

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

Дизайн —

Юзабилити —

Креативность —

4. Buffer

Buffer — одна из оригинальных платформ для управления социальными сетями. В 2014 году Buffer решил одну из моих самых больших проблем как молодого специалиста по цифровому маркетингу — планировать публикации в социальных сетях.С тех пор Buffer вырос и совсем недавно разделил свое предложение на 3 продукта. Наряду с новым предложением был и новый пользовательский интерфейс.

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

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

Бонус — пользовательский интерфейс Buffer «открыт». Посмотрите их репозиторий компонентов пользовательского интерфейса на Github. Они также «открыли исходный код» пользовательского интерфейса для своего инструмента анализа.

Дизайн —

Юзабилити —

Креативность —

3. Notion

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

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

К счастью, восстановление окупилось. Сегодня Notion используют более 1 000 000 пользователей и работают безупречно.

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

Молодец, компания Notion недавно собрала крошечные 10 миллионов долларов против оценки в 800 миллионов долларов.

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

Дизайн —

Юзабилити —

Креативность —

2.Netlify

Netlify берет сложное и делает его простым.

Netlify предлагает хостинг и бессрочные серверные решения для статических веб-сайтов.

Мой первый опыт работы с Netlify был в 2017 году. До Netlify я использовал AWS для размещения своих статических веб-сайтов.

В первые 2 минуты использования Netlify я был в шоке. Как мог этот кропотливый процесс, о котором я часто беспокоился, быть таким легким?

Ответ, ДИЗАЙН.

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

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

Дизайн —

Юзабилити —

Креативность —

1.Mailchimp

Mailchimp стартовал как побочный проект более десяти лет назад. В 2009 году они добавили бесплатную версию, и количество их клиентов увеличилось с 85 000 до 450 000. Сегодня они предоставляют миллионам стартапов / небольших компаний по всему миру простую и красивую маркетинговую платформу (теперь это больше, чем платформа электронной почты, которой она была раньше).

Я был пользователем Mailchimp с самого начала и наблюдал, как они меняли UI / UX за эти годы. Постоянно становится лучше! В Mailchimp серьезно относятся к дизайну.У них есть единообразная структура дизайна на платформе, и их язык дизайна очевиден. Структурные элементы, такие как логотип, цветовая палитра и типографика, делают дизайн обоснованным и последовательным. Это оставляет их дизайнерам простор для самовыражения.

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

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

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

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

Дизайн —

Юзабилити —

Креативность —

---

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

Думаете о создании веб-приложения?

Если вы подумываете о создании веб-приложения, я бы начал со следующего:

Как создать веб-приложение

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

Micro SaaS Ideas

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

Дизайн приложения — обзор

•

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

•

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

•

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

•

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

•

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

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

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

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

Если вы работаете в бизнесе , ориентированном на клиентов, (а это все компании), то вам необходимо мобильное приложение . Это уже не вариант, а необходимость.

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

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

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

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

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

Остается вопрос, с чего и как начать?

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

1. Стратегия разработки мобильного приложения
2. Процесс разработки приложения

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

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

Все начинается со стратегии . Он определяет будущее и путь к месту назначения.

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

Разработка мобильной стратегии связана со стратегией компании и имеет четыре этапа :

i). Понять бизнес-стратегию

ii). Стратегия бизнес-мобильных приложений

iii). Стратегия приложения

iv). Стратегия управления продуктом

Давайте подробно объясним каждый этап:

1. Понимание своей бизнес-стратегии

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

Последние статистические данные из Harvard Business Review показывают, что 70% сотрудников не имеют достаточной информации о стратегии своей компании или их восприятие стратегии сильно отличается от реальной стратегии.

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

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

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

Как определить мобильную стратегию для вашего бизнеса?

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

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

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

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

1. Заявление о миссии вашего бизнеса, его конкурентные преимущества, цели и то, где вы хотите видеть это в будущем 5-10 лет.
2. Определите путь клиента по мобильному телефону. Что будет делать приложение? Смогут ли клиенты покупать прямо из приложения? Смогут ли они проверить статус своего заказа?
3. Создайте профили конкурентов. Кто ваши конкуренты? Что они делают. Каковы их сильные и слабые стороны с точки зрения мобильной стратегии и приложения? Определите, что они делают по-другому и что предлагают на мобильных устройствах.
4. Определите сильные и слабые стороны, угрозы и возможности ( SWOT, ) вашего бизнеса.Он покажет все области успеха и возможности. На это нужно время, но оно того стоит.

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

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

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

• Более двух миллионов загрузок приложений.
• Более 90% мобильных продаж приходится на мобильные приложения.
• У пользователей приложения в два раза больше шансов стать постоянными клиентами.
• Частота покупок мобильных устройств в 1,8 раза выше, чем настольных компьютеров и ноутбуков.

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

2. Стратегия бизнес-мобильных приложений

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

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

1. Какова цель приложения?
2. Какие преимущества получит конечный пользователь от использования приложения?

Самый простой способ для построения стратегии вашего приложения — это не что иное, как:

«Мы построим это так, чтобы наши клиенты могли это сделать.”

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

Создание дорожной карты

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

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

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

Распределение бюджета

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

Так выглядит бюджетный план .

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

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

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

Прочие требования

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

Потребуется еще несколько нефункциональных требований . В их число входят:

• Точки доступа
• Доступность сети
• Затраты на обслуживание
• Архитектурная поддержка
• Обработка платежей
• Решения безопасности
• Доступ к инструментам
• CDN
• SLA

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

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

Parse хотел улучшить скорость и масштабируемость высокопроизводительных кластеров и кластеров MogoDB. Они использовали Amazon Web Services (AWS), поскольку это единственный облачный сервис, отвечающий их требованиям.Parse использовал следующую архитектуру на AWS.

Это привело к снижению сквозной задержки с 400 миллисекунд до 100 миллисекунд.

3. Определение стратегии приложения

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

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

Ашиш Тошнивал , генеральный директор YMedia Lab, говорит:

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

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

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

Определение варианта использования — это лишь первый этап определения стратегии приложения.

Целевая аудитория

Кто будет использовать ваше приложение?

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

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

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

Перечислите все после информации о каждом типе вашего потенциального пользователя.

Определите ключевые показатели эффективности (KPI)

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

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

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

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

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

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

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

• Тип необходимого приложения.Вам нужно гибридное приложение или собственное приложение?
• Следует ли вашему бизнесу создавать приложение самостоятельно или на аутсорсинг?
• На какую платформу ориентироваться в первую очередь — Android или iOS?

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

4. Определите свою стратегию внедрения управления продуктом

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

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

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

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

Как вы думаете, Twitter предлагает те же функции с первого дня? Первая домашняя страница Twitter полностью отличалась от того, что вы видите сегодня.Выглядит это так:

То же самое и с Facebook .

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

Разработка стратегии тестирования

Да, вам нужно протестировать свое приложение. Потому что в каждом приложении есть ошибки — и в вашем тоже.

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

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

• Каков объем приложения?
• Что не входит в комплект?
• Характеристики
• Отдельные случаи
• Результат
• Версии приложений и интеграция

Знать необходимые инструменты

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

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

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

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

Базовый процесс разработки приложений

Бенджи Хайам , соучредитель Social Proof Interactive, заявил, что прежде чем обращаться к разработчику приложения, вы должны подготовить следующее:

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

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

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

Базовый процесс разработки приложения состоит из следующих шагов:

1. Установка области действия
2. Исследование пользователей / рынка
3. Каркас UX
4. Прототип
5. Дизайн пользовательского интерфейса
6. Анимация
7. Архитектура программного обеспечения
8. Разработка iOS
9. Тестирование
10. Релиз

Поехали.

1. Настройка области действия

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

• Характер приложения
• Целевая аудитория
• Наиболее важные функции и особенности приложения
• Визуальные функции
• Возможные технологии, которые будут использоваться
• Соответствие бизнес-стратегии
• Особые предпочтения

Заметили ли вы, что согласованность с бизнес-стратегией — лишь одна часть этого процесса?

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

• Цели и задачи приложения
• Фазы и подфазы
• Задачи и ресурсы
• Бюджет
• График

Исходя из объема, будет подготовлен дизайн и схема приложения.

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

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

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

Как это делается?

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

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

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

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

3. Каркас UX

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

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

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

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

4.Create A Prototype

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

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

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

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

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

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

5. Дизайн пользовательского интерфейса

Не путайте каркас UX и прототипирование с дизайном пользовательского интерфейса (UI).

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

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

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

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

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

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

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

Или вы можете использовать решение пользовательского интерфейса .

6. Анимация интерфейса

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

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

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

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

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

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

1. Визуальная обратная связь
2. Изменение функции
3. Иерархия элементов
4. Ориентация в пространстве
5. Состояние системы
6. Визуальная подсказка
7. Веселые анимации

7. Планирование архитектуры программного обеспечения

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

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

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

Он требует регулярных конструктивных обсуждений платформ, фреймворков, абстрактных слоев, платформ проектирования, технологий, компонентов и т. Д.

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

Некоторые из лучших практик включают:

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

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

8. Разработка приложения

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

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

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

Почему?

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

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

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

9. Тестирование

Когда средняя частота отказов для тестирования приложений для Android составляет 16,4%, вы не можете позволить себе запускать новое созданное приложение без тестирования.

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

Процесс тестирования приложения состоит из нескольких этапов .Этот тип строгого процесса тестирования гарантирует бесперебойную работу вашего приложения.

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

• Функциональное тестирование
• Тестирование памяти
• Тест производительности
• Тест безопасности
• Тест на прерывание
• Тест юзабилити

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

10. Выпуск

Наконец, пора выпустить ваше приложение после того, как оно пройдет тесты.

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

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

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

Это один из подходов.

Еще в списке .

M obile Тенденции дизайна

Отчет показал , что количество пользователей мобильных телефонов в 2018 году составляет 5.135 миллиардов , что на 4% больше, чем в прошлом году

В другом исследовании половина пользователей мобильных телефонов перейдет на смартфоны к 2017 году.

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

1. Креативные жесты

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

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

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

2. Нативные приложения и мобильный Интернет

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

С другой стороны, аудитория мобильного Интернета намного больше, чем аудитория нативных приложений. Мобильный Интернет получает 8,9 миллиона уникальных посетителей в месяц, в то время как нативные приложения получают 3,3 миллиона уникальных посетителей в месяц.

Нативные приложения и мобильный Интернет в будущем будут расти.

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

3. Отображение сбоев

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

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

4. Взаимодействия микромини-приложений будут значительно расти

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

В последнее время появилось несколько приложений, которые преобразовали эти микровзаимодействия в более мелкие разовые взаимодействия, Chase Buckley называет их микромини-взаимодействиями. Yo и Knock Knock являются хорошими примерами приложений, которые используют такие детализированные микромини-взаимодействия.

Чейз Бакли считает, что эти микромини-взаимодействия штурмуют Интернет в 2017 году.

5. Анимация

Согласно Web Designer Depot ,

«Анимация больше не является новинкой для веб-дизайнеров. … Он становится основой эффективного взаимодействия.”

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

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

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

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

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

Следующие советы по мобильному дизайну помогут вам в достижении поставленных целей:

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

Она говорит:

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

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

2. Понимайте своих пользователей: Есть только одно правило для разработки лучших приложений — понимайте своих пользователей.

Есть три способа понять своих пользователей .

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

3. Дизайн будущего: Да, вам следует смотреть дальше сегодняшнего дня и создавать дизайн будущего.

Джефф Хейден говорит:

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

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

Ресурсы для мобильного дизайна

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

Pttrns : библиотека из более чем 3K шаблонов пользовательского интерфейса iPad и iPhone.

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

Hack design : узнайте все о мобильном проектировании.

Шаблоны для мобильных устройств : Здесь собраны скриншоты приложений для Android и iOS.

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

Tethr : набор для дизайна iOS для дизайнеров, который включает в себя множество элементов, от медиа до социальных сетей до PSD и т. Д.

Pixel love : Бесплатные иконки для дизайнеров iOS и Android.

Pop : библиотека анимации iOS.

BuildFire : создание и управление приложениями для Android и iOS.

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

PDF : Руководство по процессу разработки архитектуры программного обеспечения.

Сообщение в блоге : Семь способов протестировать мобильное приложение.

Сообщение в блоге : Более 200 ресурсов по мобильному дизайну.

Заключение

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

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

Полное руководство по дизайну мобильных приложений — Smashing Magazine

Об авторе

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

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

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

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

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

Минимизация когнитивной нагрузки

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

Избавление от беспорядка

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

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

Четкая панель вкладок (справа) намного лучше, чем загроможденная (слева). (Изображение: Apple)

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

Интерфейс открывает больше возможностей после взаимодействия. (Источник изображения: Ramotion)

Задачи разгрузки

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

Разбейте задачи на небольшие фрагменты

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

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

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

Поиск фильма и покупка билетов в кино. (Источник изображения: Антон Скворцов)

Используйте знакомые экраны

Знакомые экраны — это экраны, которые пользователи видят во многих приложениях. Такие экраны, как «Начало работы», «Что нового» и «Результаты поиска» стали де-факто стандартами для мобильных приложений. Они не требуют дополнительных объяснений, потому что пользователи уже знакомы с ними. Это позволяет пользователям использовать предыдущий опыт для взаимодействия с приложением без необходимости обучения.

Экран профиля пользователя в приложении Quora

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

Минимизировать ввод данных пользователем

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

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

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

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

(Изображение предоставлено Джошем Морони)

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

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

Встроенная проверка (Источник изображения: Baymard)

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

Сопоставьте клавиатуру с требуемым вводом текста. (Изображение: ThinkWithGoogle)

Прогнозирование потребностей пользователей

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

Непонятно, где пользователь может найти штрих-код. Краткий текст справки рядом с полем ввода был бы очень полезен. (Источник изображения: Hotjar)

Используйте визуальный вес для передачи важности

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

Крупные предметы привлекают внимание и кажутся важнее мелких.Кнопка «Запросить Lyft» привлечет внимание пользователя.

Избегайте жаргона

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

Неизвестные термины или фразы увеличивают когнитивную нагрузку на пользователя. (Источник изображения: ThinkWithGoogle)

Сделайте дизайн согласованным

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

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

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

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

Вот несколько практических рекомендаций по согласованию дизайна:

• Соблюдайте рекомендации по платформе.
  Каждая мобильная ОС имеет стандартные рекомендации по дизайну интерфейса: Apple Human Interface Guidelines и Google Material Design Guidelines. При разработке для собственных платформ следуйте руководящим принципам разработки ОС для обеспечения максимального качества. Причина, по которой следование руководящим принципам важно, проста: пользователи знакомятся с шаблонами взаимодействия каждой ОС, и все, что противоречит руководящим принципам, вызовет трения.

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

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

Предоставьте пользователю контроль

Сохраняйте знакомые и предсказуемые интерактивные элементы

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

Кнопка «Назад» должна работать правильно

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

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

Значимые сообщения об ошибках

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

В качестве примера возьмем экран состояния ошибки из Spotify.Это не помогает пользователям понять контекст и не помогает им найти ответ на вопрос: «Что я могу с этим поделать?» На экране ошибки

Spotify просто указано «Произошла ошибка» и не дается никаких конструктивных рекомендаций по устранению проблемы.

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

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

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

Дизайн Доступный интерфейс

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

Помните о дальтонизме

4,5% населения мира страдает дальтонизмом (это 1 из 12 мужчин и 1 из 200 женщин), 4% страдают слабым зрением (1 из 30 человек) и 0.6% слепые (1 из 188 человек). Легко забыть, что мы проектируем для этой группы пользователей, потому что большинство дизайнеров не испытывают таких проблем.

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

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

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

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

Сделать анимацию необязательной

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

Сделайте навигацию простой

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

Использование стандартных компонентов навигации

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

Боковой ящик (Android). (Источник изображения: Material Design) Панель вкладок (iOS). (Источник изображения: Ramotion)

Подробнее о шаблонах навигации читайте в статье «Основные шаблоны для мобильной навигации: плюсы и минусы.”

Назначьте приоритет параметрам навигации

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

Не смешивайте шаблоны навигации

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

Сделать навигацию видимой

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

Сообщать текущее местоположение

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

Приложение Health (разработано Apple) предоставляет информацию о текущем разделе (опция навигации «Данные о здоровье» выделена) и подразделе (заголовок «Activity» отображается в верхней части макета).

Использование функциональной анимации для уточнения переходов при навигации

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

Функциональная анимация может эффективно направлять внимание пользователя и упрощать понимание сложных переходов. (Источник изображения: Jae-seong, Jeong)

Будьте осторожны с использованием жестов в пользовательском интерфейсе

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

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

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

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

Дополнительные сведения об использовании жестов в пользовательском интерфейсе см. В разделе «Жесты в приложении и взаимодействие с пользователем мобильного приложения».

Сосредоточьтесь на первом опыте

Первый опыт — это важная часть мобильных приложений. У вас есть только один шанс получить первое впечатление.А если вы потерпите неудачу, велика вероятность, что пользователи больше не запустят ваше приложение. (Исследование Localytics показывает, что 24% пользователей никогда не возвращаются к приложению после первого использования.)

Избегайте стенок входа

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

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

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

Дизайн — хорошее взаимодействие с пользователем

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

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

Duolingo есть руководство пользователя, состоящее из быстрого теста.

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

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

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

Не спрашивайте заранее информацию о настройке

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

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

Избегайте запроса разрешений с самого начала

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

Шаблоны запросов на разрешение, предложенные Google. (Изображение: Material Design)

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

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

Советы :

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

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

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

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

Чем быстрее ваше приложение, тем лучше будет впечатление от него.(Источник изображения: Google)

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

Сосредоточьтесь на загрузке содержимого в видимой области экрана

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

Сделайте это понятным, когда загрузка происходит

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

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

Предложите визуальное отвлечение

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

Внимание к тонкому движению может приятно удивить пользователя. (Изображение предоставлено UI8)

Совет : помните о долговечности. Даже хорошая анимация может раздражать, когда ею злоупотребляют. Создавая анимацию, спросите себя: «Будет ли анимация раздражать при сотом использовании или она универсально ясна и ненавязчива?»

Скелетные экраны

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

Скелет экрана сразу показывает экран. Заполнители заменяют любые элементы в макете, содержимое которых еще не доступно. (Изображение: Slack)

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

Скелет экрана заполняет пользовательский интерфейс по мере постепенной загрузки содержимого. (Источник изображения: Tandem Seven)

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

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

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

Когда мы думаем о содержании, в большинстве случаев мы имеем в виду типографику. Как утверждает Оливер Райхенштейн в своем эссе «Веб-дизайн — это 95% типографики»:

«Оптимизация типографики — это улучшение читаемости, доступности, удобства использования (!) И общего графического баланса».

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

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

• Размер шрифта
  Как правило, все, что меньше 16 пикселей (или 11 пунктов), сложно читать на любом экране.

• Семейство шрифтов
  Большинство пользователей предпочитают четкий, легко читаемый шрифт. Безопасный вариант — это шрифт системы по умолчанию (Apple iOS использует шрифт San Francisco; Google Android использует Roboto).

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

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

А теперь несколько рекомендаций по читаемости:

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

• Ограничьте длину текстовых строк.
  Хорошее практическое правило — использовать от 30 до 40 символов в строке для мобильных устройств.

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

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

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

Изображения HD-качества и правильное соотношение сторон

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

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

Последняя проблема, с которой сталкиваются многие мобильные дизайнеры, — это оптимизация пользовательского интерфейса для iPhone X. При разработке дизайна для iPhone X требуется другой размер монтажной области, чем для любого другого iPhone (вам понадобятся изображения с разрешением 375 x 812 точек при 3-кратном увеличении).

(Изображение предоставлено Apple)

Прочтите «Разработка приложений для iPhone X: что должен знать каждый дизайнер UX о последнем устройстве Apple» для получения дополнительной информации о разработке для iPhone X.

Видеоконтент оптимизирован для портретного режима

Видео быстро становится стандартным методом потребления контента для многих пользователей. По данным YouTube, потребление мобильного видео ежегодно растет на 100%. К 2020 году более 75% мирового трафика мобильных данных будет составлять видеоконтент. Это означает, что очень важно оптимизировать видеоконтент для портретного режима.

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

Facebook Live позволяет смотреть видео на временной шкале Facebook. (Источник изображения: Giphy)

Design For Touch

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

Дизайн для пальцев, а не курсоров

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

Маленькая цель с касанием увеличивает вероятность ложного выбора. (Источник изображения: Apple)

При разработке сенсорной мишени вы можете положиться на исследование MIT Touch Lab (PDF), чтобы выбрать правильный размер для интерактивных элементов. Это исследование показало, что средний размер подушечек пальцев составляет от 10 до 14 мм, а кончиков пальцев — от 8 до 10 мм, что делает 10 на 10 мм оптимальным минимальным размером мишени для прикосновения.

10 на 10 мм — хороший минимальный размер сенсорной мишени. (Источник изображения: UXmag)

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

Пример пробела между кнопками. (Источник изображения: Material Design)

Учитывайте зону большого пальца

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

Зоны большого пальца, согласно исследованию Скотта Херффа. (Источник изображения: Smashing Magazine)

Чем больше дисплей, тем труднее доступен доступ к большей части экрана.

Зоны большого пальца для правши, согласно исследованию Скотта Херффа.

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

• Зеленая зона — лучшее место для опций навигации или частых интерактивных действий (например, кнопок с призывом к действию).

• Красная зона — лучшее место для возможных вариантов опасности (таких как «Удалить» или «Стереть»). У пользователей меньше шансов случайно активировать эту опцию.

Обратная связь о взаимодействии

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

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

Гуманизируйте цифровой опыт

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

Персонализированный опыт

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

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

Мобильное приложение

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

Starbucks предоставляет предложения и услуги, адаптированные для индивидуальных клиентов.

Восхитительная анимация

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

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

Оптимизация push-уведомлений

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

(Источник изображения: Appiterate Survey)

Не отправляйте push-уведомления только потому, что можете. Каждое уведомление должно быть ценным и своевременным.

Push The Value

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

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

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

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

Время ваших уведомлений

Важно не только то, что вы говорите, но и то, когда вы это говорите. Не отправляйте push-уведомления в непонятные часы (например, посреди ночи). Лучшее время для push-уведомлений — часы пик использования мобильной связи: с 18:00 до 22:00.

(Источник изображения: comScore)

Рассмотрите другие каналы для доставки вашего сообщения

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

Выберите подходящий тип уведомления в зависимости от срочности и содержания. (Изображение: Appboy)

Оптимизация для мобильных устройств

Дизайн для прерывания

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

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

Воспользуйтесь возможностями устройства

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

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

(Изображение предоставлено Business Insider)

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

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

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

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

Совет : практические рекомендации по использованию Apple Face ID можно найти в нашей статье «Разработка приложений для iPhone X: что должен знать каждый дизайнер UX о новейшем устройстве Apple.

Используйте Face ID при входе на iPhone X (вместо пароля). (Источник изображения: Tesco)

Стремитесь создать многоканальный опыт

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

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

Адаптируйте мобильный дизайн к развивающимся рынкам

По данным Google, в ближайшие пару лет ожидается, что в Интернет выйдет миллиард новых пользователей. И подавляющее большинство из них будет с развивающихся рынков (или из так называемых стран, ориентированных на мобильные устройства, таких как Индия, Индонезия, Бразилия и Нигерия).Они получат доступ через мобильный телефон. У этих пользователей будет совсем другой опыт и ожидания, чем у тех, кто находится в США и Европе.

Если вы хотите выйти на мировой рынок, важно учитывать их опыт.

Плохое подключение к Интернету

В США и Европе пользователи привыкли к повсеместному подключению. Но это определенно не так во всем мире. Продукты на развивающихся рынках должны работать при медленном или прерывистом подключении.В зависимости от местоположения человека сеть может переключаться с Wi-Fi на 3G на 2G и вообще не подключаться, и ваш продукт должен это учитывать.

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

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

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

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

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

Google News & Weather — еще один отличный пример приложения, которое было разработано с учетом плохих подключений. В приложении есть функция под названием «Облегченный режим» для людей, использующих соединения с низкой пропускной способностью. Когда этот режим активирован, он сокращает контент до необходимого, чтобы приложение загружалось быстрее. Согласно Google, этот режим использует менее одной трети обычных данных и активируется автоматически, когда приложение обнаруживает медленную сеть.

Limited Data

Примерно в 95% развивающихся рынков люди почти полностью полагаются на дорогие предоплаченные мобильные данные.Люди покупают фиксированный объем данных, и многие могут позволить себе не более 250 МБ данных в месяц.

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

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

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

Ограниченные возможности устройства

Смартфоны в странах, ориентированных на мобильную связь, имеют возможности, резко отличающиеся от возможностей Pixel и iPhone, популярных в США. Большинство устройств на развивающихся рынках стоят ниже 100 долларов и могут иметь ограниченную память и вычислительную мощность. Убедитесь, что разрабатываемый вами продукт совместим со старыми недорогими устройствами и программным обеспечением.

Местная эстетика

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

Особенности региона

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

Тестирование и обратная связь

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

Контур обратной связи

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

Дизайн — это бесконечный процесс

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

Полезные инструменты и ресурсы для дизайнеров

Проверка контрастности цвета

Удивительно, сколько мобильных приложений не проходят проверку AA.Не будь одним из них! Важно проверить доступность цветового контраста. Используйте средство проверки цветового контраста WebAIM для проверки цветовых сочетаний.

WebAIM Color Contrast Checker

UI Kits для Adobe XD

Хорошо продуманный пользовательский интерфейс сделает ваше приложение ярким. Здорово, когда вы можете разрабатывать свой пользовательский интерфейс не с нуля, а используя прочную основу, такую ​​как комплект пользовательского интерфейса. В Adobe XD есть пять наборов пользовательского интерфейса, которые вы можете загрузить совершенно бесплатно. Эти наборы повысят ваш творческий потенциал и помогут создавать визуально интересные дизайны пользовательского интерфейса.

Navigo Transportation UI Kit (Изображение предоставлено Adobe)

Заключение

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

Эта статья является частью серии UX-дизайна, спонсируемой Adobe.Adobe XD создан для быстрого и гибкого процесса проектирования UX, поскольку он позволяет быстрее переходить от идеи к прототипу. Создавайте, создавайте прототипы и делитесь ими — все в одном приложении. Вы можете ознакомиться с другими вдохновляющими проектами, созданными с помощью Adobe XD, на Behance, а также подписаться на информационный бюллетень Adobe Experience Design, чтобы оставаться в курсе последних тенденций и идей в области дизайна UX / UI.

(ra, al, il)

Пользовательские интерфейсы в дизайне бизнес-приложений — Smashing Magazine

Об авторе

Янко Йованович — дизайнер пользовательского интерфейса, инженер-программист, блоггер, спикер и художник.В свободное время он пишет о пользовательских интерфейсах в своем блоге … Больше о Янко ↬

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

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

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

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

Дополнительная литература по SmashingMag:

Веб-дизайн и дизайн веб-приложений

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

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

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

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

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

Различные типы веб-приложений

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

Мы можем различить открытых и закрытых приложений .Открытые системы — это онлайн-приложения, которые легко доступны любому, кто открывает учетную запись. Пользователи могут получить доступ к таким приложениям через Интернет и могут открыть счет бесплатно или за определенную плату. Закрытые системы (или бизнес-приложения) обычно недоступны за пределами компании, которая их использует, и их можно рассматривать как «автономные» приложения (хотя многие системы предоставляют свои функции бизнес-партнерам через службы или специализированные интерфейсы). Такие системы обычно работают в локальной сети компании и доступны только сотрудникам.

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

Во-первых, знайте своих пользователей

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

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

Как идентифицировать пользователей?

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

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

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

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

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

Процесс проектирования

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

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

Наброски

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

Эскизы — это то же самое, что и каркасы? Что ж, различия могут быть размытыми, но я бы сказал, что нет. Каркасные модели не фиксируют грубые идеи, а скорее развивают их. Прочтите фантастическое обсуждение IxDA: Sketching Before the Wireframes.

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

Эскиз Джейсона Робба.

Интересные материалы по созданию эскизов и каркасов:

Прототипирование

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

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

Интерактивный прототип Axure для веб-сайта электронной коммерции, автор e-maujean.

Дополнительная литература и инструменты для создания прототипов:

Тестирование

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

Одним из лучших ресурсов для тестирования удобства использования со скидкой является новая книга Стива Круга «Rocket Surgery Made Easy.«Возьмите копию и прочтите ее.

Снимок юзабилити-тестирования Delicious, автор (nz) dave.

Дополнительная литература:

Принципы дизайна

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

Никто не любит сюрпризы

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

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

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

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

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

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

Дополнительная литература:

Пользователи должны быть эффективными

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

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

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

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

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

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

Помогите!

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

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

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

Дополнительная литература:

Не могу получить неудовлетворение

Удовлетворение — это субъективный термин, который указывает на то, насколько приятен интерфейс в использовании.Каждый принцип дизайна, который мы здесь описали, влияет на удовлетворение. Здесь стоит упомянуть еще несколько принципов.

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

BuildWith.me имеет простой и эффективный пользовательский интерфейс без ущерба для эстетики.

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

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

Дополнительная литература:

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

Основные компоненты веб-приложений

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

Веб-формы

Формы в целом важны для веб-приложений. Но, как говорит Люк Вроблевски в своей книге «Дизайн веб-форм»: «Никто не любит заполнять формы.«Это включает в себя формы регистрации, в том числе бизнес-приложения с десятками полей.

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

Основные подробные представления

Это метод отображения данных в двух отдельных, но связанных представлениях. В одном представлении отображается список элементов, а в другом — сведения о выбранном элементе.Представления «Мастер-детали» могут быть реализованы на нескольких страницах или на отдельных.

Панели мониторинга

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

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

Интенсивное использование таблиц

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

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

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

Отчеты

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

FreshBooks имеет функции печати, экспорта в PDF и отправки по электронной почте. Он также показывает предварительный просмотр печати.

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

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

Этот снимок экрана взят из статьи «12 стандартных шаблонов экрана», в которой рассматриваются наиболее распространенные шаблоны экрана.

Дополнительная литература

Пример: приложение для онлайн-банкинга

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

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

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

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

Последние мысли

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

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

(al)

Академия дизайнеров приложений

Что вы узнаете

3 урока

Дизайн приложений

7 уроков

Реальный проект

2 урока

Портфель / Клиент

О вашем тренере

Роман Лейнватер (Roman Leinwather) — старший разработчик приложений с более чем 15-летним опытом.

Роман является гордым членом топ-3% интернет-талантов — Toptal.

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

Последние 10 лет он работал независимым фрилансером в Праге.

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

Набор инструментов Романа: Adobe Xd, Adobe Photoshop, Adobe Illustrator, HTML, CSS, Java-скрипт, Django, Ruby on Rails, PHP

Предварительные требования

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

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

В курсе используется единое программное обеспечение Adobe XD, которое можно бесплатно установить как на Microsoft Windows, так и на компьютеры Apple.Вы можете скачать это здесь.

Поддержка

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

Программа курса

— 8 модулей | 62 урока

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

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

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

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

UI-элементов, которые вы создадите

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

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

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

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

Пример каркаса и окончательного макета единого вида — Бронирование билета / Выбор места.

Веб-приложение против дизайна веб-сайтов: фундаментальная разница

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

«Я разрабатываю веб-приложения!»

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

«Ну, я не занимаюсь дизайном веб-сайтов, я разрабатываю веб-приложения», — сказал я. «Они разные.»

«Да, я знаю, что они разные», — сказал дядя. «Но чем отличается разработка веб-приложения от веб-сайта?» он спросил.

Хммм….

Итак, мы начали обсуждение этого…

В чем основная разница между веб-приложением и веб-сайтом?

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

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

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

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

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

Если вы будете искать в Google, вы, вероятно, найдете много статей, в которых подробно описывается, чем веб-сайт отличается от веб-приложения. И как веб-сайт может быть одновременно веб-приложением и веб-сайтом.Например, Facebook, Google+ и т. Д.

Но не будем вдаваться в подробности.

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

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

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

Фундаментальная разница между разработкой веб-приложения и веб-сайтом

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

Позвольте мне попытаться объяснить это простыми словами.

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

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

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

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

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

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

Это фундаментальное различие между дизайном веб-сайтов и веб-приложениями.

Примечание о возможности обнаружения информации в веб-приложениях

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

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

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

No related posts.