Connect with us

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

Конец приложений, какими мы их знали

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

Анна Уханаева

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

/

     
     
[pullquote align=right] Пол Адамс в блоге Intercom
[/pullquote]Экран как сборище иконок приложений, которые ведут в разные места, отжил свое. И это важные изменения, на которые нужно обратить внимание при дизайне и разработке.

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

Нет ломящимся от иконок экранам

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

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

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

1. Разработка систем, а не пунктов назначения

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

2. Последние изменения в уведомлениях iOS и Android

Изменения произошли в iOS 8 и Android KitKat. Уведомления всегда были указателями на приложения – они говорили вам, что пора открыть приложение.

end-of-apps-3-non-blur

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

end-of-apps-4

На iOS уже полностью интерактивные уведомления: нет нужды открывать приложение. Все действия можно совершить в уведомлении.

end-of-apps-1

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

end-of-apps-2

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

Следующий уровень: в карточках можно сделать все

Следующая итерация очевидна – множество карточек с уведомлениями, которые позволяют пользоваться всеми продуктами и независимыми потоками прямо внутри карточки. Комментарий к посту на Facebook. Ретвит. Купить что-то на Amazon. Зарегистрироваться на полет. Поделиться новостью из ленты. Добавить напоминание в список задач. Заказать место в ресторане. Переместить виртуального футбольного игрока. Записать результаты пробежки. Оплатить счет…

На пути к приложениям как сервисам

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

Wear-Watch

Контент может быть подан так, чтобы сделать пользовательский ввод удобным и оптимизированным для конкретной ситуации. Друг посылает мне SMS, а я за рулем, так что мои часы зачитывают мне ее содержание. Я отвечаю с помощью Siri/Google, и друг получает мой ответ в виде текстового же сообщения, потому что он на работе. Возможные действия меняются. Это то, к чему мы приближаемся.

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

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

Концепт дизайна для примера

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

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

end-of-apps-6

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

– Это выглядит как Google Now, но на стероидах. У вас будет почти столько же уникальных источников в потоке, сколько у вас приложений на телефоне.

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

Это начало конца приложений в качестве пунктов назначения. Зачем открывать приложение, если в этом нет нужды? Давайте сделаем еще один шаг.

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

end-of-apps-7

Это будет работать для всех источников: Twitter, Instagram, новостные приложения и другие. И, конечно же, на всех устройствах.

end-of-apps-8

Так, еще один шаг.

Представьте теперь, что родительская карточка может поддерживать карточку-потомка. Например, все та же карточка Facebook может иметь карточку-ребенка из BBC. На самом деле, нечто похожее уже есть в Twitter.

Parent-Child

Это еще немного напоминает недавно запущенные Apple Extensions и уже присутствует в Китае на Baidu и WeChat, где маленькие приложения встраиваются в большие, появляясь только тогда, когда какое-то действие в пользовательском интерфейсе вызывает его. Например, на Baidu Maps вы можете найти отель, проверить наличие свободных номеров и сделать бронь прямо внутри приложения.

Но опять же это тонкое различие прячет в себе что-то намного более серьезное. Встроенные карточки (дети) внутри родительских карточек также дают возможность не устанавливать отдельное приложение для пользования встроенным. Вам нужно только родительское приложение на вашем устройстве. Снова, это уже работает: карточки Twitter поддерживают платежи Stripe внутри себя. Вам не нужно приложение The New York Times для просмотра их новостей в Twitter. Представьте, что этот шаблон станет широко распространенным. Для разработчиков приложений это может стать очень удобным новшеством. Некоторым компаниям будет выгодно возникать всегда в качестве карточки-потомка без нужды выпуска отдельного приложения.

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

Последствия для сайтов также будут огромными. Если какое-нибудь издательство, например, The New York Times, сможет посылать контент в карточки, которые будут просмотрены в других разных сторонних местах (с согласием о разделении доходов), зачем вообще нужен вебсайт? Это просто лишние расходы.

Мы все равно будем открывать приложения. Иногда.

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

В системе будет создаваться конкуренция: она обучаема

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

Мы в Intercom являемся большими сторонниками подхода “Jobs To Be Done”: нужно учитывать, какие задачи решает ваш продукт для пользователя и спрос на решение каких задач существует. Если вы сфокусируетесь прямо на функциональности, а не индустрии, вы поймете, что авиакомпании, продающие места в бизнес-классе, соревнуются со Skype за пользователей, поскольку они оба предназначены для одного и того же: обеспечение коммуникации с коллегами.

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

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

Три критических вопроса

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

1. Это случится на уровне приложений, уведомлений или операционных систем?

Самая большая схватка может случиться:

  • на уровне приложений (как Google Now)
  • на уровне уведомлений (эволюция центров уведомлений в Android и iOS)
  • на уровне операционных систем (например, новой iOS, которая уберет море иконок)

