Как создают дизайн приложений: Процесс разработки дизайна мобильного приложения с нуля | by Ринат Шайхутдинов | Продуктовый дизайн

Разработка Дизайна Приложения: Создание Крутого UI/UX

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

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

В чем разница между UI и UX?

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

Пользовательский опыт

Суть — помочь пользователям достигнуть главной цели: забронировать билеты на самолет, заказать еду или вызвать такси. Чтобы создать дизайн приложения — держите в голове нужды пользователей и делайте все, чтобы помочь пользователям “дойти до конца”. Использование приложения не должно быть похоже на IQ тест. Вот например, две опции доставки:

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

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

Пользовательский интерфейс

Это все элементы, которые видит пользователь, и с которыми взаимодействует. Например:

• кнопки
• текстовые поля
• чекбоксы
• слайдеры
• строки поиска
• тэги
• иконки

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

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

Стадии UI/UX дизайна

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

Исследование

Первый шаг к крутому UI/UX дизайну — исследование рынка. Мы проводим маркетинговые исследования и изучаем аналогичные продукты конкурентов. Это помогает нам создавать решения, которые на шаг опережают других игроков на рынке. Плюс, знакомимся с бизнес-логикой продукта и требованиями клиентов. Если у вас есть референсы или конкретные требования к разработке дизайна приложений — предоставьте их как можно раньше. Так мы сможем лучше понять ваши потребности.

Вайрфреймы

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

Дизайн-концепт

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

Визуальный дизайн

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

Нужен ли вашему продукту UI/UX дизайн?

Разработка дизайна приложений занимает 1-2 месяца и стоит денег, поэтому некоторые стартаперы думают, что могут обойтись и без этого. Однако попытка сэкономить на одной из самых важных составляющих вашего приложения (которую пользователь может увидеть и потрогать!) — не лучшая идея. Профессиональный UI/UX дизайн — это не только красивый визуал, на нем строится логика продукта. Если вы не хотите, чтобы ваши клиенты разочаровались, вам нужен интуитивно понятный интерфейс, который могут создать только профессионалы.

Как UI/UX дизайн влияет на успех вашего приложения?

Исследование Forresterhttps://www.forrester.com/report/The+Six+Steps+For+Justifying+Better+UX/-/E-RES117708о рентабельности инвестиций UI/UX дизайна показывает, что в среднем каждый доллар, вложенный в UX, приносит 100 долларов. Представляете какая прибыль? Они также отмечают, что ведущие компании, инвестирующие в UX, превзошли индекс S&Phttps://ru.wikipedia.org/wiki/S%26P_500на 35%. Согласно их исследованиям, хорошо продуманный пользовательский интерфейс увеличивает коэффициент конверсии более чем на 200%. И если удалось увеличить удержание клиентов как минимум на 5%, прибыль увеличиться более чем на 25%. Довольные пользователи часто рекомендуют своим друзьям понравившиеся продукты. По данным Forrester, 23% клиентов, у которых был положительный опыт, рассказали об этом 10 и более людям.

Основные ловушки UI/UX дизайна:

Теперь вы знаете, насколько важно инвестировать в качественный UI/UX дизайн. Вот несколько примеров того, как плохой UI/UX может вас подвести.

• Вы не знаете чего хочет пользователь. Есть методы, которые помогают ставить себя на место пользователей, например, создание персон (образ пользователя) или написание пользовательских историй. Люди иногда бывают необъективны: вы можете всем сердцем любить свой проект, но это не значит, что он понравится и пользователям. Опросите реальных людей перед тем, как разрабатывать продукт. Много раз проверено: они могут удивить вас идеями, о которых вы даже не задумывались.
• Ставите креатив выше удобства. Ваше приложение может выглядеть потрясающе и выделяться на фоне других. Но если реальные пользователи не осознают его ценность, в чем смысл? Например, довольно часто компании вкладывают средства в создание кастомных шрифтов, которые пользователи будут ассоциировать с их брендом. Но слишком креативные шрифты часто трудно читать. Не забывайте, что продукт должен быть удобен для пользователей, а дизайн должен учитывать их потребности, а не только ваше желание самореализации.
• Реализуете не интуитивную навигацию. Пользователи имеют многолетний опыт взаимодействия с цифровыми продуктами. Они ожидают найти узнаваемые кнопки в определенных местах и перемещаться по экранам, используя интуитивно понятные механизмы (например, скроллинг или стрелки). Не нужно делать что-то в корне новое, потому что в итоге вы получите продукт с плохим юзабилити.

Работа с опытной UI/UX дизайн командой не даст вам попасть в эти ловушки.

Преимущества создания дизайна приложения для стартапа:

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

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

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

Вывод

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

У вас есть идея для проекта?

X

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

Авто/Мото

Финансы, инвестиции, банки

Медицина

Недвижимость

Промышленность

Дизайн и Реклама

Торговля

Туризм и отдых

Услуги

Выставки, конференции

Города и страны

Культура и Искусство

Каталоги, рейтинги, поисковые системы

Компьютеры и интернет

Консалтинг

Мода и красота

Музыка

Некоммерческие, государственные организации

Нефть и газ

Наука

Одежда

Обучение

Работа

Развлечения

Программное обеспечение

Политика

Строительство и ремонт

Спорт

СМИ

Провайдеры, хостинг

Телекоммуникации

Электронная коммерция

Дом, семья

Мебель и интерьер

Потребительские товары

Оборудование

Транспортные услуги

Питание

Религия

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

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

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

01

ОПРЕДЕЛИТЬ ЦЕЛЕВУЮ АУДИТОРИЮ ПРИЛОЖЕНИЯ И СВОИ БИЗНЕС-ЦЕЛИ

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

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

02

НАЙТИ ДИЗАЙНЕРА

Если вы читаете эту статью, скорее всего, у вас нет дизайнера в штате. Дизайнеры-фрилансеры обитают на Dribbble и Behance. Выбирайте такого специалиста, чье портфолио соответствует вашим вкусам.

Хорошим решением будет нанять целую команду, состоящую из дизайнеров, разработчиков, тестировщиков и менеджера проекта. Так вы получите не только дизайн, а целое работающее приложение. Нанимая компанию, а не фрилансера, вы получаете дополнительные навыки: аналитику, UI/UX-дизайн, мобильную и веб-разработку и т. д. Они — команда, так что у них есть устоявшийся бизнес-процесс, это сэкономит вам время по сравнению с набором незнакомых друг другу фрилансеров. Команды тоже размещаются на платформах, так что попробуйте Upwork.

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

03

РАССКАЗАТЬ ДИЗАЙНЕРУ ВСЕ

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

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

04

ПОЛУЧИТЬ ПРОТОТИП

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

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

05

ПОЛУЧИТЬ ДИЗАЙН

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

В течение десятилетий самой популярной программой для создания графики был Adobe Photoshop и его товарищи по Creative Suite. Теперь же большой популярностью пользуется Sketch, так как он был создан специально для дизайнеров интерфейса. Мы в «Культпросвете» используем оба: выбираем в зависимости от типа графики.

06

ТЕСТИРОВАТЬ И РАЗВИВАТЬ ПРИЛОЖЕНИЕ

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

Нативное или кросс-платформенное приложение — что выбрать?

Если у вас грандиозные планы и есть бюджет, всегда выбирайте нативные приложения. Они лучше работают и отлично выглядят. Поведение пользователей на Android и iOS несколько отличается, так что это нужно учитывать. Интерфейс приложения должен быть выполнен в соответствии с установленными гайдлайнами, например material design для Android. Так вы обеспечите высокий уровень удержания пользователей и будете довольны показателями когортного анализа.

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

Сколько стоит разработка мобильного приложения?

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

Aegle — это кросс-платформенное приложение, которое помогает пользователю оставаться в форме. С его помощью можно планировать сложные тренировки, смотреть видеоуроки с упражнениями и отслеживать съеденное за неделю. Есть также счетчик калорий и режим «Отрыв», где можно записывать весь съеденный фастфуд. Мы делали дизайн этого приложения для iOS, потратили 57 часов на 13 экранов. Общая стоимость — $1430.

FlyMyCard — сервис, который позволяет создавать красивые виртуальные открытки и отправлять их друзьям, а также находить новых друзей из других стран. Можно выбрать фото, добавить рамку и текст и переслать результат близкому человеку или новому знакомому. Клиент хотел иметь и Android-, и iOS-версию приложения, так что нам понадобилось 73 часа, чтобы создать 18 экранов, и цена составила $1840.

WaysGo — довольно сложный проект: социальная сеть, которая позволяет знакомиться с новыми людьми, основываясь на том, какие вещи вы любите и какие места посещаете. Пользователям доступны разные роли, а в самом приложении есть множество функций: можно искать заведения и места, читать истории о них и создавать собственный контент. Мы создали 32 экрана для iOs- и Android-приложений, потратили 120 часов, а стоимость составила $3000.

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

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

В приложении PayPal все просто и понятно, а все благодаря понятному UX/UI-дизайну. 17 экранов, $1765.

У Pinterest есть отличное Android-приложение, пользователи высоко оценили удобный дизайн. 25 экранов, $2500.

Как понять, правильного ли дизайнера вы нанимаете

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

• дизайнер спрашивает вас о целевой аудитории, стратегии и целях;

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

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

• дизайнер готов поддерживать проект в будущем.

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

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

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

https://gbcdn.mrgcdn.ru/uploads/post/1509/og_cover_image/6e6c6d523fe45c706b24e7b2a0a1b94d

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ревью: 6 этапов процесса работы над дизайном мобильных приложений с полезными советами от практиков.

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

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

1. Погружение

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

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

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

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

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

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

2. Исследование

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

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

Создание персоны

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

Создание карты пути пользователя (CJM)

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

Проведение конкурентного анализа

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

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

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

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

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

3. Вайрфреймы

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

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

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

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

Юзабилити-тестирование

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

Визуальный стиль

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

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

Руководство по стилю

‍На данном этапе команда проходит три этапа:
Создание руководства по стилю;
Дизайн экранов приложения;
Поддержка команды разработчиков.

Создание руководства по стилю

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

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

Дизайн экранов приложений

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

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

Поддержка команды разработчиков

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

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

Заключение

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

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

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

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

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

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

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

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

Здесь мы определяемся с тем, какие функции будет поддерживать приложение. Идеи рисуются в блок-схеме.

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

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

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

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

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

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

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

Дизайн мобильных приложений: разработка UX/UI дизайна под Android, iOS приложения

