Pro Контраст

Давно что-то я не писал про дизайн – все про Google Analytics, да Google Analytics :) Пришла пора “исправиться”.

Задачи графического дизайна
У графического дизайна (веб-дизайна, дизайна приложений) есть две основные задачи:

  1. Передача некой информации (желательно со смыслом) тому, кто этот дизайн воспринимает.
  2. Эстетическое удовлетворение того, кто этот дизайн воспринимает.

Я утверждаю, что профессиональный юзабилити-специалист может и должен решать первую задачу и поэтому рассмотрю ее детально (aka напишу несколько заметок) на страницах блога Guicci.

Итак, прежде чем говорить про передачу информации, нужно разобраться с тем как мы ее воспринимаем и понимаем.

Далее, 3 факта (от общего к частному):

  1. Все познается в сравнении.
  2. Каждый человек воспринимает мир своеобразно, причем контрастно (”добрый”, потому что не “злой”, “злой”, потому что не “добрый”).
  3. Контраст в графическом дизайне полезен не только для привлечения внимания, но и для передачи посетителю мета-информации о том, что является важным на данной странице или в данном окне (а это позволяет быстрее вопринимать основную информацию).

Факт 1. Pro Все познается в сравнении
Встречаются два мужика.
- Я машину купил.
- А какого цвета?
- Ну представь себе цвет красивого заходящего солнца. Представил?
- Представил.
- Вот и она такая, только зеленая.

Нет ничего абсолютного: нет абсолютного вакуума, нет абсолютно черного цвета, нет абсолютно безгрешного (пусть тот, кто безгрешен первым не ставит ссылку на блог guicci), нет абсолютно идеального юзабилити. Но: юзабилити Windows лучше, чем юзабилити KDE (в контексте), юзабилити moikrug.ru лучше, чем юзабилити odnoklassniki.ru (для некоторых задач), сайт президента России выше в выдаче результатов поиска по запросу “президент”, чем сайт президента Беларуси (на yandex.ru, но не на tut.by) – “Все познается в сравнении” (c) Козьма Прутков.

Факт 2. Pro Контраст в восприятии мира
Допустим, что двум компьютерщикам показали Microsoft Surface. Один воскликнул: “круто”, а другой “какой удобный, красивый и стильный дизайн”. Второй юзверь воспринял сразу 3 аспекта нового интерфейса, а первый? :)

В психологии существует мощная теория на этот счет, называется она – теория персональных конструктов и ее автором является Джорж Келли. Есть замечательное введение в эту теорию ( с картинками).

В двух словах ее суть в том, что у каждого из нас есть набор конструктов (конструкт, это пара антонимов или противополжных, для личности, понятий, например: “белый-черный”, “теплый-холодный”, “windows-linux”, “FAR-explorer”, “командная строка – GUI”), который формирует, образно говоря, “решетку” восприятия. Например я не противопоставляю Windows & Mac OS, а кто-то противопоставляет и это сильно сказывается на действительности, например, появляются такие статьи. То есть через эти конструкты мы не только воспринимаем мир, но и “создаем” окружающую нас действительность.

Факт 3. Pro Контраст в восприятии графического дизайна
Прежде чем включать свой мозг и обрабатывать информацию, наполняя ее смыслом согласно нашим персональным конструктам, мы сначала должны куда-то посмотреть и что-то там увидеть.

Возьмем для примера веб-страницу. Куда мы будем смотреть в первую очередь сразу после ее загрузки в браузер? На что-то большое (заголовок), что-то яркое (красный цвет), что-то необычное по форме. Но что значит “большой” заголовок? Сам по себе он конечно не является большим, он большой по сравнению с чем-то, с основным текстом, например. Красный цвет – привлекает внимание здесь, но вряд ли он будет привлекать внимание посетителя здесь. Курсив привлекает внимание, но если его очень много, то вряд ли вы привлечете внимание посетителя.

Мы не только привлекаем таким образом внимание, но мы и передаем посетителю смысл: парень, этот большой текст очень важен, прочитай его. Или этот красный цвет здесь не просто так (а для того, чтобы вы прочитали, наконец, это важное замечание по поводу безопасности сервиса flickr):

red_ban.jpg.

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

По поводу последнего – весьма показательный пример: Visual Studio, а именно – подсветка синтаксиса программы.

Давайте проследим эволюцию редактора Visual Studio IDE.

1. Visual Studio 6.0 (год выпуска – 1998)
Visual Studio 6.0 Workspace

Синим выделены new, void, if и else, то есть ключевые слова C++ и операторы.

2. Visual Studio 2005 (год выпуска – 2005)
Visual Studio 2005 Workspace

Добавился коричневый цвет, которым отмечены строковые литералы (константы) – вот такой вот прогресс за 7 лет :) Хотя с другой стороны, надо же и плагинщикам дать подзаработать.

3. Visual Studio 6.0/2005 с плагином Visual Assist
Visual Studio 2005 Workspace with Visual Assist

Синим выделены не только ключевые слова C++ и операторы, но и типы. Коричневым цветом выделены функции и методы классов, а красным – макросы и значения перечислений.

Я думаю (и программисты наверняка подтвердят): редактор без подсветки синтаксиса, что программирование без хэлпа или браузер без кнопки “back” :) Убиццо…

И в заключение, сравните пожалуйста эти два сайта (попробуйте проследить, куда вы будете смотреть на страницах, в какой последовательности и какую при этом информацию вам будут сообщать; и кстати можете их не открывать, просто наведите вашу мышку на ссылки):

1) Сайт российской хостинг-компании Masterhost.
2) Сайт американской компании IXWebHosting.

Если вам пригодилась статья (да или просто понравилась), вы можете поощрить работу автора

sms.копилка

  • bobrdobr
  • memori
  • del.icio.us
  • Digg
 Понравилась заметка? Подписывайся на обновления блога!

О статье




Самые популярные статьи
[?]




Реклама



Стоит также почитать



Контактная информация



Заказ