Повсеместное распространение персональных компьютеров и интернета в последние годы вызвало бурный рост рынка программного обеспечения. Переход от коробочных продуктов к дистрибутивам, доступным для скачивания через интернет, упростил распространение программ. Рынок программного обеспечения нынче насыщен (если не сказать, перенасыщен) - в каждой группе можно найти, как правило, не менее десятка конкурирующих продуктов. При таком положении дел разработчики вынуждены уделять внимание не только реализации, собственно, функционального содержимого программ, но и, в немалой степени, интерфейсу пользователя. По оценкам разработчиков, на создание удобного, логичного, красивого интерфейса затрачивается до 70 % времени и сил. Создание интерфейса тоже имеет свои особенности, закономерности и подходы. В связи с этим говорят о так называемом "юзабилити" (usability) программ и web-сайтов.

Кратко и просто юзабилити определяет Якоб Нилсен (Jakob Nielsen, www.useit.com): "Это качество работы пользователя в некоторой интерактивной среде (web-сайт, программа, и пр.)". Для того, чтобы сделать интерфейс юзабельным, обычно следуют нескольким простым правилам: последовательность (единообразие построения, назначения и реакции на действия пользователя элементов интерфейса), заимствование (использование в интерфейсе общепринятых и потому знакомых пользователю приемов), простота и полезность (минимум элементов и действий для выполнения той или иной операции), обратная связь (программа должна информировать пользователя о своем состоянии), кошелек Миллера (не более семи плюс-минус два элементов для запоминания), золотое сечение (гармоничность элементов интерфейса). Об этом в свое время речь шла в статье Юрия Герасимова "Улетный интерфейс" (www.computerra.ru/offline/1998/270/1778).

Подробно о юзабилити можно также посмотреть, например, на русскоязычном сайте www.usability.ru.

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

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

Термин "золотое сечение" наверняка слышали все. Обычно он ассоциируется с древней историей - Египтом (пирамиды), античностью (греческий Парфенон), эпохой Возрождения (живопись). Именно оттуда почерпнуты примеры использования золотого сечения, о которых упоминается, если мне не изменяет память, даже в школьных учебниках. Принято считать, что понятие о золотом сечении ввел в научный обиход Пифагор, древнегреческий философ и математик (VI в. до н.э.). Формы объектов, в основе построения которых лежит сочетание симметрии и золотого сечения, хорошо зрительно воспринимаются и создают ощущение красоты и гармонии. Пропорции золотого сечения можно найти в строении человеческого тела, в строении растений и т.д. Подробно о золотом сечении можно почитать на www.n-t.org/tp/iz/zs.htm.

Что же имеется в виду под золотым сечением? Золотое сечение - это такое пропорциональное деление отрезка на неравные части, при котором весь отрезок так относится к большей части, как сама большая часть относится к меньшей; или, другими словами, меньший отрезок так относится к большему, как больший ко всему. Итак, если с - это весь отрезок, a и b - его части, то a: b = b: c или с: b = b: а.

С золотым сечением связано имя итальянского математика Фибоначчи. Ряд чисел 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55 и т.д. известен как ряд Фибоначчи. Получил он этот ряд, размышляя на тему о том, сколько пар кроликов родится от одной пары (при помесячном рассмотрении). Каждый член ряда, начиная с третьего, равен сумме двух предыдущих, а отношение смежных чисел ряда приближается к отношению золотого сечения (21: 34 = 0,617; 34: 55 = 0,618). Не связывая этот ряд с золотым сечением, Фибоначчи открыл закономерность, к которой неизменно приходили все исследователи золотого сечения в природе, искусстве.

Ну вот, теории для рассмотрения вопроса, поставленного в названии статьи, наверное, достаточно. Теперь нужно выяснить, каким же образом применить ее в практическом плане. Для этого рассмотрим, как привести в соответствие пропорциям золотого сечения окно программы (форму) и элементы, которые оно в себе содержит. Самое первое, что приходит в голову, это задать элементам интерфейса - окнам, кнопкам и прочему - соотношение сторон 0,618. Но если для формы это не вызовет возражений, то уже к таким часто употребляемым элементом, как кнопки, это не всегда применимо. Пропорции кнопок в панели инструментов Netscape Navigator как раз соответствуют пропорции золотого сечения. Но это в панели инструментов. А как в отношении кнопок типа "OK", "Cancel"? Ну совсем это не подходит! А для таких элементов, как строки ввода или выпадающие списки, и подавно. В чем же дело? Не подходит соотношение? Оказывается, дело не в простом отношении сторон элемента, а в соответствии размеров окна и управляющих элементов числовому ряду, построенному с помощью этого соотношения (ряду Фибоначчи!).

