Оперные табы или аккордеон?

Question

[Артур Кох]

Планируется справочный интерфейс. Рассматривается два варианта на картинке ниже



Пользователь работает с деревом справки. Помимо дерева присутствует еще пара вкладок с неким функционалом.
В первом случае для переключения окон сайдбара использованы «оперные табы»(как в браузере Opera), во втором обычный аккордеон.

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

Деталь: конечный пользователь продукта будет работать с интерфейсом в браузере в полноэкранном режиме на широкоформатном мониторе в вертикальном положении.

Не существенное на скрине заблюрил.

Кто выскажется конструктивно?

Answer 1

[egorinsk]

Добавлю свои 5 копеек. То, что нарисовано слева, никуда не годится, так как там слева крошечный закрытый список, и чтобы добраться до нужного раздела, надо попасть мышью в крошечный плюсик, который без лупы не разглядеть. это же наплевательство на пользователя, не надо так делать. И ведь все равно делают.

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

Если на одной из вкладок поиск, то не надо делать ее отдельной вкладкой — поместите поле поиска тут же. зачем делать лишние движения, когда можно их не делать?

Аккордеон — плохая вещь, так как запутывает пользователей и очень неудобен.

Табы тоже неудобно (но лучше), так как пока не откроешь таб, не узнаешь, что на нем нарисовано.

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

Простое правило юзабилити — чем меньше на странице активных элементов и кнопок, тем меньше надо думать пользователю. Если вы видели комикс про «Google, Apple and your comapny app» вы поймете, о чем я.

Comments

[Артур Кох]

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

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

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

Answer 2

[Fahrenheit]

Вертикальное расположение монитора намекает на ответ. Но перед принятием окончательного решения стоит ответить еще на несколько вопросов:
1) Насколько для «пары вкладок с неким функционалом» нужно дополнительное освободившееся место?
2) Насколько часто пользователь пользуется этой «парой вкладок» по сравнению с основным справочником?
3) Какая вероятность, что, находясь на одной из «пары вкладок с неким функционалом» пользователю понадобится взглянуть в основное дерево? Вроде бы аккордион по-умолчанию показывает только одну открытую область но, думаю, можно придумать способ оставлять дерево всегда видимым, если от этого будет польза.

В общем, если ответ на вопрос №1 — «не очень» или «нет», №2 — «не часто», то я бы однозначно делал аккордион, если другие варианты — можно подумать над вклдаками в стиле Оперы

Comments

[Артур Кох]

1. Каждая вкладка так же объемиста. Помимо дерева справки есть, например, глоссарий и избранное.
2. Основным деревом пользоваться будут чаще, но учитывая специфику целевого пользователя, остальные табы будут так же очень активно использоваться.
3. Основное дерево — базовый функионал. Остальное — постепенное ускорение процесса работы с системой справки. Пользователю часто требуется одна и таже целевая информация, и большая часть работы будет происходить с помощью избранного и глоссария. В процессе переключение табов будет, но не то, чтобы на каждом шагу.

[Fahrenheit]

Получается, в обоих случаях тяжеловесное дерево нельзя скрыть. Я почему-то подумал, что оно не нужно нигде, кроме главной вкладки.
Тогда я вообще не вижу принципиальной разницы, и стоит посмотреть в сторону таких нюансов:
1) Качество реализации того и другого элемента управления на целевой платформе (я так понимаю, с нуля контрол писать не нужно?)
2) Дизайн остальных частей приложения (если картинки \ иконки почти не используются, не стоит добавлять их и сюда, и стоит остановиться на правом варианте)
3) Что используется в другом софте, к которому пользователи уже привыкли

[Артур Кох]

1. Чего сейчас и добиваюсь от Senior'a, который настаивает на первом.
2. Согласен.
3. Там ныне только основное дерево и всё.

Answer 3

[EugeneOZ]

«Во втором случае нет лишней полосы, есть аккордеон. Все просто. Но скрывать панель возможности в принципе нет.»

Как это нет? Сделайте внизу или вверху кнопку «скрыть/показать панель», добавьте там чуть-чуть JS и всё будет заползать-выползать.

Comments

[Артур Кох]

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

Answer 4

[Дмитрий]

Если информации в заголовках табов немного (не больше ширины монитора), то удобнее использовать табы — в них можно одним взглядом охватить арвткое содержание представленных материалов.
Аккордеон хорош, но есть один минус — при открытии контента само содержание разбивается на «там, вверху» и «где-то внизу», не везде это допустимо.

Answer 5

[moscow_beast]

Извините за оффтопик. У меня тут задачка не совсем понятная — сделать одну хрень, но не аккордеон.
Собственно вопрос, а аккордеон, это вообще что за хрень? Как-бы его не сделать случайно.

Comments

[Артур Кох]

jquery.page2page.ru/index.php5/%D0%90%D0%BA%D0%BA%D0%BE%D1%80%D0%B4%D0%B5%D0%BE%D0%BD