Connect with us

Дизайн и прототипирование

Мобильные UX-паттерны, которые вы используете неправильно

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

Леонид Боголюбов

Опубликовано

/

     
     

Вы читаете перевод статьи “Misused mobile UX patterns”. Над переводом работали: Ольга Скулкина и Ринат Шайхутдинов. Они ведут блог в Medium “Советы по проектированию интерфейсов” и группу в Facebook UX Journal.

Если вы опытный дизайнер, то наверняка согласитесь: в UI-дизайне вдохновляться работами других — это не воровство. Это исследование передового опыта. Это использование дизайн-паттернов. Это следование руководствам. Это забота о пользователе: мы используем знакомые паттерны, чтобы создавать удобные интерфейсы.

Некоторые скажут, что если следовать руководствам и повторять за другими, пропадет фактор творчества, и все приложения в конце концов будут выглядеть одинаково. С точки зрения UX я вижу другую проблему. Когда привыкаешь подражать общепринятым паттернам, начинаешь верить, что Google / Facebook / Instagram / [ваше любимое приложение] всегда правы, в них такие же дизайн-цели как у нас, и нет смысла в них сомневаться. В этой статье я приведу несколько паттернов, которые считаются (или раньше считались) образцовыми, но на деле оказываются не столь прекрасными.

1. Спрятанная навигация

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

Выдвигающееся боковое меню — это гибкий и удобный вариант

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

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

Изменение навигации YouTube с аннотациями Люка Роблевски

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

2. Иконки, иконки повсюду

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

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

Или, предположим, вы никогда раньше не пользовались переводчиком Google. Какую функциональность вы ожидаете под такой пиктограммой?

Это очень распространенная ошибка — предполагать, что пользователи знакомы с вашими абстрактными пиктограммами или хотят тратить время на их изучение.

Загадочная панель на Bloom.fm

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

Подсказка к иконке в приложении Swarm

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

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

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

Навигация в Pixelmator

Для базовой функциональность можно использовать иконки, но сложные функции нужно пояснять текстовыми лейблами. (И если вы используете иконки, всегда проверяйте их на юзабилити-тестах).

3. Навигация на основе жестов

Когда в 2007 году компания Apple представила рынку iPhone, мультитач-технология получила широкое распространение и пользователи узнали, что можно не только указывать и нажимать, но и приближать, отдалять и смахивать.

Жесты стали популярны у дизайнеров и многие приложения экспериментировали с навигацией на основе жестов.

Навигация жестами в приложении Clear

Жесты — это заманчивая возможность сэкономить экранное пространство (так же как и спрятанная навигация, и иконки). “Не должно быть кнопки “удалить”, люди могут просто провести пальцем влево. Или вправо. Это решим”

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

К тому же, у жестов та же проблема, что и у иконок: есть общепринятые жесты, которые понятны всем (например, таппинг, приближение, прокрутка), а есть такие, которые приходится изучать и осваивать — причем в каждом приложении они разные.

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

Если смахнуть письмо вправо в приложении Apple Mail, появится опция “пометить как непрочитанное”

Тот же самый жест в приложении Mailbox отправляет письмо в архив

А если, например, потрясти устройство, то активируется функция “назад” (в iOS), а также “отправить фидбэк” (в Google Maps).

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

Онбординг в мобильных приложениях: что можно и нельзя

4. Прозрачный экран с подсказками в качестве онбординга

Онбординг — в последнее время очень горячая UX-тема — проводится во время первого контакта пользователя с приложением. Во многих случаях онбординг просто сводится к нескольким подсказкам на прозрачном экране, которые объясняют пользователю интерфейс:

Подсказки в приложении dcovery

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

Пользовательский интерфейс — как шутка. Если приходится объяснять, это провал.

Есть масса способов спроектировать такой процесс онбординга, который действительно будет полезен пользователям. Slack, к примеру, использует первый экран для создания контекста. Они просто представляются и концентрируются на выгодах, а не на скриншотах и функциях.

Более интерактивный способ увлечь новичков — это прогрессивный онбординг. Duolingo не объясняет, как работает приложение: пользователей приглашают сразу окунуться в процесс и провести быстрый тест на выбранному языку (даже без регистрации) — а все потому, что люди быстрее всего учатся через действие. А еще, это самый увлекательный способ показать ценность приложения.

