Pull to refresh

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

Interfaces *Usability *
Это перевод оригинальной статьи 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
Tags:
Hubs:
Total votes 22: ↑19 and ↓3 +16
Views 7K
Comments Comments 9