x
 
Андрей Давыдов
6 августа 2007

Здравствуйте, Артем.

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

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

Сравнивать можно по разным показателям (цена, расход топлива, объем двигателя) в меню справа.

Машинки и модели марок рыбные. Машинки будут разноцветные. Максимальное количество моделей марки 8, максимальная цена 50 000 $.

Также предусмотрен поиск. 1. Насколько это удобно, понятно и логично? 2. Как вам идея с расширенным поиском?



На диаграмме не очень эффективно используются два измерения экрана. Модель автомобиля закодирована не только иконкой, но и положением в списке по вертикали. Ничто не мешает «упаковать» вашу одномерную диаграмму в строчки:

Расширенный поиск лучше при этом превратить в уточняющий фильтр справа от вашей визуализации. Марки автомобилей в данном случае стоит отсортировать по алфавиту. Изменять порядок можно перетаскиванием: при наведении на плашку курсор может соответствующим образом меняться

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


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

Комментарии

Андрей Давыдов
6 августа 2007

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

Для подробного сравнения нескольких показателей на сайте предусмотрена специальная таблица.

Роман Добровенский
7 августа 2007

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

Дмитрий Фитискин
7 августа 2007

Согласен с Артемом, что место используется нерационально. Это сказывается, например, на том, что, просматривая модели ВАЗ, я вообще могу не узнать что можно их сравнивать не только по цене, т. к. блок выбора параметра для сравнения всегда сверху, а модели показываются ниже соответствующей марки (ВАЗ в самом низу).

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

Сергей Соловьев
7 августа 2007

На мой взгляд, получилось очень здорово и наглядно. Единственное — машинка, как правило, занимает целое деление линейки, а в некоторых случаях и превосходит его. При этом совсем непонятно, где начинается цена на данную модель и где заканчивается. Ведь размер машинки никак не связан с разбросом цен на различные комплектации, да это было бы и неправильно! Масштаб у всех изображений должен быть одинаковым.

Может быть, стоит ввести некоторый индикатор, чтобы сделать инструмент более точным, например, такой (на иллюстрации).

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


7 августа 2007

Каталог тракторов Deutz-Fahr:
http://www.deutz-fahr.de/english/traktoren/

Андрей Давыдов
7 августа 2007

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

Дима Дубина
8 августа 2007

Каталог на Drive.ru:
http://www.drive.ru/ford/models/

Кайрат Тасбакаев
8 августа 2007

«Байкфайндер» на сайте велосипедов Каньон:
http://www.canyon.com/_en/tools/bikefinder.html

Сергей Соловьев
8 августа 2007

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

Александр Гурьянов
8 августа 2007

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

К тому же покупатель редко выбирает автомобиль в диапазоне от 5 до 50 тысяч, этот диапазон гораздо меньше.

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

Михаил Грозовский
21 октября 2007

Коллеги, вот скриншот с американского сайта Toyota. Выбор машины по основным характеристикам: категория и цена (http://www.toyota.com/vehicles/modelselector/).

Сделано на Flash, при наведении на машинку открывается справка, кликнув на которую можно перейти к описанию машины.


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

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

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

Вот такой веб 2.0.

7 17 2 6




Недавно всплыло

Экран ожидания в поликлинике 6 Почему в переписке нельзя использовать «Доброго времени суток»? 2 Почему дизайнер должен уметь писать текст? 8 Какой движок выбрать для сайта рекламного агентства? 2