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

Дата публикации: 13.06.2012  

Автор: Александр Киров,
Mail.Ru Group (Ведущий мобильный дизайнер)

Александр Киров, дизайнер мобильных интерфейсов в 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