Самый изящный UI для категоризации объектов?
В вашем тесте на кипарис есть несколько строк, в которые вы добавили неправильные кавычки, например, cy.contains(‘まだ視聴履歴ありません’), вы должны использовать одинарные кавычки '' в кипарисе. Я видел проблему с лицом Cypress при использовании следующего символа ‘. Следующее, я предполагаю, что вы тестируете навигационные вкладки. Тогда я могу спросить вас, почему вам нужно повторно нажимать эту вкладку cy.contains('会員').click()? Вы по-прежнему находитесь на этой странице, поэтому можете получить доступ к другой вкладке навигации без этого дополнительного щелчка. Я удалил эти клики и реорганизовал тест, как показано ниже, он успешно проходит здесь, см. Скриншот ниже; При нажатии на эту ブックマーク навигационную вкладку, например cy.contains('ブックマーク').click(), вы пропустили некоторые symbols and space в конце вашего утверждения / содержит шаг, как этот 。, то же самое для этой вкладки 視聴履歴'. обновлен для этих этапов тестирования здесь.
describe('Check kaiinPageTransit', function() {
context('Navigation', () => {
beforeEach(() => {
cy.visit('https://student.try-it.jp/#/')
cy.contains('ログイン').click()
cy.get('.is-mail > input').type('chanya.deshani@gmail.com')
cy.get('.is-key > input').type('12345678')
cy.get('.el-button').click()
cy.get('.bl-mystatus-profile-name').contains('さん', { timeout: 10000 } )
})
it.only('check kaiinPageTransit', () => {
//学習状況
cy.contains('会員').click()
cy.contains('学習状況').click()
cy.contains('最近よく学習している科目')
//ブックマーク
cy.contains('ブックマーク').click()
cy.get('.bl-container>p').invoke('text')
.then((text) => {
const txt = text;
expect(txt).to.equal('まだブックマークがありません。');
})
//視聴履歴
cy.contains('視聴履歴').click()
cy.get('.bl-container>p').invoke('text')
.then((text) => {
const txt = text;
expect(txt).to.equal('まだ視聴履歴がありません。');
})
})
})
})
6 ответов
Это кажется, что у Вас есть две задачи: Задача 1 Категоризируйте Объекты, где для серии объектов, пользователь присваивает каждому категорию (значение) на каждом из нескольких размеров (атрибуты). Задача 2: Создайте и Измените Размер и Категории.
За пределами средств моделирования данных, объектно-ориентированных программистов и разработчиков базы данных, идея размеров и категорий является очень трудным понятием для схватывания. Вы должны быть подготовлены к пользователям, не понимающим различие между категориями и размерами. Однако пользователи обычно будут понимать таблицы, где каждый столбец является размером (который включает несколько категорий), и каждая строка является объектом. Как можно больше, работайте с таблицами.
Первый ключевой вопрос состоит в том, чтобы выяснить посредством пользовательского исследования, Задача 1 и 2 градуса, интегрируются или отдельные.
Если задачи интегрируются с пользователями, часто переключающимися жидко от одного до другого без очень мысли, то один дизайн UI должен иметь объекты таблицей измерений, но предоставить пустой столбец (или кнопка “Insert”), чтобы позволить пользователю добавлять размер. Заголовок столбца имеет имя размера, которое может отредактировать пользователь. Под заголовком пространство, перечисляющее категории того размера. Каждое название категории доступно для редактирования и существует пустая строка (или кнопка Insert) для добавления новой категории. Ниже этого объекты категоризировать, каждый с выпадающим списком в каждом столбце для размера.
В тестировании удобства пользования не упустите пользователей, пытающихся установить категорию объекта путем нажатия на категорию в списке категории, вместо того, чтобы выбрать из выпадающего списка. Составьте список категории, кажутся визуально отдельными для предотвращения этого.
Можно хотеть, чтобы кнопка скрылась/показала списки категории, поскольку это может занять много места (даже когда с помощью полос прокрутки). Даже если Задача 1 и 2 тесно интегрируется, я думаю, что Вы найдете, что пользователи могут хотеть избавиться от списков категории иногда.
Если Вы находите, что Задача 1 и 2 является отдельной, редко будучи сделанным вместе (например, пользователи обычно настраивают свои размеры, затем категоризируют набор объектов), то Вы более обеспечены с отдельным окном (или страница) для каждой задачи, хотя должно быть легко перейти назад и вперед между ними. Например, в то время как пользователи могут обычно настраивать свои размеры заранее затем, редко изменяют их, иногда пользователь будет, понял, что каждому нужна новая категория для размера при категоризации необычного объекта, таким образом, Вы обеспечиваете пункт меню “Add category”, который берет пользователя к окну Manage Categories с новой категорией, вставленной для текущего размера, ждущего пользователя для обеспечения имени.
Окно для Задачи 1 совпадает с прежде: таблица объектов со столбцом выпадающих списков для каждого размера, но исключают списки категории, редактирование имен размера и возможность добавить новый размер. Это является самым эффективным, если пользователь должен просканировать для категоризации необходимости объектов или перекатегоризации, или если обычно пользователь должен сравнить один объект с некоторыми другими (например, чтобы решить, как категоризировать объект). Однако, если задача пользователя действительно ограничена просто категоризацией объекта по одному на основе внешней информации (например, записав информацию из бумаги), то рассмотрите форму, а не таблицу, показав массив полей списков, один для каждого атрибута. Одним щелчком каждого поля списка для установки каждой категории это быстрее, чем использование выпадающих списков.
Окно для Задачи 2 могло быть похожим на часть заголовка для задачи один. Это согласовывается с таблицей, используемой для Задачи 1, и позволяет пользователям видеть категории для нескольких размеров сразу, помогая им выяснить лучшую схему классификации (например, помочь им найти, где по существу та же категория появляется в двух различных размерах). Если пространство является проблемой, однако, то считайте список размеров каждым показом списка категорий в отношении основной детали.
Окончательным в пользовательском питании и гибкости для Задачи 2 является древовидное управление. Корневой уровень дерева включает размеры, и следующий шаг в иерархии включает категории в каждом размере. Основное преимущество состоит в том, что это поддерживает размеры, являющиеся зависящим от категорий. Например, можно иметь размер Типа Механизма, который включает категории как Автомобиль, Лодка, Плоскость, и т.д. Для категории Car можно затем иметь размер Основного шрифта с категориями, которые только относятся к той категории (Автомобиль-купе, Хэтчбек, и т.д.). Зависимые размеры представлены в дереве, отклоняется категория. Результатом являются древовидные альтернативы между размерами и категориями с каждым уровнем в.
Важно визуально отличить категории от размеров, возможно, различными значками и возможно другим шрифтом также - что-то, чтобы сказать пользователям, что переменные шаги в иерархии качественно отличаются (например, при создании Размера затем необходимо создать по крайней мере две категории). Даже затем обеспечьте средство легкого восстановления, если пользователи путают размеры с категориями (например, позвольте им перемещать набор “размеров” к под другим размером, преобразовав первого в категории).
Я хочу подчеркнуть снова, что люди трудности имеют с абстракциями как размеры и категории. Даже когда они действительно понимают это, люди обычно испытывают большие затруднения при создании достойных размеров и категорий самостоятельно. Существуют сложные взаимодействия, которые могут закончиться, который необходимо продумать (например, что, оказывается, возражает классификации, когда категория перемещена в новый размер?). Если Вы ожидаете, что каждый пользователь действительно создаст их собственные новые размеры, то можно хотеть серьезно заново продумать целый подход. Это - по сути сложная задача.
Пользователь делает намного лучше, если уже существует соответствующая многомерная схема в культуре, организации или домене (таком как, мы имеем для автомобилей). Конечно, если уже существует схема, то можно исследовать ее и установить ее как набор по умолчанию размеров в продукте. Задача 2 только должна поддерживаться, чтобы позволить опытным пользователям подстраивать его.
Я предложил бы систему меток, подобную той здесь на stackoverflow. Позвольте им отмечать изображения, затем просматривать тегом или комбинацией вкладок. При просматривании страницы покажите миниатюры изображений и тегов для того изображения ниже его.
Править: На основе Ваших разъяснений у Вас могли быть типы тегов. Когда пользователь определяет их собственный тег, они должны были бы указать который тип он derivies от. Имея это в виду, Вы должны были бы ограничить теги только одним из того типа.
TagType { Color, Seats, BodyType, Seats }
TabSubType { Color-Red, Color-Blue, Color-Green, Seats-2, Seats-4, ... }
Когда пользователь хочет добавить тег, изображение дает им выпадающее с TagType. Ниже этого дают затем другому выпадающему с TabSubTypes. Дайте им опцию "Определить Новый", который заставит текстовое поле появляться, где они могут ввести в новом типе.
Я также добавил бы эти опции к контекстному меню, таким образом, пользователи могут просмотреть теги в древовидном меню стиля. Вы могли также захватить нажатие клавиши, даже когда изображение фокусируется, ищите TagType, и TagSubType называют и представляют меню опций выбрать из. Если никакие соответствия не найдены, предлагают опцию "Click to add new tag".
Вы могли использовать теги: Сделайте, чтобы пользователь отметил каждое изображение, затем показал ряд миниатюр изображения, отсортированных по тегам.
Возможно, более усовершенствованный, чем теги был бы ряд пользовательских атрибутов. Например, вместо того, чтобы отметить изображение с "красным", отметьте его с атрибутом "color=red".
Фасетная Классификация является способом категоризировать вещи, который не привлекает внимание, которого она заслуживает. Это позволяет Вам определять взаимоисключающие категории и обеспечивать значение для каждого объекта содержания для каждой категории. Например, Вы могли классифицировать вина регионом, сортовым, старинным и цена, и пользователь проведет их поиск путем выбора одного или нескольких значений в одной или нескольких категориях. Например, “Французские или итальянские красные менее чем 40$”. Принятие Вас имеет данные категории под рукой, это часто - самая мощная классификация и поисковая доступная техника, лучше, чем попытка вместить все в единственную иерархию или доверие тегам.
Для реализации этого на бэкенде сделайте таблицы для каждой категории и заполните их отличными значениями. Затем сделайте таблицу, что имеет внешний ключ к каждой таблице категории, вместе с полем, которое содержит содержание. Это подобно таблице “факта” в размерном проектировании баз данных.
Чтобы понять, как это может работы в UI, смотрите на Facetmap. Я не могу ручаться за их продукт, потому что я не использовал его, но я реализовал что-то подобное для своих собственных приложений с хорошими результатами.
Снова, идеи позади фасетной классификации заслуживают большего внимания, и я знаю, что не воздаю им должное здесь. Для интересной обработки предмета Clay Shirky слушайте "Онтологию, Переоценен":
Я могу неправильно понимать Вас вопрос, но не, что очень похожий, если не точно, что теги для (как в переполнении стека и Gmail). Или Вы ищете что-то более определенное, чем это?
Хорошо, ну, в общем, я склонен продолжать об этом слишком много, но Метки являются просто примером того, что можно сделать с тройным графиком, например, использующий RDF. [Вставьте Ссылку На Википедию]. Теперь я знаю, что Вы сказали, что теги недостаточно, на основе требований для вложения, но нет никакой причины, Вы не можете далее "отметить теги" как, дети друг друга.
Car|Tagged_with|Red
Red|Is_child_of|Colours
Таким образом, Ваши данные остаются ультрагибкими, и действительно деление между тем, что является данными, и что является метаданными, становится размытым.