Сьюзан написала несколько книг. Последняя из них – «Нейро веб-дизайн: Что заставляет их кликать?» (Neuro Web Design: What makes them click?). Она принимает активное участие в конференциях, проводит семинары и мастер-классы. За свое ораторское умение получила прозвище Леди-Мозг.

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

1. Люди не хотят работать или думать больше, чем надо

• Люди будут выполнять как можно меньше работы, чтобы достичь нужной цели.
• Лучше дать людям минимум информации, из которой они могут выбрать что-то одно и получить по нему более подробную информацию. Я называю это прогрессивное раскрытие информации.
• Вместо того чтобы описывать вещи, лучше показать людям пример.
• Обратите внимание на псевдофункциональность (affordance) элементов веб-страницы, интерфейса или устройства, которые вы проектируете. Если элемент не будет кликабельным, не придавайте ему вид кликабельности.
• Обеспечьте только те функции, в которых действительно нуждаются люди. Не следует полагаться на свое мнение или представление о том, что нужно людям. Чтобы точно это знать проведите исследование вашей аудитории. Если предоставить людям больше, чем им нужно, только ухудшит ситуацию.
• Действия по умолчанию. Позаботьтесь, чтобы по умолчанию люди делали как можно меньше действий, чтобы достичь цели.

2. Люди имеют ограничения

• Люди могут потреблять лишь часть информации, из того что попадает в их поле зрения. Обеспечьте доступ лишь к тому количеству текста и картинок, которые необходимы на данный момент.
• Делайте информацию легко воспринимаемой.
• Используйте заголовки, разделяйте информацию на короткие блоки.
• Люди не обладают многозадачностью. Многократные исследования подтвердили, что человек обрабатывает информацию в один поток.
• Люди предпочитают короткие линии, но лучше воспринимают длинные. Это разница пока остается загадкой и выбор следует делать по ситуации. Но уверена, что люди будут вас просить о том, что в их случае не является лучшим решением.

3. Люди совершают ошибки

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

4. Память человека становится сложнее

• Люди меняют свои воспоминания, что говорит о непостоянстве их памяти. Вы можете верить словам пользователей, но лучше наблюдать за их действиями. Это даст гораздо больше информации.
• Память человека очень хрупкая и быстро теряет информацию, что приводит к ошибкам. Не заставляйте пользователей держать информацию в голове, переходя с одной страницы на другую или от одной задачи к другой.
• Люди могут одновременно помнить 3-4 вещи. Правило «7 объектов ±2» на практике подтверждается редко. В большинстве случаев запоминается лишь половина – 3..4 объекта.

5. Людям свойственна социальность

• Люди всегда будут использовать технологии, чтобы быть социальными. Это подтверждалось на протяжении тысячи лет.
• Люди подвержены влиянию общества, особенно если не имеют собственной позиции. Это называется социальной проверкой. Что объясняет популярность и влияние рейтингов и обзоров, используемых сайтами.
• Если люди что-либо делают вместе в одно и то же время (синхронное поведение), это связывает их вплоть до возникновения химических реакций в мозге. Смех тоже относится к таким действиям.
• Если вы что-то сделали полезного для меня, то я буду чувствовать себя обязанным сделать что-то полезное для вас (принцип взаимности). Исследования показывают, что, если вы хотите, чтобы люди заполнили форму, то сделайте сначала что-то полезное для них, а после попросите заполнить форму. Такой подход более эффективный, чем наоборот.
• Когда вы наблюдаете за человеком, выполняющим какие-то действия, у вас в мозге задействуются зоны, как если бы это делали вы сами (зеркальные нейроны). Мы биологически запрограммированы подражать. Если вы хотите, чтобы люди совершали какие-то действия на сайте, покажите им кого-то, кто совершает эти действия.
• Человек может иметь прочные связи со 150-ю людьми. Прочные психологические связи определены как связи с людьми, которые физически находятся близко. Но слабые связи могут исчисляться тысячами и оказывать такое же влияние (например, Facebook).

6. Внимание

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

7. Люди жаждут информации

• Допамин – химическое вещество, гормон, который заставляет людей искать … пищу, секс, информацию. Процесс изучения чего-либо имеет допаминную природу – мы не можем не хотеть больше информации.
• Люди склонны хотеть больше информации, чем они способны обработать. Наличие большого количества информации заставляет людей чувствовать, что у них есть большой выбор. Большой выбор придает людям чувство контроля, что успокаивает, так как повышает шансы выживания.
• Люди нуждаются в обратной связи. Компьютеру нет необходимости сообщать, что он загружает файлы, но человеку необходимо знать, что происходит.

