x
 
Александр Отважный
19 ноября 2012

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

Путём размышлений была рождена идея: цена в списке кликабельна, при клике открывается поле с редактированием цены и появляются кнопки, зелёная с надписью Enter и красная с надписью Esc. Это было сделано с учётом разных пользователей: кто-то любит тыкать во всё мышью, кто-то любит хардкорно нажимать на клавиши.

Имеет ли право на жизнь такой интерфейс, и как можно сделать его ещё лучше и проще/понятнее?



Я бы поборолся за лаконичность:


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

Комментарии

Дмитрий Олляк
19 ноября 2012

Ещё бы цену сразу выделить. Энтер — сохранить цену и перейти к редактированию следующей в цены в таблице.

Дмитрий Плехов
19 ноября 2012

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

Такой способ редактирования сто лет используется на flickr.com

Егор Стремоусов
19 ноября 2012

Можно сделать ещё лаконичнее.

Посмотрите, как происходит инлайн-редактирование карточки контакта в сервисе «Контакты» в Гугле. При наведении на редактируемый текстовый элемент он заменяется полем ввода. После внесения изменений и потери фокуса полем ввода данные сохраняются автоматически. И не забудьте про индикацию процесса сохранения новых данных.

Вариант с кликом, предложенный Артёмом, можно использовать для совместимости с тач-устройствами.

Анатолий Топал
19 ноября 2012

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

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

Александр Качкаев
19 ноября 2012

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

Дима Николаев
19 ноября 2012

http://en.wikipedia.org/wiki/Interaction_design_pattern
http://patternry.com/p=inline-edit/
http://ui-patterns.com/patterns/InplaceEditor

Ну и вообще: https://www.google.com/search?q=edit in place pattern

Артём Таныгин
19 ноября 2012

Насколько вам необходимо показывать id? Это информационный мусор. Даже не артикул. На мой взгляд, колонку не нужно выводить.

Переименовывать позиции вы можете так же, как и цену.

Чтобы заменить картинку, можно также кликнуть по ней. Когда картинки нет — выводите пиктограмму или псевдоссылку «добавить изображение».

Дата создания позиции насколько важна? Нужно ли ей столько места? А дата изменения вам не важна? Я думаю, это тоже лишняя колонка.

Теперь с кнопками — «редактировать» вам больше не нужно. Попробуем избавиться от повторяемости. Решим, что не будем выводить повторяющиеся иконки, а нарисуем их один раз и зафиксируем положение на экране. Но выводить будем, только если один или несколько элементов выделены. Выделять элементы, можно кликая по чекбоксам и по строке элемента, кроме тех мест, что подчёркнуты пунктиром.

Если элементы выделены, то в самом верхнем слое появляется блок с кнопками — удалить и сделать видимой/невидимой. Их смело можно сделать крупнее.

У нас освободилось место, которое можно отдать по-настоящему важной информации — названию товара.

Такой интерфейс будет прекрасно работать и на десктопе, и на тач-устройствах.

Анатолий Буров
21 ноября 2012

Хорошо бы проверить, адекватно ли работает клавиша «Таб» с таким элементом. А ещё лучше — реализовать перемещение между полями с помощью стрелок.

Как раз для тех, кто хардкорно жмёт на клавиши. Практика показывает, что когда кто-то много работает с подобными данными, он рано или поздно становится именно таким.


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

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

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

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

9 3 4 2




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

Расскажите о клише и устойчивых выражениях 13 Несмотря на то, что между нами была договорённость о работе по ФФФ, клиент был в бешенстве 5 Что вы думаете о способе указывать цвету прозрачность в шестнадцатеричном виде вместо более традиционного RGBA? 3 Поделитесь соображениями, как работать, путешествуя 8