7 правил создания привлекательного интерфейса

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

Правило 1. Не замусоривайте интерфейс

Чем больше вариантов вы предложите посетителю, тем сложнее ему сделать выбор в пользу чего-то определённого.

Физиолог Вильям Эдмунд Хик ещё в 1950 году экспериментально доказал: время принятия решения пропорционально количеству предлагаемых вариантов. Пользователи хотят разные варианты, но не слишком много!

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

Субменю должны быть спрятаны. Нажав кнопку можно открыть более подробное меню. Если же оба меню сделать видимыми, внимание пользователя будет перегружено.

Правило 2. Используйте правильные обозначения

Значки могут стать лучшими друзьями дизайнера, если он понимает их значение.

Явные – четкие обозначения, например, слова или картинки, показывающие функцию.

Картинки, паттерны — это значки настолько употребимые в сети, что их значение стало общеизвестным, например, знак плейера.

Спрятанные — обозначения, которые попадают в поле зрения при определенных условиях, например, «падающее вниз» меню.

Метафоричные — часто комбинируются с другими типами обозначений. Они показывают функцию метафорой. Например, ручка – написание текста.

Негативные — эти значки показывают недоступную функцию (обычно имеют серый цвет).

Обозначения сделают ваш сайт эстетичным и лёгким в использовании.

Правило 3. Грамотно используйте силу цвета

Красный – опасность, сила, страсть – в действительности стимулирует кровоток, когда мы смотрим на него.

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

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

Зеленый – рост, баланс, достаток.

Синий – доверительный, приглашающий, спокойный. Наиболее популярный цвет в интернете. Он привлекательный и успокаивающий, это сделало его популярным в финансовых и социальных СМИ.

Пурпурный, фиолетовый – таинственный, роскошный, творческий – этот королевский цвет по прежнему содержит в себе дух декадентства.

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

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

Правило 4. Изучите и используйте разные типы симметрии.

Горизонтальная – стандартная форма симметрии, которая приходит на ум: обе половинки экрана имеют равный вес и распределение элементов – безопасный выбор.

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

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

Правило 5. Используйте фото реальных людей

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

Правило 6. Поддерживайте согласованность

Обратите внимание на следующие моменты:

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

Унификационные элементы, иконки – они должны быть унифицированными во всем сайте и по желанию, уникальными.

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

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

время на изучение сайта.

Используйте белое пространство наилучшим образом:

• Внимание – чем больше белого пространства вокруг элемента, тем больше внимания он привлекает.
• Элегантность – белое пространство добавляет воздушности роскоши и наполненности вашему сайту.
• Групповые отношения – более близкое расположение объектов говорит об их более тесной связи (сходные функции, свойства). Белое пространство такой же элемент, как и остальные, и должно использоваться

Правило 7. Не забывайте о факторах доверия

Описание продукта должно соответствовать картинке.

Включайте благодарности от клиентов, фото своей команды.

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

Алёна Ивахненко из команды Montless