Поскольку вид и содержимое окон определяются прежде всего логикой работы программы, то первоначальная логическая компоновка элементов должна быть выполнена до того, как предполагается "обрабатывать" окно с помощью золотого сечения.

Предположим, что мы работаем в Delphi и нам нужно привести к пропорциям золотого сечения диалоговое окно (и его элементы), в котором задаются параметры работы разрабатываемой программы. В окне расположены следующие элементы: метка (TLabel) и строка ввода (TEdit), групбокс (TGroupBox) с двумя чекбоксами (TCheckBox) и две кнопки (TButton) "OK", "Cancel". После первоначальной компоновки окна получаем вариант 1.

Поскольку значимость имеет только содержимое окна, а размеры заголовка окна могут изменяться в соответствии с настройками Windows, используем размеры клиентской части окна. Они составляют 196х166 (ширина и высота). Размеры элементов управления - практически задаваемые по умолчанию средой разработки. Их расположение и корректировка размеров сейчас нас не интересуют. Приведем к пропорции золотого сечения размеры клиентской части окна исходя из соотношения высота/ширина = 0,618. Для этого нужно или увеличить его высоту или уменьшить ширину. Поскольку уменьшать высоту некуда, то увеличим ширину, которая должна быть равна (высота/0,382)*0,618 = 268.

Итак, клиентская часть окна стала форматом 268х166. Теперь можно построить ряды Фибоначчи для двух направлений - горизонтали и вертикали в порядке убывания от ширины/высоты (возрастание нам не нужно). Каждый следующий элемент равен предыдущему, умноженному на 0,618. Для горизонтали - 268, 166, 103, 64, 40, 25, 15, 9, 6, 3, для вертикали - 166, 102, 63, 39, 24, 14, 6, 3. Видно, что они практически одинаковы (с учетом округления). Исходя из этих рядов и будем корректировать размеры и положение элементов управления в окне.

Сразу можно заметить, что строка ввода и групбокс имеют Left=6, а метка Top=6, что соответствует одному из чисел ряда. Для Label этот параметр равен 7, поэтому сдвинем метку влево на один пиксел. Для Edit Top=24, что также соответствует одному из чисел ряда. Поскольку мы увеличили ширину окна, то увеличим и ширину Edit так, чтобы расстояние его правой части отстояло на 6 пикселов от правого края окна, точнее, от внутренней стороны его рамки (ширина будет 256). Аналогично увеличим по ширине и групбокс.

Сместим кнопки к правому краю окна (6 пикселов до рамки для кнопки "Cancel"), увеличив расстояние по горизонтали между ними с 5 до 6 пикселов. Расстояние до нижней границы окна для кнопок (5 пикселов) также увеличим на единицу (до 6).

Поднимем групбокс на три пиксела, чтобы обеспечить расстояние от его нижней границы до кнопок в 6 пикселов. Чекбоксы имеют значение Left=14, а расстояние между ними - 9 пикселов, поэтому их не меняем (см. ряд).

В результате всех манипуляций получаем вариант 2.

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

При проектировании окон программы существует некоторый минимальный размер, который следует выдерживать между элементами (например, для рассмотренного случая - 6 пикселов). Чтобы облегчить работу, можно использовать настройки Delphi "Grid size X", "Grid size X" при включенном чекбоксе "Snap to grid"в окне "Environement options", вкладка "Preferences". Это не позволит сделать расстояния между элементами меньше заданных минимумов.

Нужно отметить, что приведение внешнего вида интерфейса к соотношениям золотого сечения не должно быть догмой. Злоупотреблять им не стоит, во всем нужна мера. Это желательная, но не всегда необходимая операция. Ведь, помимо золотого сечения, есть и иные правила юзабельности. Так что золотые пропорции окон не должны перекрывать "золотые пропорции" логики, последовательности и т.д. Главное - рассудительность, и тогда правила не сделают разработчика своим пленником.

Аналогичным образом к пропорциям золотого сечения можно привести и внешний вид страниц сайтов, принцип тот же самый.

Юрий А. СМАНЦЕР,
[email protected]