(Окончание. Начало в №25)

Наблюдение элементов управления

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

В противоположность всему сказанному кнопки в ПО сегодня только прямоугольной формы с подчеркнуто выровненными расположением и размером. Время реакции пользователя уже значительно больше, при повторном использовании он вынужден прочитывать надписи. Аналогично названия вкладок (например, вкладки "Общие", "Безопасность" и пр. в "Свойствах обозревателя" у IE) могут располагаться на подложках полукруглой или треугольной формы. Такие отличия не только выделят некоторые из них из остальных, но и дадут глазу опорные знаки для ориентировки среди этого бесконечного набора "прямоугольных" названий. Радиобоксы и чекбоксы могут быть кругами, квадратами, равносторонними треугольниками вершиной вниз (все остальные направления очень похожи на элемент списка), прямоугольниками, ромбами, шестиугольниками; могут заполняться точками, кольцами, галочками, закрашенными треугольниками, перечеркиванием по диагонали одной и двумя чертами или обвиванием спиралью. До сих пор ни в одном из перечисленных элементов интерфейса в качестве различительной характеристики не используется форма.

Фактически мы построили морфологический ящик (многомерное пространство) для формы и теперь можем видеть ошибки современного дизайна. Первая: представьте, что радиобоксы и чекбоксы принимают всевозможные формы. Как отличить радио от чек? Только круги отличаются от всех остальных фигур (отсутствием углов), и только чекбоксы работают каждый независимо от остальных, вне группы, а значит, именно их нужно было изображать круглыми. Вторая: названия вкладок даны не сбоку от демонстрируемой, а сверху. Напомним, что у нас горизонтальное направление письма, а не вертикальное, и очень малое количество названий можно расположить в один ряд. И вкладки приходится либо проматывать слева направо, чтобы узнать, какие вообще возможны, а затем каждый раз терять время при переходе от одной к другой; либо названия приходится располагать в несколько рядов, переставляя ряд, на котором находится выбранное название, в самый вниз. Пользователь при такой перестановке дезориентируется, перед ним как бы новый набор вкладок. Названия должны быть размещены с обеих сторон вкладки. Кстати, допустив полукруглую и треугольную подложки для названий, мы можем две группы вкладок расположить ближе, т.к. полукруги и треугольники всегда обращены наружу и тем сильнее выделяют пространство между группами.

Мы также видим дополнительные возможности. Вертикальные радио- и чек-группы автоматически прижимаются к краю документа (к правому на арабском, к левому - на всех остальных языках). И различимость разных групп будет выше, если боксы расположены под некоторым углом к вертикали. Этот же угол повысит различимость программ (сайты уже не будут от них отличаться после замены HTML на единый формат для машин и оконного сервера). Этот же параметр ANGLE удобно использовать, чтобы сообщить машине демонстраций способ отображения: если он равен NULL, то выпадающий список; если нулю или другому числу - то радио- или чек-группа.

Радиогруппы применяются всего двух типов: нейтральный ответ представлен крайним боксом или центральным (иначе опросник неграмотно сформулирован). В последнем случае боксы, расходящиеся от центрального, противоположны по смыслу. И хорошо бы, чтобы линия, на которой находятся боксы, претерпевала излом в центральном боксе. Этот излом всегда должен быть направлен только в одну сторону - например, вправо - иначе в череде групп одна под другой пользователю будет затруднительно рефлекторно видеть их границы. Пока излом - булевский параметр, и он может работать также как ограничитель целостности и требовать, чтобы боксы были радио, а не чек, и чтобы их количество было нечетным. Однако для повышения различимости экранов разных программ его можно сделать континуальным - и ограниченным значениями от 90 (до 180) градусов, чтобы не допускать расположения боксов, близкого к горизонтальному. Кстати, было бы неплохо договориться, чтобы положительные эмоции относительно излома всегда располагались по одну сторону, например, сверху как в термометре.

Продолжим наше наблюдение. Обычно не используется и цвет. В разноцветных вкладках даже разной формы ориентироваться-то легче, чем в одноцветных. Разные радиогруппы можно было закрасить разными цветами. Таким же образом можно было объединить тематически схожие чекбоксы. Кнопки - а не фон - нужно было делать с заливкой для повышения различимости. Могло бы показаться, что с размером не так гибло. Ничуть не бывало! Боксы всех радиогрупп одинаковой величины. Все чекбоксы одинаковой величины. Невозможность ходить клавиатурными стрелками по кнопкам в несколько рядов заставляет делать это мышью, значит объекты должны занимать больше места на экране, чтобы в них было легко попасть. Значит, меньше места для бизнес-информации. Поле ввода (не путать с одним из полей визуализированной таблицы) по мере введения текста не растет в высоту, а создает свою собственную линейку прокрутки, редактировать в нём - все равно что через амбразуру. Так пусть растет. И отображается без рамки, а о его потенциальной редактируемости будет сообщено цветом фона. Таким образом устраняется искусственное разделение на страницу a-la браузер и документ a-la Word.

