ipados 800x440 - Как Apple заново изобрела курсор для iPad

Старший вице-президент по разработке программного обеспечения Apple Крейг Федериги рассказывает о Magic Keyboard и новом курсоре iPad

Несмотря на то, что Apple не изобрела курсор, она сыграла значительную роль в его массовом использовании. Практичность курсора, впервые примененная в SRI и Xerox Parc, в сочетании с легендарной работой Сьюзен Каре из Apple, сделали курсор в виде стрелки нашим аватаром в цифровом пространстве на последующие 40 лет.

Стрелка, наклоненная под углом 45 градусов, ждет действий пользователя на экране. Это точный инструмент. Первоначальный курсор представлял собой точку, а затем линию, направленную прямо вверх. Он был продемонстрирован в ходе «The Mother of All Demos» – презентации продолжительностью около полутора часов, которая впервые показала не только компьютерную мышь, но и гиперссылки, совместную работу с документами, видеоконференции и многое другое.

Звездой шоу, тем не менее, стала маленькая линия пикселей, составляющая курсор мыши. Это был hominem in machina – человек в машине. * В отличие от предыдущих моделей ввода текста, которые помещали символ за символом в факсимиле пишущей машинки, это была нить, связавшая нас с алефом. Мы впервые увидели себя на экране.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как Apple заново изобрела курсор для iPad

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

IPhone, а потом и iPad не сразу заново изобрели курсор. Вместо этого они полностью удалили его. Они заменили цифровой «призрак в машине» физическим кончиком пальца. Сенсорные взаимодействия принесли с собой «липкость» – объединение намерения и действия 1: 1. Если вы чего-то коснулись, то это касание что-то сделало. Если вы перетащили палец, контент последовал за ним.

Не так давно, Apple  выпустила новый тип курсора – гибрид двух миров пикселей и касаний. Думаю, курсор iPad заслуживает более пристального изучения. Это оригинальный ремикс от одной из самых обсуждаемых компаний на планете.

Чтобы лучше понять новый курсор и его модели взаимодействия, я пообщался с Крейгом Федериги. Он рассказал о его разработке и ряде решений, принятых командами Apple. Давайте посмотрим, что отличает новый курсор от того, что было раньше… при этом он остается до странного знакомым.

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как Apple заново изобрела курсор для iPad

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

Честно говоря, на этом можно было остановиться. Грубая копия пальца, выступает в роли курсора. Но концепция Apple продвигается дальше. По мере приближения к интерактивному элементу круг растягивается, плавно охватывая и икапсулируя кнопку.

Здесь также используется идея переменной скорости курсора. Когда вы приближаетесь к объекту на экране, курсор меняет скорость движения, чтобы быстрее добраться до него, но делает это контекстуально, а не линейно, как в macOS или Windows.

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как Apple заново изобрела курсор для iPad

Это микс из предсказания направления движения, анимации и физики.

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

Идея, что курсор может по мере необходимости плавно изменяться в контексте, не нова. I-образный курсор (появляется при наведении курсора на редактируемый текст) является хорошим примером. Были также ранние эксперименты в научно-исследовательском центре Xerox Parc – месте, где родилась компьютерная мышь. Там также использовался курсор-трансформер. Они даже пытались изменять его цвет, но так и не дошли до концепции экранных элементов, как интерактивных объектов – вместо этого выбрав имитацию функций клавиатуры.

Но такого курсора, как в новой версии iPadOS, прежде не было. Он спроектирован, чтобы подражать вашему пальцу. Это уникальное решение.

—————————

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

До релиза новой функции команда Apple с удовольствием наблюдала за предположениями, что Apple добавит в iPad стандартный курсор – и использовала его в качестве мотивации для создания, чего-то более соответствующего Magic Keyboard. Все сплетни сводились к тому, что Apple добавит поддержку курсора в iPadOS, но до последней минуты предполагалось, что мы увидим традиционный указатель, который максимально приблизит iPad к поведению «ноутбука».

С тех пор как в 2018 году в iPad Pro появился Smart connector, пользователи, ежедневно использующие iPad Pro, ждали, когда Apple выпустит «настоящую» клавиатуру для этого устройства. Я рассказал о своем опыте работы с чехлом-клавиатурой Smart Keyboard Folio в обзоре нового iPad Pro, а о Magic Keyboard в этом обзоре, но достаточно сказать, что новый дизайн невероятно удобен для тех, кто много печатает. И, конечно же, он принес с собой трекпад мирового класса.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как Apple заново изобрела курсор для iPad

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

Пара истин, лежащих в основе этого процесса:

  • iPad в первую очередь сенсорный девайс.
  • iPad – самый универсальный компьютер, который делает Apple.