Помните, что в Mailbox жест смахивания выполнял другую функцию, не как в Apple Mail? А вот как работает их прогрессивный онбординг: пользователь проходит небольшое обучение, в ходе которого “пробует” все жесты, прежде чем перейти к приложению:

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

7 советов для создания лучшего UX: Лучшие практики мобильного дизайна

5. Креативные, но совершенно не интуитивные пустые состояния

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

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

Вот, например, пустой экран из Google Photos:

На первый взгляд все классно, правда? Хорошо выстроенный лейаут, соответствует всем гайдлайнам, с красивой графикой.

И все же, если посмотреть еще раз, можно заметить несколько странностей:

  • Зачем там такая заметная кнопка поиска, если нет коллекций? Зачем искать, если пусто?
  • Второй выделяющийся элемент — изображение — очевидно не кликабелен (хотя многие, наверное, попробуют нажать)
  • Подсказка гласит, что мне стоит искать знак “+” в шапке, что очень странно. Почему бы не разместить кнопку “добавить” прямо в подсказке? Это все равно, что сказать “нажмите на кнопку “продолжить”, чтобы продолжить”.

Такой экран пустого состояния не помогает пользователю понять контекст:

  • Что такое коллекции? Чем они полезны?
  • Почему у меня нет ни одной?
  • Что мне с этим делать? (И стоит ли что-то делать?)

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

Пустое состояние в Lootsy

Не забывайте, что пустые состояния (так же как и страницы 404 в веб) нужны не только для визуальной эстетики и отражения стилистики бренда. Они также влияют на юзабилити. И они должны быть интуитивно понятны.

Сомневайтесь во всем

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

Думайте своей головой. Делайте свой дизайн. Проводите свое исследование.

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

Комментарии
Если вы нашли опечатку - выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать info@apptractor.ru.
Advertisement
Click to comment

You must be logged in to post a comment Login

Leave a Reply

Дизайн и прототипирование

Фирменный стиль: правила и механика разработки

В июле в Санкт-Петербурге прошла первая встреча глобального сообщества предпринимателей Startup Grind, на которой выступил Роман Горбачев, основатель «Логомашины». Мы пообщались с Романом, чтобы узнать об особенностях разработки фирменного стиля и его адаптации для цифровых носителей.

AppTractor

Опубликовано

/

Автор:

Расскажите, что такое фирменный стиль и из каких компонентов он состоит?

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

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

С чего начинается разработка фирменного стиля? И в какой момент вы начинаете думать, как фирменный стиль будет выглядеть на различных носителях? Бывают ли случаи, когда фирменный стиль разрабатывается именно с учетом того, что он будет использоваться только на цифровых носителях?

Разработка стиля начинается с брифовки клиента — так мы понимаем, с одной стороны, позиционирование фирмы, с другой, как этот стиль планируют использовать. Мы делаем особенный упор на качественную брифовку, потому что мы даем гарантию — если логотип не понравится, мы вернем заказчику все деньги. Поэтому если бриф нам непонятен, мы звоним клиенту и проговариваем все моменты до тех пор, пока задача не станет ясна и нам, и заказчику.

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

Какие особенности есть у цифровых носителей? Какие-то специальные технические требования или пакет из обязательных форматов?

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

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

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

А как бы вы решили, например, кейс уже знаменитого ДжонФедора?

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

И как подстраховаться на этапе разработки фирменного стиля? Есть ли какие-то форматы тестирования, которые помогут избежать подобных ошибок?

Фирменный стиль нужно делать комплексно и показывать на тех носителях, которые будут в жизни – их должен предоставить заказчик. Также на стороне заказчика должны быть дизайнеры, которые поймут и разовьют фирменный стиль на все экраны приложения, например.

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

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

Какие самые частые ошибки вы замечаете при адаптации фирменного стиля для веба и мобайла?

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

И как их избежать?

Чтобы избежать таких проблем, нужно делать логотип под тот размер, в котором его будут видеть чаще всего. И презентовать на этом месте (мы называем его «Главное место»).