Динамический аспект. Телевидение обращает наше внимание на обсуждаемый участок текста, чёркая под ним прямо по ходу чтения; операционная система привлекает внимание к месту ввода информации, мигая курсором. Этот ряд можно продолжить и размечать все объекты под фокусом ввода: радиогруппа могла бы пикать, т.е. каждый радиобокс мог бы увеличиваться-уменьшаться в размерах, прыгать вверх-вниз, бегать влево-вправо; чекбокс (который сейчас квадратный) - колебаться по и против часовой стрелки, крутиться в одну сторону, вращаться вокруг своего прежнего места, двигаться по круглой или квадратной скобке или по зигзагу из одного конца в другой и обратно или только в одном направлении (тикать, кадрить, осцилировать, скруглять, окантовывать, ползти); ячейка таблицы без курсора, т.е. нередактируемая, могла бы уширяться-ужиматься или топать, поднимая-опуская то левый, то правый бок. Мигать с небольшим и плавным изменением можно было бы и фоном (подсвечивать). Скорости этих движений могут быть равномерными, синусоидальными, ступенчатыми; скобки и зигзаги могут быть повернуты под произвольным углом; численно различаться могут скорости, амплитуды, расстояния до центров вращения; а сами движения могут комбинироваться, создавая неповторимую память о различных участках пространства. Некоторым комбинациям, возможно, стоило бы присвоить специальные названия, например, трястись как будильник можно было бы назвать будить.

Автор также полагает, что два курсора - клавиатурный и мышиный - лучше слить в один, и демонстрировать его только в текстовых и в пространственных полях (определение последних см. выше в разделе "Отображение пространственных конструкций", "КВ" №27). Фокус на элементах управления отображать некоторыми движениями по умолчанию, а по самим элементам двигаться клавиатурными стрелками. Аналогично двигаться по вершинам, отрезкам, треугольникам геометрических конструкций, движениями по умолчанию отображать те из них, которые в данный момент находятся под фокусом. А курсор использовать только для указания мест в пространстве при создании новых отрезков. Контекстное меню, ранее вызывавшееся по правой клавише мышы, перенести на клавиатурную кнопку, а элементами этого меню вызывать не только программые триггеры, но - главное - стандартные операции, предусмотренные ОС. Чтобы не программировать эти стандартные операции.

Кроме постоянных движений, существуют и врeменные, например, нажатие на кнопку её утопляет. "Тормозa" операционной системы грамотно обозначаются пересыпанием в песочных часах. Это что - единственные находки? На некоторых сайтах содержимое поля ввода автоматически исчезает при первой попытке редактирования, а задержки в канале связи обозначаются циферблатом с идущими стрелками или различными стилизациями под циферблат. С нашей точки зрения, булевское свойство для поля ввода и превращение мыши в циферблат должны быть реализованны в ОС, т.к. являются точно такими же равноправными событиями, о которых пользователь должен быть уведомлен. Установку булевского свойства у поля опять же можно отражать цветом фона. Отрывок документа, на который пользователь должен перейти по ссылке, мог бы обозначаться не только открывающим, но и закрывающим тегом (</a>), а после перехода выделяться цветом фона. Кстати, когда нет якоря - идентификатора этого отрывка, переход мог бы выполняться по порядковому номеру любой буквы отрывка внутри документа или по координатам "физический ключ подраздела, порядковый номер абзаца (количество пропускаемых символов 'новая строка'), номер буквы в абзаце" - что-то вроде 54178.16.241

Помните клип, в котором Майкл Джексон плавно превращается в волка. То, что движется, предстаёт неделимым, сохраняет самоидентичность. И с этих позиций мгновенный или дискретный (как в меню "Пуск") переход от одной картинки к другой - это недостаток. Время реакции пользователя увеличивается, он вынужден воссоздавать движение в своем воображении, восстанавливать тождественность двух объектов. Почему бы открытие второго окна для первого, например, при нажатии "Enter" на поле, содержащем внешний ключ, о чем говорилось в разделе "Отображение полей хранилища как есть", не представить как метаморфозу: поле вырастает из плоскости таблицы и превращается в другую таблицу. В трехмерном пространстве траектория вычертит конус, можно его не убирать. Две таблицы с конусом между ними можно передвигать и вращать в пространстве, отодвигать на задний план, это даст современный совершенно не оконный интерфейс... Что еще можно почерпнуть из телевизионных спецэффектов? Нам нужно набрать психологический алфавит. И зашить его в машину демонстраций. А не заниматься наработкой способов представления файловой системы в виде геометрических моделей ("Конические деревья", "Стена в перспективе"), как это делают Apple, Microsoft, XEROX PARC, MIT Media Lab и прочие. Такие способы легко раскладываются по алфавиту, предоставляемому машиной демонстраций.

Наблюдение текста