В некотором смысле работа над новым курсором iPadOS началась с обновленного интерфейса Apple TV еще в 2015 году. Если вы заметили, что есть определенное сходство между поведением курсора в iPadOS и его работой в Apple TV, вы не одиноки. Например, знакомый «прыжок» из одной точки в другую и слабый блеск кнопки, когда вы двигаете пальцем и «зависаете» на ней.

«Мы должны были выяснить, как различные элементы будут работать вместе», – говорит Федериги. «Мы знали, что нам нужен сенсорный курсор, который не будет обладать слишком высоким уровнем точности. Мы знали, что у нас есть опыт фокусировки, подобный Apple TV, который мы могли бы использовать. А при работе с текстом, мы хотели усилить ощущение фидбека».

«Мне очень нравится, что для улучшения iPadOS мы использовали идеи из множества источников. Этот опыт основан на нашей работе над tvOS, многолетней работе над Mac, разработки iPhone X и раннего iPad, чтобы создать что-то новое, что будет ощущаться естественным для iPad».

И интерфейс Apple TV не просто «вдохновил» курсор –  основная команда дизайнеров отвечает за работу разных групп, включая Apple TV, iPadOS и другие продукты.

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

К средствам ввода Apple относятся:

  • Мышь (Mac)
  • Тачпад(Mac, MacBook, iPad)
  • Сенсорное управление (iPhone, iPad)
  • Apple Pencil (iPad)
  • AR (iPhone, iPad, все еще зарождающийся инструмент)

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как Apple заново изобрела курсор для iPad
(Изображение:Jared Sinclair/Black Pixel)

Нужно было сделать курсор, чувствительный к прикосновениям. Они знали, что курсор Apple TV был перспективный, и знали, что, когда дело доходит до текста очень важен интерактивный фидбек.

Определить какой элемент, где и как применить, было довольно трудно.

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

«Таким образом, мы создали круг, который элегантно трансформируется для выполнения поставленной задачи. Например, он превращается в фокус вокруг кнопки, или переключается на другую кнопку, или превращается в нечто более точное, когда это имеет смысл. Например, I-образный курсор для выделения текста».

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как Apple заново изобрела курсор для iPad

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

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

Команда знала, что нужно придать курсору чувство плавности, ставшее столпом работы iOS. Таким образом, они анимировали его переходы от точки до I-образного курсора или круга. Если вы замедлите анимацию, вы увидите, как она растет по кривой Безье и обретает новый вид. Это служит, как для «удовольствия» пользователя, так и для того, чтобы показать куда движется курсор. Это синхронизирует действия пользователя с кругом, что всегда опасно, когда вы даете даже небольшую автономию аватару пользователя.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как Apple заново изобрела курсор для iPad

Находясь на иконке, курсор перемещает ее в небольшом параллакс-эффекте, но это смещение иконки имитируется – здесь нет слоев, как в Apple TV.

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

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

Они знали, что никто не собирается переписывать Интернет под Apple.

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

Разумеется, любые сторонние приложения, использующие стандартные элементы iPadOS, сразу получат новую функциональность. Она будет просто работать. А с приложениями, использующими кастомные элементы, все довольно просто.

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

—————————

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как Apple заново изобрела курсор для iPad
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как Apple заново изобрела курсор для iPad

«Многие жесты iPad на трекпаде аналогичны жестам на Mac, поэтому вам не нужно ни думать о них, ни переучиваться. Однако они реагируют на iPad иначе, быстрее, из-за этого все кажется связанным и легким», – отметил Федериги.

Помните, что первые жесты многозадачности на iPad казались странными. Эксперимент, который в худшем случае казался бесполезным, но в лучшем случае интересным. Теперь на iPad Pro, лишенного кнопки «Домой» заметна работа, проделанная командой, создавшей iPhone X. Весьма примечательно, что они создали настолько удобную в использовании систему, что она работает даже на трекпаде.

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

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

Новый курсор iPad – это продукт, совмещающий в себе предыдущие наработки, что делает его успешным. Это объединение знаний продуктовых команд Apple TV, Mac и iPad. Это сочетание сенсорного управления, мыши и тачпада. И, конечно же, смесь желания сделать что-то новое и творческое с ограничением, вызванным необходимостью оставаться знакомым и без необходимости переучиваться. Эта особенность Apple, собирать все лучшее, продолжает занимать центральное место в философии развития компании.

Свежие вакансии
                        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 Удаленно Москва
Все вакансии

Оригинал: techcrunch.com

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

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

Дмитрий Чернышев про Артемия Лебедева

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

Шрифт New York от Apple с засечками: что это значит для веб-дизайна

Что выпуск шрифта New York говорит нам о состоянии интернет-типографики?

Представляем Play. Новый способ проектирования и создания мобильных продуктов – прямо на вашем мобильном устройстве

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