Что такое пользовательский интерфейс и зачем его заказывать

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

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

Дизайн приложения для смартфонов — это его “лицо”

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

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

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

1. Простое и четко структурированное меню.
2. Удобная навигация. Человек должен комфортно себя чувствовать при взаимодействии с сервисом, вне зависимости от устройства и операционной системы (iOS или Android).
3. Фон, шрифты и цветовая схема, которая не перетягивает на себя все внимание пользователя. Предпочтительнее использовать легкие, светлые тона, рисунки с размытыми контурами без большого количества мелких деталей. Также уместны цвета представляемого бренда.
4. Жесты с визуальными и аудио-эффектами.
5. Синхронизация с GPS и часовыми поясами.
6. Возможность поделиться необходимой информацией в социальных сетях с помощью соответствующих кнопок.
7. Оформление приложения должно соответствовать его тематике и целевой аудитории.

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

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

Уникальный дизайн приложения или обычный шаблон?

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

Сложность выбора дизайна

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

Индивидуальный дизайн: риски и затраты

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

Шаблонный дизайн – оптимальное решение?

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

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

UX/UI дизайн

Для создания по-настоящему хорошего и удобного для любого пользователя приложения используется UX и UI дизайн, причем второй является логическим продолжением первого. Что такое UX дизайн? Эта аббревиатура означает User Experience или дизайн пользовательского опыта. Он начал массово использоваться с 1993 года. UX дизайн является первым этапом создания мобильного проекта и носит скорее психологический, нежели технический характер, поскольку помогает понять психологию целевой аудитории, узнать их потребности и ожидания. Учитывая все это, дизайнер сможет разработать наиболее логичный дизайн, простую структуру и определить все необходимые инструменты и функции, которые будут востребованы пользователями. То есть, на этом этапе специалист проектирует взаимодействие человека с приложением, чтобы пользователь мог легко и быстро освоиться, находить нужные разделы и элементы, выполнять необходимые действия и получать удовольствие от работы.

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

UX/UI дизайн в приложениях

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

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

Этапы UX проектирования приложения

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

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

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

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

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

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

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

Цветовая гамма

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

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

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

Как мы делаем дизайн приложения

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

Первым этапом в этой связке идет разработка UX дизайна. За этой аббревиатурой скрывается нечто абстрактное – «Пользовательский опыт» («User Experience»). На этом этапе специалисту необходимо понять, как должно работать будущее приложение, чтобы пользователю было удобно и комфортно им пользоваться. Фигурально выражаясь, специалист «расставляет» стены в доме таким образом, чтобы здание не рухнуло, но при этом было максимально удобным для всех домочадцев. На этой стадии не стоит вопрос визуального оформления «стен и потолков», прорабатывается интерфейсная логика, по которой пользователи будут «ходить» по приложению — дому. Для этого проводится сбор информации о работе подобных программ и ожиданиях пользователей, проектируется взаимодействие пользователя с приложением, создаются прототипы программ, позволяющие буквально «прощупать» приложение и оценить его работу еще до создания рабочей версии даже в демо-режиме. Это позволяет избежать временных и финансовых затрат на стадии разработки, поскольку и сам заказчик, и программисты будут четко представлять себе, как должен выглядеть и работать разрабатываемый продукт.

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

User Experience – создает логику приложения, делая его удобным, простым и понятным для любого пользователя, а User Interface – воплощает эту логику в осязаемый интерфейс продукта, который увидит пользователь.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1.Разберитесь в стратегии своего бизнеса

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Создать дорожную карту

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Поехали.

1. Настройка диапазона

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3. Каркас UX

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Почему?

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

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

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

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

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

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

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

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

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

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

10. Выпуск

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

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

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

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

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

Еще в списке .

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

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

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

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

1. Творческие жесты

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

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

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

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

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

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

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

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

3.Картирование отказов

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

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

4. Микро-мини-взаимодействия значительно вырастут

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

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

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

5. Анимация

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

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

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

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

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

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

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

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

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

Она говорит:

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

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

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

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

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

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

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

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

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

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

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

Pttrns : библиотека, содержащая более 3K шаблонов пользовательского интерфейса iPad и iPhone.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Предпроектные этапы

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

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

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

Конкурентный анализ

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

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

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

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

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

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

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

Системная архитектура

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

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

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

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

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

Каркасы

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

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

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

Давайте продолжим на примере фитнес-приложения.Вот как может выглядеть часть вашего каркаса:

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

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

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

Каркасные модели

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

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

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

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

Доски настроения

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

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

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

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

Посмотрите эти фрагменты различных стилей приложений:

Понятно, что все три из них уникальны.

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

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

Цветовые палитры

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

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

Вот пример демонстрации цветовых палитр для разных брендов:

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

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

Мобильные устройства

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

Как будет выглядеть дизайн Apple iPhone 6 Plus (iOS) по сравнению с Samsung Galaxy Note 20 (Android)? Как изменится дизайн планшета Android на iPad mini?

Приложения

для Android будут иметь другой дизайн, чем приложения для iOS, доступные в Apple App Store.Но вам также нужно думать не только о том, что iOS или Android или мобильный телефон или мобильный Интернет. Для устройств, использующих одну и ту же ОС, даже будут различия в дизайне.

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

Стратегический консалтинг

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

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

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

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

