Вебстудийные размышления

orion-nk.ru - блог о веб-разработке, веб-маркетинге и веб-всем-остальном
Ноябрь 21, 2006

Видел интересное наблюдение отличий начинающего и опытного разработчика ПО: “новички” любят улучшать и украшать пользовательский интерфейс. Хотя известно, что пользователю проще разобраться с программой, обладающей привычным интерфейсом.

Одна из основных причин такого «изобретения велосипедов» — недостаток знаний о том, как делать “правильные” интерфейсы. И чтобы упростить жизнь разработчикам, создатели операционных систем пишут так называемые “Рекомендации по разработке пользовательского интерфейса” (Human Interface Guidelines).

Вот небольшая подборка таких руководств (на английском):

Чем полезен HIG разработчику? Во первых, при разработке программы на тестирование отдельных элементов интерфейса просто нет времени. Во-вторых, разработчики интерфейсов ОС учитывают такие вещи как, обеспечение работы для пользователей с физическими ограничениями, интернационализация и т.д. Разработчикам небольших программ объективно сложно уделять таким вещам достаточно времени.

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

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

Для тех, кто не знает английский язык:

  1. Перевод Microsoft Inductive User Interface Guidelines публиковался в каком-то из номеров RSDN
  2. Есть мой частичный перевод Gnome 2 HIG.
 
  1. Позволю себе высказаться, как человек, в огород которого был отправлен уже не один камень по поводу интерфейсов… 8-)

    По поводу веб-интерфейсов - абсолютно правильно замечено, что стандартные элементы управления, использующиеся в веб - довольно скудны. И некоторые из них не позволяют применить к себе стили. К примеру - select и border или input type=file в Мозилле… В общем, примеры есть. Поэтому иногда на самом деле просто уже тошно беспомощьно глядеть на эти контролы и хочется сделать что-либо своё. Более юзабельное, чем то, что есть. Да. И при этом, зачастую забываешь что есть пользователи, которые могут не понять такой, новый для них, контрол.

    В общем, хочу сказать, что не только от незнания и неумения пользоваться тем, что есть, изобретаются велосипеды. Но, иногда, и от нежелания смотреть на то, что есть…

  2. Достаточно посмотреть на такой интересный программный продукт, как Sitecraft.ru, чтобы понять всю меру заблуждения об унификации пользовательского интерфейса!

  3. Если я не ошибаюсь, бОльшую часть рынка программ для создания сайтов занимают Macromedia (Adobe?) DreamWeaver и Microsoft FrontPage. Обе, кстати, достаточно консервативны по отношению к интерфейсу(MS больше, Macromedia меньше). С FrontPage история вообще интересная - Microsoft купила разработчиков FrontPage помимо всего прочего благодаря “офисному” интерфейсу продукт хорошо подходил к основной линейке офисных программ (http://en.wikipedia.org/wiki/Microsoft_FrontPage и http://www.compdoc.ru/grafics/frontpage/tutor/intrud.shtml).

    Теперь возьмем программу sitecraft.ru, которую я поставил себе протестировать. Насчет “заблуждений” согласен полностью. Вероятно интерфейс разрабатывал дизайнер-художник. При этом он ориентировался исключительно на собственное субъективное понятие красоты. В данном случае красота настойчиво требовала жертв.

    Далее вопросы по интерфейсу sitecraft.ru кратко без подробностей (желающие могут скачать поставить, я удалил ее у себя, так-что скриншотов не будет):

    1. Почему “свечка” закрывает окно? Чем плох стандартный для Windows “крестик”.
    2. Почему окно сворачивается при помощи круглой кнопочки, похожей на кнопку “вниз” у полосы прокрутки?
    3. Зачем стандартный диалог выбора директории заменять на свой, который не влезает в выделенное ему “окошечко”, при этом использует огромные значки папок и файлов, отличающихся от стандартных (приходится “вчитываться” в значки). Почему у текстового поля с путем убрали выпадающее по правой кнопке меню? Почему адрес в текстовом поле а не выпадающем списке?
    4. Следующая панелька вообще вводит в глубокий ступор? “Пуск” чего? Чем это отличается от “Открыть мастерскую”? Почему места под 3 кнопки, а есть только одна?

    Дальше смотреть не стал. Это как-раз ярчайший пример того, о чем я написал - разработчик делает “красивый интерфейс”, там где нужно сделать удобный. Вывод - возможно, программа найдет своего пользователя, но этот пользователь не будет массовым.

    Предлагаю сравнить интерфейс с тем-же самым BlogJet, использующим стандартные, “некрасивые” и “надоевшие” элементы интерфейса.

  4. Вчера после прочтения мной комментария Voldar-а, начавшееся устное обсуждение переросло буквально в дикие дебаты по поводу того - делать свои визуальные стили для создаваемых интерфейсов или придерживаться дефолтной виндовой темы. Не буду высказывать здесь своё мнение, так как, скорее всего, здесь начнётся не менее горячая письменная дискуссия. 8-)

    Но большая просьба, ко всем читающим этот блог, написать свои мнения (желательно с теоретическими подтверждениями этих мнений)… 8-)

  5. Весь вопрос в том, для кого делается программа или сайт. Если для дизайнеров, то подойдет принцип “со всеми наворотами”. Т.е. никаких стандартных элементов, везде трехмерная анимация и спецэффекты. В общем, по последнему слову садо-мазо извращений Флеша и Фотошопа. И побольше DHTML c AJAX.

    А если делаем для народа, все должно быть стандартным. Все элементы форм - без стилей. Все как можно проще. Потому, что народ не будет полчаса копаться, чтобы узнать, “для чего эта фишка” и “под каким углом нажимать вот эту прыгающую кнопку”. Он просто уйдет.

  6. 2 арки

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

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

    Или вот пользователи Mutt-а. Кстати очень мощный e-mail клиент. Только чтобы с ним работать, нужно сначала разобраться, документацию почитать. А большинство пользователей ох как разбираться не любят ;) .

  7. 2Voldar
    “А большинство пользователей ох как разбираться не любят”
    Да. Есть, к сожалению, такое дело. Но иногда, то, к чему привыкли люди и то, что позволит им работать эффективнее - несколько различается.

    Кстати, можно здесь вспомнить тот-же самый пример, который ты рассказывал про систему поиска в новой версии Гаранта, где человек не смог найти как воспользоваться этой системой поиска, хотя она на порядок удобнее…

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

    Собственно, к чему это я… К тому что можно подождать, когда “мамонты” вымрут. Тогда не придётся ориентироваться на их знания. Но это может занять очень долгое время. Так что может быть стоит делать чуть лучше и чуть сложнее того, к чему привыкли люди? Глупые - не поймут. Обычные и умные - разберутся легко и будут пользоваться.

  8. Большое спасибо. Именно то, что я искал и все в одном Размышления на тему:
    Пользователи читать не умеют, а если бы и умели, то не стали бы читать документацию к программе.
    При создании интерфейса необходимо заниматься плагиатом (в хорошем смысле слова) - анализировать в каком окружении большую часть времени работает пользователь и создать ему функционально-интуитивный интерфейс.
    Еще можно почиать о дизайне интерфейсов у IBM: http://www-03.ibm.com/easy/page/561

  9. Алексей, спасибо! Как-то мимо меня прошли IBM-овские гайды, надо будет почитать.

Оставить комментарий