Теория цвета презентация

Содержание


Презентации» Педагогика» Теория цвета
Теория цвета 
 Лекция 3Введение
 сайт мечты Якоба (Джекоба) Нильсена 
 http://www.useit.com/Цвет, оттенки, и тени
 При разработке веб-сайта особое внимание следует уделитьЦвет, оттенки, и тениЦвет, оттенки, и тени
 Цвет, или тон, исторически делится на первичные,Цвет, оттенки, и тениЦвет, оттенки, и тени
 Понятие "дополнительный цвет" (или вторичный цвет) былоЦвет, оттенки, и тени
 Рассматривают обычно и третичные цвета (или цветаЦвет, оттенки, и тени
 Вторичные цвета смешиваются из первичных цветов следующим образом:
 Красный + ЖелтыйЦвет, оттенки, и тени
 Третичные цвета смешиваются из вторичных цветов, и они находятся междуЦвет, оттенки, и тени
 Оттенок (Tint) - Результат смешивания цвета с белым цветом
 ТональностьЦвет, оттенки, и тениЦвет, оттенки, и тени
 Стрелки показывают::
 Самая внешняя полоса - третичныйЦвет, оттенки, и тени
 Как можно видеть на показанном выше цветовомЦветовые схемы
 Важнейшей задачей веб-дизайнера является поиск гармоничного цветового сочетания.
 Некоторые цвета отлично смотрятсяМонохроматическая цветовая схема. 
 Монохроматическая цветовая схема соответствует одному базовому цвету и всем егоМонохроматическая цветовая схема.Монохроматическая цветовая схема. 
 Инструмент Color Scheme Generator II (http://www.colorschemedesigner.com/), позволяет быстро иМонохроматическая цветовая схема.Монохроматическая цветовая схема. 
 Для проверки контраста инструмент Contrast Analyser компании Paciello Group.
 ЭтотМонохроматическая цветовая схема. 
 Результаты, которые должны получиться при выполнении описанных вышеМонохроматическая цветовая схема.Монохроматическая цветовая схема. 
 Монохроматическая цветовая схема соответствует одному цвету и всем его оттенкам, тональностямДополнительная цветовая схема. 
 Дополнительная схема образуется сочетаниями противоположных в цветовом кругеМонохроматическая цветовая схема.Дополнительная цветовая схема. 
 Следующим рассматриваемым семейством цветовых схем являются дополнительные схемы,Дополнительная цветовая схема.Дополнительная цветовая схема. 
 При выборе одного цвета и его противоположного, используют также всеДополнительная цветовая схема.Дополнительная цветовая схема. 
 На изображении был выбран оранжевый цвет с противоположным дополнительным синим цветом.
Дополнительная цветовая схема. 
 Этот генератор цветов облегчает выбор цветов для ссылок, посещенных ссылок, и дажеДополнительная цветовая схема.Теплые и холодные цвета
 Дополнительные цветовые схемы хорошо подходят для использованияТеплые и холодные цветаТеплые и холодные цвета
 Теплыми являются те цвета, которые будут напоминать вамТеплые и холодные цвета
 Теплые цвета, содержащие желтый и красный, болееТеплые и холодные цветаТеплые и холодные цвета
 Одним из примеров сайта, который согласованно используетТриадические цветовые схемы. 
 Триадическая цветовая схема создается при выборе одного цвета и добавленииТриадические цветовые схемы.Триадические цветовые схемы.Триадические цветовые схемы.Триадические цветовые схемы. 
 Триадическая цветовая схема содержит также теплые и холодные цвета,Триадические цветовые схемы.Триадические цветовые схемы. 
 Сайт Puzzle Pirates http://www.puzzlepirates.com/ использует триадическую схему наТетрадические цветовые схемы. 
 Чем больше цветов выбирается, тем более сложной будет цветоваяТетрадические цветовые схемы. 
 Один из приемов состоит в выборе оттенка, тональностиТетрадические цветовые схемы.Тетрадические цветовые схемы.Тетрадические цветовые схемы.Тетрадические цветовые схемы.Тетрадические цветовые схемы.Тетрадические цветовые схемы. 
 Сайт Jane Goodall Institute является одним из немногихЦветовые схемы 
 Color Scheme Designer 
   http://colorschemedesigner.com/ 
 Toucan (http://aviary.com/tools/toucan),
Якоб Нильсен (Jakob Nielsen) 
 Биография
 Основатель компании «Nielsen Norman Group», является такжеПонятие юзабилити
 Международный стандарт ISO 9241-11 определяет юзабилити как степень, с которой продукт10 правил юзабилити (Я. Нильсен)
 Эвристика — это не имеющий строгого10 эвристик Якоба Нильсена
 1) Информированность о состоянии системы
  
 Пользователь10 эвристик Якоба Нильсена10 эвристик Якоба Нильсена
 2) Схожесть системы с реальным миром 
10 эвристик Якоба Нильсена10 эвристик Якоба Нильсена
 3) Свобода действий
 Дайте пользователям возможность отмены10 эвристик Якоба Нильсена
 Например, при удалении страницы система дает возможность10 эвристик Якоба Нильсена
 4) Единообразие и стандарты
 Не путайте пользователя,10 эвристик Якоба Нильсена
 5) Предотвращение ошибок
 Сведите к минимуму количество10 эвристик Якоба Нильсена
 5) Предотвращение ошибок
 Например, можно давать пользователям10 эвристик Якоба Нильсена10 эвристик Якоба Нильсена
 5) Предотвращение ошибок
 Следует заранее продумать, где10 эвристик Якоба Нильсена
 6) На виду, а не в памяти
