Один из базовых инструментов эффективного проектирования рабочих интерфейсов – это паттерны, они же шаблоны. Как только вы поймете, какой шаблон решает определенную проблему – начнете экономить время, работая эффективно. Катерина Витковская раскладывает паттерны по полочкам и объясняет, что с ними делать на практике.
Для того чтобы понять, что такое паттерн в дизайне пользовательского взаимодействия, достаточно провести аналогию с объектами реального мира. Повторяющиеся узоры в природе, декорировании помещений и одежды или паттерны поведения человека (привычка) имеют элементы, которые повторяются предсказуемо. Так и при проектировании пользовательского интерфейса существуют повторяющиеся решения типичных проблем. Около 99% дизайн-проблем решаются при помощи уже давно придуманных КАК.
Как только вы поймете, какой шаблон решает ту или иную проблему, начнете экономить время, работая эффективно. На ранних стадиях творческого пути дизайнеры часто совершают ошибку – тратят много времени на поиск уникальных решений вместо того, чтобы искать правильные. Уникальное, в данном случае, – не всегда лучшее. Много хороших решений уже было использовано коллегами по цеху и весьма успешно. Думаю, не нужно стесняться учиться у лучших и проверять себя каждый раз – превышает ли ценность от внедрения затраты на реализацию.
Еще часто дизайнеры применяют тот ли иной прием без глубокого понимания проблемы. В результате – решение неуместно. Это вызывает цепную реакцию проблем, которые трудно решить на следующих этапах разработки.
А также следует помнить о тех, кто будет дальше работать с вашим дизайном – разработчики, служба поддержки и, разумеется, – пользователи. Они будут вам благодарны.
И еще одна небольшая ремарка о важности паттернов. Помните этот момент, когда вы приходите домой и включаете свет? Я – нет. Это действие уже настолько отлажено, что переместив выключатель, по инерции все равно рука будет тянуться к привычному месту какое-то время после. Тоже самое с вашим дизайном. Незачем лишний раз усложнять жизнь пользователям. Все мы уже привыкли к крестику в правом углу модального окна. Не отвлекайте пользователя от решения его проблем, если только вы не поставили себе такую цель. Но и в этом случае нужно понимать «ЧТО» и «ЗАЧЕМ».
Углубляясь в теорию
Если стало понятно, зачем исследовать паттерны, – предлагаю пройтись по основным моментам дизайн-паттернов пользовательского интерфейса.
Паттерны принято разделять на 3 уровня организации:
- Контекст (Context)
- Сценарий (поток) (Flow)
- Внедрение (Implementation)
«Контекст», верхний уровень, опирается на общую направленность ресурса – это может быть сайт здравоохранения или для бизнеса, может стимулировать совершить покупку или быть информационным ресурсом. Исследование целевой аудитории дает представление об уместности стилей.
На среднем уровне «Сценарий» рассматриваются типичные пользовательские сценарии и последовательность действий, необходимых для достижения целей. Например – навигация, регистрация или заполнение форм.
На нижнем уровне «Внедрения» решаются точечные вопросы, связанные с размещением элементов на экране, выбор цвета (красный – опасно, зеленый – благоприятно) в рамках вашего продукта.
Широко используемые паттерны
Более детально рассмотрим уровень «Сценарий», где совершается большое количество ошибок.
Паттерны навигации (Navigation)
Позволяют пользователю ориентироваться в продукте, быстро находить то, что нужно. Примеры: меню, вкладки, «хлебные крошки».
Паттерны ввода (Getting input)
Эти паттерны позволяют пользователю взаимодействовать с системой посредством ввода информации и получения обратной связи. Примеры: текстовые поля, ячейки выбора, флажки, раскрывающиеся списки, поля для загрузки и др.
Facebook registration form
Подача контента (Dealing with data)
Каким образом подается контент для быстрого просмотра, поиска и работы с ним. Примеры: галереи, таблицы, карточки.
Социальные (Social)
Как пользователь будет связываться и общаться с другими онлайн. Примеры: чаты, система баллов, доски, отзывы.
Что теперь с этим делать на практике?
Нужно проверить, соответствует ли конкретный шаблон вашим потребностям:
- Проблема. Какую проблему, связанную с использованием системы, необходимо решить.
- Ситуация. Что приводит к тому, что возникает проблема.
- Принцип. Паттерн основан на одном или большем количестве эргономических принципах.
- Решение. Описывает только суть проблемы, которую можно решить разными способами.
- Почему. Почему данный шаблон может быть применен к решению данной проблемы и как это повлияет на удобство использования.
- Пример. Примеры удачного применения шаблона.
- Внедрение. Как применить этот шаблон к текущей проблеме.
Рассмотрим на примере 7 компонентов модели использования паттерна.
В чем заключается проблема?
Пользователи вводят неправильные данные в формы, что приводит к ошибкам и невозможности дальнейшей обработки информации.
Что приводит к проблеме?
Вы разрабатываете приложение, в котором необходимо выполнять математические операции (предусматриваются только числовые значения). Данные вводятся с клавиатуры. По ошибке или незнанию пользователи вводят неверный формат, что приводит к ошибкам и отсутствию желаемого результата.
Какой принцип применить?
Предотвращение ошибок ( Я. Нельсон).
Как решить проблему?
Свести к минимуму количество условий, в которых могут быть допущены ошибки. Ограничить ввод неправильных данных. Предусмотреть качественные сообщения об ошибке.
Зачем решать эту проблему?
Устранение неконтролируемых ошибок приводит к ощущению доверия к системе и лояльности пользователей.
Какие примеры решения подобной проблемы уже существуют?
Google использует подсказки, чтобы сократить количество неверно введенных данных.
В калькуляторе используются только цифровые символы.
Или использовать маски ввода, как в следующем примере.
Как внедрить данный шаблон?
Предусмотреть блокировку символов клавиатуры, которые не являются допустимыми, использование масок ввода.
После сказанного
На самом деле, так или иначе мы принимаем дизайн-решения, основываясь на своем предыдущем опыте, что и является классическим примером использования паттернов. Но, научившись понимать свои мотивы и уместность этих самых решений, можно качественно изменить как сам продукт, над которым вы работаете, так и поднять свой профессиональный уровень. Это как сороконожка, которая научилась бегать после того, как поняла, как ходить.
Так что, всем успехов в этом марафоне.
И на дорожку несколько ресурсов, которые дадут еще немного более глубокое понимание темы.
Ранее Telegraf.Design писал о том, как анимировать интерфейсы быстро и просто.