интерфейс сайта что это
Что такое интерфейс и почему все интернет-магазины устроены похоже
Интерфейсы появились задолго до компьютерных технологий — ими пользовались ещё наши бабушки. Рассказываем, что общего у сайта и водопроводного крана.
Интерфейс — это ведь экран сайта или приложения?
Да, на экране именно интерфейс, но это только частный случай. Если взглянуть шире, интерфейс — это посредник в обмене данными между разными системами.
Есть аппаратные интерфейсы, которые обеспечивают взаимодействие двух устройств. Скажем, USB-разъём обеспечивает соединение кабеля с компьютером.
А есть пользовательские интерфейсы — они помогают человеку взаимодействовать с каким-нибудь устройством.
Пишущий дизайнер. Пришла в профессию, получив второе образование, ранее занималась когнитивными исследованиями, SMM и копирайтингом. Пишет о визуальных трендах, делится наблюдениями из отрасли и техническими лайфхаками.
Это значит, что любые страницы с кнопками и иконками — пользовательские интерфейсы?
Да, в том числе. Страницы с кнопками — это цифровые пользовательские интерфейсы. Помимо них бывают ещё аналоговые — осязаемые. Например, кнопки на вашей стиральной машине, коробка передач в автомобиле, пульт от телевизора или даже кран с водой — это всё аналоговые интерфейсы.
Не очень понятно, что общего у водопроводного крана с интерфейсом интернет-магазина
Интерфейс помогает использовать по назначению какую-то штуку, внутреннее устройство которой нам неизвестно. Большинство людей понятия не имеют, как устроен водопровод или сделан сайт. Но вполне могут набрать воды из крана или купить что-то в интернете.
Потому что, скажем, на кране есть переключатель смесителя. Его можно сдвинуть вправо, если хотите воду похолоднее, и влево — если погорячее. А на сайте есть категории с иконками, кнопки с надписями, командные строки, всплывающие окна. С их помощью мы выбираем нужное и совершаем покупку. Цель интерфейсов — помочь человеку выполнить задачу максимально быстро и эффективно.
Тогда почему моя бабушка умеет пользоваться краном, но у неё плохо получается покупать онлайн?
Большинство современных интерфейсов рассчитаны на опытных пользователей. Краны тоже не сразу стали для всех привычными. Раньше стороны переключателя непременно маркировали красным и синим цветом — чтобы было понятно, где холодная, а где горячая вода. Теперь мы привыкли, и всё больше кранов выпускают без маркировки. Вероятно, наконец-то запомнили, с какой стороны какая течёт.
С веб-интерфейсами было примерно так же. В начале нулевых в ходу был скевоморфизм — графика имитировала объекты реального мира. Если на сайте была кнопка, она выглядела как настоящая объёмная кнопка. Это было понятно большинству людей, которые покупали свои первые компьютеры.
Но наступил момент, когда новых пользователей стало меньше. Все, кто хотел начать пользоваться компьютером и интернетом, уже освоились в технологии. И необходимость в реалистичных интерфейсах постепенно отпала.
Теперь вместо детализированной иконки «Меню» с подписью обычно используют так называемый бургер — три горизонтальных полоски. И мы прекрасно знаем, что они означают. Ещё мы знаем, что сайты обычно читают сверху вниз. И не нужны никакие стрелочки для пояснения. Современные интерфейсы рассчитаны на опытных пользователей и более лаконичны.
Зачем нужна лаконичность?
В аналоговых интерфейсах минимализм тоже важен. Вряд ли кого-то обрадует, если кухонная плита будет напоминать бортовой компьютер самолёта. Скорее всего, вы хотите, чтобы на ней было всего две-три полезных и понятных кнопки.
Поэтому все современные интерфейсы сайтов похожи друг на друга?
Да. Более того, уникальность может даже вредить.
Скорость взаимодействия человека с интерфейсом — одна из тех вещей, которые стремятся улучшить разработчики. Именно опыт обращения с похожими сайтами, приложениями, кранами и кухонными плитами помогает людям в работе. Многие из наших действий интуитивны и доведены до автоматизма.
Открывая сайт нового интернет-магазина, вы заранее знаете, что где-то слева или сверху будет список категорий товаров, для каждой категории — каталог, а из каталога можно перейти в карточку любого продукта для детального рассмотрения. Благодаря тому, что все интернет-магазины такие, мы совершаем покупки быстрее.
Если все так любят привычное, почему же появляются новые интерфейсы?
Иногда в интерфейсах делают что-то непривычное большинству — так дизайнеры формируют наш новый пользовательский опыт. Но к этому прибегают только по острой необходимости.
Если не формировать новый пользовательский опыт, не будет движения вперёд. Технологии развиваются: когда-то и сенсорные интерфейсы телефонов были новым опытом, а теперь это всем привычно и удобно. Голосовой поиск и ввод текста раньше были чем-то из разряда фантастики, а теперь ими с радостью пользуются люди старшего поколения или те, у кого проблемы со зрением, — чтобы не мучаться с печатью на смартфоне.
Взять, к примеру, новые системы «Умный дом», которые управляются голосом или жестами. Это тоже интерфейс — правда, называть его принято zero UI (нулевой пользовательский интерфейс). У него нет материальной части, в отличие от аналоговых устройств, и графической визуализации — в отличие от сайтов и приложений. Возможно, это интерфейс будущего, в котором вообще нет ничего лишнего. Его освоение будет для нас новым пользовательским опытом.
Разработкой пользовательских интерфейсов занимаются UX/UI-дизайнеры. Преимущественно они работают над сайтами и приложениями — потому что эти технологии сейчас активно развиваются. Обучиться этой профессии можно на нашем курсе.
Интерфейс сайта
На сегодняшний день одним из основных критериев осуществления успешных продаж с сайта (интернет-магазина) является конверсия. Конверсия сайта – это способность трансформации рядового пользователя, пришедшего на сайт, в покупателя товаров и услуг.
Никакие современные средства продвижения сайта, будь то сео-оптимизация, контекстная реклама, продвижение в социальных сетях не заставят посетителя совершить покупку с сайта, если на нем должным образом не налажена конверсия.
Представьте ситуацию, когда посетитель зашел на сайт и не смог разобраться с его навигацией, запутался в системе авторизации ресурса, не смог найти нужную информацию или понял, что сайт некорректно отображается в его браузере. Все эти факторы и приводят к потере потенциальных клиентов, что диктует необходимость создать дружественный интерфейс на сайте.
Именно создание «дружественного интерфейса» (эргономичного, понятного, легкого и простого в использовании) является основой для создания полноценного ресурса.
Критерии, предъявляемые к интерфейсу сайтов:
1. Естественность (интуитивность) интерфейса
Работа с сайтом у пользователя не должна вызывать сложностей при поиске необходимой информации (элементов интерфейса) для управления процессом решения задачи.
2. Непротиворечивость интерфейса
Если в процессе взаимодействия с сайтом пользователем были применены некоторые приемы работы в системе, то в другой части ресурса эти приемы должны быть подобны. Таким образом, интеграция с интерфейсом должна соответствовать привычным нормам (например, использование клавиши Esc).
3. Неизбыточность интрефейса
Неизбыточность подразумевает монадность информации, т.е. пользователю необходимо вводить минимальную информацию для работы с системой. Не нужно требовать от пользователя ввести информацию, которая была ранее введена или которая может быть логически получена.
4. Прямой доступ к системе помощи
При работе с сайтом, необходимо чтобы он предоставил пользователю понятную и простую систему помощи. Она должна отвечать следующим требованиям: качество обрабатываемых команд, характер информирования об ошибках и подтверждение выполняемых в данный момент сайтом команд.
5. Гибкость интерфейса
Интерфейс сайта должен быть понятен людям с различными навыками обращения с ПК – как любителям, так и профессионалам. Для неопытных пользователей система может представлять иерархическую структуру меню, а для опытных – управление при помощи комбинации клавиш.
6. Логичность интерфейса
Запрос информации, касающуюся одного логического блока, имеет смысл объединить и структурировать. К примеру, если необходимо ввести данные по нескольким клиентам, то необходимо запрашивать всю информацию вместе, и фамилию, и номер полиса.
7. Эргономика интерфейса
Интерфейс
Об интерфейсе часто говорят, когда имеют в виду взаимодействие человека и компьютера или приложений. В статье разберем определение интерфейса, что это за взаимодействия, их виды и особенности.
Что такое интерфейс
Интерфейс — это «проводник» между человеком и программой, операционной системой, техническим устройством или способ взаимодействия приложений между собой. Человек дает команды с помощью интерфейса, устройство их анализирует и отвечает. Основные задачи, для решения которых он предназначен:
ввод и отображение информации (звук, изображение);
управление отдельными приложениями;
обмен данными с другими устройствами;
взаимодействие с операционной системой.
Интерфейс подразумевает взаимодействие не только человека и техники, но и компьютер-программа, программа-программа, компьютер-устройство. Например, когда устройства подключают к системному блоку компьютера, как способ взаимодействия используют разъем.
Виды интерфейсов
Одни виды взаимодействия позволяют получить больше контроля над компьютером или смартфоном, но требуют дополнительных навыков. Другие — более комфортные, но предоставляют меньше возможностей. У каждого типа есть свои особенности.
Командная строка
Через командную строку можно выполнить максимальное количество операций — это прямой способ общения с операционной системой. Чтобы набрать команду, нужно ввести текст на языке компьютера и нажать Enter, компьютер начнет выполнять.
Минус способа в том, что он подходит только подготовленным пользователям. В командной строке нет вспомогательных графических элементов, для взаимодействия придется освоить язык, а чтобы команды работали — нельзя допускать ошибок.
Графический и текстовый
Графика упрощает взаимодействие с компьютером, с ней работать гораздо легче и комфортнее, чем с текстом. В роли графического интерфейса выступают такие элементы:
другие графические элементы.
Например, при взаимодействии с Windows используют иконки и окна, для ввода подключают мышь. На смартфоне устройством ввода служит сенсорный дисплей.
Текстовый интерфейс не использует изображения: команды отдаются с помощью текста и информация предоставляется в текстовом виде.
Жестовый, голосовой, тактильный и нейронный
Жестовое взаимодействие позволяет отдавать команды движениями пальцев. Оно применяется при работе с сенсорным экраном смартфона. Например, жест «вверх» заставляет появиться всплывающее окно.
Голосовой интерфейс — это управление голосом. Гаджет распознает и выполняет звуковые команды.
Тактильный подразумевает взаимодействие с помощью осязания: вибрация или чувствительность к силе нажатия.
Нейронный интерфейс передает команды прямо из мозга в компьютер, для этого в мозг вживляют электроды. Его применяют в медицине: так парализованный человек может общаться с окружающим миром.
Программный, аппаратный, аппаратно-программный
Взаимодействие программ между собой обеспечивает программный интерфейс. Программы направляют запросы друг другу и получают ответы. Например, чтобы постоянно показывать актуальную погоду в виджете или на компьютере, одна программа постоянно отправляет запрос другой, а та — предоставляет свежие данные.
Аппаратный предназначен для организации связи между физическими устройствами через разъемы и слоты. А когда компьютер считывает информацию с жесткого диска — это совместная работа программы и физического устройства, то есть, аппаратно-программный интерфейс.
Пользовательский интерфейс
Все, с чем взаимодействует обычный пользователь, когда включает компьютер, заходит на сайт или в приложение, все, что человек видит на экране — это пользовательский интерфейс.
Веб, игровой сайт
Веб-интерфейс позволяет работать через браузер. Это взаимодействие программ в интернете. Например, можно зайти на сайт магазина и там же оплатить покупки. Браузер в этом случае будет веб-интерфейсом, благодаря которому страницы взаимодействуют.
Игровой — это то, как пользователь может взаимодействовать с игрой, какие команды может отдавать, в какой форме представлена игровая информация и как игра будет реагировать на действия.
Материальный
Это тактильный контакт с гаджетами. Он включает в себя прикосновения к сенсорному экрану, действия с мышкой или джойстиком.
Интерфейс в телефонах
На смартфонах используют сенсорный экран, который подразумевает жестовой и тактильный интерфейсы. Пользователь прикасается к элементам, операционная система или приложение получают от него команды и выполняют их.
Каким должен быть интерфейс
Важно, чтобы интерфейс соответствовал целям и контексту. Если это взаимодействие специалиста с компьютером, то главное — это способность обеспечивать получение информации и выполнение задач. Для обычного пользователя он имеет не только техническое, но и эстетическое значение: работа с ним должна быть удобной и понятной.
Заключение
Для пользователей интерфейс — основа работы с ПК или телефоном. От того, насколько проста или сложна эта система, будет зависеть удобство управления устройством. Разработчики могут менять системные структуры для сложных задач. Неопытным пользователям лучше покупать устройства с понятным интерфейсом, чтобы облегчить себе работу.
Что делать будем: 11 примеров удачных интерфейсных решений на сайте
Наблюдение от Капитана Очевидность: вы сейчас находитесь на сайте. Неважно, что вы сейчас сделаете – продолжите читать эту статью или закроете вкладку…
Да пошутил я насчет «неважно». Не закрывайте, пожалуйста!
В любом случае все ваши действия – взаимодействие с интерфейсом сайта и браузера. В статье вы узнаете про 10 примеров интерфейсных решений сайта. По моему мнению, они удачные, но вам решать, так ли это.
1. Сбербанк Онлайн
Люблю и пользуюсь этой системой, но один момент в ней нравится больше всего. Сейчас расскажу. При переводе клиенту «Сбербанка» вы заполняете реквизиты:
Затем нажимаете кнопку «Перевести» и видите следующее окно:
В поле «ФИО» показывается, кому вы собираетесь перевести деньги. Согласитесь, при наборе 18-значного номера карты можно допустить ошибку в цифрах и отослать деньги (и не 100 рублей, как на скриншоте) просто не туда. Если же вы сообщаете свой номер по памяти, ошибиться проще простого!
Однажды я неправильно сообщил номер своей карты – мне перезвонили и сказали, что чуть не сделали перевод не тому человеку.
2. Викиум
Этот онлайн-сервис прокачки мозга начинает радовать уже с первого экрана. Вместо дежурного названия кнопки «Зарегистрироваться» (ссылка «У меня уже есть аккаунт» не дает ошибиться ее предназначении) есть мотивирующая «Начать развиваться»:
То, что идет после нажатия кнопки, тривиальным никак не назвать:
Вы не просто регистрируетесь в системе: она строит для вас индивидуальную программу обучения, исходя из тех навыков, которые вы хотите развить.
В конце – регистрация по электронной почте или через соцсети:
Такие системы как «Викиум», Lingualeo и похожие на них благодаря своему интерфейсу как бы говорят пользователю: «Я – твой друг, я помогу тебе достичь твоих целей, буду поправлять тебя там, где ты сделал ошибку, и хвалить за любые твои успехи». Это основа эффективного онлайн-обучения (и не только).
3. Alexis Style
В интерфейсе главной страницы меня удивило то, что салон красоты сразу «раскрывает все свои карты». Шапка сайта получается огромной, но при этом очень информативной:
И в самом низу идет панель меню! Считаю интерфейсное решение «цены и акции сразу» удачным – пользователь (а если точнее – пользовательница) видит всю нужную информацию и может принять решение пойти на процедуры, исходя из цены как минимум. Женщинам, безусловно, виднее, к какому мастеру идти.
4. Сервис PDF.io
В этом сервисе есть все, что вы хотели сделать с файлами в формате *.pdf. Лаконичный интерфейс без долгих описаний – просто инструменты.
Здесь еще можно и язык на русский поменять, хотя все и так понятно
Все, что умеет сервис, вы можете делать в десктопном Acrobat Pro DC от Adobe, но уже за деньги. Поэтому я полностью согласен с характеристикой сервиса, данной разработчиками: «Незаменимые онлайн инструменты для работы c PDF».
5. Википедия
Не представляю себе людей, которые ни разу не работали в «Википедии». Кто-то даже писал или модерировал статьи из этой энциклопедии.
А знали ли вы, что любую статью оттуда можно скачать в формате PDF?
Файл со статьей без проблем скачивается, несмотря на проблемы, озвученные «Википедией»
Полученный документ выглядит так:
Удобно читаемый документ со структурой от «Википедии»
Вам нужно сделать подборку статей, чтобы прочитать их без интернета? Пользуйтесь возможностью создания PDF в «Википедии». А с помощью PDF.io вы можете объединить их в один файл!
6. DNS Shop
У DNS есть отличный инструмент – конфигурация компьютера, когда вы можете самостоятельно подобрать комплектующие:
Если что-то будет неясно, ссылка на инструкцию пользователя поможет разобраться
Тут для меня было странным, почему не поставили блок питания сразу же после процессора и материнской платы в выборе. В этом случае не было бы уведомлений о несовместимости.
Вот я выбрал мощный БП для своей конфигурации:
И все стало хорошо:
Радостно от того, что есть такие сервисы. Грустно от того, что:
7. Лабиринт
Магазин серьезно подходит к интерфейсу карточек своих книг:
1. «Оформление»: понять, твердая или мягкая обложка будет у книги, есть ли иллюстрации, закладка и т. п.
2. «Содержание»: посмотреть, о чем и насколько подробно написано в книге.
Иллюстрации и видео к некоторым книгам – бесценно:
С недавнего времени к параметрам описания добавилось время на прочтение книги с настраиваемыми параметрами:
Вы узнаете, за сколько прочтете книгу, исходя из ежедневного объема чтения
Впервые я увидел подобное в статьях «Текстерры» и уже тогда оценил, насколько это удобно – смогу ли прямо сейчас прочесть материал или лучше оставить на вечер.
Теперь это реализовано и в «Лабиринте». Когда у тебя две сотни книг в очереди на прочтение, такая опция становится очень полезной.
8. Мебель «Москва»
Я за жизнь успел купить много разной мебели. Где-то сотрудник магазина делал 3D-эскиз при нас с женой, иногда мы сами рисовали проект мебели.
Тут компания сделала раздел на сайте, где можно скачать онлайн или офлайн-версию программы для проектирования дизайна:
При скачивании online-версии вы откроете это окно:
Нажатие по кнопке скачивания офлайн-версии сразу запускает процесс сохранения дистрибутива программы в нужное место.
Интерфейс порадовал двумя вещами:
1. Тем, что такая программа есть на сайте в принципе (это же так логично!).
2. Версия для браузера и для ПК – это учет интересов сразу двух сегментов целевой аудитории.
9. Pocketbook
Фильтр выбора товара прямо на главной странице – классно! Имея в принципе небольшой ассортимент, Pocketbook может позволить себе такое решение:
Не просто просмотр ридеров, а их подбор. Сразу же
Чуть ниже нам предлагают подобрать ридер. И дальше выбор каждого параметра отражается на отображении устройства:
В конце список всех выбранных параметров и список устройств, которые под них подходят
Как владелец ридера Pocketbook 911 и автор этой статьи, скажу – и девайс отличный, и сайт.
10. Wisellshop
Для некоторых изделий в карточке доступна кнопка «Примерить онлайн». Вот как она работает:
Указывайте свои «90-60-90» и узнавайте, будет ли вещь «сидеть»
Я ввел параметры виртуальной мадам и получил такое:
Результат записывается и в карточке товара:
О грустном: Facebook и его интерфейс
К этой соцсети по части взаимодействия с пользователями есть много вопросов. Один из них – «Добавление участников» в группах:
Дело даже не в том, что можно поменять название на «Пригласить участников», как это раньше было во «ВКонтакте». Просто однажды ты заходишь в Facebook и понимаешь, что тебя добавили в совсем не нужную тебе группу, не спросив на то согласия.
Все, что вы можете в этой ситуации:
Интерфейсы сайтов должны быть такими, чтобы не только не заставляли меня думать (спасибо Стивену Кругу за это), но и не вызывали такое негодование, доводящее до создания петиции.
11. Express logistics
В таких «суровых» B2B-нишах, как международные перевозки, нечасто встретишь интерактивные интерфейсные решения. Поэтому нам показалось хорошей идеей разместить на первом экране главной страницы сайта транспортно-логистической компании векторную карту мира с интерактивными элементами.
Работает это так — клиент выбирает часть континент, куда ему нужно отправить или забрать груз. По клику всплывает список направлений, по которым компания может организовать грузоперевозку. А если нажать на страну, откроется страница расчета стоимости услуг по этому направлению.
Такая карта удобна тем, что потенциальному клиенту не нужно бродить по сайту в поисках решения своей задачи — путь с главной страницы занимает пару кликов.
В Google и «Яндексе», соцсетях, рассылках, на видеоплатформах, у блогеров