В работе над цветовой гаммой важно изучить конкурентов и «захватить» те цвета, которые они не используют. Чаще всего придется использовать сочетание цветов — в таком случае нужно определить соотношение и иерархию цветов (какой цвет идет на фан, какой из них используется редко и для акцентов).

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

Обычно эта реакция не столько на редизайн, сколько на то, что пользователей не спросили. Стало непривычно и неудобно. Такая реакция неизбежна, нужно просто переждать.

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

Спасибо!

Комментарии
Продолжить чтение

Дизайн и прототипирование

Как бросить веб-дизайн и заняться мобайлом

Арт-директор направления мобильной разработки агентства AGIMA Леонид Никулин рассказал нам об особенностях мобильного дизайна.

AppTractor

Опубликовано

/

Автор:

Веб-дизайн – ровесник веб-страницы. 6 августа 1991 года британский ученый Тим Бернерс-Ли, которому мы обязаны за создание HTML, разработал первую веб-страницу. Разгуляться было негде: это был просто текст со ссылками, но отсчет существования веб-дизайна уже начался. Лишь в 1993 году удалось улучшить внешний вид страниц с помощью первого графического браузера Mosaic.

В свою очередь, мобильный дизайн – одна из областей графического дизайна, которая начала развиваться несколько лет назад. С запуском iPhone 9 января 2007 года и App Store 10 июля 2008 года, рынок создания мобильных приложений стал особенно интересен разработчикам и компаниям, так как появились аппараты, обладающие подходящей для работы приложений мощностью.

10 лет App Store: эволюция дизайна первых приложений

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

Для начала

Мобильный дизайн значительно отличается от веба (подробнее речь об этом пойдет ниже), и хотя знания о веб-дизайне вам немного помогут в освоении новой профессии, переучиться и узнать новое придется основательно.

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

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

Взаимодействие

Области касания по версии Скотта Херффа иллюстрируют зоны, куда может дотянуться большой палец

Наверняка вы замечали, что держа устройство в одной руке, бывает довольно сложно дотянуться до некоторых иконок. То, что для простого пользователя просто мелкое неудобство, для разработчиков и дизайнеров – настоящая головная боль. Эти “труднодоступные” зоны сильно зависят от размеров устройства и его пропорций. При создании приложения это всегда нужно учитывать, так как иногда дизайнеры располагают самые важные кнопки там, куда сложно дотянуться.

При работе с мобильным устройством ваш курсор – это палец. И так же, как и в вебе, надо думать о том, чтобы пользователь не проклинал вас, пытаясь ткнуть в нужную область экрана. В мобайле нужно делать поправку еще и на антропометрию: площадь соприкосновения пальца с экраном. При создании дизайна приложений вы столкнетесь с таким понятием, как минимальная область касания. В iOS рекомендуют не делать зону тапа меньше 44×44, а в Android – 48. В редких случаях можно уменьшить зону нажатия, но это уже большой риск: пользователь может просто перестать попадать по нужной иконке. Еще надо учитывать, что палец всегда находится около экрана, и каждое неаккуратное касание приравнивается к клику. Соответственно, возникновение ошибки возрастает.

Разнообразие устройств

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

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

Несколько базовых разрешений для примера:

  • 320х480 (iPhone 4)
  • 320х568 (iPhone 5)
  • 375х667 (iPhone 6,7,8)
  • 375х812 (iPhone X)
  • 414х736 (iPhone 6+,7+,8+)
  • 360х640 (большая часть Android-устройств)
  • 412х732 (Pixel 2)
  • 360×720 (Pixel XL)
  • 360×740 (Galaxy S8).

При создании дизайна на iOS рисуется макет в размере 1Х. Это значит, что на устройстве он потом будет увеличен, так как плотность пикселей совершенно другая. На iPhone 3 разрешение было 320х480. Пропорции экранов от iPhone 6 до iPhone 8+ не менялись и остаются 375х667. В Android принято рисовать под 360х640.

Обычно именно в таких размерах нужно создавать дизайн мобильных приложений. При этом у каждого дизайнера есть свои стандарты и наработки. Например, я использую только два разрешения – 375х667 и 360х640, так как это наиболее распространенные пропорции экранов на устройствах. Что удобнее для вас – подскажет практика.

