Каким должен быть интерфейс сайта?

Согласно множеству проведенных исследований в области психологии и поведенческой реакции пользователей, эффективный интерфейс сайта должен быть:

• простым и самоочевидным – пользователи не должны задумываться над тем, куда им нужно нажать и какое действие совершить, чтобы найти ту или иную информацию. Для этого создаются сценарии взаимодействия с пользователем;
• быстрым –важная и актуальная для пользователя информация должна лежать «на поверхности», в пределах одного-двух кликов (но «вываливание» на пользователя всего и сразу даёт обратный эффект);
• доступным – информация, которую вы хотите, чтобы пользователь увидел, обязательно должна быть размещена на главной странице. Как минимум – на нее должна быть ссылка на самом видном месте;
• видимым – окно поиска, ссылки и различные модули должны быть хорошо видны, не сливаться с общим фоном и не прятаться за лишними панелями. Пользователь приходит на сайт за информацией, а не полюбоваться на дизайнерское решение;
• иметь простые имена – из названий разделов должно быть сразу понятно, что в них находится;
• просматриваемым – текстовая информация всегда должна быть разбита на блоки. Как правило, ее никто вдумчиво не читает, она быстро просматривается;
• не слишком громоздким – это также относится к текстовому контенту. Большие «простыни» текста обычно остаются без внимания.

Главными достоинствами современных веб-сайтов становятся:

• Структурное преподнесение информации,
• Лаконичность,
• Простота,
• Разумная система акцентов.

Единого рецепта не существует: создание веб-интерфейсов изобилует нюансами. То, что отлично работает на сайте одной тематики, может погубить конверсию других сайтов. Именно поэтому проектирование интерфейсов должно быть индивидуальным. Оно основывается не только на идеях клиента и «креативе ради креатива», но и – в первую очередь – на специфике рынка, на котором сайту предстоит обгонять конкурентов.

Удобный интерфейс сайта, как создать, основные ошибки

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

Рассмотрим пример создания неудобного интерфейса. Заказчик обращается в web студию. Заполняет бриф на создание сайта, ему рисуют графический макет полностью по его пожеланиям, создавая “супер” дизайн, чтобы выделиться среди конкурентов так как это главный критерий. Каков будет результат? Мы получим красивый сайт. Пользователь зайдет на такой сайт, который выполнен за несколько сотен тысяч рублей, он будет перенасыщен цветами, анимацией и т.п. Первая фраза пользователя — “Красиво, интересно, а где меню, куда нажимать? А как получить информацию о компании?”. И вот в этом главная ошибка при создании удобного интерфейса для сайта.

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

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

Итак, рассмотрим несколько ошибок при создании интерфейса:

