x
 
↑
Июнь
8 •

5 •

12 •
17 •

15 •
↓
Александр Комаченко
11 июня 2007

Решил воспользоваться возможностью и попросить вашего совета.

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

На верхнем фрагменте представлен 1-й (9 основных категорий) и 2-й уровни каталога. Здесь основные категории и их подкатегории представлены в табличном виде, чего делать нельзя, так как увеличение числа подкатегорий в какой-либо основной категории приведет к смещению остальной информации — в итоге на странице появляются белые дыры. Значит ли это, что такого рода информацию следут располагать только линейно, сверху вниз?

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

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

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

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

Ну и обязательно поставить рубрики в осмысленном порядке.

Ваш второй вопрос я не понял.

Поделиться
Отправить

Комментарии
Алексей Мельников
11 июня 2007

Удобно сделан поиск по каталогу виджетов на www.apple.com/downloads/dashboard/ И главное, перемещения по каталогу работают без перезагрузки страницы.
Евгений Неверов
11 июня 2007

Что касается «Вариант голого списка клиенту не подходит».

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

При всем при этом, неплохо бы еще сгруппировать одинаковые пункты, чтобы получилось что-нибудь вроде (см. картинку).

Конечно, если изображений нет, то этот вариант не подойдет.
Андрей Колпаков
11 июня 2007

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

Примеры сайтов, вынужденных решать эту задачу: price.sunrise.ru, www.nix.ru/price/price.html

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

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

Далее встает вопрос отображения это структуры. Можно на каждой странице показывать целиком один уровень иерархии (так сделано на первом уровне «Санрайза»). Можно также показывать вложенные уровни (так сделано на первых уровнях у Александра и у «Никса»).

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

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

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

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

Мой опыт показал, что предоставление свободы действий для пользователя губительно для сайта.
Павел Скрипкин
11 июня 2007

По поводу второго вопроса.

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

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

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

Хороший пример рубрикатора, в частности, по ноутбукам, можно посмотреть на Яндексе (http://market.yandex.ru/catalogmodels.xml?CAT_ID=432460&hid=91013).
Татьяна Огарко
11 июня 2007

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

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

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

При таком подходе, претерпевать изменения будет только конечная страница с перечислением позиций по конкретному наименованию, а не все страницы каталога (1-й,2-й и 3-й уровни).
Роман Добровенский
12 июня 2007

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

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

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

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

Покупку в интернете тоже можно привести к понятному, человеческому, виду. Картинкой передаю только суть.
Карпинский Александр
14 июня 2007

А. Г.
Второй предложеный вариант непонятный, неочевидно, что такое рубрика, и почему где-то они есть, а где-то их нет. Третий — бесчеловечный :) Перый — самое оно.

Евгений Неверов
Фотография не дает никакого представления о ноутбуке, даже о его размере.

Алексей Мельников
Ну хорошо, допустим, что компьютер может быть покрасивше и понадежнее, а с программным обеспечением что делать?
Алексей Мельников
14 июня 2007

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

В случае с программами, покупка игры Half life 12 выглядит так:
Павел Урусов
8 июля 2007

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

В качестве примера достаточно удачной, на мой взгляд, реализации каталога можно привести украинский сайт Hotline. Их товарный каталог ноутбуков (http://hotline.ua/gd/12) учитывает практически все возможные критерии. Конечно, это экстремальный пример, да и интерфейсные решения можно назвать спорными, но в целом надо стремиться к чему-то вроде этого.
Костюченко Андрей
23 июля 2007

Предлагаю обратить внимание на интерфейс страниц:
http://unitrade.ua/shop/33/44/
http://hotline.ua/gd/12/

Особенно на левую колонку.
Даня Дадиомов
7 сентября 2007

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

Компьютерная
техника

должно выглядеть как

Компьютерная техника

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

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

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

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

Вот такой веб 2.0.
1 • Куда поставить ссылку: на поля или в текст? 2 •