2-й курс / Человеко-машинный интерфейс / ПрЧМИ / sprvaochny_material_laba_4

13 принципов разработки дисплея

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

13 принципов разработки дисплея

Кристофер Викенс (англ. Christopher Wickens) выделил 13 принципов разработки дисплея в своей книге «An Introduction to Human Factors Engineering».

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

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

Принципы, относящиеся к восприятию

1. Сделайте дисплей чётким. Читаемость дисплея является важным критерием в проектировании дисплея. Если символы или объекты отображаются нечётко, то пользователь не может эффективно их использовать.

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

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

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

5. Сходства приводят к путанице. Используйте отличающиеся элементы. Похожие сигналы будут приводить к путанице. Соотношение схожих признаков к различным признакам является причиной схожести сигналов. Например, А423В9 больше похоже на А423В8, чем 92 на 93. Ненужные похожие признаки должны быть удалены, а непохожие признаки должны быть выделены.

Принципы умозрительной модели

6. Принцип изобразительного реализма. Экран должен выглядеть как переменная, которую он представляет (например, высокая температура на термометре показана высшим вертикальным уровнем). Если есть множество составляющих, то они могут быть настроены так, как они будут выглядеть в среде, где они будут представлены.

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

Принципы, основанные на внимании

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

9. Принцип совместимости. Разделённое внимание между двумя источниками может быть необходимо для выполнения одной задачи. Эти источники должны быть мысленно взаимосвязаны и иметь мысленную близость. Время доступа к информации должно быть небольшим и это может быть достигнуто различными способами (например, близкое расположение, одинаковый цвет, узоры, формы и т. д.). Однако, близость отображения может привести к путанице.

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

Принципы памяти

11. Замените память наглядной информацией: мировое знание. Пользователь не должен сохранять важную информацию исключительно в рабочей памяти или извлекать её из долговременной памяти. Меню/перечень могут помочь пользователю упростить использование памяти. Однако, использование памяти иногда может помочь пользователю, так как избавляет от необходимости ссылаться на некоторые типы знаний в мире (например, компьютерный специалист скорее использовал бы прямые команды из памяти, чем обращался к руководству). Для эффективной разработки должны быть сбалансированы знания в голове пользователя и знания в мире.

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

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

Есть такое понятие, как цветовой круг Иттена. Выглядит он примерно вот так: В его состав входят 12 цветов. Именно эти цвета считаются наиболее привычными и лёгкими для восприятия человеком. Первообразующими принято считать три основных цвета: жёлтый (ffff00), синий(0000ff) и красный(ff0000). На основе этих цветов создан весь цветовой круг. Первообразующие они потому, что при наличии этих трёх чистых цветов путём смешивания их, можно создать всю палитру. Любой цвет. Цвета второго порядка получают путем смешения основных цветов: мандариновый (ff8000), пурпурный (ff00ff), зелёный (00ff00). Цвета третьего порядка получаются смешиванием основных цветов и цветов второго порядка. Их получается шесть:

• Янтарный (ffc000)

• Киноварь (ff4000)

• Светло-вишнёвый (ff0080)

• Фиолетовый (8000ff)

• Лазурный (0080ff)

• Ядовито-зелёный (80ff00)

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

1. Монохромные цвета. За основу берётся один цвет и разная его насыщенность и прозрачность. Монохромные сочетания весьма просты в использовании и довольно мягкие на восприятие. Но им часто не хватает выразительности.

2. Близкие цвета Цвета, которые находятся рядом на цветовом круге. Эти цвета обладают схожими характеристиками световых волн, поэтому сочетаются очень просто.

3. Комплиментарные. Это цвета, расположенные строго друг напротив друга. Самый большой контраст дают именно они. Это всё броское, живое, дерзкое.

4. Близкие и комплиментарный. Тут всё просто! Берутся противоположные цвета например А и Б. У Б выделяются соседи Б(л) слева и Б(п) справа. Собственно, сочетание А, Б(п) и Б(л) и есть искомая величина! При игре с яркостью можно получить весьма интересные варианты.

5. Сдвоенные комплиментарные. Тут тоже всё просто. Берём Б(п) и Б(л) и ищем для них комплиментарные (противоположные) цвета. Всё то же броское, живое, дерзкое только в квадрате.

6. Триадные цвета. Расположены через три сектора. Обычно, контрастные цвета сложно сочетаются, хотя, чистом виде, сморятся весьма эффектно в кардинально разных пропорциях. Однако, чем меньше яркость цвета, тем больше возможностей. Триады первичных цветов слишком резкие. Вторичные и третичные триады более мягкие.

