Мобильный дизайн: аксиомы
Серия постов "Мобильный дизайн" - это не учебник молодых специалистов, а соображения, которые возникли в моей голове в результате работы в этой области. Здесь я помещаю свои мысли, рекомендации и замечания по разработке и дизайну мобильных приложений. Большинство из этих соображений легли в основу процессов компании IDC Intech и студии Litvinsky.
Как и в любой красивой математической теории, перед ее разработкой, формулируются аксиомы, на которых будущая теория будет базироваться.
Каждый, кто сталкивался с разработкой мобильных приложений и мобильного дизайна, наверняка, согласится, что это яблочные истины этой отрасли.
Аксиома 1: всегда формулируйте цели и задачи приложения и дизайна. В универе, в школе во всех отчетах нас заставляли писать Цель, Задачи. В курсовых и дипломных проектах на это смотрели в первую очередь. Как бы мы не относились к твердолобым преподавателям, это штука особенно важная, даже самая важная, я бы сказал. Ни одна разработка не начинается без формулирования ее целей и задач. Даже список функций и требования - это вторично. Если сформулирована цель - мы знаем куда идти, знаем, когда мы дошли. В нормальной студии проект заканчивает не тогда, когда заказчик перечислил деньги и подписал акт выполненных работ, а когда достигнута цель разрабатываемого приложения или дизайна. Целями и задачами необходимо руководствоваться в случае, когда какое-то требование или функция не описаны в ТЗ или сформулированы нечетко. В таких случаях решение командой разработчиков принимается исходя из целей и задач приложения.
Пример:
Дизайнер (Д): - Куда мне вставлять этот сраный блок с отзывами пользователей? В диздоке и концепции ни полслова об этом вообще нет!
Менеджер проекта (МП): - А хрен его знает, у заказчика сейчас ночь, а сдавать уже сегодня. Ща гляну ТЗ.
(смотрит)
МП: - Епт! Тут в Задачах написано: приложение должно заинтересовывать новых пользователей. Значит повыше суем! Только модерацию добавляем.
Дизайнер: - Ок, и поярче сделаю.
Аксиома 2: мало и по делу. Не забываем, что мобильное приложение будет, как ни странно, использоваться на мобильном девайсе, главная особенность которого - маленький экран. Об этом надо помнить, когда хочешь засунуть туда очередную кнопочку или "вот такую обалденную хреновинку". Элементов на экране должно быть минимум, только те, без которых здесь не обойтись. Все, от чего можно избавиться, подлежит воздействию кнопки Delete. Казалось бы - очевидное замечание. А вот нифига. Сегодня получил 3 портфолио дизайнеров мобильных интерфейсов, с опытом, с проектами важными. И у всех такая хромая нога. Вот примеры:
Приложение для Андроид. Кнопка Закрыть (крестик в левом верхнем углу) выполняет функцию возврата назад. Это лишняя кнопка, т.к. у девайсов на Андроиде есть аппаратная кнопка "назад".
Как правильно написал автор - "для добавления элементов воспольнузуйтесь меню Заказать". Кнопке "Оформить заказ" здесь делать нефиг, пока нечего оформлять.
Приложение для iOS. Явно переизбыток сердечек, да и к тому сбивает пользователя. Достаточно оставить одну кнопку. Если пост засердечен - делаем кнопку нажатой.
Любите и используйте с умом каждый миллиметр пространства на экране.
Аксиома 3: считайте нажатия. Эта аксиома дополняет предыдущую. Гениальность мобильного дизайнера и проектировщика состоит в том, чтобы разместить минимальное количество элементов на экране, остальные снести на другие экраны и при этом обеспечить минимальное количество переходов. Без оптимизаторских навыков здесь делать нефиг. Количество нажатий должно определяться не важность функций, а частотой ее использования. Посылайте нахрен заказчиков, маркетологов и прочих, кто хочет в первую очередь обеспечить быстрый доступ к форме заказа или рекламному тексту. Пользователи не лазают туда при каждом включении приложения. Количество нажатий должно ранжироваться от самой часто вызываемой функции до той, до которой доползают только герои. Частота вызова функций определяется из целей приложения, а так же непосредственно при опытном использовании.
Читаем цель приложения: приложения для поиска и заказа еды. Я в нем хочу найти еду, а мне сначала суют список кафе, ресторанов и служб доставок. Да мне насрать, кто мне ее привезет, мне важна хавка, ее стоимость и время доставки. Здесь должна быть только форма поиска, возможность посмотреть меню и минимальная форма заказа, доступная максимум по третьему клику.
Наверняка, ушлый маркетолог или босс решил, что реклама важнее, чем нервы пользователя.
Аксиома 4: дизайн принимается только на устройстве. Результат работы дизайнера мобильных интерфейсов - это изображение на устройстве. Все остальное - .png-файлы, скрины экрана, красиво сделанные концепции в pdf с экраном помещенным в клипарт айфона - это все рабочий материал, полуфабрикат, недоделки. Если вы не видите, как дизайн выглядит на устройстве, может ли ваш толстый заказчик попасть пальцем по кнопочке лайка, виден ли там текст для слепого менеджера, то вы не можете оценить этот дизайн. Если вы нарисовали иконку для мобильного приложения, то это просто красивая иллюстрация, иконкой она становится, когда помещена на рабочий стол сматрфона.
Аксиома 5: не делать бессмысленных мобильных приложений. Пожалуй, самая важная аксиома. Все понимают, зачем нужен сайт и зачем нужна мобильная версия сайта. А вот нафиг кому-то упало именно мобильное приложение? Не нужно делать мобильное приложение, если вы не можете привести достаточно аргументов в пользу того, что без него не обойтись, что оно даст эффект и пользу большую, чем сайт. Мобильное приложение - это не сайт, который нужен всем. Смартфоны прекрасно просматривают веб-сайты и их мобильные версии. Мобильное приложение нужно далеко не всем, поэтому важно, чтобы оно учитывало именно сам принцип мобильного телефона - вы можете его таскать повсюду, на нем есть деньги, камера, микрофон и динамики. От этих принципов и нужно плясать, когда обосновываете заказчику необходимость создания для него прилаги.
Например, группа Ария зря потратилась на свое мобильное приложение: https://itunes.apple.com/us/app/gruppa-aria/id552362869?mt=8. Все, что в нем есть, можно легко найти на сайте группы и не тратить место в телефоне на его загрузку. Лучше бы заплатили 500 баксов фрилансеру за создание мобильной версии сайта.
Бесполезное мобильное приложение для группы Ария
А вот если в эту прилагу вставить push-оповещения о новостях, комменты пользователей, встроенный плеер с кучей бесплатных песен группы, эксклюзивные материлы, сделанные только для мобилок - это уже не бесполезная хрень, а мобильный информер о жизни сообщества фанатов Арии.
Вроде все написал. Подробнее будет далее.
Как и в любой красивой математической теории, перед ее разработкой, формулируются аксиомы, на которых будущая теория будет базироваться.
Каждый, кто сталкивался с разработкой мобильных приложений и мобильного дизайна, наверняка, согласится, что это яблочные истины этой отрасли.
Аксиома 1: всегда формулируйте цели и задачи приложения и дизайна. В универе, в школе во всех отчетах нас заставляли писать Цель, Задачи. В курсовых и дипломных проектах на это смотрели в первую очередь. Как бы мы не относились к твердолобым преподавателям, это штука особенно важная, даже самая важная, я бы сказал. Ни одна разработка не начинается без формулирования ее целей и задач. Даже список функций и требования - это вторично. Если сформулирована цель - мы знаем куда идти, знаем, когда мы дошли. В нормальной студии проект заканчивает не тогда, когда заказчик перечислил деньги и подписал акт выполненных работ, а когда достигнута цель разрабатываемого приложения или дизайна. Целями и задачами необходимо руководствоваться в случае, когда какое-то требование или функция не описаны в ТЗ или сформулированы нечетко. В таких случаях решение командой разработчиков принимается исходя из целей и задач приложения.
Пример:
Дизайнер (Д): - Куда мне вставлять этот сраный блок с отзывами пользователей? В диздоке и концепции ни полслова об этом вообще нет!
Менеджер проекта (МП): - А хрен его знает, у заказчика сейчас ночь, а сдавать уже сегодня. Ща гляну ТЗ.
(смотрит)
МП: - Епт! Тут в Задачах написано: приложение должно заинтересовывать новых пользователей. Значит повыше суем! Только модерацию добавляем.
Дизайнер: - Ок, и поярче сделаю.
Аксиома 2: мало и по делу. Не забываем, что мобильное приложение будет, как ни странно, использоваться на мобильном девайсе, главная особенность которого - маленький экран. Об этом надо помнить, когда хочешь засунуть туда очередную кнопочку или "вот такую обалденную хреновинку". Элементов на экране должно быть минимум, только те, без которых здесь не обойтись. Все, от чего можно избавиться, подлежит воздействию кнопки Delete. Казалось бы - очевидное замечание. А вот нифига. Сегодня получил 3 портфолио дизайнеров мобильных интерфейсов, с опытом, с проектами важными. И у всех такая хромая нога. Вот примеры:
Приложение для Андроид. Кнопка Закрыть (крестик в левом верхнем углу) выполняет функцию возврата назад. Это лишняя кнопка, т.к. у девайсов на Андроиде есть аппаратная кнопка "назад".
Как правильно написал автор - "для добавления элементов воспольнузуйтесь меню Заказать". Кнопке "Оформить заказ" здесь делать нефиг, пока нечего оформлять.
Приложение для iOS. Явно переизбыток сердечек, да и к тому сбивает пользователя. Достаточно оставить одну кнопку. Если пост засердечен - делаем кнопку нажатой.
Любите и используйте с умом каждый миллиметр пространства на экране.
Аксиома 3: считайте нажатия. Эта аксиома дополняет предыдущую. Гениальность мобильного дизайнера и проектировщика состоит в том, чтобы разместить минимальное количество элементов на экране, остальные снести на другие экраны и при этом обеспечить минимальное количество переходов. Без оптимизаторских навыков здесь делать нефиг. Количество нажатий должно определяться не важность функций, а частотой ее использования. Посылайте нахрен заказчиков, маркетологов и прочих, кто хочет в первую очередь обеспечить быстрый доступ к форме заказа или рекламному тексту. Пользователи не лазают туда при каждом включении приложения. Количество нажатий должно ранжироваться от самой часто вызываемой функции до той, до которой доползают только герои. Частота вызова функций определяется из целей приложения, а так же непосредственно при опытном использовании.
Читаем цель приложения: приложения для поиска и заказа еды. Я в нем хочу найти еду, а мне сначала суют список кафе, ресторанов и служб доставок. Да мне насрать, кто мне ее привезет, мне важна хавка, ее стоимость и время доставки. Здесь должна быть только форма поиска, возможность посмотреть меню и минимальная форма заказа, доступная максимум по третьему клику.
Наверняка, ушлый маркетолог или босс решил, что реклама важнее, чем нервы пользователя.
Аксиома 4: дизайн принимается только на устройстве. Результат работы дизайнера мобильных интерфейсов - это изображение на устройстве. Все остальное - .png-файлы, скрины экрана, красиво сделанные концепции в pdf с экраном помещенным в клипарт айфона - это все рабочий материал, полуфабрикат, недоделки. Если вы не видите, как дизайн выглядит на устройстве, может ли ваш толстый заказчик попасть пальцем по кнопочке лайка, виден ли там текст для слепого менеджера, то вы не можете оценить этот дизайн. Если вы нарисовали иконку для мобильного приложения, то это просто красивая иллюстрация, иконкой она становится, когда помещена на рабочий стол сматрфона.
Аксиома 5: не делать бессмысленных мобильных приложений. Пожалуй, самая важная аксиома. Все понимают, зачем нужен сайт и зачем нужна мобильная версия сайта. А вот нафиг кому-то упало именно мобильное приложение? Не нужно делать мобильное приложение, если вы не можете привести достаточно аргументов в пользу того, что без него не обойтись, что оно даст эффект и пользу большую, чем сайт. Мобильное приложение - это не сайт, который нужен всем. Смартфоны прекрасно просматривают веб-сайты и их мобильные версии. Мобильное приложение нужно далеко не всем, поэтому важно, чтобы оно учитывало именно сам принцип мобильного телефона - вы можете его таскать повсюду, на нем есть деньги, камера, микрофон и динамики. От этих принципов и нужно плясать, когда обосновываете заказчику необходимость создания для него прилаги.
Например, группа Ария зря потратилась на свое мобильное приложение: https://itunes.apple.com/us/app/gruppa-aria/id552362869?mt=8. Все, что в нем есть, можно легко найти на сайте группы и не тратить место в телефоне на его загрузку. Лучше бы заплатили 500 баксов фрилансеру за создание мобильной версии сайта.
Бесполезное мобильное приложение для группы Ария
А вот если в эту прилагу вставить push-оповещения о новостях, комменты пользователей, встроенный плеер с кучей бесплатных песен группы, эксклюзивные материлы, сделанные только для мобилок - это уже не бесполезная хрень, а мобильный информер о жизни сообщества фанатов Арии.
Вроде все написал. Подробнее будет далее.