x
 
Денис Чмель
17 января 2008

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

Требовалось сделать редактор вариантов продукта — возможность указать доступные варианты и отредактировать их цены и др. характеристики. Продукт может быть разных цветов, размеров и т. п. (метрики и списки их значений редактируются в другом месте, здесь только выбираются готовые). Разумеется, у продукта может быть одновременно несколько различных метрик, как на текущей картинке (я думаю, максимум до 3, больше — уже для 0,1% случаев). Для первого измерения нужно иметь возможность задать картинку каждому значению.

Для того чтобы пользователь не вводил слишком много (и даже мог не вводить ничего сверх минимума), я также решил реализовать каскадирование свойств (т. е. по умолчанию все атрибуты наследуются от характеристик самого продукта или от метрики выше уровнем, если есть). На картинке видно, что варианты Small, Medium и Medium+White имеют «индивидуальные» цены (если не видно, то по крайней мере задумывалось так, чтоб это было видно).

То что получилось, не сильно радует. 1. Очень печалит то, как выделяются наследуемые значения в Variant Attributes таблице. Чтобы пользователь не подумал, что они нередактируемые, я прилепил треугольничек рядом с каждым таким значением (в надежде, что пользователь наведет мышкой на треугольник или сам текст, и я тут же буду менять текст на editbox, а при уходе мышкой, соответственно, наоборот, если только значение не было изменено). Треугольничек совсем дурацкий и загадочный, но компактный ;) Вариант делать все все все editbox'ами я отбросил, т. к. получится еще хуже — перегружено плюс потребуется разделять их разным бэкграундом/бордером или еще как-то, что выглядит еще сложнее и непонятнее. Кроме того, было бы странно, если некоторые editbox'ы вдруг менялись бы сами по себе (в случае когда меняется значение, от которого они наследуют). Думал еще вместо треугольничка просто подчеркивать значения (пунктиром например) — но так много ссылок может выглядеть тоже некультурно: ( 2. С выбором же нужных метрик и их значений думаю вышло вполне неплохо. При любом изменении Variations таблица Variant Attributes регенерируется (с предупреждением если надо). Ранее хотел было добавлять метрики прямо в самой таблице (кнопка Add в хедере таблицы). Но со списком значений выходило не очень красиво (нехорошо вставлять все сразу, а делать много кнопок «Insert» тоже некузяво). В данном решении кажется достигнут компромис между интуитивностью, простотой реализации и отсутствием дублирования кнопок. Хотя тоже есть сомнения — не мне ли одному это выглядит простым? P. S. Пускай вас не раздражают остальные мелочи — сначала мне б определится с главным принципом.

Это для веб-магазина, поэтому таблица атрибутов должна оставаться как можно более простой с точки зрения верстки (чтобы было легко ее на лету регенерировать). Учитывая, что в ней может быть еще 2-3 колонки, сверстать ее нормально (не используя единой таблицы), кажется, не получится.



Мне кажется, логика вашего интерфейса продумана гораздо лучше, чем его внешний вид и описание.

С редактированием таблицы я бы поступил так:

Почему бы не добавлять новые значения вариаций прямо в блоке Variations?

Ну и закладки в верхней части окна как навигация — это фи.


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

Комментарии

Назар
17 января 2008

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

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

Кроме того, для каждого варианта цена может зависеть от количества.

Биленко Михаил
17 января 2008

Артем, а что можно использовать в качестве замены вкладкам в интерфейсах?

Денис Чмель
17 января 2008

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

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

За выделения жирным — спасибо, попробую.

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


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

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

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

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

2 6 5 3