Высококачественные мокапы и прототипы

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

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

Мокапы и прототипы, по сути, объединяют ваши каркасы с этапом проектирования.

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

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

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

Как видите, на разработку приложения нужно ОЧЕНЬ МНОГО.Этот процесс может быть чрезвычайно сложным, особенно если вы никогда не делали этого раньше.

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

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

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

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

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

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

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

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

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

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

Все это будет построено на самой современной инфраструктуре BuildFire.

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

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

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

Заключение

Дизайн мобильного приложения может быть сложным, но это не обязательно.

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

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

Что нужно знать о процессе разработки приложений — Smashing Magazine

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

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

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

Дополнительная литература по SmashingMag:

Процесс дизайна в общих чертах (превью в большом разрешении) Подробнее после прыжка! Продолжить чтение ниже ↓

Встречайте Image Optimization , новое практическое руководство Адди Османи по оптимизации и размещению высококачественных изображений в Интернете. От форматов и сжатия до доставки и обслуживания: все в одной книге 528 страниц и .

Перейти к содержанию ↬

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

Это может отличаться от того, как вы это делаете. Шаги могут называться по-другому или инструменты могут отличаться. На самом деле, если вы опытный дизайнер, вы все это знаете. Вы даже можете подумать, что контент банален или «что-то все знают». В этом случае вы, скорее всего, являетесь частью пузыря, в котором мы живем. Но если вы новый дизайнер или кто-то пытается понять, за что вы платите другим людям, это, надеюсь, поможет вам -Обзор Земли.

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

Идея

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

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

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

(Большой превью)

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

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

• Осуществима ли эта идея технически? Можно ли это сделать? Кто должен это сделать? Как бы мы это сделали? Какие инструменты мы используем? Какие данные / API / точки взаимодействия нам нужны? Какие препятствия стоят перед реализацией идеи?

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

• Можно ли это сделать проще / иначе? Есть ли другие способы достижения тех же целей? Или есть другие методы, которые могли бы быть более эффективными и требовать меньше времени для выполнения?

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

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

Создавайте, оспаривайте и пересматривайте идеи вместе с другими. (Большой превью)

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

Спецификация

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

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

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

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

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

Каркас

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

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

Пример из одного из наших сеансов интерактивной доски (большой предварительный просмотр)

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

Существует множество инструментов, которые помогут вам создавать каркасные модели. На сайте applypixels.com у меня есть набор UI-макетов, который я использую. Ниже приведен пример того, как это можно сделать:

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

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

Цифровые инструменты для создания каркасов могут ускорить процесс (большой предварительный просмотр)

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

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

Опытный образец

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

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

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

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

Визуальный дизайн

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

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

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

Правила, определенные в прекрасном неписаном руководстве по дизайну вашего продукта, определяют каждый выбор каждого визуального решения, с которым вы можете столкнуться. Работа на этом этапе заключается в том, что дизайнер определяет ряд правил и соглашений, а затем применяет их к каждой проблеме, с которой он или она может столкнуться при создании интерфейса. К счастью, вам не нужно каждый раз изобретать велосипед (хотя иногда мы именно так и поступаем).В iOS и Android есть множество существующих правил, соглашений и выражений, на которые мы можем опираться. «UI Kit with a Twist» — это выражение, которое охватывает идею визуального дизайна, который опирается на стандартные компоненты пользовательского интерфейса iOS, но с нахальной цветной навигационной панелью или другими незначительными настройками.

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

Обычно я начинаю свой визуальный дизайн на основе набора пользовательского интерфейса, такого как тот, который доступен на сайте applypixels.com (доступен как для Sketch, так и для Photoshop). Это позволяет мне опираться на соглашения iOS, пытаясь сломать стереотип и экспериментировать тонкими, но значимыми способами. Есть много других наборов пользовательского интерфейса, и такие места, как ui8.net, могут быть особенно хорошими сайтами для поиска готового стиля.

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

Развитие

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

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

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

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

Итерация

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

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

1. Получить идею
2. Запишите
3. Построить прототип
4. Участвуйте в танце между дизайном и разработкой, пока не выйдет из этого

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

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

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

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

Заключительные записи

1. В этой статье я использую несколько инструментов, доступных подписчикам на applypixels.com, включая комплект Wireframe и комплект пользовательского интерфейса iOS 10. Это мои собственные инструменты, которые мне очень дороги, но есть много других шаблонов дизайна. Стоит упомянуть бесплатные инструменты на сайте Bjango и те, которые вы можете приобрести на ui8.
2. Как для создания каркасов, так и для визуального дизайна я рекомендую вам взглянуть на Photoshop или Sketch.
3. Для создания прототипов и совместной работы над дизайном вам следует попробовать Framer, Figma, Marvel или InVision.
4. Для семинаров по генерации идей и общего управления проектами я использую Trello.

(да, в, ил)

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

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

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

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

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

Но как создать отличный дизайн приложения?

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

Начало работы

—

1. Установите цель своего приложения

Дизайн Googa

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

Наденьте свой разум и запишите ответы на следующие вопросы:

1. Какова основная цель вашего приложения? Что именно вы хотите сделать?
2. Как вы сделаете свое приложение привлекательным для пользователей?
3. Что вы собираетесь делать? Какую проблему вы хотите помочь людям решить с помощью вашего приложения?
4. Почему люди захотят использовать ваше приложение вместо одного из ваших конкурентов? Чем он отличается?

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

