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


Содержание

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если вы хотите разрабатывать для iOS, а раньше пользовались только устройствами на Andro >

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

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

  • Озарение, или просто отправная точка. Это может быть идея инновационного продукта (ещё один убийца Facebook!) или просто сбор требований клиента.
  • Моделирование. На этом этапе пишутся пользовательские сценарии и истории, а затем их представляют в виде блок-схем и рисуют малодетализированные каркасы графического интерфейса (low-f >Макеты (мокапы). Визуальное представление вашего приложения. В начале эры цифрового дизайна правил бал Adobe Photoshop. Но он не был заточен под проектирование интерфейсов и постепенно сдавал позиции. Согласно отчёту Avocode Design Trend, в 2020 году старый добрый PS потерял пальму первенства. Теперь отраслевой стандарт для создания макетов — приложение Sketch. Благодаря своему огромному сообществу он обзавёлся расширениями и плагинами, а также интеграцией с уймой сторонних программ. Sketch — простой, но мощный инструмент.
  • Прототипирование. С интерактивным прототипом можно взаимодействовать как с интерфейсом уже готового приложения. Его демонстрируют инвесторам, клиентам и разработчикам. Наиболее популярный инструмент — программа InVision. Очень часто её дополняет Craft, это набор плагинов для Sketch и Photoshop. Стоит упомянуть, что и сам Sketch недавно обзавёлся инструментами для создания прототипов.
  • Анимация и микровзаимодействия 1 . Этот этап иногда пропускают — по крайней мере по трём причинам. Прежде всего, для стандартных компонентов iOS и Andro >Передача разработчикам. Чтобы реализовать проект, нужно как-то переадресовать дизайн разработчикам. Этот процесс и называется передачей (handoff), и для этого тоже есть приложения. Если ваша компания ещё ничего не выбрала, можете поиграть с Avocode, Sympli или Zeplin. Все они позволяют экспортировать ресурсы, проверять свойства дизайна и многое другое. Кроме того, эти приложения часто используются для общения внутри команды.

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

10 правил хорошего пользовательского интерфейса

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

Десять универсальных правил хорошего пользовательского интерфейса

1. Сделайте все, что нужно пользователю, легко доступным

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

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

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

Другой пример – разделы Справка / Поддержка / Контакты. Пользователям всегда должна быть доступна кнопка «Справка» или «Обратиться в службу поддержки». Вот почему необходимо располагать кнопки помощи вверху.

2. Будьте последовательны

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

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

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

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

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

3. Будьте предельно ясными

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

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

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

4. Предоставляйте обратную связь

Пользователи должны понимать, что происходит. Если они нажимают кнопку, укажите, что кнопка была нажата. Вы можете сделать это несколькими способами. Например, анимировать кнопку. Иконки загрузки (например, MacOS Rainbow Wheel) обеспечивают обратную связь: пользователи понимают, что вы работаете над их запросом.

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

5. Используйте распознавание, а не запоминание

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

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

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

6. Выберите модель взаимодействия

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

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

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

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

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

7. Следуйте стандартам дизайна

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

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

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

8. Иерархия элементов

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

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

9. Будьте проще

Посмотрите на эту контактную форму:

А теперь на эту:

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

10. Подарите пользователям удобство управления и ощущение свободы


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

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

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

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

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

Завершен ли ваш интерфейс?

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

Данная публикация представляет собой перевод статьи « 10 Rules of Good UI Design to Follow On Every Web Design Project » , подготовленной дружной командой проекта Интернет-технологии.ру

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

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

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

Пользователям мало приложений. Как ожидается, к 2020 году общий объем скаченных приложений достигнет 200 млрд. В прошлом году на рекламу, призванную увеличить объем установок, было потрачено $3 млрд, что на 80% больше, чем годом ранее.

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

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

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

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

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

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

Глава 1: Навигация

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

  1. Необходимо продемонстрировать полезность приложения

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

  1. Категории меню и выбор соответствующих названий

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

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

  1. Изменение местонахождения вручную

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

  1. Переходы между мобильными и веб-приложениями

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

Глава 2: Поиск в приложении

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

  1. Заметная строка поиска

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

  1. Функциональный поиск

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

Люди расстраиваются, когда результаты поиска не соответствуют запросу, и/или когда поиск выдает слишком много результатов.

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

Цукерберг рекомендует:  Вакансии Intaro

Глава 3: Коммерция и конверсии

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

  1. Недавние покупки

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

  1. Отзывы и рейтинги

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

  1. Сравнение продукции


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

  1. Несколько способов оплаты

В тех приложениях, где реализованы альтернативные способы оплаты (PayPal, Apple Pay и AndroidPay), нет необходимости заполнять дополнительные формуляры во время оплаты.

  1. Добавление платежных данных

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

Глава 4: Регистрация

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

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

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

  1. Разница между «sign in» и «sign up»

Многие клиенты совершают неверное действие, пытаясь зарегистрироваться с помощью клика по кнопке «sign in» (вход в учетную запись), после чего появляется поле для ввода пароля. Это происходит потому, что люди быстро просматривают экран и нажимают на первый попавшийся элемент призыва к действию. Дизайн кнопок «sign in» и «sign up» должен отличаться.

  1. Подтверждение пароля

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

Глава 5: Формы для ввода данных

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

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

  1. Сообщения об ошибке в режиме реального времени

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

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

  1. Вспомогательная информация в формах

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

Глава 6: Юзабилити

Специфические подходы к решению дизайнерских вопросов обеспечат качественный UX.

  1. Понятные названия

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

  1. Названия и визуальные подсказки

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

  1. Обратная связь

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

  1. Масштабирование

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

  1. Запрос на получение доступа

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

Инструменты

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

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

  1. Привлечь аудиторию поможет стратегия увеличения загрузок. Стоит заглянуть в Рекомендации Google: как увеличить количество скачиваний мобильного приложения.
  2. Привлекайте, расширяйте и вовлекайте пользователей с помощью простых и надежных сообщений, вне зависимости от платформы пользователей (Android, iOS, или Chrome).
  3. Не забывайте о необходимости в наличии стратегии вовлечения, чтобы сохранить существующую аудиторию. В этом помогут инструменты, подобные внешним ссылкам и рекламным кампаниям.
  4. Увеличьте текущую клиентскую базу с помощью Google App Invites.

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

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


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

Искал материалы в сети, но все как то разбросано, мне бы по полочкам разложить :) Заранее спасибо за советы.

  • Вопрос задан более трёх лет назад
  • 1295 просмотров

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

