Курс «Создаем сайт руками профессионалов»
Этот мини-курс для тех, кто планирует создать сайт с помощью фрилансеров или веб-студии. Вы сможете точно понять, обращаться ли вам на биржу или к знакомому специалисту, доверить ли проект агентству или самостоятельно выбрать веб-дизайнера, программиста и копирайтера. Узнаете, как правильно составить техническое задание, чтобы точно определить разумную стоимость проекта и реальную длительность исполнения, а также как по пунктам проверить качество исполнения и получить на выходе работающий сайт, чтобы не платить за последующие бесконечные переделки или доработки.
Итак, вы решили создать сайт и доверить этот вопрос профессионалам. Возможно, у вас уже есть идея, как это должно выглядеть. Возможно, есть лишь желание поручить все специалистам, и пусть они сделают «как надо», потому что вы эксперт совсем в других вопросах. Вы ничего не понимаете в загадочном юзабилити, не знаете, какой хостинг вам нужен и на какой платформе размещать ресурс. Более того, вы не слишком-то стремитесь вникать во все эти детали.
Этот мини-курс для тех, кто не хочет ничего делать «своими силами». Он для тех, кто хочет создать сайт руками профессионалов. Выдать понятное техническое задание и на выходе получить корректно работающий интернет-ресурс, который создан в соответствии с пожеланиями заказчика.
Вы узнаете, как правильно сформулировать свои желания, как выбрать подрядчика и не ошибиться, как контролировать процесс создания сайта и, самое главное, как принять готовую работу, чтобы затем ее не пришлось переделывать или заказывать заново.
Уровень сложности: минимальный
Специальные знания: не требуются
Содержание курса:
- Формулировка технического задания и структуры сайта.
- Как понять, что нужно вашему сайту из функционала?
- Самописный сайт с нуля — да или нет?
- Агентство, фрилансеры или универсальный специалист? Выбираем правильно.
- Что предложат разработчики? Как разобраться в предложениях подрядчиков?
- Как выбирать подрядчика?
- Сколько платить за разработку сайта?
- Подрядчик выбран. Что нужно делать дальше?
- Договор подписан. Техзадание выдано. Начинается работа.
- Как оценить проделанную работу?
- Чек-лист для проверки юзабилити сайта.
Формулировка технического задания и структуры сайта
Думать над сайтом обычно начинают с внешнего вида — каким бы вам хотелось видеть будущий ресурс. Большинство агентств/фрилансеров просят показать примеры понравившихся страниц, чтобы сделать «нечто похожее». Именно такой подход и приводит в будущем к неизбежной проблеме: выясняется, что половина желаемых функций просто не может быть реализована. Например, потому что конструктор, с помощью которого сайт делался, не предусматривает подобных возможностей.
Как правильно: на первом этапе с помощью нескольких листов бумаги и ручки вы продумываете функциональный прототип будущего сайта. Этот пункт вы можете выполнить самостоятельно, никаких специальных знаний не понадобится, или можете заручиться поддержкой бизнес-аналитика, который поможет вам спроектировать функциональную модель сайта с точки зрения реализации бизнес-процессов.
Берете первый лист и пишете на нем: «Главная страница». Какие на ней реализованы функции? Например, меню. Куда оно ведет? Есть ли на этой странице поп-ап-окно чата с консультантом? Если да, где оно находится? Есть ли галерея ваших работ? Интернет-магазин?
Составьте список страниц, на которые попадает пользователь с главной страницы сайта. Например, «Контакты», «Блог», «Магазин», «Онлайн-бронирование» и т.д. Возьмите соответствующее количество листов бумаги и превратите каждый из них в соответствующую «субстраницу». И для каждой из них точно так же запишите те функции, которые они выполняют. Здесь — календарь для выбора дня консультации. Здесь — карта проезда и форма обратного звонка. Здесь — статья со ссылкой на форму онлайн-записи.
Продумайте, как будет проходить ваше взаимодействие с клиентом. Он будет вам звонить сам или у вас будет реализована функция обратного звонка? Если вы делаете интернет-магазин, то очень важно сразу понимать, как будет происходить взаимодействие с клиентом, как будут продаваться товары, в том числе если речь идет об онлайн-курсах. Будет ли у каждого пользователя личный кабинет? Как в нем будут отображаться материалы — в виде ссылок, PDF-файлов, архивов для загрузки на компьютер? Будет ли форма обратной связи с тренером или эта функция реализуется на стороннем ресурсе, например в закрытой группе Facebook?
Для каждой страницы запишите ее полный функционал.
Теперь на отдельном листе соберите воедино «структуру» вашего сайта постранично и нарисуйте навигацию, начиная с главной страницы. Куда и каким путем попадает пользователь? Куда система перебрасывает его, когда действие совершено? Например, курс заказан, товар куплен, контактные данные отправлены и т.д.
На другом листе запишите все виды функций, которые должны быть реализованы на сайте:
- Личный кабинет:
- обратная связь с тренером;
- автоматическая загрузка купленных курсов;
- отправка уведомлений о дополнениях в текущем курсе.
- Отслеживание рекламных кампаний:
- пиксель;
- колл-трекинг.
- Подписка на рассылку:
- письмо-подтверждение;
- автоматическая цепочка писем.
- Переключение языков:
- английский;
- русский;
- немецкий.
По такой схеме вы заполняете все страницы. Загадочное юзабилити (удобство пользования сайтом) выстраивается исходя из задуманных схем взаимодействия посетителя с сайтом.
Как понять, что нужно вашему сайту из функционала?
У любого коммерческого сайта, как «визитки», так и интернет-магазина, три базовых функции:
— информационная;
— интерактивная;
— транзакционная.
В первую очередь сайт информирует о том, что здесь предлагается: какие товары или сервисы, каким образом их можно оплатить и получить, какие условия взаимодействия, какие гарантии качества (опционально — возврата).
Интерактивная функция — это все формы коммуникации с клиентом: онлайн-чат, рассылка, форум, комментарии, форма обратной связи или звонка.
Транзакционная — это покупки вне зависимости от того, совершаются они непосредственно на сайте с помощью онлайн-оплаты или сайт выступает в роли инструмента маркетинга (убеждения, вовлечения), а покупка совершается на месте, например в магазине, в салоне или барбершопе.
Продумайте, какие модули отвечают за реализацию этих функций.
Будут ли на вашем сайте:
— раздел новостей и статей, корпоративный блог;
— возможность поиска;
— форма обратной связи, звонка, онлайн-заказа;
— информирование клиента по почте или через SMS;
— система взаимодействия с клиентами (CRM), с помощью которой вы сможете отслеживать работу отдела продаж. Например, оставлена, но не оплачена заявка — каковы дальнейшие действия? Написать напоминание, позвонить по указанному телефону, выяснить причины, почему не произведена оплата, снять возникшие возражения или найти альтернативный способ оплаты, так как все предложенные на сайте не могут быть использованы.
Важно: обязательно сформируйте договор публичной оферты и страницу политики конфиденциальности, в том числе если вы работаете с клиентами из Евросоюза, страницу GDPR — уведомления о сборе контактных данных. В соответствии с Законом о защите персональных данных вы можете использовать контактную информацию только в том случае, если посетитель сайта дал на это свое согласие. Важно, чтобы на сайте была реализована эта функция: подтверждение персонального согласия на обработку контактных данных;
— сбор статистики и информации, необходимой для анализа данных (о посещаемости, каналах привлечения трафика, эффективности рекламных кампаний);
— базовые и боковые меню;
— каталог товаров / рубрикатор;
— фильтры для выбора товаров с определенными параметрами;
— корзина для покупок онлайн;
— приложения для удобного выбора онлайн-оплаты;
— автоматический складской и бухгалтерский учет;
— возможность шеринга страниц в социальных сетях;
— обычная и быстрая регистрация через аккаунты в социальных сетях;
— интерактивные отзывы;
— галерея или 3D-экскурсия;
— интерактивная карта для выбора точки посещения;
— интерактивные тесты для сбора информации и контактов;
— автоматическое или ручное переключение языка сайта;
— места для размещения сторонней рекламы и монетизации сайта;
— возможность загрузки файлов на сайт и скачивания материалов с сайта.
Важно: если на вашем сайте планируются какие-либо сложные, нестандартные сервисы, например автоматическая интерактивная консультация, программа для определения социотипа, система подбора индивидуального гардероба и т.д., напишите подробно, как она должна функционировать и какой результат должен получить клиент. Чаще всего готовых программных решений для нестандартных сервисов нет, и их нужно будет заказывать программисту отдельно. Поэтому для подрядчика важно понимать, насколько возможна будет интеграция стороннего кодового элемента в ваш сайт.
Самописный сайт с нуля — да или нет?
Если вы задались целью создать супероригинальный сайт, например второй Facebook или Avito, есть большая вероятность, что вам предложат сделать его самописным, то есть сверстать с нуля без помощи онлайн-конструкторов и готовых коробочных решений CMS (систем управления контентом). Роль разработчика на себя берет программист или компания, в которой данный программист служит. С одной стороны, вы сможете реализовать самые необычные пожелания и требования. С другой — если вы неопытны, лучше не соглашаться, потому как для работы с программистом-разработчиком требуется четкое понимание хотя бы терминологии, при помощи которой с вами будут разговаривать. Иначе вероятность получить «не то, что хотели» стремится к 100%.
Во-вторых, скорее всего, вы окажетесь один на один с системой, в которой ничего не будете понимать: ни как работать, ни как добавить новый товар или убрать ставшие неактуальными предложения. Вы будете целиком и полностью зависеть от разработчика: его времени, его настроения, его расценок и загруженности. Кроме того, может выясниться, что он не способен реализовать половину из описанного в техническом задании, но половина уже сделана, и доделать то, что начато, некому…
На самописном сайте неизбежны ошибки, глюки и проблемы, которые придется устранять в режиме реального времени. И снова зависеть от воли, настроения и загруженности специалиста. А если он надумает пропасть на неделю, а то и на месяц, вы вряд ли успеете быстро найти ему замену.
Каждая новая функция, которую вы надумаете внедрить, будет сопровождаться длительным этапом разработки, написания, тестирования, отладки и внедрения. За деньги. За достаточно большие деньги.
Поэтому если у вас нет абсолютных показаний к созданию самописного сайта, развернутого бюджета и гигантского запаса времени, то на предложения «написать сайт с нуля» лучше отвечать однозначным отказом. Как бы ни убеждали. Программисты в этом вопросе похожи на драгдилеров, они любят подсаживать клиентов на иглу разработки. Удобно и хлебно. Но не вам.
Когда функциональное техзадание (ТЗ) готово, можно переходить к поискам специалистов, способных взять ваш будущий сайт в работу.
Агентство, фрилансеры или универсальный специалист? Выбираем правильно
Подрядчики по разработке сайтов делятся на три типа:
— агентство полного цикла;
— узкие специалисты-фрилансеры (веб-мастер, дизайнер, копирайтер, тестировщик и т.д.);
— универсальный специалист-разработчик.
Выбор по большому счету зависит от того, кто может взять на себя ответственность за результат, полностью совпадающий с техзаданием. Например, если вы планируете простой по функционалу и дизайну сайт-визитку, то с ним легко может справиться универсал, наделенный художественным вкусом.
Однозначный плюс — цена. За разработку берут совсем небольшие деньги, обычно несложный проект стоит от 50 до 300 долларов. Но стоит понимать, что за эти деньги вы получите микросайт с шаблонным набором инфографики и шрифтов, с картинками из фотостока и минимальным набором функций, заложенных в конструкторе.
Однозначный минус — это большой риск получить «кривой», «некрасивый», не пригодный к продвижению и не адаптируемый под различные браузеры сайт. Универсал чаще всего не может сделать все, сразу и одинаково качественно — написать тексты, нарисовать графику, сверстать код и настроить все необходимые параметры для эффективного продвижения в поисковых системах. Уникумы встречаются, но вероятность такой встречи крайне мала. Практика показывает, что чаще всего получается достаточно слабый и не очень презентабельный проект.
Кроме того, работают специалисты обычно в какой-то узкой нише разработки, например предпочитают или умеют делать сайты только на WordPress, а с другими платформами не работают. И вас благополучно уговорят делать проект там, где удобно им, чтобы не терять клиента и возможность заработка.
Если планируется создать сайт с интерактивными формами и «красивостями», то однозначно стоит рассматривать или агентство, или отдельно взятых специалистов.
Плюс работы с узкоспециализированными профессионалами в том, что каждого из них вы можете выбрать по отдельности. Например, дизайнера, чьи работы вам нравятся. Веб-мастера, которого вам уже неоднократно доводилось видеть в работе у своих коллег. Копирайтера, чьи тексты давно славятся свойством продавать все, что имеет рыночную цену.
Минус такой работы — непредсказуемость, риск срыва сроков, сложность заключения официального договора и предъявления претензий в случае несоблюдения условий. Чаще всего специалисты берут предоплату, которую будет очень сложно вернуть, если что-то пошло не так. Впрочем, агентство — тоже не гарантия стопроцентного качества.
Плюс — вы можете найти достаточно бюджетный вариант исполнения, так как многие фрилансеры, в особенности начинающие таланты, только что ушедшие на вольные хлеба, берутся за первые проекты для портфолио за смешные деньги.
В этом же и минус — не всегда получается рассчитать свои силы и выполнить в срок все взятые одновременно проекты.
Если вы работаете по всем вопросам с одним человеком, вам легко с ним договориться и он видит весь объем своей работы сразу.
Минус в том, что быть одновременно хорошим дизайнером, копирайтером и веб-мастером практически невозможно. Одна из частей проекта почти обязательно пострадает.
В идеале стоит заключать договор оказания услуг либо пользоваться сервисом «безопасная сделка» на бирже фриланса. Любое оформление договорных отношений поможет вам сберечь нервы и деньги.
Если же вы задумали сложный проект с фильтрами, онлайн-платежками, логистикой и интеграцией с «1С», то экономить на работе с официальным агентством однозначно не стоит.
Плюс агентства в том, что проект берет в работу готовая слаженная команда, и каждый из сотрудников — специалист в своей области, знающий от и до, как работает его «элемент». Между звеньями этой цепи есть постоянная связь, то есть дизайнер взаимодействует с копирайтером, копирайтер — с веб-мастером и все вместе — с проект-менеджером.
Вы заключаете официальный договор, в котором точно прописываются все детали технического задания, и, чтобы провести оплату по бухгалтерии, компании понадобится получить от вас акт приемки-передачи работ, подписанный вами по факту принятой и одобренной работы.
Минус — то, что агентство подразумевает зарплату менеджеров, оплату налогов, рекламу, зачастую аренду офиса, соответственно, микробюджетным ваш проект не будет.
Риск — вы не знаете, кто на самом деле занимается вашим сайтом. Вполне возможно, что те же самые фрилансеры с биржи, к которым вы могли бы обратиться лично. Очень часто клиентские проекты отдают на аутсорс подешевле.
Кроме того, вы не сможете обсудить свои пожелания с непосредственными исполнителями, все коммуникации будут проходить через менеджеров — часть информации будет искажена.
И, наконец, агентства тоже грешат желанием набрать побольше заказов, так как стабильного потока клиентов в этой сфере практически не бывает. И есть шанс, что ваш сайт будут делать параллельно с десятком других. Возможно, по готовым удобным шаблонным схемам, чтобы «оптимизировать» время и трудозатраты.
Поэтому однозначного ответа нет и быть не может, но вы можете сделать свой выбор максимально обоснованным и безошибочным.
Что предложат разработчики? Как разобраться в предложениях подрядчиков?
Лучшее, чем вы поможете своему проекту, — это отсутствие спешки. Рынок исполнителей огромен, четкое техническое задание у вас есть, вы можете отправить его нескольким исполнителям на оценку и выслушать их предложения.
Самое главное для вас сейчас — найти оптимальный вариант разработки. Изучить детально возможности различных движков и конструкторов — как функциональные, так и дизайнерские.
Не важно, как и на чем удобно работать исполнителям. Важно, как будет удобно и выгодно вам. И в процессе разработки, и в дальнейшей работе с сайтом, когда вы будете его обновлять, добавлять материалы или товары, взаимодействовать с клиентами и чинить то, что неизбежно ломается.
Узнайте, на каком движке или конструкторе хотят работать ваши потенциальные подрядчики. Посмотрите, как выглядят сделанные ими проекты. Причем смотреть нужно не только на внешний вид (хотя это тоже важно), но и на удобство пользования всем тем функционалом, который заложен в эти сайты. Можно ли в интернет-магазине совершить покупку без долгого старательного поиска кнопки «купить»? Не тянется ли рука закрыть сайт с прыгающими картинками или цветными текстами на цветном фоне? Понятна ли навигация по сайту?
Еще один важный момент, на который обращают внимание щепетильные специалисты: плохим тоном считается скрытый пиар за счет клиента — ссылка на разработчика внизу клиентского сайта. Устройте небольшой «промышленный шпионаж»: покажите работы понравившегося фрилансера или агентства «диванным критикам» из любой группы, где можно получить обратную связь. Любой веб-мастер, дизайнер или копирайтер, скучающий в социальных сетях, укажет на профессиональные ошибки, о наличии которых вы можете даже не подозревать. Зато вы сможете получить более точную оценку портфолио выбранного специалиста или веб-студии. Понятно, что такая оценка вряд ли будет стопроцентно объективной, но по итогам вы получите более-менее равновесное мнение: с одной стороны, самовосхваления подрядчика, с другой — жесткая критика конкурентов. Метод может показаться странным, но работает он прекрасно.
Когда вы определились с методом разработки (движком, конструктором), поинтересуйтесь, можно ли осуществить на этой платформе задуманные вами функции. Попросите веб-мастера показать вам примеры или хотя бы описание плагина, с помощью которого можно внедрить ваши пожелания. Если ответ вызовет затруднения или разговор плавно перетечет в русло «мы сами все допишем», есть повод усомниться, будет ли самописная часть корректно работать и встраиваться в систему. В этом случае стоит или поискать альтернативные решения для сайта, или отказаться от возможной нестабильной функции. Например, на популярной платформе Tilda не реализуется функция автоматического переключения языка. И решить эту проблему до сих пор не смогли.
Определяясь с платформой, оцените также ее визуальные возможности — набор шрифтов, шаблонов, встроенных блоков. Далеко не все дизайнерские идеи можно воплотить без долгой мучительной переверстки кода. Кроме того, большинство красивых шаблонов выглядят круто только потому, что в них идеально подогнаны друг к другу цвета фотографий и графические элементы. Но стоит что-то поменять — и композиция сразу становится «кривой» и «унылой». Просто имейте это в виду, когда будете с восторгом рассматривать готовые шаблоны, которые вам предложат «подогнать».
Как выбирать подрядчика?
Для начала определиться, хотите ли вы работать с людьми в своем городе или вас устроят удаленные специалисты. Часто жители маленьких и небогатых регионов берут за работу поистине смешные деньги при серьезных талантах. С другой стороны, риск вы тоже понимаете.
Составьте список подрядчиков, с которыми можно поговорить предметно. В идеале в нем должно быть примерно 5–10 кандидатур, которым вы отправите техническое задание на расчет. Из этого числа выберите 2–4 человек (или компании), с которыми будете обсуждать детали работы, сроки, загруженность, возможность выполнения всех описанных в ТЗ условий, а также гарантии.
Внимательно просмотрите портфолио. Причем сначала с компьютера, затем с мобильного телефона, в идеале — с помощью разных браузеров и мобильных операционных систем либо эмуляторов.
Некоторые специалисты предлагают оценивать собственный сайт разработчика. Понятно, что сделать плохо себе — это нелогично. Тем не менее, что удивительно, у некоторых талантливых мастеров может не быть собственного сайта, и это ни разу не показатель. Если у специалиста при этом огромное портфолио прекрасных работ и десятки довольных клиентов, которые готовы подтвердить вам высокую квалификацию подрядчика, — наличие или отсутствие собственного сайта вас смущать не должно.
Ориентироваться на отзывы тоже стоит с оглядкой. Во-первых, умелые веб-мастера способны «сломать» даже алгоритмы Google, и делается это с помощью двух хитрых манипуляций. Во-вторых, на сайте всегда будут вывешиваться исключительно парадные речи довольных клиентов. Поэтому проверить отзывы на агентство или специалиста-одиночку можно просто с помощью поисковой сети. Прочитать, включив критическое мышление: был ли этот человек клиентом, в чем именно заключается смысл конфликта, не похоже ли это на плановый «слив» конкурентами?
Обязательно обратите внимание на коммуникативную совместимость. Человек может быть прекрасным специалистом, но если вам некомфортно с ним общаться, то работать будет проблематично. В том числе не стоит связываться с людьми, которые охотно обсуждают и осуждают своих предыдущих клиентов, в особенности переходя на личности, названия компаний и конфиденциальные данные.
И стоит насторожиться, если специалист впадает в крайности — например, начинает «разносить» ваш проект и агрессивно доказывать, что так никто не делает и сделать нужно абсолютно по-другому. Скорее всего, просто не умеет, но хочет денег. Подозрительно выглядит и обратная сторона — когда нет никаких вопросов, предметов для дискуссий и ни единой попытки отговорить вас от сложной или не совсем разумной идеи, которую вы по незнанию реалий решили воплотить. Практика показывает, что такая линия поведения наблюдается в том же самом случае — очень нужны деньги, а потом уже «как-нибудь разберемся».
Сколько платить за разработку сайта?
Понятно, что однозначной цены на условный сайт нет и быть не может. Проект, который кажется простым, может оказаться сложнейшей интерактивной системой с суперзащитой от взлома. И, наоборот, пышный с виду сайт — плохо сделанной малофункциональной квазисистемой.
Хорошая новость: задирать цены просто потому, что «деньги очень нужны» или «у клиента карман бездонный», перестала примерно половина работающих на рынке. Конкуренция не позволяет.
Плохая новость: если вы плохо разбираетесь в теме, вам все еще могут с легкостью «впарить» ненужные услуги и завысить стоимость работ.
Именно поэтому рекомендуется оценивать предложения сразу нескольких компаний или фрилансеров, чтобы можно было определить «среднюю температуру по больнице». Кроме того, если указанная цена серьезно превышает среднерыночную, этому должно быть обоснование, и оно единственное, других не бывает: такой формат сайта хорошо продает и быстро окупается. Это обоснование легко доказывается — прямым вопросом клиентам, получившим многократную выгоду от сотрудничества.
Подрядчик выбран. Что нужно делать дальше?
Обсудите окончательную цену. Есть специалисты, которые работают по фиксированному прайсу, но есть большая вероятность, что вам удастся сбить цену — и ощутимо. Часто агентства изначально завышают первую стоимость, подразумевая, что клиенты обязательно начнут торговаться. Если вам приводят контраргументы — например, «зато мы не срываем сроки даже на один день», предложите записать этот пункт в контракте: за каждый день просрочки сверх указанной даты финальная стоимость проекта уменьшается на прогрессирующую сумму. Скорее всего, вы насладитесь монологом на тему «а если вы сами будете виноваты — вовремя не утвердите, начнете требовать 100500 доработок». Вспомните, что у вас есть четко описанное техническое задание, из которого полностью понятно, что нужно делать и в какой срок это уложить.
Если агентство опытное, то может рассчитать точно, сколько понадобится дней даже с учетом всех возможных доработок и капризов клиента.
Следующий пункт — опциональный, но желательно, чтобы он был. Это договор на оказание услуг.
Если его нет, то не стоит переживать сильно — закон в любом случае на вашей стороне. Даже заключенный без печати и подписи договор в переписке — вполне себе документ. Не бойтесь показаться параноиком: ваш сайт — это не предмет экспериментов и не ресурс для пополнения чьего-то кошелька. Это рабочий инструмент и репутационное лицо вашего бренда. Кроме того, на нем содержатся конфиденциальная платежная информация и контактные данные ваших клиентов. Логично предположить, что ни о каком слепом доверии и тем более обидах за предусмотрительность речи быть не должно.
Если вы подписываете договор с агентством, в идеале необходимо учесть пункт о защите информации и конфиденциальных данных. В практике известны случаи, когда ради самопиара веб-студия выкладывала статистику или платежные данные своих клиентов, причем делали это достаточно известные в профессиональном мире компании.
Обязательно приобретайте домен и хостинг на свое имя — это важно, чтобы не попасть в распространенную ситуацию, когда вы оказываетесь неспособны управлять собственным сайтом без участия третьих лиц.
Договор подписан. Техзадание выдано. Начинается работа
Поправки в функциональный прототип внесены. Следующий шаг — формирование прототипа визуального, то есть дизайн-макет, как ваш сайт будет выглядеть на экране компьютера и мобильного телефона.
Вы выбираете цвета, шрифты, картинки, их расположение, решаете, какие кнопки или элементы будут анимированы и т.д. Утверждаете и подписываете макет. Именно для этого и было необходимо на предыдущем этапе оценить визуальные возможности выбранных движков или конструкторов, чтобы понимать, какие пожелания выполнимы, а какие в данной системе не заложены проектом.
После того как макет утвержден, дизайнер прорисовывает визуальную составляющую, а веб-мастер (или универсальный двуединый специалист) соединяет ее с функциональной.
Параллельно, учитывая, что постраничная структура уже готова, подготавливаются тексты для каждой страницы. Страницы проходят верстку.
Все эти процессы проходят обычно без вашего участия либо оно минимально — то есть вы оцениваете в процессе, как «ложатся» элементы, гармонично ли сочетаются.
Важно: примерно 20% людей — дальтоники, примерно 30% людей страдают нарушениями зрения. Поэтому, как бы ни хотелось креативной красоты, лучше отказаться от лишней пестроты в пользу стопроцентной читаемости. То же самое касается любого мелкого шрифта на сайте: если это способны прочитать вы, не факт, что смогут прочитать 100% вашей целевой аудитории.
Когда все элементы расставлены, дизайн готов, функции настроены и все, в общем-то, работает, сайт переходит в режим тестирования ошибок, опечаток, забытых или некорректных ссылок.
Как оценить проделанную работу?
Итак, сайт готов. Вам все нравится внешне, возможно, финальный вариант «выстрадан» в сложной борьбе с креативом дизайнера или желанием агентства сделать что-то по-своему, потому что им так удобнее. Тем не менее проект закончен, и вас просят подписать акт приемки-передачи работ.
Снова не спешите. Сайт должен не только (и не столько) красиво выглядеть, сколько работать корректно. Как проверить?
Кросс-браузерность
Это первый из важных параметров — как сайт отображается в различных браузерах. Можно протестировать программными методами, например с помощью эмуляторов (browsershots.org, www.browsercam.com), а можно заранее напроситься в гости к людям, у которых есть разнокалиберная техника с разными операционными системами и браузерами. Один и тот же сайт, если он сделан криво, будет смотреться по-разному и не всегда отображаться корректно в Safari, Opera или Chrome. То же самое с мобильной версией — она должна правильно выглядеть на всех устройствах. И на всех страницах.
Валидность кода
Второй важный момент — насколько код страниц правильно читается машинными «мозгами». Да, с вами могут поспорить, что код самих поисковых систем далек от идеала, но им можно. А вам — нет. Причем внешне эти ошибки никак не отображаются, вы видите красивую картинку, а Google видит, что на странице отсутствует тег Н1, который показывает, где на этой странице заголовок. Или документ будет неверно отображаться в социальных сетях, потому что у него не стоит или криво настроена микроразметка.
В любом случае, если человек назвался специалистом и взялся верстать сайт, код должен проходить валидацию поисковой системой.
Проверить валидность можно с помощью онлайн-программы validator.w3.org и с помощью инструмента «Яндекс.Вебмастер». Сайт нужно зарегистрировать в сервисе и выбрать инструмент «Валидация». Вы все увидите.
Оценить работу программиста, программистом не являясь, мягко говоря, сложно, и все же я дам несколько советов, чтобы вы могли иметь некое представление об уровне программиста, работающего с вашим проектом.
Человекопонятный URL
Вид каждой страницы должен представлять собой конструкцию типа moysite.com/document.
Но не moysite.com/документ и не moysite.com/dcmntsjiperoierioprwerwiop и не moysite.com/doks&?+=.
Системные адреса типа moysite.com/news.php?cat=last&id=788 или /news/last/451 — это тоже недоработка.
Человекопонятный адрес страницы — это написанный латиницей, буквами, максимум цифрами адрес, который можно прочитать глазами и воспроизвести руками без запинки.
Безопасность кодов и файлов
Простейшие понятия о безопасности вы можете проверить самостоятельно. Например, в адрес любой страницы добавить апостроф. То есть вместо адреса moysite.com/document500 сделайте moysite.com/document50’0 и посмотрите, что будет. Здоровый код покажет ошибку 404. Если у вас получилась страница supplied argument is not a valid MySQL, требуйте как минимум доработки и скидки. То же самое проделайте со всеми текстовыми полями, куда вводит информацию пользователь — своими руками. Например, в форму отправки контактных данных.
Если вы используете загрузку файлов с компьютера пользователя (например, документов для выполнения домашнего задания или фото в галерею), убедитесь, что стоит ограничитель на виды разрешенных к загрузке файлов. Если этого ограничения нет и вы можете загрузить любой файл на усмотрение — можете садиться за стол переговоров и повторить процедуру с требованием доработки, скидки и яростных извинений. Программист агентства только что допустил 100-процентную вероятность взлома вашего сайта.
Проверьте, может ли неавторизованный пользователь получить доступ к закрытым страницам.
Получает ли пользователь доступ к странице после регистрации или оплаты?
Не индексируются ли служебные страницы, закрытые от пользователей?
Не поленитесь выяснить, видит ли поисковая система закрытые страницы (на них должны быть поставлены кодовые метки, запрещающие индексацию, а порой и даже обход этих страниц — во избежание).
Наличие реакции сайта на отсутствие активных действий со стороны пользователя.
Автоматическая остановка авторизации после простоя.
Корректность работы сертификата безопасности SSL.
Наличие уведомления о статусе соединения.
Наличие лога сайта для аналитики.
Ограничение количества неудачных попыток входа.
Если вы работаете с финансовыми данными, проверять безопасность сайта лучше с помощью платного аудита, которым занимается специально обученный человек — веб-аудитор.
Скорость загрузки сайта
Еще один параметр, который архиважен в работе. От этого зависит не только то, сколько человек уйдут, не дождавшись, пока подгрузятся все картинки и анимированные элементы, но и то, как поисковые системы будут воспринимать ваше «детище». Воспользуйтесь любым измерителем скорости загрузки онлайн, пусть будет, например, webo.in или любой другой, какой подскажет Google.
Проверка функций
Протестируйте все целевые функции: переходы по ссылкам, работоспособность кнопок, возможность выбрать товар, найти категорию, применить фильтр, купить что-либо, зарегистрироваться, получить рассылку и т.д.
Посадите за компьютер 3–4 человек и попросите проделать то же самое: зарегистрироваться, купить, подписаться…
Визуальная привлекательность и удобство пользования
Протестируйте сайт на предмет визуальной красоты и удобства пользования с помощью самых предвзятых и агрессивных пользователей, например из любой группы скучающих домохозяек в социальной сети. Вы узнаете обо всех малейших ошибках, мешающих совершить покупку или насладиться чтением полезной статьи.
Спросите напрямую, видится ли сайт современным или, наоборот, безвкусным, аляпистым или симпатичным, профессиональным или «сделанным на коленке».
Понятна ли логика сайта? Удобна ли навигация? Не мешают ли какие-то элементы дизайна?
Как воспринимается цветовое решение?
Можно ли без труда прочитать тексты?
Выглядит ли сайт сбалансированным с точки зрения графики и текста?
Понятно ли истолкованы функции, предложения, формы?
Есть ли сложности с заполнением форм?
Всем ли приходят уведомления на почту, рассылка, оповещение о покупке, онлайн-чек?
Нет ли в тексте ошибок, которые остались незамеченными?
Нет ли избитых, неоднозначно трактуемых фраз и предложений?
Понятно ли целевое действие на каждой странице?
Нет ли ссылок, ведущих в никуда?
Нет ли страниц без текста или с его условным заменителем?
На странице 404 должно быть понятно, где находится пользователь и что ему делать дальше (например, перейти на главную).
У каждой страницы должен быть фавикон — маленькая иконка сайта в адресной строке.
SEO
Наличие переадресации 301 со старых страниц на новые.
Наличие на каждой странице метаданных: title, description, keywords, заголовка H1 и подзаголовков H2-H6.
Наличие микроразметок.
Наличие и корректность работы файлов sitemap и robots.
Ошибка в адресе приводит к перемещению на страницу 404, а не куда-то еще.
Тексты составлены с учетом требований по уникальности, тошноте и заспамленности — эти параметры не нарушены.
Защита от стрессовой нагрузки
Проверьте, как работает сайт при повышенной нагрузке, например наплыве пользователей, при массовой авторизации, при возрастании количества данных в базе, при продолжительной нагрузке. Это актуально для всех интернет-магазинов. Если веб-мастер неспособен показать вам, как работает сайт в стрессовом режиме, обратитесь к веб-аудитору.
Чек-лист для проверки юзабилити сайта
► Скорость загрузки не больше двух секунд.
► Сайт оптимизирован под тот регион, в котором продвигается. По умолчанию используется язык региона, данные представлены в привычной метрической системе.
► Переключение языка, если оно есть, видно. При этом переключается страница, а не пользователь перебрасывается на главную вне зависимости от того, где он был до этого.
► Любой товар или услуга доступны в 2–3 клика. Для любого предложения есть кнопки покупки, заказа, коммуникации с менеджером. Сквозная кнопка коммуникации на сайте.
► Инфографика интуитивно понятна.
► Интерфейс сайта (основное меню, кликабельный логотип, подвал) сквозные.
► Стандартизированная расстановка ключевых элементов (логотипа, контактов, формы обратной связи, поиска, фильтров и т.д.).
► Понятная терминология с четким призывом к действию.
► Отсутствие элементов автоматического контента (автозапуска музыки или видео).
► Отсутствие модальных окон через весь экран.
► Наличие кнопки моментального перемещения наверх (к первому экрану).
► Большие, заметные, контрастные и читаемые даже при нарушениях зрения элементы действий (купить, заказать, подписаться).
► Понятные ссылки с описанием, куда они ведут.
► Наличие навигационных цепочек «хлебные крошки».
► Текстовый формат контактов, опционально — кликабельность.
► Для интернет-магазинов — система заказа в один клик.
► Минимальное количество полей для заполнения во время регистрации или заказа.
► Изображения и видео на сайте — качественные, четкие.
► Статьи разделены по тематическим рубрикам и помечены тегами для быстрого поиска и перехода.
► Есть блоки со ссылками на статьи этой же рубрики или новейшие материалы.
► Есть внутренняя перелинковка.
Это стандартные требования практически для любого сайта, выполнить их несложно, и, в общем-то, именно за адекватно работающий и правильно настроенный сайт вы платите деньги разработчику. Следовательно, имеете полное право подписывать акт приемки-передачи тогда, когда все вышеперечисленные (актуальные для вашего проекта) условия выполнены.
