Перевод С. Черникова

 

Дженифер Тидвелл, Чарли Брюэр , Эйнн Валенсия

Разработка интерфейсов. Паттерны проектирования. 3-е изд.. — СПб.: Питер, 2022.

 

ISBN 978-5-4461-1646-1

© ООО Издательство "Питер", 2022

 

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

 

Предисловие к третьему изданию

«Чем сильнее меняются вещи, тем больше они остаются прежними».

Приближается 15-летие со дня публикации первого издания книги «Разработка интерфейсов». А со дня выхода второго издания прошло уже 10 лет. Стоит взглянуть на то, что изменилось, а что осталось прежним, и как это отразилось на подходе к проектированию интерфейсов и пользователях.

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

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

Как появилась эта книга

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

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

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

Паттерны проектирования все еще востребованы

Мы спросили себя: почему дизайн и наша книга все еще востребованы? Ответ заключается в паттернах проектирования. Они основаны на способах восприятия и использования программных инструментов. Чувства людей и психология не меняются, и эти паттерны работают с ними, а не против них. Кроме того, они основаны на задачах, крупных и второстепенных, которые люди стремятся выполнять с помощью программ: ввод данных, создание цифровых объектов и управление ими, управление финансами и обработка платежей, а также отправка и получение сообщений и файлов. Паттерны образуют фундамент любого пользовательского интерфейса. Более того, осмысление в терминах паттернов и поиск новых паттернов во многом соответствует тому, как сегодня осуществляется проектирование программ и взаимодействия.

ПО — это система

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

Сервисы и межплатформенные средства, которые обеспечивают функционирование программ, чаще всего представляют собой интеграцию отдельных управляемых инструментов. Зачем разрабатывать собственную систему регистрации, если можно зарегистрироваться в Google, Facebook и на других платформах? Зачем разрабатывать собственное ПО для анализа и создания отчетов, когда можно интегрировать подходящий набор надежных, настраиваемых платформ бизнес-аналитики? Зачем создавать собственную мобильную платформу, если у нас уже есть Amazon Web Services? То же касается HR-процессов и IT-инфраструктуры. Мы все чаще пользуемся готовым, а не создаем новое.

Фокус: проектирование экранного взаимодействия для веб- и мобильных устройств

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

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

Что не вошло в третье издание

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

Голосовое управление. Мы говорим с телефонами, автомобилями и умными колонками, чтобы они делали то, что нам нужно. Мы ведем диалог с машинами. Чтобы узнать больше о разработке голосовых интерфейсов, рекомендуем прочесть книгу Кэти Перл «Designing Voice User Interfaces: Principles of Conversational Experiences» (издательство O’Reilly, 2017).

Соцсети. Социальные сети уже давно не просто способ поддерживать связь с друзьями и членами семьи. Это обязательный уровень коммуникации, обсуждений и взаимодействия почти для всех программ. Соцсети произвели революцию в сфере делового общения и производительности. Подробнее об этом можно узнать в книге «Designing Social Interfaces: Principles, Patterns, and Practices for Improving the User Experience» Кристиана Крамлиша и Эрин Мэлоун (издательство O’Reilly, 2015).

Стриминговые сервисы. То, что мы привыкли называть телевидением, теперь представляет собой стриминговые площадки для просмотра видео на любом устройстве по нашему выбору. Интерфейс в этой сфере давно используется не только для поиска и просмотра. Телевизор теперь тоже своего рода приложение, имеющее доступ ко всем функциям и возможностям наших устройств. Чтобы узнать больше об этой сфере, прочтите книгу «Designing Multi-Device Experiences: An Ecosystem Approach to User Experiences across Devices» Михала Левина (издательство O’Reilly, 2014).

Виртуальная/дополненная/смешанная реальность. Интерфейсы и программы становятся дополнением физического мира или же самостоятельной новой реальностью. Очки виртуальной реальности и другие устройства позволяют нам дополнять цифровой мир тем, что мы видим перед собой. Чтобы узнать больше, прочтите книгу Эрин Пангилинан и др. «Creating Augmented and Virtual Realities: Theory and Practice for Next-Generation Spatial Computing» (издательство О’Reilly, 2019).

Чат-боты и голосовые помощники. Голосовые помощники, очень похожие на людей, теперь ежедневно разговаривают с нами в мессенджерах или в чатах. Эти чат-боты понимают разговор и реагируют на него самым естественным образом. Благодаря программам, которые распознают закономерности в данных и речи, а затем обучаются и совершенствуются, чат-боты способны обрабатывать практически любые простые информационные запросы и выполнять базовые задачи. Чтобы достичь подобного результата, дизайнеры организуют совокупность исходных данных, а также фреймворки и сценарии для обучения и практического применения. Если вы захотите узнать больше о разработке ботов и диалогов, вам пригодится книга «Designing Bots» Амира Шевата (издательство O’Reilly, 2017).

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

Кому будет полезна эта книга

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

Структура книги

Эта книга состоит из 12 глав — новых или значительно обновленных. Сами главы в основном содержат две части.

Введение и обсуждение модели дизайна

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

Паттерны

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

Каждый паттерн структурирован следующим образом:

Что это

Определение паттерна.

Когда использовать

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

Зачем

В этом разделе анализируются назначение и преимущества паттерна и указывается, кому этот паттерн будет полезен и каким образом.

Как

Этот раздел касается дизайна самого паттерна и средств его реализации. Здесь в общих чертах обрисовываются способы сделать паттерн отвечающим всем требованиям пользователя.

Примеры

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

Заключение

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

Программы и приложения стали неотъемлемой частью жизни потребителя. Люди проводят небывалое количество времени, работая с ними. Эти средства призваны делать жизнь проще.

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

— Дженифер Тидвелл, Чарли Брюэр и Эйнн Валенсия

Условные обозначения

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

Курсивный шрифт

Для названий паттернов, новых терминов, URL-адресов, адресов электронной почты, имен файлов и расширений файлов.

Моноширинныйшрифт

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

Благодарности

Мы благодарим наших технических рецензентов: Эрин Мэлоун, Кейт Раттер, Фрэнсис Клоуз, Кристи Эннис Клоут, Мэтью Рассела и Джорджа К. Абрахама.

Спасибо Кристиану Крамлишу за предоставленную возможность выпуска этой книги.

И большое спасибо Анжеле Руфино и Дженнифер Поллок из O’Reilly.

Эйнн Валенсия: Я хотела бы поблагодарить отличных преподавателей курса IxD@CCA и студентов, которых я обучала в SFSU, CCA и GA на протяжении многих лет: вы — мой постоянный источник вдохновения и вселяете в меня большие надежды на будущее. И больше всего я благодарю своего мужа, Дона Брукса, за то, что он был моим партнером в путешествиях и за то, что всегда был согласен на все.

Чарли Брюэр: Я хотел бы поблагодарить сотрудников издательства O’Reilly за предоставленную возможность попробовать что-то новое в профессиональном плане, продакт-менеджеров SpaceIQ за гибкость и особенно свою семью и друзей, которые поддерживали меня все это время.

От издательства

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

Чтобы посмотреть некоторые рисунки в цветном варианте, воспользуйтесь QR-кодом, расположенным рядом с рисунком.

Ваши замечания, предложения, вопросы отправляйте по адресу comp@piter.com (издательство «Питер», компьютерная редакция).

Мы будем рады узнать ваше мнение!

На веб-сайте издательства www.piter.com вы найдете подробную информацию о наших книгах.

Глава 1. Проектирование для людей

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

Почему? В конце концов, возможно, именно поэтому вы и взяли эту книгу в руки.

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

• общие цели использования сайта или приложения;

• сортировка задач для выполнения этих целей;

• что пользователи думают о конкретном предмете или предметной области;

• язык, который они используют, чтобы описать их;

• в какой степени они обладают навыками, необходимыми для выполнения работы;

• их отношение к предмету.

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

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

Эта структура выглядит так:

• Контекст — кто составляет вашу аудиторию?

• Цели — чего они хотят?

• Исследование — способы понимания контекста и целей.

• Паттерны — знание и поведение, связанное с дизайном интерфейса.

Контекст

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

Узнайте свою аудиторию

UI-дизайнеры1 часто говорят: «Дизайнер — не пользователь».

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

Взаимодействие как диалог

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

Вот ключевые моменты:

• в разговоре два участника: человек и программа;

• происходит постоянный обмен информацией в обоих направлениях;

• обмен — это серия запросов, команд, прием, обработка и ответ;

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

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

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

Соотнесите контент и функционал с потребностями аудитории

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

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

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

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

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

Уровень подготовки

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

Кто-то может использовать его ежедневно на работе и очевидно со временем станет опытным пользователем. Но даже незначительные несоответствия ожиданиям начнут все больше и больше раздражать. Возможно, кто-то будет использовать его время от времени и изучит только в той степени, которой достаточно, чтобы добиться необходимого результата. В таком случае терпимость к недостаткам будет выше. А кто-то воспользуется им только один раз. Признайтесь честно: ждете ли вы, что большинство пользователей станут опытными или экспертами или подразумеваете, что они так и останутся вечными новичками?

Вот примеры программ, предназначенных для пользователей среднего и профессионального уровня:

• Photoshop;

• Excel;

• среды разработки кода;

• инструменты системного администрирования для веб-серверов.

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

• информационные панели в туристических центрах или музеях;

• элементы управления Windows или macOS для настройки фона рабочего стола;

• страницы интернет-магазинов;

• мастеры установки;

• автоматические кассовые аппараты.

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

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

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

Теперь, когда мы познакомились с двумя крайностями, рассмотрим золотую середину:

• Microsoft PowerPoint;

• почтовые приложения;

• Facebook;

• инструменты для написания блогов.

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

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

Интерфейс — лишь средство для достижения целей пользователя

У каждого, кто использует инструмент — программу и т.д., — есть свои на то причины. Это цели пользователя. Например:

• поиск фактов или объектов;

• изучение чего-либо;

• заключение сделки;

• контроль или мониторинг;

• создание чего-либо;

• общение с другими людьми;

• развлечение.

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

Спросите пользователей

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

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

Ценность дизайна: решите правильную проблему, а затем решите ее правильно

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

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

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

• Зачем менеджеру среднего звена почтовое приложение? Правильно, чтобы читать электронную почту. Но зачем они вообще читают и отправляют электронную почту? Чтобы общаться с другими людьми. Конечно, другие средства могут достичь тех же целей: телефон, разговор в коридоре, официальный документ. Но, по-видимому, электронная почта удовлетворяет какие-то потребности, для которых другие способы не подходят. Что это за потребности и почему они важны для этого менеджера? Удобство выбирать, когда отправлять или отвечать? Конфиденциальность? Возможность сохранить историю разговора? Социальная условность? А что еще?

• Отец заходит на сайт турагентства, выбирает город, в котором его семья будет отдыхать летом, и пытается найти цены на билеты на самолет на разные даты. Он получает информацию из того, что находит, но его цель — не просто просматривать и исследовать различные варианты. Спросите зачем. Его целью на самом деле является сделка: купить билеты на самолет. Опять же, он мог бы сделать это на многих других сайтах или поговорив по телефону с живым турагентом. Чем этот сайт лучше других вариантов? Это быстрее? Удобнее? Больше шансов найти выгодное предложение?

• Иногда анализа цели действительно недостаточно. Сайт, посвященный сноу­бордингу, может содержать в себе информацию (для обучения), интернет-магазин (для сделок) и набор видеоклипов (для развлечения). Предположим, что кто-то заходит на сайт для покупки, но отвлекается на информацию о трюках на сноуборде — он переключил внимание с заключения сделки на просмотр и обучение. Может быть, он снова начнет что-то покупать, а может быть и нет. И действительно ли раздел, посвященный стилю жизни и развлечениям, интересен как 12-летним, так и 35-летним? Перейдут ли 35-летние люди на другой сайт, чтобы купить новую доску, если им некомфортно на этом, или им все равно? Полезно расширить рамки целей, чтобы включить в них понимание специфического цикла покупки. У вашего клиента будут разные цели на разных этапах этого цикла. С другой стороны, возможно, вы захотите разработать способ установления долгосрочных взаимоотношений между брендом и клиентом. Это можно реализовать с помощью контента и функционала, которые помогают формировать идентичность, создавать сообщества и определяют стиль жизни.

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

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

Исследование: способы понимания контекста и целей

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

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

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

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

В частности, вам понадобится узнать:

• с какой целью они используют ПО или сайт;

• конкретные задачи, которые они решают, чтобы достичь этих целей;

• язык, который они используют для описания своих действий;

• их навыки использования программ, подобных той, что вы разрабатываете;

• их отношение к тому, что вы разрабатываете, и как варианты дизайна могут повлиять на это отношение.

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

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

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

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

Прямое наблюдение

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

Изучение примеров из практики

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

Опросы

Письменные опросы помогают получать информацию от пользователей. Благодаря им можно сформировать статистически значимую выборку респондентов. Хотя из-за отсутствия прямого контакта с человеком вы упустите много дополнительной информации — вы не узнаете о том, о чем не спросите, — вы можете очень ясно представить некоторые характеристики своей целевой аудитории. Тщательное планирование исследования чрезвычайно важно. Если вам нужны наглядные цифры, а не «ощущение» целевой аудитории, вам просто необходимо правильно сформулировать вопросы, отобрать подходящих респондентов и верно проанализировать ответы, и это целая наука.

Некоторые дополнительные рекомендации о том, как составить хорошие вопросы для исследования, вы найдете здесь:

• Writing Good Survey Questions (oreil.ly/P5o1n)

• Questionnaire Design Tip Sheet (oreil.ly/7vbqD)

Создание персоны пользователя

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

Исследования в процессе разработки дизайна — это не маркетинг

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

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

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

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

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

Паттерны: познание и поведение, связанные с разработкой интерфейсов

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

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

Примечание

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

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

• Safe Exploration (Безопасное исследование).

• Instant Gratification (Мгновенное вознаграждение).

• Satisficing (Разумная достаточность).

• Changes in Midstream (Изменения на полпути).

• Deferred Choices (Отложенный выбор).

• Incremental Construction (Пошаговое построение).

• Habituation (Привыкание).

• Microbreaks (Микроперерывы).

• Spatial Memory (Пространственная память).

• Prospective Memory (Проспективная память).

• Streamlined Repetition (Упрощенное повторение).

• Keyboard Only (Только клавиатура).

• Social Media, Social Proof, and Collaboration (Социальные сети, социальное подтверждение и коллаборация).

Safe Exploration (Безопасное исследование)

«Дайте мне возможность исследовать без потерь и неприятностей».

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

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

Этот паттерн включает в себя несколько основных рекомендаций по грамотной организации интерфейса, основанных на исследованиях отраслевого эксперта Джейкоба Нильсена4:

• видимость состояния системы;

• соответствие системы реальному миру;

• пользовательский контроль и свобода.

Вот несколько примеров «безопасного исследования».

• Фотограф пробует несколько фильтров в программе для обработки изображений. После этого он решает, что ему не нравится результат, и нажимает кнопку «Отмена» несколько раз, чтобы вернуться к началу. Затем он пробует другой фильтр, а потом еще один, каждый раз имея возможность отменить результат (о том, как это работает, рассказывается в главе 8, в описании паттерна «Многоуровневая отмена»).

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

Instant Gratification (Мгновенное вознаграждение)

«Я хочу сделать это прямо сейчас, а не потом».

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

Паттерн «Мгновенное вознаграждение» необходим в различных областях разработки. Например, если вы способны предположить, с чего начнет новый пользователь, вы разработаете интерфейс так, чтобы это первое действие оказалось максимально простым. Если цель пользователя — создание чего-то нового, например рисование объекта, то можно сразу же открыть новый холст как призыв к действию, а рядом поместить палитру. Если пользователю ­необходимо выполнить какую-либо задачу, то подскажите ему, с чего начать.

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

Подводя итог: постарайтесь предвидеть потребности пользователя, организуйте понятную отправную точку, предложите ему что-либо прежде, чем просить что-то взамен (адрес электронной почты, навязчивая реклама).

Satisficing (Разумная достаточность)

«Меня это устраивает. Я не хочу тратить время, чтобы изучать что-то еще».

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

Термин satisficing — разумная достаточность — образован от двух слов: «satisfying» (удовлетворительный) и «sufficing» (достаточный). Он был придуман в 1957 году социологом Гербертом Саймоном, который использовал его для описания поведения людей во всевозможных экономических и социальных ситуациях. Люди предпочитают довольствоваться достаточно хорошим, а не наилучшим, если изучение всех альтернативных вариантов может требовать много времени или усилий.

Разумная достаточность в действительности очень рациональна, если оценить всю ту умственную работу, которая необходима для анализа сложного интерфейса. Как заметил Стив Круг в своей книге «Don’t Make Me Think, Revisited: A Common Sense Approach to Web Usability» (New Riders, 2014)5, люди не любят думать больше чем необходимо — это лишняя работа! Но если в интерфейсе предусмотрена пара вариантов, которые пользователь замечает сразу же, то он попробует оба. Высока вероятность, что выбор окажется верным, но даже если нет, то вернуться назад и попробовать что-то еще будет несложно (предполагается, что интерфейс поддерживает паттерн «Безопасное исследование»).

Дизайнеры могут сделать из сказанного несколько выводов.

• Используйте в интерфейсе «призывы к действию». Давайте пользователям четкие указания: введите текст здесь; перетащите изображение сюда; коснитесь этой кнопки, чтобы начать работу, и т.д.

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

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

• Продумайте простой способ навигации; особенно это касается возвращения в точки, где второпях можно легко сделать неправильный выбор. Преду­смотрите «аварийные выходы» (см. главу 3). На стандартных веб-сайтах легко использовать кнопку «Назад», поэтому разработать простую навигацию назад-вперед важно и для веб-приложений, десктопных приложений, мобильных устройств.

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

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

Changes in Midstream (Изменения на полпути)

«Я передумал, пока делал это».

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

Для дизайнера это означает, что он должен дать пользователю возможность изменить поставленную цель. Предоставьте ему право выбора. Не запирайте пользователя в среде с ограниченным выбором и без глобальной навигации либо связи с другими страницами или функционалом, если только на это нет веских причин. А такие причины могут найтись: см. примеры в паттернах под названием Wizard (Мастер) (глава 2) и Modal Panel (Модальная панель) (глава 3).

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

Для поддержки возможности повторного входа запрограммируйте в диалоговых окнах и веб-формах запоминание введенных ранее значений и не делайте диалоговые окна модальными; если окно не модальное, то пользователь может перетащить его в угол экрана, чтобы продолжить работу в нем позже. Приложения в стиле компоновщика — текстовые редакторы, среды для разработки программного кода и программы для рисования — позволяют пользователю работать одновременно над несколькими проектами и откладывать в сторону любое их количество во время работы над каким-то одним. Подробнее об этом рассказывается в главе 2, в описании паттерна Many Workspaces «Несколько рабочих столов».

Deferred Choices (Отложенный выбор)

«Я не хочу отвечать на этот вопрос прямо сейчас, позвольте мне закончить!»

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

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

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

Иногда дело просто в нежелании отвечать на вопрос. В других случаях у пользователя может быть недостаточно информации, чтобы дать ответ прямо сейчас. Что, если приложение для написания музыки запросит у вас название, тональность и темп новой песни еще до того, как вы начнете ее писать (пример такого «чудесного» дизайна вы найдете в Apple GarageBand)?

Выводы для дизайнеров интерфейсов очевидны, хотя им и не всегда легко следовать.

• Не заваливайте пользователя избытком вопросов и вариантов выбора с самого начала.

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

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

• По возможности используйте паттерн Good Defaults (Хорошие варианты по умолчанию) (глава 10), чтобы дать пользователям несколько подходящих вариантов ответа по умолчанию, с которых удобно начать работу. Однако помните, что заранее подготовленные ответы все равно требуют их проверки пользователем на случай, если их понадобится изменить. Им тоже нужно уделять внимание.

• Обеспечьте пользователю возможность вернуться к заполнению отложенных полей позже и сделайте к ним простой и понятный доступ. Иногда в диалоговых окнах помещают краткие подсказки вроде «Вы всегда сможете изменить эти данные, нажав кнопку “Редактировать проект”». Некоторые веб-сайты сохраняют наполовину заполненные пользовательские формы или другие постоянные данные, например содержимое корзин с еще не приобретенными товарами.

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

Incremental Construction (Пошаговое построение)

«Дайте мне это изменить. Нет, опять не то. Попробую еще раз. Вот так-то лучше».

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

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

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

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

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

Если вам интересно больше узнать о потоке и концентрации внимания, обратите внимание на книги Михая Чиксентмихайи (Mihaly Csikszentmihalyi), одна из них — Flow: The Psychology of Optimal Experience (Harper Row, 2009)6.

Habituation (Привыкание)

«Этот способ работает везде, почему же он не работает здесь?»

Когда человек постоянно работает в одном интерфейсе, некоторые манипуляции становятся рефлекторными, например нажатие сочетания клавиш Ctrl+S, чтобы сохранить документ, щелчок кнопки «Назад», чтобы покинуть веб-страницу, нажатие клавиши Enter, чтобы закрыть диалоговое окно, использование определенных жестов для развертывания и свертывания окон и даже нажатие на педаль тормоза в автомобиле. Пользователь не осмысливает эти действия — они входят в привычку.

Эта способность помогает людям становиться экспертами в использовании определенных инструментов (а также создавать ощущение потока). Привыкание заметно повышает эффективность, что нетрудно понять, но оно также может скрывать подвох. Если какое-то действие превращается в привычку и пользователь пытается совершить его в ситуации, когда это не работает, или, что еще хуже, наносит вред, то он заходит в тупик. Ему необходимо тут же начать размышлять (Что я только что сделал? Как же теперь сделать то, что нужно?) и, вероятно, потратить время на то, чтобы исправить последствия.

Миллионы людей уже знакомы с командами в Microsoft Word и других текстовых редакторах:

• Ctrl+X: вырезать выделенный фрагмент;

• Ctrl+V: вставить выделенный фрагмент;

• Ctrl+S: сохранить документ.

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

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

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

Примечание

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

Microbreaks (Микроперерывы)