3. Учи UX и возвращайся с конкретными вопросами ;)

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

Что связывает дизайн и маркетинг? Что такое UX/UI дизайн? И почему хорошо спроектированное приложение и грамотная маркетинговая кампания — это залог успеха проекта? Рассказывает Татьяна Гуменюк, дизайнер агентства Netpeak.

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

Чем отличается UX от UI дизайна?

В идеале дизайн объединяет в себе форму и функции, свойства и эстетические проявления. UX (User Experience) дизайн отвечает за функции и свойства, это процесс создания продукта, который полезен, легок в использовании и приятен для взаимодействия. Задача UX дизайнера — привести пользователя к конечной цели, помочь ему «решить проблему».

UI дизайн — это визуальное оформление «изделия»: какие использовать цвета, удобно ли будет человеку попадать пальцем в кнопки, читабельным ли будет текст.

Задача UX/UI дизайна — «продать» товар или услугу через интерфейс. Именно на основе работы UX/UI дизайнера пользователь принимает решение: «Быть или не быть?», нравится или не нравится.

С чего начинается UX?

У исследований, которые проводят на первых этапах UX дизайна есть много общего с маркетинговыми. Например, анализ конкурентов и рынка, определение ЦА и бизнес модели.

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

Зачем проводить бенчмаркинг дизайнеру?

  1. Определить сильные и слабые черты оцениваемых объектов.
  2. Расширить понимание рынка и бизнес-домена*.
  3. Развить собственное видение проекта и выработать новые идеи.

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

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

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

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

