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

Как сделать так, чтобы опыт новых платформ не калечил предыдущие, а подтягивал их — об этом и пойдет речь.

                                                                                                    .   .   .

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

С тремя платформами уже можно работать.

В современном мире к каждому продукту предъявляется требование кроссплатформенности — деньги обладателей телефонов ничем не отличаются от денег обладателей ноутбуков (шутка Чикуенка, 08:30).

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

На практике обычно открывают десктопную версию интерфейса на планшете, ловят неудобные места и небольшими изменениями стилей всё чинят. Со временем вырабатывается привычка не мельчить и на десктопе, делать размер активных зон в районе 30px, удобных для пальца.

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

                                                                                                   .   .   .

Проведите над собой эксперимент: встаньте, возьмите в руки ноутбук и на ходу попробуйте написать сообщение своему коллеге. С самого начала: найти иконку месенджера, там найти вкладку с нужным контактом, написать пару фраз и отправить. А затем сделайте то же самое, но с телефоном. С ноутбуком получится неудобно и медленно, несмотря на большой экран и клавиатуру под пальцы. Да, у ноутбука больший вес и неподходящий для удержания одной рукой форм-фактор. Хорошо, попробуйте не перемещаясь и не вставая просто взять ноутбук в одну руку и повторите эксперимент. Должно выйти намного легче и быстрее.Почему?

Современный человек привык вести несколько дел одновременно. Более того, пребывать только в одном контексте нам скучно. Например, мы комфортно себя чувствуем за ужином, слушая музыку и беседуя с другом. Сидеть в тишине сосредоточившись на еде — странно: ничего особенного не происходит, информационный канал простаивает — возникает информационный голод. Однако, чем больше контекстов, тем меньше внимания к каждому, и тем больше мы распыляемся. Если какое-то из дел вдруг требует особого внимания, мы резко перераспределяем силы через уменьшение параллельных процессов: если по телефону нам начинают говорить что-то важное — мы останавливаемся; если за ужином слышишь приятную мелодию — перестаешь жевать.

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

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

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

С появлением первых сотовых телефонов? Нет. Все-таки это стало шагом вперед для коммуникаций, а с точки зрения интерфейса — это обычная телефонная трубка без провода. Такой интерфейс не мог стать новой платформой для привычных занятий на ПК: серфинг в интернете, чтение почты, редактирование текста и фотографий. Кое-что было, но работало со скрипом.

Революцию сделал Айфон — первый удобный мобильный интерфейс.

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

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

Контексты в мобильном интерфейсе изолированы в экраны. Два и более контекста на одном экране — плохо. Маленький экран и удобные крупные элементы управления становятся естественным ограничителем. Не нужно пытаться это ограничение обойти. Почему Айфон не показывает погоду и календарь на одном экране с иконками приложений? Ведь это же так удобно, это есть в десктопе.

Только ли потому, что экран маленький? Если постараться, можно всё уместить. Но что получится в итоге — вещь, требующая повышенного внимания. Человеку будет сложно дозировать это внимание самому: ведь, чтобы выделить календарь среди погоды и иконок, нужно тоже приложить усилие.

Не менее интересен обратный эффект: один контекст на десктопе — тоже плохо. В чем ошибка развития веб-интерфейса Твиттера? Почему нам так скучно читать его на сайте и мы достаем телефоны? Веб-интерфейс дублирует мобильный:

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

Так начали появляться альтернативные популярные твиттер-клиенты для десктопа:

С этим же столкнулся Микрософт, когда получил огромное количество критики в адрес в Windows 8 — там был режим меню пуск, изолирующий человека от прочих контекстов:

В следующей версии системы эту ошибку исправили:

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

                                                                                                  .   .   .

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

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

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

                                                                                                  .   .   .

Смежной темой является спор о сайтах и приложениях. Что лучше, а что хуже? Чем одно отличается от другого?

Сайт — исторически десктопный способ представления информации. Это полотно материала со множеством контекстов: и меню, и шапка с логотипом, и колонка новостей, и подвал с контактной информацией.

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

Мобильные приложения поступили иначе: экранами они разделили единое полотно материала, позволив взаимодействовать с каждым лишь по отдельности. Стремление минимизировать количество контекстов привело к тенденции взаимодействовать с материалом без посредника, без нависающей рамки, без смены контекста. Именно поэтому все картинки начали нажиматься и увеличиваться. «Я вижу яблоко — я хватаю яблоко» — пишет Андрей Лось. Поэтому, чтобы увеличить картинку, вам нужно растянуть ее пальцами, а не искать кнопку «увеличить». С этого момента люди становятся смелее и пытаются взаимодействовать со всем, что видят на экране.

Так как же правильно переносить опыт мобильных приложений на десктоп? Не нужно (и даже вредно) отказываться от единых полотен с материалом, но стоит избегать контекстов-посредников, нависающих над основным содержимым.

Интерфейс создания поста в старом ЖЖ:

и в новом Медиуме:

Впереди нас ждут часы, очки, шлемы виртуальной реальности, проекционные и нейроинтерфейсы. Они станут новыми платформами взаимодействия с информацией. Но ничто новое не должно перечеркивать старое. «Мы всё делали неправильно, а сейчас всё везде переделаем» — нет, это путь в никуда. Любой опыт должен переноситься между разными типами устройств с учетом контекста их использования.

Danil Kovchiy
https://medium.com/@kovchiy/-c36cea14c65c#.8seyz2xww