«Я жду поезда. Неплохо бы сделать что-то полезное в оставшиеся пару минут».

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

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

Вот что обычно пользователи делают во время микроперерывов:

• проверяют электронную почту;

• просматривают ленту новостей и каналы (паттерн Streams and Feeds (Лента новостей и каналы)) (см. главу 2), например в Facebook или Twitter;

• заходят на новостные сайты, чтобы узнать, что происходит в мире;

• смотрят короткие видеоролики;

• ищут что-то несложное в сети;

• читают книгу в интернет-библиотеке;

• играют в короткую игру.

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

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

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

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

Spatial Memory (Пространственная память)

«Клянусь, эта кнопка была здесь секунду назад! Куда она пропала?»

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

Рассмотрим, например, рабочий стол Windows, Mac или Linux. Многие люди используют его, чтобы размещать там документы, ссылки на часто запускаемые приложения и т.п. Выясняется, что для поиска нужных объектов люди пользуются пространственной памятью, и это очень эффективно. Они придумывают собственные варианты группировки или вспоминают, что нужный документ «был в самом верху прямо над тем значком». (Естественно, можно подобрать аналогии и в реальном мире. На рабочих столах множества людей постоянно царит «художественный беспорядок» — для стороннего человека это просто куча барахла, в которой, однако, его владелец может мгновенно найти нужную вещь. И боже вас упаси сделать там уборку!)

Во многих приложениях кнопки диалоговых окон (OK, Cancel и т.д.) размещаются в предсказуемых местах отчасти потому, что пространственная память на такие элементы управления очень сильна. В сложных приложениях люди также могут находить объекты, запоминая, где они находятся по отношению к другим элементам: инструментам на панелях инструментов, объектам в иерархических списках и т.д. Поэтому следует с большой осторожностью применять такие паттерны, как Responsive Enabling (Отзывчивое обнаружение) (см. главу 4). Добавление чего-либо в интерфейс обычно не вызывает проблем, но перемещение существующих элементов управления может нарушить работу пространственной памяти и затруднить поиск объектов. Однако это зависит от многих обстоятельств, так что, если вы не уверены, испытайте изменения на пользователях.

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

Пространственная память, как и привыкание — еще один довод в пользу единообразия как среди разных программ, так и в пределах одного приложения. Люди ожидают найти определенный функционал в привычных местах. Пример вы найдете в описании паттерна Sign-In Tools (Инструменты регистрации) в главе 3.

Пространственная память объясняет, почему полезно предоставлять место для хранения документов и объектов, где порядок может наводить сам пользователь, как, например, на вышеупомянутых рабочих столах. Это не всегда практично, особенно когда объектов очень много, но для небольшого их количества работает довольно хорошо. Когда пользователи сами упорядочивают объекты, они легче запоминают, куда и что поместили. (И не меняйте выбранный ими порядок, пока они сами не попросят об этом!) Один из способов сделать такую структуру описан в разговоре о паттерне Movable Panels (Перемещаемые панели) в главе 4.

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

Кстати, верхние и нижние области списков и меню — это особые места в ко­гнитивном смысле. Люди чаще замечают их и лучше запоминают, чем элементы в середине меню. Так что, если вы хотите привлечь внимание к одному или двум элементам, поместите их вверху или внизу.

Prospective Memory (Проспективная память)

«Оставлю это здесь, чтобы не забыть заняться им позже».

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

Мы задействуем проспективную память, когда планируем сделать что-то и организуем некое напоминание. Например, если вам нужно принести на следующий день на работу книгу, то вы можете накануне вечером положить ее на тумбочку в прихожей. Если вы собираетесь ответить на сообщение позже (а не прямо сейчас), то можете оставить его открытым на экране телефона. Если вы часто опаздываете на совещания, то можете настроить звуковые напоминания в Outlook или на мобильном устройстве, которые будут подавать сигнал за пять минут до очередной встречи.

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

Некоторые программы поддерживают проспективную память. В Outlook и на большинстве мобильных платформ, как упоминалось выше, эта поддержка реализована напрямую; в этих системах есть календарь, и они могут подавать звуковые сигналы. Еще один пример — Trello, использующая доски канбан. Вот какие еще приемы используют люди:

• заметки для себя, например на виртуальных «стикерах»;

• открытые экраны приложений;

• примечания прямо в документах (например, «Допиши меня!»);

• закладки в браузере для сайтов, которые нужно просмотреть позже;

• документы, сохраненные на рабочем столе, а не в привычных папках на диске;

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

Люди используют любые типы средств идентификации, чтобы поддерживать пассивное проспективное запоминание, но обратите внимание, что ни один из перечисленных приемов не создавался специально для этого! То, для чего они в действительности были придуманы, — это гибкость и возможность организовать свои данные без вмешательства системы. Хороший клиент электронной почты позволяет создавать папки с любыми именами и не заботится о том, что вы делаете со своими входящими сообщениями. Текстовым редакторам все равно, что вы вводите и что для вас значит текст, написанный огромными пурпурными буквами; редактору программного кода без разницы, добавите вы комментарий «Дописать это!» в заголовок метода или нет. Браузеры не знают, зачем вы сохраняете определенные закладки.

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

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

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

Streamlined Repetition (Упрощенное повторение)

«Сколько раз мне нужно это повторить?»

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

Хороший пример — диалоговые окна Find and Replace (Найти и заменить), часто присутствующие в текстовых редакторах (Word, редакторах электронных сообщений и т.д.). В них пользователь вводит старую фразу и новую, а затем для каждого вхождения этой фразы во всем документе всего лишь нажимает кнопку Replace (Заменить). И это в случае, когда пользователю нужно проверить и подтвердить или отклонить каждое изменение; если он знает, что действительно необходимо заменить все вхождения, то может просто нажать кнопку Replace All (Заменить все). Одно движение — и работа сделана.

Вот более общий пример. Photoshop позволяет записывать действия, чтобы затем выполнять некоторые произвольные последовательности операций всего одним щелчком мыши. Если нужно обработать 20 изображений, изменив их размеры, применив кадрирование, усилив яркость и сохранив их, то эти шаги можно записать, работая над первым файлом в последовательности, а затем просто нажимать кнопку Play (Воспроизвести) для каждого из оставшихся 19. См. паттерн Macros (Макрос) в главе 8, где об этом говорится подробнее.

Среды для написания сценариев еще более универсальны. Unix и ее разновидности позволяют вносить в сценарий все, что только можно ввести в оболочке. Можно заново вызывать и выполнять отдельные команды, даже очень длинные, всего лишь нажимая Ctrl+P и Ввод. Можно собрать любой набор команд из командной строки, поместить их в цикл for и запустить, один раз нажав клавишу Ввод.

Или же сохранить их в сценарии командного процессора (или в цикле for сценария командного процессора!) и выполнить как отдельную команду. Написание сценариев — очень мощный инструмент, и по мере усложнения он превращается в полнофункциональное программирование.

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

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

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

Keyboard Only (Только клавиатура)

«Пожалуйста, не заставляйте меня использовать мышь».

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

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

Вот несколько стандартных приемов для работы только с клавиатуры:

• можно задать сочетания «горячих» клавиш, клавиши быстрого вызова и клавиши выбора для операций, вызываемых из меню, например Ctrl+S для сохранения документа. Обратитесь к списку стандартных операций в руководстве по стилю оформления для платформы, на которой вы работаете;

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

• клавиша Tab обычно перемещает клавиатурный фокус (выбор элемента управления, на который действует ввод с клавиатуры в данный момент времени) с одного элемента управления на следующий, а обратный переход осуществляется при помощи сочетания клавиш Shift+Tab. Это иногда называется «обход по клавишеTab». Многие пользователи ожидают, что эта техника будет работать в интерфейсах, содержащих формы;

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

• в диалоговых окнах и на веб-страницах обычно предусматривается кнопка по умолчанию, сигнализирующая: «Я закончил работу». На веб-страницах чаще всего это кнопки Submit (Отправить) или Done (Готово), а в диалоговых окнах — OK или Cancel (Отмена). Когда пользователь нажимает на такой странице или в диалоговом окне клавишу Enter, выполняется именно эта операция. После этого система переводит пользователя на следующую страницу или возвращает в предыдущее окно.

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

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

Social Media, Social Proof, and Collaboration (Социальные сети, социальное подтверждение и коллаборация)

«Что остальные думают об этом?»

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

Советы членов сообщества, прямые или косвенные, влияют на выбор людей, когда они принимают решения. Осуществляя поиск в интернете, совершая сделки (покупать ли этот продукт?), играя в игры (что тут делали другие игроки?) и даже создавая вещи, люди могут быть эффективнее, когда им помогают другие. Если нет, то они, по крайней мере, будут больше довольны результатом.

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

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

Вот несколько примеров социальной функциональности:

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

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

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

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

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

Из всех паттернов, описанных в этой книге, паттерн Help Systems (Cправочные системы) (см. главу 2) наиболее подробно раскрывает эту идею. Поддержка онлайн-сообщества является важной частью полной справочной системы для некоторых приложений.

Погрузиться в проектирование социальных сетей вы сможете, прочитав книгу «Designing Social Interfaces: Principles, Patterns, and Practices for Improving the User Experience» Кристиана Крамлиша (Christian Crumlish) и Эрин Мэлоун (Erin Malone) (O’Reilly, 2015).

Заключение

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

Глава 2. Организация контента: информационная архитектура и структура приложений

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

• что такое информационная архитектура;

• как организовать информацию и задачи, чтобы они были понятны и в них было удобно ориентироваться;

• различные методы организации контента и данных для их эффективного использования;

• как организовать инструменты и функции для эффективной работы;

• как разрабатывать системы повторяющихся шаблонов или экранов;

• паттерны для представления контента и функционала, а также для доступа к ним и навигации по ним.

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

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

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

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

Цель

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

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

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

Что это значит на практике?

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

• предвидело желания пользователя;

• организовывало и описывало информацию так, как это удобно пользователю;

• представляло информацию ясным и простым способом;

• использовало слова, которые понимает пользователь;

• предлагало четкий план действий;

• сообщало пользователю, где он находится и что с ним происходит;

• подтверждало, что задача успешно выполнена.

Определение

Информационная архитектура (ИА) — это совокупность способов организации и маркировки информационного пространства для его лучшего понимания и использования. В частности, ИА использует знания о пользователях для разработки таких элементов, как:

• структуры или категории для организации контента и функциональных элементов;

• различные способы навигации в зависимости от опыта пользователей;

• интуитивно понятные или многоступенчатые процессы для выполнения задач;

• ярлыки и языковые средства для передачи информации;

• инструменты поиска, просмотра и фильтры, помогающие пользователям найти то, что они ищут;

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

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

Проектирование информационного пространства для пользователей

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

Подход

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

• какие данные и какие инструменты вам нужно предоставить пользователю?

• исходя из ожиданий пользователя и его текущего положения, когда вам нужно их предоставить?

• как их классифицировать и упорядочить?

• что пользователю нужно с ними сделать?

• сколько существует способов их представить? Одного может быть недостаточно.

• как сделать их полезными с точки зрения пользователя?

Этот план поможет вам творчески представить ИА, которую вы разрабатываете.

Разграничение информации и способов ее представления

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

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

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

 

Рис. 2.1. Многоуровневое проектирование: от уровня содержимого до уровня представления (на основе работы Джесси Джеймса Гаррета «The Elements of User Experience: User-Centered Design for the Web and Beyond New», Riders, 2011)

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

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

Принцип ВИСИ

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

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

Эти категории составят основу вашей навигационной системы, которая более подробно рассмотрена в главе 3.

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

Способы организации и классификации контента

Вероятно, вы уже использовали какие-то общие методы организации и классификации информации для своего сайта или приложения. Они особенно полезны при планировании способов отображения больших объемов структурированных данных в таблицах. Они также важны для планирования того, как пользователи будут искать, просматривать и фильтровать данные, сортировать и уточнять результаты поиска. Мы опишем шесть таких методов. Этот список основан на работе Ричарда Сола Вурмана из его книги об информационной архитектуре «Information Anxiety 2» (Que, 2001) и книге Эбби Коверт и Николь Фентон «How to Make Scene of Any Mess» (Covert, 2014). Я рекомендую прочесть их обе.

Вурман предлагает удобный способ объединить основные методы организации в акрониме LATCH (Location — местоположение, Alphabet — алфавит, Time — время, Category — категория, Hierarchy — иерархия). Давайте рассмотрим эти и другие способы организации более подробно.

Алфавитный способ

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

Числовой способ

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

Хронологический способ

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

По расположению

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

Иерархический способ

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

Категорийный или фасетный способ

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

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

Проектирование приложений с преобладанием задач и рабочих процессов

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

Держите часто используемые инструменты под рукой

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

Разбейте процесс на несколько шагов

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

Учитывайте потребности как новичков, так и опытных пользователей

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

С другой стороны, эксперты и опытные пользователи могут быстро и эффективно работать со сложными интерфейсами, которые плотно набиты информацией и инструментами выбора. Предложите им «ускорители», такие как комбинации клавиш и возможность настроить интерфейс по своему желанию. Разработка способов навигации и ввода только с клавиатуры также важна.

Многоканальность и разнообразие размеров экранов устройств — новая реальность

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

Отображение данных в виде карточек

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

Проектирование системы типов страниц

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

Полезная схема была предложена Терезой Нил. Она разработала способы организации прикладных структур в контексте насыщенных интернет-приложений (rich internet application, RIA). Нил определяет три типа структур на основе главной цели пользователя: информация, процесс и создание8.

Этот список предоставляет основу, в которую можно вписать идиомы и паттерны, о которых мы говорим в этой и других главах.

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

Любая такая страница будет служить одной цели из списка ниже:

• Обзор — показ списка или набора функций.

• Фокус — показ единственного объекта, такого как карта, книга, видео или игра.

• Создание — предоставление инструментов для создания объекта.

• Действие — облегчение выполнения одиночной задачи.

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

Обзор: показ списка или набора инструментов или опций

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

• Простые текстовые списки.

• Меню.

• Таблицы карточек или изображений.

• Результаты поиска в виде списка или таблицы.

• Списки электронных писем или других сообщений.

• Таблицы данных.

• Древовидные схемы, панели и графические элементы — аккордеоны.

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

• Какова величина набора данных или какой длины список?

• Сколько места доступно для их отображения?

• Расположение одноуровневое или иерархическое, и если это иерархия, то какого рода?

• В каком порядке представлена информация и может ли пользователь изменять этот порядок?

• Как пользователь может искать, фильтровать и сортировать информацию?

• Какая информация или какие операции связаны с каждым элементом списка и когда и в каком порядке они должны появляться?

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

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

• Feature, Search, and Browse (Рекомендация, поиск и обзор). Бесчисленное количество веб-сайтов с изображением продуктов и текстовой информацией следуют этой схеме. Поиск и просмотр предоставляют пользователям два способа найти интересующие их товары, в то время как на главной странице расположен один элемент для привлечения внимания.

• Streams and Feeds (Лента новостей и каналы). Блоги, новостные сайты, электронная почта и социальные сети, такие как Twitter, используют шаблон ленты новостей или ленты социальных сетей для отображения контента, причем самые последние обновления видны первыми в ленте.

• Grids (Сетки). Четко определенный тип интерфейса для представления историй, действий, карт и инструментов выбора. Сетки также используются для обработки фотографий и других графических элементов. Они могут содержать иерархии и списки, инструменты для упорядочивания и изменения порядка документов, инструменты для работы непосредственно с изображениями, запуска приложений, детализации и т.д.

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

Фокус: отображение одиночного объекта

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

• длинная страница с вертикальной прокруткой, заполненная текстом (статьи, книги и аналогичное объемное содержимое);

• интерфейс с масштабированием для очень больших и детальных объектов, таких как карты, изображения или информационная графика. Известный пример — географические карты, такие как Google Maps;

• идиома «мультимедийный проигрыватель», включающая видео- и аудиоплееры.

При разработке такого интерфейса обратите внимание на следующие паттерны и методы:

• Mobile direct access (Прямой мобильный доступ), позволяющий пользователю напрямую перейти к основной функции приложения, обычно использующий данные о местоположении и времени для получения ценной информации без участия пользователя;

• Alternative Views (Альтернативные представления) для демонстрации содержимого различными способами;

• Many Workspaces (Несколько рабочих пространств) на случай, если пользователь захочет просмотреть несколько мест, состояний или документов одновременно;

• Deep-linked State (Глубокая ссылка), описанный в главе 3. Благодаря возможностям этого паттерна пользователь может сохранить определенную точку или состояние, чтобы вернуться к нему позже, или отправить кому-то URL-адрес, указывающий именно на эту точку или состояние;

• некоторые паттерны для мобильных устройств, описанные в главе 6, если одна из целей дизайна — доставка контента на мобильные устройства.

Создание: наличие инструментов для создания объектов

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

• Canvas Plus Palette (Холст и палитра) описывает большинство таких приложений. Этот узнаваемый популярный паттерн для визуальных редакторов прекрасно оправдывает ожидания пользователей;

• почти все подобные приложения строятся на базе паттерна Many Workspaces (Несколько рабочих пространств). Внутри одного окна содержится несколько документов, над которыми пользователь может работать параллельно.

Действие: помощь в выполнении одиночной задачи

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

Здесь ведущую роль играют формы. Формам посвящена глава 10 — там вы найдете описание множества элементов управления и паттернов, необходимых для создания эффективных форм. В главе 8 рассказывается о еще одном полезном наборе паттернов, которые основываются скорее на «глаголах», а не на «существительных».

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

• Чаще всего задачу разбивают на небольшие шаги или группы шагов. В этом случае пройти все необходимые этапы пользователям помогает интерфейс на базе паттерна Wizard (Мастер);

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

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

Паттерны

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

• Feature, Search, and Browse (Рекомендация, поиск и обзор).

• Mobile direct access (Прямой мобильный доступ).

• Streams and Feeds (Лента новостей и каналы).

• Thumbnail Grid (Сетка миниатюр).

• Dashboard (Дашборд).

• Canvas Plus Palette (Холст и палитра).

• Wizard (Мастер).

• Settings Editor (Редактор настроек).

• Alternative Views (Альтернативные представления).

• Many Workspaces (Несколько рабочих пространств).

• Help Systems (Справочные системы).

• Tags (Теги).

Feature, Search, and Browse (Рекомендация, поиск и обзор)

Что это

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

Когда использовать

Если ваш сайт содержит длинные списки элементов — сообщений, продуктов, видео и т.д. Их можно просматривать, и по ним можно вести поиск. Вы хотите сразу же заинтересовать новых посетителей, предложив им прочитать или посмотреть что-то увлекательное.

Если цель вашего сайта — поиск продуктов и осуществление сделок. В этом случае инструмент поиска должен быть доминирующим. Рекомендуемый контент и просмотр не так важны.

Зачем

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

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

Как

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

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

Выделите центральную сцену (паттерн Center Stage (Центральная сцена), глава 4) для рекомендуемого товара, продукта или видео. Рядом с ней, вверху страницы, поместите область просмотра остального контента — списки историй, карточек, тем или категорий продуктов. Они могут вести на страницы этих категорий.

Если ярлыки категорий раскрываются для вывода подкатегорий, это означает, что список ведет себя как дерево. На некоторых сайтах, таких как Amazon, ярлыки категорий превращаются в меню: если навести курсор на такую метку, появится меню подкатегорий.

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

Позаботьтесь о том, чтобы пользователи не заблудились, просматривая категории и подкатегории объектов, — используйте паттерн Breadcrumbs (Хлебные крошки), глава 3.

Примеры

Контент-ориентированные сайты. Следующие три примера демонстрируют классический паттерн Feature, Search, and Browse (Рекомендация, поиск и обзор). WebMD (рис. 2.2), Yahoo! (рис. 2.3) и Sheknows (рис. 2.4) — новостные и контент-ориентированные цифровые издания. В WebMD и Yahoo! есть поле поиска в верхней части в виде одного крупного элемента. Sheknows предлагает вариацию: два элемента над выделяющейся поисковой строкой.

Коммерчески ориентированные сайты. Крупные ритейлеры, такие как Target (рис. 2.5) и Ace Hardware (рис. 2.6), используют этот же паттерн. Поле поиска находится вверху, а крупные блоки (рекламные акции) — внизу. Оба сайта поддерживают отображение сетки карточек.

Веб-сайты, ориентированные на задачи. Эти два примера показывают, как паттерн Feature, Search, and Browse (Рекомендация, поиск и обзор) изменяется при развертывании в контексте, когда приоритет — решение задачи пользователя (нахождение того, что нужно). Для British Airways (рис. 2.7) большой модуль поиска рейсов — главный элемент в верхней части страницы. Под ним минимум контента: рекомендуемая статья и три карточки для просмотра.

Сайт Epicurious (рис. 2.8) также отдает приоритет поиску. Он занимает панель шириной на весь экран в верхней части страницы. Модули с контентом и карточками расположены сразу под ним. Их крупный размер, вызывающие аппетит фото и заголовки привлекают не меньше внимания, чем строка поиска. Исходя из своих целей определите оптимальный для себя подход и соответствующим образом разрабатывайте свой интерфейс.

 

Рис. 2.2. WebMD

 

Рис. 2.3. Yahoo!

 

Рис. 2.4. Sheknows

 

Рис. 2.5. Target

 

Рис. 2.6. Ace Hardware

 

Рис. 2.7. British Airways

 

Рис. 2.8. Epicurious

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

Сайт Crunchbase (рис. 2.9) необычен тем, что он продвигает фасетные фильтры как часть своей поисковой системы, подразумевая, что поисковик может выдавать более подходящие результаты поиска с помощью фасетов. Рекомендуемый контент приведен ниже.

 

Рис. 2.9. Crunchbase

Сайты Epicurious (рис. 2.10) и Airbnb (рис. 2.11) используют более традиционное развертывание фасетных фильтров на экранах результатов поиска (обратите внимание на удобный для мобильных устройств формат набора карточек для результатов поиска в обоих случаях). Фасеты лучше всего подходят для сужения результатов поиска на основе их предметной области.

 

Рис. 2.10. Результаты поиска Epicurious с фасетными фильтрами

 

Рис. 2.11. Результаты поиска Airbnb с фасетными фильтрами