2. Это будет один поток или несколько?

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

3. Это будет принадлежать компании?

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

К лучшим компаниям и продуктам

Это только набросок, концепт, но я думаю, он во многом передает то, куда мы движемся. Большая часть этого уже построена: Google Now, уведомления Android, интерактивные уведомления iOS8, расширения iOS8, карточки Twitter. Развивающиеся платформы, такие как Android Wear или Apple Watch подтверждают движение к карточкам, которые работают как уведомления, контент и действия.

Плюсы для пользователей:

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

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

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

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

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

Пять ключевых изменений

  1. Эти шаблоны усиливают две вещи, о которых мы писали на Inside Intercom еще когда они только появлялись. Карточки могут быть будущим веба, и дизайнерам нужно разрабатывать системы, а не пункты назначения. Системы и карточки надвигаются: готовьтесь к бешеному ускорению этого процесса.
  2. Адаптивныйдизайн – отличная вещь, но мы идем дальше этого. Мы говорим о разработке контента, который может быть отображен на невообразимом количестве устройств и ситуаций. Это потребует новых принципов в дизайне, новых способов поиска контекстной информации. Начните сейчас, не ждите, пока начнется.
  3. Разработка уведомлений и возможных действий в них станет неотъемлемой частью процесса разработки продукта. В скором времени мы будем тратить столько же времени на этот аспект, сколько на разработку внутренностей приложения. Измените свой подход и начните работу сейчас, пока не слишком поздно. Сделайте наброски системы, а не экранов.
  4. Подумайте, с кем бы вы могли объединиться. Интеграции как части продуктовой стратегии растут, свидетельством тому – взрыв всевозможных API, Webhooks и появление таких сервисов, как Zapier и IFTTT. Интеграции позволяют делать то, что вы бы никогда не смогли в одиночку. Это дает вам доступ к новой аудитории. Сделайте интеграции частью ваших бизнес-планов и стратегии разработки продукта.
  5. Я использую как iPhone, так и телефоном на Android. Также у меня есть iPad Mini, Nike Fuelband, я пользовался Google Glass везде, где это только возможно (для частных целей). Когда я смогу, я куплю Apple Watch. Мы должны первыми окунуться в это с головой: с открытыми глазами, чтобы разглядеть, что и как работает.
Анна Уханаева
Комментарии Facebook
Продолжить чтение
20 комментариев

20 Comments

  1. dseleznev

    01.11.2014 at 13:57

    А кто первоисточник материала?

  2. nikolayverner

    02.11.2014 at 22:32

    Карточки в приложениях… Такой тонкий намёк на плитки, а именно, Modern UI. Microsoft в этом плане (с живыми плитками) обогнала конкурентов и сама стала задавать тандем. Но в статье, как и ожидалось, про это ни слова..

    • MaryArti

      05.11.2014 at 16:23

      Согласна! когда вышло Метро, первый вопрос, который я задала – когда Эппл переделает свою ОС. Они ж идеологию платформы лет 6 не меняли.. Потребности пользователей далеко уже ушли.

  3. Даниил Берник

    03.11.2014 at 17:22

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

    • AppTractor

      03.11.2014 at 18:44

      Все прекрасно встраивается в эту модель, почему калькулятор нельзя представить в виде карточки в ленте?

      • Aleksey Kharitonov

        03.11.2014 at 22:25

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

        • AppTractor

          03.11.2014 at 22:42

          Мы только что обсуждали это в подкасте, что пока непонятно как это все будет работать, но все к этому идет.

      • Евгений Подбельский

        10.11.2014 at 12:34

        Калькулятор в ленте, конечно, можно представить, но это глупо и бессмысленно. Какое уведомление будет от калькулятора? Что он есть?

  4. Даниил Берник

    03.11.2014 at 17:22

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

  5. Евгений Капранов

    04.11.2014 at 12:27

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

  6. Jurij Beklemišev

    04.11.2014 at 19:04

    Автор пишет про будущее, а описывает оплату с помощью кредитной карты. Фейл.

  7. Глеб Ткачук

    05.11.2014 at 12:50

    Звучит так, будто design metro windows 8 оказался самым прозорливым. У него все иконки и так в виде карточек, некоторые из которых можно сделать интерактивными.

    А смена парадигмы для ios коснется того, что главный экран поменяется с экраном уведомлений местами(по свайпу с верхней части экрана)?

  8. tesla

    05.11.2014 at 20:29

    Не совсем понял, чем это отличается от iAds к примеру. А плитки живые Микрософт уже давно изобрели и приложения они не заменили.

  9. Sergei Emelyanenko

    06.11.2014 at 02:28

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

  10. Алексей Кабанов

    08.11.2014 at 00:43

    направление правильное, но тактическое, не долгосрочное. Если смотреть стратегически, то мы имеем два крупных направления “технологизации человека”, одно, условно “погружает”, другое – “обволакивает” (простите за романтический подход к терминологии”. Что это значит? Это значит, что первое направление – технологичное. Оно дает новые возможности, широким веером. Никто не знает, что победит, поэтому, пусть расцветают 100 цветов. Второе направление – органичное. То, что стало повседневным, вплетается в повседнвный ритм жизни. Лучший дизайн – которого нет. То есть, функция выполняется, но специально взаимодействовать с ней не нужно. Каждое направление имеет три тактических шаблона. Итого – шесть. И ни один из шести НИКОГДА не выйдет из моды. Это касается не только техники, это касается всего окружения человека, всех принципов взаимодействия и это охватывает жизнь каждого человека от рождения и до смерти, по мере увеличения пресловутого User Expirience. Так вот, приведенный в статье шаблон, это второй шаблон обволакивания. Вплетание в хронологию. Есть повседневный, привычный ритм, в него вплетаются новые взаимодействия и они становятся естественными. Шаблон “ленты событий” удобен для человека. Карточки в ленте расположены по приоритету. Если до дальних не доберешься – не так и страшно.

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

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

  11. Mike Grizli

    08.11.2014 at 08:36

    в статье упускается один не маловажный момент – на сколько сократится
    автономность прибора, при таком количестве активных приложений.
    не каждое устройство способно дожить до конца дня и с нынешней архитектурой софта. так что “революция” пока откладывается или нам придется носить ранец с батарейками :)

    • AppTractor

      08.11.2014 at 12:31

      Да ни на сколько, почему она должна сократиться, какие дополнительные энергозатраты тут нужны?

  12. Евгений Подбельский

    10.11.2014 at 12:38

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