10 эвристик Якоба Нильсена10 эвристик Якоба Нильсена
 7) Гибкость и эффективность
 Не нагружайте опытных10 эвристик Якоба Нильсена10 эвристик Якоба Нильсена
 7) Гибкость и эффективность
 Еще один пример10 эвристик Якоба Нильсена
 8) Эстетичный и минималистичный дизайн 
 Тексты не10 эвристик Якоба Нильсена10 эвристик Якоба Нильсена
 9) Понимание проблем и их решение 
10 эвристик Якоба Нильсена10 эвристик Якоба Нильсена
 10) Справочные материалы и документация 
 Даже если10 эвристик Якоба Нильсена10 эвристик Якоба Нильсена
 10) Справочные материалы и документация 
 В последнее10 эвристик Якоба НильсенаЯвляются ли эвристики панацеей? 
 Эвристики Нильсена являются общепризнанными и наиболееЯвляются ли эвристики панацеей? 
 Для более эффективного результата рекомендуется проводитьЯвляются ли эвристики панацеей? 
 Как любой чек-лист, даже от самогоКниги Я.Нильсена
 Якоб Нильсен. Веб-дизайн. Якоб Нильсен, Издательство: «Символ-Плюс» 2003 г.



Слайды и текст этой презентации
Слайд 1
Описание слайда:
Теория цвета Лекция 3


Слайд 2
Описание слайда:
Введение сайт мечты Якоба (Джекоба) Нильсена http://www.useit.com/

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

Слайд 4
Описание слайда:
Цвет, оттенки, и тени

Слайд 5
Описание слайда:
Цвет, оттенки, и тени Цвет, или тон, исторически делится на первичные, вторичные, и третичные цвета. Первичными цветами называют красный, желтый и синий цвета, так как для получения трех этих цветов не требуется смешивать другие цвета. Если требуется перевести эти цвета в цвета Web, то можно воссоздать их с помощью шестнадцатеричных эквивалентов #ff0000, #ffff00, и #0033cc.

Слайд 6
Описание слайда:
Цвет, оттенки, и тени

Слайд 7
Описание слайда:
Цвет, оттенки, и тени Понятие "дополнительный цвет" (или вторичный цвет) было введено по аналогии с "основным цветом". Смешивая соседние основные цвета попарно в равной пропорции можно получить дополнительные цвета: например, смешение красного и синего цветов даст фиолетовый цвет. Так, к триаде основных цветов красный-желтый-синий дополнительными являются оранжевый-зеленый-фиолетовый. Вторичные цвета находятся на цветовом круге строго между основными.