Mobile direct access (Прямой мобильный доступ)

Что это

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

Когда использовать

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

Зачем

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

Как

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

Примеры

Все перечисленные примеры хорошо подходят для мобильных устройств, но могут быть полезны и для десктопных приложений. В первом примере Snap (рис. 2.12, слева) — компания, продукт которой ориентирован на людей, увлекающихся фотографией, и социальные сети. Когда приложение запускается, фронтальная камера автоматически включается, чтобы сделать селфи. Следующие три примера показывают, как приложения используют данные о местоположении и времени для выполнения задачи без участия пользователя. INRIX Parkme (рис. 2.12, справа), сайты Eventbrite и Weatherbug (рис. 2.13) работают подобным образом. ParkMe предварительно анализирует полученные данные (парковка в течение одного часа), чтобы подобрать стоимость парковки по умолчанию.

 

Рис. 2.12. Стартовые экраны Snap и INRIX ParkMe

 

Рис. 2.13. Стартовые экраны Eventbrite и Weatherbug

Streams and Feeds (Лента новостей и каналы)

Что это

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

Поток новостей/контента. Контент может быть первичным (вы публикуете собственный контент) или агрегированным. Такой подход к организации новостной ленты, вдохновленный социальными сетями, уже закрепился как шаблон для мобильных устройств. Обычно лента состоит из элементов с отметками времени, расположенных в обратном хронологическом порядке, и постоянно обновляется.

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

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

Когда использовать

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

Продукт для социального взаимодействия может быть персонализированным — пользователь «владеет» им, как списком друзей в Twitter или Facebook.

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

Зачем

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

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

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

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

Этот паттерн поддерживает паттерн поведения Microbreaks (Микроперерывы), который мы рассматривали в главе 1. Даже беглое знакомство с приложением на основе паттерна Streams and Feeds (Лента новостей и каналы) может дать пользователю много полезной информации (или возможностей для развлечения) быстро и без усилий с его стороны.

Как

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

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

Дополните персональную ленту пользователя рекомендациями от издателя. Предложите продвинутым пользователям возможность создавать настраиваемые потоки на основе тем или рекомендованных лент других участников. Такие инструменты, как TweetDeck, используют паттерн Many Workspaces (Несколько рабочих пространств) для отображения нескольких параллельных панелей контента.

Информация, которая демонстрируется с каждым элементом, может включать следующее:

• Что. Короткие обновления выводите целиком. Либо покажите заголовок в несколько слов или аннотацию из пары предложений и изображение, если оно есть.

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

• Когда. Укажите дату или время, используя примерные обозначения, такие как «вчера» и «одиннадцать минут назад». Когда пост провисит в ленте достаточно, перейдите к обычному указанию времени.

• Где. Если элемент взят с веб-сайта, прикрепите ссылку на этот сайт. Если он взят в одном из блогов вашей организации, сделайте ссылку на него.

Если элемент содержит больше информации, чем можно отобразить на дисплее, разместите ссылку «Далее» или кнопку «Смотреть больше». Этот паттерн подходит для длинных комментариев. Предусмотрите возможность нажать на карточки с новостями или историями, чтобы открыть их на новой странице. Попробуйте разработать способ отображения всего содержимого новости в окне ленты новостей. Если ваша лента выполнена в формате списка, то можно воспользоваться паттернами Two-Panel Selector (Двухпанельный селектор), One-Window Drilldown (Детализация в одном окне) и List Inlay (Раскрывающийся список). Далее вы найдете примеры для каждой из этих моделей.

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

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

Многие сервисы с лентами новостей и каналов, включая Twitter и Facebook, используют паттерн Infinite List (Бесконечный список) как для мобильных, так и для полноэкранных устройств. Этот паттерн позволяет пользователям загружать одну или две страницы последних обновлений, а также предоставляет возможность загрузить больше контента, перемещаясь «назад во времени».

• История активности. Некоторые ресурсы используют термин «история активности» для обозначения упорядоченной по времени ленты действий (обычно в соцсетях), выполняемых одним субъектом — человеком, системой или организацией. Это история того, что они делали. Это полезная концепция, и она не противоречит паттерну Streams and Feeds (Лента новостей и каналы), подразумевающему организацию ленты действий, которые интересны отдельному человеку или группе пользователей, но которые они сами не выполняли. Новости в ленте обычно собраны из нескольких источников.

Примеры

Потоки новостей и контента. Techcrunch (рис. 2.14 и 2.15) — отличный пример использования паттерна Streams and Feeds (Лента новостей и каналы). Основное мобильное приложение и веб-сайт — это прокручиваемый поток историй, причем самые последние истории расположены первыми в списке. На этом уровне читателю предоставляется ровно столько информации, чтобы он мог уловить основную идею: фото, заголовок и вводный текст. Если читатель выбирает историю, он переходит к ее полной версии, с увеличенными изображениями и полным текстом. На странице полной версии доступна функция «Поделиться», позволяющая распространить информацию в социальных сетях читателя.

Сайт BuzzFeed News (рис. 2.16 и 2.17) следует точно такой же схеме. Обратите внимание, что эта компания использует слово Feed9 в названии. Это показывает, насколько важен этот паттерн для выражения идентичности и целей компании. Здесь мы снова видим прокручиваемый поток новостей, когда самые свежие новости идут первыми в списке. Индивидуальность BuzzFeed прослеживается в привлекающих внимание заголовках и вопросах, заставляющих читателя задуматься. При выборе истории загружается страница с полным текстом статьи, викторины или галереей изображений. Виджет социального обмена еще более важен.

 

Рис. 2.14. Techcrunch

 

Рис. 2.15. Techcrunch: детальный просмотр/открытая статья

 

Рис. 2.16. Новости BuzzFeed

 

Рис. 2.17. Страница с полным текстом статьи на BuzzFeed

Сайты RealClear — новостные агрегаторы, которые размещают ссылки на новости, опубликованные на других сайтах. Наиболее активен сайт RealClearPolitics (рис. 2.18). Хотя он выглядит как простой плоский список, наподобие «Википедии», это лента. Ссылки публикуются несколько раз в день. Обновления, взятые из печатных газет, помечены как «Утренний выпуск» и «Дневной выпуск». Обратите внимание, как RealClearPolitics со своими «утренним» и «вечерним» выпусками подражает стилю газет прошлого. Читатель может прокручивать список или использовать меню выбора для просмотра ссылок предыдущих дней. Это бесконечная лента контента, организованного по времени.

 

Рис. 2.18. RealClearPolitics

Flipboard (рис. 2.19) выглядит как журнал или ресурс для просмотра изображений, но на самом деле это тоже лента. Он может собирать контент из ваших социальных сетей или из лент популярных изданий и привязывать к нему ссылки. Можно также создавать ленты похожих статей с использованием хештегов.

 

Рис. 2.19. Начальная страница Flipboard

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

Лента соцсетей. Это то, что пользователи просматривают чаще всего. Эти ленты кажутся бесконечными. Так происходит потому, что они формируют вовлеченность. Как видно на примере Twitter (рис. 2.21) и Instagram (рис. 2.22), ленты соцсетей живые. Лента может содержать контент, посты или карточки из личного или делового окружения, как в случае с Twitter. Или это может быть (почти) полностью личная лента, как в случае с Instagram. Лента в нем — это формат потребления: посмотрите фото, комментарий, а затем используйте социальные функции — поставить лайк, поделиться или комментировать.

 

Рис. 2.20. Лента новостей Flipboard

Социальные сети, новостные агрегаторы и сервисы личной переписки (например, электронная почта) содержат множество примеров использования паттрена Streams and Feeds (Лента новостей и каналы). Facebook автоматически (и непредсказуемо) переключается между выбранным представлением «Главные новости» и «Последние новости» и показывает все. Тем не менее Facebook нет равных в том, что касается быстрой реакции на контент. Оставить короткий комментарий к записи в Facebook почти так же просто, как подумать об этом.

 

Рис. 2.21. Twitter

 

Рис. 2.22. Instagram

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

 

Рис. 2.23. Slack

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

 

Рис. 2.24. Quip

Media Browser (Медиабраузер)

Что это

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

Зачем

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

Следующие паттерны и компоненты, описанные в других разделах этой книги, часто используют структуры медиабраузера:

• Grid of Equals (Выравнивание по сетке);

• One-Window Drilldown (Детализация в одном окне);

• Two-Panel Selector (Двухпанельный селектор);

• Pyramid (Пирамида);

• Module Tabs (Автономные вкладки) и Collapsible Panels (Свертываемые панели);

• Button Groups (Группы кнопок);

• древовидные списки;

• Keyboard Only (Только клавиатура);

• окна поиска;

• комментарии и обсуждения.

Как

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

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

Когда пользователь щелкает на элементе, сразу же показывайте его в отдельном представлении. Приложения часто позволяют пользователям перемещаться по сетке с помощью клавиатуры — например, кнопок со стрелками или с помощью клавиши «пробел» (см. паттерн Keyboard Only (Только клавиатура) в главе 1).

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

На уровне медиабраузера предоставьте всем пользователям функции создания слайд-шоу или плейлистов.

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

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

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

В Adobe Bridge в интерфейс обзора включены фильтры, и можно настроить выбор из большой коллекции элементов по более чем 10 свойствам, включая ключевые слова, дату изменения, тип камеры и значение ISO.

Представление одного элемента. Это полный текст истории, документ или изображение целиком на странице, чтобы пользователь мог прочитать, изменить этот элемент, оставить комментарий или поделиться. Можно создать подробное или полное представление на одной отдельно взятой странице. Как вариант, ограничьтесь крупным планом выбранного изображения или предусмотрите плеер для воспроизведения видео. Такой крупный план можно поместить рядом с сеткой миниатюр, если окно большое, либо вывести на место сетки. Рядом выведите метаданные — информацию об элементе. На практике это означает выбор между паттернами Two-Panel Selector (Двухпанельный селектор) и One-Window Drilldown (Детализация в одном окне). Подробнее о паттернах, связанных со списками, см. в главе 7.

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

На этом уровне можно использовать функции редактирования отдельных элементов. Например, создайте редактор фотографий с простым функционалом: кадрирование, настройка цвета и яркости, снятие эффекта красных глаз. Редактировать можно также свойства метаданных. Если полноценный редактор встроить сложно, предусмотрите возможность запустить «настоящий» редактор (например, в Adobe Bridge есть функция отправки фотографии в Photoshop). Для простой и понятной группировки всех этих функций используйте паттерн Button Groups (Группы кнопок).

Свяжите элемент с предыдущим и последующим элементами в списке, добавив кнопки «Предыдущий» и «Следующий», особенно если вы используете паттерн One-Window Drilldown (Детализация в одном окне) для представления единичного элемента, который также требует наличия кнопки «Назад». См. также навигационный паттерн Pyramid (Пирамида) в главе 3.

Примеры

Просмотр коллекции объектов. Преимущество изображений в том, что они наглядны и могут содержать в себе большое количество информации. Вот почему они часто используются для представления набора объектов, которые можно просматривать и выбирать. Сетка изображений, сопровождаемых описаниями или без них, — это компактный, полезный паттерн для выбора одного элемента из большой коллекции. Он универсален для мобильных, десктопных и широкоэкранных пользовательских интерфейсов, таких как Apple TV. При выборе одного элемента или карточки из сетки медиабраузера этот элемент можно просмотреть или загрузить страницу с его подробным описанием. В приложении для чтения электронных книг Kindle для iOS (рис. 2.25) страница просмотра — это набор изображений обложек книг. В профиле пользователя Instagram (рис. 2.26) очень мало метаданных — в основном он представляет собой сетку изображений, которую можно прокручивать. Именно изображения формируют вашу личность и идентичность в Instagram. В YouTube (рис. 2.27), Apple TV (рис. 2.28) и LinkedIn Learning (рис. 2.29) на полноэкранных страницах просмотра доступно большое количество видеороликов. В этих же сервисах можно увидеть популярный вариант прямоугольного расположения сетки: прокручиваемую ленту — горизонтальный ряд одинаковых по высоте объектов. Поскольку элементов для просмотра очень много, изображения сгруппированы по категориям, чтобы их было легче просматривать и воспринимать. Apple TV использует минималистский подход. YouTube добавляет больше всего информации, фактически каждый элемент в нем — это «карточка» с изображением, заголовком, именем автора и данными о просмотрах, лайках и комментариях (что неудивительно, поскольку YouTube опирается на механизмы социальных сетей).

 

Рис. 2.25. Приложение Kindle

 

Рис. 2.26. Просмотр профиля в Instagram

 

Рис. 2.27. YouTube

 

Рис. 2.28. Apple TV

 

Рис. 2.29. LinkedIn Learning

На YouTube-каналах контент представлен либо в режиме медиабраузера, либо, если вы выбрали просмотр одного видео, в виде списка рядом с видеоплеером (по умолчанию). Щелкнув на миниатюре ролика, вы перейдете на страницу этого видео, где содержится подробная информация о нем и поле комментариев. Существуют такие разделы, как плейлисты, последние добавленные видео, самые просматриваемые видео и самые рейтинговые видео. Также во всех режимах доступно окно поиска.

Управление наборами медиафайлов и их редактирование. Создатели контента используют паттерн медиабраузера, чтобы управлять наборами файлов, которые они создают или обрабатывают. Apple Photos (рис. 2.30), Adobe Bridge (рис. 2.31) и Apple iMovie (рис. 2.32) — это десктопные приложения для управления персональными коллекциями изображений. Их интерфейсы обзора (это всегда двухпанельные селекторы) различаются по сложности: от очень простого дизайна Apple Photos до варианта Adobe Bridge с многочисленными панелями и фильтрами. Apple Photos использует паттерн One-Window Drilldown (Детализация в одном окне) для перехода к представлению одного элемента, а Adobe Bridge и Apple iMovie располагают все три вида на одной странице. Часто используется прокручиваемая горизонтальная лента — вариация прямоугольной сетки. В iMovie по такому принципу устроена шкала времени. Это главная рабочая палитра для создания контента, организованного во времени, такого как видео.

В Adobe Acrobat (рис. 2.33), инструменте для чтения и редактирования документов в популярном PDF-формате, страницы документов в режиме редактирования представлены в виде сетки. Это позволяет быстро менять порядок страниц, выбирать страницы, которые нужно удалить, или вставлять в нужное место новые элементы.

 

Рис. 2.30. Apple Photos

 

Рис. 2.31. Adobe Bridge

 

Рис. 2.32. Apple iMovie

 

Рис. 2.33. Adobe Acrobat

Dashboard (Дашборд)

Что это

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

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

Зачем

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

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

• паттерн Titled Sections (Именованные разделы);

• вкладки и паттерн Collapsible Panels (Свертываемые панели);

• паттерн Movable Panels (Перемещаемые панели);

• паттерн One-Window Drilldown (Детализация в одном окне);

• разнообразные списки и таблицы (см. главу 7);

• информационная графика (см. главу 9);

• паттерн Datatips (Всплывающие подсказки).

Как

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

Подберите подходящую иерархию (см. главу 4) для организации визуальных элементов — списков, таблиц и инфографики. Старайтесь разместить всю важную информацию на одной странице, чтобы не требовалась прокрутка, чтобы пользователь могут увидеть все сразу. Группируйте связанные данные в именованные разделы (паттерн Titled Sections (Именованные разделы)) и используйте вкладки только в том случае, если вы уверены, что пользователям не потребуется просмотреть две вкладки одновременно.

Подробную информацию об элементе можно представить, используя паттерн One-Window Drilldown (Детализация в одном окне), когда пользователь щелкает на ссылке или изображении, чтобы увидеть детали. Здесь удобно использовать паттерн Datatips (Всплывающие подсказки), когда информация появляется при наведении курсора мыши на графические элементы.

Для отображения данных используйте подходящие и грамотно спроектированные графические элементы. Индикаторы, круговые шкалы, круговые диаграммы и трехмерные столбчатые диаграммы — это красиво, но не всегда удобно, чтобы с ходу считывать с них сравнительные данные. Простые линейные и столбчатые диаграммы подходят куда лучше, особенно для распределенных по времени данных. Если числа и текст важнее, чем изображения, используйте списки и таблицы. Для таблиц, состоящих из нескольких столбцов, подходит паттерн Row Striping (Чередование строк).

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

Нужна ли возможность настраивать дашборд по своему вкусу? Во многих дашбордах такая возможность есть, и пользователи зачастую ожидают ее. Один из вариантов ее реализации — возможность упорядочить разделы. Например, в Salesforce доступны подвижные панели (паттерн Movable Panels (Перемещаемые панели)) — в дополнение к возможности выбрать, какие области отображать.

Примеры

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

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

Завершая разговор об этом паттерне, порекомендуем книгу Стивена Фью о дашбордах, Information Dashboard Design: Displaying Data for At-a-Glance Monitoring (Analytics Press, 2013).

 

Рис. 2.34. Дашборд Salesforce

 

Рис. 2.35. SpaceIQ

Canvas Plus Palette (Холст и палитра)

Что это

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

Когда использовать

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

Зачем

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

Как

Создайте большую пустую область, которая будет служить пользователю холстом. Это может быть отдельное окно, как в Photoshop (см. рис. 2.18), или встроенная область на странице с другими инструментами. Главное — пользователь должен одновременно видеть и холст, и палитру. Поместите дополнительные инструменты (панели свойств, образцы цвета и т.д.) справа или ниже холста, в небольших похожих на палитру окнах или на панелях.

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

Поместите палитру слева от холста или над ним. Можно разбить ее на подгруппы, а для их представления использовать паттерн Module Tabs (Автономные вкладки) или Collapsible Panels (Свертываемые панели).

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

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

Примеры

Примеры ниже показывают разнообразие шаблонов холста и палитры. Adobe Photoshop (рис. 2.36) — это классический вариант. Все четыре края страницы содержат палитры, панели и команды, которые автор использует при работе с изображением. В Axure RP Pro (рис. 2.37) есть палитры слева и справа от центральной панели, на которой пользователь создает интерактивные эскизы прототипов программного обеспечения. Далее представлено приложение Omni-Graffle (рис. 2.38) для создания векторной графики на macOS, в нем палитра инструментов расположена слева. Этот паттерн используется и в мобильных приложениях, когда они включают много инструментов или вариантов выбора. В iOS Photos (рис. 2.39) редактируемое изображение помещается на центральный холст. Ниже приведены три палитры инструментов, которые представляют собой раскрываемые и скрываемые панели с набором инструментов редактирования.

 

Рис. 2.36. Adobe Photoshop

 

Рис. 2.37. Axure RP Pro

 

Рис. 2.38. OmniGraffle

 

Рис. 2.39. iOS Photos

 

Wizard (Мастер)

Что это

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

Когда использовать

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

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

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

Однако в других случаях этот паттерн может вызывать отторжение. Часто эксперты считают мастеры негибкими и примитивными, например в программах для творчества: создания текстов, рисования или программирования. Сюда же можно добавить пользователей, которые хотят разобраться в работе программы; мастер не позволяет им понять, на что именно влияют их действия или как меняется состояние приложения в зависимости от сделанного выбора. Иногда это просто выводит из себя.

Зачем

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

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

Как

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

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

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

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

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

Если вы выберете этот вариант, предусмотрите возможность продвигаться вперед и возвращаться назад по всей задаче. Предложите пользователю вернуться на шаг назад или изменить свой выбор другим способом, если он этого хочет. Кроме того, во многих пользовательских интерфейсах есть карта или обзорное представление всех шагов с возможностью выбрать нужный — преимущества паттерна Two-Panel Selector (Двухпанельный селектор). (В отличие от этого паттерна, допускающего произвольный доступ к любому элементу, мастер подразумевает четко определенный порядок шагов, даже если он всего лишь рекомендуемый.)

Если же вы решите выводить все шаги на одной странице, используйте паттерны, рассматриваемые в главе 4.

• Titled Sections (Именованные разделы) с понятной нумерацией шагов в заголовках. Он подходит для не очень разветвленных задач, так как все шаги можно видеть одновременно.

• Responsive Enabling (Отзывчивое включение), когда все шаги находятся на одной странице, но каждый последующий остается недоступным до тех пор, пока пользователь не завершит предыдущий.

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

Паттерны Good Defaults (Хорошие варианты по умолчанию) и Smart Prefills (Умное предзаполнение) из главы 10 можно использовать независимо от способа организации шагов. Если пользователь захотел передать контроль над процессом в ваши руки, то он, скорее всего, разрешит вам задавать варианты выбора по умолчанию, когда он для него не важен, например определять место для установки программы.

Примеры

Дизайнеры Microsoft Office избавились от множества мастеров, но некоторые оставили — и на то были веские причины. Импортирование данных в Excel способно сбить с толку любого. Мастер импорта данных (рис. 2.40) представляет собой классический пример этого формата: с кнопками «Назад/Далее», ветвлениями и без карты шагов. Он может показаться неудобным, но он работает. Каждый экран позволяет сосредоточиться на текущей задаче и не думать о том, что будет дальше.

 

Рис. 2.40. Импортирование в Microsoft Excel

Settings Editor (Редактор настроек)

Что это

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

Когда использовать

Если вы создаете:

• приложение, в котором предусмотрены общие настройки;

• операционную систему, мобильное устройство или платформу, содержащие параметры, общие для всей системы;

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

• открытый инструмент для создания документов или других сложных продуктов. Пользователям понадобится менять свойства документа, объекты внутри документа и другие элементы;

• конфигуратор продуктов, позволяющий подобрать продукт в режиме онлайн.

Зачем

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

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

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

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

Как

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

Во-вторых, группируйте похожие свойства на страницах и присваивайте этим страницам понятные названия. (Иногда все свойства или настройки располагаются на одной странице, но так бывает нечасто.) Попробуйте рассортировать карточки с репрезентативными группами пользователей, это поможет вам определить категории и выбрать для них названия. Если свойств очень много, может потребоваться трех- или четырехуровневая иерархия групп. Однако убедитесь, что пользователю не придется щелкать мышкой 53 раза, чтобы добраться до наиболее востребованных параметров.

В-третьих, определитесь с представлением страниц. Вкладки, двухпанельный селектор и детализация в одном окне (см. главу 7) с подробным «меню» страниц вверху страницы — вероятно, самый популярный макет редактора настроек.

