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

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

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

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

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

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

 

1. Сетка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Блоги всё популярней, и у каждого есть список постов, что логично. Каждый такой список состоит из «превьюшек» постов. А «превьюшки» , в свою очередь, из заголовка статьи, краткого содержания, количества комментариев и тому подобной общей информации. Главный акцент мы всегда делаем на названии. Оно должно быть крупным, раскрывающим тему, без лишних слов и содержаться в тегах h1 или h2. «Превьюшка» должна заинтриговать читателя, чтобы у него появился интерес посмотреть пост, полазить по сайту.

7. Архивы

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

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

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

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

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

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

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

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

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

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

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

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

Все мы встречаемся с формой регистрации на сайтах, и многие из нас вынуждены по тем или иным причинам регистрироваться часто. Думаю, все согласятся, что предложение ввести подтверждение e-mail или сложный непонятный текст защиты на 3-й странице формы регистрации нагоняет тоску. Все эти излишества совсем не упрощают жизнь посетителей. Вот почему важна максимально простая форма регистрации. Пользователь не должен думать, что он что-то забыл вписать, или вглядываться в символы . Если же вам хочется вытянуть максимум информации из пользователя , сделайте так:
Чтобы зарегистрироваться он должен ввести логин, почту и пароль. А после регистрации предложите ему заполнить другие поля анкеты.

14. Акценты

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

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

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

16. Поиск

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

17. Формы

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

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

18. Подписки

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

19. Слайдеры

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

 

Этапы разработки интерфейса сайта:

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

Отметим, что предложенные варианты разделения не являются всеобщим критерием. Любую стадию можно разделить на подэтапы, а те, в свою очередь, на подподэтапы. Таким образом, работа выглядит еще глубже и сложнее – и тем самым дороже и привлекательнее для заказчика :) 

1. Сбор необходимой информации

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

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

• просматривает наработки: существующие прототипы (даже если они нарисованы карандашом в блокноте);

• проводит анализ сайтов конкурентов (в том числе, при необходимости проводит их юзабилити-тестирование);

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

2. Проектирование интерфейса сайта

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

• принимает решение относительно того, где именно будут находиться кнопки и текстовая составляющая;

• определяет, каким образом будут сгруппированы элементы;

• продумывает поведение элементов и микротекст.

 

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

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

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

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

3. Дизайн

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

 

На этом этапе дизайнер:

• принимает решение относительно того, какими будут сетка, цвета, шрифты и фон;

• часто продумывает нестандартные элементы управления (например, выпадающие меню и т. п.).

 

Конечно, на каждом этапе работы мы обсуждаем с заказчиком все детали и, если требуется, бесплатно дорабатываем интерфейс. Вы получите ваш заказ или в виде графических файлов (Photoshop), или в виде кода (HTML или XAML). Естественно, на каждом из этапов идет обсуждение и, при необходимости, бесплатная доработка. 

4. Имплементация

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

На этапе имплементации происходит разработка и QA-тестирование интерфейса сайта. Мы на 100 % уверены:разработчикам будет понятно,  что и как делать, исходя из графических файлов (скетчей) и пояснений к ним, которые мы предоставим. Если же возникнет необходимость, мы готовы дорисовать и дописать.

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

5. Юзабилити-тестирование 

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

• конечно же, следует отдавать предпочтение лучшим веб-дизайнерам (к примеру, VisualPharm :) Однако, к большому сожалению, такие возможности есть далеко не у каждого. Иногда в вашем проекте могут участвовать специалисты, которых вы можете задействовать, а не те, сотрудничать с которыми вы бы очень хотели;

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

• поставьте себе вопрос: как именно дизайнеры интерфейсов становятся отличными дизайнерами? Ответ прост: учатся на опыте тому, какие идеи срабатывают, а какие не очень. Но для получения этого опыта необходимы тесты, которые и проводят специалисты по юзабилити;

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

• идеальных вещей не существует. Даже самый первоклассный дизайн можно сделать еще лучше, если поэтапно улучшать его качество. Это возможно сделать с помощью тестов с посетителями сайта. Благодаря данным тестам возможно значительное улучшение пользовательского интерфейса.

 

Обычно мы советуем заказчикам проводить удаленное юзабилити-тестирование сайта. Оно имеет ряд преимуществ – быстро (2-7 дней на тест), доступно (на один-два порядка дешевле крупных исследований), а также в рамках вашей целевой аудитории. Нужны американцы из Техаса 55 лет, которые хотят найти русских невест? Пожалуйста!

Юзабилити-тестирование эффективно как для прототипа, так и для уже готового сайта. Мы рекомендуем вместо одного масштабного теста делать много небольших итерационных. Сделали, провели тесты, внесли корректировки, затем снова протестировали. Благодаря этому можно вовремя обнаружить и исправить ошибки, не заметные с первого взгляда. 

Сроки

Время выполнения работы зависит от необходимого числа страниц сайта. Заметим, что на проектирование и разработку дизайна одной страницы необходимы одинаковые временные затраты. Как правило, нам нужно два рабочих дня для создания прототипа (или же дизайна) одной страницы и пять дней для оформления всего заказа. То есть, за 15 рабочих дней мы можем спроектировать (или разработать дизайн) 5 страниц сайта.

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

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