Дизайн-концепция проекта «Вега»

Вернуться Назад, к списку документов

Цель — разработка единого интерфейса конгломерата сайтов «Вега» (объединения «Вега»).

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

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

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

Намерения:

Предпосылки, повлиявшие на решения

  1. Центры вниманияЦентры внимания. Центры внимания, вопреки расхожему мнению, располагаются не в углах плоскости изображения, а на расстоянии примерно трети по обеим осям от каждого из них. Самый сильный полюс расположен вверху слева, затем, по ниспадающей: внизу справа, вверху справа и внизу слева. Внимание рассеивается от этих точек концентрическими кругами, но при пересечении кругов (главным образом, в центральной части плоскости) усиливается.
  2. Манипуляции веб-пользователя. Чем дальше друг от друга на экране располагаются элементы управления, тем больше времени и даже физических сил (движения курсора по экрану прямо пропорциональны движениям мышью) тратиться на перемещения между ними. Учитывая то, что наиболее часто используемые компоненты графического интерфейса, полосы прокрутки, располагаются справа, то пользователь, по идее, должен меньше уставать и быстрее работать, если и остальные элементы управления будут находиться под рукой (то есть справа).
  3. Привычки компьютерного пользователя. Повторяющиеся действия, ставшие бессознательными, значительно повышают эффективность работы. Поэтому следует, где только возможно воспроизводить самые распространенные модели графического интерфейса. В частности, речь идет о расположении навигационных элементов: глобальной навигации вверху экрана (однако, смещенной чуть вниз, ближе к центрам внимания) и колонке навигации по текущему разделу в правой части экрана (такое расположение стало привычным благодаря готовым макетам популярных систем для ведения блогов и максимально соответствует идее оптимизации манипуляций веб-пользователя). Следует без стеснения использовать и другие шаблонные решения для сайтов (название элементов, реализация веб-форм etc). Задача интерфейса не удивлять, а установить легкое взаимодействие «человек-программа».
  4. Физиология чтения.
    «При чтении глаз совершает зигзагообразное движение. Вдоль по строке направо, вниз налево, на начало другой строки, вновь вдоль по строке...
    При узкой колонке он ерзает туда-сюда, нет размеренности движения. При длинной строке глазу скучно. Он устает, движение замедляется. А найти начало следующей строки - и вовсе тяжело».
    Если же строка растягивается на всю ширину экрана при высоких разрешениях, то приходится еще и крутить головой, чтобы перевести взгляд с ее начала к концу. Экспериментально выведенная «золотая середина» строки — 60-80 знаков. Кроме того, удобочитаемость зависит от таких факторов, как различимость шрифта, кегль (высота шрифта), интерлиньяж (межстрочный интервал) — факторы, которые постоянно дискутируются, и для изложения собственного взгляда на которые я выделил отдельную страницу.
  5. Ограниченность краткосрочной памяти, «кошелёк Миллера». Кратковременная память имеет естественные пределы. Обычный человек сознательно может воспринимать и обрабатывать от пяти до девяти объектов или процессов (7 ± 2). Если его перегружать информацией, он перестает адекватно воспринимать поступающие извне данные и впадает в транс (внимание, сконцентрированное на внутреннем мире). Подобная перегрузка сознания используется, кстати, для так называемого «цыганского гипноза» — хороший прием для привлечения клиентов на семинарах (от обилия новых терминов они охотнее воспринимают простые команды, вроде «плати»), но удобству веб-ресурса этот подход вредит.
  6. Сокращение числа необходимых действий при поиске и взаимодействии с целью. Иначе — сокращение числа «кликов». Очевидный факт: чем короче путь к цели, чем меньше действий требуется для получения желаемого результата, тем эффективнее работа. Нередко этим соображением руководствуются для заполнения всей площади экрана информацией, но такой подход нивелируется противоречием с особенностями психики (пп. 1 и 5 — про центры внимания и краткосрочную память) и напоминает попытку сверстать большой англо-русский словарь на одной странице: всё, вроде бы, близко, но найти нужное неимоверно тяжело. Единовременно выдаваемые порции информации должны быть минимальны, а вот путь к другим частям должен быть короток.
  7. Для передвижения по незнакомому ресурсу нужны ориентиры. Посетитель, попавший на сайт не с первой страницы, должен быстро понять, в каком месте общей структуры он находится, куда может двигаться дальше — вверх, вниз или в стороны по иерархии системы.

