Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
Платформа для интернет-магазина с техническим обслуживанием
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
28
Битрикс24

Битрикс24

www.bitrix24.ru

20
Отследить-посылку

Отследить-посылку

B2B-сервис трекинга посылок

16
myPreza

myPreza

mypreza.ru

13
WebResidentTeam

WebResidentTeam

webresident.agency

12
Perezvoni.com

Perezvoni.com

perezvoni.com

11
Expresso

Expresso

www.expresso.today

9
Reader

Reader

Интернет-журнал о современных технологиях.

7
ADN Digital Studio

ADN Digital Studio

adn.agency

7
Frutra

Frutra

design.frutra.ru

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк в Facebook

Какая она – удобная панель управления интернет-магазином?

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

Проверить «удобство» на самом деле очень просто – достаточно поставить себя на место своего пользователя и в буквальном смысле немного поработать. Например, подобавлять товары, не один-два, а для начала штук 20. Или предложить владельцу магазина сделать за него рассылку, получив от него огромный пакет пожеланий по содержанию письма и инструкцию, каким именно клиентам он хочет его отправить. Задач можно придумать много: написать статью в блог, опубликовать отзывы, дать доступ другому сотруднику, обработать новые заказы. Задачи простые и понятные. Если только вы не оказались тем, кому досталась не самая приятная панель управления.

Тестирование и поиск были нашим перманентным состоянием очень-очень долго. И мы периодически в него возвращаемся. Потому что второй страх разработчика после «не работает», это – «не удобно».

Версия 0 – ничего лишнего

Первая законченная версия платформы Cranbee Store встретила своих клиентов так:

b_54c220c23a3ee.jpg

Карточка товара:

b_54c220fdb194c.jpg

Список заказов:

b_54c22149d9c4f.jpg

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

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

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

Версия 1 – трехколоночный дизайн панели управления

Через полгода мы признались себе, что «не удобно». Самые большие неудобства:

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

И мы решились на очень большой рефакторинг, фактически мы все переписали:

  • все страницы стали трехколоночными (1 – фильтры и кнопки, 2 – список, 3 – карточка)
  • карточка состоит из панелей
  • у панели 2 режима: просмотр и редактирование
  • карточку можно редактировать в 3й колонке, раскрывая нужную панель
  • при выборе следующего товара по списку режим редактирования для карточки сохраняется (например, при движении по списку товаров в третьей колонке можно быстро менять цену, панель с ценой будет находиться в режиме редактирования для всех открывающихся карточек)
  • карточка может быть открыта на отдельной странице, если нужно редактировать что-то долго, или на маленьком экране планшета

b_54c221e949a38.jpg

Эти решения позволили работать с объектами магазина, совершая минимальное количество действий. Все что нужно, подгружается динамически, никаких лишних загрузок страниц.

Список товаров стал выглядеть так:

b_54c22380b723a.jpg

Категории каталога:

b_54c222c6d1589.jpg

Заказы:

b_54c222e89bd87.jpg

3 колонки оказались удобны для всех основных разделов:

b_54c223f464b96.jpg

Карточка дает всю необходимую информацию в сжатом виде.

Карточка клиента:

b_54c226fd96c9f.jpg

Редактирование в 3-й колонке:

b_54c226eb0a3be.jpg

Групповые операции над списком:

b_54c2285c0d7b1.jpg

Демо панели управления | Функциональный обзор панели

Будем рады, если вы выскажете свое мнение!

+2
Комментариев еще не оставлено
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать