x
 
Денис Петров
18.06.2007

Нашей компанией была разработана система контроля знаний Quizzz. Я высылаю скриншот приложения «Quizzz. Конструктор», которое предназначено для создания и редактирования тестов.

Тесты в системе имеют следующую структуру: каждый тест состоит из одной или более тем (ограничения на максимальное количество тем нет), а каждая тема, в свою очередь, состоит из неограниченного числа вопросов разных типов.

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

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


Из быстрых улучшений: вынести вопросы в отдельный список, показав максимум информации, включая ответы, избавиться от непонятных или ненужных иконок и добавить полнотекстовый поиск по всем рубрикам. Остальное, я уверен, подскажут уважаемые советчики.
Я, со своей стороны, готов исправить на эскизе ответы, которые мне пришлось придумать самостоятельно :-)

Поделиться
Отправить

Комментарии


18 июня 2007

Плюсик, находящийся под списком, пользователи Виндоуса найдут не сразу. Это для Мака привычны плюсики-минусики под списками. Я на Маке неоднократно сталкивался с тем, что не мог понять, как добавлять элементы в список. Плюсик в статус строке — фиг найдёшь. Убираем его в нормальное место.

Пунктам меню даём привычные и естественные названия и подчёркиваем буквы-акселераторы (это не Мак! :-)

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

Если поиск работает как Спотлайт (ищет пока печатаешь), то можно его оставить таким, как у Артёма, но если нужно нажать Enter, то должна быть и кнопка нормальная, чтобы мышкой тоже можно было тыкать. Такая кнопка заодно снимает необходимость в издевательстве в виде подписывания контрола внутри самого контрола.

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

В статус-строке должен быть size grip, если она есть, однако кажется, что нужна она была только ради кнопки-плюсика, так что теперь я бы её просто выкинул: не могу представить, какая статусная информация может там отображаться.

Вопросы хорошо бы пронумеровать. Выбранные элементы списка я бы выделял тем цветом, который выбран в настройках системы у пользователя, а не придумывал свой. У 99,99 % это дефолтный синий, и пусть. Наверное, кстати, в списке вопросов нужна прокрутка (рисовать не стал).

Табличку с парами, между которыми нужно установить соответствие, хочется упростить: не растягивать в ширину, не линовать (а разредить). Кроме того, нужно предусмотреть возможность добавления новой пары; учитывая лёгкую вебовость (только не спрашивайте, с чего я это взял) самого этого куска окна, штука, похожая на ссылку, должна вполне подойти. Редактируемый в данный момент пункт показываем наиболее естественным способом: вмятиной. Впрочем, это уже частности совсем.

И ещё: нужно избавиться от получившегося разнобоя шрифтов :-)

Нужно отметить, что основную работу, конечно, проделал Артём, а я уже к мелочам попридирался (в чём Артём и выразил уверенность в своём совете :-)

Олег Подчашинский
18 июня 2007

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

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

Подчеркивание в меню вещь не принципиальная, а системная — можно выставить отображение подчеркивания по нажатию Alt. Это в «Свойствах экрана», в «Эффектах».

Многоточие лишнее после «Удалить», т. к. пользователь после нажатия не вводит дополнительную информацию, а подтверждает выбор. Многоточия после «Добавить тест» и «Новый вопрос» возможно нужны, если предусмотрен полноценный диалог, а не ввод названия во фрейме главного окна.

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

Ссылка в окне редактирования, я считаю, совершенно недопустима. Ссылка (или гиперссылка) — это инструмент веба и гипертекста. Там она является основным средством навигации и предусматривает возможность движения вперед и назад по цепочке просматриваемых страниц. Ссылка в интерфейсе программы ведет себя совсем иначе, чем ссылка вебе. Неизвестно, что и где откроется после нажатия, т. к. нельзя посмотреть адрес назначения. То, что Микрософт загадили весь Видноус ссылками, — еще не повод ими пользоваться. Исключением можно считать нормальные ссылки с интернет-адресами и адресами электронной почты (в окне «О программе», к примеру).

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

Вместо ссылки можно добавить во фрейм с вопросом панель с кнопками добавления и удаления пары. Если тип вопроса не «пары», а «выбор», например (переключатель можно разместить в этом же фрейме), то вместо этих кнопок будут, соответственно, «Добавить вариант ответа» и «Удалить». При типе вопроса «текст» на их месте будет выбор подсветки синтаксиса, как на последнем скриншоте Дениса. На этой же панели можно расположить кнопки подтверждения редактирования и отмены внесенных изменений — могут пригодиться.

В общем и в целом, смотрите эскиз :-)


18 июня 2007

Олег, треугольнички слева замечательные, они понятнее, чем плюсики и минусики, но они из Файдера. Все древовидные списки в Виндоусе выглядят не так. Давайте соблюдать традиции операционной системы независимо от того, как мы к ним относимся, а улучшать будем там, где мы их не затрагиваем. Иначе мы обеспечим себе гору недовольных пользователей, которые «просто не понимают, что мы сделали им же лучше».

На мой взгляд, убирание кнопок в статусбар просто недопустимо. Таких программ под Виндоусом не бывает. Ориентироваться на «Айтюнс» — развлекательное приложение для Мака, — разрабатывая рабочее приложение для Виндоус… Вдобавок у вас теперь новый вопрос добавляется вообще в другом месте окна, чем сам список вопросов идёт.

Про многоточие после «Удалить» — пожалуй, согласен. Хотя я бы оставил: оно как-то успокаивает тем, что сразу не удалится, а чего-то переспросит :-) Именно в случае с кнопкой «удалить» такое.

Многоточия у остальных кнопок нужны: я думаю, они должны открывать полноценный диалог. Вы нарисовали по-другому, добавив комбобокс там, где пары. Видимо, вы предполагаете, что кнопки будут просто добавлять новую штуку пустую, а там можно будет всё вбить. Это очень классно, но я вот не понимаю тогда, а что будет, если вместо «пар» в комбобоке выбрать «число»? Уже вбитые пары исчезнут? Или чего? Вот поэтому я думаю, что уж лучше диалог, а когда уже создал вопрос, то его тип менять нельзя.

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

Про ссылки — не думаю, что они так плохи, как вы говорите. Видимо, мне придётся объяснить, почему я считаю этот элемент немножко вебовым. Его контент разный в зависимости от того, что выбрано выше, при чём этот контент может скроллиться вместе с контролами в нём. Клиентских интерфейсов таких почти не бывает: скроллятся обычно документы, но не формы. А скролящиеся формы — это очень вебово :-) К тому же, зачем пользователю проводить такую уж границу между вебом и не вебом?

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

Олег Подчашинский
19 июня 2007

Думаю, в нашем случае, кнопки в статус-баре — это просто тулбар внизу :-) Многие видновые программы позволяют перетаскивать тулбары куда угодно, в том числе в низ окна. Почему же тогда «таких программ под Виндоусом не бывает»? Иногда, если место позволяет, можно и совместить кнопки со статус-баром, сэкономив драгоценное вертикальное пространство.

Упорно повторяю, что многоточие после «Удалить» не требуется. В любой мало-мальски пристойной программе за выбором удаления следует подтверждение. Это повсеместная практика, сомнения в следующем действии вряд ли возникнуть. Увидев «Удалить» с многоточием, я могу представить следующую картину. Появляется диалоговое окно. «Добро пожаловать в увлекательный мир удаления вопроса из теста! Заботясь о пользователях, мы понимаем возникающее иногда желание удалить вопрос. Вы поможете нам сделать программу лучше, объяснив, почему вы удаляете этот вопрос». И так далее. Думаю, идея понятна. Не следует усложнять простой, понятный и знакомый элемент.

Переключатель типа вопроса. Негуманно лишать возможности изменить свойства созданного объекта, тем более такого простого, как вопрос. Работу переключателя вижу следующим образом. При первоначальном выборе типа и ввода информации для него информация расценивается как принадлежащая к выбранному типу. Далее, при переключении происходит попытка расценить информацию как принадлежащую к новому типу. Полученное преобразование показывается на экране с возможностью мгновенного стирания при явном несоответствии новому типу. После этого происходит ввод информации нового типа. Она запоминается в «ячейке» этого типа. При переключении на исходный тип информация берется из первоначальной «ячейки». Возможно, потребуются дополнительные функции преобразования информации между разными типами, которые будут вызываться через меню.

На эскизах окно несколько маленькое, поэтому при таком размере может возникнуть прокрутка фрейма с вопросом. Так как рассматривается именно тест, вряд ли вопрос будет содержать десять строчек и 8 вариантов ответа. Поэтому я предполагаю, что при достаточном размере окна (хотя бы 800 на 600) прокрутка появляться не будет, поэтому скролящейся формы просто не будет :-) К тому же, фрейм с вопросом можно расценивать как документ: много текста, белый фон, отдельная кнопка «Сохранить».

Кнопки управления парами расположены не просто рядом с парами, а на одной панели с кнопками управления изменения вопроса: «Сохранить» и «Отменить изменения». Именно поэтому им и не нужен белый фон — это отдельная панель.

Александр Червинский
19 июня 2007

Насчет вебовости: на исходных скриншотах показаны полноценные формочки Windows, сделанные с помощью средств Developer Express (http://www.devexpress.com/Products/VCL/ExQuantumGrid/) скорее всего в среде Delphi или C++ Builder, а не веб-формы.

Но насчет их возможностей Илья Бирман прав — они позволяют делать всё, что можно в вебе, и даже больше. Например, в картинках по ссылке можно видеть чекбоксы в таблице, как и у автора вопроса.

Вовка Соловьев
20 июня 2007

Для всего этого интерфейса давно придумали дизайн. Сверху кнопки, поиск. Слева дерево. Справа список, а ниже форма. Делать надо все стандартными элементами, чтобы у каждого пользователя приложение выглядело как и всё в ОС.


20 июня 2007

Я полностью поддерживаю утверждение, что интерфейс программы должен казаться максимально «родным» для операционной системы.

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

Павел П.В.
27 июня 2007

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

Кто-нибудь из высказывающихся здесь наблюдал за составителем тестов? Обычно это машинистка, набирающая текст с листа, ранее приготовленный преподавателем. А для машинистки нет ничего привычнее текстового редактора.

Не надо кнопки «Новый вопрос». Вопросы создаются простым вводом с клавиатуры. Нажали «Ввод» – значит вопрос закончен, вводите ответы в трех столбчатую таблицу.

Поиск проводится только по вопросам – поверьте, большего не нужно, т. к. расширение функции не будет использоваться.

Нумерация вопросов крайне важна – при тестировании всегда обнаруживаются ошибки (опечатки, неверные ответы и т. п.). Легче найти вопрос по номеру, чем записывать его формулировку и потом вводить ее в строке поиска.

Перемещать вопросы вверх-вниз просто – как в любом текстовом редакторе.

Почему не показаны варианты ответов? Для удобства навигации. При щелчке по заголовку вопрос раскрывается весь, хотя в настройках программы необходимо предусмотреть вариант раскрытых списков.

В статусной строке отображается до кучи важная информация.

Остается проблема навигации между темами. Которая легко решается, если держаться выше приведенной аналогии.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

1




Недавно всплыло

2 3 7 Иногда я спрашиваю о скидке для тренировки и потому что не против шанса сэкономить 1