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

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

Дизайн уведомлений для приложений

Шашанк Сахай, продуктовый дизайне в Microsoft Teams, рассказал про различные подходы в  реализации уведомлений внутри приложений и их особенности.

AppTractor

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

/

Автор:

TL;DR – в чем смысл:

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

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

Читать: https://medium.muz.li/designing-notifications-for-applications-3cad56fecf96

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

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

Текст в интерфейсах: проектирование

Что и когда говорить пользователю, о чем промолчать и почему все поля — обязательные, дизайнер роботов Оля Сартакова рассказывает о текстах и контексте в интерфейсах.

Redmadrobot

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

/

Автор:

Привет, меня зовут Оля Сартакова. Я работаю в Redmadrobot и преподаю дизайн мобильных приложений в Британке. Хочу рассказать, как работаю с текстами в интерфейсах.

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

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

1. Понять, кто и в какой ситуации будет пользоваться приложением

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

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

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

После анализа результатов интервью можно придумать самого сложного персонажа в самой непростой ситуации и проектировать приложение для него.

Давайте разберём пример: проработаем сценарий оформления заказа для приложения доставки пиццы. Наш пользователь — 28-летний Василий. Характер прескверный, не женат. Он живёт во Фрязино, работает в Москве. Сегодня вечер пятницы. Василий после работы выпил немало пива с коллегами. Сейчас он возвращается домой на электричке, в которой не всегда хорошо ловит интернет, и хочет есть.

2. Выписать всё, что может пригодиться

Для этого нужно побеседовать с клиентом, побеседовать с пользователями, проанализировать конкурентов, пофантазировать самому.

С пиццей у меня получилось так.

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

Бизнес (пиццерия) заинтересован в том, чтобы Василий сделал заказ как можно быстрее и оплатил заранее.

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

Если не спросить у Василия время доставки, курьер может привезти пиццу не вовремя и ему придётся ждать под дверью. Про время надо спросить.

Василий хочет оплатить пиццу через Apple Pay, но не все с ними солидарны. Во-первых, не у всех смартфоны поддерживают Apple / Google / Samsung Pay, а во-вторых, при первом заказе люди опасаются предоплат — вдруг вообще не привезут. Получается, что в приложении нужны, как минимум, четыре способа оплаты: Apple / Google / Samsung Pay, картой в приложении, картой курьеру и наличными.

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

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

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

Итого, в форме оформления заказа нужны следующие поля:

  • Имя и телефон клиента.
  • Способ получения заказа: доставка или самовывоз (мы разберем только доставку, потому что Василию нужна именно она).
  • Время доставки: чем скорее, тем лучше, или к указанному времени.
  • Адрес доставки.
  • Способ оплаты.

Так форма будет смотреться на экране. Для начала поделю оформление заказа на 2 шага. На первом проверю, знаком ли нам пользователь, на втором узнаю, как он хочет получить и оплатить заказ.

3. Убираем то, без чего можно обойтись

Лучше не перегружать экран и подбирать максимально лаконичные формулировки. Главное при сокращении — не потерять смысл.

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

Теперь меня смущает только «Укажите адрес». Можно заменить его на подсказку о том, что именно придётся указать:

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

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

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

Форма получилась большая, но убрать из неё нечего. Что делать?

Один приём мы уже использовали — поделили её на 2 шага. Второй способ сработает при повторном заказе — можно запоминать введённые данные и показывать поля предзаполненными.

4. Заботимся и объясняем

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

Превышен лимит неактивности → Просто верните человека на предыдущий шаг.

Неверный формат данных → Показывайте сразу правильную клавиатуру.

Если предотвратить ошибку невозможно, формулируйте оповещения на понятном человеку языке и объясняйте, что произошло, в чем причина и что сделать. Как правило заботливое сообщение об ошибке занимает больше места, чем «роботизированное», но люди не будут на нас в обиде.

Сервер не отвечает →

  1. Если сервер недоступен из-за того, что у пользователя пропало соединение с интернетом, так и говорим → Нет соединения с интернетом. Проверьте настройки сети.
  2. Если сервер недоступен по собственным мотивам, единственный вариант, продумать автоматическое решение проблемы и подсказать, как можно решить её прямо сейчас. → Нет связи с сервером. Не закрывайте приложение, и ваш заказ отправится автоматически, как только мы устраним неполадку. Или позвоните нам по телефону +7 (495) 999-99-99 — и мы оформим заказ.

Неверный номер телефона →

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

5. Перечитываем

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

6. Тестируем на людях

Когда мы довольны результатом, пора проверить интерфейс на целевой аудитории. Лучше всего собрать прототип с нажимаемыми кнопочками в InVision, Marvel или Flinto и дать нескольким людям из целевой аудитории задание пройти целевой сценарий — заказать пиццу с доставкой на дом в 20:00. На что нужно обратить внимание:

  • Легко ли пользователям? Всё ли им понятно?
  • Где у них возникают проблемы? Почему?
  • Нравится ли им тон общения, который вы выбрали?

Что нельзя делать:

  • подсказывать, куда нажать;
  • выражать свои эмоции, когда у человека что-то не получается;
  • задавать вопросы, пока он не закончил.

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

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

7. Определяем правила

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

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

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

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

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

В июле в Санкт-Петербурге прошла первая встреча глобального сообщества предпринимателей 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-писателя является построение такого интерфейса, в котором пользователю не нужны были бы подсказки – все действия совершались интуитивно.

В завершении

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

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

Реклама

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

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

Вакансии

Популярное

X
X

Спасибо!

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