Каковы этапы разработки интерфейса сайта?

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

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

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

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

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

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

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

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

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

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

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

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

3. Дизайн

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

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

• принимает решение относительно того, какими будут сетка, цвета, шрифты и фон;
• часто продумывает нестандартные элементы управления (например, выпадающие меню и т. п.).

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

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

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

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

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

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

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

• конечно же, следует отдавать предпочтение лучшим веб-дизайнерам (к примеру, VisualPharm :) Однако, к большому сожалению, такие возможности есть далеко не у каждого. Иногда в вашем проекте могут участвовать специалисты, которых вы можете задействовать, а не те, сотрудничать с которыми вы бы очень хотели;
• дизайн – это не точная наука. Даже если ваш дизайнер гениален, у него могут быть разные и не всегда одинаково хорошие идеи. Чтобы не рисковать и не попасть впросак,  следует проверять его идеи в реальных условиях с настоящими пользователями. Отметим, что нововведения возможно протестировать методом бумажного прототипа без существенных затрат; 
• поставьте себе вопрос: как именно дизайнеры интерфейсов становятся отличными дизайнерами? Ответ прост: учатся на опыте тому, какие идеи срабатывают, а какие не очень. Но для получения этого опыта необходимы тесты, которые и проводят специалисты по юзабилити;
• даже самые гениальные веб-дизайнеры способны создать качественный сайт только тогда, когда они находят верное решение для правильно поставленной задачи. Отличный интерфейс не спасет, если функционал выстроен неправильно. А как же веб-дизайнеры узнают о том, что именно нужно посетителям сайта? Именно посредством юзабилити-тестов;
• идеальных вещей не существует. Даже самый первоклассный дизайн можно сделать еще лучше, если поэтапно улучшать его качество. Это возможно сделать с помощью тестов с посетителями сайта. Благодаря данным тестам возможно значительное улучшение пользовательского интерфейса.

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

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

Сроки

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

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

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

Цена

Проектирование и дизайн одной страницы сайта имеют одинаковую стоимость:

• проектирование/дизайн первой страницы стоит 48 800 р. Она имеет большую цену за счет того, что именно первая страница определяет вид всего сайта и должна  учитываться вся его структура;
• проектирование/дизайн остальных страниц – 18 350 р. за каждую.

Таким образом, разработка прототипа (или дизайна) пяти страниц будет стоить 48 800р.+18 350р. х  4 = 122 200р.

Примерная стоимость юзабилити-тестирования 52 500р. – 126 000р.

Масштабные проекты

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

• чат;
• интерфейс голосового общения;
• интерфейс общения с видео;
• управление списком контактов;
• и так далее. 

Для любого из этих модулей имеет смысл пройти все этапы, после чего можно переходить к следующему модулю. Данный метод разработки имеет название Agile ("эджайл"). Эта методология пользуется большим уважением, и о ней можно говорить всякий раз, когда хочется впечатлить заказчиков и красивых девушек:-)