Александр Киров, дизайнер мобильных интерфейсов в Mail.Ru — четвертом в мире по количеству дневной аудитории почтовом сервисе. Специализируется на интерфейсах приложений и сайтов для мобильных устройств. Имеет большой опыт работы в сфере digital-рекламы для таких брендов, как Сбербанк, Билайн, Lexus, Winston (JTI), Lowenbrau, Райффайзенбанк, Транскредитбанк, Jose Cuervo, Ericsson. Сертифицированный специалист Apple.

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

— Стив Джобс

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

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

Обработка входящей задачи

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

1. Выясняем подробности задач проекта

Главное, что нужно «вынести» из условий поступающей задачи — ее бизнес-цели. У каждого проекта они свои: монетизация, имидж или дополнение к веб-версии продукта. Очень важно четко понять, для чего вы разрабатываете приложение — проектировать и создавать дизайн необходимо в соответствии с бизнес-целями проекта.

2. Анализируем целевую аудиторию

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

Максим Десятых
Креативный директор redmadrobot

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

Составляем юзкейсы

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

Максим Десятых
Креативный директор redmadrobot

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

Исследование конкурентного рынка

1. Используем поисковики для анализа блогов

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

2. Исследуем магазин приложений

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

3. Испытываем продукты-конкуренты

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

Поиск вдохновения и успешных механик

1. Путешествуем по дизайнерским сообществам

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

2. Анализируем свежие статьи и концепты

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

3. Обращаемся к другим платформам

Работая над приложением для iOS, не бойтесь посмотреть на другие платформы — Android, Windows Phone или MeeGo. Зачастую в них можно увидеть интересные механики, которые могут помочь вам при работе над приложением.

Максим Десятых
Креативный директор redmadrobot

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

Комбинируем результаты исследования

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

Отбрасываем лишнее

1. Отсекаем второстепенное

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

2. Оттачиваем наиболее важное

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

3. Сверяемся с начальной задачей

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

4. Сверяемся с гайдлайнами платформы

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

Тестирование макетов

1. Проверяем макеты на устройствах

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

2. Пробуем на разных экранах

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

Максим Десятых
Креативный директор redmadrobot

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

Прорабатываем детали

1. Продумываем анимации

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

2. Подбираем звуки событий

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

3. Дорабатываем приятные мелочи

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

Максим Десятых
Креативный директор redmadrobot

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

Бета-тестирование и дизайн-ревью

1. Активно участвуем в процессе разработки

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

2. Участвуем в бета-тестировании

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

3. Проверяем продукт на соответствие макетам

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

4. Не боимся менять и усовершенствовать продукт в процессе

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

Максим Десятых
Креативный директор redmadrobot

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

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

Сбор откликов

1. Читаем отзывы в магазине приложений

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

2. Следим за тематическими блогами

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

3. Размещаем макеты на Dribbble

Дизайнерские социальные сети, такие как Dribbble, помогут собрать профессиональное мнение дизайнеров о вашей работе. Они могут указать вам на недочеты, о которых другие люди даже не задумывались. Но не принимайте все близко к сердцу — дизайнеры все-таки творческие люди и иногда не могут адекватно оценить хорошую работу без ревности ;)

Максим Десятых
Креативный директор redmadrobot

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

Оригинал: scoutzie.com

Макс Гулевич
Руководитель отдела проектирования и дизайна в РосБизнесКонсалтинг

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

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

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

Разработчики, разработчики.... Да, существенной ошибкой является отсутствие авторского надзора за разрабатываемым решением. Особенно, в случаях большого time-to-market, который часто случается в крупных компаниях. Конечно, все зависит от уровня разработчиков. Если в компании работают разработчики, которые «не живут» по каким-то причинам данным проектом, лучше либо не делать проект вовсе, либо выбрать иных исполнителей. Такое случается редко, но практически всегда в роли немотивированных разработчиков «выступают» аутсорсеры, это беда для всех проектов и продуктов. Если у вас есть возможность делать все самим в «ин-хаус» режиме — делайте. Если нет — подумайте сто раз, ввязываться в проект или нет (если есть возможность — отказывайтесь).

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

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

Леонид Бугаев
Владелец в Nordic Agency AB

Читая статью Александра, вспоминаю фразу Егора Аристакесяна: «Иногда разработка мобильного приложения заканчивается на этапе исследования — когда находишь мобильное приложение в AppStore и понимаешь, что все уже сделано до тебя».

Глубокий анализ, desk research — обязательный этап анализа конкурентной среды, который может сэкономить месяцы работы. Не бойтесь смотреть по сторонам, используйте мой любимый принцип Буратино — суйте свой нос куда следует, и куда вас не просят! Ищите вдохновение — и не стесняйтесь своей невежественности (я вот, к стыду своему, узнал про Scoutzie из статьи Александра — и жив, хотя и с покрасневшими ушами:)

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

И про звуки: не покупайте звуки на стоках. Создайте звуковые эффекты сами — пусть даже на основе стоковых. Вопрос в применении нескольких фильтров. И тогда у вас будет шанс создать фирменный звук — почти как в ICQ (Всем — ку-ку! Дизайн — не мой).

http://fs02.androidpit.info/ass/x91/2842091-1313264927302.jpg
 

Анатолий Ларин
Менеджер по развитию бизнеса в Touch Instinct

Просто превосходная статья, большое спасибо! Почерпнул для себя новые интересные идеи.

 

Два дополнения:

• для отслеживания трендов и вдохновения помогают сервисы http://pttrns.com и http://mobile-patterns.com/, где выкладывают скриншоты новых более-менее известных приложений, разбитые по типам (экраны входа, списки и т.д.);
• пользоваться приложением как пользователь :) У нас в компании действует правило, что менеджер проекта минимум неделю пользуется продуктом по назначению. Например, когда мы делали клиент WebEffector.ru, по-настоящему, продвигали свой сайт touchin.ru. Это позволяет переосмыслить приложение в лучшую сторону.

И немного про нас. Мы разрабатываем проекты на заказ в итоге появляется третье звено — заказчик. Поэтому в Touch Instinct процесс работы выглядит так:

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

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

Конкретные примеры можно посмотреть у нас в портфолио (http://touchin.ru/portfolio/webeffector/process/).

Николай Демьянков
Руководитель департамента мобильных решений в AREALIDEA

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

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

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

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