8. Подсознательная обработка информации

• Большая часть умственных процессов происходит подсознательно.
• Если вы сможете добиться, чтобы пользователь совершил незначительное действие (например, подписка на бесплатный аккаунт), то в дальнейшем велика вероятность, что этот человек совершит более значимое действие (например, апгрейд до платного премиум аккаунта).
• Подсознание принимает или, по крайней мере, участвует в принятии большинства наших решений. Подсознание заботится о выживании и размножении: пища, секс и безопасность. Вот почему эти три вещи всегда привлекают наше внимание.
• На эмоциональную часть сознания влияют изображения, особенно изображения людей, а также рассказы. Эмоции очень сильно влияют на наши решения.
• На поведение людей могут влиять факторы, о которых они даже не догадываются (создание эффекта). Например, такие слова как «отставка», «Флорида», «усталость» могу заставить двигаться молодого человека медленно, словно он пенсионер.
• Подсознание и эмоции часто действуют без нашего контроля. Но мы всегда будем объяснять наши поступки рациональным и осознанным мышлением. Хотя это только частично так, а иногда и вовсе таким не является.

9. Люди создают мысленные модели

• Люди всегда создают мысленную модель о каком-либо объекте или задаче (оплата счетов, чтение книги, использование дистанционного управления)
• Мысленная модель, которая сформировалась у людей в отношении какой-либо задачи, может облегчать или наоборот усложнять работу с интерфейсом, который вы спроектировали.
• Чтобы создать положительный интерфейс, вам необходимо адаптировать концептуальную модель интерфейса с ментальной моделью пользователей или разобраться, как «обучить» пользователя новой мысленной модели
• Метафоры помогают формировать новую мысленную модель. Например, «управлять iPad также просто, как читать обычную книгу».
• Самая главная цель при изучении целевой аудитории – это получить информацию о ментальных моделях пользователей.

10. Визуальная система

• Если страница перегружена информацией, людям сложно в ней ориентироваться. Визуально разбейте информацию на группы, чтобы пользователю было легко сосредоточиться.
• Элементы расположенные рядом, имеют тенденцию восприниматься вместе.
• Используйте шрифты достаточного размера и без декоративных элементов. Это значительно облегчает чтение текста.
• Исследования показывают, что человек использует периферийное зрение, чтобы сформировать более полную картину о том, на что он смотрит. Если человек смотрит прямо на что-либо, это не значит, что он не замечает окружающие элементы.
• Использование цветового контраста делает сложным восприятие информации. Пример такого сочетания – красный и синий цвета. Старайтесь избегать красного текста на синем фоне и наоборот.
• Людям легче воспринимать объекты, если они изображены в перспективе.
• Цвет хороший способ показать, что элементы имеют связи. Но не забывайте использовать для этого дополнительные визуальные средства, так как часть людей плохо различает цвета.

Подсмотрел у хотдезинфо

  en space  

  em space  

  3-per-em space  

  4-per-em space  

  6-per-em space  

  figure space  

  punctuation space  

  thin space  

  hair space  

В CSS за это отвечает свойство white-space:pre.

А здесь я еще дополню часть, но чуток позже :-)

Как я и предпологал, но что-то с визивигом и он не дает мне показать hair space. Сделал скрин у себя после тестов:

Список:
— серым выделены семейства шрифтов, что соответствуют обеим платформам
— имена некоторых шрифтов эквивалентны
— в примечаниях под таблицей есть дополнительная информация

1. Georgia и Trebuchet MS входят в стандартный набор Windows 2000/XP и поставляются с IE Font Pack, поэтому встречаются часто на Windows 98.
2. Символьные шрифты отображаются только в Internet Explorer, для других браузеров стоит заменять их (хотя и Symbol работает в Opera, и Webdings работает в Safari).
3. Book Antiqua так же как и Palatino Linotype, Palatino Linotype включена в Windows 2000/XP, хотя ANTIQUA поставлялась вместе с Windows 98.
4. Это TrueType шрифты поэтому они выглядят отлично только в некоторых размерах (8, 10, 12, 14, 18 и 24 точки при 96dpi)
5. Эти шрифты работают в Safari, но только в обычном стиле, а не с полужирным или курсивом. Comic Sans MS работает только в жирном начертании но не в наклонном.
6. Эти шрифты установлены на классических Mac OS

Как выглядит эта таблица на разных платформах

Mac OS X 10.4.8, Firefox 2.0, ClearType enabled (скриншот Juris Vecvanags)

