Тодд Сигель, дизайнер и предприниматель, написал на Proto.io статью о трендах мобильного дизайна. Предлагаем вам ее русский перевод.
От Uber до Vine — мы видим, как формируются мобильные тренды в этой половине десятилетия. Многие факторы влияют на то, как выглядят приложения: от социальных трендов, вроде распределенной экономики, до изменений в технологиях — в этом году мы можем наблюдать, как гигантские экраны телефонов были дополнены крошечными носимыми устройствами.
Чем больше людей встраивает мобильные технологии в свою повседневную жизнь, тем больше времени они посвящают мыслям о своих приложениях. Проверяете рабочую почту? Бронируете номер в отеле? Заказываете доставку маргариты без глютена? Приложения, которые выделяются из всех, например Airbnb и GrubHub, минимизируют количество размышлений в работе с ними, так что пользователи могут быть более многозадачными и могут делать все почти не думая о том, как добраться до нужной опции или экрана. Чем более многозадачны пользователи, тем больше спрос на дизайн мобильных приложений, который соответствует их нуждам, дает то, что нужно тогда, когда они этого хотят.
С учетом всего этого следующие тренды дизайна мобильных приложений дают пользователям именно то, чего они хотят сейчас:
1. Большие экраны телефонов
Нравится вам это или нет, взлет фаблетов привел к увеличению полезной площади экрана. Что это значит для мобильных разработчиков и дизайнеров?
Двигаясь дальше очевидного «Сделайте дизайн больше», важно учитывать, как будут пользователи держать устройство во время работы. Это означает, что нужно сделать наиболее важные элементы навигации легкодоступными для большого пальца, который, возможно, не дотянется до верхнего противоположного угла. Легко, правда? Просто расположите ваши интерактивные элементы в нижнем правом углу экрана. Правда, это не очень легко, если учесть, что около 10% пользователей — левши.
Вы можете приучить ваших левшей к хватке двумя руками — если вспомнить, насколько большими становятся мобильные девайсы, это будет самое частое положение рук в любом случае — или, если вы правда хотите добиться ощущения удобства и доступности (а вы хотите), вы сделаете так, чтобы все интерактивные элементы были достаточно крупными для того, чтобы их можно было достать с любой стороны устройства. В конце концов, у вас все больше полезной площади экрана для работы. Еще одна идея — просто использовать настраивающийся интерфейс с опцией зеркалирования UI.
Но вне зависимости от того, правши ваши пользователи или левши, важно подойти к дизайну мобильного приложения с пониманием, что конкретные решения в дизайне могут привести не только к менее удобным и интуитивным интерфейсам, но и к усталости и спазмам рук. Это очень важная деталь при тестировании и QA.
Конечно, с большими экранами очень полезно помнить, что…
2. Свайп — это новый тэп
Когда появились первые мобильные устройства с тачскринами, дизайнерам и разработчикам пришлось освоить программирование совершенно других физических принципов взаимодействия. Щипок для зума был прекрасен, когда у нас появились первые iPhone в 2007 году, но обязательное использование зума для чтения контента — это плохой ход в дизайне мобильного приложения. Мы все встречали кнопку, которая слишком мала для нажатия, если у вас не редкое сочетание крошечных пальцев с мелкой моторикой пианиста.
Свайп — куда более естественный способ использования мобильных устройств, особенно если у вас свободна только одна рука. Хотите доказательств? Держите ладонь так, как будто в ней лежит телефон. Теперь попробуйте нажать на невидимый экран. Запомните свои ощущения. Теперь сделайте свайп. И что же удобнее?
Самый очевидный пример свайпа в приложениях — Tinder, который сводит сложную природу свиданий и отказов к двум простым опциям: свайп направо и свайп налево. За время, меньшее, чем нужно для просмотра трейлера ром-кома, вы шлете сигналы пулу кавалеров, и все одним большим пальцем. Tinder, кажется, схватил суть, что доказывается миллиардом пользователей.
3.Носимые устройства начинают влиять на дизайн мобильных приложений
Обратная сторона повального помешательства на больших экранах фаблетов — они все больше сопровождаются маленькими экранами на запястье. International Data Corporation предсказывает, что в 2015 году поставщики продадут 45.7 миллионов носимых девайсов, включая те, что носятся на запястье (около 40 миллионов).
То, что началось, как рост популярности фитнес-устройств, теперь распространилось на большую территорию с выпуском Apple Watch и Android Wear. Носимые устройства — это не просто приукрашенные шагомеры с трекерами сна и пульса — это надежные умные устройства, которые могут сказать вам, сколько займет дорога до работы, какая завтра погода или напомнят вам включить чайник к приходу вашей тети. Как это все повлияет на работу дизайнеров мобильных приложений?
Это направление только начинает развиваться, поэтому Apple и Android дают большое количество руководств для своих продуктов. Как производители устройств, похожих на наручные часы, они подчеркивают важность быстрого взгляда. В отличие от телефонов и планшетов, на которые пользователи смотрят довольно долго, приложения для носимых устройств должны давать достаточно контента на правильной скорости, чтобы пользователь мог ознакомиться с ней, быстро взглянув, может быть, даже уголком глаза. Это означает, что типографика, контрастность цвета и контекст (где находится пользователь? какая информация ему нужна прямо сейчас?) становятся особенно важными при разработке и дизайне приложений.
И потому, что это относительно новая технология, сейчас важнее, чем когда-либо уделить внимание фидбеку пользователей и работать над дальнейшими улучшениям. Пока Apple и Android делают свои предположения, пользователи по-настоящему создают будущее дизайна мобильных приложений для носимых устройств.
4. Слои в разметке
Существует ли середина в вечном споре между плоским и скевоморфным дизайном? На уровне эстетики скевоморфизм кажется критикам банальной аппроприацией реальных текстур в диджитал, такой же безвкусной, как очевидно искусственная деревянная панель в салоне вашей машины. Но плоский дизайн, несмотря на признание в этой декаде цифровой эстетики, не без своих проблем. После удаления всех текстур из дизайна мобильных приложений будет сложно сказать, какие элементы интерактивны, если вы вообще сможете распознать границы между разными элементами дизайна.
Компромиссом может стать плоский дизайн слоями или, как говорят в Google, «материальный дизайн». Эта эстетика во многом опирается на плоский дизайн с некоторыми заимствованиями из скевоморфизма. Как в плоском дизайне, элементы геометричны, это блоки цветов, а не обрезки натуральных текстур или очевидный блеск и сияние. Но, как в скевоморфизме, в слоеном дизайне есть метафоры с естественным миром — то, как двигаются и взаимодействуют объекты. Это значит, что тени и другие световые эффекты снова с нами.
Результатом смешения плоского дизайна с физикой становится то, что у пользователя появляется более интуитивное понимание работы элементов экрана. У объектов есть вес и инерция, когда вы их двигаете. Кажется, что у них есть вес, когда вы двигаете их по экрану, а также тени на элементах внизу. Таким образом юзабилити скевоморфизма приходит в эстетику плоского дизайна, чтобы создать элегантный пользовательский опыт.
5. Больше движения
У вашего телефона вычислительная мощь больше, чем у NASA, когда они послали человека на Луну, больше, чем у суперкомпьютера Deep Blue, который выиграл Гарри Каспарова, чемпиона мира по шахматам в 1997. И он становится все умнее. Не только наши девайсы, становящиеся все более мощными компьютерами, но и 3G, проложивший путь четырем стандартам 4G, каждый из которых борется с другими в скорости и мощи, дают вам больше свободы для анимации дизайна мобильных приложений.
Движения дают намного больше плюсов дизайну мобильных приложений. Они могут привлечь внимание к определенным элементам, привести пользователя к нужному действию и просто дать более классный и удивительный опыт пользователю. Смартфоны сейчас достаточно продвинуты, а сеть достаточно сильна для того, чтобы использовать анимацию HTML5 или параллакс , который уже используются на десктопах. С меньшими ограничениями на трафик и мощь, мы увидим в этом году намного больше движений в мобильном дизайне, а в дальнейшем это будет только расти, так как телефоны становятся умнее.
6. Простые, мягкие цветовые схемы
Каждый год выбирается своя предпочтительная палитра, и сейчас мы сосредоточились на очень простых цветовых схемах, которые увеличивают мягкий контраст. Это естественное следствие общего плоского минимализма дизайна мобильных приложений, но оно также отражает и общие цветовые тренды (цветовая палитра 2015 от Pantone описывает «прохладные и мягкие цвета с еле уловимыми теплыми тонами»). Попробуйте раскладку с разными тенями одного цвета, белыми шрифтами и контрастными элементами. Или попробуйте использовать только две или три прохладных, приглушенных тени.
Результатом этой простоты в дизайне мобильных приложений станет более цельный опыт, потому что резкие цвета требуют больше внимания глаза. Смотреть на излучающий свет экран — уже вредно для глаз, но приглушенные цвета и убранный блеск (опять же, плюс плоского дизайна) сделают дизайн мобильного приложения более гладким и приятным.
7. Типографика улучшается
Еще совсем недавно мобильная типографика была ограничена веб-безопасными шрифтами, читаемыми при низком разрешении экрана. За последние два года и iOS, и Android оптимизировали свои операционные системы для более быстрых, масштабируемых и читаемых шрифтов. Еще один эффект больших экранов и технологических инноваций (спасибо, TypeKit) — использование типографики для добавления красоты и экспрессии в дизайн мобильных приложений. В паре ли с трендовым большим изображением на фоне или негативным пространством, вы можете заставить саму гарнитуру говорить и сделать мощное сообщение в минималистичном ключе.
8. Встроенное размытие
Еще один тренд, который добавляет юзабилити прозрачным приложениям — размытие фона. Мобильные приложения, которые живут поверх пользовательского фона, могут дать пользователю чистый, цельный опыт, но иногда они могут вызвать проблемы с юзабилити.
В зависимости от фона, который выбирают пользователи для своих устройств, а также количества иконок или виджетов, недостаток непрозрачности может сделать ваше приложение плохо читаемым. Использование Гауссовского блюра в приложении сделает его более читабельным и легким для восприятия, сохранив ощущение кастомизации фона.
9. Инновации в доступности дизайна мобильных приложений
В качестве бонуса, сегодняшние тренды дизайна — намного более доступны. Более простые раскладки с большими элементами и шрифтами требуют меньшего визуального процессинга, а макро жесты (свайп) по отношению к более жестким к контролю движения (щипок и тэп), доступнее для людей с ограниченными возможностями. Поскольку TypeKit позволяет нам делать больше живого текста в дизайне мобильных приложений без жертв в качестве типографики, он также делает приложения более доступными для людей с нарушениями зрения, которые используют читающие машины. Даже возможности больших девайсов и фаблетов делают дизайн мобильных приложений более доступными для более широкой аудитории.
Помните, что построение юзабилити в вашем приложении означает критическое обдумывание того, насколько доступен ваш продукт. Кастомизируется ли раскладка для кого-то, кому нужен текст побольше? Встроили ли вы тактильный фидбек для тех, кому нужен отклик от интерактивных элементов? Во время работы над дизайном может оказаться полезным использование чеклиста доступности. Accessibility Project предлагает дизайнерам и разработчикам способы сделать их продукты доступными и используемыми более широкой аудиторией.
10. Умное прототипирование
Каждое приложение, которое мы используем, когда-то было прототипом. Многие доказательства жизнеспособности концепта начинались как простой макет, распечатанный на нескольких листах бумаги или сохраненный в PDF. Поскольку дизайн мобильных приложений становится все более сложным, недостаточно показать несколько статических фреймов и заставить клиента или разработчика представить движение, которое вы имеете в виду. Если ваше приложение сильно зависит от анимации для направления пользователя или привлечения визуального интереса, ваш клиент не увидит того, что делает приложение интересным и удобным. Плюс, плоские макеты не содержат сами по себе много «вау» факторов.
Тем не менее, программирование доказательства концепта становится само по себе головной болью, поскольку разработчики тратят время на элементы, которые могут даже не попасть в финальный вариант. Для уменьшения потраченных зря усилий дизайнерам нужно либо очень ясно транслировать разработчикам свои намерения, либо создавать самим создавать прототип, который отражает их видение.
К счастью, с существующими сегодня решениями для прототипирования, дизайнеры могут делать это сами. С минимальным или даже без знания кода дизайнер может создать концепт, который показывает, как пользователь будет взаимодействовать с приложением, а также все критические для дизайна мобильного приложения анимации и движения. Это не просто приведет к прототипам, которые привлекут потенциального клиента или потребителя, но также и упростит процесс передачи приложения в разработку. Поскольку вы объяснили все детали того, как приложение должно двигаться и общаться с пользователем, все, что останется разработчику сделать — создать продукт, а не кодить бесконечными циклами перепроверки дизайна.