Все о веб-сервисах

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

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

Веб-сервисы могут быть как самостоятельными продуктами, так и работать в экосистеме сайта. Например, веб-сервис «Онлайн-калькулятор» работает как самостоятельный продукт, а калькуляторы на сайтах банков работают как интегрированные сервисы.

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

Веб-сервисы отличаются друг от друга по уровню сложности:

Веб-сервисами могут пользоваться как рядовые пользователи, так и предприниматели, компании и организации. Наиболее популярные: почтовые сервисы, стриминговые сайты и видео- и фотохостинги, поисковики, сайты-агрегаторы (бронирование авиабилетов, туров и т. д.), социальные сети, форумы, доски объявлений и др. Давайте рассмотрим подробнее каждый из них.

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

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

На сегодняшний день практически все пользователи сети Интернет используют несколько основных поисковых систем. Лидеры могут отличаться в зависимости от страны, в которой проживают пользователи. Так, например, в англоязычном мире наиболее популярными поисковыми системами являются Google и Yahoo, в китайском сегменте интернет — Baidu, в русскоязычном интернете — Яндекс. Такие известные ранее в России поисковые системы как Рамблер и Mail.ru сегодня используют в своей работе алгоритмы Яндекса, поэтому его можно назвать поисковой системой — монополистом.

На примере Яндекс и Google рассмотрим основные компоненты типовых страниц поисковой системы.

По своей сути современные поисковые системы не являются однокомпонентным продуктом. Это скорее сервисы, в которых помимо поиска содержится множество других сервисов, например, почтовые сервисы, новостные сервисы, онлайн-переводчики и т. д. Поэтому на страницах поисковых системы вы найдете множество различных иконок интегрированных сервисов.

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

Как выглядит Яндекс сегодня:

• Стартовая страница поисковой системы Яндекса выполнена в минималистичном дизайне.

• Главный элемент этой страницы — поисковая строка, в которую пользователь вбивает свой запрос.

• В поисковой строке пользователь сразу же видит эффектно интегрированное УТП компании «Найдется все».

• В поисковой строке также предусмотрена иконка голосового поиска и поиска по картинкам.

• Под строкой расположены актуальные сводки о погоде, загруженности дорог, а также курса валют. Эти данные транслируются напрямую из интегрированных сервисов Яндекс.Погода и Яндекс.Карты.

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

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

• В нижней части экрана расположена кнопка перехода ко всем сервисам экосистемы Яндекс, в левой части — кнопка включения виртуального помощника Алисы.

Страница поисковой выдачи также отличается минималистичным дизайном. Главным акцентным цветом является желтый — фирменный цвет Яндекса, который сразу привлекает внимание к строке поиска.

На странице выдачи пользователь может видеть уже полный логотип, тогда как на стартовой странице он видел только букву Я. Под поисковой строкой можно переключаться по различным способам поиска. Так основной вид поиска — по ключевому запросу, который вбивается в строку, далее поиск через «Картинки», «Видео», «Карты», «Товары», а также поиск запроса в «Переводчике».

Google

Поисковая система Google является частью большой экосистемы веб-сервисов и цифровых продуктов, которые популярны по всему миру. Поисковая система Google существует уже более 20 лет, поэтому ее визуальное оформление ожидаемо менялось с течением времени. Дизайн, как и в случае с Яндексом, изменялся с уклонов в минимализм и функциональность.

Как выглядит Google сегодня?

• Визуальное оформление Google сегодня, в целом, схоже с оформлением поисковика Яндекс. Четко прослеживается стремление дизайнера избавиться от излишней декоративности, упор сделан на минималистичный стиль.

• На стартовой странице главный акцент сделан на логотипе, который располагается прямо по центру экрана.

• Поисковая строка выполнена минималистично и сдержано.

• Дополнительно добавлены кнопки поиска по фотографии, а также включения экранной клавиатуры.

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

• В нижней части экрана расположены служебные и информационные страницы.

• Визуальное оформление страницы выдачи Google по своей структуре идентично визуальному оформлению Яндекса.

• Цветовой акцент здесь сделан на логотипе компании.

• Поисковая строка выглядит минималистично, в ней присутствуют кнопка поиска по картинкам, кнопка включения виртуальной лупы и кнопка «Поиск».

• Под строкой поиска расположены кнопки переходов в разделы: «Поиск в видео», «Поиск по картинкам», «Поиск в новостях», «Покупки», «Еще» (поиск в разделах «Карты», «Книги» и «Авиабилеты»).

