100 (+2)

Выпуск №4

Эссе о дизайне калькуляторов
Для авторов статей, использующих HTML-код в качестве иллюстраций
Влад Головач написал книгу

Поиск по сайтуДля желающих написать письмоПослать ссылку другуВерсия для распечатки


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



Дизайн

Эссе о дизайне калькуляторов

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

Cherry-Calculator - калькулятор, написанный на JavaScript
Но перед тем как вплотную заняться анализом интерфейса калькулятора, давайте для начала его запустим (справа представлен все-таки только скриншот калькулятора), воспользовавшись вот этой ссылкой:

Все, наигрались с калькулятором? Прекрасно! Теперь давайте перейдем к анализу дизайнерских решений, которые я применил при создании калькулятора, и попробуем разобраться по шагам.

* * *

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

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

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

Как видите, каждая из групп обладает своей четко определенной задачей, и по этой причине я их объединил, воспользовавшись для этого разными цветами кнопок. Данный прием мы назовем группировкой - объединение связанных по функциям команд. Если Вы внимательно присмотритесь к составленному списку, то можете обнаружить, что первые два пункта и последние два пункта тоже образуют отдельные подгруппы, хотя и не столь явно выраженные. По этой причине я, чтобы подчеркнуть это обстоятельство, увеличил расстояние между этими подгруппами кнопок. Кроме того, для первой подгруппы кнопок я воспользовался "холодными" цветами, а для второй "теплыми". Все, что я только что описал, на самом деле, происходит в основном в подсознании, формируя в сознании уже готовое ощущение от дизайна. Упрощенно говоря, нравится - не нравится, со всеми градациями.

Продолжим путешествие по калькулятору и обратимся к группе цифровых клавиш. Обратите внимание на то, каким образом они расположены, а именно - старшие цифры вверху, а младшие внизу. Теперь взгляните на цифровые клавиши, расположенные в правой части вашей собственной клавиатуры. Как видите расположение клавиш полностью повторяет расположение на калькуляторе. А теперь, если у Вас есть поблизости кнопочный телефон, то посмотрите и на него - там Вы увидите обратное расположение клавиш - сверху младшие, а снизу старшие. Так уж сложилось исторически. Теперь вопрос - какой способ выбрать? И правильным будет ответ - вариант на калькуляторе! Причем причиной этого будет не только аналогичное расположение клавиш на "реальном" калькуляторе, но и куда более важный довод - их расположение совпадает с компоновкой цифровых клавиш. Почему это важно? А потому, что пользователю не нужно будет переучиваться, если он захочет использовать клавиатурный ввод (если Вы читаете эту статью, используя Internet Explorer, то можете попробовать использовать клавиатурный ввод - калькулятор корректно его обрабатывает). Сделаем второй важный вывод - ранее наработанные навыки использовать предпочтительнее, чем учить пользователя заново. Этот прием минимизирует количество совершаемых при вводе ошибок и не заставляет пользователя лишний раз задумываться.

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

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

Ну и, наконец, последний использованный прием - элегантный внешний вид калькулятора. Вы скажете - а разве это какой-то особенный прием? И я отвечу - да, т.к. красивыми вещами пользоваться приятнее, и как следствие - человек меньше устает и повышается вероятность того, что в следующий раз он с большим удовольствием воспользуется этой вещью. Но только не забывайте о том, что во всем нужен баланс, и если калькулятор будет умопомрачительно красив, но пользоваться им будет неудобно, то... им и не будут пользоваться. Равно как и обратная ситуация - супермощный калькулятор, вот только без инструкции, непонятно - какиe кнопки нажимать.

* * *

А теперь у меня ко всем вопрос-предложение! Есть ли желающие создать свои собственные скины для вышеописанного калькулятора? Отвечать можно, используя форму голосования внизу выпуска на первой странице. Голосование будет длиться неделю или две. Если по истечении срока голосования наберется больше 5-7 желающих этим заняться, то в следующем выпуске я опишу спецификацию по созданию скинов, а по окончании конкурса подведу итоги и выставлю на сайте лучшие работы. Ну как, устроим конкурс?