You must be logged in to post a comment Login

Leave a Reply

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

Snapchat ждет редизайн

Чтобы справиться с замедлением Эван Шпигель объявил о планах сделать редизайн приложения.

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

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

/

Snap Inc. сегодня объявил о результатах работы в третьем квартале 2017 года. Они ниже ожиданий – за три месяца прибавилось 4.5 миллиона пользователей (против ожидаемых 8), а рекламные ставки снизились на 60% по сравнению с прошлым годом. Snap заработал 207.9 миллиона, что заметно меньше прогнозируемых 235.5 миллионов. На Spectacles компания потеряла 40 миллионов долларов.

Чтобы справиться с замедлением Эван Шпигель объявил о планах сделать редизайн приложения. Он наконец признал то, что Snapchat трудно использовать и отметил, что сейчас компания уже работает над значительным упрощением социальной сети:

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

Компания объясняет, что редизайн, скорее всего, будет «разрушительным» для бизнеса в краткосрочной перспективе, так как сейчас невозможно предсказать, как пользователи адаптируются к нему. Шпигель однако говорит, что Snap готов принять этот риск из-за потенциальных долгосрочных преимуществ.

 

 

Леонид Боголюбов
Комментарии Facebook
Продолжить чтение

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

11 оптических иллюзий в визуальном дизайне

Product-дизайнер и разработчик Балрадж Чана рассказал об оптических иллюзиях, которые часто можно наблюдать в продуктах визуального дизайна.

Анна Гуляева

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

/

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

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

1. Иллюзия деления треугольника пополам

Выравнивание треугольника по центру тяжести

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

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

Которая версия математически центрирована?

Существует две теории этой занимательной иллюзии:

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

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

Шучу, эта статья не посвящена геометрии (но формула все равно верна). Центр тяжести может быть расположен на 1/3 расстояния от каждой стороны до противоположной вершины. Этот метод можно применить и к другим формам.

2. Вертикальная горизонтальная иллюзия

Это прямоугольник? Это самолет? Нет… это квадрат?!

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

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

Изображение в этом посте Facebook имеет соотношение сторон 1:1

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

3. Полосы Маха

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

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

4. Иллюзия Геринга

Оно живое!

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

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

5. Сетка Германна

Появляться или не появляться, вот в чем вопрос.

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

На пересечении линий появляются серые точки

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

6. Иллюзия одновременного контраста

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

Текст на разных сторонах имеет одинаковый цвет

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

7. Иллюзия Манкера-Уайта

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

Причина иллюзии Манкера-Уайта… вы догадались, латеральное торможение.

8. Акварельная иллюзия

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

Это визуальное явление, известное как акварельная иллюзия, зависит от сочетания яркости и контрастности контура, которое приводит к эффекту распространения цвета.

Белый цвет внутри кнопки словно приобретает легкий оттенок цвета границы.

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

9. Иллюзия Ястрова

Размер имеет значение?

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