Дизайн самих форм стоит рассмотреть отдельно. Подробнее о паттернах и техниках проектирования форм рассказывается в главе 10.

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

Примеры

Google (рис. 2.41) и Facebook (рис. 2.42) используют вкладки для страниц редактирования пользовательских профилей. У Amazon есть единая ссылка для всей информации, связанной с учетной записью: Your Account (рис. 2.43). На этой странице меню (паттерн Menu Page, глава 3) находятся настройки учетной записи, а также элементы управления данными платежных карт, информация о заказе, цифровом контенте и даже об активности сообщества, а также виш-листы. Страница организована понятно и компактно — если мне понадобится уточнить свои данные на Amazon, я знаю, куда идти.

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

 

Рис. 2.41. Google

 

Рис. 2.42. Facebook

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

В iOS, мобильной ОС Apple, множество настроек (рис. 2.44). Некоторые из них общие для всего устройства, а некоторые используются для отдельных приложений на iPhone. Apple организует их в виде единого прокручиваемого списка. Некоторый порядок поддерживается благодаря тому, что самые важные и часто используемые настройки находятся вверху. Элементы в длинном списке также сгруппированы, чтобы пользователю было проще находить их и выбирать.

В macOS, десктопной ОС Apple, существует панель категорий для системных настроек (рис. 2.45). Они помечены разделами, значками и ярлыками, чтобы было проще понять назначение категории и выбрать нужную.

 

Рис. 2.43. Amazon

 

Рис. 2.44. Настройки iOS

 

Рис. 2.45. Системные настройки macOS

Alternative Views (Альтернативные представления)

Что это

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

Когда использовать

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

Зачем

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

Вот еще несколько причин, чтобы использовать паттерн Alternative Views (Альтернативные представления):

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

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

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

Как

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

Какие-то данные в таких альтернативных представлениях могут добавляться и удаляться, но основное содержимое остается примерно одинаковым. Типичный пример переключения представлений — изменение внешнего вида списка. Как в Windows, так и в MacOS списки файлов можно просматривать в виде сетки миниатюр, древовидной таблицы или «карусели» (паттерны Thumbnail Grid, Tree Table, Carousel).

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

Разместите «переключатель» между режимами в главном интерфейсе. Он не обязательно должен бросаться в глаза; в PowerPoint и Word кнопки переключения режимов находятся в правом нижнем углу, куда обычно не смотрят. В большинстве приложений альтернативные режимы просмотра обозначены иконками. Убедитесь, что из альтернативного вида легко вернуться к представлению по умолчанию. Имейте в виду, что при смене режима представления текущее состояние приложения должно сохраняться: выбранные элементы, местонахождение пользователя в документе, несохраненные изменения, операции отмены и повторного ввода и т.д. Если этого не предусмотреть, пользователя ждет неприятный сюрприз.

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

Примеры

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

Сперва обратимся к Yelp, платформе для поиска компаний в местном секторе услуг. В мобильном приложении Yelp для iOS (рис. 2.46) доступны два вида, которые мы рассмотрели. Пользователю приходится переключаться между вариантами просмотра на маленьком экране. В десктопном приложении Yelp (рис. 2.47) достаточно места для одновременного просмотра карты и списка. Благодаря этому процесс поиска и работы с информацией становится удобнее, например проще выделить организацию одновременно в списке и на карте.

У Zillow — платформы, специализирующейся на недвижимости, — похожий дизайн. Zillow на iOS предлагает вид карты и вид списка результатов поиска по запросам (рис. 2.48). Пользователю придется переключаться между представлениями. В десктопном приложении Zillow (рис. 2.49) оба этих вида располагаются на одной странице. Обратите внимание на использование фотографий предлагаемой недвижимости в представлении списка. Благодаря этому можно быстро просмотреть множество вариантов и сосредоточиться на самых привлекательных.

 

 

Рис. 2.46. Виды «Карта» и «Список» в Yelp на IOS

 

Рис. 2.47. Объединение карты и списка в десктопной версии Yelp

 

 

Рис. 2.48. Виды «Карта» и «Список» в Zillow на IOS

 

Рис. 2.49. Объединение карты и списка в десктопной версии Zillow

Два графических редактора, Apple Keynote (рис. 2.50) и Adobe Illustrator (рис. 2.51), предлагают различные представления для редактируемого объекта. В режиме слайд-шоу обычно можно редактировать один слайд и его содержимое за раз, но иногда пользователю необходимо видеть все слайды, расположенные на виртуальном «столе». (Здесь не показан третий, полноэкранный режим, в котором фактически воспроизводится слайд-шоу.)

 

Рис. 2.50. Apple Keynote

 

Рис. 2.51. Adobe Illustrator

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

Many Workspaces (Несколько рабочих пространств)

Что это

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

Когда использовать

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

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

Паттерн Many Workspaces (Несколько рабочих пространств) обычно не используется и в приложениях, структурно организованных как поток персональных новостей. Сервисы электронной почты, личные страницы Facebook и т.д. демонстрируют только ленту, необходимую пользователю; держать в них открытыми несколько окон смысла не имеет. Тем не менее почтовые клиенты позволяют открывать одновременно несколько сообщений в разных окнах. В некоторых приложениях Twitter можно выводить несколько потоков на одной странице: например, ленту результатов поиска, ленту твитов из пользовательского списка, ленту популярных ретвитов (см. пример TweetDeck на рис. 2.52).

Зачем

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

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

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

Этот паттерн напрямую поддерживает паттерны из главы 1, такие как Prospective Memory (Проспективная память), — пользователь может оставить страницу открытой, чтобы напомнить себе о незавершенной задаче; и Safe Exploration (Безопасное исследование), поскольку если открыть еще одно рабочее окно, ничего не случится.

Как

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

• вкладки;

• отдельные окна операционной системы;

• столбцы или панели внутри окна;

• окна, разделенные на части, причем пользователь сам может настраивать размеры частей.

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

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

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

Примеры

TweetDeck (рис. 2.52) и Hootsuite (рис. 2.53) используют многопанельный или многопоточный подход к управлению каналами социальных сетей.

TweetDeck — это приложение, использующее паттерн Streams and Feeds (Потоки и каналы). В нем можно просматривать сразу несколько потоков: отфильтрованные ленты Twitter, ленты других источников и т.д. На рис. 2.52 показаны типичные колонки в TweetDeck. Такой дизайн хорошо соответствует облику ленты новостей, поскольку все обновления видны сразу в одном представлении; если бы эти ленты находились в разных вкладках или окнах, пользователь не смог бы следить за всеми обновлениями по мере их появления.

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

 

Рис. 2.52. Аккаунт Twitter в TweetDeck

Hootsuite — это платформа для управления публикациями в социальных сетях. Она полезна как для обычных пользователей, так и для компаний и издателей, которые хотят управлять всеми своими аккаунтами в социальных сетях с помощью одного ресурса. Она также помогает размещать контент и оптимизировать взаимодействие с подписчиками или читателями во всей системе социальных сетей. В примере на рис. 2.53 пользователь Hootsuite создал учетные записи в Twitter и LinkedIn. Благодаря возможности просматривать их на одном экране пользователь может отслеживать активность в обеих учетных записях (и еще многое другое). Размещать посты и отвечать на сообщения в каждом из этих аккаунтов по отдельности можно из одного многопанельного представления Hootsuite.

 

Рис. 2.53. Hootsuite

Cinema 4D (рис. 2.54) — это инструмент для создания, визуализации и анимации трехмерных объектов. В этом десктопном приложении на одном экране располагаются несколько информационных панелей и панелей инструментов. Экран включает панель с данными об исходном файле и версии рабочего файла, центральную панель, где расположен редактируемый 3D-объект, палитры, панели инструментов и панели с элементами управления для работы с 3D-объектом, а также временную шкалу, которая управляет анимацией 3D-объекта.

 

Рис. 2.54. Cinema 4D

Help Systems (Справочные системы)

Что

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

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

• содержательные заголовки и подзаголовки;

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

• ярлыки для элементов форм;

• подсказки или примеры ввода данных в элементах формы или рядом с ними.

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

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

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

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

Интернет-сообщество. Популярные или специализированные инструменты также могут поддерживаться онлайн-сообществом своих пользователей. Это достаточно продвинутый метод, цель которого — создать сообщество постоянных пользователей, которые помогают друг другу, делятся лайфхаками и создают экосистему, способствующую росту популярности платформы. Иногда эти сообщества возникают спонтанно, как группы в социальных сетях или на форумах, таких как LinkedIn, Facebook или Reddit. Многие компании создают, размещают и модерируют собственные онлайн-сообщества пользователей, чтобы поддерживать эффективную коммуникацию. Они также создают и модерируют официальные группы и страницы в социальных сетях.

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

Когда использовать

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

Зачем

Почти всем пользователям бывает необходима помощь. Тому, кто впервые сталкивается с задачей (или давно не занимался чем-то подобным), нужна поддержка иного рода, чем тому, кто решает такие задачи часто. Уровень знакомства с темой и предпочитаемые способы ее изучения различаются даже у новичков. Кто-то предпочитает посмотреть обучающее видео, а кто-то нет. Большинству помогают всплывающие подсказки, но некоторых они раздражают.

Тексты справки, доступные одновременно на нескольких уровнях, прекрасно справляются со своими задачами, даже если имеют несколько нетрадиционный вид. В удачных справочных системах тексты справки находятся под рукой, но не прямо на виду, чтобы не мешать пользователям. Однако пользователи должны знать, где искать помощь. Если они не замечают или не открывают свертываемую панель (см. одноименный паттерн Collapsible Panels (Свертываемые панели)), то никогда не узнают, что же там находится.

Как

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

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

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

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

• Содержательные заголовки, инструкции, примеры и справочный текст на самой странице, включая такие паттерны, как Input Hints (Подсказки при вводе) и Input Prompt (Приглашение к вводу) (оба рассматриваются в главе 10). При их использовании старайтесь не перегружать страницу текстом.

• Текстовые подсказки в полях форм.

• Всплывающие подсказки. Используйте их для кратких, одно- или двухстрочных описаний функций интерфейса, в которых пользователь может сразу не разобраться. Для функций, обозначенных иконками, всплывающие подсказки обязательны. Даже самые странные и необычные значки можно использовать, если подсказка поможет разобраться в их назначении! (Правда, я не рекомендую включать такие значки в дизайн.) Недостатки подсказок заключаются в том, что они заслоняют собой контент и некоторых пользователей раздражает, что они выскакивают постоянно. Небольшая задержка при наведении мыши, например 1–2 секунды, может решить эту проблему.

• Hover Tools (Инструменты, доступные при наведении) (или ховеры, глава 8). Они могут применяться для вывода более длинных описаний, отображаемых при выборе или просмотре элементов интерфейса. Предусмотрите для них место на странице, его потребуется больше, чем для небольшой всплывающей подсказки.

• Большие справочные тексты, располагающиеся внутри свертываемых панелей (см. главу 4).

• Ознакомительные материалы, такие как вводный экран знакомства, пошаговые руководства и видео. Когда пользователь запускает приложение или сервис в первый раз, он использует эти материалы, чтобы быстро разобраться в его работе (см. раздел «Instant Gratification (Мгновенное вознаграждение)» в главе 1). Пользователям также могут быть полезны ссылки на справочные ресурсы. Предусмотрите переключатель, чтобы пропускать вводную часть, когда необходимость в ней отпадет, и предложите способ вернуться к ней позже, на случай если пользователь захочет освежить информацию.

• Справка, отображаемая в отдельном окне, обычно в браузерах с поддержкой HTML, но иногда в WinHelp или Mac Help (десктопных справочных приложениях). Такая справка часто представляет собой онлайн-руководство — целую книгу, доступную из меню справки или с помощью кнопки «Справка» в диалоговых окнах и на HTML-страницах.

• Техническая поддержка — как правило, в чате, по электронной почте, на сайте, в Twitter или по телефону.

• Поддержка онлайн-сообщества. Этот вариант подходит только для самых популярных сервисов — таких как Photoshop, Linux, MacOS X или MATLAB, — но он пользуется большим авторитетом у аудитории. Создайте отдельный ресурс для сообщества или используйте ресурсы социальных сетей или традиционные форумы.

Примеры

Экранная справка: ярлыки и подсказки. Первый возможный уровень справки — это справка, которая появляется прямо во время пользования системой: ярлыки, всплывающие оповещения и подсказки. В десктопном приложении Adobe Photoshop (рис. 2.55) при наведении курсора мыши на значок инструмента (на котором нет ярлыка) меняется цвет фона значка и выводится подсказка, объясняющая, что делает этот инструмент. Это пример реализации обучения через использование.

 

Рис. 2.55. Adobe Photoshop: анимированные заголовки в виде инструментов наведения и подсказок

Элементы управления Microsoft Excel (рис. 2.56) используют постоянные ярлыки. Выбранный инструмент имеет определенный внешний вид и соответствующую метку. Но если пользователь наведет курсор на кнопку альтернативного режима просмотра, метка на время изменится и покажет, как называется выделенный (не выбранный) инструмент. В Excel также широко используются обычные подсказки при наведении курсора, как показано на рис. 2.57, особенно для значков, которые не имеют ярлыков по умолчанию.

 

Рис. 2.56. Microsoft Excel: анимированные заголовки как инструменты наведения курсора

 

Рис. 2.57. Microsoft Excel: подсказки

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

В Adobe Photoshop (рис. 2.58) содержатся встроенные пояснения, как найти справочные и учебные материалы. Из Photoshop пользователь может перейти по ссылке на справочный сайт Adobe Photoshop (рис. 2.59). Microsoft Excel (рис. 2.60) предлагает полную справочную систему в отдельном окне приложения, которое можно открыть во время работы.

 

Рис. 2.58. Справочный раздел в Adobe Photoshop

 

Рис. 2.59. Справка Adobe Photoshop (веб-сайт)

 

Рис. 2.60. Справка Microsoft Excel (в самом приложении)

Знакомство с интерфейсом: пошаговая инструкция. Как посетителю или новому сотруднику проще всего изучить, как устроено место, куда он пришел, или его новая работа? А как пользователю быстрее всего освежить в памяти подзабытый функционал? Разумеется, попросить более опытного коллегу побыть гидом. Многие платформы используют этот подход для обучения новичков. Можно создавать и развертывать пошаговые руководства, своего рода экскурсии по структуре приложения или способам выполнения конкретных задач. Такие пошаговые руководства часто проектируются в виде окон, располагающихся поверх стандартного интерфейса, или серий всплывающих окон, рассказывающих об основных компонентах страницы. Таким образом, новый интерфейс разрабатывается один раз, а затем используется множеством людей.

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

 

Рис. 2.61. Режим всплывающего окна: обучающая панель с выделенным шагом (Userlane)

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

 

Рис. 2.62. Режим наложения: пошагово всплывающие окна, указывающие на элементы пользовательского интерфейса (Pendo)

Онлайн-сообщества. Если все варианты уже перепробованы, пользователь может обратиться за советом к сообществу. Этот инструмент уже не относится к разработке ПО как такового, но это все еще дизайн продукта — поскольку UX подразумевает не только то, что установлено на компьютере пользователя. Взаимодействие с пользователем включает в себя взаимодействие с организацией, ее сотрудниками или представителями и ее веб-сайта.

Приложение для разработки пользовательских интерфейсов Sketch используется широко, и неудивительно, что компания хочет объединить сообщество вокруг популярного продукта. Сообщество пользователей Sketch (рис. 2.63) демонстрирует, как этот ресурс может служить источником новостей и информации.

Точно так же форумы Adobe (рис. 2.64) позволяют дизайнерам и пользователям обсуждать возникающие вопросы. Adobe создает форум. Пользователи создают на нем контент в форме дискуссий, вопросов, ответов и советов. Так информация быстрее распространяется среди членов сообщества.

 

Рис. 2.63. Сообщество пользователей как обучающий ресурс, размещено третьей стороной (сообществом Sketch в Spectrum)

 

Рис. 2.64. Форумы пользователей Adobe

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

Tags (Теги)

Что это

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

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

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

Когда использовать

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

Зачем

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

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

Как

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

Примеры

Stack Overflow (рис. 2.65 и 2.66) — это очень популярная доска обсуждений в виде вопросов и ответов и онлайн-платформа для разработчиков программного обеспечения. Этот сайт почти полностью состоит из пользовательского контента в виде веток обсуждений, помеченных тегами. Другими словами, это эффективная и надежная система коллективного поиска информации по тегам/темам. Читатели могут просматривать списки последних и популярных вопросов. Они также используют теги, прикрепленные к каждому сообщению. Участники добавляют к постам множество тегов. Это позволяет читателям находить обсуждения, помеченные одинаково, а также похожие темы. Благодаря возможности отслеживать и выводить связанные теги создается обширная информационная и навигационная экосистема, в которой вероятность найти необходимый контент очень высока.

 

Рис. 2.65. Сайт Stack Overflow, показывающий соответствующие теги (каждый расположен в отдельном прямоугольнике со скругленными углами под темой) для каждого вопроса

Texas Monthly (рис. 2.67) использует популярную систему управления контентом Wordpress и платформу веб-публикаций для создания онлайн-журналов. Отличительной особенностью Wordpress является возможность добавлять теги к статьям и постам во время публикации. Эти теги отображаются вместе с основной статьей и ведут к другим сообщениям в системе Wordpress, генерирующей дополнительные страницы для читателя на основе тега, который он выбрал. В примере Texas Monthly теги выводятся в нижней части статьи. Авторы выбрали ряд ключевых слов для этой и других статей. В этом примере, когда пользователь нажимает на тег, к примеру «Путешествия», ему становится доступен список других статей о путешествиях, опубликованных Texas Monthly. Это помогает увеличить среднее время, которое пользователь проводит на сайте, посещаемость сайта и вовлеченность читателей.

 

Рис. 2.66. Лента Stack Overflow, отфильтрованная по тегу

 

Рис. 2.67. Теги к статьям в Texas Monthly (при поддержке Wordpress)

Evernote — это персональное десктопное, веб- и мобильное приложение для ведения заметок и веб-архивирования. Его пользователи сохраняют статьи, файлы, презентации и веб-страницы в одном месте: на платформе Evernote. Это позволяет пользователям добавлять свои собственные теги при «привязывании» страницы к Evernote (рис. 2.68). По этим тегам можно классифицировать

 

Рис. 2.68. Evernote Screen Clipper предоставляет возможность добавлять теги

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

 

Рис. 2.69. Каталог тегов в Evernote

 

Рис. 2.70. Приложение Evernote с возможностью поиска по тегам

Заключение

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

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

Глава 3. Подскажите дорогу: навигация, указатели и ориентирование

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

Чтобы ответить на эти вопросы, мы рассмотрим следующие важные аспекты навигации:

• цель навигации в UX;

• методы поиска пути в программном продукте;

• различные типы навигации;

• как проектировать навигацию;

• полезные паттерны навигации.

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

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

Понимание информации и пространства задач

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

• информацию и инструменты, доступные с точки зрения предмета и области его применения;

• как структурированы контент и функционал;

• где он сейчас;

• куда он может пойти;

• откуда он пришел и как вернуться или как начать сначала.

Предположим, вы создали большой веб-сайт или приложение, которое понадобилось разбить на разделы, подразделы, специализированные инструменты, страницы, окна, мастеры и т.д. Как помочь пользователю найти нужный путь?

Указатели

Указатели — это средства, помогающие пользователям разобраться в ближайших окрестностях. Самые распространенные указатели — это заголовки страниц и окон, логотипы и прочие средства обозначения бренда продукта, а также вкладки и индикаторы выбора. Такие паттерны и техники, как продуманные ссылки глобальной и локальной навигации, Progress Indicator (Индикатор выполнения), Breadcrumbs (Хлебные крошки) и Annotated Scrollbar (Аннотированная полоса прокрутки), описанные в этом разделе, подскажут пользователю, где он находится и, во многих случаях, куда он может попасть, сделав еще один шаг. Они помогают не потеряться и спланировать свои действия.

Ориентирование

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

• Понятные указатели. Ясные недвусмысленные метки подсказывают, где находится то, что вы ищете, и объясняют, как туда добраться. Указатели находятся именно там, где их ожидаешь увидеть, и пользователь никогда не остается без поддержки в момент принятия решений. Проверьте, как это реализовано в интерфейсе, который вы разрабатываете: пройдите по всем основным возможным маршрутам использования. В каждой точке, где пользователь будет решать, куда пойти дальше, обязательно предусмотрите соответствующий указатель или метку. На странице, которую пользователь видит первой, добавьте привлекающий внимание «призыв к действию», который невозможно не заметить.

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

• Карты. Иногда люди переходят от указателя к указателю и от ссылки к ссылке, не понимая в действительности, куда они направляются в более масштабной системе координат. (Вам когда-нибудь приходилось искать дорогу в незнакомом аэропорту? Это примерно то же самое.) Однако есть люди, которые предпочитают представить полную картину местности, особенно если они часто там бывают. Там, где нет указателей, или на плотно застроенной территории, например в городских кварталах, карты могут стать единственным средством навигации.

В этой главе вы найдете паттерн Clear Entry Points (Понятные точки входа) — пример тщательно продуманной системы указателей в сочетании с внешними ориентирами: ссылки должны быть оформлены так, чтобы выделяться на странице. Progress Indicator (Индикатор выполнения), очевидно, представляет собой карту. Паттерн Modal Panel (Модальная панель) выступает в роли внешнего ориентира, так как, выходя из модальной панели, вы попадаете туда же, где только что находились.

Здесь я сравниваю виртуальные пространства с физическими, однако у виртуальных пространств есть один навигационный козырь, которого нет (пока) в физических пространствах: Escape Hatch (Аварийный выход). Где бы вы ни находились, просто щелкните на такой ссылке, и вы окажетесь на знакомой странице. Просто, как кабина для телепортации. Или волшебные башмачки Элли, с помощью которых она вернулась домой из Изумрудного города.

Навигация

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

Глобальная навигация

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

Элементы глобальной навигации почти всегда находятся в верхней или левой части веб-страницы, а иногда и в обеих (так называемый навигационный макет в виде перевернутой L). Иногда вы можете найти их справа, но такое размещение может вызвать неудобства с горизонтальной прокруткой и не подходить к размеру страницы.

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

