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

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

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

Различная мобильность

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

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

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

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

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

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

— Будьте индивидуальны! Определите, что делает ваше приложение отличным от других и совершенствуйте его. В мире мобильных приложений полно «рыбных мест». Если в вашем приложении нет ничего особенного, то, стало быть, зачем кому-то забирать его?

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

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

2. Необходимость в мобильном контенте

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

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

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

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

3. Глобальные руководящие принципы

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

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

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

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

Содержание: Революция сенсорных интерфейсов позволяет напрямую взаимодействовать с нашим контентом. Это устраняет абстракции (например, мышь и touch-pad). Интуитивное взаимодействие с сенсорным интерфейсом пользователя должно быть обеспечено за счет минимизации различных сопутствующих элементов таких, как кнопки, панели вкладок, подсказки и т.д.). Делать это следует везде, где оно только возможно, а ваш контент должен располагаться по центру и спереди.
Так выглядит список запланированных дел в to-do приложении для iOS
Управление: Если вы хотите добавить элементы управления, то попробуйте переместить их в нижнюю часть экрана (другими словами, под контентом). Вспомните калькуляторы, весы или даже компьютер, где элементы управления находятся под дисплеем. Если бы дисплея не было, то мы не были бы в состоянии видеть, что происходит с содержанием, в то время как использовали элементы управления. Сравните рассмотрение подобного объективного дизайна с традиционным программным обеспечением, где навигация и панели меню практически всегда располагаются наверху. Это имело смысл в случаях, когда можно было использовать мышь как указатель.

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

4. Модели навигации

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

5. Ввод данных пользователем

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

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

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

6. Жесты

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

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

Две руки: Мультисенсорные жесты требуют действия двумя руками. Это можно наблюдать в родном приложении «Карты» на iOS, которое использует открытый жест для уменьшения масштаба.

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

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

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

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

8. Связи

Обратная связь: Важно обеспечить мгновенную обратную связь при каждом взаимодействии. Если этого не сделать, то пользователь задастся вопросом: «Не зависло ли приложение?» Обратная связь может быть тактильной (как вибрация на Android) или визуальной. Если пользователь запросил действие, которое займет долгое время, то важно отобразить счетчик или индикатор для того, чтобы уведомить его, что приложение получило запрос и работает над ним.

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

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

9. Запуск

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

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

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

Если новый пользователь запутается или будет разочарован при попытке познакомиться с вашим приложением, то интерес к нему достаточно быстро сойдет на нет. Если ваше приложение обеспечивает комплексную функциональность, то вы можете включить «Советы и рекомендации» или, возможно, несколько экранов. Отметим, что это не является заменой хорошего дизайна. Если вы решите добавить большой текст в качестве подсказки, это может означать, что пользовательский интерфейс требует доработки.
Оригинал статьи «The 10 principles of mobile interface design» с сайта www.netmagazine.com. Автор — Джонатан Старк (Jonathan Stark).

Представлен Nokia Lumia 920 на платформе Windows Phone 8, с 4,5” дисплеем, беспроводной зарядкой и камерой PureView
Продано свыше 20 млн. смартфонов Samsung Galaxy S III
Оформление подписки
Оформить подписку на журнал InfoCity вы можете заполнив приведенную
ниже форму. Стоимость одного выпуска — 2 маната.
Ваше имя
Адрес доставки журнала и номер телефона для контактов
Число месяцев подписки
Благодарим вас за подписку!