9 января 2018

3 урока по организации пространства, полученные в Диснейленде. Урок 3

Продолжаем учиться в Диснейленде! Если концепция и структура организации пространства уже продуманы, самое время применить классические принципы организации информационной среды. Как это сделать, описывает третья, последняя часть перевода от UX-аналитика Noveo Натальи.

Урок 3: Используйте классические принципы, чтобы дать людям представление о месте

Уже имея структурный каркас, мы можем теперь заняться созданием такого места, по которому люди будут с лёгкостью и удовольствием перемещаться. И вот тут-то нам и пригодятся знания из области городской архитектуры и дизайна.

Книга «Образ города» (1960)

В частности, полезными будут исследования того, как у людей формируются ментальные модели тех мест, где они обитают. Кевин Линч в своей книге «Образ города» (1960) проникает в суть этого процесса. В книге представлены 5 элементов, определяющих то, как люди воспринимают городское пространство:

  • Районы: части города, обладающие своей собственной атмосферой, о которых люди могут сказать, что «находятся в них».
  • Пути: возможности для перемещения по городу.
  • Ориентиры: физические структуры, которые дают людям чувство опоры.
  • Границы: рубежи между двумя зонами; линии, которые разделяют пространство на части.
  • Узлы: места сосредоточения активности; центральные точки, в которых собираются люди.

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

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

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

Пути, узлы и ориентиры

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

Главная навигационная панель сайта usatoday.com позволяет посетителям перейти к основным разделам сайта

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

В Диснейленде реализована «центрально-лучевая» модель навигации: в нём есть центральный узел, вокруг которого располагаются все страны. Проект парка предполагал лишь один вход, который вел по Мэйн стрит США прямо к центральному узлу. Здесь стоит упомянуть, что и это тоже было инновацией Диснея в дизайне парков развлечений: другие владельцы парков, с которыми он консультировался во время проектирования Диснейленда, сказали ему, что такая схема не сработает, так как она ограничивает количество людей, которые смогут зайти в парк.

Посетители попадают в парк через 2 тоннеля под станцией поезда. Затем они идут по Мэйн стрит США к центральному узлу, откуда могут направиться в любую из стран по своему желанию. Мэйн стрит США — это пример пути из книги Линча: дорога, по которой пользователи могут перейти из одного места в другое.

Мэйн стрит США в 50-х

Люди инстинктивно понимают, что надо пройти по Мэйн стрит, потому что их внимание сразу притягивается к необычному объекту в ее конце — Замку Спящей Красавицы — достопримечательности, которую не увидишь в конце обычной американской главной улицы. Этот замок — пример того, что Дисней называл истуканом: бросающийся в глаза вертикальный элемент, призванный притянуть к себе внимание гостей и побудить их пойти в его направлении.

Космический корабль служил ориентиром в Стране Будущего

Оказавшись в центральном узле, гости оглядываются по сторонам и замечают и другие манящие к себе объекты: домик на дереве Робинзона в Стране Приключений, пароход “Марк Твен” во Фронтире и космический корабль в Стране Будущего. Эти заметные объекты в Диснейленде выступают как ориентиры: они не просто привлекают внимание людей, но также помогают им ориентироваться в пространстве, которое иначе было бы хаотичным.

Элементы организации пространства на ранней схеме Диснейлэнда (1955)

Двигаясь в направлении ориентира, посетители Диснейленда в результате оказываются у главного входа в страну — площади, где они могут наблюдать тему страны, ее аттракционы — все то, что для неё специфично. Это пример узлов в том смысле, в котором говорил о них Линч.

Такая комбинация узлов, соединяющих их путей и ориентиров, которые привлекают внимание людей, и делает навигацию по Диснейленду столь простой и понятной. В UX-дизайне есть эквиваленты для всех трёх этих понятий. Как уже упоминалось, панели навигации и системы поиска обеспечивают пользователям информационных систем возможность перемещаться из одного раздела в другой. Семантические элементы, такие как лейблы и иконки, представляют собой ориентиры. Это интерактивные объекты, показывающие пользователю, куда он может пойти в данном информационном пространстве. А экраны второго уровня — это узлы: они предоставляют единый доступ к информации, относящейся к каждому разделу системы, а также формируют цельный уникальный образ каждого раздела.

Бросающаяся в глаза кнопка корзины на сайте Amazon служит ориентиром. Она все время приглашает пользователя начать оформлять покупку

Районы

Эти различные разделы информационной среды можно рассматривать как районы в значении, которое придавал этому термину Линч. Как вы уже, наверное, догадались, отдельные страны в Диснейлэнде — Страна Фантазии, Страна Приключений, Страна Будущего и т.д. — можно считать в этом смысле районами. У них у всех есть свои собственные характеристики, которые отличают их друг от друга и придают каждой свой неповторимый колорит.

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

Основные разделы сайта USA Today отличаются друг от друга разными цветами и специфической семантической структурой

Если говорить о создании единой темы в контексте UX, на ум приходят 2 основных аспекта:

  • визуальная презентация,
  • стиль и тон речи.

И в том, и в другом случае тема и стиль должны работать на концептуальную структуру, на которой строится вся работа. Большинство дизайнеров понимает, как важно выбрать правильный стиль или интонацию, когда дело касается текста. Однако, что касается визуального дизайна, мы всё еще чересчур попадаем под влияние трендов.

Например, вспомните, как несколько лет назад все переметнулись в сторону «плоского» дизайна, который отказался от скевоморфизма (реалистичности) в изображении деталей в пользу более строгой «цифровой» эстетики. Хотя я и не имею ничего против этого стиля как такового, мне не нравится, когда дизайнеры выбирают его для своих проектов только потому, что так делают все остальные. Визуальный стиль должен поддерживать и усиливать смысловой контекст.

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

В том, чтобы создавать «реалистичный», «скевоморфный» (или даже «причудливый») дизайн, не только нет ничего предосудительного, но иногда это самый верный подход.

Границы

И наконец, рассмотрим границы. Одна из самых интересных фишек Диснейленда — то, как в нем решены переходы: как между отдельными странами, так и между парком в целом и окружающим миром.

Дизайн стран в парке был тщательно продуман так, чтобы их темы плавно перетекали из одной в другую. Переходя из Страны приключений в Страну Дикого Запада, вы не увидите резкой перемены. Напротив, архитектура двух стран, их растительность и все остальное мягко смешиваются, создавая эффект, подобный киношному растворению картинки в кадре (многие дизайнеры Диснейленда работали в киноиндустрии, поэтому влияние кинематографа на его дизайн столь сильно). Такие плавные переходы я и называю «слабыми» границами.

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

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

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

Публичная и закрытая части сайта citibank.com выглядят практически одинаково, но по сути это совершенно разные места. Чтобы перейти эту границу, нужно ввести имя пользователя и пароль. Это довольно сильная граница

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

С другой стороны, в приложении Citibank для iPhone есть промежуточное состояние между залогиненным и незалогиненным пользователем — в нем пользователь может увидеть некоторые данные о своем счете ещё до того, как он залогинится. Пользователь также может пройти ускоренную авторизацию с помощью Touch ID. Это уже гораздо более слабая граница

Подведём итоги

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

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

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

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

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

Постскриптум: Как оформить концепцию для вашей среды

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

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

Утверждение начинается со слов «Здесь вы», потому что в качестве образца мы взяли фразу из Диснейленда, в которой выражается его концепция: «Здесь вы оставляете позади настоящее и входите в мир прошлого, будущего и фантазии». Мы убрали из этой фразы всё кроме слов «Здесь вы» и дополнили её своими собственными словами.

Вот несколько рекомендаций для создания вашего утверждения:

  • Пусть оно будет коротким! Ваша фраза должна уместиться на табличку над входом в Диснейленд.
  • Помните, что вы не пишете концепцию вашей организации или команды — вы пишете концепцию среды, которую вы собираетесь создать.
  • Утверждение должно отражать не вашу точку зрения на эту среду, а точку зрения людей, которые ей будут пользоваться (поэтому оно и начинается со слов «Здесь вы», обращаясь к посетителю).
  • Фраза должна заряжать читателя энергией и пробуждать у него желание посетить ваше место. Старайтесь при этом избегать клише.
  • Рассуждая о том, каких целей вы хотите достичь с помощью вашей среды, будьте реалистами. И в то же время не бойтесь ставить себе высокую планку!
  • Дело пойдёт быстрее, если вы будете работать над утверждением не один, а вместе с командой.

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

Автор: Джордж Аранго, информационный архитектор и партнёр в дизайнерском бюро Futuredraft, соавтор книги «Информационная архитектура: для веб и не только» издательства O’Reilly.

Источник: https://uxdesign.cc/3-placemaking-lessons-from-the-magic-kingdom-4263deb29b2f

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

Читайте в нашем блоге

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: