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

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

Слайдеры (Slider-based filtering)

В дизайне Amazon's Diamond Search используются ползунки, чтобы пользователь мог расширить или сузить диапазон значений, по которым будет производиться фильтрация. После обновления страницы пользователю показывается, сколько результатов соответствует установленным критериям.

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

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

Когда нужные критерии заданы, пользователь нажимает на кнопку «See results».

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

Надувное меню (Fisheye menus)

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

Древовидные карты (Treemaps)

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

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

При наведении указателя отображается подробная информация о компании.

Перетаскивание (Drag-and-drop)

Этот тип пользовательского интерфейса использует осведомленность пользователей о возможности перетаскивать элементы. Интернет-магазин Panic Room предоставляет пользователям два способа добавить товар в корзину: нажать на символ "+" или просто перетащить его туда.

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

Удерживая нажатой кнопку мыши, перетаскиваете его в область корзины:

И отпускаете кнопку, чтобы бросить товар в корзину:

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