- •Содержание
- •14 Универсальные принцилы дизайна
- •Доступность (Accessibility)
- •Предварительный органайзер (Advance oraganizer)
- •18 Универсальные принципы дизайна
- •Аффорданс (Affordance)
- •См. Также Ограничительное условие (Constraint), Линия влечения (Desire line), Установление соответствий (Mapping), Надж (Nudge).
- •22 Универсальные принципы дизайна
- •Выравнивание (Alignment)
- •24 Универсальные принципы дизайна
- •Антропоморфная форма (Anthropomorphic form)
- •30 Универсальные принципы дизайна
- •, Nancy Etcoff. Survival 01 the Prettiest: The Science 01 Веашу? Anchor Books, 2000.
Содержание
11 |
Предисловие |
60 |
Ограничительное условие |
102 |
Отношение «гибкость-юзабипити- |
12 |
Введение |
|
(Constraint) |
|
(Flexibility-usability tradeoff) |
14 |
Правило 80/20 (80/20 rule) |
62 |
Предвзятость в отношении контура |
104 |
Предупредительность (Forgiveness) |
'" 16 |
Доступность (Accessibility) |
|
(Contour bias) |
106 |
Форма следует за функцией (Form |
18 |
Предварительный органайзер |
64 |
Контроль (Control) |
|
10110ws lunction) |
|
(Advance oraganizer) |
66 |
Конвергенция (Convergence) |
108 |
Фрейминг-эффект (Framing) |
20 |
Эффект «эстетвка-юзабипиги- |
68 |
Затраты-выгода (Cost-benelit) |
110 |
Замри-беги-дерись-сдавайся |
|
(Aesthetic-usabilityeffect) |
70 |
Защищенное пространство |
|
(Freeze-Flight-Fight-Forfeit) |
22 |
Аффорданс (Affordance) |
|
(DelensibIe space) |
112 |
Мусор на входе - мусор на |
24 |
Выравнивание (Alignment) |
72 |
Глубина переработки информации |
|
выходе (Garbage in - garbage out) |
26 |
Антропоморфная форма |
|
(Depth 01 processing) |
114 |
Золотое отношение (Golden ratio) |
|
(Anthropomorphic юпп) |
74 |
Разработка комитетом (Design Ьу |
116 |
Непрерывность (Good continuation) |
28 |
Архетипы (Archetypes) |
|
comitee) |
118 |
Диаграмма Гутенберга (Gutenberg |
30 |
Выравнивание пространств (Агеа |
76 |
Линия влечения (Desire line) |
|
diagram) |
|
alignment) |
78 |
Цикл разработки (Development |
120 |
Закон Хика (Hick's law) |
32 |
Предвзятость в отношении |
|
cycle) |
122 |
Иерархия (Hierarchy) |
|
привлекательности (A1tractiveness |
80 |
Точка входа (Entry point) |
124 |
Иерархия потребностей (Hierarchy |
|
bias) |
|
01 needs) |
||
З4 |
Предвзятость в отношении |
82 |
Ошибки (Errors) |
126 |
Яркостное выделение (Highlighting) |
|
«детского» лица (Baby-lасе bias) |
84 |
Эффект ожидания (Expectation |
128 |
Боязнь пустоты (Ноггог vacui) |
36 |
Эффект биофилии (Biophilia effect) |
|
effect) |
130 |
Тяготение к охоте или воспитанию |
38 |
Эффект собора (Cathedral eHect) |
86 |
Эффект внешнего воздействия |
|
(Hunter-nurturer lixations) |
40 |
Чанкинг (Chunking) |
|
(Exposure eHect) |
132 |
Графическое представление |
42 |
Классическая приспособительная |
88 |
Степень фейсизма (Face-ism ratio) |
|
(Iconic representation) |
|
реакция (Classical conditioning) |
90 |
Запас прочности (Factor 01 salety) |
134 |
Погружение (Immersion) |
44 |
Смыкание (Closure) |
92 |
Цепь обратной связи (Feedback |
136 |
Слепота невнимания (lna1tentional |
46 |
Когнитивный диссонанс (Cognitive |
|
loop) |
|
bIindness) |
|
dissonance) |
94 |
Последовательность Фибоначчи |
1З8 |
Эффекты интерференции |
48 |
Цвет (Color) |
|
(Rbonacci sequence) |
|
(Interference eHects) |
50 |
Общая история (Соттоп late) |
96 |
Отношение «фигура-фон» (Figure- |
140 |
Перевернутая пирамида (Inverted |
52 |
Сравнение (Comparison) |
|
ground relationship) |
|
pyramid) |
54 |
Подтверждение (Conlirmation) |
98 |
Закон Фиттса (Fi1ts' law) |
142 |
Итерация (Iteration) |
56 |
Целостность (Consistency) |
100 |
Принцип пяти шляпных полок (Five |
144 |
Закон прегнантности (Law 01 |
58 |
Постоянство (Constancy) |
|
hat racks) |
|
pragnanz) |
146 |
Наслоение (Layering) |
184 |
Эффект превосходства |
228 |
Фактор жесткости (Stickiness) |
148 |
Разборчивость (Legibility) |
|
изображений, ЭПИ (Picture |
230 |
Сторителлинг (Storytelling) |
150 |
Жизненный цикл (Life cycle) |
|
superiority eHect, PSE) |
232 |
Структурные формы (Structural |
152 |
Установление соответствий |
186 |
Прайминг-Эффект (Priming) |
|
forms) |
|
(Mapping) |
188 |
Метод последовательного |
234 |
Симметрия (Symmetry) |
154 |
Умозрительная модель (Mental |
|
раскрытия (Progressive disclosure) |
236 |
Обнаружение угрозы (Threat |
|
model) |
190 |
Пропозициональная плотность |
|
detection) |
156 |
Мимикрия (Mimicry) |
|
(Propositional density) |
238 |
Трехмерная проекция (Three- |
|
Мнемонический прием (Mnemonic |
192 |
Открытое пространство-зона |
|
dimensional projection) |
158 |
|
|
|||
|
device) |
|
уединения (Prospect-refuge) |
240 |
Предвзятость в отношении |
|
|
194 |
Создание прототипа (Prototyping) |
|
освещения объектов (Top-down |
160 |
Модульный принцип (Modularity) |
196 |
Близость (Proximity) |
|
|
162 |
Предельно продвинутое, но |
198 |
Удобочитаемость (Readability) |
|
lighting bias) |
|
242 |
«Зловещая долина» (Uncanny |
|||
|
приемлемое (Most advanced уе! |
200 |
Узнавание лучше вспоминания |
|
valley) |
|
acceptabIe) |
|
(Recognition over recall) |
244 |
Принцип неопределенности |
164 |
Эффект среднего типа лица (Most |
202 |
Эффект красного (Red eHect) |
|
(Uncertainty principle) |
|
average facial арреагапсе eHect) |
204 |
Избыточность (Redundancy) |
246 |
Равномерная связность (Uniform |
166 |
Нормальное распределение |
206 |
Розепский камень (Rosetta stone) |
|
|
|
(Normal distribution) |
208 |
Правило третей (Rule о! thirds) |
|
connectedness) |
|
|
248 |
Эффект Веблена (Veblen eHect) |
||
168 |
NIН-синдром (Not invented here) |
210 |
Удовлетворительное решение |
|
|
|
250 |
Видимость (Visibility) |
|||
170 |
Надж (Nudge) |
|
(Satisficing) |
252 |
Визуально-пространственный |
|
|
212 |
Предпочтение саванны (Savanna |
||
172 |
«Бритва Оккама» (Ockham's Razor) |
|
|
резонанс (Visuospatial resonance) |
|
174 |
Выработка инструментального |
|
preference) |
|
Эффект фон Ресторф (von Restorff |
|
214 |
Ошибка масштабирования (Scaling |
254 |
||
|
условного рефлекса (Орегап! |
|
fallacy) |
|
eHect) |
|
conditioning) |
216 |
Дефицит (Scarcity) |
256 |
Ваби-саби (Wabi-sabi) |
176 |
Ориентационная чувствительность |
218 |
Самоподобие (Self-similarity) |
258 |
Соотношение обхватов талии и |
|
(Orientation sensitivity) |
220 |
Позиционный эффект (Serial |
|
бедер (Waist-to-hip ratio) |
178 |
Посильная нагрузка (Performance |
|
position effects) |
260 |
Система навигации (Wayfinding) |
|
load) |
222 |
Формирование поведения |
262 |
Самое слабое звено (Weakest link) |
180 |
Реализация в сравнении |
|
(Shaping) |
264 |
Выражаем признательность |
|
с предпочтением (Performance |
224 |
Отношение «сигнал-шум» (Signal- |
266 |
Благодарности |
|
versus preference) |
|
to-noise ratio) |
267 |
Об авторах |
182 |
Персонажи (Personas) |
226 |
Схожесть (Similarity) |
268 |
Алфавитный указатель |
Содержание
категориям
Как повлиять на восприятие |
Как помочь людям |
|
Как улучшить юзабилити продукта? |
|||
разработки? |
16 |
Доступность (Accessibility) |
|
|
||
|
|
|
18 |
Предварительный огранайзер |
14 |
Правило 80/20 (80/20 Rule) |
22 |
|
Аффорданс (Аffогdапсе) |
|
(Advance Organizer) |
1}16 |
Доступность (Accessibility) |
24 |
|
Выравнивание (Alignment) |
36 |
Эффект биофилии (Biophilia |
20 |
Эффект -эстетика-юзаёипити- |
26 |
Антропоморфная форма |
|
Effect) |
|
(Aesthetic-Usability Effect) |
|
|
|
(Anthromorphic Form) |
38 |
Эффект собора (Cathedral Effect) |
22 |
Аффорданс (Affordance) |
44 |
.Смыкание (Closure) |
40 |
Чанкинг (Chunking) |
54 |
Подтверждение (Confirmation) |
|
48 |
Цвет (Color) |
42 |
Классическая приспособительная |
56 |
Целостность (Consistency) |
|
50 |
Общая история (Соттоп Fate) |
|
реакция (Classical Conditioning) |
60 |
Ограничительное условие |
|
56 |
Целостность (Consistency) |
52 |
Сравнение (Comparison) |
|
(Constraint) |
|
58 |
Постоянство (Constancy) |
72 |
Глубина переработки информации |
64 |
Контроль (Control) |
|
v-б2 |
Предвзятость в отношении контура |
|
(Depth о! Processing) |
68 |
Затраты-выгода (Cost-Benefit) |
|
|
|
(Contour Bias) |
86 |
Эффект внешнего воздействия |
~ 76 |
Линия влечения (Desire Line) |
88 |
Степень фейсизма (Face-ism Ratio) |
|
(Exposure Effect) |
с 80 |
Точка входа (Entry Point) |
|
\. 96 |
Отношение «фигура-фон» (Figure- |
104 |
Предупредительность (Forgiveness) |
82 |
Ошибки (Errors) |
|
|
|
Ground Relationship) |
112 |
Мусор на входе - мусор на |
98 |
Закон Фиттса (Fitts' Law) |
100 |
Принцип пяти шляпных полок (Five |
|
выходе (Garbage In-Garbage Out) |
104 |
Предупредительность (Forgiveness) |
|
|
|
На! Racks) |
122 |
Иерархия (Hierarchy) |
110 |
Замри-беги-дерись-сдавайся |
116 |
Непрерывность (Good Continuation) |
134 |
Погружение (Immersion) |
|
(Freeze-FI ig ht -Fight -Forfeit) |
|
118 |
Диаграмма Гутенберга (Gutenberg |
138 |
Эффекты интерференции |
120 |
Закон Хика (Hick's Law) |
|
|
|
Diagram) |
|
(Interference Effects) |
122 |
Иерархия (Hierarchy) |
126 |
Яркостное выделение (Highlighting) |
140 |
Перевернутая пирамида (Inverted |
132 |
Графическое представление |
|
128 |
Боязнь пустоты (Ноггог Vacui) |
|
Pyramid) |
|
(Iconic Representation) |
|
1З2 |
Графическое представление |
146 |
Наслоение (Layering) |
134 |
Погружение (Immersion) |
|
|
|
(Iconic Representation) |
148 |
Разборчивость (Legibility) |
138 |
Эффекты интерференции |
136 |
Слепота невнимания (Inattentional |
154 |
Умозрительная модель (Mental |
|
(Interference Effects) |
|
|
|
Blindness) |
|
Model) |
140 |
Перевернутая пирамида (Inverted |
138 |
Эффекты интерференции |
158 |
Мнемонический прием (Mnemonic |
|
Pyramid) |
|
|
|
(Interference Effects) |
|
Device) |
146 |
Наслоение (Laye~ng) |
144 |
Закон прегнантности (Law о! |
174 |
Выработка инструментального |
152 |
Установление соответствий |
|
|
|
PrAgnanz) |
|
условного рефлекса (Орегап! |
|
(Mapping) |
146 |
Наслоение (Layering) |
|
Conditioning) |
154 |
Умозрительная модель (Mental |
|
148 |
Разборчивость (Legibility) |
178 |
Посильная нагрузка (Performance |
|
Model) |
|
152 |
Установление соответствий |
|
Load) |
156 |
Мимикрия (Mimicry) |
|
|
|
(Mapping) |
184 |
Эффект превосходства изображе- |
170 |
Надж (Nudge) |
176 |
Ориентационная чувствительность |
|
ний (Picture Superiority Effect) |
178 |
Посильная нагрузка (Performance |
|
|
|
(Orientation Sensitivity) |
188 |
Метод последовательного раскры- |
|
Load) |
186 |
Прайминг-эффект (Priming) |
|
тия (Progressive Disclosure) |
182 |
Персонажи (Personas) |
|
196 |
Близость (Proximity) |
198 |
Удобочитаемость (Readability) |
188 |
Метод последовательного раскры- |
|
202 |
Эффект красного (Red Effect) |
200 |
Узнавание лучше воспоминания |
|
тия (Progressive Disclosure) |
|
224 |
Отношение «сигнал-шум» (Signal- |
|
(Recognition Over Recall) |
198 |
Удобочитаемость (Readability) |
|
|
|
to-Noise Ratio) |
206 |
Розеттский камень (Rosetta Stone) |
200 |
Узнавание лучше вспоминания |
236 |
Обнаружение угрозы (Threat |
220 |
Позиционный эффект (Serial |
|
(Recognition Over Recall) |
|
|
|
Detection) |
|
Position Effects) |
224 |
Отношение «сигнал-шум» (Signal- |
2З8 |
Трехмерная проекция (Three- |
222 |
Формирование поведения |
|
to-Noise Ratio) |
|
|
|
Dimensional Projection) |
|
(Shaping) |
250 |
Видимость (Visibility) |
240 |
Предвзятость в отношении осве- |
224 |
Отношение «сигнал-шум» (Signal- |
260 |
Система навигации (Wayfinding) |
|
|
|
щения (Top-Down Lighting Bias) |
|
to-Noise Ratio) |
|
|
246 |
Равномерная связность (Uniform |
228 |
Фактор жесткости (Stickiness) |
|
|
|
|
|
Connectedness) |
230 |
Сторителлинг (Storytelling) |
|
|
|
250 |
Видимость (Visibility) |
254 |
Эффект фон Ресторф (von |
|
|
|
252 |
Визуально-пространствен н ы й |
|
Restorff Effect) |
|
|
|
|
резонанс (Visuospacial Resonance) |
|
|
|
|
|
8 |
Универсальные принципы дизайна |
|
|
|
|
|
Как усилить притягательность |
|
|
|
|
|
|
20 |
Эффект «эстетика-юзабипити- |
240 |
Предвзятость в отношении |
14 |
Правило 80/20 (80/20 Rule) |
|
|
(Aesthetic-Usability Effect) |
|
освещения объектов (Top-Down |
16 |
Доступность (Accessibility) |
|
24 |
Выравнивание (Alignment) |
|
Lighting Bias) |
52 |
Сравнение (Comparison) |
|
26 |
Антропоморфная форма |
242 |
«Зловещая долина» (Uncanny |
'- 66 |
Конвергенция (Convergence) |
|
|
(Anthromorphic Form) |
|
Valley) |
68 |
Затраты-выгода (Cost-Benelit) |
|
28 |
Архетипы (Archetypes) |
248 |
Эффект Веблена (VebIen Effect) |
74 |
Разработка комитетом (Design Ьу |
" |
30 |
Выравнивание пространств (Агеа |
256 |
Ваби-саби (Wabi-Sabi) |
|
Committee) |
|
|
Alignment) |
258 |
соотношение обхватов талии и |
78 |
Цикл разработки (Development |
|
32 |
Предвзятость в отношении привле- |
|
бедер (Waist-to-Hip Ratio) |
|
Cycle) |
|
|
кательнасти (Attractiveness Bias) |
|
|
82 |
Ошибки (Errors) |
|
34 |
Предвзятость в отношении «дет- |
|
|
84 |
Эффект ожидания (Expectation |
|
|
скоп» лица (Baby-Face Bias) |
|
|
|
Effect) |
|
42 |
Классическая приспособительная |
|
|
90 |
Запас прочности (Factor 01 Salety) |
|
|
реакция (Classical Conditioning) |
|
( |
92 |
Цепь обратной связи (Feedback |
L.- 46 |
Когнитивный диссонанс (Cognitive |
|
|
|
Loop) |
|
|
|
Dissonance) |
|
|
102 |
Отношение «гиекость-юааеипиги- |
|
48 |
Цвет (Color) |
|
|
|
(Flexibility-Usability Tradeoff) |
|
70 |
Защищенное пространство |
|
|
106 |
Форма следует за функцией (Form |
|
|
(DelensibIe Space) |
|
|
|
Follows Function) |
|
80 |
Точка входа (Entry Point) |
|
|
110 |
Замри-беги-дерись-сдавайся |
|
86 |
Эффект внешнего воздействия |
|
|
|
(Freeze-FI ig ht -Fight -Forfeit) |
|
|
(Exposure Effect) |
|
|
112 |
Мусор на входе - мусор на |
|
88 |
Степень фейсизма (Face-ism Ratio) |
|
|
|
выходе (Garbage In-Garbage Out) |
|
94 |
Последовательность Фибоначчи |
|
|
124 |
Иерархия потребностей (Hierarchy |
|
|
(Rbonacci Sequence) |
|
|
|
01 Needs) |
|
108 |
Фрейминг-эффект (Framing) |
|
|
142 |
Итерация (Iteration) |
|
114 |
Золотое отношение (Golden Ratio) |
|
|
150 |
Жизненный цикл (Lile Cycle) |
|
130 |
Тяготение к охоте или воспитанию |
|
|
160 |
Модульный принцип (Modularity) |
|
|
(Hunter-Nurturer Fixations) |
|
|
162 |
Предельно продвинутое, но при- |
|
156 |
Мимикрия (Mimicry) |
|
|
|
емлемое (Most Advanced Уе! |
|
164 |
Эффект среднего типа лица (Most |
|
|
|
AcceptabIe) |
|
|
Average Facial Арреагапсе Effect) |
|
|
166 |
Нормальное распределение |
|
174 |
Выработка инструментального |
|
|
|
(Normal Distribution) |
|
|
условного рефлекса (Орегап! |
|
|
168 |
NIН-синдром (Not Invented Неге) |
|
|
Conditioning) |
|
|
172 |
«Бритва Оккама» (Ockham's Razor) |
|
190 |
Пропозициональная плотность |
|
|
180 |
Реализация в сравнении с пред- |
|
|
(Propositional Density) |
|
|
|
почтением (Репоппапсе Versus |
|
192 |
Открытое пространство-зона уеди- |
|
|
|
Prelerence) |
|
|
нения (Prospect-Reluge) |
|
|
182 |
Персонажи (Personas) |
|
202 |
Эффект красного (Red Effecl) |
|
|
194 |
Создание прототипа (Prototyping) |
|
208 |
Правило третей (Rule 01 Thirds) |
|
|
204 |
Избыточность (Redundancy) |
|
212 |
Предпочтение саванны (Savanna |
|
|
210 |
Удовлетворительное решение |
|
|
Prelerence) |
|
|
|
(Satisficing) |
|
216 |
Дефицит (Scarcity) |
|
|
214 |
Ошибка масштабирования (Scaling |
|
218 |
Самоподобие (Sell-Similarity) |
|
|
|
Fallacy) |
|
224 |
Отношение «сигнал-шум» (Signal- |
|
|
232 |
Структурные формы (Struclural |
|
|
to-Noise Ratio) |
|
|
|
Forms) |
|
226 |
Схожесть (Similarity) |
|
|
244 |
Принцип неопределенности |
|
228 |
Фактор жесткости (Slickiness) |
|
|
|
(Uncerlainty Principle) |
|
230 |
Сторителлинг (Slorytelling) |
|
|
262 |
Самое слабое звено (Weakest Link) |
|
234 |
Симметрия (Symmetry) |
|
|
|
|
9
Предисловие
Когда
я изучала дизайн в колледже, нам, к
сожалению, не читали курсы психологии
и антропологии. Мы не углублялись в
мотивы поведения человека и почти не
уделяли внимания научному подходу в
дизайне.
В
колледже я четко уяснила, как создавать
форму, но закончила
его
с минимальными познаниями о том, как
человек воспринимает окружающий мир
и какой смысл вкладывает в увиденное.
Книга "Универсальные принципы
дизайна» - шанс восполнить некоторые
из
этих пробелов, развеять мифы и осознать
то многое, что раньше ощущал ось
интуитивно, но не было понято до конца.
Несколько
лет я была поклонницей канала HGTV и
пересмотрела уйму передач про то, как
строить, покупать или обновлять дом,
и ни разу не увидела человека, которому
бы нравились низкие потолки, комнаты
с
маленькими окнами или невыразительный
вид из окна. Авторы книги объясняют
дизайнеру причины, по которым людям
нравятся высокие потолки (см. Эффект
собора) и большие окна, из которых
открывается прекрасный вид (см. Эффект
биофилии). Кто бы мог подумать, что
высокие потолки способствуют творческой
активности, а образы при роды дарят
ощущение благополучия?
Я
никогда не задумывалась, почему одни
предметы трогают наши сердца, а другие
- нет. И не знала, что существует метод
вычисления человеческого отклика на
ту или иную разработку. Интуитивно я
всегда ощущала, что пусть хороший
дизайн вместе с хорошим качеством -
это
главные козыри, но эти два свойства -
лишь часть дела, требуется нечто
большее: нужно постичь то, что кроется
за символами и смыслами. Пропозициональная
плотность рассматривает смысл как
соотношение формы и значения. Она
позволяет дизайнеру рассчитать шансы
своей разработки на отклик у людей.
Может быть, еще важнее то, что она
помогает ему общаться с клиентом так,
чтобы тот сделал выбор в пользу именно
этого продукта.
Книга
«Универсальные принципы дизайна»
научила меня лучше пони мать человеческую
составляющую в дизайне. Дизайн - это
не только то,
что
видит глаз, это больше, чем то, что на
поверхности. Мотивация человека
таинственна и скрывается на подсознательном
уровне,
наравне
с инстинктами и ощущениями. «Универсальные
принципы дизайна" обнажают силы,
движущие мотивацией, и позволяют
дизайнеру понять природу интуитивных
процессов. Эти принципы не из области
гипотез. Они реальны, они основаны на
серьезных исследованиях,
и
действительно работают.
Кимберли
Элам,
заведующая
кафедрой графики и интерактивных
коммуникаций Ринглинского колледжа
искусства и дизайна
Предисловие
11