Как описать интерфейс сайта

woman 2564660 1920 Советы на день

Оценка-анализ интерфейса сайта

Выявим узкие места в интерфейсе и предложим решения

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

И такая участь постигнет и самый замечательный проект! С полезным и уникальным контентом, с необходимой для посетителя информацией. Рассмотрим, на основании чего формируется первое представление о вашем сайте.

Как должен выглядеть сайт

Прежде всего – сам текст. Желателен единый стиль шрифта для всех страниц. Размер шрифта должен позволять его прочесть без всякого напряжения глаз. Для этого важна и контрастность, фон, на котором он размещен. К примеру, черные буквы на сером фоне — это плохо.

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

Сайт одинаково хорошо должен выглядеть в разных браузерах и при разных разрешениях экрана.

Если страниц более 10 — обязательно должна быть форма поиска.

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

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

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

Логотип размещаем в левом верхнем углу (так более привычно). И используем его как ссылку на главную страницу.

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

Анализ дизайна интерфейса сайта

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

Именно эти услуги предлагает наша компания. Мы выявим все ошибки, произведем комплексный анализ, аудит вашего сайта. И, самое главное, сделаем его лучше. Обращайтесь!

Источник

Интерфейс сайта

Дата публикации: 2010-12-20

100

От автора: Хотя основа основ дизайна — это творчество, всё-таки некоторые элементы интерфейса сайта будет полезно иметь в запасе. В этой статье я покажу 15+ самых важных деталей пользовательского интерфейса сайта, которые пригодятся каждому. Используя эти небольшие подсказки, вы сможете получить красивый и практичный дизайн, используя меньше сил и времени.

1. Сетка

Страница, кроме авторского контента, обычно содержит в себе ещё и место под баннер, место под рекламу, под ссылки и прочее… Важно, чтобы эти места не портили общий вид сайта, и были в то же время удобно расположены. Поэтому удобно использовать разметку страницы. Классическая разметка страницы вот такая:

Автор: Найко Михаил

Всем привет, я — Найко Михаил — дизайнер, иллюстратор и блоггер. Живу и работаю в Москве. Кроме страсти к дизайну и веб-технологиям, люблю кино, спорт и свою девушку) Также смотрите мой блог о веб-дизайне.
Сайт: //naikom.ru/blog/ – «Блог о веб-дизайне»

naikom

Бренд (логотип, слоган и т.д.), в левом верхнем углу

Навигация — в верхней части сайта, а также желательно слева

Основное содержание — центр страницы

Объявления — справа страницы

dvm

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Footer не содержит в себе важной информации (либо содержит её дубликат), обычно это ссылки на внутренние страницы и контактные данные.

1a

На этом примере я нарисовал воображаемую сетку

1b

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

1c

2. Вертикальная навигация

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

2b

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

2a

Хороший простой пример вертикальной навигации

2c

Вертикальное меню расположено слева, под логотипом

3. Горизонтальная навигация

Горизонтальная навигация обычно используется для несложных и не длинных списков ссылок. Очень удобно разместить её над или под логотипом. Кроме своей заметности, горизонтальное меню имеет и ещё один плюс — это экономия места. Вертикальное меню забирает пространство, исходя из длины самого длинного слова. А вот горизонтальное меню «растёт» разве что немного в высоту, да и то всегда можно поиграть margin’ами и padding’ами.

3a

Обычное (с хорошим дизайном) горизонтальное меню

3b

Авторы этого меню пошли дальше, и добавили подкатегории

3c

Ещё один пример хорошего оформления горизонтального меню

4. Выпадающие списки

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

4a

Элегантное выпадающее меню

4b

Модифицированное меню, добавлено оформление картинками

4c

Выпадающее меню бывает не только горизонтальным, но и вертикальным

5. Хлебные крошки

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

5a

Текущая страница выделяется цветом

5b

Текущая страница никак не выделяется. Авторы сыграли на логике посетителя)

5c

Текущая страница никак не выделяется. Зато выделены корневые страницы

6. Список записей

6a

Отличный дизайн: содержит заголовок, автора, категорию, количество комментариев и ретвитов, сам текст, картинку и кнопку «читать далее»

6b

6c

Каждая запись оформлена в виде страницы блокнота

7. Архивы

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

7a

Подробный архив, где есть сортировка записей по категориям и тегам

7b

Этот архив включает удобную временную навигацию

7c

Отличный пример, где сочетается архив по датам и по записям

8. Футер с контентом

Времена простеньких футеров, похоже, уходят, и в моду входят футеры красивые и полезные. Туда можно поместить те же архивы, контакты, информацию об авторе (владельце) блога, меню и ещё кучу разной полезной информации. В функции футера вполне может входить привлечение посетителей для просмотра других страниц сайта. Конечно, желательно его красиво оформить. Как вариант, многие используют 3-4 колонки, в которых содержаться внутренние ссылки и информация, а так же подписки на RSS и Email.

