Шаблоны проектирования: нарушать правила иногда бывает полезно

    Это перевод оригинальной статьи Design Patterns: When Breaking The Rules Is OK

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

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

    Это наводит на размышления об истории и предназначении шаблонов проектирования, а также о том, когда их следует применять, а когда — нет. А что если в каких-то случаях изменение шаблона ради достижения иного или лучшего результата может оказаться правильным решением? Разумеется, мы сразу замечаем, когда какой-либо шаблон используется неправильно. Но, возможно, в некоторых ситуациях это действительно уместно? Чтобы найти ответ на этот вопрос, давайте начнем с самого начала.

    История шаблонов проектирования


    В 1977 году архитектор Кристофер Александер (Christopher Alexander) в соавторстве написал книгу «A Pattern Language: Towns, Buildings, Construction», в которой представил концепцию языка шаблонов как «структурированного подхода к описанию эффективных методов проектирования в контексте накопленного опыта». Благодаря этой книге любой человек (не обязательно архитектор или госслужащий) может получить некий образец, ориентируясь на который можно улучшить собственный город и район. Вот что пишет сам Александер:

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


    Уличное кафе в Сан-Диего (автор снимка: shanputnam)

    Любой шаблон, будь то сфера архитектуры, веб-дизайна или любая другая, включает две составляющие: он содержит, во-первых, описание какой-либо общей проблемы, и, во-вторых, стандартное решение данной проблемы. Например, шаблон 88 из книги «A Pattern Language» описывает проблему личности и методы организации таких общественных мест, которые настраивали бы людей на общение и установление контактов. Один из предлагаемых вариантов — уличные кафе.

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

    Особо заинтересовавшиеся шаблоном 88 могут ознакомиться с группой на Flickr, где собраны примеры данного шаблона.

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

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

    Ниже представлено решение данной проблемы.

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

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

    Преимущества использования шаблонов проектирования


    Выгода от использования шаблонов в процессе разработки заключается в следующем:

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

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

    Когда речь заходит о преимуществах использования существующих шаблонов в сравнении с созданием новых, мы снова обращаемся к архитектуре. Дмитрий Фадеев (Dmitri Fadeyev) в своей статье «The Value of Unoriginality» приводит следующую цитату из книги «The Grammar of Ornament» Оуэна Джонса (Owen Jones), архитектора и влиятельного теоретика в области дизайна, жившего в XIX веке.

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

    В последнем предложении содержится ключевая мысль. Суть шаблонов не в том, чтобы бездумно копировать результаты чужой работы, а в том, чтобы использовать их в качестве образца при проектировании. При таком подходе к использованию шаблонов выигрывают как разработчики, так и пользователи. Так что разработчикам просто необходимо пользоваться опытом своих предшественников — во благо Сети и всех пользователей. Неоднократно предпринимались попытки задокументировать наиболее распространенные шаблоны веб-дизайна — с переменным успехом. Кроме библиотеки шаблонов проектирования Yahoo Design Pattern Library существуют такие ресурсы, как библиотека шаблонов проектирования Питера Морвилля (Peter Morville’s Design Patterns), Welie.com и (возможно, один из самых удачных примеров) UI-Patterns.com

    Шаблоны против нас


    Несмотря на все прелести использования шаблонов, здесь есть одно большое «но». Хотя об этом многие и не задумываются, тут не все так просто и легко. Нельзя просто накопировать шаблонов из кучи разных мест, собрать их все на внутреннем вики-сайте, сложить ручки и ждать чуда. Объединение в единое целое и поддержка функционирования внутренней библиотеки шаблонов — это непростое дело, и если подойти к нему спустя рукава, ничего хорошего не выйдет. Стивен Тюрбек (Stephen Turbek) в статье «Are Design Patterns an Anti-Pattern?» приводит исчерпывающий перечень проблем, связанных с библиотеками шаблонов:

    • шаблоны проектирования неэффективны как инструменты обучения;
    • шаблоны проектирования не заменяют собой опыт в области UX;
    • чем полнее библиотека, тем сложнее ее изучить;
    • шаблоны проектирования требуют немалых вложений;
    • в первую очередь шаблоны проектирования должны быть ориентированы на пользователей не из области UX.


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

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

    Мы против шаблонов


    Несмотря на все свои преимущества, шаблоны почему-то не пользуются бешеной популярностью в Сети. Наиболее вопиющие примеры некорректного использования шаблонов проектирования можно обнаружить, взглянув на некоторые веб-формы. Благодаря многолетним исследованиям мы получили представление о том, как создавать практичные и удобные формы. Нам больше не нужно гадать и тыкать пальцем в небо, поскольку у нас предостаточно источников информации — начиная с книги «Web Form Design» Люка Вроблевски (Luke Wroblewski) и заканчивая бесчисленными статьями о размещении имен полей, многоколоночной верстке и т. д. и т. п. Проверенные шаблоны всегда по рукой. И все равно то здесь, то там попадаются онлайн-формы, с которыми практически невозможно работать.


    В качестве примера некорректного использования шаблона рассмотрим форму для регистрации в Expotel.

    Посмотрите на эти крошечные поля для ввода текста, на это огромное расстояние между ними и именами полей, выровненными по левому краю, на расположение и дизайн кнопок «Close» и «Register» (руки так и тянутся нажать на «Close», не правда ли?). А что за сообщение предлагается ввести в поле «Welcome Message»? Где оно будет использоваться? Пожалуй, никто не будет спорить с тем, что это неудачный пример дизайна формы и уж точно не самый удачный пример отклонения от шаблона.

    Однако далеко не всегда вынести вердикт относительно отклонения от шаблона можно столь же быстро, как в примере выше. Недавно в Google было принято решение убрать символ «+» с кнопки для открытия новой вкладки в браузере Chrome, что вызвало волну критики. Данное решение идет вразрез с шаблоном, используемым в большинстве браузеров с вкладками, однако в Google утверждают, что они провели предварительные исследования среди пользователей и лишь затем решились на этот шаг. Верное ли решение они приняли?



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

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

    Исследования показывают, что новое решение позволит улучшить юзабилити


    Если постоянно крутиться вокруг одного и того же существующего дизайна, можно столкнуться с проблемой «локального максимума». Джошуа Портер (Joshua Porter) по этому поводу говорит следующее.

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

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

    Все мы знаем о преимуществах постепенного внедрения инноваций, но иногда шаблону требуется радикальное обновление. К решению каждой задачи проектирования следует подходить со свежей головой и незамыленным взглядом. Нужно стремиться найти новые подходы к решению этих задач, а найдя — обязательно проводить тестирования, чтобы убедиться в верности выбранного направления. Пол Скрайвенс (Paul Scrivens) в статье «Designing Ideas» отмечает следующее.

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

    Именно это команда Chromium и провернула с кнопкой «+» в браузере Chrome. Они уверены в том, что нашли более эффективное решение, и протестировали его.

    Устоявшийся подход безнадёжно устарел


    Представьте себе иконку для операции сохранения в большинстве приложений. Скажите, когда в последний раз вам на глаза попадалась дискета? Вот именно. Мир вокруг меняется, и с этими изменениями необходимо считаться. В противном случае, как утверждает Твайла Тарп (Twyla Tharp) (цитата Есении Перес-Крус [Yesenia Perez-Cruz]), мы рискуем стать рабами наших привычек.

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

    В издательском деле с этим приходится сталкиваться довольно часто. Вот что по этому поводу говорит Стюарт Карри (Stewart Curry) в статье «The Trope Must Die».

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

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



    Используемые нами шаблоны проектирования необходимо адаптировать не только к изменениям в модели взаимодействия, но и к заметным переменам в отношении к технологиям в целом. Тэмми Эриксон (Tammy Erickson) в статье «How Mobile Technologies Are Shaping a New Generation» приводит результаты своего исследования, объектом которого является «поколение Re-Generation». К нему относятся родившиеся после 1995 г., т. е. это поколение следует за так называемым поколением Y.

    Для этого поколения [Re-Generation] возможность подключения и взаимодействия является нормой жизни. Люди встречаются, обмениваются идеями, самоопределяются, формируют представление об окружающих посредством технологических связей. Предшествующие поколения применяли технологии преимущественного для увеличения производительности: им требовалось выполнять традиционные задачи быстрее, проще и с меньшими затратами. Что касается поколения Re-Generation, то их образ жизни неразрывно связан с использованием вычислительных устройств.

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

    Обоснованное решение — верное решение


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

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


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

    Автор статьи: Rian van der Merwe
    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 9

      0
      Очень интересная и глубокая статья, её можно рекомендовать всем холиварщикам, так как она очень корректным языком описывает множество нюансов в вопросах проектирования.
      спасибо
        0
        Статья интересная, хотя, как многие зарубежные публикации (и их переводы, естественно) многословная. Особенно заметно это в моментах, когда автор свою простую мысль подтверждает ссылками на слова другого автора, содержащие эту же мысль. Прямо как «как писал В.И. Ленин в работе ...,» А ведь, по сути, мысль либо простая (и оттого очевидная), либо не совсем очевидная, но автор доказывает ее разумность — и тут ссылкой на чужие слова делу не помочь, ибо цитирование, во-первых, очков истинности не добавляет, во-вторых, часто оказывается вырванным из контекста.

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

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

        Одно грустно — на такие простые выводы (сводящиеся к простой мысли — «думай, можно ли отполировать свое решение еще больше») ушло 11 (!!!) экранов текста и ссылок на чужие труды. Я даже боюсь подумать, как этот автор описывал бы что-то более сложное.

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

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

            Просто я так понимаю — если долго-долго вертеть в руках что-то, думая, как можно его улучшить, и давать себе труд пробовать воспринимать вещь с позиции пользователя, не связанного шаблонами, то можно многое улучшить «в процессе». Примеряя, в т.ч., в процессе стандартные шаблоны проектирования, и задумываясь на каждой итерации, лучше или хуже стало в сумме в результате изменений.
          0
          Представьте себе иконку для операции сохранения в большинстве приложений. Скажите, когда в последний раз вам на глаза попадалась дискета?


          Да она и сейчас у меня на виду — в панели редактора кода. …А кто сказал, что пиктограмма обязана отсылать к вещественным объектам из обыденной жизни? А если моя обыденная жизнь большей частью и есть работа с компьютерными интерфейсами?

          В конце концов, никто же не предъявляет претензию к букве «А», спрашивая, когда вы последний раз видели голову быка (послужившую её прообразом).
            0
            Особо заинтересовавшиеся шаблоном 88 могут ознакомиться с группой на Flickr, где собраны примеры данного шаблона.
            Хотелось бы ссылок на подобные вещи)

            Вообще, всю статью почему-то ждал когда же мне в дадут сборник темплейтов для веб-дизайна))

          Only users with full accounts can post comments. Log in, please.