Различие платформ

Когда вы только начнете создавать приложения, первое время будете постоянно напоминать себе о том, что в Android существует кнопка “назад” и что боковое меню – это основной элемент навигации. А на iOS наиболее распространенным элементом навигации является tab bar, а в боковом меню спрятаны наименее важные функции. И это лишь малая часть различий.

Не стоит забывать о гайдлайнах – iOS Human Interface Guidelines и Android Material Design Guidelines, но помимо их изучения вам нужен опыт использования мобильных устройств с различными платформами. Рекомендую вам хоть немного разбираться в технических аспектах и для общего понимания просматривать документацию разработчиков. Так вы сможете наладить более простую коммуникацию с техническими специалистами. Знать наименование структурных элементов тоже полезно, так как, например, навбар в iOS – это верхняя навигационная панель, а в Android – это нижняя навигационная панель, и они совершенно разные в поведении. В iOS линия, разделяющая ячейки в табличном представлении, называется сепаратор, а в Android – дивайдер.

Помните, что переносить дизайн на 100% предназначенный для одной платформы на другую – это верный способ убить юзабилити. У пользователей есть свои привычки и особенности использования смартфона. Несколько лет назад никто не мог представить, что при просмотре приложения на iOS и на Android дизайн будет одинаковый. Если такое случалось, то приложение на одной из платформ просто погибало. И когда пользователь iOS видел дизайн и навигацию из Android, то у него было ощущение, что ему подсовывают что-то низкопробное. А потом заходил в App Store и искал то, что будет соответствовать нативному дизайну платформы. Но времена меняются и сейчас все больше и больше приложений выглядят очень похоже на разных платформах. При этом в большинстве случаев учитывается то, как пользователи привыкли взаимодействовать с конкретной системой.

Не все так легко, как кажется

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

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

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

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

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

Прототипы

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

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

При создании прототипа задавайте себе вопросы: «Какая главная цель моего приложения?”, “Какие разделы наиболее важные и куда их стоит поместить?”, “Какие действия наиболее важные, а какие – второстепенные?».

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

Какие тексты?

В наше время около 70% людей страдают заголовочным потреблением, то есть дальше первой строки никто не заходит. Суть должна быть написана коротко и понятно. В приложениях мало кто любит читать большие тексты, поэтому многие просто пропускают онбординги, подсказки и туториалы. Если у вас уже есть текст для сайта, то урежьте его минимум в два раза и вы придете к верному решению для мобильного приложения. А лучше всего обратиться к UX-писателю. Задачей UX-писателя является построение такого интерфейса, в котором пользователю не нужны были бы подсказки – все действия совершались интуитивно.

В завершении

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

Комментарии
Продолжить чтение

Дизайн и прототипирование

Apple выпустила шаблоны для дизайна приложений watchOS 5

Операционные системы macOS Mojave и watchOS 5 все ближе к пользователям, и Apple  подготовила набор шаблонов для дизайна приложений.

AppTractor

Опубликовано

/

Автор:

В руководстве компании опубликованы ресурсы AppKit UI для Sketch, Photoshop и Adobe XD – контролы, экраны, цвета, иконки, обложки для отрисовки интерфейсов приложений watchOS и macOS.

Скачать все ресурсы можно бесплатно с сайта Apple.

 

 

Комментарии
Продолжить чтение

Дизайн и прототипирование

10 лет App Store: эволюция дизайна первых приложений

Одна из самых значительных дизайнерских возможностей в новейшей истории была анонсирована на сайте Apple простым постом в блоге. «Позвольте мне сказать: мы хотим, чтобы на iPhone были нативные сторонние приложения, и мы планируем в феврале передать SDK в руки разработчикам», — написал Стив Джобс. Тихим утром в четверг, менее чем через год, App Store открылся для пользователей iPhone, предоставив на выбор чуть более 500 приложений.  Сайт Sketchapp.me разбирается с тем, как изменился дизайн приложений за год.

AppTractor

Опубликовано

/

Автор:

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

Чтобы отметить 10-летие App Store, давайте изучим визуальную эволюцию 10 оригинальных приложений App Store.

Приложения

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

iTunes Remote

iTunes Remote

