Содержание
- Концепция.
- Первые шаги формирования интерфейса и визуальных метафор.
- Редукция и кодирование действий.
- Пространственная организация: как действие помещают в визуальный контекст
- Цвет и статус: как цвет кодирует действие.
- Метасигналы и визуальные affordances.
- Заключение.
Концепция
В настоящее время человек проводит большую часть дня в интерфейсах, прибегая к различным действиям, таким как клики, свайпы, скроллы. Большинство не задумывается о том, что каждое действие, совершаемое человеком бесчисленное количество раз в день, является заранее спрограммированной интерпретацией и визуализацией реальных физических действий. Помимо этого, интерфейс формируется как отдельное пространство за счёт своих уникальных действий, не имеющих аналогов в реальном мире: например, репост, лайк, подписка и многие другие. При этом каждое действие имеет свой образ, который люди считывают уже не задумываясь.
Выбор темы обусловлен тем фактом, что в современной медиасреде интерфейс уже не ограничивается только утилитарной функцией, а является самостоятельной визуальной конструкцией, которая программирует пользовательское восприятие, типы реакций и алгоритмы действий. Таким образом, интерфейс следует рассматривать не как техническую надстройку, а как форму культуры, порождающую свою визуальную синтаксическую систему.
В основе исследования лежит вопрос о том, как интерфейс с помощью визуальных средств превращает человеческое действие в изображение и какие культурные и психологические причины имеет эта трансформация.
В основе визуального материала лежат графические пользовательские интерфейсы (GUI) массовых операционных систем и приложений: Windows, macOS, iOS, Android, а также веб-интерфейсы социальных сетей и сервисов (Instagram, Telegram, YouTube). Принципами отбора служили: историческая значимость (первые попытки реализации рабочего стола, корзины, папки); повседневная распространённость материала, с которым люди встречаются каждый день; показательность изобразительного материала для анализа конкретных механик интерпретации действий; контрастность для наглядного сравнения разных платформ для одного и того же действия.
Исследование строится по семиотическому принципу: от более простых к более сложным уровням организации действия в интерфейсе.
Источники были отобраны по двум принципам. Во-первых, самый основной пласт литературы отбирался из работ классиков медиатеории, анализировавших интерфейс как культурный феномен. Во-вторых, интерфейс основан на исследовании психологии человека — по этой причине были отобраны работы по теории дизайна и когнитивной психологии, чтобы анализ строился в нескольких направлениях и отражал взаимосвязь соединения медиатеории и психологии в пространстве интерфейса.
Гипотезой является тот факт, что интерфейс не просто отражает действие, а заново конструирует его. Он сворачивает сложный процесс в одно касание и убирает физическое сопротивление, навязывает свои правила. Как итог пространство для размышления, которое раньше существовало между зарождением намерения и его реализацией, исчезает. В то же время платформа обретает рычаги воздействия на пользовательское поведение.
Первые шаги формирования интерфейса и визуальных метафор
Первым шагом на пути формирования графических интерфейсов была командная строка без визуальных метафор. Действие здесь — это текст, например, чтобы удалить файл, вы должны написать слово правильно, ошибка в синтаксисе означает невыполнение действия.
Интерфейс командной строки Apple II ProDOS. 1983 год
Командная строка требует чёткости, что с одной стороны её сила: точность, скорость для экспертов, но с другой стороны и слабость, так как такой подход был недоступным для масс.
«Командная строка требует дисциплины. Она не прощает неточностей. Это интерфейс для тех, кто готов учить язык машины» Дональд Норман «Дизайн привычных вещей» 1988 год
Революционный персональный компьютер Xerox Alto, разработанный в Xerox PARC. 1973 год
«Хорошая метафора переносит знание из одной области в другую. Вы не учитесь пользоваться папкой заново — вы уже знаете, что в неё можно что-то положить» Бренда Лаурел «Дизайн взаимодействия как театр» 1986 год
Следующим этап развития является первый в истории компьютер с графическим интерфейсом — Xerox Alto 1973 года. Здесь уже формируется метафора рабочего стола, папок и мусорной корзины. Разработчики задавались вопросом: как сделать компьютер понятным секретарше, ученому, менеджеру — человеку, который не хочет изучать команды? Ответом на этот вопрос стал перенос знакомого офисного мира в цифру.
Иконки системы Xerox 8010 Star Information System. 1981 год
Интерфейс системы Xerox 8010 Star Information System. 1981 год
MacOS 1.1 Стив Джобс. 1982 год
В 1984 году появляется Macintosh System 1.0 и становится первым массовым GUI. Apple упрощает метафоры Xerox, убирая сложные детали. Более того добавляет корзину, в качестве места для удалённых файлов. Появляется возможность редактирования названия файлов простым кликом, из-за этого теперь пользователь активно взаимодействует с интерфейсом, так как это не требует ввода сложных команд.
MacOS 1.1 Стив Джобс. 1982 год
Метафора рабочего стола стала еще глубже: теперь пользователь как будто в реальности может переписать название папки ручкой на реальном столе.
Microsoft Bob 1995 год
Одной из неудавшихся метафор стала визуализация интерфейса Microsoft Bob 1995 года. Здесь метафора принимает слишком конкретный и прямой облик, из-за чего ограничивает функционал, потому что каждое действие требует своей отдельно визуализации. Более того из-за объёма изображение выглядит перегруженным и вынуждает пользователя тратить больше времени на ориентацию в пространстве интерфейса.
«Трехмерный интерфейс — это решение в поисках проблемы. Мы живем в 3D-мире, но для работы с информацией нам нужна ее двухмерная проекция, а не симуляция ходьбы по коридорам» Лев Манович
Редукция и кодирование действий
При нажатие на иконку корзины, человек совершает действие, которое не имеет никакого прямого отношения к физическому действию выброса мусора. В этот момент пользователь учавствует в акте редукции, то есть сведении многоступенчатого, телесного действия к одному плоскому изображению. И так же происходит акт кадрирования, а именно превращении этого изображения в оператор, понятный машине.
Интерфейс сохраняет только контур действия — его наиболее узнаваемую, схематичную форму.
Сравнение иконки ластика в Adobe Photoshop 2020 с реальным ластиком
Иконка «ластик» в Adobe Photoshop — это стилизованный прямоугольник похожий на ластик. Реальный ластик оставляет катышки, имеет запах, требует усилия. Виртуальный ластик не стирает — он заменяет пиксели на пиксели фона. Но иконка напоминает ластик, чтобы действие было интуитивным.