Слайд 8
Описание слайда:
Цвет, оттенки, и тени Рассматривают обычно и третичные цвета (или цвета 3-го порядка), которые образуются при смешивании основного цвета с соседним дополнительным цветом, например, смешивая красный (основной) и фиолетовый (дополнительный) можно получить красно-фиолетовый цвет и т.п.

Слайд 9
Описание слайда:
Цвет, оттенки, и тени Вторичные цвета смешиваются из первичных цветов следующим образом: Красный + Желтый = Оранжевый ( #ff9900 ) Желтый + Синий = Зеленый ( #00cc00 ) Синий + Красный = Фиолетовый ( #660099 )

Слайд 10
Описание слайда:
Цвет, оттенки, и тени Третичные цвета смешиваются из вторичных цветов, и они находятся между первичными и вторичными цветами, показанными на цветовом круге выше. Хотя цвета Web отличаются от обычных цветов "художников", может быть полезно держать под рукой цветовой круг (http://colorwheelco.com/) во время изучения различных цветовых схем. Кроме того, цветовой круг покажет все оттенки, тональности и тени, так что вы начнете понимать имеющиеся цветовые возможности.

Слайд 11
Описание слайда:
Цвет, оттенки, и тени Оттенок (Tint) - Результат смешивания цвета с белым цветом Тональность (Tone) - Результат смешивания цвета с серым цветом Тень (Shade) - Результат смешивания цвета с черным цветом

Слайд 12
Описание слайда:
Цвет, оттенки, и тени

Слайд 13
Описание слайда:
Цвет, оттенки, и тени Стрелки показывают:: Самая внешняя полоса - третичный желто-оранжевый цвет (желтый + оранжевый) Вторая полоса - оттенок третичного цвет а (добавлен белый) Третья полоса - тональность цвета (добавлен серый) Самая внутренняя полоса - тень на цветовом круге (добавлен черный)

Слайд 14
Описание слайда:
Цвет, оттенки, и тени Как можно видеть на показанном выше цветовом круге, количество добавленного к цвету белого, серого и черного минимально — только чтобы изменить исходный цвет и создать так называемую монохроматическую цветовую схему.

Слайд 15
Описание слайда:
Цветовые схемы Важнейшей задачей веб-дизайнера является поиск гармоничного цветового сочетания. Некоторые цвета отлично смотрятся вместе и дополняют друг друга. Другие же, создают раздражающие глаз сочетания. Чтобы не проводить эксперименты на собственном сайте, необходимо иметь представление об основных цветовых схемах, т.е. о гармоничных комбинациях цветов, составленных по определенным правилам. Ниже будут рассмотрены четыре цветовые схемы, которые являются самыми простыми для понимания и реализации, но далеко не единственными.

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

Слайд 17
Описание слайда:
Монохроматическая цветовая схема.

Слайд 18
Описание слайда:
Монохроматическая цветовая схема. Инструмент Color Scheme Generator II (http://www.colorschemedesigner.com/), позволяет быстро и легко определять цветовые схемы, и даже определить, обеспечивают ли выбранные цвета достаточную контрастность для слабовидящих или не различающих цвета пользователей.

Слайд 19
Описание слайда:
Монохроматическая цветовая схема.

Слайд 20
Описание слайда:
Монохроматическая цветовая схема. Для проверки контраста инструмент Contrast Analyser компании Paciello Group. Этот инструмент определяет контраст между цветами фона и переднего плана. http://www.paciellogroup.com/resources/contrast-analyser.html

Слайд 21
Описание слайда:
Монохроматическая цветовая схема. Результаты, которые должны получиться при выполнении описанных выше действий, будут следующие: желто-оранжевый цвет ( #FFCC00 ), оттенок ( #FFF2BF ), тональность ( #FFE680 ), и тень ( #B38F00). Эти шестнадцатеричные числа значительно более надежны, чем любые предположения, которые можно было бы сделать при попытке совместить реальный цветовой круг с окном Web-браузера. И как предполагает "Mono", эта схема преобразуется в монохроматическую цветовую схему.

Слайд 22
Описание слайда:
Монохроматическая цветовая схема.

Слайд 23
Описание слайда:
Монохроматическая цветовая схема. Монохроматическая цветовая схема соответствует одному цвету и всем его оттенкам, тональностям и теням.

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

Слайд 25
Описание слайда:
Монохроматическая цветовая схема.

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

Слайд 27
Описание слайда:
Дополнительная цветовая схема.

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

Слайд 29
Описание слайда:
Дополнительная цветовая схема.

Слайд 30
Описание слайда:
Дополнительная цветовая схема. На изображении был выбран оранжевый цвет с противоположным дополнительным синим цветом. Для получения этой схемы выбраны следующие настройки: параметр Contrast внизу слева, значение по умолчанию ( default ) в меню ниже генератора, и нормальное зрение ( normal vision ). Обратите внимание, что основной выбранный цвет помечен черной точкой на внутреннем диске цветового круга, а противоположный, дополнительный цвет, который был выбран автоматически, помечен окружностью на внутреннем ободке. Эти пометки облегчают анализ цветовой схемы.

Слайд 31
Описание слайда:
Дополнительная цветовая схема. Этот генератор цветов облегчает выбор цветов для ссылок, посещенных ссылок, и даже изображений, так как предоставляет шестнадцатеричные значения цветов вверху справа. Можно смешивать и подбирать любые чистые цвета ( цвет вверху) и его оттенок, тональность и тень и радоваться выбору отличной цветовой схемы.

Слайд 32
Описание слайда:
Дополнительная цветовая схема.

Слайд 33
Описание слайда:
Теплые и холодные цвета Дополнительные цветовые схемы хорошо подходят для использования на Web-сайтах, так как они содержат также теплые и холодные цвета. Использование этих цветов обеспечивает контраст.

Слайд 34
Описание слайда:
Теплые и холодные цвета

Слайд 35
Описание слайда:
Теплые и холодные цвета Теплыми являются те цвета, которые будут напоминать вам о лете, солнце или огне. Они составляют цвета от фиолетовых до желтых. Холодные цвета могут напоминать весну, лед, или воду. Эти цвета простираются от желто-зеленого и до фиолетового.

Слайд 36
Описание слайда:
Теплые и холодные цвета Теплые цвета, содержащие желтый и красный, более динамичные, выступающие и объемные. Холодные цвета, расположенные от фиолетовой до зеленой зоны цветового круга, кажутся удаляющимися по мере усиления тона. Эффект движения, вызванный сочетанием холодных и теплых цветов, широко применяется дизайнерами.

Слайд 37
Описание слайда:
Теплые и холодные цвета

Слайд 38
Описание слайда:
Теплые и холодные цвета Одним из примеров сайта, который согласованно использует цветовую комбинацию теплый/холодный, является сайт Ecolution (http://www.ecolution.com/) Ecolution обычно использует красный в качестве акцентирующего цвета на своей домашней странице, как контраст своему зеленому логотипу. Затем они смешивают два контрастных цвета с различными оттенками, тональностями и тенями двух этих цветов. Даже "черные цвета " на изображении могут склоняться к "теплому" или "холодному", так же как и белые цвета. В целом, фотография будет "теплой", что хорошо сочетается с совершенно чистым зеленым цветом. Хотя они используют те же самые цвета, что и Greenpeace, сайт Ecolution выглядит менее "слепящим", используя более насыщенные тональности и тени на фотографии.

Слайд 39
Описание слайда:
Триадические цветовые схемы. Триадическая цветовая схема создается при выборе одного цвета и добавлении к нему двух других цветов, расположенных на одинаковых расстояниях друг от друга на цветовом круге. Такая схема содержит как теплые, так и холодные цвета, но одна "температура" обязательно должна преобладать. Обычно температура, которая будет преобладать над другими, выбирается для переднего плана..

Слайд 40
Описание слайда:
Триадические цветовые схемы.

Слайд 41
Описание слайда:
Триадические цветовые схемы.

Слайд 42
Описание слайда:
Триадические цветовые схемы.

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

Слайд 44
Описание слайда:
Триадические цветовые схемы.

Слайд 45
Описание слайда:
Триадические цветовые схемы. Сайт Puzzle Pirates http://www.puzzlepirates.com/ использует триадическую схему на своей домашней странице. Они используют основную красно-сине-желтую схему, и эта основная схема отлично подходит для сайта детской игры. Отметим, что синий цвет является преобладающим, и что красные и желтые цвета используются как акценты и направляют движение глаз по странице.

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

Слайд 47
Описание слайда:

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

Слайд 49
Описание слайда:
Тетрадические цветовые схемы.

Слайд 50
Описание слайда:
Тетрадические цветовые схемы.

Слайд 51
Описание слайда:
Тетрадические цветовые схемы.

Слайд 52
Описание слайда:
Тетрадические цветовые схемы.

Слайд 53
Описание слайда:
Тетрадические цветовые схемы.

Слайд 54
Описание слайда:
Тетрадические цветовые схемы. Сайт Jane Goodall Institute является одним из немногих сайтов, которые действительно хорошо реализовали тетрадическую цветовую схему. Обратите внимание на пурпурный цвет, желтую тональность, красные отблески на фотографии (сайт содержит еще красный цвет далее вниз на странице), и зеленые цвета. Пурпурный не совсем точно соответствует цветовой схеме, сгенерированной сетевым инструментом цветов — он склоняется в сторону красно-фиолетового — но он достаточно близок для использования в качестве примера того, как можно использовать цветовой круг и сетевой генератор цветов для создания некоторых идей цветового оформления сайта.

Слайд 55
Описание слайда:
Цветовые схемы Color Scheme Designer  http://colorschemedesigner.com/ Toucan (http://aviary.com/tools/toucan), ColoRotate (http://www.colorotate.org/) Adobe Kuler (http://kuler.adobe.com/).

Слайд 56
Описание слайда:
Якоб Нильсен (Jakob Nielsen)  Биография Основатель компании «Nielsen Norman Group», является также её руководителем, доктор физических наук. Компания создана им совместно с Дональдом Норманом, который до этого являлся вице-президентом «Apple Computer». Сам же Якоб Нильсен до 1998 года занимал должность ведущего инженера в компании «Sun Microsystems», где был специалистом по юзабилити.

Слайд 57
Описание слайда:
Понятие юзабилити Международный стандарт ISO 9241-11 определяет юзабилити как степень, с которой продукт может быть использован определёнными пользователями при определённом контексте использования для достижения определённых целей с должной эффективностью, продуктивностью и удовлетворённостью  Под понятием юзабилити сайта подразумевается простое и удобное использование веб-ресурса посетителями. Основные проблемы юзабилити сайтов, с которыми сталкиваются пользователи это: отсутствие хорошей навигации; сложная или запутанная структура; неудачное расположение элементов сайта; неуместное использование рекламы.

Слайд 58
Описание слайда:
10 правил юзабилити (Я. Нильсен) Эвристика — это не имеющий строгого обоснования, но полезный на практике алгоритм. Эвристики дают приемлемое решение задачи в большинстве практически значимых случаев. Якоб Нильсен сформулировал 10 эвристик в 1990 году, но, несмотря на прошедшие годы, они не теряют своей актуальности. В этой статье я приведу их перевод, дополню содержание своим опытом, а также проиллюстрирую примерами с современных сайтов. Эвристики, как и любые другие чек-листы, используются экспертами по юзабилити при оценке и анализе сайтов или мобильных приложений, которые соотносят их интерфейс с определенными принципами и лучшими известными решениями. Метод экспертной оценки очень популярен, а также дешев и быстр по сравнению с юзабилити-тестированием.

Слайд 59
Описание слайда:
10 эвристик Якоба Нильсена 1) Информированность о состоянии системы   Пользователь всегда должен ориентироваться и хорошо понимать, что происходит в системе. Взаимодействие между пользователем и системой должно быть как можно более логичным и быстрым. Одна из частых ошибок многих интернет-магазинов — после оформления и отправки формы заказа пользователем оставлять его наедине с самим собой. Сразу возникает много сомнений — а работает ли магазин? Все ли верно я сделал? Может быть, ошибся в контактных данных? Когда я получу свой заказ? Особенно страшно, когда заказ был оплачен, например, банковской картой.

Слайд 60
Описание слайда:
10 эвристик Якоба Нильсена

Слайд 61
Описание слайда:
10 эвристик Якоба Нильсена 2) Схожесть системы с реальным миром Система должна общаться с пользователем на понятном ему языке. Использование слов, фраз и понятий, знакомых пользователю в реальном мире, намного предпочтительнее, чем использование специализированных терминов. Очень часто использованием терминов “грешат” сайты банков, но и в более простых тематиках, где, казалось бы, проблем связи с реальным миром быть не должно, эвристика грубо нарушается. В качестве примера — сайт по продаже книг.

Слайд 62
Описание слайда:
10 эвристик Якоба Нильсена

Слайд 63
Описание слайда:
10 эвристик Якоба Нильсена 3) Свобода действий Дайте пользователям возможность отмены действий, а также возврата к ранее отмененным действиям. Пользователи часто ошибаются, поэтому система всегда должна предоставлять очевидный шанс клиенту “вернуть, как было”, приложив при этом минимум усилий.

Слайд 64
Описание слайда:
10 эвристик Якоба Нильсена Например, при удалении страницы система дает возможность ее восстановить:

Слайд 65
Описание слайда:
10 эвристик Якоба Нильсена 4) Единообразие и стандарты Не путайте пользователя, описывая одни и те же вещи разными словами и терминами. Придерживайтесь единообразия и следуйте стандартам. Однажды поняв принцип работы вашего ресурса, пользователь должен быть уверен, что вне зависимости от его перемещений по сайту, это понимание его не покинет. Всегда следуйте одним и тем же правилам внутри ресурса. Если вы используете кнопку “Добавить в корзину” на карточках товара, то она не должна смениться на изображение тележки на других страницах сайта, где встречается этот товар. Если же все товары у вас находятся в “Каталоге товаров”, то при переходе со страницы на страницу пользователь не должен вдруг обнаружить раздел “Наша продукция”.

Слайд 66
Описание слайда:
10 эвристик Якоба Нильсена 5) Предотвращение ошибок Сведите к минимуму количество условий, в которых могут быть допущены ошибки. Даже самые понятные сообщения об ошибках не смогут сделать сайт настолько дружелюбным, насколько это сделает продуманная логика работы, позволяющая их предотвращать.