Mac OS X 10.4.4, Firefox 1.5, ClearType enabled(скриншот Eric Zavesky)

Mac OS X 10.4.11, Safari 3.0.4, ClearType enabled(скриншот Nolan Gladius)

Mac OS X 10.4.4, Safari 2.0.3, ClearType enabled(скриншот Eric Zavesky)

Windows Vista, Internet Explorer 7, ClearType enabled(скриншот Michiel Bijl)

Windows Vista, Firefox 2.0, ClearType enabled(скриншот Michiel Bijl)

Windows XP, Internet Explorer 6, ClearType enabled

Windows XP, Firefox 1.0.7, ClearType enabled

Windows XP, Internet Explorer 6, Basic font smoothing enabled

Windows XP, Firefox 1.0.7, Basic font smoothing enabled

Windows 2000, Internet Explorer 6, Basic font smoothing enabled

Windows 2000, Firefox 1.0.7, Basic font smoothing enabled

Linux (Ubuntu 7.04 + Gnome), Firefox 2.0

Если у кого-то еще какие интересные комбинации будут — пишите в коментах и на почту :)

Итак, фиксированная ширина сетки, что это? И как это можно сделать?

Цель статьи более теоретическая сторона создания сетки, а не ее реализация. В статье не будет затронута реализация сетки средствами CSS – для этого есть более полные источники.

Измерения

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

Холст

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

Так же следует рассматривать различные виды устройств: КПК, мобильные устройства. Сетки для них рассматриваются индивидуально.

Элементарные единицы модульного мышления

Делать страницу начинаем с деления страницы. В примере будет использоваться резолюция 800х600 как усредненный размер.
Сетка создана на примере сайта автора материала – ширина макета 760px.

Простейшая сетка была уже ранее использована для одного из проектов и основывается на золотом сечении. Макет разделен на 2 основных части – 250 и 500 пикселей. Область, предназначенная для навигации, будет разделена на 2 части по 125 пикселей.
Горизонтальная сетка не менее важна для проектирования, но здесь все еще более не предсказуемо, поскольку пользователь может изменять значения межстрочного интервала – независимо от того фиксирован макет или нет.

Пару слов о отступах

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

Создание дизайна

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

Основная часть перед началом отрисовки макета – скетчи на листе бумаги. А далее работа в фотошопе. Сетка накладывается сверху для выравнивания в процессе работы с макетом.

Из фотошопа в браузер

Одним из методов отслеживания переноса макета в браузер – задать фоном сетку для выравнивая основных блоков.

Примечания от переводчика. Для Firefox есть отличное дополнения для работы с сеткой при верстке – она накладывается поверх макета и мы можем отлаживать все элементы непосредственно в браузере.

Часть 1 Часть 2 Часть 3 Часть 4 Часть 5

Оригинал статьи
Перевод: Опанасенко Сергей

Эта заметка будет посвящена более теории чем практической стороне построения сеток для веба.

Загрузка изображений

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

В идеальном мире

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

В реальном мире

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

Не колонками едиными

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

Сетки для «сетки»

В следующих 2-х постах пойдет речь о построении сеток с помощью css.

Часть 1 Часть 2 Часть 3 Часть 4 Часть 5

Оригинал статьи

Перевод: Опанасенко Сергей

Принцип: определяйте цели и задачи сайта до начала работы над проектом.

Заметки: Перед началом дизайнерской работы дайте четкий ответ на вопрос «какие функции будет выполнять сайт (обучать, информировать, развлекать, продавать и т.д.)».

Цели определят целевую аудиторию, функционал, необходимый стиль.

Заметки: Контент – это информация, что представляется на сайте. Важно обеспечить свободный доступ до информации. Исследования показывают, что тематический контент — самый популярный элемент на сайте.

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

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

Что же гармония в цвете?

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

Цветовое колесо придумано Йоханнсеном Итенном в 1960-м году. Он заметил зависимости и установил 26 различных комбинаций в то числе и монохроматическую, сплит дополняющие. Мацуда в 1995 году представил 80 схем.

Психология цвета

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

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

Как начать работать с гармонией цветов

Для начала выбираем тон, а потом гармонический шаблон.

а – исходная фотка, б – оттенки после согласования цветов, с – результат согласования цветов, е – после ручной модерации оттенков.

Все считается математикой:

Работая с изображением Х:

Лучшие результаты достигаются методом минимизации функции относительно шаблонов:

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

Алгоритмом было обработано фоновые цвета для повышенного сочетания с передними цветами.

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

Апдейт 1:

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