Служебная навигация

Элементы служебной навигации также располагаются на главном экране и включают ссылки и инструменты, не связанные с основным содержимым сайта или приложения: вход в систему, справка, печать, редактор настроек (см. паттерн Settings Editor (Редактор настроек) в главе 2), выбор языка и т.д.

Когда посетители регистрируются на сайте, они видят набор навигационных ссылок в правом верхнем углу. Часто там присутствует значок с изображением человека или маленькая фотография участника, если она есть. Это символ участника — его аватар, намекающий, что здесь содержится ваша личная информация. Пользователи, как правило, ищут там инструменты, связанные с их активностью на сайте: настройки учетной записи, профиль пользователя, выход из системы, помощь и т.д. Дополнительные сведения см. в паттерне Sign-in Tools (Инструменты регистрации). Иногда отображаются все элементы служебной навигации. Часто они свернуты за значком аватара, и пользователь должен щелкнуть на значке, чтобы открыть их.

Ассоциативная и встроенная навигация

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

Сопутствующий контент

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

Теги

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

Социальные сети

Когда сайт интегрирован с социальными сетями, в игру вступает еще больше возможностей навигации. Она может принимать различные формы. Например, модуль новостей или сообщений с отображением активности ваших друзей и контента, которым они делятся. Или своего рода раздел «Популярное» со ссылками на истории и посты, которыми чаще всего делятся пользователи сети. Подробнее о том, как использовать социальные сети в своих проектах, читайте в книге Designing Social Interfaces: Principles, Patterns, and Practices for Improving the User Experience Кристиана Крамлиша и Эрин Мэлоун (O’Reilly, 2015).

Принципы проектирования

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

Разделяйте навигационный и визуальный дизайн

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

Умственная нагрузка

Когда вы заходите в незнакомое помещение, то первым делом осматриваетесь. За долю секунды вы успеваете оценить форму комнаты, меблировку, освещение, выходы и прочие ориентиры; очень быстро вы делаете заключение, что это за комната и насколько она соответствует цели, почему вы зашли в нее. Затем вам нужно сделать то, зачем вы пришли. Где? Как? Может быть, вы сумеете ответить на эти вопросы мгновенно, а может и нет. Вас также могут отвлечь интересные предметы в комнате.

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

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

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

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

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

Сокращение расстояний

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

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

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

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

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

Можно ли разработать дизайн приложения так, чтобы 80 % самых распространенных задач можно было выполнить на одном экране?

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

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

Навигационные модели

Какова навигационная модель вашего сайта или приложения? Другими словами, как связаны между собой экраны (или страницы, или пространства) и как пользователи перемещаются между ними?

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

Спицы колеса

Чаще всего эта модель (рис. 3.1) применяется на мобильных устройствах. Все основные разделы сайта или приложения указаны на домашней странице, «втулке колеса». Пользователь щелкает или нажимает на ссылки, совершает необходимую операцию и возвращается к «втулке», чтобы отправиться по другой «спице». Экраны-спицы жестко ограничены одной задачей, экранное пространство расходуется экономно. Места для перечисления других основных разделов может просто не быть. Хороший пример такой архитектуры — домашний экран iPhone; также можно вспомнить паттерн Menu Page (Страница меню), применяемый на некоторых веб-сайтах.

Полносвязанность

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

 

Рис. 3.1. Архитектура колесных спиц

верхнее меню. Глобальная навигация может быть одноуровневой (как показано на рис. 3.2 для пяти страниц) или глубокой и сложной, с множеством уровней и глубоким содержимым. Но если пользователь может с текущей страницы перейти на любую другую всего одним шагом, полная связанность сохраняется.

 

Рис. 3.2. Модель полной связности

Многоуровневая, или древовидная, структура

Это также популярный вариант архитектуры сайта (рис. 3.3). Главные страницы полностью связаны между собой, но подстраницы связаны только внутри своих разделов (и зачастую соединены с главными страницами других разделов при помощи инструментов глобальной навигации). Вы наверняка встречали такие сайты, где подстраницы перечислены на сайдбарах или на вложенных вкладках и становятся видны пользователю только после того, как он щелкнет на ссылке, ведущей на главную страницу или категорию. Чтобы перейти с одной произвольной подстраницы на другую, потребуется совершить два шага или более. Добавление раскрывающихся меню, внедрение паттернов Fat Menus (Полные меню) и Sitemap Footer (Карта сайта в подвале) на многоуровневом сайте превращает его в полносвязанный, что предпочтительнее.

 

Рис. 3.3. Многоуровневая структура

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

Пошаговая структура

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

 

Рис. 3.4. Пошаговый поток

Пирамида

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

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

 

Рис. 3.5. Пирамида

Такая структура схематично показана на рис. 3.6. Интерфейсы карт — самый распространенный пример такого типа навигации.

 

Рис. 3.6. Панорама с приближением

Плоская навигация

В некоторых типах приложений средства навигации почти не требуются. Вспомните приложения формата Canvas Plus Palette (Холст и палитра), такие как Photoshop, или сложные программы, подобные Excel. Множество функций и инструментов с легкостью открываются через меню, панели инструментов и палитры. Инструменты, которые не нужны прямо сейчас, можно убирать на модальные панели или делать доступными через пошаговые последовательности. Такие приложения качественно отличаются от остальных, перечисленных здесь, в том, что касается стилей навигации: пользователь всегда знает, где он находится, но ему не всегда удается быстро найти нужные инструменты, просто потому, что ему всегда доступно огромное количество различных возможностей и функций.

Есть еще несколько замечаний. Во-первых, все рассмотренные модели не обязательно использовать по отдельности.

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

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

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

Паттерны

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

Мы начнем с паттернов для моделей навигации, до некоторой степени независимых от макетов экрана.

• Clear Entry Points (Понятные точки входа).

• Menu Page (Страница меню).

• Pyramid (Пирамида).

• Modal Panel (Модальная панель).

• Deep Links (Глубокие ссылки)

• Escape Hatch (Аварийный выход).

• Fat Menus (Полные меню).

• Sitemap Footer (Карта сайта в подвале).

• Sign-in Tools (Инструменты регистрации).

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

• Progress Indicator (Индикатор выполнения).

• Breadcrumbs (Хлебные крошки).

• Annotated Scrollbar (Аннотированная полоса прокрутки).

Progress Indicator (Индикатор выполнения), Breadcrumbs (Хлебные крошки) и Annotated Scrollbar (Аннотированная полоса прокрутки) также служат интерактивными картами содержимого. Annotated Scrollbar (Аннотированная полоса прокрутки) больше подходит для моделей типа «панорама с приближением», чем для нескольких взаимосвязанных страниц. Паттерн Animated Transition (Анимированный переход) помогает пользователям не теряться при перемещении из одного места в другое. Это просто визуализация, но она очень эффективна, поскольку благодаря ей пользователь остается в курсе, где он находится и что происходит.

Теперь перейдем к самим паттернам.

Clear Entry Points (Понятные точки входа)

Что это

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

 

Рис. 3.7. Схема понятных точек входа

Когда использовать

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

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

Зачем

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

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

Как

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

Совокупность точек входа должна учитывать практически все причины, по которым человек может выбрать продукт. Точек входа может быть одна, две или несколько; это зависит от дизайна продукта. Однако описывайте их такими словами, которые без труда поймут пользователи, впервые работающие с приложением, — не используйте специфические термины.

Визуальное выделение точки входа должно соответствовать ее значимости.

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

Примеры

На веб-сайте Apple главная страница раздела, посвященного iPad (рис. 3.8), служит всего нескольким целям. Она идентифицирует продукт, представляет его пользователям с привлекательной стороны и направляет их к ресурсам, где они смогут купить это устройство или больше узнать о нем. Глобальная навигация визуально отступает на второй план, уступая главную роль понятным, четко определенным точкам входа. Остальная часть страницы — это еще одна входная дверь: крупные рекламные изображения других моделей iPad.

Spotify (рис. 3.9) привлекает внимание нового клиента с помощью главной страницы своего сайта. В центре экрана расположен простой и ясный призыв к действию.

Adobe Illustrator и другие приложения демонстрируют диалоговое окно при запуске приложения (рис. 3.10). Это ориентирует нового или нечастого пользователя на возможные действия. Основные из них — создание нового или открытие существующего документа. Можно приступить к ним двумя способами. Слева для опытных и уверенных пользователей, готовых немедленно взяться за дело, есть две заметные кнопки: Create New (Создать новый) и Open (Открыть). Хотя они небольшие, их визуализация делает их привлекательными точками входа для начала работы. Справа присутствуют те же два варианта, но они больше по размеру, более заметны и содержат больше пояснений. В разделе Start a New File Fast (Быстрое создание нового файла) представлены несколько вариантов объектов, которые можно создать, для разных размеров устройства и экрана. Схематические изображения каждого из них делают их понятнее. Ниже, в разделе Recent (Последние открытые файлы), находится сетка с миниатюрами недавно открытых файлов, чтобы можно было быстрее вернуться к ним. Это хороший пример разработки разных точек входа для разных пользователей.

 

Рис. 3.8. Страница iPad на сайте Apple

 

Рис. 3.9. Главная страница Spotify — простой и лаконичный путь

 

Рис. 3.10. Начальное диалоговое окно Adobe Illustrator

Prezi (рис. 3.11), как и Spotify, использует точку входа на веб-сайте, чтобы облегчить потенциальным клиентам переход к покупке. В случае с Prezi его инновационное ПО для презентаций нуждается в демонстрации. Дифференциация его продукта чрезвычайно важна, и, вероятно, это то, что больше всего интересует потенциальных покупателей Prezi. Точка входа говорит им: «Заходи и проверь».

Tesla (рис. 3.12) предлагает три точки входа, представленные тремя моделями Tesla на изображении. Основное внимание уделяется модели 3 (пользовательский интерфейс увеличивает ее масштаб — умный ход). При выборе модели 3 появятся две точки входа: собрать свою Tesla или посмотреть доступные автомобили.

 

Рис. 3.11. Главная страница Prezi

 

Рис. 3.12. Главная страница Tesla

Menu Page (Страница меню)

Что это

Заполните страницу списком ссылок на страницы с большим количеством контента. Для каждой ссылки выведите достаточно сведений, чтобы пользователь мог сделать уверенный выбор. Другого значимого содержимого на странице быть не должно. Домашняя страница Craigslist (рис. 3.13) — отличный пример.

 

Рис. 3.13. Craigslist

Когда использовать

Если вы разрабатываете домашнюю страницу, экран приветствия или любой другой экран, назначение которого — служить «оглавлением», показать пользователю возможные направления. Связанного контента (такого как статья, видео или реклама) может и не быть. Или просто позвольте пользователю выбрать свой путь, не отвлекая его.

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

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

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

• посетителям известно, о чем этот сайт или приложение;

• они знают, зачем пришли и как это найти;

• они ищут определенный предмет, и им нужно добраться до него как можно быстрее;

• их не интересуют новости, обновления и статьи;

• их не напугает нагруженный интерфейс главной страницы.

Зачем

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

Как

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

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

Информация ниже касается полноэкранных версий сайтов и приложений.

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

Посмотрите на страницу каталога сайта мэрии Сан-Франциско на рис. 3.14 и Калифорнийского университета в Беркли на рис. 3.15. Посетители страницы «Департаменты» сайта SF.gov видят только алфавитный список. Посетители сайта Калифорнийского университета в Беркли уже знают значения этих ссылок — это названия академических программ, поэтому дополнительная информация касается самого обучения, а не информации об университете. Таким образом, дизайнер может добавить больше ссылок в верхнюю часть экрана. В результате получается информативная и полезная страница.

С другой стороны, статьи на странице ресурсов AIGA (рис. 3.16) только выигрывают от описательного текста и изображений. Одного заголовка не всегда достаточно, чтобы посетитель захотел щелкнуть на нем и прочитать статью. (Помните, что если пользователь щелкает на ссылке, но открывшаяся страница не соответствует его ожиданиям, то он быстро разочаровывается. Убедитесь, что используете точные и правдивые описания!)

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

В-третьих, не забудьте поле поиска.

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

Примеры

Веб-сайт города и округа Сан-Франциско, SF.gov (на момент написания этой книги находится в разработке), использует порталы (см. рис. 3.14). Он объединяет ссылки на службы и департаменты, поскольку чаще всего люди ищут здесь конкретный отдел или службу в этой крупной правительственной организации.

 

Рис. 3.14. Сайт SF.gov

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

 

Рис. 3.15. Страница меню Калифорнийского университета, список факультетов и колледжей Беркли

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

 

Рис. 3.16. Страница меню с сайта AIGA

Эта страница привлекает пользователя сама по себе, она не содержит никакой конкретной информации.

Наконец, Музей современного искусства использует крупные изображения и мелкий текст в своей версии страницы меню (рис. 3.17).

 

Рис. 3.17. Музей современного искусства, Нью-Йорк. Страница меню выставки PS1

Pyramid (Пирамида)

Что это

Последовательность страниц, связанная ссылками «Назад/Далее». Создайте главную страницу, которая содержит ссылки на все страницы в последовательности, и организуйте возможность просматривать их по порядку или произвольно. На рис. 3.18 представлена схема этого паттерна.

 

Рис. 3.18. Схематическое представление паттерна Pyramid (Пирамида)

Когда использовать

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

Зачем

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

Ссылки или кнопки «Назад/Далее» (или «Предыдущая/Следующая») прекрасно подходят для этого. Они понятны пользователям. Однако избегайте ситуации, когда пользователь окажется заблокированным в последовательности страниц, из которой невозможно с легкостью выбраться: если человек просмотрел уже семь страниц, то для того, чтобы вернуться к началу, ему придется семь раз щелкнуть на кнопке «Назад»? Это верный способ угробить интерес к приложению!

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

Связывание отдельных страниц удобно также, когда пользователю действительно нужно просмотреть все страницы. Без ссылок «Назад/Далее» ему придется постоянно переходить на главную и оттуда на следующую; проще сдаться и забыть об этом приложении.

Как

Расположите по порядку все элементы или страницы второго уровня на главной странице. Используйте такое представление списка, которое соответствует типу элементов (см. главу 7): например, Thumbnail Grid (Сетка миниатюр) для фотографий или насыщенный текстовый список для статей. Щелчок на элементе или ссылке должен вести пользователя на страницу этого элемента.

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

Один из вариантов паттерна Pyramid (Пирамида) превращает статичную линейную последовательность в цикл, связывая последнюю страницу с первой без необходимости возвращаться на главную страницу. Это обычно работает, но знает ли пользователь, что он оказывается в бесконечном цикле? Распознает ли он первую страницу последовательности? Вовсе не обязательно. Если порядок следования важен, свяжите последнюю страницу с главной — это даст понять пользователю, что он просмотрел все страницы.

Примеры

Страница альбома фотографий в Facebook — классический пример пирамиды. Альбом можно просмотреть целиком, прокрутив страницу (см. рис. 3.19). Фотографии представлены миниатюрами. При выборе фотографии открывается слайд-шоу, организованное в виде пирамиды (рис. 3.20). Прокрутка вправо, прокрутка влево или повторный выход в сетку — варианты навигации.

 

Рис. 3.19. Фотоальбом Facebook

 

Рис. 3.20. Дочерняя страница из фотоальбома в Facebook с кнопками «Назад», «Далее» и «Закрыть» рядом с фотографией

Modal Panel (Модальная панель)

Что это

Экран, который не содержит навигационных элементов, кроме подтверждения сообщения, заполнения формы или щелчка, чтобы убрать панель. Модальные панели появляются поверх основного экрана. Они, как правило, вызываются действием пользователя. Это может быть выбор чего-то или совершение определенного действия. Модальные панели часто появляются в виде лайтбокса поверх главного экрана или страницы: контент под ним виден, но затемнен и недоступен. Модальные панели используются для простых задач, которые требуют полного внимания пользователя. Эти панели обычно состоят из одной страницы, и элементы навигации не появляются, пока пользователь не завершит задачу. На рис. 3.21 показана схема паттерна Modal Panel (Модальная панель).

Когда использовать

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

 

Рис. 3.21. Схематическое представление паттерна Modal Panel (Модальная панель)

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

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

Зачем

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

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

Как

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

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

Эффект лайтбокса — это очень эффективное визуальное представление модальной панели. Затемняя большую часть экрана, дизайнер подсвечивает модальную панель, фокусируя на ней внимание пользователя. (Чтобы это сработало, модальная панель должна быть достаточной большой, иначе пользователю будет сложно ее найти.)

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

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

Примеры

Airbnb использует лайтбокс, чтобы привлечь внимание пользователя (рис. 3.22). Он появляется непосредственно над главной страницей веб-сайта. Взаимодействовать с ним можно только тремя способами: войти в систему, зарегистрироваться или нажать знакомую кнопку «X» в левом верхнем углу. Это типичный элемент многих модальных панелей с лайтбоксом. Если Airbnb не распознает компьютер пользователя (обычно после очистки cookie-файлов), модальная панель возвращается на место, чтобы отобразить экран двухфакторной аутентификации.

 

Рис. 3.22. Модальная панель входа в систему Airbnb и модальная панель проверки безопасности

Как мы уже говорили, онлайн-магазины часто откладывают вход или регистрацию, чтобы не прерывать процесс покупки. Однако после того, как пользователь заходит в корзину, имеет смысл попросить его войти в систему. Зарегистрированные покупатели активируют свои данные для доставки и оплаты, а продавец приглашает новых клиентов на регистрацию. Сайт продавца фото- и видеотехники B&H — хороший пример такой модели (рис. 3.23).

 

Рис. 3.23. Панель регистрации на сайте B&H

Macy’s использует модальное окно в процессе покупки (рис. 3.24). В этом случае он подтверждает, что выбранный покупателем товар был добавлен в корзину. Macy’s использует этот способ, чтобы предложить дополнительные товары, которые могут заинтересовать покупателя.

Priceline использует модальные панели, чтобы реагировать на отсутствие активности путешественника (рис. 3.25). Если клиент искал рейс или отель, но не предпринял никаких действий со страницы результатов поиска, возможно, он переключился на другую задачу или ушел. Priceline стремится к взаимодействию с клиентом, поэтому вскоре появляется модальное окно, предлагающее показать еще более свежие результаты.

Форма с тенью модального диалогового окна macOS привлекает к себе внимание, когда оно всплывает из строки заголовка (анимированное, конечно). Эти и другие модальные диалоговые окна фактически мешают пользователю взаимодействовать с остальным интерфейсом; таким образом, пользователь вынужден завершить или отменить предлагаемое действие, прежде чем начать другое (рис. 3.26).

 

Рис. 3.24. Подтверждение покупки на сайте Macy’s

 

Рис. 3.25. Модальное окно Priceline

 

Рис. 3.26. Модальная панель в приложении Mac

Deep Links (Глубокие ссылки)

Что это

Фиксированное состояние веб-сайта или приложения в URL-адресе, который можно сохранить или отправить другу. При загрузке этого адреса восстанавливается в точности то состояние, которое видел пользователь. Другими словами, глубокая ссылка — это способ связи как с местоположением в системе, так и с состоянием, таким как вход в систему, или возобновление незавершенного процесса в точке остановки, или сохранение информации, чтобы не загружать ее заново. Закладки, постоянные ссылки и глубокие ссылки — все это способы удобно перемещаться в выбранную точку или положение, даже если оно спрятано глубоко внутри навигационной структуры. Они позволяют избежать перехода по множеству ссылок, чтобы попасть на нужную страницу. Глубокие ссылки в мобильной ОС — это особый метод, позволяющий пользователям переходить от приложения к приложению на мобильном устройстве без потери информации или контекста задачи. На рис. 3.27 схематически показано, как работает этот паттерн.

 

Рис. 3.27. Схематическое представление паттерна Deep Links (Глубокие ссылки)

Когда использовать

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

Зачем

Паттерн Deep Links (Глубокие ссылки) позволяет попасть прямо в желаемую точку и в нужное состояние приложения, сэкономив время и усилия. Он представляет собой прямую ссылку на определенный контент или постоянную ссылку на запись в блоге, в том смысле, что URL-адрес всегда будет указывать на этот контент. Однако она более сложна, чем обычная постоянная ссылка, так как содержит данные и о состоянии приложения, и о месторасположении контента.

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

Как

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

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

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

По мере того как пользователь перемещается по содержимому и меняет различные параметры, выводите обновленный URL-адрес в адресной строке браузера, чтобы его было легко увидеть и скопировать. Однако не все пользователи будут искать его там, поэтому предусмотрите инструмент «Ссылка», говорящий пользователю: «Щелкни здесь, чтобы получить ссылку на эту страницу». Некоторые сайты генерируют фрагменты кода JavaScript, не только описывающие позицию и состояние, но и позволяющие пользователям встраивать элементы в другие веб-сайты.

Отдельно следует рассмотреть мобильные глубокие ссылки. Приложения iOS и Android могут быть сконфигурированы таким образом, чтобы общедоступные URL-адреса вели в соответствующие расположения родной мобильной ОС (а не на общедоступный URL-адрес в браузере). Это позволяет запускать по любым общим ссылкам связанное с ними мобильное приложение вместе с его более надежными (как правило) элементами управления и высокой производительностью. Мобильные нативные приложения также могут передавать глубокие ссылки из одного приложения в другое. Например, приложение IMDB может содержать ссылку на трейлер фильма на веб-сайте. Вместо того чтобы открывать мобильный веб-браузер, ссылка ведет, например, в приложение YouTube на устройстве пользователя, которое лучше контролирует воспроизведение и взаимодействие.

Примеры

Одна из самых приятных особенностей обмена видео с YouTube — возможность встроить начальную точку для клипа в саму ссылку «поделиться» (рис. 3.28). Ссылка на ролик в YouTube включает указание начальной точки в нем. Воспроизведение у получателя начнется с нее, а не с самого начала.

 

Рис. 3.28. Обмен видео с YouTube

Google Books фиксирует множество состояний в своих URL-адресах (рис. 3.29): место, где остановился читатель, режим просмотра (одностраничный, двухстраничный, миниатюры), наличие панелей инструментов и даже результаты поиска. Масштаб сюда не входит, поскольку пользователь настраивает его индивидуально. URL-адрес, как видно, длинный и дублирует браузерный.

 