Слайд 67
Описание слайда:
10 эвристик Якоба Нильсена 5) Предотвращение ошибок Например, можно давать пользователям подсказки, поясняющие, какую информацию надо вводить:

Слайд 68
Описание слайда:
10 эвристик Якоба Нильсена

Слайд 69
Описание слайда:
10 эвристик Якоба Нильсена 5) Предотвращение ошибок Следует заранее продумать, где могут быть ошибки, и предусмотреть варианты преобразования неверных данных от пользователя, например, чтобы поисковая строка на сайте исправляла орфографические ошибки и выдавала релевантные результаты поиска.

Слайд 70
Описание слайда:
10 эвристик Якоба Нильсена 6) На виду, а не в памяти Не заставляйте пользователя запоминать большое количество объектов, действий и опций. Посетитель не должен держать в голове информацию, перемещаясь из одной части системы в другую. Например, хорошим тоном в современных интернет-магазинах является указание на карточках товаров информации о том, как его купить и получить. Посетителю не нужно уходить с выбранного товара в раздел “Доставка” — вся информация есть на этой же странице.

Слайд 71
Описание слайда:
10 эвристик Якоба Нильсена

Слайд 72
Описание слайда:
10 эвристик Якоба Нильсена 7) Гибкость и эффективность Не нагружайте опытных пользователей лишней информацией, предоставьте им возможность совершать часто повторяющиеся действия как можно быстрее и проще. Упрощайте функции, которыми посетители вашего сайта пользуются чаще всего.

