Usability: "подсветка" ключевых точек экрана

[Glen]

Сообщение от pu4koff

У меня лично вызывает отвращение. Вспомнились сайты 90-х, когда активно применялись бегающие строки, яркие надписи и прочее новогоднее ассорти.

А, вспомнил откуда в моём подсознании всплыл этот приём с мерцанием! В Windows 95 в начале работы появлялась надпись "Click here to begin" -
http://arstechnica.com/information-t...-start-button/

Оа правда не мерцала а "плавала" (bouncing) по task bar-у, указывая стрелкой на кнопку START.

Однако MS этой надписью явно злоупотреблял - она появлялась каждый раз после загрузки. Поэтому скоро появились советы типа "как её отключить черех Реестр".

Но принцип тот же - есть некая "ключевая точка" в GUI с которой нужно начинать работу новичку....

[pu4koff]

Если нужно новичку дать отправную точку, то нужно как-то акцентировать внимание на одном элементе, а не на всех ключевых (тем более, что мерцающие label совсем не являются ключевыми в том интерфейсе). В целом, если человек не хочет изучать интерфейс, то ему не помочь никакими выделениями, мерцаниями, затемнениями. Таким людям только одну большую красную кнопку можно дать, которая сделает всё как надо.

[Glen]

Я переработал этот свой пример.
Теперь на http://files.rsdn.ru/44022/SilverlightDemo1Page.html находится прежняя версия, а на http://files.rsdn.ru/44022/SilverlightDemo2Page.html - доработанная.

Мне кажется, стало лучше...

[Utkin]

Таким людям только одну большую красную кнопку можно дать, которая сделает всё как надо.

И то чтобы по таймеру сама нажималась с дефолтными параметрами...

[pu4koff]

Сообщение от Glen

Я переработал этот свой пример.
Теперь на http://files.rsdn.ru/44022/SilverlightDemo1Page.html находится прежняя версия, а на http://files.rsdn.ru/44022/SilverlightDemo2Page.html - доработанная.

Мне кажется, стало лучше...

Стало лучше, но так же бессмысленно. Зашел человек, а ему показывают, что он должен что-то ввести и начинает искать а чего ему собственно вводить нужно, чтобы что-то произошло.
К тому же воспринимается это как возможность поиска, а на деле - банальный фильтр. Вот не найдёт пользователь Windows Forms и решит, что нет опыта разработки с использованием этой библиотеки.
Из мелких замечаний:
- skills и skill's details должны быть выровнены по высоте
- фон у skill's details не в тему
- Если ввести в поиск "C", то появляется богомерзкая горизонтальная прокрутка (а то мало нам лентяям вертикальной).
В целом же юзабилити как не было, так и нет. Контента не так много и форма вряд ли будет использоваться часто, чтобы пытаться экономить миллисекунды потенциального пользователя. Тут нужно работать над подачей информации, а не над подсветкой непонятно чего. Не думаю, что какой-то работодатель стал бы заморачиваться с поиском нужных ему навыков, тем более, что нужного там и нет.
ЗЫ. Когда берут человека с опытом работы, то больше интересуются проектами и ролью в них, а не набором технологий, которые человек слышал.

[Glen]

Вот на http://files.rsdn.ru/44022/SilverlightDemo3Page.html ещё более доработанная версия этого же приложения.

Таким образом, в процессе его разработки я прошёл через следующие шаги (можно считать это разбором процесса улучшения usability)

