Дизайн в эпоху иконок приложений

Иконка неожиданно оказалась в центре внимания новой науки о взаимодействии человека и компьютера.

Прошлой ночью я листал свой iPhone во время рекламы. У меня не было никакой особой цели; это было рассеянное машинальное передвижение между двумя экранами из многих, которые постоянно потихоньку приглашают меня к взаимодействию. Неосознанно я ткнул в пляжный неоновый оттенок иконки «Instagram».

Такое поведение пользователя и является целью. Команда дизайнеров «Instagram» подтверждает: что-то такое простое, как значок, может влиять на реакцию и активность пользователей. Это один из последних и наиболее ярких примеров значительных изменений в мобильном дизайне. Для такого крошечного, казалось бы, несущественного и в значительной степени поверхностного дизайна ставки на удивление высоки: чем дольше происходит распознавание значка — какой бы маленькой ни была заминка — тем меньше его побудительная сила для пользователя.

Эта короткая пауза между разблокировкой телефона и решением «что делать?». Сейчас это самая важная миллисекунда в интерактивном дизайне.Новое исследование помогает объяснить, почему — и предлагает ключ к улучшению пользовательских навыков.

Эпоха иконок

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

Все сошлись на том, что максимумом являются две секунды. После этого нашей кратковременной памяти начинает не хватать, и мы запутываемся в том, что нам нужно, или даже забываем, что делали. Вам знакомо это чувство, когда заходите в комнату и не знаете, зачем пришли? Это неприятно. «Чем дольше контент будет храниться в кратковременной памяти, тем больше шансов забыть или ошибиться», — написал исследователь ЭВМ Роберт Миллер в своей знаменитой статье 1968 года о психологии времени задержки.

Пиктограммы заняли естественную нишу в «Силиконовой Долине» в 1970-х годах, а инженеры разработали первые версии графических пользовательских интерфейсов.

Миллер изложил некоторые базовые аспекты времени отклика, которые до сих пор все еще используются. Например, пользователи могут удерживать ход мысли, если время ответа меньше одной секунды. Якоб Нильсен также писал, что они воспримут это как нечто спонтанное. Когда дело доходит до вашего телефона, время отклика — это взаимосвязь между вашими намерениями — запостить что-нибудь в «Instagram» — и разблокировкой телефона, пролистыванием десятка значков, чтобы найти правильный и ожиданием загрузки. Уменьшение количества времени, которое необходимо вам для распознавания логотипа — это только малая часть того, на что могут повлиять дизайнеры.

Примерно в то же время, когда Миллер писал свою статью, обычные графические дизайнеры работали над новой задачей: поиском универсальных ориентиров. Мир глобализировался — стремительным ростом траснконтинентальных авиаперевозок и даже культурными событиями, такими, как Олимпиада. Города и страны оказались вынуждены общаться с намного большим количеством визитеров, которые не могут разговаривать на местном языке. Решение? Пиктограммы — универсальный язык значков, который может заменить обычные слова иконками. Первоначально изобретенная в довоенный период таким дизайнером, как Отто Нейрат, идея универсального языка картинок стала снова актуальна во все более охватываемом глобализацией мире.

Пиктограммы заняли естественную нишу в «Силиконовой Долине» в 1970-х годах, а инженеры разработали первые версии графических пользовательских интерфейсов.

Они поймали блестящую идею: вместо того, чтобы использовать для общения текст, почему бы не показывать пользователям ненастоящий, метафорический «рабочий стол», где приложения и действия были бы представлены иконками вместо слов? Таким образом любой, кто видел рабочий стол в реальной жизни, мог сразу же понять, как пользоваться цифровой версией. В 1973 году у «Xerox Alto» появился первый графический пользовательский интерфейс с файловыми папками, корзиной для мусора, дисками и другими пиктограммами.

Это тот же базовый визуальный язык, который мы используем сегодня, сглаженные или твердые скошенные углы и неоновый градиент, один или два.

МРТ, отслеживание взгляда и даже больше

За те 50 лет, что прошли с тех пор, как мы начали взаимодействовать с компьютерами, произошли большие перемены. Сегодня мы говорим о миллисекундах, а не секундах.

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

Больше, чем когда-либо, интерактивный дизайн — это наука об интервалах, миллисекундных беглых взглядах и балансе когнитивной нагрузки. И неудивительно, что исследователи чаще всего изучают, как мы используем свои экраны, в рамках науки о мозге. Возьмем новые логотип и иконку «Instagram», разработать которые компания поручила Йену Спелтеру. Дизайн был сформирован с помощью сотрудников компании, которых попросили нарисовать значок по памяти. «Это дало нам представление о том, от чего следует избавиться», — сказал Спелтер Клиффу Гуангу. Кроме того, команда провела обширное качественное тестирование, сосредоточившись на том, насколько хорошо пользователи могут распознать новый дизайн.