Принцип работы с цветом по кругу Иттена прост: подбираете 2-4 цвета через принципы цветовых гармоний и экспериментируете с яркостью-контрастностью, площадью заполнения. Ну и кроме того, стоит отдельно отметить ахроматические цвета. Никаких красок, никаких оттенков. Только градация от черного к белому. Полный спектр серости. Огромный выбор. И, на последок, небольшие нюансы и тонкости: Наличие чистого белого или чистого чёрного в цветовом решении основных шести гармоний, усиливает контраст, соответственно, интерфейс будет очень «живым», если не переборщить с площадью покрытия цветов. В противном случае, чрезмерная активность цвета будет раздражать. Хотите привлечь внимание к цвету и сделать сайт максимально ярким и выразительным? Берите контрастные цвета. Добавляйте немного чистого белого либо бархатного чёрного. Сделайте крупное меню и объемный шрифт. Этого будет достаточно. Нужен спокойный ненавязчивый интерфейс для серьёзного проекта-монохромные комбинации Вам в помощь. И, немаловажное правило в цветоподборе интерфейса: минимализ. Пять цзветов – это максимальный придел. Не перегружайте свой сайт всеми цветами радуги. Не нужно тут пэчворковского одеяла. Ваша задача- донести информацию, а не пугать людей пестростью.

Далее существует правило триад для текста: Использовать не более трех видов и размеров шрифта в вашем дизайне.

Современный веб-дизайн базируется на принципах акцентирования, контраста, балансировки, выравнивания, повторения и удобстве восприятия. Чем больше внимания вы будете уделять этим принципам, тем более удачным в итоге получится ваш дизайн. Если же вы будете забывать об основах, то зачастую будете оказываться на неверном пути при создании дизайна. Прокручивая у себя в голове основы, вы можете сконцентрироваться на нужных аспектах и создать уникальный дизайн. Однако, имейте в виду, что простое следование формуле не гарантирует успеха. Эти принципы – не рецепт, а скорее ориентиры, по которым вы должны следовать на пути создания успешного дизайна.

Акцентирование Акцентирование – это подчеркивание особой важности или значимости какого-либо элемента. Во многом оно тесно связано, а то и совпадает с понятием иерархии. Чтобы соблюсти в процессе создания сайта принцип акцентирования, необходимо проанализировать содержимое сайта и выяснить, какая иерархия элементов имеет место в его содержимом. Выяснив это, вы можете создать сайт с грамотно реализованной иерархией.

Отличный способ определить, на чем нужно сделать акцент – представить себе перечень элементов, которые требуются на веб-странице. Затем необходимо прикинуть, каков будет порядок важности этих элементов. После этого, держа в уме свои прикидки, можно приступать к созданию дизайна, в котором визуальная иерархия веб-страницы будет отражать важность элементов, определенную вами ранее.

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

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

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

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

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

Балансировка Принцип балансировки крутится вокруг идеи о том, как распределены элементы в дизайне и как они соотносятся с общим распределением визуальной нагрузки в рамках веб-страницы. От этого зависит то, насколько уравновешенным окажется дизайн в визуальном плане. Группирование элементов в дизайне создает визуальную нагрузку.

Обычно эта нагрузка уравновешивается путем использования равнозначной нагрузки, находящейся на противоположной чаше «весов», благодаря чему достигается баланс в дизайне. Если не сделать этого, то результатом будет ощущение неуравновешенности дизайна, хотя сие не означает, что дизайн обязательно будет плохим. Однако, хорошо сбалансированный дизайн создает тонкое ощущение уравновешенности и, как правило, оказывается более привлекательным.

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

Асимметричный баланс достигается, когда визуальная нагрузка в рамках веб-страницы равномерно распределяется по той или иной оси, однако, отдельные элементы двух составляющих дизайна не являются зеркально одинаковыми. Кстати, мой сайт DesigNonstop является примеров асимметричного баланса.

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

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

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

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

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

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

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

Удобство восприятия Восприятие своего рода тропинка, которой пользователь придерживается при визуальном ознакомлении с элементами дизайна. Оно главным образом зависит от того, на чем дизайнер сделал акцент и в какой мере он обеспечил контрастирование элементов между собой. Фактически удобство восприятия всецело будет зависеть от того, как дизайнер скомпоновал все элементы страницы.

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

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

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