Apple дала пример другим разработчикам, опубликовав некоторые из своих программ в App Store. Одними из первых созданных приложений были игра Texas Hold’em и Remote — простая утилита для управления воспроизведением библиотеки iTunes на Mac или Apple TV по Wi-Fi. В то время, как Texas Hold’em убрали из магазина в 2011 году, Remote существует и сегодня.

С самого начала, дизайн Remote сильно зависел от внешнего вида приложения iPod для iPhone (сегодня называется «Музыка»). Фактически, представление Now Playing было по существу идентичным. Версия 2.0 принесла новую иконку, созданную Louie Mantia. Два приложения начали разделяться на iOS 6, когда приложение «Музыка» было полностью переработано и появился ползунок громкости, который динамически реагировал на движение вашего iPhone. Remote сохранил предыдущий внешний вид. Иконка приложения снова была обновлена, чтобы соответствовать стилю iTunes 11 на Mac.

Первый крупный редизайн Remote был проведен с выходом iOS 7. В отличие от белой темы приложения «Музыка», Remote представил темный, размытый фон, который был тонирован цветом обложки прослушиваемого альбома. В 2016 году, Apple выпустила приложение Apple TV Remote для Apple TV 4-го поколения — логичный шаг вперед, который, похоже, заменит Remote. Вскоре после этого Remote был переименован в iTunes Remote. Хотя приложение по-прежнему было доступно для скачивания, оно оставалось практически неизменным до июня прошлого года, когда получило совершенно новый дизайн и поддержку более высокого дисплея iPhone X.

Обновление iTunes Remote вернулось к более визуально консервативному оформлению, напоминающему приложение «Музыка» для iOS 11, но отказалось от больших заголовков и карточек в пользу традиционной навигации. Вместо красного цвета оттенка iTunes Remote использует синий цвет, чтобы соответствовать обновленной иконке.

Facebook

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

Приключения Facebook на iPhone в действительности начались до того, как появился App Store. Первоначально сервис был доступен в качестве одного из первых веб-приложений iPhone в октябре 2007 года. Версия 1.0 в App Store едва ли похожа на сегодняшний Facebook, разве что фирменной синей панелью навигации. Даже на иконке отсутствовала белая буква «f». Новостная лента приложения была по существу украшенным табличным представлением над панелью вкладок с пятью иконками: «Главная», «Профиль», «Друзья», «Чат» и «Входящие». Версия 2.0 была построена на той же концепции, с добавлением еще двух слоев навигации под основной строкой заголовков.

Facebook 3.0 был впервые показан в июле 2009 года и представил 3×3 сетку значков, которые помогли решить всплывающую навигацию приложения. Ранние скриншоты показывают полностью голубую плиточную сетку, но этот проект никогда не выпускался в публичной сборке приложения.

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

В апреле 2013 года Facebook экспериментировал с «Chat Heads» в приложении iOS, перемещаемыми фото профиля, которые расширялись в окнах чатов при нажатии. Новый вид iOS 7 потребовал редизайна, с повторным введением панели вкладок для навигации. Иконки на панели вкладок по-прежнему регулярно переделываются и перемещаются в обновлениях.

Некоторые из задач дизайна Facebook исходят из их операционного масштаба. В отличие от многих небольших приложений, Facebook должен предлагать постоянный опыт своим клиентам на большом количестве платформ, а не только для Apple. Обновление, вышедшее в августе 2017 года, попыталось унифицировать дизайн ленты новостей в iOS, Android и веб версиях в виде комментариев, похожих на разговор в Messenger.

Things

Things начинал разрабатываться как инструмент управления задачами для Mac, но в итоге вышел раньше на iOS. Разработчик приложения Cultured Code, отметил в своем стартовом сообщении, что оригинальная версия была создана чуть более месяца назад — дэдлайн, который казался невозможным.

В Things 1.0 отсутствовали важные функции: возможность синхронизироваться с Mac версией и тегирование. Несмотря на стресс-запуск, та же самая базовая иерархия приложения сохраняется и по сей день. Отличный альбом на Flickr документирует ранние этапы разработки приложения. Первое крупное визуальное обновление состоялось в августе 2012 года, с выходом Things 2.0. Улучшение внешнего вида iOS, и небольшие графические украшения придавали ему уникальную индивидуальность.

