Поднятая ранее тема пышных форм не выходит у меня из головы. Вот загадка на знание жизни (NB: не на сообразительность). Представьте, что есть бизнес-система, там есть карточка контрагента, внизу карточки есть такое поле:
Что с полем не так? На HTML не смотрите, он только для иллюстрации.
После моих поздравлений Uimodeling тот же самый сайт был конкурсно обруган Ильей Бирманом. Я тоже отметился в одном из комментариев, заметив, что ругаемая форма, конечно, имеет недостатки, но они явно объясняются тем, что форма маловажная и дизайнеры Uimodeling потратили на неё не более пяти минут. На что получил ответ от Ильи – «Грамотный человек пишет без ошибок не потому, что у него слишком много времени на проверку орфографии». А мог бы, как говорится, и полоснуть.
Этот случай мне кажется показательным и вот почему. Илья, как мне кажется, уверен, что существует некая профессиональная норма, частным случаем какового мнения является убеждение, что Uimodeling этой норме не соответствует (я сознаю, что это прочтение не имплицитно содержится в ответе Ильи, поэтому заранее признаюсь, что я мог его понять неправильно). Под нормой я здесь разумею нечто соответствующее, например, половой норме: мальчики должны любить девочек и обратно, а если мальчик любит мальчика или девочка любит девочку, то они…
Рекомендую очень смешную – и поучительную – заметку [en] о том, что получилось в Wolfram|alpha из-за гордыни разработчиков. Вводится новый и, на мой взгляд, очень полезный термин – хюбристический интерфейс (хюбрис, он же гибрис, так же известный как ὕβρις – в древнегреческой культуре особый сорт дерзости, выражающийся в желании превзойти богов).
Автор ругает псевдо-естественный (попробуйте найти sise of egg) язык запросов Wolfram|alpha, мотивируя свою ругань тем, что этот интерфейс отнимает у пользователей контроль над результатом («If the product is used as a tool, its interface should be as unintelligent as possible. Stupid is predictable; predictable is learnable; learnable is usable»). Аргументация, по-моему, очень весомая.
Цвет фона Windows 3.1 и (по наследству) Windows 95, похоже, вычислялся почти сугубо арифметически. Видно, что цвет R192G192B192 выбран очень просто: от чисто чёрного отложено 20 единиц, после чего оставшийся диапазон разделен ровно на три части:
20 единиц, по-видимому, пришлось откладывать из-за того, что CRT-мониторы чудовищно передавали цвета в тенях, так что все очень темные оттенки превращались в чисто черный цвет. В начале моей рабочей карьеры я работал ретушером и до сих пор помню совет, данный мне старшим товарищем – ретушируя скан, очень полезно временно инвертировать его, чтобы увидеть дефекты в темных областях; исправив эти дефекты, картинку можно инвертировать назад.
В Windows XP наконец-то спохватились, найдя, что выбирать основной цвет интерфейса алгоритмом, не учитывая восприятия, как-то очень по-ботанически. И сделали его гораздо светлее, а равно как гораздо приятнее (на мой взгляд).
Зачем в Vista ещё раз осветлили серый я могу только гадать (у меня есть несколько теорий, но все они начисто разбиваются тем соображением, что ЖК-мониторы обладают недостатком, обратным тому, что был у CRT – они плохо передают цвета в очень светлых областях; я видел мониторы, на которых Vista-серый выцветал в белый, а XP-серый ещё нет).
Но вот зачем в него добавили красного я, кажется, понимаю вполне достоверно. На очень многих мониторах нейтрально серый отображается как холодный серый (эти мониторы уводят цвета в синий). Холодные же цвета в интерфейсе – верный способ придать этому интерфейсу мессидж «со мной сложно работать» (доказать это не могу, потому что строгого эксперимента не проводил, но во многих нестрогих экспериментах участвовал). Добавление красного в серый было надежным способом гарантировать, что почти в любой ситуации интерфейсный серый будет иметь теплый оттенок. Вот интерфейс и порозовел.
В Windows 3.1 и 95 основным фоновым цветом был сравнительно тёмный нейтрально серый с цветовыми координатами R192G192B192. Выглядел он вот так:
В Windows XP стандартный фон стал гораздо светлее, R226G226B226:
А в Windows Vista ещё немного светлее, R241G237B237:
А теперь вопрос викторины: как по вашему, почему цвет со временем становился светлее и почему в сером цвете Vista немного больше красного? Я подозреваю, что знаю оба этих ответа (во втором почти уверен), но вдруг есть какое-то другое мнение?
Наша самая заметная техническая проблема с прототипированием интерфейсов – растеризация текста. Алгоритмы растеризации текста заметно отличаются в Windows (и, соответственно, в стационарном ПО, в частности – во всех браузерах, кроме Safari) и в программах авторинга. В результате всякий раз, когда нам важны характеристики текста в интерфейсе (например, влезает строка или не влезает, насколько она хорошо читается в соотвествующем кегле) приходится работать чуть ли не наобум.
Сейчас мы это проблему никак не решаем за неимением решения. У нас есть тестовая таблица кеглей стандартных шрифтов в Windows и только. Поэтому прошу помощи зала – в чём лучше всего сейчас моделировать стандартный Windows-набор?
Корпорация Microsoft объявила, что останавливает разработку и продажу своего продукта Money. Я никогда не был пользователем Money (это бессмысленно, если живешь не в США), но узнав о кончине, сильно огорчился. Исчезает продукт, и соответственно, интерфейс, оказавший значительное, хотя и скрытое, влияние на индустрию.
Money – продукт редкий. Как правило, у коробочных продуктов бывает лишь одна из двух продуктовых бед – либо сложная предметная область, либо неподготовленная аудитория. У Money же было и то и другое.
При этом у Money не было упрощающей работу документной модели интерфейса, в которой есть документ, вокруг которого висит простой интерфейс для базовых функций и сложный для функций редких. Например, InDesign, Photoshop или тем более Word сложнее, чем Money, но в них неподготовленный пользователь может сделать хоть что-то в простой части интерфейса и удовлетвориться достигнутым. У Money же такой части интерфейса вовсе не было – чтобы добиться хоть чего-то полезного, нужно было продраться через весь интерфейс.
Всё это усугублялось неизбежным при версионных продажах ростом функциональности. Последние версии могли делать про деньги всё, кроме как эти деньги за пользователя зарабатывать.
Нужда заставила, и команда Money первая сформулировала цельную и непротиворечивую концепцию построения интерфейсов как раз для таких случаев, назвавши её Microsoft Inductive User Interface Guidelines. Я не хочу давать здесь краткой выжимки, статья, хоть и написана в далеком 2001ом году, заслуживает полного прочтения.
Конечно, все отдельные части концепции были придуманы до этого, но:
Команда Money сформулировала правила построения «индуктивных» интерфейсов и доказала их работоспособность юзабилити-тестированием. Более того, им удалось так же доказать, что свежеизобретенная модель интерфейса действует не хуже традиционной на простых задачах, в которых нужды в индуктивности нет. Этих трех причин, по-моему, вполне достаточно, чтобы относиться к дизайнерам Money с большим уважением.
Будучи недавно в Питере в гостях у друга, я наткнулся на два простейших бытовых интерфейса и удивился тому, что не встречал их раньше. Оба интерфейса связаны со входной дверью.
Первый не столь интересен — просто кнопка-диод на ручке входной двери, освещающая при нажатии замочную скважину. Ручку в сумерках нащупать проще, чем замочную скважину и в наших подъездахпарадных это работает. Не помню, как этот диод выключался, но я бы гасил его при повороте ручки, т.е. при открытии двери.
Второй бытовой интерфейс любопытнее. На внутренней стороне входной двери, на самом видном месте, я нашел несколько желтых листочков — «Хлеб», «Яйца», «Сыр», «Динамит». В ответ на мой вопрос «Зачем?» друг ответил, что как только что-то из продуктов заканчивается или он вспоминает о необходимости что-то купить, он пишет это что-то на листочке, выходя из дома эти листочки собирает себе в карман, а в магазине их из кармана достает. Знаю, у этого решения куча недостатков, но оно простое, работающее и расширяемое. Например, если я что-то из написанного на листочках не купил, придя домой, я могу снова наклеить его на дверь.
Но дело в другом. Через несколько дней я понял, что это решение мне прекрасно знакомо, более того, я им активно пользуюсь. Рисуя прототипы, я ставлю на страницах большие желтые блоки с текстом типа «Залогиненный пользователь» или «Если страница уже в избранном?». Это не список функциональности, а скорее вопросы и отдельные ситуации по конкретным блокам интерфейса, которые нужно не забыть спроектировать. Перед финализацией очередной версии я иду по страницам и собираю эти напоминалки — что-то дорисовываю, что-то оставляю на потом.
Хотя в определении юзабилити и есть слова про контекст («…продукт может быть использован определенными пользователями при определенном контексте использования для достижения определенных целей/мотивов…»), не стоит забывать, что и контексты, и цели/мотивы в разных задачах и областях часто бывают настолько похожи, что смело можно использовать один и тот же интерфейс. Нужно только замечать это сходство.
Предлагаю вашему вниманию весьма эффективный тест на профессиональную пригодность графического дизайнера. Несмотря на свою внешнюю простоту и похожесть на обычный IQ-тест, мой тест измеряет самое главное – способность дизайнера грамотно исполнять свои графические обязанности. В саму структуру теста заложена блокировка регистрации слабо относящихся к делу факторов, таких как насмотренность или знание пары ссылок на дизайнерские конкурсы. Нелишне также упомянуть, что методика теста основана на глубоком и высоконаучном психологическом базисе – теории бездеятельности, разработанной в недрах нашего научно-исследовательского отдела.
Итак, состоящий из единственного вопроса тест – что объединяет все эти объекты?
Если вы дизайнер, не идите по ссылке Продолжение, пока не дадите ответ на вопрос теста (а если вы вдобавок RSS-подписчик, не листайте ниже).
Мы (если кто-то ещё не заметил) занимаемся дизайном интерфейсов. Как правило, нас мало волнует визуальный ряд, поскольку всё доступное время тратится на факторы, которые в нашем случае важнее — количество операторских ошибок, скорость работы пользователя и т.п. — юзабилити, короче говоря.
Тем не менее, наши интерфейсы (точнее — прототипы, поскольку код мы не пишем) должны хорошо выглядеть. Иначе:
Поэтому мы заинтересованы в том, чтобы наши прототипы выглядели хорошо — но, как я уже написал выше, не хотим за это платить временем своей работы. Единственный выход в такой ситуации — поощрять практики, которые «самопроизвольно» улучшают картинку и запрещать практики, которые картинку ухудшают.
С поощрением все просто. Базовые методы, такие как сетка, пропорции и цвета, работают решительно всегда и не требуют никаких специальных трудозатрат.
С запретами сложнее. У нас долгое время была запрещена всего одна вещь — тенюшечки как оформительский элемент (с двумя исключениями — (а) тенюшечки хороши для подсветки окон (б) без тенюшечек не обойтись на Кнопках, Которые Пользователи Обязательно Должны Нажать).
Недавно, пользуясь своим правом синьора худрука, я запретил градиенты. Градиент слишком легко поставить и забыть. Картинка мигом становится глубже, после чего дизайнеру становится как бы незачем думать о композиции, адекватном моделировании плоскостей и т.п. Но глубина эта — кажущаяся, интерфейс как был убогим, так и остался. Пока результаты запрета положительные. Качество композиционных решений немного, но вполне заметно выросло — и продолжает расти.
Поэтому я мечтаю еще что-нибудь дизайнерам запретить — но не знаю, что именно. У вас есть идеи?