Рис. 3.29. Две глубокие ссылки в Google Books: в адресной строке браузера и в инструменте «Ссылка»

В Apple iOS операционная система сама проверяет общедоступные URL-адреса на соответствие конфигурации глубоких ссылок всех установленных приложений. Это позволяет переходить из мобильного браузера, чтобы просматривать выбранную страницу, ленту, видео или слушать песню в приложении (рис. 3.30), а не в нем, поскольку функциональность браузера для прямой ссылки ограничена. Переход в приложение позволяет пользователю наслаждаться дополнительным функционалом и комфортным просмотром.

 

Рис. 3.30. iOS. Глубокая ссылка из браузера на приложение

Сайт объявлений о вакансиях Indeed.com содержит надежные инструменты поиска и фильтрации для тех, кто ищет работу. Эти параметры записываются в URL-адрес, позволяя совместно использовать поиск или сохранять его для последующего запуска с обновлениями (рис. 3.31).

 

Рис. 3.31. Сервис поиска работы Indeed; параметры записываются в URL-адрес, чтобы результат поиска можно было использовать совместно или сохранить

Escape Hatch (Аварийный выход)

Что это

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

Когда использовать

Если вы работаете над страницами, составляющими последовательность, например, мастера, или любыми страницами, ограничивающими пользователя определенным набором ситуаций, например, как при использовании паттерна Modal Panel (Модальная панель). Также выходы можно использовать на страницах, куда пользователи могут попадать не из контекста, а, например, через результаты поиска.

 

Рис. 3.32. Схематическое представление паттерна Escape Hatch (Аварийный выход)

Существуют также «экраны смерти». Например, страницы ошибок HTTP-сервера, такие как Error 404 Not Found (таких страниц множество), — отличное место, чтобы разместить там аварийный выход.

Зачем

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

Такая возможность помогает людям чувствовать себя в безопасности при исследовании приложения или сайта. Она похожа на функцию Undo (Отмена) — побуждает пользователей пробовать разные варианты, не боясь последствий. См. паттерн Safe Exploration (Безопасное исследование) в главе 1.

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

Как

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

Примеры

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

В некоторых диалоговых окнах ту же роль играет кнопка Cancel (Отмена). Она позволяет пользователю сказать: «Я закончил, забудьте, что я вообще сюда приходил».

Вам когда-нибудь доводилось звонить в компанию, например в банк, и пробиваться через бесконечные добавочные меню? Эти меню длинные, сбивают с толку и отнимают много времени. Если вы вдруг понимаете, что неправильно набрали очередной номер (или нажали не ту клавишу), то вы можете просто повесить трубку и попытаться повторить все с самого начала. Однако во многих таких системах есть скрытый аварийный выход, о котором часто умалчивают: если в любой момент нажать 0, то вас соединят с оператором.

На многих сайтах есть страницы с ограниченными возможностями навигации, такие как модальные панели. Один из примеров — экран настроек LinkedIn. Этот раздел отделен от основного веб-приложения. Глобальной навигации нет. Если пользователь окажется здесь, есть два способа вернуться назад, через два аварийных выхода. Первый — это логотип LinkedIn, ведущий на главную страницу. Второй — ссылка «Вернуться на LinkedIn.com», привязанная к фото профиля участника (рис. 3.33).

С помощью аварийного выхода можно покинуть тупиковую страницу браузера. На страницах 404 Not found сайта Curbed.com есть аварийный выход. В тексте содержится ссылка для перехода на главную страницу (рис. 3.34). Curbed также размещает системные оповещения о статусе, так что если веб-сайт Curbed не активен, пользователь будет знать об этом.

 

Рис. 3.33. Страница настроек LinkedIn со ссылкой и фото профиля в правом верхнем углу в качестве аварийного выхода, ведущего на LinkedIn

 

Рис. 3.34. Curbed.com, страница ошибки с аварийным выходом на домашнюю страницу

Fat Menus (Полные меню)

Что это

Полный список вариантов навигации в выпадающих или раскрывающихся меню. Также их называют «мегаменю». Используйте это представление, чтобы перечислить все подстраницы разделов сайта. Тщательно продумайте их организацию, используйте список правильно подобранных категорий или естественную сортировку и разверните меню по горизонтали. Полное меню "All Microsoft" на сайте Microsoft.com — хороший пример этого паттерна (рис. 3.35).

 

Рис. 3.35. Меню на сайте Microsoft

Когда использовать

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

Зачем

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

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

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

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

Как

В каждом меню представьте хорошо организованный список ссылок. Если удобно, распределите ссылки по именованным разделам (паттерн Titled Sections (Именованные разделы) из главы 4), если нет — используйте другой подходящий порядок сортировки, например по алфавиту или по времени.

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

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

Некоторые реализации меню не поддерживаются технологиями доступности, такими как экранные дикторы. Убедитесь, что ваше полное меню работает с ними. Если нет, попробуйте более статичную стратегию, например паттерн Sitemap Footer (Карта сайта в подвале).

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

Примеры

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

 

Рис. 3.36. Двухуровневое полное меню Macy’s с прогрессивным раскрытием

На сайте Starbucks мы видим очень хороший пример полного меню (рис. 3.37). Все разделы меню одинаковой ширины, но разной высоты. Они соответствуют общей схеме страницы (единообразны). Стиль меню соответствует стилю сайта, а обилие пустого пространства упрощает чтение. В дизайн меню включены рекламные элементы, но они не навязчивы.

 

Рис. 3.37. Раздел меню «Кофе» в Starbucks

Как видно на рис. 3.38, в полных меню Mashable использован гибридный подход. Текстовые меню смещены влево и не выделяются. На сайте по максимуму используются преимущества горизонтального развертывания для показа избранных статей. Это хороший вариант, поскольку осведомленный пользователь может быстро пробежаться по заголовкам, прокручивая меню.

 

Рис. 3.38. Меню Mashable’s Science

Американский Красный Крест широко использует полные меню (рис. 3.39). Когда пользователь щелкает на любом пункте меню верхнего уровня, выпадающие полные меню закрывают верхнюю часть экрана. Хорошая организация и представление тем и ссылок делают сложную структуру сайта простой и понятной. Разделы в каждом полном меню организованы по наиболее часто задаваемым вопросам или жизненным ситуациям.

 

Рис. 3.39. Меню сайта Американского Красного Креста

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

 

Рис. 3.40. Алфавитная организация меню WebMD Health

Sitemap Footer (Карта сайта в подвале)

Что это

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

 

Рис. 3.41. Подвал сайта Whole Foods

Когда использовать

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

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

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

Зачем

Карта сайта в подвале делает сайт нагляднее. Посетитель одновременно видит больше вариантов навигации, чем при обычном просмотре сайта.

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

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

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

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

Как

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

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

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

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

Что чаще всего можно найти на карте сайта в подвале:

• основные категории контента;

• информацию о сайте или компании;

• корпоративные сведения, контакты или вакансии;

• ссылки на партнерские или дочерние сайты, например посвященные другим брендам компании;

• ссылки на социальные инструменты, такие как форумы;

• инструменты справки и поддержки;

• контактную информацию;

• актуальные промоакции;

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

Примеры

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

Шапка и подвал страницы Los Angeles Times демонстрируют аналогичный подход, но в контексте крупного издания. Меню шапки организовано по основным темам новостей. Оно соответствует традиционной структуре газет. Подвал отличается: основные его элементы — корпоративная информация и ссылки, информация для вторичной аудитории, такой как рекламодатели и соискатели на вакансии (рис. 3.43).

Сайт The Wall Street Journal устроен похожим образом (рис. 3.44). В шапке представлена четкая структура новостных тем. Подвал посвящен в основном бизнесу: подписке, обслуживанию клиентов и другим видам деятельности в Dow Jones & Company. В разделе «Инструменты» содержится дополнительная информация для потребителей.

New York Times не следует этой схеме. Подвал в нем представляет собой расширенное представление информационной иерархии нового контента. Это каталог, который дублирует навигацию в шапке (рис. 3.45). Присутствуют также корпоративные организационные ссылки, но они находятся в самом низу и визуально отделены.

 

 

Рис. 3.42. Шапка и подвал страницы веб-сайта REI

 

Рис. 3.43. Шапка и подвал страницы Los Angeles Times

 

Рис. 3.44. Подвал страницы Wall Street Journal

 

Рис. 3.45. Подвал страницы New York Times

 

Рис. 3.46. Подвал страницы Salesforce

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

Sign-In Tools (Инструменты регистрации)

Что это

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

Когда использовать

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

Зачем

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

Как

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

• кнопку или ссылку для выхода из системы (это очень важный элемент, никогда не забывайте о нем);

• ссылку на параметры учетной записи;

• ссылку на настройки профиля;

• кнопку или ссылку на раздел помощи;

• ссылку на раздел поддержки пользователей;

• корзину покупок;

• личные сообщения или другие уведомления;

• ссылку на персональные коллекции элементов (наборы изображений, избранное, списки желаний и т.п.);

• ссылку на домашнюю страницу.

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

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

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

Примеры

Ниже приведены некоторые примеры инструментов входа в Airbnb (рис. 3.47), Google (рис. 3.48) и Twitter (рис. 3.49). Они визуально незаметны, но их просто найти, поскольку они находятся в привычном месте — углу страницы или окна.

 

Рис. 3.47. Инструменты входа в систему Airbnb

Airbnb предоставляет набор ссылок для зарегистрированных пользователей и для входа в систему: стать хозяином, предстоящие поездки, сохраненные поисковые запросы в дополнение к раскрывающемуся меню входа в систему для участника. Google и Twitter полностью скрывают инструменты входа в систему в раскрывающемся меню. Доступом по умолчанию к ним служит только миниа­тюра фото профиля пользователя.

 

Рис. 3.48. Инструменты входа в систему Google

 

Рис. 3.49. Инструменты входа в Twitter

Progress Indicator (Индикатор выполнения)

Что это

Карта страниц, расположенная на каждой странице из последовательности, для понимания выполнения, с указателем «Вы находитесь здесь». Сайт ретейлера Menlo Club (рис. 3.50) использует такой индикатор для процесса оформления заказа.

 

Рис. 3.50. Индикатор выполнения оформления Menlo Club

Когда использовать

Если вы разрабатываете описание, схему процесса, мастер или что-то, что требует пошаговых действий пользователя. Путь пользователя по большей части линейный.

Если топология навигации объемна и иерархична (в противоположность линейной), рассмотрите паттерн Breadcrumbs (Хлебные крошки). Если шагов или элементов очень много, а их порядок не важен, то можно применить паттерн Two-Panel Selector (Двухпанельный селектор, глава 7).

Зачем

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

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

Как

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

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

Как маркировать страницы на карте? Если страницы или шаги последовательности пронумерованы, используйте числа — они занимают мало места и их легко понять. Лучше, если вы также добавите заголовки страниц (короткие, чтобы карта не стала громоздкой). Это поможет пользователям понять, к каким страницам возвращаться, и представить, что их ждет впереди.

Примеры

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

 

Рис. 3.51. Слайд-шоу National Geographic Kids с индикатором выполнения в виде номера страницы (в центре внизу)

Слайд-шоу Vanity Fair также использует статический индикатор выполнения в виде нумерации страниц (рис. 3.52). Сам индикатор не служит для навигации.

Конфигуратор продукта Mini Cooper (рис. 3.53) содержит полнофункциональный индикатор выполнения, который позволяет пользователю перемещаться вперед и назад по желанию, но упорядочивает страницы в определенной последовательности. Индикатор выполнения вверху — это основной элемент управления для «игр» с приложением, перемещения по страницам и изучения возможностей.

Процесс оформления заказа в онлайн-магазине обычно состоит из нескольких определенных шагов. На сайте B&H Photo (рис. 3.54) для этого процесса пре­дусмотрен стандартный индикатор хода в верхней части страницы. Следующие шаги остаются неактивны, пока пользователь не завершит предыдущие.

 

Рис. 3.52. Слайд-шоу Vanity Fair с индикатором выполнения в виде номера страницы

 

Рис. 3.53. Конфигуратор продукта Mini Cooper с картой последовательности вверху страницы

 

Рис. 3.54. Оформление заказа на сайте B&H с индикатором выполнения

Breadcrumbs (Хлебные крошки)

Что это

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

 

Рис. 3.55. Паттерн Breadcrumbs (Хлебные крошки) на сайте Target

Когда использовать

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

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

Зачем

Паттерн Breadcrumbs подразумевает представление всех уровней иерархии от самого верхнего до текущей страницы. В определенном смысле это один линейный «срез» общей карты сайта или приложения.

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

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

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

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

Как

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

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

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

Примеры

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

 

Рис. 3.56. Раздел клиентской поддержки на сайте Samsung; два варианта представления хлебных крошек

B&H Photo использует крупное, заметное представление для хлебных крошек, чтобы клиент видел, где он находится в этом огромном онлайн-каталоге продуктов (рис. 3.57).

 

Рис. 3.57. Хлебные крошки на сайте B&H

На рис. 3.58 показан пример применения паттерна Breadcrumbs вне «страничного» контекста. Инструменты разработчика браузера Chrome, так же как и многие другие подобные инструменты, предоставляют пользователям возможность управлять очень глубокими иерархическими структурами (в данном случае — объектной моделью документа и вложенными структурными тегами на странице HTML). Хлебные крошки здесь просто незаменимы, иначе в подобной структуре очень просто потеряться.

 

Рис. 3.58. Инструменты разработчика Chrome

Annotated Scroll Bar (Аннотированная полоса прокрутки)

Что это

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

Когда использовать

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

 

Рис. 3.59. Полоса прокрутки с номерами страниц в Google Docs

Зачем

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

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

Когда индикаторы полосы прокрутки отображаются прямо на ней, то получается что-то вроде одномерной реализации паттерна Overview Plus Detail (Обзор и детали) (см. главу 9). Полоса прокрутки — это обзор, а прокручиваемое содержимое страницы — это детали.

Как

Поместите индикатор позиции прямо на полосу прокрутки или рядом с ней. Подойдут как статические, так и динамические индикаторы, меняющиеся по мере того, как пользователь просматривает страницу (рис. 3.59). Статические индикаторы не меняют свой вид каждую секунду и могут выглядеть, например, как блоки определенного цвета на полосе прокрутки (см. снимок экрана программы DiffMerge на рис. 3.60). Однако убедитесь, что их назначение понятно: они могут сбить с толку пользователей, не привыкших видеть графику на полосе прокрутки.

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

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

Примеры

Приложение DiffMerge, показанное на рис. 3.60, визуально подчеркивает различия между двумя версиями текстового файла: различающиеся разделы отмечены

 

Рис. 3.60. DiffMerge

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

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

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

 

Рис. 3.61. Результаты поиска слова в Chrome

Animated Transition (Анимированный переход)

Что это

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

Когда использовать

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

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

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

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

Зачем

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

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

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

 

 

Рис. 3.62. Увеличение значка и переход окна приложения в macOS

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

Грамотно спроектированный анимированный переход даст приложению преимущество с точки зрения качества, скорости и динамичности.

Как

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

Однако этот паттерн — палка о двух концах. Не укачайте пользователя! Анимация должна быть быстрой и точной, а между действием пользователя и началом анимации не должно быть задержки либо она должна быть минимальной. Ограничьте анимацию элементами экрана, для которых она действительно важна; не нужно анимировать экран целиком. Делайте ее короткой. Согласно исследованиям, 300 миллисекунд — оптимальная длительность анимации для гладкой прокрутки. Проведите пользовательское тестирование, чтобы выбрать самый удачный вариант.

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

Вот несколько возможных переходов:

• подсветка и затемнение;

• расширение и сжатие;

• постепенное появление или исчезновение; плавный переход;

• скольжение;

• пульсирующий круг.

Примеры

При открытии сайта Tesla (рис. 3.63) используется простой инструмент зум. На экране появляются три модели Tesla, затем масштаб изображения увеличивается, фокусируя внимание пользователя на модели 3. Пользователь не управляет масштабированием. Однако он может перемещаться влево и вправо, чтобы выбрать другую модель Tesla. Этот панорамный эффект плавно анимирован.

 

 

Рис. 3.63. Анимация масштабирования на начальной странице Tesla.com

Сервис Prezi широко использует масштабирование и панорамирование для создания уникальных и плавных презентаций. На рис. 3.64 показан выбор экранов из демонстрации. По мере того как пользователь просматривает экраны, презентация приближается, появляется текст, далее панорама перемещается вправо и масштаб изображения уменьшается при выходе из раздела. Так создается интересное ощущение полета в информационном пространстве.

 

Рис. 3.64. Сервис Prezi для создания презентаций включает анимированное масштабирование и демонстрацию слайдов

Что еще почитать

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