2. Составьте план

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

Сформируйте наглядное представление ответов на поставленные вами вопросы и запишите их на бумаге. Изображение через skillapp.it.

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

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

3. Изучите свою нишу и конкурентов

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

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

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

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

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

Проектирование и разработка вашего приложения

–

4. Создайте каркас для своего приложения

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

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

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

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

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

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

Пример каркаса для приложения Uber. Изображение из источников приложения Sketch.

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

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

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

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

5. Разработайте свое приложение

Дизайн приложения от Nashrulmalik

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

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

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

Работа напрямую с дизайнером

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

Просмотр дизайнеров с помощью инструмента 99designs Designer Search

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

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

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

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

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

Используйте конструктор приложений

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

Агентство по найму

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

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

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

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

Упростите навигацию:

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

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

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

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

Простой дизайн:

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

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

Дизайн Саша Радоевич.

Внимательно выбирайте цвета и шрифты:

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

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

Подумайте о визуальной иерархии и весе:

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

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

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

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

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

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

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

6. Соберите отзывы о своем дизайне

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

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

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

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

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

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

7. Разработайте свое приложение

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

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

Тестирование и запуск

–

8. Протестируйте свое приложение с помощью фокус-группы

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

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

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

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

9. Запускаем бета-версию

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

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

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

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

10. Запустите приложение

Наконец-то свет в конце тоннеля! Вы спланировали, протестировали, спроектировали и протестировали еще несколько, и ваше приложение готово к продаже.

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

Android не требует проверки перед запуском приложения.Это означает, что вам просто нужно загрузить файл приложения в магазин Google Play (как и в случае с бета-версией), и люди могут сразу же начать загрузку вашего приложения. IOS немного отличается тем, что они проверит ваше приложение, прежде чем оно будет запущено. Не волнуйтесь, если вы следовали нашему руководству и все сделали правильно, у вас не должно возникнуть проблем с получением зеленого света.

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

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

Готовы ли вы покорить мир приложений?

–

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

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

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

Ищете потрясающий дизайн приложения?

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

10 главных ошибок проектирования приложений

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

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

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

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

Несмотря на то, что большинство проблем с удобством использования приложений зависят от предметной области, вот 10 распространенных ошибок, которые мы часто наблюдаем в разных отраслях. Пять из этих проблем (№№ 1, 2, 3, 4 и 6) также были включены в исходную статью, что свидетельствует о том, насколько надежны рекомендации по удобству использования. Все 10 исходных рекомендаций по-прежнему верны, но 5 ошибок (к счастью) стали менее распространенными, чем когда-то; их заменили еще 5 задач (№ 5, 7, 8, 9 и 10).

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

1. Плохая обратная связь

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

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

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

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

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

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

1.a. На обед без индикатора прогресса

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

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

• Если команда занимает от 2 до 10 секунд , покажите анимацию ожидания, такую ​​как «счетчик.Индикатор этого типа сообщает пользователям, чтобы они держали лошадей и не нажимали ни на что другое, пока не вернется нормальный курсор.
• Если команда занимает более 10 секунд , установите явный индикатор выполнения , желательно в качестве индикатора выполнения (если вы действительно не можете предсказать, сколько работы осталось до завершения операции).

2. Несоответствие

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

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

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

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

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

3. Сообщения об ошибках

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

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

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

Набор расплывчатых Что-то пошло не так сообщения об ошибках от Quicken (вверху слева), Dropbox (вверху справа), IBM Verse (внизу): ни одно из них не описывает характер проблемы, подробности о том, как избежать проблемы и была ли потеряна работа пользователя в процессе.

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

4. Нет значений по умолчанию

Значения по умолчанию помогают пользователям во многих отношениях. Самое главное, что по умолчанию можно:

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

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

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

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

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

5. Иконки без надписи

Значки действительно редко стоят сами по себе, и большинство пользователей сразу их понимают. Даже значки, которые могут показаться универсальными (например, гамбургер-меню), не так знакомы пользователям, как можно было бы ожидать от большинства практиков UX.Будет намного хуже, если в вашем приложении есть уникальные значки; вероятность того, что пользователи поймут, что означают эти уникальные значки, очень мала. Помните закон Якоба: «пользователи проводят большую часть своего времени на других веб-сайтах». Это означает, что пользователям будет сложно или невозможно понять большинство значков, если рядом с ними нет текстовой метки.

Сочетание значков с текстовой меткой дает четыре преимущества:

1. Увеличивает размер цели (что, согласно закону Фиттса, сокращает время, необходимое пользователям для доступа к элементу управления).
2. Уменьшает время распознавания команды: две подсказки памяти (значок и текст) лучше, чем одна.
3. Подобно предыдущему, он также может облегчить изучение интерфейса (путем установления нескольких ассоциаций с одной и той же командой).
4. Он может помочь пользователям визуально различать несколько команд, расположенных рядом друг с другом.

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

6. Труднодоступные цели

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

6а. Слабые указатели

«Доступность» означает то, что вы можете сделать с объектом.Например, флажок позволяет включать и выключать, а ползунок позволяет перемещаться вверх или вниз. Значения — это визуальные элементы, которые помогают вам понять возможности, просто взглянув на объект, прежде чем вы начнете его использовать (или почувствовать его, если это физическое устройство, а не экранный элемент пользовательского интерфейса). Эти концепции обсуждаются в книге Дона Нормана The Design of Everyday Things .