Things 2.5, вышедший в сентябре 2014 года, снова обновил пользовательский интерфейс приложения более украшенным внешним видом и более светлой цветовой гаммой. Первоначально планировался редизайн для версии Things 3, но разработка заняла больше времени, чем ожидалось. Things 3, выпущенный в мае 2017 года, был самым значительным изменением внешнего вида приложения. Практически каждый значок и элемент пользовательского интерфейса были перерисованы при сохранении основного макета. В видеоролике обновления, Cultured Code особо подчеркнули, как анимация использовалась для придания приложению совершенно новых ощущений. В 2017 году этот редизайн принес им Apple Design Award.

OmniFocus

С самого начала App Store был полон приложений для управления задачами. И Thing, и OmniFocus от Omni Group, были доступны с первого дня работы магазина. Хотя оба приложения обеспечивают аналогичную полезность, каждое из них выбрало уникальные направления дизайна.

OmniFocus для iPhone изначально использовал простые табличные представления с собственной иконографией для навигации. Он получил премию Apple Design Award в 2008 году. Omni Group переделала оформление приложения и его иконку в июне 2010 под Retina-дисплей iPhone 4. Одно из самых больших изменений приложения состоялось в июне 2011 года, когда был добавлен режим «Forecast». Глянцевый выборщик дат под навигационной панелью стал определяющим элементом пользовательского интерфейса, даже когда глянцевый дизайн исчез в 2013 году при редизайне iOS 7. Новый плоский вид в значительной степени основывался на цветах оттенков текста для ощущения пространства.

Весеннее обновление 2015 года для iPhone принесло темную иконку приложения с более мягкими краями на галочке. Каждая иконка с 2012 года содержит пасхальное яйцо, о котором могут не знать даже давние пользователи приложения. Увеличьте масштаб, и вы заметите, что текстура из углеродного волокна на самом деле состоит из крошечных, повторяющихся логотипов Omni.

Последнее важное обновление для OmniFocus вышло в мае прошлого года с версией OmniFocus 3.0. В то время, как многие из изменений были связаны с инженерией, большие заголовки и оптимизация iPhone X освежили интерфейс.

Evernote

История стиля Evernote прекрасно отражает большинство основных тенденций разработки программного обеспечения с 2008 года. Инструмент создания и организации записей получил свое начало в качестве десктопного приложения до появления App Store и недавно получил ребрендинг с узнаваемым логотипом — слоном.

Как и многие ранние приложения для iPhone, Evernote 1.0 сильно опирался на элементы UIKit и большую глянцевую графику. В 2011 году редизайн реорганизовал панель вкладок и определил хронологическое представление «Все заметки». Когда Evernote добавил поддержку более крупного дисплея iPhone 5 в 2012 году, приложение по-прежнему использовало элементы интерфейса iOS по умолчанию. Панель навигации и кнопки автоматически использовали матовую поверхность iOS 6.

В ноябре 2012 года был запущен Evernote 5. Спроектированное с нуля, приложение было примером учебника богато текстурированных, тематических проектов, типичных для той эпохи. Рельефная иконография, текстуры искусственной бумаги и глубокие тени придали приложению глубину. Иконка приложения утратила старую глянцевую внешность, но сохранила матовый металл.

В сообщении в блоге, Evernote сказали: «Мы не часто начинаем полный редизайн. Фактически, это происходит только один раз в несколько лет». Хотя они и не знали этого тогда, Evernote пришлось бы переделать свой дизайн снова менее, чем через год, когда на WWDC 2013 было объявлено о релизе iOS 7. Evernote 5 выиграл премию Apple Design Award в тот же день.

Evernote принял плоскость iOS 7 с распростертыми объятиями. Каждая текстура, тень и скос были заменены. Яркий градиент слева-направо залил навигационную панель приложения, соответствуя цветам, используемым на новой иконке без текстуры. Раннее обновление 2017 года смягчило дизайн с помощью более приглушенной иконки, белой навигационной панели, карточек заметок с тонкими тенями и темной панели вкладок. Последовала дальнейшая доработка типографики и иконок на панели вкладок.

eBay

