WEBMASCON - журнал для веб-мастеров обновление: 2007.09.07

Графические меню

Interaction Design Patterns (Web)
автор: 2002 Martijn van Welie
перевод: Александр Качанов

(назад к списку)

С сайта www.apple.com

Задача

Посетитель делает выбор из ограниченного числа пунктов

Условие

Место на странице под меню ограничено.

Решение

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

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

Почему

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

Еще примеры

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