1 1 800x440 - Восприятие, реальность и iPhone. Наши постоянно меняющиеся ментальные модели

Устройство, которое мы называем телефоном, изменилось в 2007 году, когда на свет появился iPhone. Спустя шесть лет, с релизом iOS 7, Apple заявила о новом направлении в дизайне операционной системы устройства. Многие из новшеств, появившихся в этом обновлении, остаются практически неизменными в течение восьми лет. Совсем недавно iPhone X начал еще одну смену парадигмы. Теперь модели взаимодействия на рынке мобильных устройств становятся все более гомогенизированными. Я хотел бы рассмотреть, как изменялся дизайн интерфейса iPhone на протяжении многих лет, чтобы имитировать органичное интерактивное пространство, и как, соответствующим образом, адаптировалось наше сенсорное восприятие. Визуальные эффекты, такие как размытие и масштабирование – это не просто эстетические нюансы. Средства визуальной коммуникации, подобные этим, помогают людям создавать ментальные модели и постоянно расширять понимание того, что могут делать эти невероятные многофункциональные инструменты.

Поэтапные изменения

«Каждая новая среда содержит другую уже существующую среду в качестве своего контента»

– Маршалл Маклюэн

Не случайно, что устройство, изменившее парадигмы, называлось i-Phone, а не iPocketComputer или Newton. Люди хорошо понимали телефоны. Они могли использовать их в качестве ориентира. Apple специально решила назвать это post-WIMP устройство «телефоном», хотя, конечно, это было гораздо больше, чем просто телефон. Стоит вспомнить, с какими телефонными интерфейсами люди были знакомы во время выпуска iPhone:

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Восприятие, реальность и iPhone. Наши постоянно меняющиеся ментальные модели

Хотя по сравнению с десктопными компьютерами эти небольшие дисплеи были очень ограничены в своей способности отображать графику, различные цвета и иконки помогли людям понять, как взаимодействовать с различными элементами на экране, а также с какими кнопками на клавиатуре связаны элементы. Razr от Motorola, как и многие мобильные телефоны, использовал разноцветные полосы для разделения информационных и интерактивных областей. Apple в дизайне операционной системы iPhone ссылалась на подобные визуальные функции. Первые шесть версий ОС выглядели в основном одинаково, а визуальный стиль был площадкой для графических дизайнеров, которые часами настраивали слои и режимы наложения в Photoshop.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Восприятие, реальность и iPhone. Наши постоянно меняющиеся ментальные модели
Элементы интерфейса iOS 5 (OSX Daily)

Восприятие и дизайн объектов

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

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

Одним махом, iOS 7 избавилась от многих скевоморфных элементов, характерных для предыдущих версий iOS. Это заставило многих разработчиков и дизайнеров описать новую эстетику, как «плоский дизайн». Тем не менее, это было не столько резкое отклонение от направления дизайна, сколько признание того, что уже имело место: смартфоны были плоскими.

iOS 7 и искажение плоского дизайна

«IOS 7 имеет совершенно новую структуру, которая является последовательной и применяется во всей системе… Отдельные функциональные уровни помогают установить иерархию и порядок, а использование прозрачности дает вам ощущение контекста. Эти плоскости в сочетании с новыми подходами к анимации и движению создают ощущение глубины и жизненной силы»

— Джонни Айв
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Восприятие, реальность и iPhone. Наши постоянно меняющиеся ментальные модели
Представляем iOS 7 (Apple)

«IOS 7 – это не огромное изменение или полное переосмыслением использования наших смартфонов. Это просто слой краски»

— The Verge

Внезапный редизайн iOS 7, безусловно, привел к тому, что в мире технологий возникло немало шуток и споров. Понятно, что большая часть разговоров, связанных с обновлением, касалась яркого, более плоского внешнего вида интерфейса. Там, где вы ранее находили текстуры, напоминающие фетр и лен, теперь были неоновые градиенты с простыми иконками и типографикой. Там, где ранее были четкие скошенные кнопки, простые текстовые надписи стали означать элементы управления. Там, где ранее находился слайдер разблокировки, теперь весь экран реагировал на движение вашего пальца. Люди далекие от дизайна и мира технологий могли бы описать обновление, как делающее систему «ярче» или «красочнее». Или, возможно, как «усложняющее чтение», поскольку системный шрифт Helvetica был заменен на сверхлегкий аналог Helvetica Neue. В любом случае, это обновление программного обеспечения не осталось незамеченным.

Во всяком случае, мобильные интерфейсы стали глубже, а не плоскими

Возможно, незаметными – но более значительными – изменениями в iOS 7 стали улучшения дизайна взаимодействий и движений. Жесты, которые мы сейчас воспринимаем, как должное, впервые были представлены именно здесь. Например, «смахните пальцем вверх от нижней части дисплея», чтобы открыть Пункт управления, или «смахните вправо от левого края дисплея», чтобы вернуться на предыдущую страницу. Казалось, что вся система была лучше заточена под «железо»; она казалась более чувствительной к каждому прикосновению и жесту. iOS 7 и последующие релизы опирались на несколько связанных с дизайном мотивов, помогающих создать ощущение пространства и глубины:

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

Пространство, расстояние и движение

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

  1. Человеческая рука и мультисенсорный дисплей
  2. Окна приложения и главный экран.