Дизайн eBay, пожалуй, пережил самые значительные преобразования из 10 приложений, представленных в этой статье. Хотя Apple отметили это на сцене конференции WWDC 2008, оригинальная версия eBay для iPhone была абсолютно сырой по сравнению с утонченным опытом, предоставляемым сегодня. К ноябрю 2009 года все приложение было переосмыслено с более последовательным серым интерфейсом.

Год спустя, eBay 2.0 заложил основу организации приложения на долгие годы. В то время, как ранее eBay предлагал автономное приложение для продажи, эта функция теперь перешла в основной опыт. Начальный экран приложения также был обновлен и, наконец, стал по-настоящему оригинальным нативным дизайном iOS.

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

В сентябре 2015 года eBay 4.0 сломал стереотип. Большая часть функциональности приложения была помещена под гамбургер-меню, оставив только три вкладки в верхней части: «Activity, Shop, Sell». Голый, перегруженный текстом интерфейс и новая иконка для соответствия дизайну просуществовали недолго. К маю 2016 года, eBay почти полностью вернули предыдущую организацию приложения. Сегодняшний макет имеет близкое сходство с дизайном, запущенным в 2010 году.

Twitterrific

Craig Hockenberry и The Iconfactory создали первый Twitter-клиент для iPhone, прежде, чем App Store даже был анонсирован. Благодаря jailbreak софту, разработанному сообществом Apple-энтузиастов, разработчики имели несколько месяцев опыта написания приложений к тому времени, когда Apple предоставила официально санкционированные инструменты.

Twitterrific 1.0 заимствовал некоторые элементы дизайна времен джейлбрейка, в итоге со старта выглядя удивительно хорошо. Оно выиграло премию Apple Design Award в 2008 году. Twitterrific также было одним из первых приложений, использующих темную тему — все более популярный вариант сегодня. Но история дизайна Twitterrific больше напоминает историю Twitter как сервиса, чем разработки трендов дизайна. Каждое обновление отражало изменения функций и функциональности платформы Twitter. В первые дни эти функции часто первыми пробовали именно сторонние разработчики.

В 2012 году Twitterrific 5.0 переместил всю навигацию в верхнюю часть дисплея и использовал полностью настраиваемые элементы интерфейса. Подобный макет сохранился до сегодняшнего дня. Так же увлекательна, как дизайн приложения, его иконка. Помимо того, что это было первое Twitter приложение, использовавшее образ птицы, Twitterrific является одним из немногих iOS-приложений, которым удалось оставить детальную иконку, сохраняя при этом современный вид. Талисман приложения, Ollie, едва изменился во время перехода на iOS 7 и по-прежнему выглядит так же свежо, как и в 2012 году.

Instapaper

Приложение, созданное для чтения, уделяет приоритетное внимание контенту, поэтому дизайн Instapaper, естественно, с самого начала был неяркий. Фактически, некоторые из самых очевидных визуальных изменений приложения, были получены благодаря изменениям в самой iOS. Панель навигации и стили кнопок были изменены в iOS 6 и 7, что дало приложению два «бесплатных» визуальных обновления.

Однако сказать, что приложение не развилось, было бы неправдой. Instapaper начал свою жизнь в App Store как бесплатное приложение. Вскоре после этого была запущена платная версия под названием Instapaper Pro. Большие обновления опыта чтения и более темные элементы интерфейса появились осенью 2011 года, когда была добавлена новая иконка созданная Dan Cedarholm — сооснователем Dribbble. Позже иконка была показана на слайде WWDC в рамках сессии о большой иконографии.

В апреле 2013 года Betaworks приобрел Instapaper у основателя Marco Arment, отправив развитие приложения на другую траекторию. Первое крупное обновление под руководством Betaworks состоялось в сентябре 2013 года, с обновлением iOS 7. Pinterest приобрела Instapaper в августе 2016 года, когда компания пообещала, что приложение будет жить. В настоящее время Instapaper поддерживает довольно согласованные визуальные эффекты даже после обновления для поддержки дисплея Super Retina iPhone X.

PCalc

