Главное Свежее Вакансии Образование
Выбор редакции:
0 22 В избр. Сохранено
Авторизуйтесь
Вход с паролем

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Автор статьи: Алёна Ивахненко из команды Montless

0
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Ilya Chikildin
1. Кто такой Уильям ("Вильям") Эдмунд Хикк? Ничего про него не нашел.
2. Правило 3 про психологию цвета - бред.
3. Типография - полиграфическое предприятие.
Ответить
No name
1. William Edmund Hick - или закон Хика, и всё найдёте.
2. О влиянии цветов - Миронов, "Цветоведение", 1984, и ещё множество исследований
3. Типографика - опечатка затесалась
Ответить
Start Fellows
Программа ВКонтакте по поддержке стартапов
Пётр Савченко
Исправите опечатку в тексте?
Ответить
No name
Исправили :)
Ответить
Pragmatika
Продуманные и понятные сайты для продажи товаров и услуг в интернете.
Николай Яковенко
Нельзя просто взять и создать интерфейс, используя эти правила.
Ответить
No name
Это не свод правил и не готовый ответ, а рекомендации
Ответить
Pragmatika
Продуманные и понятные сайты для продажи товаров и услуг в интернете.
Николай Яковенко
Заголовок статьи обещает правила:)
По поводу цвета согласен с Ильей. Про это писал еще Воронежский, если не ошибаюсь (что мы не дрогнув можем слопать томат, несмотря на его "опасную" расцветку). Посмотрите на сайт Альфа банка — красный доминирует, но это не мешает им быть привлекательным банком, ассоциирующимся со стабильностью и инновациями.

Цвет действительно имеет значение в интерфейсе. Однако не столь глобальное. Красная кнопка "Купить", к примеру, ни чем не лучше зеленой (лично проверял на 2-х проектах). Но вот сообщение об ошибке, сделанное зеленым цветом - может вводить в заблуждение.
Ответить
No name
Николай, красный не только цвет опасности. И в статье не сказано, что цвет имеет всегда именно глобальное значение.

Статья указывает на 7 основных важных моментов и мотивирует к изучению темы! 7 правил = 7 важных моментов, которые нужно учитывать и грамотно использовать.
Ответить
Taras Nikitin
Сейчас людей сильно изменили. У людей красный ассоциируется теперь не с солнцем на закате не с огнём, а с каким то "альфабанком". Но тем не менее цвет достаточно глобальное значение имеет, вот если сделать кнопку "купить" серой, сообщение об ошибке вывести в зелёной рамке, то всё пойдёт плохо.
Ответить
Pragmatika
Продуманные и понятные сайты для продажи товаров и услуг в интернете.
Николай Яковенко
Вы передергиваете:)
Я не писал про то, что красный цвет ассоциируется с Альфа банком. Я писал, что банк ассоциируется со стабильностью и инновациями. И при этом использует красный цвет в интерфейсе.
Ответить
Taras Nikitin
Давайте сойдёмся на том, что красный - это "цвет вызова".
И у меня альфабанк не ассоциируется с инновациями и уж тем более стабильностью, может потому, что я редко смотрю рекламу, помню как этот банк колбасило в 2004 году. Да и если быть совсем точным (придираться), цвет у альфабанка не красный, а "Глубокий карминно-розовый".
Ответить
Yuri S Timoshenkov
В маркетинге уже некоторое время сложилось, что красный (с белым и некоторыми другими цветами) – цвет розницы, распродаж, акций.
Ответить
Pragmatika
Продуманные и понятные сайты для продажи товаров и услуг в интернете.
Николай Яковенко
К сожалению, сойдись с вами в любом клише по цвету я не могу. Профессия обязывает быть беспристрастным
Ответить
Taras Nikitin
Хорошо, то есть получается: "цвет это просто цвет и ничего более". Тогда и всё остальное можно рассмотреть с этой позиции: "Альфабанк это просто банк и ничего более". Да и статья, это просто статья и ничего более. Это наверно и правильно, потому что интерфейс интерфейсу рознь - есть интерфейсы управления ядерным реактором, а есть интерфейс игрушки тамогочи и загнать всё в единые правила, пожалуй невозможно, а порой и вредно.
Ответить
Konstantin Boldovskiy
С правилами все нормально.
Третье значение из словаря Ушакова: "Принцип поведения, тот или иной образ мыслей, то или иное обыкновение."
Ответить
Taras Nikitin
Если отбросить некоторые ляпы вроде опечаток, то статья на мой взгляд, в целом полезная.
Ответить
Магазин Таобао
Cайт (движок) с товарами Taobao на русском языке
Магазин Таобао
Теория без практики тяжело усваивается... Хорошо бы примеры с картинками добавить в статью
Ответить
No name
Учтём в следующих наших статьях ;)
Ответить
Alexey Petrov
Интересный материал)
Ответить
Алексей Сироткин
Разумнее никогда, нигде, ни при каких обстоятельствах не упоминать Амазон.
Амазон - не тот сайт, на который стоит ориентироваться в любом из аспектов.
Если в статье упоминается Амазон - сразу ясно, что это рерайт перевода. Читать смысла нет.
Ответить
Konstantin Boldovskiy
Смысл будет, если в поисковике набрать "William Edmund Hick Amazon" и по второй ссылке посмотреть хороший перевод авторской (Jerry Cao) статьи с иллюстрациями и сноской на оригинал.
И не стоит называть пустое пространство белым (на сером сайте оно серое). В оригинале стоит "white space" или "negative space" и пояснение этого термина - просто отсутствие других элементов.
Ответить
Алёна 25282
Алексей, спасибо за ваш отзыв. Учту это на будущее!
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.