Слайд 73
Описание слайда:
10 эвристик Якоба Нильсена

Слайд 74
Описание слайда:
10 эвристик Якоба Нильсена 7) Гибкость и эффективность Еще один пример гибкости на сайте — использование выпадающих списков в формах регистрации/заказа вместо полей свободного ввода с клавиатуры. Исследования подтверждают: выбирать из вариантов гораздо проще, чем вписывать данные. Особенно странно выглядят формы, в поля которых требуется ВПИСАТЬ город проживания или дату доставки.

Слайд 75
Описание слайда:
10 эвристик Якоба Нильсена 8) Эстетичный и минималистичный дизайн  Тексты не должны содержать бесполезной или устаревшей информации. Каждое лишнее слово делает восприятие все более трудным и лишает посетителя возможности найти то, за чем он пришел на сайт. Хороший совет для владельцев неинформационных сайтов: прочтите текст на продвигаемой вами странице и сократите его в два раза. В большинстве случаев это получится даже без искажения смысла той информации, которую вы хотели рассказать посетителю. К сожалению, избыточность — это свойство не только текстов на современных ресурсах, но и свойство дизайна, количества полей в формах и т. п. И хотя про избавление от лишних полей в формах не говорил только ленивый, но сайтов, где для оформления заказа требуется заполнить аж 10—15 пунктов, меньше не становится.

