Основы разработки привлекательного интерфейса поиска
Исходная статья опубликована в пятницу, 14 декабря 2012 г.
Привет, это Кейт Драстад, руководитель программы в группе разработчиков системы поиска SharePoint. В SharePoint 2013 интерфейс поиска стал еще обширнее — мы дали дизайнерам и разработчикам возможность создать практически все то, что они могут себе представить. Однако при настройке интерфейса поиска следует соблюдать осторожность. Существует четкая грань между сбалансированной и загроможденной страницей, поэтому нам бы хотелось поделиться с вами мыслями о том, как сделать интерфейс поиска привлекательным и простым в использовании.
Выравнивание всей страницы
Одним из важнейших факторов для интерфейса поиска является выравнивание всех элементов на странице. Вы заметите, что в нашем оформлении по умолчанию веб-часть уточнения поиска (отображающая параметры вдоль левой стороны страницы) и значок центра поиска SharePoint (изображение лупы в верхнем левом углу) выровнены по левому краю. Поле поиска, область навигации и результаты также выровнены по левому краю. Верхняя часть поля поиска выровнена с верхней частью значка, нижняя часть области навигации выровнена с нижней частью значка.
Рис 1. Все элементы страницы результатов поиска выравниваются по сетке, выделенной зеленым цветом
Это может показаться незначительным, но прикрепление элементов на странице к сетке делает просмотр страницы более удобным для пользователей. Компоненты отделяются друг от друга четкими вертикальными и горизонтальными областями свободного места. Это помогает глазу различать отдельные компоненты на странице, что имеет крайне важное значение. Неправильно выровненная страница как минимум выглядит непривычно для большинства пользователей, а в худшем случае мешает пользователям эффективно воспринимать результаты. Когда компоненты не выровнены, может появиться "зубчатая граница". Когда глаз пытается охватить такую границу, ему приходится перемещаться из стороны в сторону. Прямые линии глаз распознает гораздо быстрее.
Рис. 2. На этом изображении значок поиска смещен влево, то есть не выровнен по сетке
Если вы хотите создать удобный и привлекательный интерфейс, при добавлении нового компонента на страницу или при изменении расположения существующих компонентов крайне важно принимать во внимание сетку.
Рис. 3. Здесь мы изменили встроенные результаты, чтобы включить компоненты оценки и некоторые дополнительные метаданные. Обратите внимание, что добавленные компоненты выровнены по сетке
Внешний вид и удобство использования всей страницы
Однако важным является не только выравнивание. Вам также следует принять во внимание число цветов, шрифтов и полнофункциональных элементов управления на странице. В фокусе на странице результатов поиска почти всегда должны находиться сами результаты, поэтому при проектировании компонентов на странице рекомендуется убедиться, что ничего не отвлекает внимание пользователя от результатов. Ниже приведено несколько полезных советов.
По возможности используйте понятные сочетания цветов
Например, по общепринятому соглашению синий текст в результатах поиска обозначает доступный для выбора заголовок результата, а зеленый текст обозначает URL-адрес заданного результата. Отклонение от этой схемы требует от пользователя больше анализировать отображаемые сведения.
Рис. 4. Изменение цвета заголовка и URL-адрес запутывает пользователей. Используйте цвет согласно общепринятым соглашениям
Используйте как можно меньше цветов
Цвета обычно используются для выделения определенных ключевых элементов, например выбранного параметра фильтра, заголовка результатов или URL-адреса. Однако использование большого количества цветов может выглядеть как выделение всех элементов и внимание пользователя рассредоточивается. В результате пользователь не может ни на чем сосредоточиться, так как изображение представляет собой цветастую неразбериху.
Рис. 5. Слишком большое число цветов отвлекает внимание, мешая сконцентрироваться на чем-то одном и выявить важные элементы. Ограничивайте число цветов, используемых в пользовательском интерфейсе
Используйте как можно меньше гарнитур и размеров шрифта
Шрифты, их размеры и выделение полужирным/курсивом используются в тех же целях, что и цвет, а именно для выделения важных элементов. Как и в случае с цветом, при использовании слишком большого числа стилей и шрифтов все выглядит загроможденным. Наша группа разработчиков часто называет это письмом с требованием выкупа, где страница выглядит так, как будто ее составили из газетных вырезок.
Делайте внешний вид полнофункциональных элементов управления как можно более простым
Взгляните на уточнение гистограммы фильтра даты под заголовком Modified на рисунке 6. Сначала помещение этого уточнения на страницу по умолчанию казалось рискованным, так как этот комплексный элемент управления мог привлекать больше внимания, чем текстовые фильтры. Однако мы обеспечили согласованность цветов с остальной частью страницы, а также плавность и простоту фигур и линий. Так следует поступать при добавлении любого пользовательского элемента управления.
Одной из идей, которую мы попытались обыграть, является фильтр круговой диаграммы. Но из рисунка 6 видно, насколько отвлекающим является такое уточнение.
Рис. 6. Пользовательский фильтр круговой диаграммы содержит слишком много цветов и не соответствует графическому стилю других элементов управления. Он слишком отвлекает внимание
А теперь взгляните на рисунок 7 — вот что происходит, если упростить цветовую схему и фигуры.
Рис. 7. Используя цвета, которые уже присутствуют в пользовательском интерфейсе, и следуя графическому стилю остальных элементов управления, мы смогли сделать это уточнение круговой диаграммы достаточно выделяющимся, чтобы пользователи кратко ознакомились с его назначением, но при этом не отвлекающим внимание пользователей от выполняемой задачи
Концептуальное разделение страницы
При проектировании интерфейса поиска вам следует принимать во внимание аспекты как эстетического, так и концептуального характера. Основываясь на распространенных соглашениях о поиске и своих собственных исследованиях, мы упорядочили компоненты страницы по разным областям в зависимости от функциональных возможностей и модели взаимодействия с пользователем. При добавлении или изменении размещения компонентов рекомендуется сохранить наше концептуальное разделение, чтобы пользователи не терялись при поиске нужной информации.
Например, все наши действия фильтра расположены на левой стороне страницы результатов поиска. Когда пользователи хотят выполнить фильтрацию своего набора результатов, они всегда знают, что искать следует именно здесь. Если вы хотите добавить на страницу новый фильтр, рекомендуется расположить его рядом с другими фильтрами, чтобы пользователи не искали его по всей странице.
На рисунке 8 показан обзор концептуальных разделов страницы результатов поиска по умолчанию.
Рис. 8. Страница результатов поиска разделена на пять функциональных областей. При ее настройке старайтесь добавлять новые элементы в соответствующую функциональную область
Это всего несколько общих рекомендаций, помогающих приступить к созданию привлекательного интерфейса поиска. Буду рада вашим комментариям и вопросам!
Это локализованная запись блога. Оригинал находится на странице Designing a beautiful search experience — The basics