Несмотря на то, что можно провести различие между вышесказанным, поскольку одно является физическим отношением, а другое виртуальным, наши способы понимания каждого из них, на самом деле, не так уж отличаются. Таким же образом, как ваш палец касается экрана и отрывается от него, приложения на iPhone поднимаются с главного экрана и создают пространственные отношения друг с другом. Даже, если программное обеспечение может считаться искусственным, чтобы придать смысл «анимированному» движению, наш разум использует те же механизмы, что и при реальном движении. Кроме того, физические движения и движения тех, кто нас окружает, фундаментальным образом формируют наше сознание – мы думаем с точки зрения пространства и движения, а не только  с точки зрения языка,— утверждает психолог Барбра Тверски в статье «Разум в движении».

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Восприятие, реальность и iPhone. Наши постоянно меняющиеся ментальные модели
iPhone X представил полностью жестовый интерфейс (Apple)

Тот факт, что аппаратное и программное обеспечение iPhone разрабатывалось одновременно, позволил Apple проектировать физические и графические взаимодействия в тандеме. Выпущенный в 2017 году, iPhone X представил совершенно новые способы использования основных функций устройства. Но до того, как это произошло, другое устройство незаметно использовало новый способ взаимодействия со старым. Годом ранее iPhone 7 лишился гнезда для наушников, и механической кнопки «Домой». Первое изменение привлекло гораздо больше внимания, и это, вероятно, свидетельствует об изобретательности дизайна второго изменения. Конечно, эти аппаратные изменения были необходимы для обеспечения водонепроницаемости устройства, но с ними последующие взаимодействия позволили по-новому взглянуть на физические характеристики устройства.

Кнопка «Домой» iPhone 7 на самом деле вовсе не была кнопкой. Она стала сенсорной и чувствительной к силе нажатия. При нажатии она обеспечивала, как тактильный, так и звуковой отклик, создавая иллюзию механического нажатия кнопки. Большинство людей, возможно, заметили немного другое ощущение, когда в первый раз нажали на нее, но это новое ощущение быстро стало нормой. Физическое и цифровое теперь были взаимозаменяемы, слиты как никогда. Всего через год iPhone X полностью избавился от кнопки «Домой», но для фонарика и камеры были добавлены две экранные «кнопки». Каждая требовала жесткого нажатия и предоставляла тактильный и звуковой отклик, как и «физическая» кнопка iPhone 7.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Восприятие, реальность и iPhone. Наши постоянно меняющиеся ментальные модели
Кнопка «Домой» в iPhone 7 работает точно так же, как и кнопки фонарика и камеры в iPhone X

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

Проектирование для пространства и движения

Помимо уже рассмотренных визуальных методов, дизайнеры должны поэкспериментировать с основными подходами, которые Apple использовала в интерфейсах для создания ощущения пространства. В настоящее время HIG от Apple мало что дает. Google Material Design предлагает хорошую разбивку поверхностей и высот, но это, конечно, не единственный подход, и полученные продукты могут вписаться или не вписаться в установленные паттерны пространства и движения iPhone.

Масштаб

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

Глубина резкости

В фотографии «глубина резкости» описывает расстояние объекта, на котором фокусируется объектив, в то время как расстояние за пределами глубины резкости будет выглядеть размытым. Преднамеренно низкая глубина резкости может использоваться, чтобы подчеркнуть объекты на переднем плане, например, человека на портрете. Глубина резкости – один из методов, используемых в iOS для различения удаленных поверхностей. Когда вы открываете приложение, главный экран отходит на задний план, за пределы глубины резкости. Когда вы смахиваете вверх, чтобы вернуться на главный экран, вы отталкиваете приложение от себя, пока не отпустите, и оно не встанет на свое место, вернув глубину резкости главному экрану.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Восприятие, реальность и iPhone. Наши постоянно меняющиеся ментальные модели

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

Глубина приложения

Однако непонятно, насколько «глубоким» должно быть каждое приложение. То есть до прошлогоднего обновления iOS 13, которое вводило новый паттерн по всей системе: модальные представления, появляющиеся поверх основных, слегка отодвигают основные представления на задний план. Они становятся еще дальше и слегка затемненными, но все еще в пределах глубины резкости. «Музыка» и несколько других нативных приложений использовали этот паттерн в течение нескольких лет, но iOS 13 сделала его общесистемным для share sheets и activity views. Мы, вероятно, увидим дальнейшее расширение этого паттерна в будущих обновлениях ОС, и это, безусловно, дает дизайнерам и разработчикам возможность более четко продумать глубину, пространство и движение в современных интерфейсах.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Восприятие, реальность и iPhone. Наши постоянно меняющиеся ментальные модели
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Восприятие, реальность и iPhone. Наши постоянно меняющиеся ментальные модели

Совместная эволюция

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

Спасибо за прочтение.

Свежие вакансии
                        MYTONA MYTONA Motion-designer Полная Санкт-Петербург
                        Beta Beta Senior / Middle Web Designer Офис Москва
                        Traffic Time Traffic Time Дизайнер-сборщик страниц на платформе GetCourse Удаленно Москва
                        Digital agency aim Digital agency aim Middle UX/UI дизайнер Удаленно Брянск от 80 000 ₽
                        RJ Games RJ Games UI Motion Designer / Animator Удаленно Москва
Все вакансии

Оригинал: uxdesign.cc

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Добавить комментарий
Похожие записи

Тренды UI/UX дизайна на 2020 год

Подборка основных трендов UI/UX дизайна, которые мы увидим в 2020 году

Паттерн нижней панели навигации на мобильных веб-сайтах, исследование

Гамбургер-меню? Есть ли лучшая альтернатива? В этой статье я попытаюсь рассмотреть эти вопросы

О Доне Нормане, вандализации UX и широком подходе к дизайну

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