Знаки

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

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

Общие симптомов слабых признаков:

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

6б. Tiny Click Targets

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

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

7. Чрезмерное использование модальных параметров

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

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

8. Бессмысленная информация

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

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

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

9. Меню мусорного ящика

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

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

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

10. Близость деструктивных и подтверждающих действий

Размещение таких действий, как Save , рядом с действиями, которые разрушают работу, например, Discard , является обычным дизайнерским решением, которое причиняет много неудобств пользователям.Хотя логически такое размещение часто имеет смысл (например, Сохранить и Удалить связаны тем, что они решают судьбу элемента), оно также позволяет легко щелкнуть неправильную кнопку или значок, особенно когда пользователи спешат. , выполнение повторяющихся действий или проблемы с моторикой. Такой тип непреднамеренной замены одного действия другим называется промахом

. Veeam, корпоративное программное обеспечение для резервного копирования, содержит многоэтапный мастер для настройки нового задания резервного копирования.В нашем исследовании пользователь потратил почти 20 минут, чтобы пройти через этот мастер, и почти щелкнул Отмена , а не Завершить на самой последней странице сводки из-за близости двух кнопок. Если бы этот пользователь нажал Отмена , 20 минут работы были бы потеряны. Microsoft Outlook помещает кнопку Flag for Follow-Up рядом с иконками Archive и Delete . Эти значки служат противоположным намерениям пользователя, но они маленькие, расположены близко друг к другу, и пользователи легко могут ошибиться в спешке.

Сводка

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

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

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

8 Рекомендации по проектированию сложных приложений

Что такое сложное приложение?

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

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

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

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

1. Продвигайте обучение, выполняя

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

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

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

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

2. Помогите пользователям внедрить более эффективные методы

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

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

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

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

3. Обеспечьте гибкие и плавные пути

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

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

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

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

4. Помогите пользователям отслеживать действия и мыслительные процессы

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

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

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

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

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

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

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

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

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

6.Уменьшить беспорядок без снижения возможностей

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

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

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

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

7. Простота перехода между первичной и вторичной информацией

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

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

Панели мониторинга

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

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

8. Сделайте важную информацию визуально заметной

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

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

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

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

Заключение

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

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

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

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

Что делает разработку мобильных приложений такой масштабной? За последний год количество мобильных пользователей выросло на 100 миллионов, превысив 5.3 миллиарда во всем мире. Это 68% владельцев мобильных устройств. Поскольку уровень мобильных пользователей приближается к естественному потолку в 70–80%, больше внимания уделяется качеству использования, чем росту.

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

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

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

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

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

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

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

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

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

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

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

Мобильные приложения для анализа данных Иллюстрация Септиана Будястути

Mobiliteam

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

Иногда мы вводим UX Writer на стадии проектирования и back-end разработчика , если приложение имеет сложную серверную функциональность.

Есть три основных F-принципа, которым должна следовать команда разработчиков мобильных приложений:

• Руководство фирмы . Чтобы устранить возможные пробелы между отделами и клиентом, чтобы убедиться, что следующие два принципа неукоснительно соблюдаются.
• Фиксированные сроки . Для приложений очень важны временные рамки.Такая вещь, как сезонный спрос на приложение, реальна. Вот почему фиксированный срок, прикрепленный к фиксированной спецификации продукта, важен и не может быть изменен, если не произойдет чего-то драматического.
• Гибкий процесс . Это может показаться противоречащим второму принципу, но терпите нас. Гибкость не означает отклонения от темы, на самом деле, она позволяет нам оптимизировать процесс разработки на высоком уровне, поменяв местами задачи и приоритеты.

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

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

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

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

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

• Технические знания
• Деловые знания
• Знание дизайна
• Лидерские качества
• Многозадачность

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

• Эксперт по юзабилити
• Исследователь UX
• Навигационный стратег
• Художник-оформитель
• Иногда копирайтер

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

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

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

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

Инженер по контролю качества (инженер-тестировщик) — специалист по обеспечению качества программного обеспечения. Тестировщик очень похож на следователя. Он следует за программистом в поисках ошибок, используя различные дедуктивные методы и скрытые уловки.Без тестирования невозможно получить качественный программный продукт. Поэтому QA-специалисты очень востребованы в IT-бизнесе.

Работа в команде Фабрицио Роса Маркес

Мобильные платформы

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

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

Мобильные платформы раскрыли суть UX — простоту использования и удовольствие, а не необходимость.

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

Некоторые видели только визуальную часть, пытались скопировать ее, но Apple была далеко впереди с iPhone, отличавшимся на многих уровнях, что не имело смысла. То, над чем, как известно, смеялся Стив Баллмер, — ценник в 500 долларов — стал новым продуктом для смартфонов премиум-класса, в конечном итоге вытеснив из бизнеса всех, кроме одной компании — Google с ее Android.

iOS

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

Apple изменила представление о мобильных устройствах и частично сделала их основным способом доступа к цифровой информации. iOS — это эксклюзивная система, которая жизнеспособна только в контексте ограниченного набора продуктов: iPhone, iPad и iPod Touch с небольшими отклонениями от Apple Watch и Apple TV.

