Интерфейсы сайта: 11 примеров

  Автор:

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

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

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

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

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

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

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

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

2. Викиум

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

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

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

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

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

3. Alexis Style

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

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

лицом к лицу: 20 примеров дизайна главной странички веб-сайта

4. Сервис PDF.io

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

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

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

5. Википедия

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

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

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

Приобретенный документ смотрится так:

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

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

6. DNS Shop

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

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

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

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

И все сделалось отлично:

Отрадно от того, что есть такие сервисы. Обидно от того, что:

7. Лабиринт

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

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

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

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

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

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

Любо-дорого поглядеть: 20 примеров карточек продуктов

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

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

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

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

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

интерфейс повеселил 2-мя вещами:

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

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

9. Pocketbook

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

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

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

В конце перечень всех избранных характеристик и перечень устройств, которые под их подступают

Как обладатель ридера Pocketbook 911 и создатель данной статьи, скажу – и аксессуар хороший, и веб-сайт.

10. Wisellshop

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

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

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

Итог записывается и в карточке продукта:

О печальном: Facebook и его интерфейс

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

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

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

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

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

11. Express logistics

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

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

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

Источник

Интересная статья? Поделитесь ею пожалуйста с другими:
Оставьте свой комментарий:
Оставьте свой комментарий или вопрос

на Блоге
в Вконтакте
в Фейсбук