Слайд 76
Описание слайда:
10 эвристик Якоба Нильсена

Слайд 77
Описание слайда:
10 эвристик Якоба Нильсена 9) Понимание проблем и их решение Сообщения об ошибках должны быть выражены на понятном пользователю языке, как можно более точно описывать проблему и предоставлять возможные варианты ее решения. Рассмотрим пример: пользователь в поиске на сайте ввел некорректный запрос. Хороший ресурс не пугает его пустой страницей без результатов или строками кода с ошибкой, а предлагает варианты решения проблемы.

Слайд 78
Описание слайда:
10 эвристик Якоба Нильсена

Слайд 79
Описание слайда:
10 эвристик Якоба Нильсена 10) Справочные материалы и документация  Даже если система может использоваться без документации, в процессе работы с ней все же может потребоваться справочная информация. Подобные документы должны составляться таким образом, чтобы в них легко было найти необходимое. Справочные материалы должны быть лаконичными и содержать только четкие руководства к действиям. Наиболее часто используемыми справочными материалами являются всевозможные подсказки о формате вводимых данных или объяснения, зачем требуется указать телефон, почту и другую контактную информацию. Такие подсказки не только помогают заполнить форму без ошибок, но и нивелируют опасения и возникающие страхи пользователей.

Слайд 80
Описание слайда:
10 эвристик Якоба Нильсена

Слайд 81
Описание слайда:
10 эвристик Якоба Нильсена 10) Справочные материалы и документация  В последнее время на ресурсах активно стали использоваться интерфейсные подсказки, которые обучают пользователей возможностям сайта, показывают все его функции и помогают сориентироваться.

Слайд 82
Описание слайда:
10 эвристик Якоба Нильсена

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

Слайд 84
Описание слайда:
Являются ли эвристики панацеей? Для более эффективного результата рекомендуется проводить оценку по чек-листу из эвристик несколькими разными экспертами, так как один человек не всегда может обнаружить все проблемы на сайте.

Слайд 85
Описание слайда:
Являются ли эвристики панацеей? Как любой чек-лист, даже от самого именитого юзабилиста, эвристики субъективны, так как не основаны на тщательных исследованиях. Несмотря на это, они несут действительно практическую пользу и работают в большинстве случаев.  

Слайд 86
Описание слайда:
Книги Я.Нильсена Якоб Нильсен. Веб-дизайн. Якоб Нильсен, Издательство: «Символ-Плюс» 2003 г. Web-дизайн. Удобство использования Web-сайтов Якоб Нильсен, Хоа Лоранжер, Издательство: «Вильямс» 2007 г. Веб-дизайн. Анализ удобства использования веб-сайтов по движению глаз Якоб Нильсен, Кара Перниче, Издательство: «Вильямс» 2010 г. Mobile Usability. Как создавать идеально удобные приложения для мобильных устройств Якоб Нильсен, Ралука Будиу, Издательство: «Эксмо» 2013 г. Дизайн Web-страниц. Анализ удобства и простоты использования 50 узлов Якоб Нильсен, Мари Тахир, Издательство: «Вильямс» 2002 г.


Скачать презентацию на тему Теория цвета можно ниже:

Похожие презентации