Я мыслю пространственно, и вы тоже. Можете ли вы почесать левое ухо не глядя? А вытащить козявку из носа, не достав при этом до мозга? Вы помните, где оставили ключи? Можете ли вы печатать, не глядя на клавиатуру? Вы знаете, в каком кармане сейчас ваш телефон? Направление «вверх» — это куда? Знаете ли вы, где находится ванная комната?
Конечно, да! Чтобы понимать весь сложный мир вокруг нас, в своём воображении мы представляем многомерные модели предметов. Кроме того, мы можем задействовать этот способ мышления даже для того, чтобы обрабатывать абстрактные понятия.
Я считаю, что лучшее программное обеспечение является продолжением деятельности человеческого мозга. Оно должно позволять нам мыслить естественным образом, подстраиваться под наше мышление, а вовсе не наоборот. Интерпретация информации должна быть работой исключительно компьютера, а не нашей. Мы именно для этого создаём цифровых рабов.
Поэтому хороший пространственный интерфейс должен оправдывать наши ожидания, подобно моделям, существующим в физическом мире. Он создан для человека и поддерживает наш ум, который мыслит в категориях пространства и времени. Эти интерфейсы учитывают, где находятся предметы. Пользоваться ими так же легко, как идти через хорошо спланированное здание. Одно пространство переходит в другое без каких-либо неожиданностей.
Моделирующее пространство
Чтобы разработать пространственный интерфейс, вам нужно думать как в пределах экрана, так и за его пределами. Вы должны помнить о физических свойствах предметов в вашем интерфейсе. Откуда предмет появился? Куда он уйдёт? Как он будет вести себя при кинетическом воздействии? Перенимают ли одни объекты физические свойства других? Где вы находитесь относительно всего остального?
На эти вопросы сложно ответить словами. И, пусть это очевидно, но я всё-таки считаю, что эффективнее решать визуальные вопросы с помощью изображений.
Рисуем карту
Схематическое мышление
Когда вы разрабатываете пространство, очень полезно представить его себе как физическую модель, которой можно манипулировать, по которой можно пройтись. Вместо того чтобы размещать рядом друг с другом отдельные макеты в одном измерении, попробуйте мыслить на уровень выше — пространственно.
Ниже приведен разбор парадигмы контекстуального увеличения, которая стала ключевой при создании Keezy Drummer.
Простая карта, описывающая отношения между пространствами в интерфейсах в Keezy Drummer. На ней не отражены границы экрана. Стрелки представляют собой временное измерение.
Четвёртое измерение
Можно визуализировать отношения между измерениями как сложение измерений более низкого уровня. Каждое новое измерение создает значительно более сложную модель для визуализации.
Как видите, представление четырёх измерений в двумерной форме довольно быстро усложняется. «W» в этой фигуре представляет время.
Переходный интерфейс, демонстрирующий контекстуальное увеличение в Keezy Drummer.
Мы можем разрабатывать интерфейс с учётом времени, принимая во внимание кинетику и переходные интерфейсы. И временные, и пространственные индикаторы обладают характеристиками физических предметов.
Управление списком
Движение подразумевает пространство. Движение усиливает физические характеристики пространства на экране и вне его. Объекты, ограниченные разумными физическими законами, помогают создать чёткую модель.
Мы все видели эту классическую модель удаления строк из списка. Свайпом сдвиньте ячейку — и за ней появится кнопка. Тапните по иконке — и вся ячейка исчезнет.
А что произойдёт, если изменить то, как ячейка уходит с экрана?
Если мы смягчим или облегчим движение ячейки, уходящей с экрана, мы можем предположить, где она должна остановиться. В нашем случае ячейка остановится недалеко за пределами экрана. Это можно сделать, если мы подразумеваем, что есть некая зона временного хранения, из которой удалённые ячейки можно вернуть в список. Например, мы могли бы дать пользователю возможность свайпом открыть с правой стороны экрана графическое окно, в котором отразились бы удалённые ранее пункты списка.
Инструкции по Material Design от Google, кажется, предполагают, что вы должны только увеличивать скорость предметов, покидающих экран. Позволю себе не согласиться.
Если скорость предмета увеличивается, где он должен в конце концов оказаться? Вне нашего доступа? Мы что, отправляем этот предмет в вакуум космического пространства?
Если же ячейка из списка свободно вращается и перемещается по осям x и y, прекращается ли её движение вне системы? Может, там есть гравитация. Может, она падает в кучу таких же удалённых ячеек.
Перемещение по оси Z подразумевает глубину.
Ячейка из списка может проваливаться. Она может свернуться вглубь, как гармошка аккордеона. Она может даже заскрипеть. Цвет фона мог бы даже вытечь из ячейки, как жидкость. Я могу бесконечно долго продолжать с визуальными примерами, но, думаю, вы уже поняли, о чём речь; с помощью движения и пространства можно закодировать очень много значений.
Интерфейсы с правильным пространственным дизайном
Scorekeeper
Scorekeeper довольно концептуален, но он отлично справляется с фокусировкой. Он отделяет режимы, а не предоставляет пользователю раздутый набор опций, через которые ему придётся ещё прорваться. Сложность прячется за второстепенными и третьестепенными субинтерфейсами. Каждый субинтерфейс при этом так же прост, как и родительский.
Tinder
Tinder известен тем, что задействует в своем интерфейсе парадигму карт. Пользователю представляется бесконечная колода карт, которая вовсю использует глубину по оси z. Отбросьте карту из колоды направо, если вам интересна девушка, и налево, если нет. Кроме того, если вы нажмёте кнопку «сердце» или «х», карта автоматически отбросится на соответствующую сторону экрана, усилив таким образом функцию пространства.
А это физическая, кинетическая модель, которая очень похожа на описанную выше.
Второстепенные экраны обычно размещаются на горизонтальном отрезке, что отражается в движении навигации: нисходящий каскад к расположенному ниже контенту. Отличный пример движения, используемого для отображения подразумеваемого пространства.
Я не уверен, что это было сделано намеренно, но интерфейс переписки с теми, кто вам понравился, находится с правой стороны, с той же, куда вы отбрасывали карты с понравившимися вам людьми.
Tumblr, iOS
Модель Tumblr очень проста. Существует несколько пространств, соединённых между собой панелью вкладок (tab bar). Это легко визуализировать, если вы представите себе интерфейс с точки зрения камеры. Постоянная панель инструментов следует за нами, будто привязанная к камере, через которую мы смотрим. И, хотя вы не видите детального движения по оси x по мере смены пространств (как это сделано в Tinder), подразумевается ощущение пространства с обеих сторон колонок.
Взгляд сверху открывает нам интерфейс, в котором сложно потеряться. Несколько высоких колонок с возможностью прокрутки и несколько пространственных накладных элементов. Этот механизм панели вкладок можно встретить везде, в том числе в таких сервисах, как Instagram, Twitter, Foursquare, и так далее.
Но ни один из этих интерфейсов не является принципиально новым. Здесь интересно использование составной модели, которая запускается прикосновением к иконке с голубым карандашом. Не имеет значения, где вы её коснётесь, вы не перенаправляетесь в новую часть интерфейса, скорее вам представляется некое временное предложение в сфокусированном виде.
Вам доступны самые простые варианты: либо выбрать тип публикации, либо закрыть меню. Изображение появляется поверх контента, как будто есть слой, существующий по оси z. Закройте изображение — и вы вернётесь в то окно, из которого его открыли. Если же вы решите совершить какое-то действие с изображением, то продолжите двигаться по оси y, а иконки будут подразумевать непрерывную среду. Это как конвейерная лента на производственной линии.
Tumblr iOS (слева) и предлагаемое мною изменение, чтобы упростить интерфейс с точки зрения пространства (справа).
Единственное мое нарекание к процессам Tumblr заключается в том, что компоновщик метаданных представлен с добавлением классического режима просмотра master-detail. Если бы я работал с дальнейшим интерфейсом, то продолжил бы представление следующего экрана с помощью движения по оси y и не стал бы внедрять дополнительного измерения по оси x. Это уменьшило бы когнитивную нагрузку, требуемую для того, чтобы представить эту пространственную модель.
Модель Facebook «Свайпни, чтобы закрыть»
Классический эффект «световой короб», но не только он. Нажмите на фотографию, и она выйдет на первый план. Новости на фоне отступают и затемняются. Смахните фотографию обратно, и она вернётся в первоначальное положение, а оригинальный вид компоновщика снова будет в фокусе. Он стабилен.
Интерфейсы с небрежным пространственным дизайном
Если разобрать этих дорогостоящих Франкенштейнов, можно многому научиться.
Spotify, ну что же ты делаешь?
Это одно из наиболее запутанных в пространственном смысле, однако довольно популярное среди пользователей программное обеспечение. Описать, как Spotify использует пространство в своём интерфейсе, — всё равно что описать комок из проводов. Бросаю вызов: сможете ли вы эффективно набросать эскиз этого комка на бумаге?
Я даже близко не подошёл к тому, чтобы передать этот интерфейс со стороны, и вообще запутался.
Пользователь Spotify сталкивается с невразумительной каруселью интерфейсов, спрятанной внутри режимов, которые заполняют собой списки, которые, в свою очередь, забиты в секции, которые содержатся в раскрывающихся списках, которые прячутся за жестами. Каждый пункт из списка в меню «гамбургер» вынуждает пользователя идти за семь вёрст хлебать киселя только для того, чтобы выполнить простейшее действие. Возникает ощущение, что для того, чтобы вообще что-то сделать, приходится играть в «Выбери себе приключение».
И хотя сбивает с толку, как вообще команда талантливых инженеров и дизайнеров могла создать такое чудовищное сооружение, если вы взглянете на ценностные ориентиры Spotify при разработке ПО, то уже вряд ли станете чему-то удивляться. Целостный подход к созданию программного обеспечения просто вышвырнули в окно ради ничем не обоснованных мемов, которые в ходу внутри компании.
Friend of mine at Apple sent me a shot of the Apple Music user experience planning room. pic.twitter.com/DzIjudtK4v
— Davey Gravy (@davegorum) 1 июля 2015
Справедливости ради надо сказать, что остальные компании в музыкальной сфере делают то же самое. Интерфейсы Apple Music и Rdio одинаково невыносимы. Пространству здесь уделяется очень мало внимания или даже не уделяется совсем.
Приложение Paper от Facebook
Это приложение расхваливали за использование пружинящих физических свойств и экстравагантную анимацию, но всё замечательно только на первый взгляд. Команда Paper создала некоторые клёвые технологии и даже открыла исходный код приложения. Его забавно запустить пару раз, и на этом всё. Paper — это детская интерактивная игрушка для iPad, которая впоследствии была немного изменена и втиснута в крошечный iPhone. Ну, это Push Pop Press, который впихнули в Facebook.
Прокрутка может длиться не один день. Пружина за пружиной, пружина за пружиной. Карточки, которые разворачиваются как новенькие газеты. Самое запутанное меню «гамбургер» во всём мире. Всё здесь симулируется и двигается ради стиля. Но это совершенно необязательный тяжёлый кинетический труд. Очень утомительно пройти через то количество физического пространства, которое описано в интерфейсе, я уже не говорю о том, что надо постоянно держать в голове модель интерфейса, чтобы помнить, где вы находитесь.
Это хороший пример того, что программа зашла слишком далеко.
Развлечение на борту авиакомпании Turkish Airlines
А это настолько очевидно, что я представлю программу без дальнейших комментариев.
Как можно избежать клубка проводов? Надо отдалиться, посмотреть шире, буквально. Как я уже раньше говорил, очень сильно помогает в таком случае схематическое мышление. Простое указание направлений на карте в результате приводит к менее хаотичному путешествию через пространство.
Несколько советов:
- Будьте осторожны, сочетая в своем проекте карусели, области прокрутки, увеличение и меню «гамбургер». Каждый из этих приёмов представляет собой пространственную сложность.
Здесь подразумевается горизонтальное пространство, но оно требует от обоих интерфейсов перемещения на огромное расстояние.
Здесь подразумевается горизонтальное пространство, розовая страница не двигается через весь экран. Мы создаём ощущение движения, но не заставляем глаза наблюдателя двигаться через весь экран. Эта модель часто используется в родных iOS-режимах просмотра Master-Detail.
- Старайтесь избегать чрезмерной конкретизации пространства. Иначе его трудно будет переварить. Время, которое будет уходить у такого проекта на то, чтобы передать ощущение пространства, может препятствовать взаимодействию пользователей с программой. Дополнительное время может вызвать ощущение, что программное обеспечение медленно отзывается на действия. Подумайте, как можно передать пространство проще. Текст не настолько важен, как ощущения.
Ранние наброски Keezy Drummer.
- Отойдите от компьютера и начните рисовать. Используйте альбомы для рисования или даже магнитно-маркерные доски. Нужно что-то более свободное, чем танцы пикселей. Думайте картинками.
Надеюсь, то, что я здесь написал, послужит толчком к тому, чтобы вы начали думать пространственно. Поиграйте в видеоигры и изучите их интерфейсы. Выйдите на улицу. Наблюдайте за физическими свойствами реальности и собственными ожиданиями от неё. Все это заложено в ДНК тех разработок, которые меня вдохновляют, и в тех работах, которые мне так хочется создавать.
Источник: vc.ru
Оригинал статьи: medium.com
