На основе своих мастер-классов Джонатан Старк составил список важнейших принципов разработки мобильных интерфейсов и объяснил, как превратить концепт в законченный дизайн приложения.
Как бы вы его ни оценивали, мобильный рынок огромен и продолжает постоянно расти. Облачные вычисления, вездесущий широкополосный интернет и доступные цены на мобильные устройства уже начали трансформировать все стороны жизни нашего общества. Аналитики предсказывают, что к 2015 году мобильники обгонят ПК в роли основных инструментов для выхода в интернет.
Чтобы успевать за бурно растущим рынком, дизайнеры и разработчики, а также люди, которые работают с ними, должны думать о мобильной версии проекта как о своей главной цели, а не как о придуманном задним числом дополнении к ПК-ориентированному проекту.
Несмотря на то, что и компьютеры, и смартфоны часто сваливают в одну кучу, называя и то, и другое вычислительными устройствами, они сильно различаются по многим параметрам: большой размер экрана (ПК) vs маленький (мобильники), стабильное подключение к интернету vs подключение с перебоями, широкий канал vs узкий, работа от сети vs работа от аккумулятора и т.п. Исходя из этого списка кто-то может подумать, что мобильные устройства — это всего лишь слабые версии «настоящих» компьютеров. Но это будет ошибкой.
На самом деле всё наоборот: смартфоны во многих смыслах сильнее, чем ПК. Они крайне индивидуальные, всегда включены, всегда при нас, обычно онлайн и обычно к каждому такому устройству можно обратиться напрямую. Кроме того, у них стремительно развиваются датчики, которые уже сейчас могут определять местоположение, движение, акселерацию, ориентацию, расстояние до объектов, условия окружающей среды и так далее.
Если учесть, что между мобильниками и ПК есть множество различий, то вас не должно удивить, что разработка софта для них также сильно отличается. Основываясь на своих мастер-классах, я составил список из 10 принципов разработки мобильных интерфейсов, которые помогут людям, занимающимся дизайном и разработкой для ПК, открыть потенциал мобильных платформ.
В силу всё тех же различий между мобильными устройствами и ПК, до начала работы важно сформировать правильный способ мышления.
Когда речь заходит о контексте использования смартфона, многие люди представляют себе делового человека, быстрым шагом идущего по аэропорту с кейсом в одной руке и смартфоном — в другой. Конечно, это один из возможных сценариев, но далеко не единственный. Чтобы поставить себя на место пользователя, для начала мы должны осознать три основных мобильных контекста: Скучающий, Деловой и Заблудившийся.
Еще немного занятных данных из исследования пользовательского поведения, проведенного Google в прошлом году:
Разные приложения требуют разных подходов, дизайнерских решений и техник. Тем не менее, сама суть мобильных устройств с сенсорным экраном дает несколько базовых рекомендаций, т.к. ограничения физического мира всегда имеют значение.
В фейворитс.
Есть множество новых способов навигации для мобильных приложений (к примеру, сразу вспоминается радиальное меню в углу экрана, как в приложении «Path»). Но если вы собираетесь использовать одну из распространенных моделей, то следует выбрать самую целесообразную для вашего приложения:
Три перечисленных способа навигации, пожалуй, являются классическими для современных приложений. Любой четвертый — уже не стандартный. Он может быть очень красив и прекрасно решать вашу конкретную задачу, но минус его в том, что им нужно учиться пользоваться.
Очень важно научиться чувствовать моменты, когда можно использовать стандартные или "родные" средства для решения своей задачи. Для этого надо как минимум наизусть эти средства знать. iOS Human Interface Guidelines и Android Design — обязательны к изучению.
Нужен подрядчик для создания мобильного приложения?
Рейтинг разработчиков мобильных приложений – удобный инструмент для поиска нужного разработчика. В его основе – 3 локальных рейтинга по каждой из самых популярных платформ: iOS, Android, Windows Phone.
Набирать текст жутко неудобно даже на самых лучших устройствах, поэтому вы должны сделать все, что в ваших силах, чтобы облегчить жизнь пользователей. К примеру:
Отличная тема затронута. Большинство дизайнеров даже не знают о существовании разных наборов клавиатур, а разработчики и рады не вспоминать. А пользователь потом «ворочается» на интерфейсе, как принцесса на горошине, и не знает, в чем дело.
Одна из знаковых особенностей современных сенсорных интерфейсов — возможность использовать жесты. Как бы ни были они хороши, вам всё же стоит помнить о некоторых вещах:
Если вы читаете этот текст, то скорее всего являетесь продвинутым пользователем тач-интерфейсов. Признайтесь, даже вам некоторые жесты в приложениях казались далеко не очевидными. Средний пользователь может быть очень сообразительным, но все, что требует от него двух пальцев, вместо одного — уже слишком. О поглаживаниях и вырисовывании фигур на экране я даже не говорю. Внедрите самые прикольные из жестов, но продублируйте их старой доброй кнопкой в виде кнопки.
Кстати, с планшетами история обратная — самой популярной является горизонтальная ориентация.
Подписываюсь под каждым словом.
Когда пользователь возвращается к работе с вашим приложением, оно должно открыться на том месте, где пользователь остановился в прошлый раз. Это создаст иллюзию скорости работы и подкрепит общее ощущение обратной связи от приложения.
Если возможно, при первом запуске вашего приложения экран должен быть этаким его «бесконтентным» изображением. Любая деталь, которая выглядит интерактивной (вроде кнопок, ссылок, иконок, контента) станет причиной раздражения, поскольку приведет к ошибке взаимодействия.
Внимание: не поддавайтесь соблазну разместить информацию о продукте на экране запуска. Пользователи воспримут её как рекламу и откажутся от вашего приложения из-за того, что вы заставили их её посмотреть. Конечно, «рекламный» экран запуска пользователь будет лицезреть не дольше, чем пустой, но ощущение задержки запуска все равно возникнет.
Некоторые приложения ловко выводят скриншот последнего состояния приложения вместо экрана запуска. Так как пользователь не бросается мгновенно нажимать на кнопки, это решение использует задержку в реакции и создает ощущение, что приложение запустилось мгновенно. Хитро, но мне по душе решение, о котором говорит Джонатан — изображение интерфейса приложения без содержимого.
В дизайне иконки обычно выбирается один из двух путей:
Мобильные технологии открывают потрясающие возможности перед веб-дизайнерами и разработчиками, которые хотят переключиться на эту сферу. Конечно, придется кое-чему поучиться, но всё же большая часть опыта профессионального веб-проектировщика, его навыки и инструменты, без проблем перейдут на мобильный формат. Стоит признать, что количество и скорость перемен в мире мобильных устройств иногда приводит в замешательство, но...знаете,по крайней мере, никогда не скучно.
Пожалуйста, держите в голове эти 10 принципов разработки мобильных интерфейсов, но не забивайте ими голову — всегда должно оставаться место для инноваций. Несмотря на размер экранов, пространство для этого широкое и есть где применить серое вещество.
Для тех, кто изучает английский язык, предлагаем лексический разбор статьи в блоге Nimax.
Оригинал статьи: http://www.netmagazine.com/features/10-principles-mobile-interface-design
Рецензент: Сергей Швецов (Mail.Ru, проектировщик интерфейсов).
Статья оставила после себя двойственное ощущение. С одной стороны: да, смартфон — это не компьютер, с другой: различия не такие уж и существенные. Согласен с тем, что современный подход в построении эффективного бизнеса начинается с разработки чего-либо на мобильных платформах, а уже потом — как довесок, прорабатывается веб-часть. Практика показывает: то, что спроектировано и внедрено для мобильных устройств затем хорошо «портируется» на веб. Поэтому даже если ваш бизнес на первых порах не подразумевает интенсивную экспансию на моб. платформы (да, такое иногда бывает), всегда полезно начать проектирование именно с них, а затем сделать веб-часть.
Но фокусироваться на самой теме: «отличия взаимодействия «пользователь-смартфон» от «пользователь-компьютер» и детально разжевывать ее я бы не стал. Фокусироваться нужно и там и там на решении конкретной задачи или проблемы бизнеса при помощи завоевания внимания пользователя.
На мой взгляд, тут не «принимать нужно во внимание пользователя», а ставить пользователя во главу всего процесса, помня о том, что чем шире и разношерстнее ЦА, тем сложнее сделать работающий продукт. Данный пункт должен быть первым по приоритету и обязательным для всех приложений и сайтов.
Для статьи также хорошо подошел бы заголовок «Здравый смысл».
Статья получилась достаточно большая, хотя описывает элементарные вещи. Видимо, для тех, кто в танке.
Вроде бы простые вещи, но и про них очень любят забывать дизайнеры, чрезмерно увлекаясь прорисовкой кнопки, радуясь, как здорово получилось сделать переход между экранами. На деле очень часто так и происходит, и не из плохих побуждений — всегда есть желание додумать и проработать появившуюся в процессе работы идею. Ставить себя на место — является не менее важной частью дизайна.
В любом случае использование даже этих советов не означает получение отличного результата. Если буквы писать неразборчиво, то и смысл алфавита пропадает. Слишком тонкая грань в дизайне между «скучно» и «вычурно». Другими словами — плохая реализация может угробить идею в прямом смысле слова.
Не надо воздвигать заборы и вгонять себя в рамки принципами, правилами, экспертными комментариями. Для каждой отдельно взятой задачи существует свое элегантное решение. И не исключено, что это решение может идти вразрез всем принципам. Только так можно сделать что-то действительно стоящее.
Большие пальцы, крюки в обучении, невидимость и модальные окна. Добро пожаловать в Хогвартс, юный первокурсник. Да, «мобильные вычисления открывают потрясающие возможности перед веб-дизайнерами и разработчиками, которые хотят переключиться на эту сферу» — но веб-дизайнеру на первых порах будет несладко. Готовься, юный падаван. Сила ждет тебя.
Для тех, кто будет учиться — приз: возможность не откатываться назад и оставаться на месте.
И да — учите английский. Без него все будет плохо: «there`s no future».
Вот такие жесты сегодня.
С ростом рынка мобильных устройств и мобильных приложений всё больше и больше стало появляться статей, в которых авторы пытаются описать, как следует проектировать интерфейс для приложения, и в чём его особенность в отличие от интерфейса сайта.
Данная статья не стала исключением: она содержит в себе определенный набор советов-принципов относительно того, что нужно учитывать и какие решения являются правильными при разработке интерфейса для мобильного приложения. Вообще говоря, статья не содержит каких-то новых фактов, но при этом затрагивает все важные аспекты проектирования. Никогда не лишне вспомнить о них.
Прежде всего, хочется отметить первые два принципа, представляющие собой общую концепцию разработки любого приложения:
Данные постулаты являются достаточно стандартными при проектировании любого интерфейса (не только для мобильных приложений), но нередко забываются, например, в погоне за функционалом.
Автор очень верно подмечает важность первого запуска приложения. Сам, как пользователь не раз удалял приложение просто потому, что в нём было сложно разобраться за короткий промежуток времени. Да и зачем, когда имеется большое число аналогов, которые может и менее функциональны, но обладают более простым и понятным интерфейсом.
Ради интереса решил посмотреть оригинальную версию статьи. Оказалось, что переведённый вариант содержит небольшие огрехи, но всё равно выполнен на должном уровне, за что отдельное спасибо переводчику.
У меня есть три пункта по поводу данного материала:
Отличная статья, которая указывает на основные принципы, которые следует держать в голове при разработке мобильных приложений.
Хочу добавить, что при поиске удачных техник и вдохновения для разработки дизайна — очень полезно бывает обратиться к другим мобильным платформам (например, к MeeGo или Windows Phone), зачастую это позволяет по-новому взглянуть на проблемные места или получить свежие идеи для интерфейса.
Также, при работе над новым приложением, я часто просматриваю десятки дизайнерских концептов, выполненных как профессионалами, так и любителями — это помогает понять проблемы, которые волнуют пользователей и по другому взглянуть на обыденные вещи в интерфейсе или получить идеи нового функционала.
Проведите конкурс среди участников CMS Magazine
Узнайте цены и сроки уже завтра. Это бесплатно и займет ≈5 минут.
Креативный директор redmadrobot
Оу-оу, поаккуратней с обрезанием функционала. Порой разработчики так увлекаются, что приходится закрывать приложение и открывать браузер, чтобы воспользоваться сервисом. Здравый смысл поможет. В остальном не могу не согласиться: уникальное и милое приложение, которое отвечает всем требованием пользователя — то, что доктор прописал.