+7(812)309-98-79

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

proektirovanie-interfejsov

Преимущества проектирования интерфейсов

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

Интерфейс – это «лицо» (face) внешний вид сайта, с которым пользователь взаимодействует, (совершает «interaction» - интеракцию). Панель навигации, шапка, заголовки разделов, блоков, счетчики, информеры, разметка страницы – все это образует интерфейс сайта.

Что такое хороший интерфейс?

Человек с открытым, привлекательным и доброжелательным лицом всегда находится в более выигрышном положении – с ним хотят общаться, работать, вступать в человеческие отношения. Точно так же интернет-ресурс уже по первому впечатлению должен располагать к себе.

Наука создания интерфейсов обозначается термином Human-Computer Interaction (взаимодействие человека с компьютером). Сокращенно – HCI. Главная задача проектирования – создать интерфейс, поддерживающий необходимую функциональность ресурса и максимально удобный для использования. 

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

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

Как достичь идеала?

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

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

  • Бритва Оккама или KISS. Принцип английского философа Уильяма Оккама. Смысл его в следующем: любая задача должна решаться минимальным числом действий, а их логика должна быть интуитивно понятной пользователю. Если чего-то можно добиться с одинаковым успехом и двумя, и тремя нажатиями мыши, то третье нажатие – лишнее и должно быть исключено разработчиком. Тот же принцип обозначают аббревиатурой KISS - keep it short and simple (делай короче и проще). Особо ортодоксальные асы программирования расшифровывают его более радикально: keep it simple, stupid (не усложняй, тупица!)
  • Кошелек Миллера. Психологический принцип, который гласит: кратковременная человеческая память способна удерживать не более семи объектов – цифр, букв названий. Элементы интерфейсов (пункты меню, кнопки на панелях, опции, закладки) нужно группировать не более чем по 7 в группе.
  • Видимость отражает полезность или «утиный тест». «Если что-то крякает, как утка, плавает, как утка и выглядит, как утка, то, скорее всего, это утка и есть». Смысл принципа в том чтобы вынести самое полезное и важное на первый план и сделать эти элементы управления легкодоступными пользователю. Например, интернет-магазин должен выглядеть именно, как интернет магазин, а не как что-то иное. Если утка «не выглядит как утка», то редкий любитель станет задумываться, «почему она крякает», большинство перейдет к поиску более подходящего объекта.

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

Интересные факты

  • Дизайн является ключевым фактором для создания доверительных отношений с посетителями сайта.
  • 58% посетителей, испытавших проблемы с удобством использования сайта, на него больше никогда не возвращаются.
  • Проектирование интерфейса позволяет сократить время разработки в несколько раз.
 
На практике мы предлагаем такой алгоритм работы:
1

ПРЕДПРОЕКТНЫЙ АНАЛИЗ

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

2

СОСТАВЛЕНИЕ ПЕРЕЧНЯ ФУНКЦИОНАЛЬНОСТИ

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

3

ПРОЕКТИРОВАНИЕ

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

4

ДИЗАЙН ИНТЕРФЕЙСА

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

5

СДАЧА ПРОЕКТА

Прием работ клиентом может осуществляться одним пакетом или поэтапно. Также мы осуществляем поддержку спроектированного интерфейса.