Синтаксическая подсветка цветовой схемы исследования

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

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

Конкретные цветовые схемы не могут быть объективно лучше, чем все другие цветовые схемы, их ранжирование будет индивидуально субъективным в зависимости от вкуса и культурных факторов.

Тем не менее, применяются определенные правила для удобочитаемости / ясности, использования в определенных средах с окружающим освещением и т. Д. И т. Д., Которые будут перенесены из графического дизайна / типографики, интерфейса между человеком и компьютером и других связанных с этим исследований.

Проект Этана Шуновера «Соляризация» - интересная работа: http://ethanschoonover.com/solarized.

Это лишь сравнительно недавнее исследование, которое отдаленно связано с темой, о которой я знаю, это исследование 2004 года: «Влияние цветовых комбинаций текста веб-страницы на удобочитаемость, сохранение, эстетику и поведенческие намерения» Холла и Ханны . Однако это касается не кода, а веб-страниц, и единственная цветовая схема, которую они рассматривают, - это цвета переднего плана и фона.

Я задал вопрос об исследованиях, связанных с цветовыми схемами для программистов на Skepics.SE: "Являются ли светлые на темные цветовые схемы для компьютерных экранов лучше для программистов?" , На этот вопрос не было ответа почти 2 года, в то время как обычно на этот тип вопросов отвечают довольно быстро. Что приводит меня к мысли, что таких научных исследований нет.

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

Д. Асенов, О. Хиллигес и П. Мюллер - Влияние более богатых визуализаций на понимание кода, а также видео 10-минутного выступления на CHI 2016.

Мы сравнили стандартную подсветку синтаксиса Eclipse с двумя более насыщенными представлениями кода с такими визуальными дополнениями, как:

• Контуры вместо фигурных скобок
• Чередование цветов фона вместо запятых для разделения элементов списка
• Иконки вместо некоторых ключевых слов
• Дополнительные цвета фона для некоторых операторов и выражений

Исследование показало, что увеличение визуального разнообразия презентации довольно сильно повлияло на скорость, с которой разработчики могли понять структуру кода - время было сокращено до 75%. Важно отметить, что речь идет о простых вопросах, касающихся структуры кода (например, есть ли в методе вложенные циклы?). Мы не тестировали задачи, требующие сложного мышления (например, «Что делает этот метод?»), Поскольку в них преобладают навыки человека, а не эффекты представления кода.

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

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

Я не думаю, что такие исследования существуют. На практике, когда компания создает новую IDE, цветовая схема выделения синтаксиса основана на существующих схемах других IDE.

Например, тема Visual Studio по умолчанию не имеет ничего нового или оригинального . Синий цвет использовался для ключевых слов в течение многих лет, в том числе старыми Ada IDE. То же самое для зеленых комментариев. Некоторые цвета были более или менее «новыми», например бирюзовый для названий классов, но вы можете легко понять причину выбора этих цветов: было бы разумно установить цвет, который не далеко от синего (так как они почти как зарезервированные слова: Int32для .NET, intдля C # и т. д.), но он должен оставаться основным цветом, отличным от уже используемого синего.

А как насчет альтернативных схем, таких как популярный светлый текст на темном фоне? Они не созданы ученым, который изучал предмет в течение многих лет и сделал несколько сложных исчислений, чтобы получить точное идеальное соответствие. Вместо этого разработчик создает схему, которая ему понятна. Он делится этим на сайте, и он становится популярным . Это все волшебство.

И последнее: есть ли правила читабельности? Не очень много.

• По большей части, это что-то субъективное : вы не можете утверждать, что синее ключевое слово более читабельно, чем фиолетовое, потому что кто-то сможет ответить на него больше, чем за него, на его мониторе фиолетовое ключевое слово гораздо более читаемо, чем синее. ,

• С другой стороны, это просто логично . Черно-белая схема будет не такой удобочитаемой, как по умолчанию. Таким же образом вы не можете установить ключевые слова на светло-желтый и комментарии на светло-серый (скажем #eee) на белом фоне, потому что это нечитаемо, и вам даже не нужно объяснять почему. Это те же самые правила при создании сайта или печати книги или чего-либо еще.

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

соляризации

Ночь завтра

Github

наблюдения

Количество цветов, используемых в образце, помогает различать различные языковые элементы, но это может отвлечь разработчика.

Это помогает перейти от холодных к теплым цветам, если это возможно, используя холодные цвета для более нейтральных частей языка. Альтернативой является переход от пастельных оттенков к более ярким (насыщенность оттенка).

Цвет фона имеет огромное значение для восприятия цветов переднего плана.

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

С темным фоном легче обеспечить широкий диапазон цветов переднего плана с достаточным контрастом друг с другом и фоном.

Наконец, внешние факторы, такие как окружающий свет, качество и калибровка монитора, имеют огромное значение.

Вывод

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

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

Я помню, что (много-много) лет назад у нас была только желтая на черном «цветовая схема». И я также помню, что это было не так уж плохо. У него не было такого контраста, как у черного и белого. Не так давно я узнал, что это также лучше для человеческого глаза.

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

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

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

Кодирование должно быть расслабляющим. И это то, что для меня.