Android

История ОС Android началась в 2003 году.В 2005 году Google приобрел компанию за 130 миллионов долларов, и, как показало время, сделка оказалась чрезвычайно выгодной инвестицией. 2008 год стал годом появления первого смартфона, работающего на операционной системе Android с открытым кодом. Новая удобная система с открытым исходным кодом позволила любому создавать приложение, поэтому вскоре последовало их массовое появление.

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

Icon App iOS от Sutaryo

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

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

В целом разработчик Android владеет:

• Ява
• Котлин
• Xamarin
• React Native

Разработчик iOS:

Кросс-платформенный разработчик:

• JavaScript
• HTML, CSS
• Кордова
• C #
• React Native

Смартфон с концепцией визуализации данных.Технологии, Хай-тек Юлия Бойко

Как создаются приложения — процесс разработки приложений

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

Исследования и планирование

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

Вам необходимо ответить на следующие вопросов:

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

UX и UI-дизайн

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

Вам нужно создать:

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

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

Дизайн-спринт — Иллюстрация Павла Олека

Разработка приложений

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

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

Разработка приложения — это этап, состоящий из нескольких больших частей:

• Внутренняя / серверная сторона. Это в первую очередь касается баз данных и других серверных элементов, таких как решения для хранения данных.
• API. API — это способ подключения приложения к своему внутреннему серверу, а также к инструментам и системам, которые вы уже используете в своем бизнесе.
• Передняя часть. Front-end — это интерактивный UX, то есть то, с чем взаимодействуют пользователи приложения. Он соединяется с серверной частью через API.

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

Тестирование и запуск

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

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

Поддержка и обслуживание

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

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

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

* * *

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

Зачем разрабатывать мобильные приложения? Ожидается, что к 2023 году глобальный доход от мобильных приложений достигнет 935 миллиардов долларов за счет платных загрузок и рекламы в приложениях.Это делает разработку мобильных приложений одним из самых прибыльных и быстрорастущих сегментов ИТ-рынка.

Это, однако, накладывает определенные ограничения, такие как срочность. Мобильный рынок чрезвычайно чувствителен к тенденциям и актуальности дизайна и производительности. Какое будущее у разработки мобильных приложений? Чат-боты, носимые устройства, дальнейшее развитие Интернета вещей и облачных решений, дополненная реальность и виртуальная реальность, приложения по запросу — это лишь некоторые из тенденций, формирующих рынок мобильных приложений сегодня и в ближайшем будущем.Из-за пандемии COVID ‑ 19 люди все больше и больше времени проводят за мобильными телефонами, на время лишенные некоторых из своих любимых занятий. Существует тенденция создания цифровых аналогов такой деятельности, которая будет только расти. Если вы хотите узнать, какие категории приложений сегодня популярны, прочтите эту статью.

Пошаговый процесс UI / UX в 2021 году

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

Основные выводы:

• Рекомендации по разработке мобильных приложений включают создание прототипов, пользовательское тестирование, получение отзывов от многопрофильной команды (UX / UI / разработчиков / маркетологов), оценку вариантов доступности и тщательное применение новейших принципов мобильного дизайна.
• В процессе разработки приложения наиболее часто упускаются из виду проблемы с пустым состоянием (отсутствие удобного пользовательского интерфейса при отсутствии данных), несвязная визуальная иерархия и нелогичная навигация.
• Любое руководство по дизайну приложения было бы неполным, если бы не затронули основные принципы UX, включая закон Хика, закон Паркинсона, принцип KISS, теорию цвета и как минимум управление когнитивной нагрузкой.

Оглавление

1. Шаг 1: Важность пользовательского тестирования
2. Шаг 2: Дизайн приложения — не единственная задача
3. Шаг 3: Будьте в курсе последних тенденций в дизайне и разработке приложений
4. Шаг 4: Дизайн с учетом интересов пользователя
5. Шаг 5: Изучите науку и примените ее
6. Шаг 6: Совершенствование опыта в приложении
7. Шаг 7: Перспективы вашего дизайна

Шаг 1. Важность пользовательского тестирования в вашем приложении процесс разработки

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

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

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

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

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

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

Шаг 2: Разработка приложения — это не задача одного человека

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

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

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

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

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

Лучший подход для учредителя — нанять квалифицированную команду. В идеальной команде должен быть как минимум дизайнер UI / UX, backend-разработчик и маркетинговый ресурс. Эта команда позволит вам встать на путь и создать начальную версию приложения с минимальными функциональными возможностями (также называемую MVP).

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

Шаг 3. Будьте в курсе последних тенденций в области дизайна и разработки приложений

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

5G — это уже не будущее.Внедрение уже началось. Согласно исследованию, проведенному GSMA, к 2025 году около 4 миллиардов устройств будут работать в сети 5G. Это составляет более 15% от общемирового показателя. Появление 5G полностью изменило правила игры для мобильных приложений. Благодаря невероятно высокой скорости и чрезвычайно низкой задержке появятся гораздо более эффективные приложения AR (дополненная реальность) и VR (виртуальная реальность). Также можно будет обслуживать варианты использования, которые невозможны в существующей инфраструктуре LTE 4G.