История PCalc началась более, чем за десять лет до запуска App Store. Разработчик Джеймс Томсон выпустил оригинальное приложение для Mac в 1992 году, и его эволюция продолжается и сегодня. С самого начала на iOS PCalc предложил полностью настраиваемый интерфейс, предлагая постоянно расширяющийся набор тем и вариантов настройки. Cлишком много, чтобы рассматривать их здесь, поэтому я выбрал несколько основных моментов.

Первая версия PCalc для iPhone была портирована из виджета панели управления Mac, но в сочетании с классическим интерфейсом iPhone выглядела хорошо. Глянцевые кнопки и темно синяя LCD-панель соответствовали иконке приложения. В декабре 2008 года популярная тема под названием «Сумерки» была добавлена ​​с еще более детальной графикой и цветовой схемой, аналогичной iOS-калькулятору. Затем тема «Сумерки» была обновлена и поддержкой Retina-графики больших дисплеев.

PCalc адаптировался к плоскому дизайну iOS 7 с новой темой по умолчанию под названием «Самурай» и соответствующей иконкой. Старые темы остались доступными в настройках приложения. Иконка PCalc снова была обновлена в марте 2016 года. С момента релиза iOS 10.3, Apple разрешила сторонним приложениям динамически изменять иконки приложений, без внесения на рассмотрение новой версии в магазин. В мае 2017 года PCalc начал в полной мере использовать эту функцию, выпустив огромное количество альтернативных иконок на выбор. В последующих обновлениях было добавлено еще больше.

После 10 лет разработки, PCalc вышел за пределы калькулятора для iPhone. Недавние обновления обладали некоторой творческой свободой с функциями новизны, такими как режим AR калькулятора. Поддержка дисплея iPhone X принесла теме «Самурай» закругленные углы.

Yelp

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

В августе 2009 года Yelp использовал рудиментарный интерфейс дополненной реальности в приложение iPhone для поиска предприятий вокруг вас. Хотя тогда это было немного больше, чем новинка, сегодня эта особенность кажется актуальной, учитывая рост приложений ARKit.

В январе 2010 года появился новый главный экран Yelp с сеткой быстрого доступа 3×3. Один и тот же базовый интерфейс стилистически дорабатывался до тех пор, пока все приложение не было переработано в октябре 2013 года с более плоской внешностью и более заметной вкладкой «Рядом».

Последние обновления Yelp выходят за рамки простых результатов на основе местоположения, предлагая релевантный для вас контент. Метод обнаружения на основе рекомендаций — это тенденция дизайна пользовательского опыта, которая пользовалась большим успехом в обновленном App Store с выходом iOS 11.

Иконки

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

При запуске App Store глянцевые иконки правили бал. Глянцевость иконок применялась по умолчанию, и разработчикам пришлось специально отключить эффект в Xcode, чтобы удалить его. По мере того как приложения iOS созрели, большинство в конечном итоге потеряло свой блеск и приняло очень детализированные индивидуальные дизайны.

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

Индивидуальность

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

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

После того, как принципы гомогенизации интерфейса, представленные с iOS 7, отправили дизайнеров и разработчиков обратно за чертежную доску, многие приложения начали дифференцировать себя с эмпирическими выборами, которые ощущаются, но не видны. Вдумчивый дизайн и прогнозирование информации часто используются, чтобы помочь найти новый и интересный контент, который в противном случае остался бы незамеченным. Рациональные рабочие процессы упрощают общие действия и помогают вам тратить меньше времени на выполнение задач. Важность хорошего дизайна не только на уровне пикселей привела к росту популярности дизайна пользовательского опыта (UX) в последние годы.

Следующие 10 лет

В 2008 году было невозможно точно предсказать, как будет развиваться App Store. Инновации возникли из инноваций, а вкусы и привычки владельцев iPhone сформировали те приложения, которые разработчики решили сделать. То же самое можно сказать и о будущем. Предстоящие iPhone и версии iOS наверняка изменят пейзаж приложения непредвиденными способами. Завтра новый тренд дизайна может изменить весь мир. Даже через 10 лет будущее увлекательно.

Комментарии
Продолжить чтение

Реклама

Наша рассылка

Нажимая на кнопку "Подписаться" вы даете согласие на обработку персональных данных.

Вакансии

Популярное

X
X

Спасибо!

Теперь редакторы в курсе.