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

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

1. Мобильное мышление

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

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

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

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

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

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

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

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

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

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

3. Глобальные правила

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

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

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

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

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

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

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

Прокрутка. Коротко и ясно: избегайте прокрутки в своих приложениях, если этого не требуется.

4. Навигация по приложению.

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

Вот парочка распространенных моделей:

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

Список. Подробный список (перечень) всего того, что содержит в себе конкретное приложение. Примером может послужить стандартное приложение «Настройки».

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

5. Ввод информации

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

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

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

6. Жесты

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

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

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

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

7. Ориентация

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

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

8. Связь «пользователь — приложение».

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

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

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

9. Запуск приложения.

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

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

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

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

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

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

По материалам netmagazine.com