Удобный UI для сортировки/фильтрации?

Question

[nicolausYes]

Речь пойдет об UI для предоставления пользователям мобильных устройств возможности сортировки и фильтрации некого контента в списке. Платформа значения не имеет, может быть и IOS, и Android.


Представьте, что на экране смартфона есть список с элементами, который можно:

— сортировать. По многим параметрам, например – по дате, рейтингу, алфавиту, количеству проголосовавших.

Еще у сортировки есть порядок – прямой и обратный.

— фильтровать. Например, отобразить Все, только просмотренные, только не просмотренные.


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

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

Вариант 1.

Сделать в виде выпадающих списков. Для управления порядком сортировки – отдельная кнопка. Выбранный элемент списка – параметр, по которому сейчас отсортированы и отфильтрованы данные. Иконка на кнопке сортировки отображает текущий порядок сортировки.


Например, вот так:


Достоинства:

— Пользователь видит, по какому параметру отсортированы/отфильтрованы данные на данный момент.

— Прочитав, например, По Дате, сразу понимает, что это сортировка.

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

Недостатки:

— Занимает много места. На верхнюю панель уже не поместишь, нужна либо отдельная панель, либо заменить ею верхнюю.

— Возможно, выглядит не совсем красиво.

Вариант 2.

Просто сделать 2 кнопки, одна – для сортивки, вторая – для фильтрации. Нажимаем на кнопку – появляется поп-ап/выпадающий список/диалоговое окно, которое позволяет в случае фильтрации – отфильтровать данные по нужному параметру, в случае сортировки – выбрать параметр, по которому будут сортироваться данные и порядок сортировки.

Достоинства:

— Компактно. Всего 2 кнопки, занимает мало места, можно поместить на верхнюю панель.

Недостатки:
— Пользователь не понимает по какому параметру сейчас отсортированы и отфильтрованы данные.

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

Какой UI вы бы предложили пользователям для сортировки/фильтрации в подобном случае? Не обязательно с этих двух, можно свой вариант. Возможно, есть специалисты по UI?

Answer 1

[Ethiopian]

Я бы в любом случае выбирал наиболее интуитивный вариант. Пусть даже он чуть больше места занимает.

Comments

[nicolausYes]

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

Я бы тоже выбрал самый интуитивный, если бы он был, а так, видите, не все так очевидно :)

[Ethiopian]

Ну можно попробовать еще и подписать сортировку и фильтр. Но тогда совсем много места занимать будет. Мне кажется, что «Все» — достаточно понятно, можно оставить. Либо нужно искать другое, более интуитивное решение.
Хотя, а если попробовать добавить надпись (или иконку) слева от «All»? Чтобы получилось «Filter: All». В общем, еще есть над чем подумать, но этот вариант по-любому интуитивнее, чем второй.

Answer 2

[truvor]

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

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

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

Ну и подитоживая извиняюсь за много букв и соглашаюсь в общем случае с Ethiopian — интуитивно понятно значит лучше даже если занимает много места (разумно много конечно).