Что делать будем: 11 примеров удачных интерфейсных решений на сайте

imageimage

Интерфейс пользователя, он же пользовательский интерфейс — User interface (UI) — это визуальное представление работы программы. Интерфейс представляет набор не только визуальных графических элементов, но и не графических, текстовых.

Существуют следующие виды пользовательских интерфейсов:

  • Визуальный интерфейс
  • Текстовый интерфейс (интерфейс командной строки)
  • Графический интерфейс пользователя
  • Масштабируемый интерфейс пользователя
  • Индуктивный пользовательский интерфейс
  • Web-ориентированный интерфейс
  • WIMP (графический интерфейс)
  • Оконный интерфейс
  • Тактильный интерфейс 
  • Жестовый интерфейс
  • Голосовой интерфейс
  • Материальный интерфейс пользователя
  • Сенситивные интерфейсы

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

  • меню настроек телевизоров
  • настройки цифровых часов
  • приборная панель автомобиля

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

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

Что такое интуитивный интерфейс?

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

  • меню телевизора и дистанционка;
  • экран часов и его настройки;
  • доска приборов и рычаги управления.

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

Что такое интерфейс сайта?

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

  • пользоваться сервисами;
  • делать заказы и заявки;
  • заполнять анкеты.

Что такое «интерфейс дружественный»? Термин означает, что внешний вид ресурса нравится, механизм его работы понятен, система четко дает рекомендации. Основные требования к интерфейсу сайтов:

  • естественность;
  • непротиворечивость;
  • прямой доступ к системе помощи;
  • логичность.

Что такое интерфейс в компьютере?

Очень важную роль играет и пользовательский интерфейс приложения, потому что по этим показателям оценивается сама программа. Разработчики отмечают такие основные положения:

  1. Ориентир на устройство, для которого приложение делается.
  2. Иконка обязана отражать главную идею.
  3. Область нажатия сенсорного дисплея должна иметь существенную погрешность.

Интерфейс операционной системы

Различают еще такой термин, как «интерфейс операционной системы» – набор средств, которые передают управляющие команды. Далее идет разбивка на подвиды:

  1. Интерфейс командной строки – вид текстового общения между юзером и ПК, когда фразы набираются на клавиатуре вручную.
  2. Программный интерфейс – запросы передают программы. Разработана серия утилит ОС, из которой нужную выбирает пользователь.

Что такое интерфейс программы?

Интерфейс программы – набор руководящих составляющих программы, которые помогают юзеру совершать ряд действий: клавиши и окошки на мониторе. Чтобы увидеть кино, задействуют программу-медиаплеер, а уже регулируется изображение и звук кнопками и движками. Интерфейс системы гарантирует нужные данные в программах, выделяют два типа интерфейсных страниц:

  1. Запросов, где внедрен подход, ориентированный на меню.
  2. Итогов поиска.

Интерфейс игры

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

Статьи по теме:

Что такое прокси, зачем он нужен и как им пользоваться? Не всем известно, что такое прокси, хотя мы сталкиваемся с его работой ежедневно. Под термином понимают промежуточное звено между клиентом и сервером, совокупность служб, которые перерабатывают запросы с личных ПК и направляют по адресу. Лоукостер — что это такое и что нужно знать о лоукостерах? Информация о том, что такое лоукостер и как правильно им пользоваться, будет полезной для людей, которые любят путешествовать и не хотят при этом тратить много денег. Есть несколько хитростей, важных при планировании поездки.
Root-права на Андроид — в чем их преимущество и как их получить? Многие пользователи сегодня слышали о таком термине, как root-права на Андроид. Это учетная запись администратора, которая предоставляет возможность перенастроить устройство по своему желанию, минуя все запреты. NFC в телефоне — что это и как им пользоваться? NFC в телефоне — что это, вопрос закономерный, ведь в модульной индустрии появилось много новых сложных понятий. Как этим пользоваться, что за возможности появляются у гаджетов – секреты новинки открывают специалисты.

25 убойных табличек от хозяев, у которых очень злая собака, коты и …жена Когда ты – патриот: 25 фото, глядя на которые вы будете смеяться и рыдать Ты не ты, когда голоден: 25 фото, которые заставят вас смеяться вслух А мне так удобно: 20+ человек, которых застукали в нелепой позе

Сенсация: это средство есть в каждом доме, и оно отмоет его до блеска! 13 кругов ада принцессы Дианы
15 максимально крутых GIF-ок Любовь с первого взгляда: рейтинг пород самых милых щенков Как выглядят раны от укусов ядовитых животных — фото не для слабонервных

Найдено 4 определения Показать: [все] [проще] [сложнее]

Автор: [российский] [зарубежный] Время: [современное]

—> ИНТЕРФЕЙС

Источник: Большой психологический словарь. Сост. Мещеряков Б., Зинченко В. Олма-пресс. 2004

—> Интерфейс

Источник: Жмуров В.А. Большая энциклопедия по психиатрии. 2012

—> ИНТЕРФЕЙС 1. В компьютерной терминологии – схема, соединяющая центральное запоминающее устройство компьютера и его периферийные части. 2. Более широкое значение: связь между любыми двумя функционирующими единицами, включая организмы. Широко распространенная фраза в инженерной психологии: интерфейс человек – машина.

Источник: Оксфордский толковый словарь по психологии. 2002

—>ИНТЕРФЕЙС

Источник: Душков Б.А., Королев А.В., Смирнов Б.А. Энциклопедический словарь: Психология труда, управления, инженерная психология и эргономика, 2005 г

Показать еще…

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

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

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

Для чего необходим интерфейс

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

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

  Способы форматировать флешку на MacOS

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

Читайте также:

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
А как считаете Вы?
Напишите в комментариях, что вы думаете – согласны
ли со статьей или есть что добавить?
Добавить комментарий