Наблюдение от Капитана Очевидность: вы сейчас находитесь на сайте. Неважно, что вы сейчас сделаете – продолжите читать эту статью или закроете вкладку…

Да пошутил я насчет «неважно». Не закрывайте, пожалуйста!

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

1. Сбербанк Онлайн

Люблю и пользуюсь этой системой, но один момент в ней нравится больше всего. Сейчас расскажу. При переводе клиенту «Сбербанка» вы заполняете реквизиты:

Интерфейс перевода клиент «Сбербанка» на этапе заполнения реквизитов

Затем нажимаете кнопку «Перевести» и видите следующее окно:

Интерфейс перевода клиент «Сбербанка» на этапе подтверждения перевода

В поле «ФИО» показывается, кому вы собираетесь перевести деньги. Согласитесь, при наборе 18-значного номера карты можно допустить ошибку в цифрах и отослать деньги (и не 100 рублей, как на скриншоте) просто не туда. Если же вы сообщаете свой номер по памяти, ошибиться проще простого!

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

Узнайте, как компании изменить интерфейс так, чтобы пользователи остались довольны.

2. Викиум

Этот онлайн-сервис прокачки мозга начинает радовать уже с первого экрана. Вместо дежурного названия кнопки «Зарегистрироваться» (ссылка «У меня уже есть аккаунт» не дает ошибиться ее предназначении) есть мотивирующая «Начать развиваться»:

Ну, кто не хочет начать развиваться?

То, что идет после нажатия кнопки, тривиальным никак не назвать:

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

В конце – регистрация по электронной почте или через соцсети:

Впереди ждет тестирование и приятный интеллектуальный труд

Такие системы как «Викиум», Lingualeo и похожие на них благодаря своему интерфейсу как бы говорят пользователю: «Я – твой друг, я помогу тебе достичь твоих целей, буду поправлять тебя там, где ты сделал ошибку, и хвалить за любые твои успехи». Это основа эффективного онлайн-обучения (и не только).

3. Alexis Style

В интерфейсе главной страницы меня удивило то, что салон красоты сразу «раскрывает все свои карты». Шапка сайта получается огромной, но при этом очень информативной:

Дизайн двух пальчиков и шоколадный SPA после окрашивания в подарок…

И в самом низу идет панель меню! Считаю интерфейсное решение «цены и акции сразу» удачным – пользователь (а если точнее – пользовательница) видит всю нужную информацию и может принять решение пойти на процедуры, исходя из цены как минимум. Женщинам, безусловно, виднее, к какому мастеру идти.

4. Сервис PDF.io

В этом сервисе есть все, что вы хотели сделать с файлами в формате *.pdf. Лаконичный интерфейс без долгих описаний – просто инструменты.

Здесь еще можно и язык на русский поменять, хотя все и так понятно

Все, что умеет сервис, вы можете делать в десктопном Acrobat Pro DC от Adobe, но уже за деньги. Поэтому я полностью согласен с характеристикой сервиса, данной разработчиками: «Незаменимые онлайн инструменты для работы c PDF».

5. Википедия

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

А знали ли вы, что любую статью оттуда можно скачать в формате PDF?

Файл со статьей без проблем скачивается, несмотря на проблемы, озвученные «Википедией»

Полученный документ выглядит так:

Удобно читаемый документ со структурой от «Википедии»

Вам нужно сделать подборку статей, чтобы прочитать их без интернета? Пользуйтесь возможностью создания PDF в «Википедии». А с помощью PDF.io вы можете объединить их в один файл!

6. DNS Shop

У DNS есть отличный инструмент – конфигурация компьютера, когда вы можете самостоятельно подобрать комплектующие:

Если что-то будет неясно, ссылка на инструкцию пользователя поможет разобраться

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

Вот я выбрал мощный БП для своей конфигурации:

500 ВТ хватит для работы в «тяжелых» приложениях и играх

И все стало хорошо:

Продолжаешь дальше собирать конфигурацию, а не боишься, что все сгорит

Радостно от того, что есть такие сервисы. Грустно от того, что:

Да блин…

7. Лабиринт

Магазин серьезно подходит к интерфейсу карточек своих книг:

1. «Оформление»: понять, твердая или мягкая обложка будет у книги, есть ли иллюстрации, закладка и т. п.

2. «Содержание»: посмотреть, о чем и насколько подробно написано в книге.

Иллюстрации и видео к некоторым книгам – бесценно:

Интерфейс здесь настолько «богатый», что страница может считаться полноценным сайтом

С недавнего времени к параметрам описания добавилось время на прочтение книги с настраиваемыми параметрами:

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

Впервые я увидел подобное в статьях «Текстерры» и уже тогда оценил, насколько это удобно – смогу ли прямо сейчас прочесть материал или лучше оставить на вечер.

Теперь это реализовано и в «Лабиринте». Когда у тебя две сотни книг в очереди на прочтение, такая опция становится очень полезной.

8. Мебель «Москва»

Я за жизнь успел купить много разной мебели. Где-то сотрудник магазина делал 3D-эскиз при нас с женой, иногда мы сами рисовали проект мебели.

Тут компания сделала раздел на сайте, где можно скачать онлайн или офлайн-версию программы для проектирования дизайна:

Здесь сразу же поясняются особенности работы в версиях программы

При скачивании online-версии вы откроете это окно:

Без установки на ПК все-таки не обойтись

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

Интерфейс порадовал двумя вещами:

1. Тем, что такая программа есть на сайте в принципе (это же так логично!).

2. Версия для браузера и для ПК – это учет интересов сразу двух сегментов целевой аудитории.

9. Pocketbook

Фильтр выбора товара прямо на главной странице – классно! Имея в принципе небольшой ассортимент, Pocketbook может позволить себе такое решение:

Не просто просмотр ридеров, а их подбор. Сразу же

Чуть ниже нам предлагают подобрать ридер. И дальше выбор каждого параметра отражается на отображении устройства:

В конце список всех выбранных параметров и список устройств, которые под них подходят

Как владелец ридера Pocketbook 911 и автор этой статьи, скажу – и девайс отличный, и сайт.

10. Wisellshop

Для некоторых изделий в карточке доступна кнопка «Примерить онлайн». Вот как она работает:

Указывайте свои «90-60-90» и узнавайте, будет ли вещь «сидеть»

Я ввел параметры виртуальной мадам и получил такое:

Блин…

Результат записывается и в карточке товара:

0,1 баллов из 10 баллов возвращают даму с пышными формами в суровую реальность

О грустном: Facebook и его интерфейс

К этой соцсети по части взаимодействия с пользователями есть много вопросов. Один из них – «Добавление участников» в группах:

А участник хочет, чтобы его добавили?

Дело даже не в том, что можно поменять название на «Пригласить участников», как это раньше было во «ВКонтакте». Просто однажды ты заходишь в Facebook и понимаешь, что тебя добавили в совсем не нужную тебе группу, не спросив на то согласия.

Все, что вы можете в этой ситуации:

Я изначально не хотел заходить. Хорошо, что хоть это есть!

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

Мы делаем сайты под ключ: пишем текст, готовим дизайн, оптимизируем. Примеры – в портфолио. Подробнее

11. Express logistics

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

Интерактивная карта мира на главном сайте логистической компании

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

Осталось внести информацию о грузе

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

#
Разработка UX
© «TexTerra», при полном или частичном копировании материала ссылка на первоисточник обязательна.