Благодаря этой иллюзии мы воспринимаем одинаково изогнутые края разными

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

10. Иллюзия Корнсвита

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

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

Эта иллюзия создает похожий эффект, как и две вышеупомянутые, но кое в чем она отличается:

  • В примере полос Маха эффект возникает в зонах, близких к краю каждого оттенка. Иллюзия Корнсвита влияет на восприятие всей фигуры.
  • В иллюзии Корнсвита светлый край кажется светлее, а темный край – темнее. Это противоположно обычным эффектам контраста.

11. Иллюзия Мюллера-Лайера

Отклонение для оптимального визуального восприятия

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

Без отклонения буква e в LinkedIn и буква z в Amazon кажутся несбалансированными

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

Зачем нам нужно отклоняться от высоты в типографике?

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

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

Другие значимые иллюзии:

Анна Гуляева
Комментарии Facebook
Продолжить чтение

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

Год работы над дизайном WhatsApp

Несмотря на то, что WhatsApp принадлежит компании Facebook, он работает достаточно обособленно. Дизайнер Чарли Дитс рассказал о подходе WhatsApp к созданию дизайна продукта.

Анна Гуляева

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

/

Несмотря на то, что WhatsApp принадлежит компании Facebook, он работает достаточно обособленно. Дизайнер Чарли Дитс рассказал о подходе WhatsApp к созданию дизайна продукта.

Я работаю дизайнером продуктов в Facebook почти четыре года. Я работал во многих командах: Groups, Sharing и Privacy. В прошлом году я получил прекрасную возможность начать работать над WhatsApp. Я знал, что создание дизайна WhatsApp будет немного отличаться от создания дизайна для Facebook. Но эта работа научила меня большему, чем я ожидал – я начала подходить к проблемам с разных сторон.

Я много узнал за последний год и хочу поделиться своими наблюдениями за дизайном Facebook и WhatsApp.

Сильные принципы

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

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

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

Если я рассказываю это дизайнерам из Facebook, они бурно реагируют. Они говорят что-то вроде: “Меня бы это злило!”, “Кто принимает решения о развитии продукта?”, “Не кажется ли, что у тебя нет контроля?”, “Можешь ли ты предлагать новые идеи?”

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

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

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

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

Вовлечение через пользу против пользы через вовлечение

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

WhatsApp подходит к проблеме другим образом. Мы пытаемся создавать функции, которые будут очевидно полезными. Если функция требует пояснения, то она не готова.

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

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

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

Инструменты и дизайнерские навыки

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

Для прототипирования я часто использую Origami, но в работе в Facebook мне помогали инструменты, которые не так подходят к моей текущей работе, так как у WhatsApp нет формализованного набора элементов интерфейса, и в нем не используется API Facebook Graph.

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

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

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

Уникальные проблемы

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

В Facebook одной из основ дизайна выступает идентичность пользователя. В WhatsApp мы не требуем использовать фотографию профиля. Мы не требуем имя пользователя. Когда вы не можете положиться на реальную личность, некоторые проблемы становятся менее упорядоченными.

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

Медленно и обдуманно

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

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

Ценность Facebook – “Двигаться быстро”. Создание проекта в Facebook может быть очень быстрым, но процесс его развертывания может занять время. Если бы у WhatsApp был похожий девиз, он звучал бы как “Двигаться медленно и обдуманно”. Мы тратим больше времени на стадии дизайна, потому что мы не поддерживаем внесение изменений на фазе разработки. Когда мы передаем дизайн инженерам, мы пытаемся отдать им как можно больше конечных спецификаций и прототипов. Поэтому стадия разработки проходит спокойно, что нравится инженерам. Потенциальный минус такого подхода – разработчики могут чувствовать себя менее вовлеченными в процесс создания продукта и более изолированными от принятия решений.

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

Итог

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

Анна Гуляева
Комментарии Facebook
Продолжить чтение

Календарь

ноябрь

16ноя - 18Весь деньVIII Всероссийский форум молодых лидеров YouLead

17ноя - 19Весь деньТИЛТЕХ МЕДХАК

18нояВесь деньDevFest Gorky 2017

24ноя - 26Весь деньWhat the hack?!

25нояВесь деньLadies Code: время технологий

25нояВесь деньSmart Taler 2017

30нояВесь деньSmart Cars & Roads 2017

декабрь

5дек18:30- 22:00Яндекс изнутри: глазами iOS-разработчика

8дек - 9Весь деньКубок СTF России

9дек - 10Весь деньGames Gathering 2017

9декВесь деньЛекционный день по игровой индустрии

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

Каждому подписавшемуся - "1 час на UI аудит": бесплатный ускоренный курс для разработчиков веб и мобильных приложений!

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

Наш Facebook

Популярное

X

Спасибо!

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