Для выделения текста нужно строить полную логическую систему. И прежде всего перечислить все свойства текста и все ситуации, с которыми пользователь сталкивается. Свойства - это цвета текста и фона, размер шрифта, жирность (булевская, а не целочисленная как в HTML, ибо человек не различает градации), наклон, тень, высота расположения линии (подчеркивание, зачеркивание, комплексное сопряжение), ее цвет, жирность и волнистость (последние два параметра - булевские). Сразу откажемся от разновидности шрифта (Times, Arial, Courier, Comic) - черезчур похоже на наклон текста. Из стилей линии выбросим все, кроме сплошной и состоящей из точек: человек бегло различает их из-за густоты краски, а вот на двойной, пунктирной, штрих-пунктирной и прочих ему приходится останавливаться и думать. Все, что нужно подсчитывать - вон; письмо шариковой ручкой подтверждает эти воззрения, хотя выбор там сделан другой - только двойная линия. Далее, исключим динамические свойства, т.е. мигание, включение-выключение жирности, наклона и т.п., ибо будут слишком сильно притягивать внимание и не дадут сосредоточиться на чтении. Вспомните мигающие баннеры.

Оставленные свойства сгруппируем в ячейки матрицы 2x2: в колонках свойства с высокой и низкой заметностью; в строках свойства, отданные для использования автору документа и отданные операционной системе. "Колончатое" деление проистекает из того факта, что наклон, тень и ударение (последнее можно рассматривать как свойство текста, но проставляемое не для всей фразы, а для одной его буквы) заметны только при внимательном чтении и годны только для расстановки акцентов, все остальные свойства бросаются в глаза при беглом пролистывании, а значит, существенно облегчают поиск и способствуют запомининанию. "Строчное" деление проистекает из того, что только группировка по соответствию и по важности должны обозначаться автором, всё остальное - ОСой. Сейчас только авторы указывают жирность текста, наклон, тень, ударение; только ОСы - размер шрифта (для заголовков разных уровней). Правда, некоторые авторы дают разные ссылки в куче гипер-ссылок различным размером шрифта, чтобы понять, где заканчивается одна и начинается другая; но мы полагаем, что эта необходимость проистекает из свалки ссылок в кучу, т.е. из неправильного планирования пространства документа, и будем ситуацию "гипер-ссылки в куче" игнорировать. А вот высоту линии, цвета текста, фона и линии определяют как авторы, так и ОСы: авторы высоту линии - в зачеркивании, ОСы - в гипер-ссылке, кроме того, ОСы переопределяют цвета текста в гипер-ссылке, а фона - в поле read-only. Жирность и волнистость линии не используются никем.

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

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

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

Пойти на означенный когнитивный диссонанс заставила другая проблема, а именно - указание неактуальности (зачеркивания) и ссылки одинаковой прямой с разницей в полбуквы по высоте. Их различение прерывало рефлекторую работу юзера и привлекало его сознание, значит, что-то приходилось отмечать еще одним свойством. Раз мы его изъяли, придется применить другие. Набор свойств, оставшихся нам для манипулирования, ограничен жирностью, стилем и волнистостью линии; все параметры булевские. Неактуальность требует одно булевское свойство, а ссылка - два: для непосещенных и посещенных страниц, для направления на тот же или иной сайт (чтобы не использовать мышку в качестве миноискателя). Причем свойство неактуальности должно отличаться от свойств ссылки больше, чем те друг от друга. Далее, неактуальность употребляется на порядки реже, чем ссылка, поэтому ее изображение нужно изменить больше, чем изображение ссылки, т.к. это меньше бросится в глаза. Отсюда предлагаем неактуальность обозначать волнистой линией; волнистая даже как бы не имеет высоты и тем еще больше отличается от подчеркивания и надчеркивания. Непосещённую ссылку - обозначать жирным подчеркиванием, посещённую - тонким; ссылку на тот же сайт - сплошной линией, на иной - состоящей из точек.

Кроме того, не до конца реализована ситуация "редактируемость ячейки таблицы", и совсем не реализованы ситуации "периодичность текста" и "ударение". Т.е. пользователю нужно с первого взгляда различить нередактируемый текст, редактируемый, уже отредактированный; причем последний может занимать не всю ячейку, а только её часть. Каждая n-ая строка может быть выделена, чтобы читать было удобнее, особенно актуально это для стихотворений. Нужно отличить знак ударения от подобного ему диакритика, причем букву с ударением нельзя обозначать кодом подобной буквы с диакретиком - изучающие язык будут все века терять время, чтобы узнать, правильно ли написано подозрительное слово; алгоритмы поиска текста должны игнорировать знак ударения так же, как знаки имени собственного и аббревиатуры (первый раздел статьи "Чего не было в кодировках, и до чего до сих пор так и не додумались", "КВ" №13), а не диагностировать ошибочное написание по spell-checker-ам. Как частично реализована редактируемость? Отображается только крайнее состояние read-only, причем серым фоном безотносительно к фону всех полей. Но вообще все три ситуации - ситуации ОСы, задействуем для всех них цвет фона, т.е. полностью изымем его у автора. Большой диапазон значений цвета позволит даже маркировать куски как более рано и более поздно отредактированные.

Дмитрий ТЮРИН,
dmitryturin.narod.ru