Ошибка	Результат	Как исправить
Перенасыщенность информацией	В этом случае глаза посетителя разбегаются, десятки предложений, акции, купоны, скидки, подписки на уведомления. Такие сайты просто отпугивают.	Старайтесь размещать информацию в одну колонку, вместо нескольких и акцентировать внимание только на главных предложениях, ненавязчиво предлагая остальные. Постарайтесь как можно меньше использовать сервисов обратной связи: онлайн чаты, обратные звонки, всплывающие “зазывалки” и др. Поместите один баннер в шапку сайта с призывом о действии и повторите этот призыв ниже по тексту несколько раз. Не нужно создавать десятки баннеров с этим призывом.
Дизайн	Обратите внимание на дизайн сайтов крупных компаний. Иногда просто кажется, что неужели такая крупная компания и не могла сделать “крутой” дизайн. Но при этом вам все понятно, куда перейти, чтобы получить ту или иную информацию. Посетители уходят с сайта к вашим конкурентам.	При создании дизайна нужно опираться на удобство получения информации. Создавайте дизайн не для себя, а для ваших потенциальных клиентов. Если это корпоративный сайт, то создайте строгий стиль. Если это сайт детской игровой комнаты, то добавьте красок, но не забывайте, что информацию на таком сайте ищут родители.
Формы	Пользователь не может оставить заявку из-за перенасыщенности формы, капчи, которую сложно заполнить и т.п.	Старайтесь делать как можно меньше полей в форме.
Поиск	Пользователь не может найти нужную информацию и уходит с сайта	Расположите поиск в шапке сайта на видном месте.
Меню. Навигация	Ухудшается навигация по сайту	Меню должно располагаться вверху горизонтально в шапке сайта или слева вертикально. В правом блоке располагайте только меню дополнительных разделов. Группируйте элементы меню по смыслу. Помните, что доступ к любой странице вашего сайта не должен превышать трех переходов (кликов).
Обратная связь. Всплывающие окна. Онлайн чаты	Пользователь не может посмотреть то, что имеется на странице сайта. Всплывающие окна мешают ему, он вынужден их закрывать.	Вставьте кнопки на странице вашего сайта, при нажатии на которых появится всплывающее окно. Если вы используете чат, то запретите его произвольное разворачивание. Если пользователь решит задать вопрос, то он сам развернет этот чат.
Онлайн калькуляторы	Пользователь путается во множестве параметрова расчета	Укажите только главные параметры в калькуляторе, если потребуется полный расчет, то создайте форму заявки в вашем калькуляторе.
Изображения	Слишком частое использование изображений негативно влияет на работу с сайтом. Внимание пользователя рассеивается.	Используйте более гармонично текст и изображения.
Сплошной текст	Очень большие тексты тяжело читать.	Разбивайте тексты на разделы, добавьте таблицы и перечисления. Выделяйте заголовки. Используйте иконки в перечислениях.
Анимация	Выпрыгивание элементов страницы сайта часто отвлекает внимание пользователя.	Используйте более плавную анимацию и только при необходимости
Фреймы	Создается несколько блоков, которые часто рассеивают внимание пользователя	Не используйте фреймы
Всплывающие баннеры	Часто отвлекают посетителей сайта. Их не просто закрыть	Поместите блок баннеров в шапке сайта. Посетитель, зайдя на сайт, обязательно заметит ваше предложение и не будет вынужден искать кнопку “закрыть”, чтобы получить большую информацию по вашему ресурсу.
Модальные окна	Посетители более старшей целевой аудитории часто путаются, так как не могут найти кнопку закрытия модального окна и уходят с сайта.	Старайтесь как можно меньше использовать модальные окна. Можно сделать так, чтобы информация разворачивалась прямо на странице (вкладка).

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

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

Интерфейсы в вычислительной технике

Термин «интерфейс» применяется в информатике, поскольку имеется в виду совокупность унифицированных технических и программных средств и правил (описаний, соглашений, протоколов), обеспечивающих одновременное взаимодействие устройств и/или программ в вычислительной системе или обеспечение соответствия систем.

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

Способ взаимодействия физических устройств

Физический (аппаратный интерфейс) — способ взаимодействия физических устройств. Чаще всего речь идёт о компьютерных портах (разъёмах).

• Сетевой интерфейс
• Сетевой шлюз — устройство, соединяющее локальную сеть с более крупной, например, Интернетом
• Шина (компьютер)

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

Способ взаимодействия программных компонентов

Основная статья: Программный интерфейс

• Интерфейс программирования приложений (API) — набор стандартных библиотечных методов, которые программист может использовать для доступа к функциональности другой программы.
• Удалённый вызов процедур
• COM-интерфейс
• Интерфейс объектно-ориентированного программирования — описание методов взаимодействия объектов приложения на уровне исходного кода

Способ взаимодействия человека и техники

Основные статьи: Человеко-машинный интерфейс, Человеко-компьютерное взаимодействие

Интерфейс пользователя: совокупность средств, при помощи которых пользователь взаимодействует с различными программами и устройствами:

• Интерфейс командной строки: инструкции компьютеру даются путём ввода с клавиатуры текстовых строк (команд).
• Графический интерфейс пользователя: программные функции представляются графическими элементами экрана, WIMP
• SILK-интерфейс (от speech — речь, image — образ, language — язык, knowledge — знание): взаимодействие с компьютером посредством речи.
• Жестовый интерфейс: сенсорный экран, руль, джойстик и т. д.
• Нейрокомпьютерный интерфейс: отвечает за обмен между нейронами и электронным устройством при помощи специальных имплантированных электродов.

> См. также

• Эргономика