Четыре правила создания удобного дизайна

UI (User Interface) — это то, что у многих людей сразу ассоциируется со словом «дизайн»: цвета, графика, иконки и логотип. Это средство связи между человеком и системой. Для того, чтобы дизайн был удобен, решал проблему и «продавал» продукт существует ряд правил и тенденций, которым следуют UX/UI дизайнеры для достижения своей цели:

  1. Упрощение пользовательского взаимодействия. Когда пользователь взаимодействует с приложением, у него есть определенная цель. И, как правило, чем меньше усилий пользователь прилагает для достижения этой цели, тем лучше пользовательский опыт. Хороший пример — дизайн линейного пути, когда каждый шаг пользователя сопровождается выполнением только одного действия.
  2. Цвет как функциональный элемент. Выбор цвета продиткован не только эстетикой, это часть пользовательского взаимодействия. Цвет — инструмент акцентирования на главном. Например, дизайнеры могут использовать цвета, чтобы установить визуальное различие между разными типами уведомлений.
  3. Диалоговый дизайн. Пользователи часто использует только три приложения, и как минимум одно из них — мессенджер. Люди любят общаться. Поэтому чатботы и голосовые помощники, усиленные искусственным интеллектом, стали трендами последних лет.
  4. Эмоциональное взаимодействие. Даже в эпоху интерфейсов командной строки мы использовали эмотиконы (смайлики), чтобы донести до других свои чувства. Людям свойственно устанавливать эмоциональную связь со всеми используемыми продуктами. Как следствие, при взаимодействии с продуктами мы ожидаем реакций похожих на человеческие.

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

Чем схожи дизайн и маркетинг?

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

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

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

Выводы

  1. Задача UX/UI дизайна — «продать» товар или услугу через интерфейс. Именно на основе работы UX/UI дизайнера пользователь принимает решение: «Быть или не быть?», нравится или не нравится.
  2. UX (User Experience) дизайн отвечает за функции и свойства, это процесс создания продукта, который полезен, легок в использовании и приятен для взаимодействия. UI дизайн — это визуальное оформление «изделия»: какие использовать цвета, удобно ли будет человеку попадать пальцем в кнопки, читабельным ли будет текст.
  3. Чтобы дизайн был удобен, решал проблему и «продавал» продукт существует ряд правил, которым следуют UX/UI дизайнеры для достижения своей цели:
  • диалоговый дизайн;
  • цвет как функциональный элемент;
  • упрощение пользовательского взаимодействия;
  • эмоциональное взаимодействие.

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

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

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

Введение

По некоторым объективным данным, предполагается, что в 2020 году пользователи скачают около 200 миллиардов приложений, в то время как маркетологи экспериментируют с пользовательскими интерфейсами. В 2015 году компании потратили около 3 млрд. долларов на рекламу различных приложений, что на 80% больше, чем в 2014 году.

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


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

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

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

Часть 1: Навигация по разделам приложения

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

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

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

На скриншоте ниже изображены интерфейсы двух приложений. На скриншоте слева призыв к действию «Try it now» (попробуйте прямо сейчас) звучит неубедительно и неточно. Призыв к действию «Найти идеальный дом» на правом скриншоте, напротив, сопровождается ясными и понятными пользователю кнопками: «Rent» (арендовать), «Buy» (купить), «Sell» (продать):

2. Меню приложения должно быть простым и удобным

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

На скриншоте слева представлено меню, некоторые разделы которого имеют частично совпадающий контент: это относится к пунктам «Походы» (hiking) и «Мужская обувь» (men’s footwear). На скриншоте справа можно увидеть пример хорошего меню, которое не будет сбивать пользователей с толку. Оно имеет следующие разделы: кемпинг, бег, походы, велосипедный спорт, скалолазание, лыжный спорт, сноубординг, рыбалка.

