Загрузка...

понедельник, 21 июля 2008 г.

Юзабилити Visual Studio под вопросом. Вносим улучшения!

Вместо эпилога. С недавних пор меня стали волновать вопросы эргономики и юзабилити графических интерфейсов (non-Web). Более-менее конкретных правил или советов по его проектированию мне найти не удалось. То, что всё-таки удалось выудить (кстати, добавляйте меня в друзья :)), содержит только общие положения по этому вопросу. В курсе, что есть несколько русских блогов по юзабилити веб-интерфейсов (небольшой список на Хабре), но они несколько не соответствуют моим ожиданиям. Я понимаю, что это целая наука, и нет универсального подхода, однако, может у вас есть что сказать по этому поводу? Прошу в комментарии.


Не имея теоритического материала, начинаешь вникать в азы юзабилити на основе конкретных реализаций. В голове появляется бзик — в каждом GUI начинаешь искать изъяны и возможные решения. Мой глаз не обошел и среду разработки Visual Studio 2005.
Проектируя интерфейс очередного диалогового окна для своего приложения, я столкнулся с вопиющим нарушением всех мыслимых правил юзабилити.

Посмотрите на скриншот:



Этот диалог служит для добавления переменной в класс (MFC). К тому же, с его помощью можно связывать переменные класса и элементы управления создаваемого интерфейса. Два этих режима переключаются при помощи чекбокса "Control variable" (см. скриншот ниже — красным выделены режимы). Понять это можно не сразу, что обусловлено неудачным расположением комбиков и полей ввода.

Учитывая, что человек читает слева-направо сверху-вниз, пользователю также трудно выявить связь между этими элементами управления, а она следующая (зеленые стрелки):



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

Я подумал, а почему бы не изменить интерфейс на такой, который был бы мне удобен? Ведь это очень просто сделать. Интересно только — это не запрещено?.. =)

Подобные диалоговые окна построены на основе HTML-страниц, изменить которые на свой вкус не составит особого труда. Достаточно найти эту страницу в дебрях файлов студии. Это не так сложно, если в арсенале есть FileMon :) Для страждущих подскажу, что путь к ресурсу следующий: "C:\Program Files\Microsoft Visual Studio 8\VC\VCWizards\CodeWiz\MFC\Variable\HTML\1033\default.htm".

В итоге я получил следующее (CSS хромает, это максимум, что мне получилось выжать):



Что изменилось?

1. Два режима разделились визуально — это особенно стало видно после добавления горизонтальной прямой и смещения чекбокса влево.
2. Поменялся порядок следования элементов на перпендикулярный — там, где раньше был вертикальный стал горизонтальный, и наоборот:



По моему измененный стиль имеет лучшую юзабельность. Хотя нет предела совершенству! Как вы считаете?


P.S. Используйте материал на свой страх и риск. Статья служит для ознакомления. Возможный причиненный вами вред лежит только на вашей совести ;)

3 коммент.:

Yuriy Volkov комментирует...

я бы, наверное, предпочел первоначальный вариант + 2 GroupBox'а как раз в тех местах, где красные рамки

AleSha комментирует...

Из-за того что хромает css - большинство пользователей предпочтут первый вариант, имхо.
Т.к. съехавшие editbox'ы смотртятся ничуть не лучше.

Сергей | codeBlogZ комментирует...

Я же никого не заставляю в срочном порядке переходить на мой вариант интерфейса. И этим мало кто будет заниматься. Меня лишь интересовал вопрос юзабилити. Я предложил свой вариант решения.

С учетом этих комментариев, я понимаю, что объективно удобного интерфейса нет. Нет, есть конечно, но это путь долгих экспериментов. Ведь где-то должна быть золотая середина ;)

Отправить комментарий | Feed



 
^

Powered by BloggerCreative Commons License