Общие решения

  1. Последовательность и единые стандарты. Чтобы сократить время освоения клиентом различных сайтов объединения, они должны быть выполнены в соответствии с общими стандартами. Конгломерат видится единой рабочей областью, в которой общие элементы управления (меню, типовые формы) должны занимать постоянные места и не меняться от экрана к экрану как в рамках отдельного сайта, так и в рамках портала.
  2. Вертикальная иерархия. Чтобы сократить количество единовременно подаваемой информации, горизонтальные иерархические структуры сайтов объединения должны быть преобразованы в вертикальные: меньше разделов на уровне, больше вложенных уровней (предлагаемые структуры .masterhost и SpyLOG).
  3. Ограниченная эластичность макета. В связи с соображениями, изложенными в пп. 1 и 4 предыдущей главы, недопустимо растягивать страницы на всю ширину экрана. Однако, учитывая большое количество многоколонных таблиц, которые легче читать все-таки в развернутом виде, следует ввести ограниченную эластичность макета. Минимальная ширина — 760 точек (соответствие рабочей области браузера при разрешении 800x600 — по разным оценкам, это от 7 до 14% всех веб-пользователей); максимальная ширина — 980 точек (соответствие рабочей области браузера при разрешении 1024x768).
  4. Простота основного интерфейса, минимализм дизайна, лаконичность и доходчивость текстов. Тексты, декоративная нюансировка должны быть сведены к минимуму, достаточному для выполнения задачи. Ничто не должно отвлекать внимание от главного на отдельно взятом экране. Однако необходимые пояснения должны быть легко доступны — прежде всего, в виде всплывающих подсказок и др. справочных материалов.
  5. Режим точных настроек. Экспертный (advanced) режим, позволяющий решать задачи с большей эффективностью, также не должен появляться на экране по умолчанию, только по легко осуществимому желанию пользователя — согласно популярной концепции проектирования интерфейсов details on demand (подробности по желанию).
  6. Удобно структурированные и легко доступные справочные материалы. Все операции в системе должны быть подробно описаны языком, понятным неспециалисту, проиллюстрированы (в том числе демо-роликами), собраны в одном месте, тщательно каталогизированы и снабжены подробными содержаниями-меню.

Частные проектные решения

  1. Макет, наложенный на схему центров вниманияОбщий макет (см. наложение на схему центров внимания):
    1. Мета-навигация, включающая ссылки на сайты объединения и ссылки, открывающие формы входа и регистрации (после входа меняются на точку входа в «личный кабинет» — персональную зону, включающую в себя инструменты управления проектами, «кошелек» и, возможно, анкету).
    2. Логотип.
    3. Баннер (это может быть, как коммерческое объявление, так и самореклама).
    4. Глобальное меню.
    5. Основное содержание.
    6. Навигация по текущему разделу.
  2. Общие принципы и элементы оформления. Так же, как и макет, стилистическое единство, выраженное в гармонирующих гаммах, фоновых градациях цвета, оформлении кнопок etc, будет способствовать более быстрому освоению клиентом различных сайтов объединения.
  3. Основная навигационная система раздельного типа:
    • Глобальная навигация — горизонтальное меню с упрощенной формой поиска и выпадающими списками второго и третьего уровня (см., например, эскиз страницы для .masterhost). Выпадающие меню могут быть, как традиционными, так и teaser-меню (неполный список подразделов и ссылка на т. н. маршрутную страницу Страница содержания раздела или подраздела, на которой собраны ссылки на все «дочерние» подразделы — в виде каталога ссылок или «афиши»), иллюстрированными и каталожными навигациями (см. соответствующие эскизы: teaser, каталожная, иллюстрированная).
    • Навигация по текущему разделу: расположенное в правой части страницы меню, состоящее из пунктов 2-го уровня и открытых веток «родительских» подразделов текущей страницы (т. н. down-to-child links; см., например, эскиз внутренней страницы .masterhost).
    • Каждый раздел и подраздел имеет свою титульную (маршрутную) страницу — по размещенным на них открытым ссылкам посетитель может добраться до цели без использования выпадающих меню.
  4. Вспомогательная навигация:
    • Мета-навигация. По щелчку на «Входе» и «Регистрации» в общем случае открывается не отдельная страница, а модальное окно Всплывающее окно, блокирующее работу программы до его закрытия. Однако отдельные страницы сохраняются для пользователей с отключенным JavaScriptом. Пример подобного модального окна можно посмотреть здесь, нажав кнопку «Игра на деньги».
    • Контекстная навигация в виде «цепочек» («хлебных крошек»), ссылок «по теме» и вкладок, которые предлагается сохранить только на уровнях однотипных продуктов (например, хостинг для Windows и хостинг для UNIX).
  5. Таблицы с прокруткой. Для более быстрого доступа к кнопкам «Заказать» («Купить»), которые сейчас располагаются в конце длинных таблиц, предлагается так сократить их видимую часть, чтобы помещалась на экран при разрешении 800x600, и добавить прокрутку.
  6. Единый комплект шрифтов (пример набора — данный документ; основание и список см. здесь).