/ кейс

UX-кейс номер 0. Множественный выбор

Всем привет!

Не так давно я выкидывал в Facebook кейс о том, как сделать более удобным множественный выбор объектов, не меняя при этом критично сам дизайн и расположение элементов.

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

Исходные данные

У нас есть страница для авторов дипломных работ. Здесь они могут выбрать, по каким предметам они могут выполнить дипломную работу. Предметы объединены в подгруппу, подгруппы — в группы.

Проблема номер 1 — пользователи не могут выбрать сразу много значений одновременно, и им приходится кликать на каждую в отдельности.
Проблема номер 2 — простыня из предметов занимает слишком много пространства, и их много. Около 600 предметов, около 60 подгрупп и 20 групп, что занимает около 15 экранов.
Проблема номер 3 — пользователь не видит, какие предметы он выбрал, пока не промотает всю простыню.
Проблема номер 4 — кнопка сохранения находится в самом внизу, а до неё — как уже известно — мотать и мотать.

Решение

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

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

Также предлагали интересное решение — оставить чекбоксы такими же разбросанными, но сделать выделение объектов по "карте" простым перетаскиванием мыши. Решение интересное, но в данном кейсе трудновыполнимое.

2-1

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

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

3

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

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

И это правильное решение — если от неё можно отказаться в пользу автосохранения, то зачем она нужна?

Нам остаётся только добавить индикаторы сохранения и внедрить быстрый поиск по предметам. Быстрый поиск убирает с окна все не релевантные запросы, оставляя только подходящие нам, оставляя группу и подгруппу предметов нетронутыми.

В конечном варианте интерфейс стал таким:

4

Подписывайтесь на канал о фрилансе и продуктивности в Телеграм @ilyadzenski_channel и узнайте первыми, как работать на фрилансе и быть на пике своей производительности. Если ссылка не работает — введите в поиск @ilyadzenski_channel.

comments powered by HyperComments