Утилиты

Для авторов статей, использующих HTML-код в качестве иллюстраций

Code2HTML - утилита преобразования HTML-кода в вид, пригодный для печати
Если Вы хоть раз писали статьи про HTML, и Вам приходилось вставлять в нее примеры HTML- кода, то Вы знаете, что просто так код вставить невозможно - предварительно необходимо преобразовать его:

    " - "
    < - &lt;
    > - &gt;
    & - &amp;

А также обработать переносы строк, добавив после каждой из них тег <br>. Я написал эту небольшую утилитку для себя, но, возможно, она пригодится Вам. Все, что она делает, - это преобразует HTML-код по правилам, изложенным выше, и более ничего. К примеру, Вам нужно привести в качестве иллюстрации статьи следующий HTML-код:

<html>
<head>
<title>Пример простой web-странички</title>
</head>
<body>
<p color="#ff0000">Это самая простая web-страничка</p>
</body>
</html>

После обработки этого кода вышеупомянутой утилитой мы получим уже пригодный для печати вариант, в котором все спецсимволы будут заменены своими &-эквивалентами:

&lt;html&gt;<br>
&lt;head&gt;<br>
&lt;title&gt;Пример простой web-странички&lt;/title&gt;<br>
&lt;/head&gt;<br>
&lt;body&gt;<br>
&lt;p color=&quot;#ff0000&quot;&gt;Это самая простая web-страничка&lt;/p&gt;<br>
&lt;/body&gt;<br>
&lt;/html&gt;

Так что если она Вам нужна, то Вы можете скачать ее, щелкнув вот на этой ссылке:

Для работы программы требуется библиотека MFC42.dll. Если у Вас стоит Win98 или более поздние версии, то эта библиотека у Вас уже есть и находится в папке windows\system32. Если у Вас ее все же не оказалось, то данную библиотеку можно найти и скачать, воспользовавшись поисковым сервером FileSearch.



Учимся

Влад Головач написал книгу

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

Обложка книги "Дизайн пользовательского интерфейса"
Вы наверняка узнали, откуда взята эта цитата? Ну конечно же - из великолепной книги Николая Носова "Незнайка на Луне". Но я привел этот фрагмент лишь оттого, что он взят в качестве эпиграфа к книге, которая называется "Дизайн пользовательского интерфейса". И написал ее, как я уже успел сообщить в заголовке, - Влад Головач. Кто он такой? Если Вы еще не в курсе, то это один из настоящих специалистов по юзабилити в Рунете. Он профессионально занимается исследованием интерфейсов (не только web-сайтов, но и в более широком смысле - интерфейсов программ). Более подробно узнать о нем Вы сможете, посетив его страничку "Дизайн для думающих".

И вот он написал книгу, которая замечательна не только тем, что действительно хорошо и умно написана, но также и тем, что, по сути, это первая русская книга, посвященная исследованию интерфейсов. И, что уж совсем замечательно, - эта книга была безвозмездно (т.е. даром :) выложена в интернет для свободного скачивания. Пока она доступна только в PDF-формате, но я думаю, что это не должно составить большой проблемы. В будущем автор сайта обещал выложить также и HTML-версию книги, но на момент написания этой заметки ее еще не было в сети. А вот и адрес сайта, откуда можно скачать книжку:

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

Приятного Вам чтения и побольше умных мыслей!


Предыдущий выпускНаверхСледующий выпуск


Свои мнения, пожелания и вопросы по выпускам Вы можете присылать по адресу mike@cherry-design.ru.
Я оставляю за собой право цитировать письма, пришедшие по вышеуказанному адресу.
Copyright © 2001-2008 Михаил Мельников. Перепечатка без разрешения запрещена.