Дополненная реальность — это, безусловно, технология, на которую могут обратить внимание разработчики приложений. В отличие от виртуальной реальности, он не требует специального оборудования, такого как гарнитуры VR. Существующие мобильные телефоны имеют очень мощное оборудование и дополнительное программное обеспечение, чтобы эта технология работала. С помощью камер обнаружения глубины на последних мобильных устройствах AR делает среду более интерактивной, интегрируя виртуальные объекты в ваше окружение. ARKit от Apple и ARCore для Android позволяют разработчикам создавать более надежные приложения с дополненной реальностью.Хотя мобильные игры (например, Pokemon Go) — это первое, что приходит на ум, когда думаешь об AR, просто представьте, какие возможности они открывают в других областях. От интерактивных приложений для покупок до служб знакомств AR, приложений для туризма, ландшафтного дизайна, приложений для рисования и совместной работы, спорта, маркетинга, здравоохранения, образования, общения / телеконференций и приложений визуализации данных — влияние AR бесконечно.

Связано: Разработка приложений для машинного обучения: все «почему» и «как»

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

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

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

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

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

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

Интеграция с другими приложениями и службами

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

Обеспечение различных типов устройств

Не так давно Apple выпустила новую линейку iPhone, включая iPhone 11, 11 Pro и 11 Pro Max. Программное обеспечение также получило аккуратное обновление в виде iOS 13, выход iOS 14 запланирован на осень. Дизайн, адаптированный к более резкому и четкому дисплею этих новых устройств, будет выделяться гораздо больше. Например, приложение mHealth может использовать новую, более мощную фронтальную камеру вместе с новейшим чипом A13 Bionic с питанием от нейронной сети для более точного отслеживания симптомов.

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

Проектирование устройств Apple и Android требует глубокого понимания операционных систем iOS и Android. Рекомендации по человеческому интерфейсу от Apple и Рекомендации по дизайну материалов от Google могут послужить отличным началом.Например, при разработке приложения для iOS вы должны использовать панель вкладок для навигации, а не панель навигации для версии того же приложения для Android.

Apple использует для своих устройств размеры 1x, 2x и 3x. Для Android дизайнеры должны сделать свои проекты совместимыми с экранами 6 разных размеров. LDPI, который находится на нижнем конце диапазона, имеет размер 120 точек на дюйм, за ним следуют MDPI, HDPI, XHDPI, XXHDPI и XXXHDPI.

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

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

Шаг 4. Создавайте дизайн с учетом потребностей пользователя

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

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

По словам генерального директора Bump Technologies Дэвида Либа: « Мобильные приложения следующего поколения будут решать проблемы таким образом, что пользователю, покупателю, даже не нужно думать об этом. ». Далее он говорит:« Mobile позволит всем этим приложениям как бы переворачиваться, и вместо того, чтобы я сообщал приложению, что я хочу, чтобы оно делало, приложение предложит мне: «Эй, ты, возможно, захочешь уйти». на встречу в конце полосы, потому что там много пробок ».

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

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

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

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

Доступность приложения

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

По статистике, около 15% населения мира живет с той или иной формой инвалидности. Консорциум W3C или World Wide Web — это международное сообщество, которое разрабатывает веб-стандарты. В их Руководстве по обеспечению доступности веб-контента (WCAG 2.0) излагаются рекомендации и лучшие практики для онлайн-контента.В этом документе показано, как эти правила применяются к доступности для мобильных устройств.

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

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

Мы расскажем, какой технический стек и API лучше всего подходят для идеи вашего приложения.

Расскажите подробнее

Шаг 5: Понять науку и применить ее

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

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

Важность принципов UX

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

Закон Хика

Чем больше вариантов выбора вы дадите пользователю, тем больше времени уйдет на принятие этого решения.

Закон Паркинсона

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

Принцип KISS (Keep It Simple Stupid)

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

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

Если вы хотите узнать больше о UX, вы можете заглянуть на этот довольно удобный сайт Laws of UX.

Последовательный брендинг

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

Теория цвета

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

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

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

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

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

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

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

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

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

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

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

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

Шаг 6: Улучшение взаимодействия с приложением

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

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

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

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

Навигация одной рукой или удобное расположение большого пальца

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

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

Правильная навигация и визуальная иерархия

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

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

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

Шаг 7: Обеспечение будущего вашего дизайна

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

Важность содержания

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

Типографика также является одним из самых мощных элементов дизайна. Это может сделать приложение более удобным и доступным. Совсем недавно я начал использовать это облачное приложение для создания заметок под названием «Медведь». Он доступен только для устройств Apple (iPhone, iPad и Mac).Я влюбился в это приложение с первого взгляда. Я отказался от встроенного приложения заметок Apple и полностью переключился на Bear. Итак, что вызвало у меня такую ​​резкую реакцию? Это была чистая простота и красивая типографика приложения! Дизайнерам удалось представить мощные функции приложения настолько естественным и простым способом, что пользователям просто нравится им пользоваться.

Избегайте копирования других дизайнов

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

Не бойтесь вводить новшества

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

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

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

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

Вам нужна помощь в разработке приложения вашей мечты? Мы разработчики приложений из Нью-Йорка, Лос-Анджелеса, Майами, и наша команда всегда готова помочь вам. Свяжитесь с нами сейчас.

FAQ

Каковы основные этапы разработки мобильного приложения?

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

Могу ли я использовать один и тот же дизайн приложения для iOS и Android?

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