• Creating Web Animations: Bringing Your UIs to Life, Кирупа Чиннатамби (O'Reilly, 2017).

• Transitions and Animations in CSS: Adding Motion with CSS, Эстель Вейл (O'Reilly, 2016)

• SVG Animations: From Common UX Implementations to Complex Responsive Animation, Сара Дрезнер (O'Reilly, 2017)

Заключение

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

 

 

Глава 4. Организация элементов на странице

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

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

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

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

Основные принципы построения макета

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

Визуальная иерархия

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

Хорошая визуальная иерархия моментально сообщает пользователю:

• о важности элементов страницы;

• о взаимоотношениях между элементами;

• о том, что ему делать дальше.

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

 

Рис. 4.1. А) Пример отсутствия визуальной иерархии и Б) пример визуальной иерархии

Как сделать так, чтобы элемент выглядел важным?

Размер. Размер заголовков и подзаголовков дает читателю представление о порядке и важности. Заголовки могут выглядеть крупнее и ярче благодаря контрастному размеру, толщине или цвету. Маленькие полоски текста внизу экрана тихо шепчут: «Я всего лишь подвал!» и так и просят не обращать на них внимания (рис. 4.2).

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

 

Рис. 4.2. Пример эффекта, создаваемого размером шрифта

 

Рис. 4.3. Определение важности по положению, размеру или цвету

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

 

Рис. 4.4. Пример большей и меньшей плотности расположения элементов

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

 

Рис. 4.5. Пример с отсутствием фона и выделяющимся фоном

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

 

Рис. 4.6. Списки и сетки для создания визуального ритма

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

Другой способ подчеркнуть мелкие детали — использовать пустое пространство и контраст, чтобы разделять их, как показано на рис. 4.7.

 

Рис. 4.7. Приемы привлечения внимания к мелким элементам

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

 

Рис. 4.8. Макет без сетки (слева) и макет, выполненный по принципу сетки (справа)

 

Рис. 4.9. Сетки, наложенные на примеры на рис. 4.8

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

Сетки состоят из отступов от края макета и расстояний между колонками (рис. 4.10 и 4.11).

 

Рис. 4.10. Вертикальная сетка с отступами от края макета (желтый) и межколоночными отступами (синий)

 

Рис. 4.11. Горизонтальная сетка с отступами от края макета (желтый) и межколоночными отступами (синий)

Сетки позволяют визуально упорядочить композицию и снижают когнитивную нагрузку пользователя.

Четыре важных принципа гештальта

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

Близость. Когда вы располагаете вещи рядом одна с другой, зрители ассоциируют их друг с другом. На этом основывается группировка контента и элементов управления в пользовательском интерфейсе. Сгруппированные предметы связаны, разрозненные — нет.

 

Рис. 4.12. Гештальт-принцип близости

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

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

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

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

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

 

Рис. 4.13. Группировка связанных однородных элементов (слева) и выделение двух элементов среди однородных (справа)

 

Рис. 4.14. Два примера визуальной непрерывности

 

Рис. 4.15. Пример непрерывности

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

Визуальный поток

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

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

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

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

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

 

Рис. 4.16. Визуальная иерархия на старой версии домашней страницы Uber

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

 

Рис. 4.17. Воображаемые линии для визуального потока

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

 

Рис. 4.18. Призывы к действию

На рис. 4.19 показан плохой пример визуального потока и визуальной иерархии. Сколько на этой странице точек фокусировки и как они конкурируют друг с другом? Куда вы посмотрите в первую очередь и почему? На что обращать внимание на этой странице?

 

Рис. 4.19. Беспорядочная визуальная иерархия Weather Underground

Использование динамического отображения

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

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

Полосы прокрутки. Полосы прокрутки позволяют пользователю произвольно перемещаться в одном или двух направлениях (но не используйте горизонтальную прокрутку для текстов!). Полосы прокрутки часто служат своеобразными «иллюминаторами», открывающими вид на крупный элемент, например объемный текст, изображение или таблицу. Если хотите, разделите контент на несколько блоков: паттерны Module Tabs (Автономные вкладки), Collapsible Panels (Свертываемые панели), Accordion (Аккордеон) и Movable Panels (Перемещаемые панели) наделяют пользователя некоторыми правами управления организацией страницы, в отличие от более статичного Titled Sections (Именованные разделы).

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

Отзывчивое включение

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

 

Рис. 4.20. Системные настройки MacOS

Прогрессивное раскрытие

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

 

Рис. 4.21. Пример прогрессивного раскрытия информации в Moo.com

Области пользовательского интерфейса

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

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

• Меню и навигация. Обычно располагается в верхней или левой части экрана либо организована в виде панелей (см. ниже).

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

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

• Панели. Панели могут располагаться сверху, сбоку или снизу. Они могут быть постоянными или сворачиваемыми в зависимости от своего назначения.

 

Рис. 4.22. Области пользовательского интерфейса в веб- и десктопных приложениях

Паттерны

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

Виды макетов

Следующие паттерны чаще всего используются для десктопных и веб-приложений. Если вам в первую очередь важно показать результаты поиска, Grid of Equals (Выравнивание по сетке) — хороший выбор. Однако если ваше приложение предназначено для выполнения задач или создания объектов, Center Stage (Центральная сцена) подойдет больше. Что бы вы ни выбрали, убедитесь, что этот выбор соответствует контенту, который необходим пользователю для достижения цели.

• Visual Framework (Визуальная структура).

• Center Stage (Центральная сцена).

• Grid of Equals (Выравнивание по сетке).

 

Рис. 4.23. Визуальная структура (вверху слева), Центральная сцена с панелью (вверху справа), Выравнивание по сетке (внизу слева)

Деление информации на фрагменты

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

• Titled Sections (Именованные разделы).

• Module Tabs (Автономные вкладки).

• Accordion (Аккордеон).

• Collapsible Panels (Сворачиваемые панели).

• Movable Panels (Перемещаемые панели).

Visual Framework (Визуальная структура)

Что это

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

Когда использовать

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

Зачем

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

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

Как

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

• Цвет — фоновые цвета, цвета текста и цветовые акценты.

• Шрифты — для заголовков, подзаголовков, основного текста, сносок и второстепенного текста.

• Стиль написания и грамматика — заголовки, имена, содержимое, краткие описания и длинные блоки текста и все остальные случаи использования языка.

На всех прочих страницах визуальная схема, подобно примеру JetBlue ниже, также по возможности должна включать общие элементы:

• указатели «Вы находитесь здесь»: заголовки, логотипы, навигация в виде хлебных крошек, глобальная навигация с указателями текущей страницы и автономные вкладки;

• средства навигации, включая глобальную и служебную навигацию, кнопки «OK/Отмена», кнопки возврата и выхода, а также навигационные паттерны, такие как Progress Indicator (Индикатор выполнения) и Breadcrumbs (Хлебные крошки) (они описаны в главе 3);

• техники, применяемые для определения именованных разделов (паттерн Titled Sections (Именованные разделы));

• пробелы и выравнивание элементов: поля страниц, междустрочный интервал, расстояние между ярлыками и связанными с ними элементами управления, а также выравнивание текста и ярлыков;

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

Реализация визуальной схемы поможет отделить стилистические аспекты пользовательского интерфейса от контента. Это очень полезно. Если определить схему только в одном месте, например в таблице стилей CSS, классе Java или библиотеке стилей, то ее можно будет менять независимо от контента, то есть при необходимости вам будет проще поправить что-то в дизайне (этот принцип применим и в разработке ПО).

 

Рис. 4.24. Пример визуальной схемы мобильной версии сайта компании JetBlue

Примеры

Визуальная схема веб-сайта JetBlue включает в себя ограниченную палитру, строгую шапку и единообразие шрифтов и сглаженных прямоугольников (рис. 4.25). Эти элементы используются даже на странице входа в систему и в модальных диалоговых окнах; они смотрятся органично. Обратите внимание на стилевое сходство мобильной версии.

 

Рис. 4.25. Домашняя страница JetBlue

Похожим образом сайт TED использует ограниченную цветовую схему и сетку, чтобы сохранить единообразие (рис. 4.26).

 

Рис. 4.26. Домашняя страница TED

Center Stage (Центральная сцена)

Что это

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

Когда использовать

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

Зачем

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

После этого пользователь может оценить, как периферийные элементы соотносятся с центральным. Это проще, чем разглядывать страницу, пытаясь выяснить, что же здесь главное. А что должно быть на втором месте? Как они связаны? И так далее.

Как

Создайте визуальную иерархию, в которой основной контент или документ будет доминировать над остальным. (Визуальную иерархию мы рассматривали во введении к этой главе.) При разработке интерфейса на основе паттерна Center Stage (Центральная сцена) учитывайте следующие факторы (хотя ни один из них не является обязательным).

• Размер. Содержимое «центральной сцены» должно быть как минимум в два раза шире содержимого в левом и правом полях, и в два раза выше содержимого верхнего и нижнего полей. (Пользователь может менять размер, но при первом открытии интерфейс должен выглядеть именно так.) Не забывайте о размере экрана: если у пользователя маленький монитор, то на каком уровне следует обрезать контент снизу? Убедитесь, что в любом случае центральная сцена будет занимать большую часть экрана.

• Заголовки. Крупные заголовки являются точками фокусировки и могут привлекать внимание пользователя к верхней части «центральной сцены». Конечно же, этот принцип работает и в печатных медиа. Подробнее о заголовках и точках фокусировки рассказывается во введении к этой главе и в описании паттерна Titled Sections (Именованные разделы).

• Контекст. Что пользователь ожидает увидеть, когда открывает страницу: графический редактор, длинную текстовую статью, карту или дерево файловой системы?

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

Примеры

В текстовом редакторе Google Docs (рис. 4.27) документ занимает почти все пространство; так же организован и редактор электронных таблиц. Даже инструменты вверху страницы не занимают слишком много места. В результате получается чистый и сбалансированный дизайн.

 

Рис. 4.27. Страница Google Docs

Десктопное приложение Sketch (рис. 4.28) спроектировано с использованием паттерна Центральная сцена. При открытии нового чистого документа или шаблона пользователь видит холст, на котором он может сосредоточиться для создания контента, не отвлекаясь на другие функции.

 

Рис. 4.28. Bohemian Sketch

Поскольку большинство продуктов в Google Suite ориентированы на задачи, центральная сцена — это общая структура большинства из них (рис. 4.29), например Google Earth, Google Slides, Google Hangout и Google Sheets.

 

Рис. 4.29. Google Maps

Чтобы узнать больше о дизайне Google, перейдите по ссылке https://material.io/design.

Grid of Equals (Выравнивание по сетке)

Что это

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

Когда использовать

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

Зачем

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

Как

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

Теперь организуйте элементы в сетке. Можно ограничиться одной строкой или создать матрицу шириной в два, три или более элементов. При разработке дизайна учитывайте ширину экрана — как страница будет выглядеть в узком окне? Где будет работать большинство пользователей — в большом окне браузера или на экране мобильного устройства (рис. 4.30)?

 

Рис. 4.30. Пример отзывчивого дизайна: десктопная версия (слева), мобильная версия (в центре), версия для планшета (справа)

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

Примеры

В примере Hulu (рис. 4.31) размер и относительная важность каждого элемента в сетке одинаковы и взаимодействуют друг с другом.

 

Рис. 4.31. Сетка Hulu

На страницах CNN (рис. 4.32) и Apple TV (рис. 4.33) единообразное визуальное оформление элементов подчеркивает их равнозначность. Преимущество использования сеток для отображения списков элементов заключается в том, что пользователю нужно будет взаимодействовать только с одним элементом сетки, чтобы понять, как ведут себя все остальные.

 

Рис. 4.32. Сетка телеканала CNN

 

Рис. 4.33. Сетка Apple TV

Titled Sections (Именованные разделы)

Что это

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

Когда использовать

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

Зачем

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

Как

Сначала хорошо продумайте информационную архитектуру — разделите контент на упорядоченные фрагменты (если вы этого еще не сделали) и придумайте для них краткие и хорошо запоминающиеся заголовки (рис. 4.34):

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

• попробуйте поместить заголовок на полосу контрастного цвета;

• используйте пустые пространства для отделения разделов друг от друга;

• помещайте разделы на подложки контрастных цветов;

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

 

Рис. 4.34. Примеры именованных разделов

Если на странице остается все еще слишком много информации, попробуйте применить паттерн Module Tabs (Автономные вкладки), Accordion (Аккордеон) или Collapsible Panels (Свертываемые панели).

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

Примеры

На странице настроек учетной записи в системе Amazon (рис. 4.35) используются три уровня заголовков, соответствующие трем уровням визуальной иерархии: заголовок страницы, заголовки разделов и подзаголовки наверху списков ссылок. Обратите внимание на использование пустого пространства, рамок и выравнивания для структуризации страницы.

На странице настроек Google также есть именованные разделы (рис. 4.36). Некоторые из них содержат функциональные возможности, другие — глубокие ссылки на другие страницы настроек.

 

Рис. 4.35. Страница настроек учетной записи Amazon

 

Рис. 4.36. Страница настроек учетной записи Google

Module Tabs (Автономные вкладки)

Что это

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

 

Рис. 4.37. Пример использования паттерна Module Tabs (Автономные вкладки)

Когда использовать

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

• пользователь должен видеть только один модуль за раз;

• они должны быть одинаковыми по высоте и длине;

• их должно быть немного — меньше десяти и вообще как можно меньше;

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

• содержимое разных модулей может быть связанным или похожим.

Зачем

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

Как

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

Четко помечайте активную вкладку — например, выделяя ее границы на общей панели. (Только цвета не всегда достаточно. Если у вас всего две вкладки, убедитесь, что активную и скрытую вкладки перепутать невозможно.)

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

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

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

Примеры

В поисковике авиабилетов Expedia (рис. 4.38) на вкладках находятся разные типы поисковых запросов. Это позволяет Expedia представить доступные варианты наглядно, не жертвуя ценным пространством экрана.

 

Рис. 4.38. Поиск на сайте Expedia

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

 

Рис. 4.39. Системные настройки macOS

Accordion (Аккордеон)

Что это

Модули контента, размещенные на панелях одинаковой ширины, которые можно разворачивать и сворачивать независимо друг от друга (рис. 4.40).

 

Рис. 4.40. Примеры «аккордеонов»

Когда использовать

Если на странице много разнообразного контента — такого как текстовые блоки, списки, кнопки, элементы управления формами и изображения, — и у вас нет достаточно места, чтобы показать сразу все. Такой контент можно объединить в группы или модули (или упорядочить по разделам). Свойства таких модулей:

• пользователь должен иметь возможность одновременно видеть содержимое разных модулей;

• некоторые модули могут быть длиннее или короче, но все они должны быть одинаковыми по ширине;

• модули должны составлять палитру инструментов, двухуровневое меню или другую упорядоченную систему интерактивных элементов;

• содержимое модулей может быть похожим или связанным по другим признакам;

• необходимо сохранять линейный порядок модулей.

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

Зачем

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

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

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

Как

Задайте заголовок для каждого раздела. Он должен быть кратким, но достаточно информативным, чтобы пользователь легко понял, какой контент под ним находится.

Создайте визуальный аффорданс (подсказку о том, как использовать объект), например значок стрелки или треугольника сигнализирует о том, что, щелкнув на нем, можно вывести дополнительную информацию.

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

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

Примеры

Раздел «Часто задаваемые вопросы» на страницах справки сайта Samsung организован в виде «аккордеона»: в нем показаны вопросы, а ответы выводятся на экран при нажатии на стрелку расширения (рис. 4.41). Это позволяет пользователю быстро просмотреть страницу, найти нужную информацию и перейти к другой теме, если необходимо.

На странице настроек Google Chrome в раскрывающихся «аккордеонах» содержатся подробные параметры настроек (рис. 4.42). Это позволяет пользователю увидеть все варианты и разобраться в том, куда нажимать.

 

Рис. 4.41. Страница помощи на сайте Samsung

 

Рис. 4.42. Настройки Google Chrome

Collapsible Panels (Сворачиваемые панели)

Что это

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

Когда использовать

Если на странице много разнообразного контента — такого как текстовые блоки, списки, кнопки, элементы управления формами и изображения. Или когда используется паттерн Center Stage (Центральная сцена), и контент на ней необходимо визуально выделить.

Свойства таких панелей:

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

• панели должны быть не настолько важны, чтобы открывать их по умолчанию;

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

• даже если модуль важен для пользователя, ему не требуется держать его открытым постоянно. Когда модуль закрыт, на его месте отображается основное содержимое страницы;

• иногда может потребоваться открыть сразу несколько модулей;

• модули не связаны друг с другом. Автономные вкладки или аккордеон упорядочивают контент и подразумевают, что их содержимое каким-то образом связано. Свертываемые панели не группируют содержимое.

Зачем

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

Как

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

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

Если вы поймете, что большинство пользователей открывают свертываемую панель, которая по умолчанию закрыта, измените ее настройки и открывайте ее на странице по умолчанию.

Примеры

Приложение Apple news (рис. 4.43) использует левую панель для добавления или удаления новостных и тематических каналов, а также навигации по ним. Когда пользователь хочет сосредоточиться только на содержимом, он может коснуться значка панели (слева от «Сегодня» в центральном заголовке), чтобы убрать ее влево.

В Google Maps (рис. 4.44) пользователь может продолжать просматривать карту во время поиска маршрутов; когда пункты отправления и назначения выбраны,

 

Рис. 4.43. Сайт Apple news, версия для iPad, с развернутой панелью навигации

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

 

Рис. 4.44. Google Maps, версия для iPad, показывающая левую панель с функцией построения маршрута

Movable Panels (Перемещаемые панели)

Что это

Блоки с контентом, которые можно открывать и закрывать независимо друг от друга. Пользователь может размещать эти блоки как ему удобно. Перемещаемые панели часто встречаются на «центральной сцене» в приложениях для создания объектов, например в Adobe Suite (рис. 4.45), и для работы с данными и взаимодействий, например в Microsoft Excel и Skype.

Когда использовать

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

 

Рис. 4.45. Перемещаемые панели в Adobe Illustrator

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

Свойства таких панелей:

• почти всегда пользователю нужно видеть на экране несколько модулей;

• для разных пользователей модули имеют разную ценность. Некоторым людям необходимы модули А, Б и В, а другим они совсем не нужны — эти пользователи работают с модулями Г, Д и Е;

• модули могут иметь разные размеры;

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

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

• возможность для пользователей убирать модули по своему выбору (и возвращать их обратно);

• модули могут быть частью панели инструментов или любой другой упорядоченной системы интерактивных элементов.

Зачем

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

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

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

Как

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

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

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

Глава 5. Визуальный стиль и эстетика

«Никогда не недооценивайте силу красоты».

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

В 2002 году группа исследователей сделала интересное открытие. Проект Stanford Web Credibility Project (http://credibility.stanford.edu) поставил перед собой цель — выяснить, какие аспекты вызывают у людей доверие или недоверие к веб-сайтам. Многие параметры оказались вполне предсказуемы: репутация компании, обслуживание клиентов, спонсорство и реклама — все это помогало пользователям решить, заслуживает ли сайт доверия.

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

Этот вывод справедлив и сейчас: привлекательный дизайн важен.

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

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

Основы визуального дизайна

Вот некоторые аспекты визуального дизайна, которые мы обсудим в этой главе:

• Визуальная иерархия.

• Структура.

• Цвет.

• Типографика.

• Удобочитаемость.

• Эмоциональный отклик.

• Изображения.

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

Визуальная иерархия

Визуальная иерархия служит для представления визуальных элементов в том или ином макете. Рассмотрим свойства визуальной иерархии.

Ясность. Насколько точно дизайн передает информацию, вкладываемую дизайнером.

Направленность на действие. Как пользователь узнает, какие действия он может совершить на странице.

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

Структура

Структура влияет на расположение и пропорции визуального дизайна.

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

 

Рис. 5.1. Примеры визуального дизайна

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

Цвет

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

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

• Всегда помещайте темный передний план на светлый фон и наоборот. Для теста попробуйте открыть ваш макет в графическом пакете, например Photoshop, и обесцветить его (сделать в оттенках серого).

• Когда выделение красным или зеленым цветом указывает на важное различие, не забудьте также изменить форму элемента или добавить текст. Это связано с тем, что многие дальтоники не различают эти цвета. По статистике, 10 % мужчин и около 1 % женщин страдают дальтонизмом в той или иной форме.

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

 

Рис. 5.2. Цветовой круг

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

Исходя из сказанного выше, сформулируем несколько правил использования цвета.

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

 

Рис. 5.3. Теплые цвета в сравнении с холодными

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

 

Рис. 5.4. Темный фон в сравнении со светлым

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

 

Рис. 5.5. Контраст

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

 

Рис. 5.6. Насыщенные цвета в сравнении с ненасыщенными

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

Не полагайтесь только на цвет. Цвет — это здорово, но, когда необходимо выделить важную информацию, нельзя полагаться только на цвет. Хороший пример из реального мира — знак «Стоп» в США (рис. 5.7). Где бы вы ни были, знаки «Стоп» всегда будут выглядеть одинаково. Они красные, на них есть надпись «СТОП» и они имеют отчетливую форму восьмиугольника. Знак передает информацию о действии, которое необходимо совершить тому, кто его видит, по трем когнитивным каналам.

 

Рис. 5.7. Пример знака «Стоп» в США

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

Справочные материалы и ресурсы по теме «Цвет»

• https://www.colorbox.io

• https://color.adobe.com/create

• http://khroma.co

Типографика

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

 

Рис. 5.8. Анатомия шрифта для цифрового дизайна

Виды гарнитур. Существует несколько терминов, которые помогут понять некоторые тонкости использования шрифтов. Гарнитура — это название конкретного дизайна шрифта. Например, Helvetica, Arial или Times New Roman. Шрифт — это определенный размер, толщина и стиль гарнитуры; например Helvetica Bold 12 pt, или Arial Italic 8 pt, или Times New Roman 18 pt. Часто слово «шрифт» неправильно используют для описания гарнитуры в цифровом дизайне. Мы не знаем, откуда это пошло, но полезно знать разницу.

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

С засечками. У гарнитур с засечками (Serif) на концах символов есть маленькие прямые и кривые линии (рис. 5.9). В эту группу входят самые распространенные гарнитуры для чтения больших объемов текста. Засечки обычно тонко направляют читателя от буквы к букве, тем самым делая процесс чтения менее утомительным для глаз.

Без засечек. Шрифты без засечек (Sans serif) (рис. 5.10) не имеют линий на концах символов. Они, как правило, выглядят более современно, а символы обычно остаются достаточно удобочитаемыми, если их размер невелик. Это одна из основных причин, по которым шрифты без засечек часто используются в пользовательских интерфейсах.

 

Рис. 5.9. Примеры шрифтов с засечками

 

Рис. 5.10. Примеры шрифтов без засечек

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

 

Рис. 5.11. Примеры экранных гарнитур

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

Размер. Размер шрифта (кегль) измеряется в пунктах и обычно указывается в единицах pt. Чем меньше пунктов, тем меньше размер шрифта. Как правило, чтобы сохранить удобочитаемость, шрифты размером менее 10 pt не используются. Для основного текста чаще всего используется стандартный размер 12 pt (рис. 5.13). Для такой информации, как сведения об авторских правах, которую можно разместить в подвале сайта, подойдет размер шрифта 9 pt. В приложениях, ориентированных в первую очередь на чтение (например, на новостных сайтах или в электронных библиотеках), лучше всего по умолчанию установить удобный размер шрифта (например, 12 pt) и позволить пользователю увеличивать его по желанию.

 

Рис. 5.12. Примеры моноширинных шрифтов

 

Рис. 5.13. Примеры размеров шрифта

Интерлиньяж.Интерлиньяж — это расстояние между строками текста, в частности, расстояние между базовой линией (см. рис. 5.8) одной строки текста и базовой линией соседней строки. Интерлиньяж должен быть достаточным, чтобы взгляд было удобно переводить со строки на строку и чтобы строки не накладывались друг на друга, однако не слишком большим, чтобы строки не казались обособленными (рис. 5.14).

 

Рис. 5.14. Интерлиньяж: с малым значением, пропорциональным и большим значением

Трекинг и кернинг. Трекинг и кернинг взаимосвязаны. Трекинг — это горизонтальный интервал между всеми символами. Неправильно подобранный трекинг способен повлиять на удобочитаемость, особенно если значение трекинга выбрано так, что символы располагаются слишком плотно или слишком далеко друг от друга. Тем не менее даже при правильном выборе значения трекинга могут возникнуть проблемы с некоторыми символами. Вот тут-то и приходит на помощь кернинг. Кернинг — это регулирование дизайнером расстояния (трекинга) между определенными парами символов (обычно в сторону уменьшения). Это необходимо, например, когда буква, занимающая много места, в частности заглавная «D», и буква, занимающая гораздо меньше места («I»), расположены рядом и находятся на неудобном расстоянии друг от друга. Кернинг помогает сделать пары букв более сбалансированными и разборчивыми. Большинство гарнитур, оптимизированных для цифрового дизайна, таких как шрифты Google Fonts, Apple или Microsoft UI, уже кернированы, чтобы выглядеть на экране более пропорционально.

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

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

• Никогда не комбинируйте две схожие гарнитуры. Способ избежать этого — сочетать шрифт с засечками и шрифт без засечек (рис. 5.15).

 

Рис. 5.15. Примеры сопряжения шрифтов

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

Выравнивание по левому краю — беспроигрышный вариант. Как видно на рис. 5.16, оно повышает удобочитаемость больших объемов текста.

• Выровненный по центру текст будет привлекать внимание пустым пространством вокруг него, но не увлекайтесь этим, поскольку такой текст труднее читать.

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

 

Рис. 5.16. Выравнивание абзацев

Числа. При выборе гарнитуры всегда обращайте внимание на то, как цифры и буквы выглядят вместе. В некоторых гарнитурах трудно отличить строчную букву «l» от цифры «1» или «0» от заглавной буквы «O».

Удобочитаемость

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

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

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

• Избегайте наклонных, курсивных или других орнаментальных шрифтов — они нечитаемы при малых размерах.

• Геометрические шрифты, как правило, трудно читать при небольшом кегле, поскольку округлые буквы (e, c, d, o и т.д.) в них трудно различить. Таковы Futura, Universal и некоторые другие шрифты середины XX века.

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

• По возможности помещайте большие объемы текста в столбец средней ширины — около 10–12 английских слов. Не выравнивайте по ширине узкие столбцы текста; пусть лучше будет «оборван» правый край.

Эмоциональный отклик

Теперь поговорим о чувственном и эмоциональном аспектах. Гарнитуры по-разному «звучат» — у них разные свойства, текстуры и цвета. Например, некоторые шрифты плотные и темные, в то время как другие более открытые (рис. 5.17). Взгляните на толщину штрихов и относительные размеры отверстий букв, чтобы оценить посыл. Используйте тест с прищуриванием (squint test), чтобы объективно и по-новому посмотреть на шрифт. В некоторых шрифтах буквы более узкие, чем в других, а в некоторых семействах шрифтов есть «сжатые» версии, в которых символы еще более узкие. Значение трекинга может быть большим или маленьким, что делает блок текста более открытым или плотным.

 

Рис. 5.17. Примеры гарнитур

Засечки и кривые добавляют еще одно измерение к цвету и текстуре шрифта. Засечки дополнительно влияют на масштабирование — поскольку они намного меньше самой буквы, они делают текстуру шрифта более изысканной: толстые шрифты без засечек выглядят по сравнению с ними грубыми и строгими. Кривые и углы, используемые в буквах, включая те, которые образуют засечки, объединяются, чтобы сформировать общую текстуру. Тем не менее не всегда легко объяснить, почему одни шрифты «звучат» формально, а другие — неформально. Comic Sans и другие игривые шрифты, безусловно, неформальны, однако шрифт Georgia по сравнению с Didot или Baskerville также кажется неформальным. Слова, написанные заглавными буквами, «звучат» более формально, чем те, что набраны строчными, а курсив «звучит» неформально.

В восприятии шрифтов играют роль и культурные аспекты. Старомодные шрифты, обычно с засечками, как правило, выглядят (как вы думаете?) устаревшими, хотя шрифт Futura (без засечек) по-прежнему выглядит так, будто он взят из учебника по биологии 1963 года. Шрифт Verdana так часто использовался в интернете, что стал его стандартом. А Chicago всегда будет оригинальным шрифтом Mac, неважно, в каком контексте он используется.

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

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

 

Рис. 5.18. Свободный и компактный визуальный дизайн

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

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

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

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

 

Рис. 5.19. Сайт онлайн-платежей Stripe

Обратите внимание на участки, где пересекаются кривые. Они образуют прямой угол? Такое пересечение создает более спокойную и умиротворяющую композицию. Если же они пересекаются под более острым углом, конструкция приобретает большую напряженность и подвижность. (Это не всегда так, но в целом верно.)

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

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

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

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

 

Рис. 5.20. Сайт Szimpla Kert

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

Изображения

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

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

Вот несколько полезных советов:

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

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

• Использовать стоковые изображения (готовые фотографии, которые можно купить, иногда без уплаты роялти) допустимо, но впечатление от такого фото не сравнится с тем, которое создает уникальное фото или дизайн, созданный профессионалами.

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

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

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

• Убедитесь, что все иконки выполнены в одном визуальном стиле: имеют одинаковую толщину, заливку или контур.

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

 

Рис. 5.21. Иконки

Ссылки на иконки и ресурсы

• https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/custom-icons

• https://thenounproject.com

• https://material.io/tools/icons

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

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

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

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

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

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

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

Визуальный дизайн для корпоративных приложений

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

Но что, если вы работаете с десктопными или корпоративными приложениями? Если попытаться применить эти принципы к дизайну элементов управления, у вас останется не так много вариантов. Нативные приложения Windows или Mac обычно используют стандартный дизайн платформы, и если вы хотите отказаться от него, вам придется усердно поработать над разработкой собственного. Корпоративные приложения необходимо оптимизировать для рабочих процессов, в них должно быть удобно работать в течение всего дня.

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

Но даже если вы выбираете нейтральный дизайн виджетов, все равно есть способы применить творческий подход:

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

• Цвета и шрифты. Управляйте общими цветовыми схемами и шрифтами в стандартном пользовательском интерфейсе. Например, используйте для заголовков шрифт на несколько пунктов больше, чем стандартный текст диалогового окна, и, как вариант, расположите заголовок на полосе контрастного цвета. Подумайте о таком оформлении, если разрабатываете макет страницы с использованием паттерна Titled Sections (Именованные разделы) (глава 7).

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

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

Доступность

Доступность — одна из труднейших задач дизайна. Операционные системы, такие как Windows, позволяют пользователям менять цвета и темы шрифтов рабочего стола не только для развлечения — люди с ослабленным зрением используют темы рабочего стола с высококонтрастными цветовыми схемами и крупными шрифтами, чтобы видеть свои действия. Убедитесь, что ваш дизайн работает с этими схемами. Это хорошо и правильно10.

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

Диапазоны визуальных стилей

Мода на стили довольно изменчива. Чаще всего к изменению визуальных стилей UI приводит выход новых версий операционных систем. Так, Apple, Microsoft, а теперь и Google задают тенденции в визуальном оформлении приложений, которые будут использоваться на их платформах. Мы подробно рассмотрим некоторые из самых популярных стилей для этих платформ и их точек взаимодействия: веб-, десктопных и мобильных приложений.

Скевоморфизм

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

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

В примере Apple Wallet, показанном на рис. 5.22 (слева), элементы, хранящиеся в списке данных, имеют визуальный дизайн, имитирующий внешний вид карточек или билетов. Такая имитация реальных объектов в цифровом формате помогает пользователю найти то, что он ищет, а также распознавать и упорядочивать содержимое.

Apple вновь успешно использует скевоморфизм в своем приложении-калькуляторе, см. рис. 5.22 (справа). Цифры в окружностях представляют собой оптимальный размер «сенсорной мишени» (мы обсудим это подробнее в контексте мобильного дизайна в главе 6), а функциональность отражает то, что вы ожидаете от обычного калькулятора. Таким образом, разработчики iOS превратили iPhone в устройство, которое трансформируется и изменяется для соответствия предполагаемому функционалу приложения.

 

 

Рис. 5.22. Кошелек Apple Wallet и калькулятор Apple для iOS

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

 

Рис. 5.23. Вход в учетную запись банка Square Invoice

Иллюстрации

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

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

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

 

Рис. 5.24. Интерфейс Eventbrite

 

Рис. 5.25. Сайт Florence.co.uk

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

 

Рис. 5.26. Приложение Happy Cow

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

Плоский дизайн

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

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

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

 

 

Рис. 5.27. Приложения Cash и Booking.com

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

Подробнее о плоском дизайне:

• https://www.microsoft.com/design/fluent

• https://material.io/design

 

Рис. 5.28. Приложение AirVisual

Минимализм

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

Clear Todos (рис. 5.29) — это яркий пример минималистичного дизайна, включающего только оттенки одного цвета, текст и очень ограниченный набор визуальных подсказок о работе интерфейса.

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

В Apple Health (рис. 5.30, справа) основу визуального интерфейса составляет красочная инфографика с полужирным начертанием.

 

Рис. 5.29. Приложение Clear Todos

 

Рис. 5.30. Приложения Calm и Apple Health

Glitché (рис. 5.31, слева) — это приложение для создания фотографий и видео в стиле «глитч». Его минималистичный пользовательский интерфейс позволяет сосредоточиться на работе и не отбирает ценное пространство экрана у основной задачи редактирования фото и видео.

В музыкальном приложении Bloom Брайана Ино (рис. 5.31, справа) используются только звуковые подсказки о том, как с ним взаимодействовать. Интерфейс основан на тонких приглушенных изменениях цвета и фонового звука и вызывает желание исследовать и творить.

 

Рис. 5.31. Приложения Glitché и Bloom

Адаптивный/параметрический дизайн

Адаптивный, или параметрический, дизайн представляет собой крайнюю степень минимализма. В таком дизайне форма не является статической или определенной, а скорее генерируется алгоритмически вокруг ближайших объектов (статических или динамических). Этот дизайн широко используется в видео- или фотоприложениях и все чаще и чаще встречается в других продуктах. Такой дизайн не делает опору на текст. Представьте себе интерфейс, который остается практически невидим до тех пор, пока в нем не возникает необходимость — тогда UI появляется и словно обтекает объект, с которым может взаимодействовать пользователь. В разработке таких интерфейсов главное — создание высококонтрастного и подвижного визуального стиля.

Приложение Apple Measure (рис. 5.32) — это инструмент для измерений, поставляемый с iOS. Чтобы что-то измерить, пользователь направляет телефон или планшет на объект, а затем измерительные инструменты и функции объединяются в интерфейс.

 

Рис. 5.32. Приложение iOS Apple Measure

Simple (рис. 5.33) — это приложение для мобильного банкинга. Чтобы добавить чек в приложение, пользователю предлагают сфотографировать его. При этом появляется пользовательский интерфейс, позволяющий определить, правильно ли расположен чек и когда можно делать снимок.

 

Рис. 5.33. Поиск чека в приложении Simple

Заключение

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

Платформы для веб-разработки, такие как Squarespace, Wix и WordPress, предлагают готовые шаблоны, созданные дизайнерами. Эти инструменты избавляют от необходимости думать о подходящем макете или ширине отступов и полей и об удобочитаемости.

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

Глава 6. Мобильные интерфейсы

Оказавшись на улице, оглянитесь вокруг. Куда бы вы ни посмотрели, вы увидите людей с телефонами. В мире множество устройств iPhone, телефонов на базе Android и других смартфонов и планшетов. В некоторых странах мобильный интернет уже популярнее стационарного. По прогнозам, к 2025 году мобильным интернетом будут пользоваться пять миллиардов человек11. Возможно, что продукт, который вы разрабатываете, будут использовать именно на мобильных устройствах. Мобильная разработка — это не просто еще один навык или сфера деятельности, это необходимость.

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

Теперь мало просто подогнать размер страницы веб-сайта под экран мобильных устройств. Компании, заботящиеся о масштабировании своих цифровых продуктов в будущем, используют такие подходы, как mobile-first (сначала разрабатывается мобильный дизайн, а затем масштабируется под экраны других устройств) и отзывчивый дизайн (responsive-design) (веб-дизайн, в котором интерфейс подстраивается под различные размеры экранов).

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

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

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

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

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

Проблемы и возможности мобильного дизайна

Сложность мобильной разработки в том, что пользователь мобильных продуктов не сидит перед большим экраном и полноразмерной клавиатурой.

Крошечный экран

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

Разная ширина экрана

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

Сенсорные экраны

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

Но в случае с сенсорным экраном все гораздо сложнее: пальцем нелегко попасть по маленькой цели. Убедитесь, что ссылки и кнопки достаточно крупные. Их размер не должен быть меньше 48 × 48 dp (9 мм) для устройств Android12 и 44 × 44 pt для Apple iOS13, и между ними должны быть промежутки. Конечно же, места для остального контента в таком случае остается меньше.

Сложности при вводе текста

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

Окружающие условия

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

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

Информация о местоположении

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

Социальное влияние и ограниченное внимание

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

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

Как создать хороший мобильный дизайн

Если вы просто пытаетесь упаковать весь контент обычного сайта в окно размером 360 × 640, остановитесь. Взгляните на задачу по-новому.

1. Выясните, что действительно нужно мобильным пользователям

Человеку, который находится вне дома или офиса, может понадобиться всего одна функция. У него не так много потребностей, как у пользователя полной версии сайта. Разработайте дизайн для разных возможных ситуаций, например:

• «мне срочно нужно узнать определенную вещь прямо сейчас, и побыстрее»;

• «у меня есть несколько свободных минут, развлеките меня»;

• «свяжите меня с другими людьми, например в социальной сети»;

• «если есть что-то, о чем мне нужно знать, расскажите мне об этом»;

• «что есть там, где я сейчас нахожусь?»

2. Избавьтесь от всего лишнего

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

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

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

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

 

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

3. Используйте аппаратные возможности устройства

Мобильные устройства обладают замечательными возможностями, которых нет у настольных компьютеров: определение местоположения, голосовая интеграция, ввод с помощью жестов, тактильная отдача (стуки и вибрация) и другие полезные функции. Некоторые устройства поддерживают многозадачность: приложение может работать в фоновом режиме, пока пользователь занят чем-то еще. Используете ли вы эти возможности?

4. Расположите содержимое линейно

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

5. Оптимизируйте самые частые операции

Определив, какие задачи пользователь будет выполнять чаще всего, и убрав все лишнее, попытайтесь максимально упростить эти задачи. Следуйте эвристическим правилам:

• избавьте пользователей от необходимости вводить текст либо сократите количество символов до минимума;

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

• как можно реже используйте прокрутку по вертикали и горизонтали, если только она не помогает избежать обновлений страниц и ввода текста. Другими словами, если вам необходимо вывести объемный контент, лучше разместите его на одной длинной вертикальной странице, а не на множестве маленьких;

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

Несколько полезных примеров

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

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

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

 

 

Рис. 6.2. Мобильная версия сайта Lugg и нативное приложение для iOS

 

 

Рис. 6.3. Мобильная версия сайта Booking.com и нативное приложение для iOS

Кроссворд New York Times (рис. 6.4, слева) получил высокие оценки за оптимизацию с учетом ограничений и возможностей мобильного исполнения. Когда пользователь касается области для ввода буквы, вся строка выделяется, и в синей области над клавиатурой появляется подсказка. Это отличная реализация, которая сокращает количество требуемых касаний и упрощает взаимодействие с приложением.

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

 

 

Рис. 6.4. Кроссворд New York Times в мобильном приложении для iOS и приложение NPR One

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

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

 

Рис. 6.5. Gratuity и Music Memos

Паттерны

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

В мобильном приложении необходимо визуализировать навигационную структуру верхнего уровня. Закрепленная панель инструментов вверху каждой страницы — один из стандартных способов организации мобильного интерфейса; также популярны интерфейсы на основе вкладок и полностраничных меню. Менее очевидны паттерны Filmstrip (Фотопленка) и Touch Tools (Инструменты, реагирующие на касание), однако они тоже заслуживают внимания.

На мобильных веб-страницах глобальные меню часто оформляются с использованием паттерна Bottom Navigation (Нижняя навигация), чтобы освободить ценное пространство вверху страницы для более важного контента.

Списки — важнейшая часть мобильной среды: списки приложений, изображений, сообщений, контактов, действий, настроек, чего угодно! Как на веб-страницах, так и в приложениях списки должны быть хорошо продуманы, привлекательны и удобны в использовании. Обычных текстовых списков чаще всего достаточно, но и карусели с сетками миниатюр отлично подходят для мобильного дизайна (в главе 7 вы найдете описания соответствующих паттернов и подробный рассказ о дизайне списков). Иногда подходят и бесконечные списки. Вот еще паттерны, которые рассматриваются в этой главе:

• Collections and Cards (Коллекции и карточки)

• Infinite List (Бесконечный список)

• Generous Borders (Больше воздуха)

• Loading or Progress Indicators (Индикаторы загрузки или выполнения)

• Richly Connected Apps (Тесно связанные приложения)

Vertical Stack (Вертикальный стек)

Что это

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

Когда использовать

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

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

 

Рис. 6.6. Вертикальный стек

Зачем

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

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

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

Как

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

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

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

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

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

Примеры

Сайты ESPN, Washington Post и REI (рис. 6.7) иллюстрируют три стиля реализации паттерна Vertical Stack (Вертикальный стек). На главную страницу сайта ESPN выводится только самое важное содержимое, а остальное прячется за элементами меню или за нижним краем экрана. Washington Post показывает сразу все, стек на рис. 6.7 — это всего лишь небольшой фрагмент очень длинной страницы! Главная страница REI содержит меню всех доступных мест и способов покупки с привлекающим внимание объявлением.

Salon.com (рис. 6.8) предлагает вертикальную разметку стека в мобильной версии сайта и в мобильном приложении. Это позволяет гибко изменять количество отображаемого контента и упрощает прокрутку новых статей большим пальцем одной руки.

 

Рис. 6.7. Вертикальный стек на мобильных сайтах ESPN, Washington Post и REI

 

 

Рис. 6.8. Salon.com

Filmstrip (Фотопленка)

Что это

Возможность перелистывать страницы, проводя пальцем вперед и назад, чтобы просматривать контент по одной странице за раз (рис. 6.9).

 

Рис. 6.9. Фотопленка

Когда использовать

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

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

Зачем

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

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

Многим пользователям просто нравится перелистывать страницы на сенсорном экране.

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

Как

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

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

Примеры

Основные страницы приложения BBC News для iPhone (рис. 6.10) структурированы в виде фотопленки. Пользователь может переключаться между вкладками Top Stories, My News, Popular, Video и Live.

 

Рис. 6.10. Приложение BBC News

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

 

Рис. 6.11. Приложение «Погода» для iPhone

Touch Tools (Инструменты, реагирующие на касание)

Что это

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

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

Когда использовать

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

 

Рис. 6.12. Инструменты, реагирующие на касание, в мобильном приложении Netflix

Зачем

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

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

Как

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

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

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

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

Примеры

В видеоплеере на iPhone инструменты, реагирующие на касание, появляются, когда пользователь дотрагивается до указанной области экрана (рис. 6.13). Примерно через пять секунд они исчезают, если не выбрать ни один из них.

 

Рис. 6.13. Инструменты, реагирующие на касание, в приложении YouTube для iPhone

Приложение Apple Notes (рис. 6.14, слева) предназначено для чтения заметок, но при прикосновении к экрану появляются инструменты редактирования.

 

 

Рис. 6.14. Apple Notes и нижняя панель навигации Amazon

Bottom Navigation (Нижняя навигация)

Что это

Размещение инструментов глобальной навигации в самом низу экрана. Amazon использует простую систему «нижней навигации» в глобальном футере своего мобильного веб-сайта (рис. 6.14, справа).

Когда использовать

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

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

Зачем

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

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

Как

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

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

Примеры

На сайте NPR полоса с информацией и ссылками есть внизу каждой страницы (рис. 6.15, слева). На ней размещены стандартные навигационные ссылки и ссылка на текстовую версию.

 

 

Рис. 6.15. Нижняя навигация сайта NPR и футер сайта REI

В мобильной версии сайта REI используются простые ссылки в футере, как в полноэкранной версии, и большая кнопка подходящего размера для мобильных экранов, на которой указан телефонный номер для связи (рис. 6.15, справа).

Collections and Cards (Коллекции и карточки)

Что это

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

 

Рис. 6.16. Паттерн Collections and Cards (Коллекции и карточки)

Когда использовать

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

Зачем

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

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

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

Как

Поместите миниатюру рядом с текстом элемента. На большинстве сайтов и приложений ее помещают слева.

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

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

Примеры

Многие новостные сайты используют этот паттерн для представления статей; а к ресурсам с видеоконтентом и другим средствам массовой информации он подходит по самой своей природе. Такой способ организации помогает пользователю просматривать список и выбирать элементы. В приложениях Jacobin, NPR и The Atlantic этот паттерн эффективно используется для тематических статей (рис. 6.17).

Этот паттерн чрезвычайно универсален. В примере на рис. 6.18 вы увидите возможные варианты миниатюр и текста или списка карточек в разных приложениях.

 

Рис. 6.17. Приложения Jacobin, NPR и The Atlantic для iPad

 

Рис. 6.18. Приложения Hulu, CNN, Jigsaw и Pinterest для iPad

Infinite List (Бесконечный список)

Что это

Демонстрация нового контента в длинном списке по мере его прокрутки вниз, как показано на рис. 6.19.

 

Рис. 6.19. Бесконечная прокрутка

Когда использовать

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

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

Зачем

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

Загрузка каждой последующей порции тоже не занимает много времени, и этот процесс контролирует пользователь: он сам решает, нужно ли загружать еще данные и когда это делать.

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

Как

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

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

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

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

Примеры

Бесконечные списки используются в приложениях iPhone, включая Mail, а также сторонних приложениях , таких как Facebook (рис. 6.20, слева). В мобильной версии, как и на полноразмерном веб-сайте Facebook, загружается несколько первых страниц обновлений; затем пользователь при необходимости загружает еще.

В приложении для работы с электронной почтой Apple (рис. 6.20, справа) бесконечная прокрутка служит для отображения списка имеющихся в ящике электронных писем.

 

 

Рис. 6.20. Facebook и электронная почта Apple iOS

Generous Borders (Больше воздуха)

Что это

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

 

Рис. 6.21. Больше воздуха

Когда использовать

Если на экране есть кнопки с текстовыми ярлыками, списки элементов, обычные текстовые ссылки — в общем, любой небольшой объект, которого касается пользователь.

Зачем

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

Как

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

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

Итак, все же какие размеры оптимальны? Это зависит от типа устройства, для которого вы разрабатываете продукт, и от разрешения экрана. Ориентиры следующие:

• 48 × 48 dp (9 мм) для устройств Android;

• 44 × 44 pt для Apple iOS.

Примеры

В приложении Autodesk Sketchbook (рис. 6.22, слева) для iPhone предусмотрено достаточно много места вокруг сенсорных объектов. Все приложение создает впечатление расслабленности и свободы.

В мобильном приложении Zoom (рис. 6.22, справа) большие сенсорные кнопки, по которым легко попасть пальцем.

Приложение Instacart (рис. 6.23) похоже на примеры выше, хотя его визуальный стиль заметно отличается. Кнопки для основных действий — «Add item» (добавить в корзину), элементы навигации — отличаются друг от друга.

 

 

Рис. 6.22. Приложения Autodesk Sketchbook и Zoom

 

Рис. 6.23. Приложение Instacart

Loading or Progress Indicators (Индикатор загрузки или Индикатор выполнения)

Что это

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

Когда использовать

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

Зачем

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

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

Как

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

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

Примеры

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

SoundHound (рис. 6.24, справа) — приложение, с помощью которого можно узнать, какая музыка играет в данный момент. Когда пользователь нажимает кнопку «Слушать», запускается привлекательная и простая анимация, обозначающая, что система прослушивает композицию и ищет совпадение в своей базе.

 

Рис. 6.24. Экран загрузки Trulia и анимированный индикатор выполнения SoundHound

Когда на устройстве iPhone устанавливается новое приложение, поверх его значка выводится миниатюрный круглый индикатор выполнения, указывающий, сколько еще ждать завершения загрузки (рис. 6.25). Он выглядит довольно симпатично, а его назначение понятно любому с первого взгляда.

 

Рис. 6.25. Индикатор выполнения во время установки приложения на iPhone

Richly Connected Apps (Тесно связанные приложения)

Что это

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

Когда использовать

Если данные в разных мобильных приложениях можно легко «связать», например через телефонные номера и гиперссылки.

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

Зачем

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

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

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

Как

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

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

• телефонные номера — в программу для набора номера;

• адреса — в карту или список контактов;

• даты — в календарь;

• адреса электронной почты — в приложение для работы с почтой;

• гиперссылки — в браузер;

• музыку и видео — в медиаплеер.

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

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

Примеры

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

 

Рис. 6.26. Приложение Citizen

Simple (рис. 6.27) — это банковское приложение. Чтобы привязать чек, активируется функция камеры и информация с чека считывается приложением.

Приложение Google Calendar (рис. 6.28) интегрируется с телефоном, картами, списками контактов и электронной почтой.

 

Рис. 6.27. Интеграция приложения Simple с камерой

 

Рис. 6.28. Приложение Google Calendar

Станьте мобильными

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