3. Пользователь всегда должен иметь возможность перейти на предыдущую страницу

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

А в примере ниже кнопка «Назад» содержится на каждой странице:

4. Добавьте функцию ручного определения местоположения

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

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

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

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

Часть 2: Поиск информации внутри приложения

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

6. Окно поиска должно быть расположено на видном месте

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

На скриншоте справа окно поиска спрятано за разделом меню «Поиск» (Search). В то время как на правом скриншоте окно поиска расположено на видном месте:

7. Используйте эффективное индексирование поиска

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

8. Используйте функцию фильтрации и сортировки

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

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

Часть 3: Конверсия и совершение покупки

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

9. Показ сведений о предыдущих результатах поиска и прошлых покупках

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

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

10. Предоставьте людям возможность фильтровать и сортировать отзывы

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

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

11. Сделайте удобным сравнение разных товаров друг с другом

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

Цукерберг рекомендует:  Введение в YUI

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

В приложении, изображенном ниже, есть специальная функция сравнения, позволяющая пользователю сопоставить характеристики нескольких домов:

12. Предоставьте пользователям несколько вариантов оплаты

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

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

13. Необходимо упростить добавление и управление способами оплаты

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

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

Ниже можно подробно рассмотреть функцию добавление новых способов оплаты и редактирования существующих:

Часть 4: Регистрация

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

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

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


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

15. Разделите функции входа в систему (sign in) и регистрации (sign up)

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

16. Упростите процесс аутентификации в системе

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

Часть 5: Заполнение форм

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

17. Создавайте удобные и простые формы

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

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

18. Сообщайте об ошибках ввода данных в режиме реального времени

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

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

19. Тип клавиатуры должен соответствовать типу вводимых данных

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

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

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

Часть 6: Юзабилити

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

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

Наличие незнакомых терминов или фраз может вызвать затруднения. Использование в качестве призывов к действию непонятных слов, пусть даже характерных для данного бренда, может смутить. Например, призывы к действию «Купить», «Арендовать», «Продать» (Buy, Rent, Sell) привычны и легки для понимания (см. скриншот справа). В то время как такие словосочетания как «Устроиться на ночлег», «Переселиться» и «Переехать» (Roost, Migrate, Fly) могут сбить пользователя с толку (см. скриншот слева):

22. Иконки интерфейса необходимо сопровождать подписями

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

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

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

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

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

24. Позвольте пользователю увеличивать изображение настолько, насколько он считает нужным

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

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

25. Любой вопрос должен соответствовать контексту

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

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

Заключение

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

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

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

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

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

Мобильное устройства — другие

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

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

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

Мобильный способ мышления

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

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

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

Мобильный контекст

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

  • Скучающий: Многие пользуются смартфоном, лежа дома на диване. В этом контексте нужно обеспечить пользователю захватывающее и приятное времяпровождение — это увеличит продолжительность сессии. Но даже в таком случае не обойтись без перерывов, так что убедитесь, что ваше приложение возобновит работу с того места, где его оставил пользователь. Примеры: Facebook, Twitter, Angry Birds, браузер.
  • Занятой: Это как раз упомянутый выше сценарий с аэропортом. Возможность быстро и качественно выполнять микрозадачи, пользуясь одной рукой, в лихорадочном темпе крайне важна. Помните, что в этом контексте восприятие пользователя будет ограничено, поэтому важно, чтобы размер целевых объектов был большим, а дизайн — выразительным. Примеры: TripIt, e-mail, календарь, мобильный банкинг.
  • Заблудившийся: Пользователи, которые находятся в пути, в неизвестной обстановке, или даже в привычной обстановке, но в поисках чего-то нового, подпадают под эту категорию. В этом контексте перебои подключения к интернету и уровень заряда аккумулятора являются самыми насущными проблемами, так что вы должны обеспечить определенный уровень поддержки в режиме офлайн и экономить энергию на геолокации и других убийцах заряда. Примеры: Карты, Yelp, Foursquare.

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

  • 39% берут смартфон с собой в уборную. чем не «скучающий» пользователь?
  • 33% регулярно развлекаются вдвойне — смотрят телевизор и пользуются смартфоном одновременно;
  • 70% используют смартфон во время похода по магазинам (сравнивают цены, ищут подходящие товары, узнают о скидках и приобретают купоны) — довольно много, вполне можно отнести к «деловым»;
  • 95% считают смартфон помощником для ориентирования на местности — те самые «заблудившиеся».


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

Общие рекомендации

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

  • Отклик: Отклик — это ключевой элемент, я никогда не устану это повторять. Если ваш пользователь что-то делает, приложение всегда должно подтверждать взаимодействие. Но помните, что отклик и скорость работы — не одно и то же. Выполнение некоторых операций занимает время, это нормально. Просто убедитесь, что вы дали пользователю знать о том, что задача находится в обработке.
  • Детали: Оттачивание деталей ценится очень высоко. Так сложилось, что мы относимся к смартфонам как к нашим постоянным спутникам, поэтому ваше внимание к мелочам, их улучшение, будет замечено и оценено. Я воспринимаю это как процесс «подгонки и отделки» машины. Двигатель может быть мощным, а корпус — блестящим, но если машина шумит на дороге и дребезжит на трассе, впечатления водителя, который часто ездит в пригород, от этого сильно пострадают.
  • Большие пальцы: С появлением тач-скрин интерфейсов, все только и говорят «ткни сюда» и «ткни туда», но нам не стоит забывать, что приложения нужно разрабатывать не под указательный, а под большой палец. Пользоваться указательным и другими пальцами удобно, только если работать со смартфоном двумя руками. Да и в этом случае весьма вероятно, что пользователь будет набирать текст двумя большими пальцами. Большие пальцы — по умолчанию.
  • Целевые объекты: Посмотрите на свой большой палец — не на кончик, а на подушечку — это и есть та часть, которая взаимодействует с экраном. Подушечка моего большого пальца по размеру и форме напоминает крышку от бутылки. В некоторых жизненных ситуациях это удобно, но прицельно попасть им в крошечные объекты на моем смартфоне довольно сложно. Я пришел к выводу, что магическим числом для элементов интерфейса «под большой палец» является 44 пикселя (*подразумеваются экраны с низким разрешением, 320×240 — примечание переводчика). Конечно, есть множество исключений, но всё же это неплохое «правило большого пальца». Вы также должны продумывать, как разместить целевые объекты относительно друг друга. Например, поместить кнопку «Стереть» рядом с «Отправить» — плохая идея для смс-приложения.
  • Контент: Сенсорные экраны произвели революцию, поскольку дали нам возможность напрямую взаимодействовать с контентом. Они устранили такие интерфейсные устройства-посредники как мышь и сенсорная панель, и лучше соответствуют тому, как работает наш мозг. Мне не нужно далеко ходить за удачным примером: мой двухлетний сын без проблем справляется с айпадом, но ноутбук для него — темный лес. Максимально используйте потенциал работы с сенсорным интерфейсом на интуитивном уровне, сократив до минимума всё, что напоминает кнопки, полосы табуляции, различные окошки и бегунки (слайдеры) и во главу всего поместите контент.
  • Элементы управления: если вам всё же необходимо добавить элементы управления, лучше поместите их внизу экрана (иными словами, под контентом). Представьте себе счетную машину, напольные весы или тот же компьютер — элементы управления в них всегда расположены под дисплеем. Если бы не это, мы бы не видели, что происходит с контентом во время нашей работы с ними.

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

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

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

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

    Очень важно научиться чувствовать моменты, когда можно использовать стандартные или «родные» средства для решения своей задачи. Для этого надо как минимум наизусть эти средства знать. iOS Human Interface Guidelines и Android Design — обязательны к изучению.

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

    Рейтинг разработчиков мобильных приложений – удобный инструмент для поиска нужного разработчика. В его основе – 3 локальных рейтинга по каждой из самых популярных платформ: iOS, Android, Windows Phone.

    Ввод текста пользователем

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

    • На популярных смартфонах есть около дюжины полей ввода (сообщение, набор номера, e-mail, URL и т.д.) Позаботьтесь о том, чтобы каждое поле ввода вызывало на экран клавиатуру, которая будет наиболее удобной для набора соответствующих данных;
    • Автокорректировка может настолько сбивать с толку, что этому посвящен целый сайт. Для каждого поля ввода продумайте, какие из опций автоматического ввода стоит активировать (автокорректировка, автоматический ввод с большой буквы, автозаполнение и пр.);
    • Если ваше приложение предполагает частое использование клавиатуры, то обеспечьте наличие горизонтальной ориентации для толстопалых ребят вроде меня.

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

    Жесты

    Одна из знаковых особенностей современных сенсорных интерфейсов — возможность использовать жесты. Как бы ни были они хороши, вам всё же стоит помнить о некоторых вещах:

    • Неизвестность: Поддерживаемые жесты неизвестны пользователю, так что важно обеспечить их «обнаружение». Вам нужно решить, как показать пользователю их существование. Самое умное решение я видел на промо-ipad’ах, выставленных в магазинах Apple. Когда страница загружается в первый раз, зоны с прокруткой быстро проматываются снизу вверх в исходную позицию. Это заставляет пользователя промотать экран, хотя какие зоны прокручиваются, специально не обозначено.
    • Две руки: Мульти-тач жесты предполагают использование обеих рук. Наглядный пример — Maps на iOS, где для зума используется жест «хватания» всеми пальцами. Когда я нахожусь в незнакомом городе, держа в одной руке кофе, а во второй — телефон, это раздражающее ограничение. Андроид решил эту проблему, наложив кнопки увеличения и уменьшения зума поверх карты, что позволяет вам наслаждаться-таки своим кофе, мотаясь по Лондону.
    • Приятное дополнение: В большинстве случаев я считаю жесты приятным, но вовсе не обязательным дополнением. Это как сочетания клавиш — продвинутые пользователи их обожают, но большинство людей даже не подозревают об их существовании.
    • Не являются заменой: Пока нет общепринятого набора жестов, поэтому большинству приложений еще рано отказываться от визуальных элементов управления, которыми можно оперировать одним пальцем.

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

    Положение экрана

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

    Кстати, с планшетами история обратная — самой популярной является горизонтальная ориентация.

    Коммуникация

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

    Подписываюсь под каждым словом.

    Запуск

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

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

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

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

    Первые впечатления

    • Иконка: Ваша иконка должна выделяться из моря других. Поэтому думайте о ней скорее как о визитке, чем как о произведении искусства. Будьте буквальными — покажите, что делает ваше приложение. Выберите убедительную форму и сведите текст к минимуму. Только за идеальной иконкой скрывается идеальное приложение, поэтому стоит выделить достаточно денег и времени на то, чтобы сделать её правильно.
    • Первый запуск: Первый запуск приложения — это пан или пропал. Если новый пользователь путается или раздражается, пока пытается разобраться в вашем приложении, он очень быстро от него откажется. Если ваше приложение содержит сложный функционал, включите в него всплывающие «Советы и рекомендации», или, возможно, несколько обучающих экранов с инструкциями. Однако помните, что они не заменяют хороший дизайн — если вы обнаружили себя за написанием длинных текстов для раздела «Помощь», это может означать, что ваш пользовательский интерфейс нуждается в серьезной доработке.

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

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

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

    Заключение

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


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

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

    Рецензент: Сергей Швецов (Mail.Ru, проектировщик интерфейсов).

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

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

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

    Для статьи также хорошо подошел бы заголовок «Здравый смысл».

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

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

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

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

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

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

    И да — учите английский. Без него все будет плохо: «there`s no future».

    Вот такие жесты сегодня.

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

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

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

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

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

    принцип хоть и является последним в списке, но далеко не последний по значимости. Любому приложению важно иметь хорошую иконку, чтобы взгляд пользователя «зацепился» за неё при пролистывании огромного списка приложений. Это как витрина магазина в Новый Год и Рождество: чем ярче и интереснее она украшена, тем больше покупателей посетят магазин.

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

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

    У меня есть три пункта по поводу данного материала:

    1. Не устаю удивляться, насколько наши зарубежные коллеги виртуозно владеют жанром «Капитан Очевидность». Сказать множество обтекаемых слов, и при этом сделать так, чтобы у слушателя не осталось впечатления, что его водят за нос — это искусство! Давно и тщетно пытаюсь им овладеть, ведь тогда можно будет писать статью за статьей и перелетать с одной конференции на другую практически без остановки (шутка).
    2. Убежден в том, что дизайн без контента — это ничто. Поэтому если вы хотите, чтобы вашим приложением действительно пользовались, прежде чем рисовать иконку, подумайте о том, какое содержание будет за ней скрываться.
    3. Мысль, высказанная в Заключении, лично меня пугает. Я крайне скептически отношусь к российскому рынку веб-разработок, и мне кажется, что лучше было бы, если бы за приложения взялись не те же компании, что делают сайты, но разработчики новой формации — молодые и злые, — верю, что такие у нас есть!

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

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

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

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

    Главный редактор UX Planet Ник Бабич написал статью для Shopify про тренды в дизайне мобильных приложений. Нам она показалась полезной, и мы решили перевести её. Здесь пока только первая (самая большая) часть, но скоро будут остальные.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

    Перевод подготовила Рида Хасанова, дизайнер студии мобильной разработки Trinity Digital

    10 качественных конструкторов приложений для Andro >

    Как создать приложение для Android?

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

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

    Основные задачи для начинающего разработчика

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

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

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

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

    #1 Alstrapp

    Alstrapp — полноценная CMS для создания и управлением приложением для Android и iOS.
    Нет никаких абонентских платежей и подписок — только единоразовая покупка лицензии, которая дает возможность создавать неограниченное(!) количество приложений без ограничений.

    Из основных преимуществ стоит отметить:

    • PUSH и Alert уведомления
    • управление клиентами (регистрация аккаунта, личный кабинет)
    • редактор контента (возможно добавлять и редактировать любой HTML контент без обновления приложения)
    • чат с пользователями
    • брендирование приложения (собственные иконки и экраны загрузки)
    • только бесплатные шаблоны для Android и iOS устройств
    • управление всеми приложениями в одном окне
    • 100% открытый исходный код

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

    Alstrapp имеет систему локализаций и поддерживает русский язык.

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

    #2 NWICODE

    NWICODE является инновационным лидером в области разработок приложений, т.к. разработчикам удалось создать полноценную CMS, благодаря который каждый человек сможет написать своё приложение без каких либо знаний языков программирования. На этой платформе возможно создавать приложения для Android, iOS, а также Web App. Основные плюсы:

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

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

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

    #3 APPS-TECH

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

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

    #4 FREEL APP

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

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

    #5 Своёприложение

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

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

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

    #6 APPSFERA

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

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

    #7 THEAPPBUILDER

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

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

    Перечислю главные достоинства THEAPPBUILDER:

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

    #8 APPSGEYSER

    Самый быстрый конструктор приложений. Главное преимущество данного редактора – вшивать ссылки и рекламу вашего сайта в приложения Android.

    Вот еще некоторые главные отличия данного сервиса:

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

    #9 IBUILDAPP

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

    Перечислим особенности IBUILDAPP:

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

    #10 App Inventor

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

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

    Еще хочется отметить следующее:

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

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

    Писать самому или доверить студии разработчиков?

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

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

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

    Цукерберг рекомендует:  Вирусология 2.0 [] {IT Security Concept}
    Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих