Уже почти 200 лет урбанисты проектируют города с учетом потребностей людей. UI/UX дизайнерам есть чему у них научиться.

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

Автор разбирает элементы, из которых состоят все города, и накладывает это понимание на работу разработчиков. (прим. переводчика)

Содержание:

Сходство городов и ПО
Городская структура и продуктовый дизайн
Образ города и его 5 элементов
Карта Линча
Аналоги карты Линча для разработчика

Сходство городов и ПО

Фото района Алфама в Лиссабоне, Португалия | Фото: Том Сейпл

В 2017 году мы с женой провели медовый месяц в небольшом районе Лиссабона Алфама, который появился в 1200 г. до н. э. Между узкими жилыми трех- и четырёхквартирными домами разбросаны красивые старинные церкви. На каждом углу маленькие продуктовые магазины и пекарни, а по вечерам некоторые улицы полностью перекрывают: они превращаются в рестораны под открытым небом, где можно отведать местную рыбу. Узкие улицы вымощены булыжником, а их ширина часто не превышает 4,5 метров. Единственный реальный способ передвижения в Алфаме — это пешком. Я думаю, что в Алфаме от машины больше проблем, чем пользы. Это подтверждают ряды машин, припаркованных на ночь на тротуарах.

Мне кажется примечательным, что Алфама похожа на любой современный город. Там есть те же характеристики и элементы. Несмотря на различия в размерах и истории, Чикаго и Алфама имеют много общего по своей сути. И там, и там есть дороги, предприятия, дома, культовые сооружения, искусство в городской среде, скверы, парки, школы и многое другое. Они могут выглядеть очень по-разному с точки зрения формы и масштаба. Но в конце концов церкви, рынки и переулки Алфамы выполняют те же функции, что и в Лагосе, Лондоне, Пекине, Мумбаи, Лос-Анджелесе или любом другом крупном современном мегаполисе.

Если пойти еще дальше, то можно увидеть сходства с городами классической эпохи, такими как Рим или Александрия. И, конечно, они все имеют общие черты с древними городами Месопотамии, такими как первый известный город Чатал-Хююк (7400–5200 гг. до н. э.), и другими древними городами, такими как Вавилон, Урук, Ур, Ниневия и Иерихон. Человечество строит города 10 000 лет, и насколько известно, почти во всех них есть общие элементы — хотя и в разных масштабах и формах.

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

Возникает вопрос: что мы можем вынести из многовековой практики строительства городов и затем применить в разработке ПО? Давайте начнем с краткого вводного курса.

Городская структура и продуктовый дизайн

Городская структура — одно из основных понятий городского планирования.

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

Продуктовый дизайн постоянно использует метафоры из городской структуры, и это легко заметить.

Подробнее: дизайн как сфера коллективного труда и движение «Баухаус»

Сначала рассмотрим дизайн как сферу коллективного труда. Дизайн полагается на повторения и мотивы, чтобы создать универсальный опыт. Многие сферы дизайна фокусируются на «предполагаемых» пользователях, пытаются приблизить их к цели и помогают в выполнении любых задач. Часто это приводит к единому видению идеального дизайна. Обычно для фиксации такого видения создаются своды правил. Например, архитектурные нормы или универсальные теории, такие как принципы гештальта. Благодаря циклам инноваций и стандартизации все ложки, автомобили или пользовательские интерфейсы имеют более или менее одинаковые формы, размеры и принципы работы. Зачастую подобные принципы дизайна соответствуют духу времени в обществе настолько, что многие пользователи могут взаимодействовать с продуктом и не задумываться, как именно он работает. Представляете, что случилось бы, если бы вам пришлось разбираться с каждой дверью, прежде чем ее использовать? Но ещё хуже, если дизайн продукта противоречит ожиданиям. Вы когда-нибудь толкали двери, которые нужно тянуть, или тянули те, которые нужно толкать? Эти непонятные двери известны как двери Нормана. Они противоречат ожиданиям и часто вызывают замешательство, смущение и даже раздражение.

В 1920-х годах движение Баухаус формализовало подход к дизайну, который ставит на первое место потребности и ценности пользователя, а также простоту и удобство продукта. Основные ценности этой немецкой школы и сейчас служат ориентиром для дизайнеров. Однако корни их подхода идут от известного принципа Луиса Салливана, сформулированного почти за столетие до возникновения Баухауса. Он сказал: «Форма следует за функцией». Ученик Луиса Фрэнк Ллойд Райт развил эту идею, сказав: «Форма и функция должны быть духовно объединены». Не будем придираться к словам, а просто скажем, что дизайн как коллективная деятельность — это решение проблем наиболее удобным, интуитивно понятным, полезным, а зачастую и красивым способом.

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

Образ города и 5 его элементов

В 1960 году Кевин Линч, американский градостроитель и профессор Массачусетского Технологического Института (MIT), выпустил один из самых влиятельных по сей день текстов по городскому дизайну. Книга называется «Образ города», и каждый студент или практикующий специалист в области городского планирования за последние 50+ лет читал ее.

Кевин Линч и обложка книги «Образ города» | Фото: CARR, LYNCH & SANDELL, INC — *Кевин Линч и обложка книги «Образ города» | Фото:* *CARR, LYNCH & SANDELL, INC*

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

Для систематизации пространств на макроуровне Линч выделил пять основных элементов, которые есть в любом городском пространстве, независимо от размера, возраста и страны. Итоговые карты, созданные Линчем на основе этих элементов, стали неотъемлемой частью теории городского планирования. Карты составляются субъективно, в соответствии с «ментальной картой»* места их создателя.

* Ментальная карта отражает индивидуальное восприятие города и связи его элементов друг с другом. (прим. переводчика)

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

Ниже приведены пять элементов городских пространств, которые выделил Линч, а также примеры, созданные мной на основе района «Чикаго-Луп».

Элемент 1: Пути

Путь — просто коридор или канал, по которому движутся пешеходы, автомобили и т. д.

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

Элемент 2: Границы

Границы разделяют «A» и «Б».

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

Элемент 3: Узлы

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

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

Элемент 4: Районы

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

Микрорайон — самый простой для выделения район
Другими примерами могут послужить студгородки, парки, промзоны или торговые площади
Районы могут быть похожи между собой для стороннего наблюдателя, в то время как местные видят тонкие различия: большинство чикагцев понимают разницу между Логан-Сквер и Уикер-Парк, а турист может и не заметить.

Элемент 5: Ориентиры

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

В Чикаго можно легко сориентироваться по озеру Мичиган. А по Центру Джона Хэнкока и Уиллис-тауэр легко понять, где находятся районы Ривер-Норт и Вест-Луп. В небольших городах и микрорайонах тоже есть свои ориентиры, пусть и не столь грандиозные. Часто это всем известные памятники, рестораны, кофейни, магазины, рекламные щиты или даже природные объекты.

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

Карта Линча

Если объединить эти элементы, получится карта Линча. Это основа, которую используют градостроители, чтобы разобраться в конкретном пространстве или территории.

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

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

Пример. Пути предназначены для того, чтобы по ним ходили. Если они не справляются с этой основной функцией, значит, они плохо спроектированы. Кроме того, некоторые пути предназначены для неспешных передвижений, как тропинка в парке, на которой скорость второстепенна по сравнению с основной целью отдыха. Улицы-артерии, напротив, отдают приоритет скорости и пропускной способности. То есть нельзя помещать оживленную улицу в центре парка или узкую извилистую тропку — в деловом квартале. Они будут выпадать из контекстуальных потребностей дизайна. Можете представить чикагскую Мичиган-авеню в Центральном парке Нью-Йорка?

Вид на Центральный парк Нью-Йорка с воздуха | Фото: NYT — *Вид на Центральный парк Нью-Йорка с воздуха | Фото:* *NYT*

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

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

Центр Цинциннати и автострады Форт-Вашингтон-уэй до и после ревитализации | Фото: Cincinnati Museum Center — *Центр Цинциннати и автострады Форт-Вашингтон-уэй до и после ревитализации | Фото:* *Cincinnati Museum Center*

Аналоги карты Линча для разработчика

Итак, что у этого всего общего с разработкой ПО?

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

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

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

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

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

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

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

Другие статьи-переводы от KTS:

Полное руководство по проектированию систем в виде схемы
Почему разработчики создают так много сайд-проектов
Комплексный системный подход к разработке программного обеспечения

Города в киберпространстве: образ города и разработка ПО