1. Мне нужно было КАКОЕ-НИБУДЬ приложение, как demo к моему резюме.
2. Я мог конечно сделать offline приложение, разместив его исходники на своём сайте. Но куда лучше если это приложение будет сразу же доступно моему потенциальному читателю резюме.
3. Значит, приложение должгно быть в webe. С точки зрения доступности лучше всего сделать приложение на HTML+JavaScript. НО: это ещё надо найти где-то бесплатный хостинг ASP.NET приложений...
4. Потому я решил сделать его на Silverlight, который немного знаю.
5. Сначала я хотел сделать "просто demo", "сюжет" которого взят из головы. Однако потом подумал - а почему бы не "заложить" в это demo не просто некую "высосанную из пальца" функциональность, а сделать своего рода "интерактивное резюме" СО СВОЕЙ РЕАЛЬНОЙ информацией?
6. Чтобы оно и в самом деле было ИНТЕРАКТИВНЫМ, я решил ввести дополнительно функцию "быстрого поиска" - это поле "Look in the Skills list below by:".
7. Создав поле "Look in the Skills list below by:", я задумался: а что если Пользователь его не заметит? Пользователю может быть совсем не очевидной связка "Содержимое списка Skills можно отфильтровать, введя нужное ключевое слово". А мне очень хотелось чтобы он этим полем попользовался, увидев что перед ним настоящий application, а не просто web страница.
Поэтому я поместил в это поле текст "type a keyword here..." набранный слабым шрифтом. Этот текст автоматически исчезает, как только в поле попадёт фокус.
8. Но и этого мне показалось мало! Хотелось всё-таки привлечь внимание к полю Look in the Skills list below by:" наверняка. Поэтому я применил такой трюк: сразу после захода на экран этот текст "type a keyword here..." мерцает пару секунд; затем успокаивается
9. Текст "->" в промежутке между списком Skills и полем Details вставлен чтобы подчеркнуть связку: поле Details в данный конкретный момент отражает детали того Skill-а который выбран в списке Skills.
10. Сначала (см http://files.rsdn.ru/44022/SilverlightDemo1Page.html) я НЕ выбирал ничего в списке Skills сразу после захода на экран. Однако потом пришёл к выводу - лучше сразу автоматически выбрать первую строку из Skills. Тем самы пользователю станет очевиднее связка Skills -> Details
Кроме того, первый вариант http://files.rsdn.ru/44022/SilverlightDemo1Page.html был слишком "навязчивым" в смысле мерцания.
11. Вариант http://files.rsdn.ru/44022/SilverlightDemo2Page.html был уже лучше.
Тем не менее я решил - на одном экране совмещены intro (текст "This is s demo ...") и собственно функциональность. В результате экран получился несколько "информационно перегруженным". Поэтому я разделил его на два (вызываемых один за другим) - http://files.rsdn.ru/44022/SilverlightDemo3Page.html.

[pu4koff]

Сообщение от Glen

Вот на http://files.rsdn.ru/44022/SilverlightDemo3Page.html ещё более доработанная версия этого же приложения.

Наблюдается прогресс, а не регресс и это уже хорошо.

Сообщение от Glen

7. Создав поле "Look in the Skills list below by:", я задумался: а что если Пользователь его не заметит? Пользователю может быть совсем не очевидной связка "Содержимое списка Skills можно отфильтровать, введя нужное ключевое слово". А мне очень хотелось чтобы он этим полем попользовался, увидев что перед ним настоящий application, а не просто web страница.

Для юзабилити, пожалуй, лучше было думать о том, как пользователь будет воспринимать информацию. Текущая ситуация: он обращает внимание на поле для поиска, но не знает, что писать в нём можно. Чтобы узнать что в нём можно поискать, он уже смотрит на skills. Получаем бессмыслицу. В данном случае не нужно отвлекать пользователя на это поле, пусть он сначала полистает skills, а если не найдёт нужное, то он сам захочет искать и пусть у него будет такая возможность. В данной ситуации, со стороны юзабилити, поле поиска - это костыль для плохого и неудобного списка Skills.

Сообщение от Glen

9. Текст "->" в промежутке между списком Skills и полем Details вставлен чтобы подчеркнуть связку: поле Details в данный конкретный момент отражает детали того Skill-а который выбран в списке Skills.
10. Сначала (см http://files.rsdn.ru/44022/SilverlightDemo1Page.html) я НЕ выбирал ничего в списке Skills сразу после захода на экран. Однако потом пришёл к выводу - лучше сразу автоматически выбрать первую строку из Skills. Тем самы пользователю станет очевиднее связка Skills -> Details

Стрелочка лишняя и неправильная. Она скорее ассоциируется с перемещением и ей место на кнопке переноса элемента одного списка в другой. Такие кнопки модно было делать еще в начале 2000-х, а сейчас это колхоз. Тут это вообще ни к чему. Я бы вообще ничего между этими списками не добавлял. Почтовые клиенты, например, прекрасно живут с подобной связью master-detail и никакие элементы между списками не показывают.
Так же я бы скилл никакой сразу не выбирал, а в details по центру написал неприметным шрифтом "скилл не выбран". Этого должно быть достаточно для отражения связи между этими двумя списками.

Как вариант дальнейшего развития:
1 страница/форма/окно/... как там оно в таких случаях называется?
Привет. Я такой-то такой-то. Немного обо мне. Далее.
2.
Имеющийся опыт разработки. Проекты и выполняемые функции. Если конечно это есть, а иначе на 3 сразу.
3.
Навыки программиста. Языки, технологии, базы данных с нормальным описанием скиллов, а не просто перечень аббревиатур.
4.
Навыки для коммерческой разработки в команде. Системы контроля версий, багтрекеры, ...
5.
Общежитейские навыки. Иностранные языки, водительское удостоверение, наличие авто, ...
6.
Прощание. Контакты. В качестве фичи можно влепить поиск, на случай если человек что-то не нашел нигде.

Вот как-то так. Заставлять искать в сервелате в данном случае - это заставлять человека откладывать мышь и браться за клавиатуру.
Именно в такой последовательности окна, т.к. мне видится именно такой приоритет при поиске сотрудников. Если человек не умеет C#, то уже не важно что он там JIRA вдоль и поперёк изучил и на шаге 3 кандидатура будет отсеяна. В одном же общем списке неважные работодателю скиллы только будут мешать и непонятное объединение навыков в списке skills особо не поможет, равно как и поиск.