Аdmin

«А можно сделать эту пиктограммку василькового цвета?..»

Вы заходите на замечательный, красивый сайт. Вздыхаете. Набираете в адресной строке браузера /admin, вводите admin/****** и видите перед собой несколько синих ссылок на белом фоне, сиротливо расположившихся вверху экрана.

Это Он. Администраторский Интерфейс. Поздравляем. Вы один из.

Все системы делятся на два типа: те, проектировка которых начиналась с админского интерфейса (пользовательского интерфейса), и те, в которых он не разрабатывался вообще.

Сайты же в этом плане довольно двуличные существа: интерфейса у них два — пользовательский («для всех») и админский («для своих»). Разработка как правило начинается с пользовательского интерфейса — только на том основании, что это собственно и есть «сам сайт», а до админского руки не доходят — это, дескать, не так важно. (Бывают и исключения — при разработке «регистра» первые несколько дней я потратил именно на «внутренности», ибо для меня гораздо важнее мое удобство писать, чем внешнее удобство для пользователей).

Админский интерфейс важен всегда. И если кому-то кажется, что это не так — значит этот человек никогда не проводил за ним более пяти минут, положенных на «тестирование». Вообще, надо помнить, что администраторским интерфейсом как правило не пользуется активно ни начальник, ни программист (проектировщик). То есть люди, которые могут способствовать улучшению интерфейса, не особо волнуются по этому поводу, потому что они не понимают, что это — чье-то рабочее место. (Он работает? Работает. Так чего же тебе еще надо? Вот и работай!). Работник вправе требовать улучшение условий труда. Даже если это касается каких-то формочек в браузере.

Вся корявость интерфейса произрастает именно отсюда: почти никого не волнует, удобно им пользоваться или нет — важен сам факт того, что он вообще есть.

Что с этим делать? Можно заплатить денег и нанять шамана-юзабилиста, — но на это, разумеется, никто не пойдет. Можно спросить у пользователя интерфейса «что тебе не хватает», — но классическое правило юзабилити «Don’t listen to the users» (Якоб Нильсон, конечно, много ерунды болтает, но тут он прав) все-таки работает очень хорошо: пользователь не может знать, что ему нужно: во-первых, потому что ему не с чем сравнивать (хорошие интерфейсы вообще редкость), во-вторых, даже если и есть, то сравниваться будут ощущения («плохой — хороший», «удобный — неудобный», «красивый — некрасивый»), которые вам ничем не помогут.

«Но есть способ лучше», — как любят говорить домохозяйки в рекламе. Согласно правилу 80/20, можно потратить всего 20% времени, чтобы добиться 80% результата. Другое дело — как его потратить. (Кстати, музыка навеяла — вы не читали еще «Степенное распределение, веблоги и неравенство»? Почитайте. Очень правильно все написано).

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

Итак…

1. Интерфейсом кто-то будет пользоваться. В это тяжело поверить, но это так. Представьте, что это вы. И пусть вам будет страшно. Хорошо дисциплинирует.

2. Элементами интерфейса кто-то будет пользоваться по назначению. Например, элемент textarea используется для ввода текста. И — о, сюрприз! — некоторые люди его так и используют. К сожалению, 95% программистов считают, что элементы для ввода текста — это элементы, типа «paste your text here». Но многие люди действительно печатают в текстовых полях. Даже если надо исправить всего пару букв. «Стандартное» же поле для ввода текста в админском интерфейсе выглядит так: небольшое окошечко, куда влезает не более 10 букв (если это текстовое поле) или 10 слов, если это textarea, при этом на странице куча свободного места.

Текстовые поля должны быть максимально большие. Шириной во весь экран. style="width:100%". Я вообще прописываю у себя что-то типа .frm {background-color: #f0f0f0; border: 1 solid #000000; font-family: Georgia; font-size: 11px; }. Хороший цвет фона и человеческий шрифт в поле ввода никогда не помешают.

Все это делается с помощью css, часто даже ничего не надо менять в html-коде страницы. Я, например, попросил прописать нашего админа на работе в интерфейсе несколько строчек в CSS и больше ничего - но все изменилось мгновенно и радикально. Что-то типа такого: input {font-family: Georgia; font-size: 12px; background-color: #eeeeee; border: 1 solid #000000; } select {font-family: Georgia; font-size: 12px; background-color: #eeeeee; border: 1 solid #000000; } textarea {font-family: Georgia; font-size: 12px; background-color: #eeeeee; border: 1 solid #000000; } table {border: 1 dotted #909090; font-family: Georgia; font-size: 12px;}

А вот так выглядит "обычная" форма для редактирования.

3. Админский интерфейс — вещь для узкого круга. Поэтому всегда можно сказать, какими браузерами этот круг пользуется. И не надо поддерживать html 2.0. Даже не так: поэтому всегда можно рассчитывать на один бразуер (и вы его знаете). Давайте посмотрим на это так: ставят же MS Word для работы с документами. Так почему бы не пользоваться IE для работы с админским интерфейсом?..

Затачивая интерфейс под IЕ, можно при помощи минимума усилий добиться очень многого: начиная от кнопки вставки тэгов и горячих клавиш (5 строчек кода, зато очень удобно!), заканчивая юзабельными формами и разными прочими фенечками.

Все вышесказанное вовсе не значит, что в других браузерах интерфейс не должен работать вообще.

4. Вы не показываете баннеры в админском интерфейсе. Вы же не показываете, do you? Количество загрузок и перезагрузок страницы нужно свести к минимуму. Например, для закачки картинки можно вызывать popup-окно, не перезагружая страницу.

5. Админский интерфейс — штука для Очень Важных Данных. Во-первых, элементами интерфейса иногда пользуются (смотри пункт 2). И иногда вводят туда полезную информацию. К сожалению, некоторые интерфейсы просто идеальным образом спроектированы для ее потери. Распространенная ошибка — на странице три формы, у каждой из которых своя кнопка submit. То есть при отправленни какой-то одной формы все данные, которые были введены в другие формы теряются. (Предполагается, что пользователь будет заполнять их по порядку, но пользователь всегда все делает не так). На странице должна быть одна кнопка «отправить»). Кроме того, все Важные Кнопки не должны просто так нажиматься. [ Удалить эту заметку? ]

Это все, что я вспомнил. Главное — помните. Первое правило юзабилити: не слушайте пользователей. Но заботьтесь о них.