Есть некоторые научные данные в поддержку такого подхода. В своей статье «Графика и семантика: взаимосвязь того, что увидят, и дизайна иконок» Сара Ишервуд опровергает идею, что иконку или логотип легче распознать, если в них есть конкретная визуальная отсылка к их функции. После того, как люди привыкают к абстрактным значкам, они начинают понимать их так же хорошо. Что более важно? Наше узнавание.

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

Если узнаваемость настолько же важна, как использование таких элементов интерфейса, как иконки, то это объясняет, почему пользователи расстраиваются, когда они меняются. Дизайнерская команда «Uber» убедилась в этом на собственном опыте весной, когда капитальное изменение дизайна вызвало шок и ужас у тысяч пользователей, по-видимому, сильно привязанных к прежней иконке «Uber». Но, по словам «Uber», количество подписанных номеров в долгосрочной перспективе не пострадало: это просто сущность пользователей, которые семантически связывают новый дизайн со старой функцией, это своего рода «мышечная память», которой может понадобиться несколько недель, чтобы перестроиться.

То же самое может быть верно и для новой иконки «Instagram». «Как видно по возмущению, которое поднялось после смены значка „Instagram“, у людей глубокая личная связь со светящимся квадратикам в их телефонах», — говорит датский дизайнер Майкл Фларап, который руководит сайтом по дизайну иконок.

Но существуют ли специфические элементы дизайна, которые могут повысить пользовательскую активность? Конечно, да. В ходе недавнего исследования, проведенного учеными из Мичиганского университета, было проверено, на какой тип иконографии водители среагируют быстрее. Используя отслеживание взгляда, они протестировали, как дорожные знаки с различным дизайном — такие, как «дети, играющие на улице» или «сезон дождей» — были истолкованы водителями. Около щита водители реагировали гораздо быстрее на иконографию, изображающую динамичное движение, а не статичные фигуры, что свидетельствует о том, что знаки, которые выглядят так, будто они движутся, как правило, «подготавливают к действию».

Больше, чем когда-либо, интерактивный дизайн — это наука об интервалах, миллисекундных беглых взглядах и балансе когнитивной нагрузки.

Вы можете найти динамические элементы по всему рабочему столу; хороший пример — iOS-приложения с погодой, так как они все вынуждены конкурировать за внимание со стороны Apple. Чтобы найти динамическую иконографию, можно не смотреть дальше «DarkSky», одного из самых популярных приложений с погодой в «AppStore». Локализованное приложение с погодой использует молнию, раскалывающую пополам небо, что на самом деле похоже на движение. (Создатели «DarkSky», в свою очередь, говорят, что этот эффект стал результатом «осуществления миллиона улучшений, пока все не стало простым и не уродливым»). По сравнению со статичным облаком и солнцем приложения с погодой в iOS, это выглядит свежо и актуально — почти угрожающе.

Начало науки о дизайне

Интересно, что эти исследования — всего лишь верхушка айсберга, когда дело доходит до того, чтобы понять, как человеческий мозг взаимодействует с интерфейсами. Поскольку все больше дизайнеров используют научные методы, мы видим, что происходит очень серьезное исследование дизайна.

В 2014 году Ассоциация информатики и технологий опубликовала статью «Как мозг обрабатывает иконки? Нейровизуальные показатели четырех типов визуальных стимулов, используемых в информационных системах». В ней трое исследователей из Техасского университета описывают, как они планировали сделать открытие в чем-то с виду очень простом: что легче анализировать человеческому мозгу — образы или слова?

Используя МРТ, они смогли пронаблюдать, как мозги испытуемых сталкиваются с иконографией, и увидеть, какие участки серого вещества были задействованы для работы. Как ни странно, оказалось, что понимание изображения или значка требует использования гораздо больших ресурсов вашего мозга, чем просто истолкование слова. Это может оказать «глубинное» влияние на пользовательский интерфейс, заключают авторы; в конце концов, если чтение текста требует меньших умственных усилий, то так ли полезны иконки, как мы думаем? Или текстовые интерфейсы — такие, как диалоговый интерфейс или интерфейс с голосовым контролем — лучший способ справляться с когнитивной нагрузкой для пользователей?

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