• Предусмотрена возможность настроить поиск информации на определенном языке, в определенное время (кнопка «Инструменты»).

• Как и в случае с поисковиком Яндекс, основной контент на странице представлен в виде двух контейнеров (первый — со списком ссылок, второй — с адресом и краткой информации по поисковому запросу).

Необходимо понимать, что такие крупные компании как Google и Яндекс представляют собой большую экосистему веб-сервисов, поэтому визуальное оформление для поисковых систем не создается обособленно. Поэтому если вы хотите поработать над визуальным оформлением этих поисковых систем, вам придется проделать большой профессиональный путь и научиться создавать интерфейсы для самых разных веб-сервисов и объединять их в одну экосистему.

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

Службы электронной почты

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

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

Самыми популярными службами электронной почты в России являются сервисы Яндекс.Почта, Gmail, Mail.ru. Каждый из этих веб-сервисов имеет определенный универсальный набор элементов интерфейса, который может немного варьироваться в зависимости от сервиса.

Яндекс

Рассмотрим типовые страницы Яндекс.Почты.

Основная страница данного почтового сервиса — входящие. В левом столбце находится меню с папками, в которых сообщения распределены по следующим категориям: «Входящие», «Отправленные», «Удаленные», «Спам» и «Черновики». Цветовой акцент в навигации сделан на кнопке «Написать», которая при нажатии открывает окно для создания письма.

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

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

Визуальное оформление Яндекс.Почты нельзя назвать минималистичным. В нем присутствуют яркие иконки, красочные шрифты, цветовые акценты. Стоит отметить, что на основной странице почтового сервиса Яндекс.Почта вы можете заметить рекламный баннер в левой части экрана, и небольшую «рекламную» строку — в центральной верхней части экрана. То, что мы видим, называется контекстной рекламой. Разместить рекламу на почтовом сервисе Яндекс. Почты может каждый владелец бизнеса.

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

Google

При детальном рассмотрении службы электронной почты от Google можно заметить, что уже на стартовой странице отмечается максимально минималистичное оформление.

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

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

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

Пользователи могут создавать форумы для обсуждения практически любого вопроса, которые подходит так или иначе под тематику сайта. Форумы также могут быть частью коммерческого сайта, на тематических разделах такого форума пользователи могут общаться как между собой, так и с представителями компании. Например, на сайте одного из самых-популярных женских онлайн-журналов Woman.ru есть собственный форум, на котором пользователи обсуждают самые разные вопросы и делятся мыслями и идеями.

Обычно визуально форумы довольно насыщены. Финансирование таких площадок, как правило, происходит за счет баннерной и контекстной рекламы, поэтому на страницах форума присутствует большое количество рекламы.

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

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

Рассмотрим несколько типовых страниц форума и разберем расположение элементов. В качестве примера возьмем форум автолюбителей ДРОМ.

На основной странице форума пользователь сразу видит сводку всех разделов, количество сообщений и тему, в которой происходила последняя активность.

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

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

Самыми популярными видеохостингами считаются YouTube, Rutube, TikTok, Vimeo. На видеохостингах размещаются как коммерческие видео, так и научно-популярные и развлекательный ролики, юмористический и новостной контент.

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

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

Аудиохостигами называют веб-сервисы, через которые распространяется аудиоконтент. Это не только музыкальные композиции, но и подкасты, аудиокниги, новостные передачи. Самыми популярными аудиохостингами считаются Spotify, Яндекс.Музыка, YouTube Music, Музыка Вконтакте.

Как правило, хостинги с видео и аудиоматериалами являются частью большой экосистемы, поэтому в своем визуальном оформлении во многом схожи с оформлением основного продукта. Например, видеохостинг YouTube является частью экосистемы Google, Яндекс.Музыка — часть экосистемы компании Яндекс.

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

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

Индустрия хостингов постоянно развивается, поэтому навыки проектирования и оформления подобного рода веб-сервисов сегодня будут востребованы как никогда.

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

Например, известный в России сайт Авито — это доска объявлений горизонтального типа: здесь можно найти как объявления о сдаче квартиры в аренду, так и найти репетитора по математике для ребенка.

В то время как сайт Циан — это доска объявлений вертикального типа: здесь размещаются только объявления из сегмента недвижимости.

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

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

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

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

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