8a

Трехколоночный информативный футер

8b

Пример отличного графического оформления футера сайта

8c

Футер с интересным элегантным дизайном

9. Нумерация страниц

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

9a

Тут я, наверное, никого не удивил, т.к. эта схема довольно распространена. Здесь чётко выражена текущая страница, её соседи, а также есть доступ сразу к последним (и первым) записям.

9b

Один из самых часто-встречающихся вариантов оформления прокрутки страниц

9c

А вот более интересный вариант оформления

10. Модальные вкладки

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

20a

На этом примере на каждой новой вкладке — разный тип блюд ресторана

20b

Здесь автор предпочёл разместить в одном месте свои работы, разбив их по категориям

dvm

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

20c

Журнал предлагает выбрать посетителю тот контент, который ему нужен

11. Участвуйте в системе оценок.

Большинство современных сайтов/блогов направлены на взаимодействие с пользователем. И многие стремятся сделать свои странички всё более интерактивными.
Помещайте на сайт кнопки Stumbleupon / Twitter / Vkontake и т.д. — и вы увидите, как страницы оживут.

11a

Один из популярных вариантов — массовое добавление иконок социальных закладок в конце статьи

11b

Пример, в котором авторы делают упор на социальные сети

11c

Здесь читатель может как поделиться статьей с друзьями, так и отложить себе в закладки

12. Информационная панель

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

12a


Google Analytics — один из самых ярких примеров хорошо сделанной информационной панели.

12b

Ещё один пример хорошего дизайна и юзабилити при работе с данными.

12c

Графики используются и в отображении котировок акций. Это — один из примеров оформления.

13. Простая регистрация

10a

Отличный пример просто формы регистрации, хотя и не максимально короткий

10b

На Vimeo размещён вариант самой короткой формы регистрации — всего три(!) поля

10c

Facebook — ещё один пример хорошего исполнения формы

14. Акценты

Оживите свою страницу. Акцентируйте важные слова/фразы. Играйте размером, шрифтом, цветом, оформлением. Ведь первым делом посетитель должен увидеть то, на что вы ему укажите. Правда, немного сложнее заставить его увидеть части страницы в нужном ПОРЯДКЕ. Но и это решаемо.

17a

Важные фрагменты текста выделены бирюзовым цветом

17b

Главная надпись страницы максимально увеличена и написана другим шрифтом

17c

Каждая новая строка «затухает» относительно предыдущей

15. Отображение Коллекций

Многие из нас любят похвастаться своими друзьями, коллекциями картинок, ресурсами, фотографиями и т.д. Чтобы отобразить эти коллекции, используются несколько разных способов.
Кто-то использует сетку из «превьюшек», а кто-то — некий список из картинок.

18a

Автор отобразил свою коллекцию фотографий вот в такой сетке

18b

На этом примере мы видим такое своеобразное отображение дружеских ссылок

18c

Простое и стильное отображение последних работ дизайнера

16. Поиск

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

19a

Простая и мягкая по тонам форма поиска

19b

Пример необычного оформления формы поиска

19c

И ещё один пример нестандартного оформления нашей формы

17. Формы

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

Лучше включить возможность просмотра, на каком этапе заполнения находится пользователь, и сколько ещё осталось до конца. Так же желательно разделять этапы по категориям (общая информация, контакты и т.п.)

13a

На этой странице вы можете наблюдать процесс поэтапного заполнения формы

13b

Ещё один пример поэтапного заполнения формы. Активная стадия выделяется цветом

13c

Другой вариант оформления — активный процесс открывается в новой вкладке

18. Подписки

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

21a

Вместе с кнопками подписки сразу же указано и количество подписчиков

21b

Когда я увидел этот вариант — мне сразу бросился в глаза элегантный дизайн

21c

Максимально простой вариант — лишь кнопки подписки, плюс ссылки на социальные сети

19. Слайдеры

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

22a

Отличный, простой, стильный слайдер.

22b

А это — довольно распространённый пример слайдера

22c

Хороший необычный пример оформления слайдера

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

С уважением Найко Михайл.

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

dvm

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

1

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Источник

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

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

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

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

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

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

2

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

1

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

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

2. Викиум

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

3

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

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

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

4

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

3. Alexis Style

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

5

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

4. Сервис PDF.io

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

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

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

5. Википедия

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

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

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

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

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

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

6. DNS Shop

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

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

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

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

6

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

7

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

8

7. Лабиринт

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

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

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

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

9

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

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

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

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

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

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

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

10

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

11

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

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

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

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

9. Pocketbook

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

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

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

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

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

10. Wisellshop

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

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

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

12

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

13

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

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

14

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

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

15

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

11. Express logistics

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

1

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

2

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

В Google и «Яндексе», соцсетях, рассылках, на видеоплатформах, у блогеров

Источник

Оцените статью
Добавить комментарий

Adblock
detector