Кроссплатформенный интерфейс и интерфейс под платформу
Поверьте, мне тоже странно говорить об этом в 2014 году. Там внизу вас ждут картинки с айфоном и рассуждения о том, что такое платформа. У меня бы на вашем месте в голове зазвучало: «Not this shit again!» Но глядя на то, что творится вокруг, мне кажется, что не все всё поняли.
Сегодня бумерангом мобильные интерфейсы начали влиять на десктоп. Но зачастую они влияют на него так же неправильно, как в свое время десктоп влиял на них.
Как сделать так, чтобы опыт новых платформ не калечил предыдущие, а подтягивал их — об этом и пойдет речь.
Под платформой подразумевается контекст использования. Существует великое множество устройств с микроотличиями в размерах и эстетике — нет смысла проектировать уникальный интерфейс под каждую модель. Зато любое устройство сейчас предназначено для одного из трех контекстов: стол, диван и карман.
С тремя платформами уже можно работать.
В современном мире к каждому продукту предъявляется требование кроссплатформенности — деньги обладателей телефонов ничем не отличаются от денег обладателей ноутбуков (шутка Чикуенка, 08:30).
Считается, что планшет — это неуклюжий десктоп. Изначально планшеты позиционировались как замена среднестатистического ноутбука. У этих двух платформ похожие контексты, похожая целевая аудитория — кажется справедливым дать им похожий интерфейс. Кроме того, это выгодно с точки зрения трудозатрат.
На практике обычно открывают десктопную версию интерфейса на планшете, ловят неудобные места и небольшими изменениями стилей всё чинят. Со временем вырабатывается привычка не мельчить и на десктопе, делать размер активных зон в районе 30px, удобных для пальца.
Есть методики и от обратного — сначала мобильная версия, потом планшет, потом ноутбук. У каждого свой путь. Но часто на входе уже есть какой-то интерфейс для десктопа, и его нужно малой кровью оптимизировать для планшета и телефона, потому что на основательный подход не хватает разработчиков и дизайнеров.
Проведите над собой эксперимент: встаньте, возьмите в руки ноутбук и на ходу попробуйте написать сообщение своему коллеге. С самого начала: найти иконку месенджера, там найти вкладку с нужным контактом, написать пару фраз и отправить. А затем сделайте то же самое, но с телефоном. С ноутбуком получится неудобно и медленно, несмотря на большой экран и клавиатуру под пальцы. Да, у ноутбука больший вес и неподходящий для удержания одной рукой форм-фактор. Хорошо, попробуйте не перемещаясь и не вставая просто взять ноутбук в одну руку и повторите эксперимент. Должно выйти намного легче и быстрее. Почему?
Современный человек привык вести несколько дел одновременно. Более того, пребывать только в одном контексте нам скучно. Например, мы комфортно себя чувствуем за ужином, слушая музыку и беседуя с другом. Сидеть в тишине сосредоточившись на еде — странно: ничего особенного не происходит, информационный канал простаивает — возникает информационный голод. Однако, чем больше контекстов, тем меньше внимания к каждому, и тем больше мы распыляемся. Если какое-то из дел вдруг требует особого внимания, мы резко перераспределяем силы через уменьшение параллельных процессов: если по телефону нам начинают говорить что-то важное — мы останавливаемся; если за ужином слышишь приятную мелодию — перестаешь жевать.
Чем отличается человек, сидящий за столом, от человека, гуляющего по улице — количеством запущенных процессов. Сидя в кресле не расходуются силы и внимание. Что это значит для компьютерного интерфейса? Что человека можно смело загружать параллельными процессами — ему это по кайфу, так он не будет скучать.
Появление оконных графических интерфейсов — естественно для таких условий. Ведь, первыми персональными компьютерами стали настольные. Каждое окно — контекст. Их можно расположить рядом, как на приборной панели, и следить за всем параллельно.
Когда произошла революция в интерфейсах? С появлением первых наладонников? Нет. Если он у вас был, вы должны помнить, что этой штукой сложно пользоваться на ходу — обе руки заняты, постоянно хочется остановиться и сощуриться:
С появлением первых сотовых телефонов? Нет. Все-таки это стало шагом вперед для коммуникаций, а с точки зрения интерфейса — это обычная телефонная трубка без провода. Такой интерфейс не мог стать новой платформой для привычных занятий на ПК: серфинг в интернете, чтение почты, редактирование текста и фотографий. Кое-что было, но работало со скрипом.
Революцию сделал Айфон — первый удобный мобильный интерфейс.
Да, мы все видели его много раз и еще больше слышали о том, какой он прекрасный. Но о чем многие могли не сказать вслух? О принципе одного контекста в конкретный момент времени. Это кажется очевидным и простым, как три закона Ньютона, как конструкция лодки или самолета. Однако, чтобы к этому прийти, человечеству потребовалось время.
Принцип одного контекста — основное отличие мобильной платформы. Без этого она перестает быть удобной и сразу проигрывает десктопу. Когда мы встаем с устройством из-за стола, добавляется два важных контекста: нужно идти и смотреть по сторонам, нужно держать в руках устройство. Второй фактор промдизайнеры всеми силами стараются минимизировать. Так в последнее время начали появляться часы-коммуникаторы — компьютер не нужно держать рукой, он держится на ремешке сам.
Контексты в мобильном интерфейсе изолированы в экраны. Два и более контекста на одном экране — плохо. Маленький экран и удобные крупные элементы управления становятся естественным ограничителем. Не нужно пытаться это ограничение обойти. Почему Айфон не показывает погоду и календарь на одном экране с иконками приложений? Ведь это же так удобно, это есть в десктопе.
Только ли потому, что экран маленький? Если постараться, можно всё уместить. Но что получится в итоге — вещь, требующая повышенного внимания. Человеку будет сложно дозировать это внимание самому: ведь, чтобы выделить календарь среди погоды и иконок, нужно тоже приложить усилие.
Не менее интересен обратный эффект: один контекст на десктопе — тоже плохо. В чем ошибка развития веб-интерфейса Твиттера? Почему нам так скучно читать его на сайте и мы достаем телефоны? Веб-интерфейс дублирует мобильный:
Это же скука — сидеть в кресле и смотреть на один единственный поток сообщений. Старый интерфейс позволял работать в двух контекстах сразу — поэтому был на голову выше:
Так начали появляться альтернативные популярные твиттер-клиенты для десктопа:
С этим же столкнулся Микрософт, когда получил огромное количество критики в адрес в Windows 8 — там был режим меню пуск, изолирующий человека от прочих контекстов:
В следующей версии системы эту ошибку исправили:
В этом и кроется ловушка упрощения интерфейсов на десктопе. Монотонные и линейные композиции скучны, изолирующие экраны мешают, а не помогают.
Учитывая всё вышеперечисленное, вернемся к трем платформам: стол, диван и карман. Стол не требует от человека никаких дополнительных усилий, всё свое внимание можно направить в компьютер. Сидя на диване, мы держим устройство в руке — мы уже немного скованы и следим за тем, чтобы не уронить планшет, наши руки не полностью свободны. Вынимая телефон из кармана на ходу, мы должны быть уверены, что не уроним его на землю и что не врежемся в столб. Вот как это должен отражать интерфейс:
Важно понимать, что размер экрана не является основной причиной сокращения элементов интерфейса — он лишь к этому подталкивает. Поэтому, делая мобильный интерфейс для новых моделей телефонов с увеличенным экраном, нужно десять раз подумать, как правильно использовать дополнительное пространство. Показать больше элементов списка — хорошо, сделать более крупными кнопки — еще лучше, а вот добавить панель с пунктами меню или любым другим новым смыслом — скорее всего плохо.
В этом разница кроссплатформенных интерфейсов и интерфейсов под платформу. Кроссплатформенный интерфейс, с какой стороны его ни начинай, будет хуже. Если начать с десктопа и сужать до телефона — получится длинный рулон с кучей контекстов, этим будет сложно пользоваться. Если начать с телефона и расширять до десктопа (популярный mobile first), в конце получится скука, которую мало кто станет открывать на ноутбуке.
Смежной темой является спор о сайтах и приложениях. Что лучше, а что хуже? Чем одно отличается от другого?
Сайт — исторически десктопный способ представления информации. Это полотно материала со множеством контекстов: и меню, и шапка с логотипом, и колонка новостей, и подвал с контактной информацией.
О приложениях всерьез и по-новому заговорили в момент распространения мобильной платформы. Приложения были и на десктопе, но играли роль рамки над полотном. Такая рамка воспринималась как слой для работы с содержимым, некая помеха, от которой избавлялись при первой возможности: создавать документ можно и в Ворде, но читать лучше, спрятав все панели.
Мобильные приложения поступили иначе: экранами они разделили единое полотно материала, позволив взаимодействовать с каждым лишь по отдельности. Стремление минимизировать количество контекстов привело к тенденции взаимодействовать с материалом без посредника, без нависающей рамки, без смены контекста. Именно поэтому все картинки начали нажиматься и увеличиваться. «Я вижу яблоко — я хватаю яблоко» — пишет Андрей Лось. Поэтому, чтобы увеличить картинку, вам нужно растянуть ее пальцами, а не искать кнопку «увеличить». С этого момента люди становятся смелее и пытаются взаимодействовать со всем, что видят на экране.
Так как же правильно переносить опыт мобильных приложений на десктоп? Не нужно (и даже вредно) отказываться от единых полотен с материалом, но стоит избегать контекстов-посредников, нависающих над основным содержимым.
Интерфейс создания поста в старом ЖЖ:
и в новом Медиуме:
Впереди нас ждут часы, очки, шлемы виртуальной реальности, проекционные и нейроинтерфейсы. Они станут новыми платформами взаимодействия с информацией. Но ничто новое не должно перечеркивать старое. «Мы всё делали неправильно, а сейчас всё везде переделаем» — нет, это путь в никуда. Любой опыт должен переноситься между разными типами устройств с учетом контекста их использования.
