Иногда нам есть что сказать вам, а иногда мы просто заняты работой :)

Блог

Адаптивность, юзабилити… а где дизайн?

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

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

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


Но сначала история из жизни.

Несколько лет назад нам заказали разработку интернет-магазина для сети зоотоваров “Бетховен”. Что вообще такое интернет-магазин? Это, прежде всего, юзабилити. Все элементы сайта должны помогать пользователю совершать покупки. Мы продумали нормальные фильтры в каталоге, сделали понятные карточки товаров, перегруппировали информацию. Получилось круто. Теперь любой хозяин престарелого хомячка мог легко подобрать нужные витаминки для своего питомца и быстро оформить доставку.

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

— А где дизайн?
— Так вот же макеты… - несколько растерявшись, объясняем мы.
— Да, карточка товара! Это вы хорошо придумали! И каталог какой удобный стал! - радуется заказчик, но тут же переходит в минор, - но где же дизайн?

Позже выяснилось, что дело было в недопонимание термина “дизайн”. Заказчик предполагал, что он подразумевает перекрашивание кнопочек в разные цвета и замену одной картинки на другую. Как ни парадоксально, в некотором смысле он был прав.

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

Ну, а теперь, собственно, глоссарий. Читайте и запоминайте. Это существенно поможет нашему общему делу.

Дизайн сайта — это совокупность графических элементов, картинок, шрифтов и цветовой палитры. Как правило, это совместное творчество клиента и дизайнера, сильно обусловленное модой и человеческим фактором. Дизайн бывает красивый и некрасивый (и это чистая вкусовщина), функциональный и не очень. Хороший дизайн — когда эти два параметра, красота и удобство, не мешают друг другу. Если с красотой еще можно чудить (моей бабушке не нравится этот желтый, перекрасьте в красный), то вольные импровизации в удобстве сайта легко могут обернуться финансовыми потерями в бизнесе. Например, однажды у нас был клиент, эдакий молодой хипстер. Услуги, которые предлагал его сайт, были ориентированы на барышень преклонных годов. То, что клиент считал удобным и красивым, сильно разнилось с представлениями его ЦА. История чуть было не закончилась печально, если бы мы не смогли его переубедить. Вообще замечено: когда клиент заигрывается в арт-директора, сайт становится все хуже и хуже, поэтому доверяйте профессионалам. Это эффективней.

Адаптивность — это способность сайта нормально выглядеть на всех девайсах. И на огромном дизайнерском мониторе и в крошечном “окне в Европу” средненького смартфона. Если посмотреть на размах размеров экранов (от 360 до 2600 пикселей по ширине), то сразу понятно, что у сайта должно быть несколько версий, которые как раз и адаптируются под нужный размер. Сейчас принято делать четыре версии: телефон/планшет/ноутбук/широкий экран.

Макет — чаще всего это обычная картинка формата JPG, на которой видно, как будет выглядеть сайт при определенном разрешении экрана. Прикол в том, что клиент утверждает картинку, например, для обычного монитора со средним разрешением 1400 пикселей по ширине, а сайт потом смотрит на космолетной плазме размером с футбольное поле или на айфоне, где при адаптивности все элементы складываются в одну узкую полосу. Мы обычно предупреждаем, но это не всегда помогает.

Верстка это наш макет (который утвердили и превратили в код в виде css стилей и html5 языка), который можно смотреть через браузер. Верстка (опять же!) бывает адаптивной и не очень. На адаптивную верстку уходит в два раза больше времени. Поэтому мобильно ориентированные сайты стоят недешево, особенно, если делать дизайн “с нуля” с кучей макетов. Сейчас в тренде профессия дизайнер-верстальщик. То есть дизайнер не рисует в фотошопе сто экранов одной страницы, а сразу верстает и показывает клиенту внешний вид сайта через браузер.

Шаблон это набор готовых стилей/шрифтов/картинок и кода, который поможет нам правильно визуализировать контент клиента. Обычно шаблон показывается сразу во всех версиях экранах и это НЕ КАРТИНКА!

Прототип - cхематичный набросок сайта. Нужен для того, чтобы понять структуру сайта, если это, например, интернет-магазин. Еще нужен для того, чтобы заранее проверить удобство пользования сайтом и поэтому мы переходим к Юзабилити.

Юзабилити - это структурирование элементов сайта так, чтобы им удобно было пользоваться. Сайт в принципе - штука функциональная. Туда приходят либо что-то купить, либо что-то узнать. Если для получения искомой информации пользователю надо пройти квест из пятнадцати кликов на разные кнопки, шансы, что он оставит попытки секунд через пять, довольно велики. А значит все ваши бизнес-усилия пойдут прахом. Когда сайт хорошо продуман, товары или информация легко доступны, дизайн не перегружен излишествами, а контент не косноязычен и по делу, пользователю комфортно на нем ориентироваться, а значит с юзабилити и, как следствие, с продажами всё ок.

Конверсия - это как раз то самое действие пользователя, которое говорит нам о том, что сайт правильно работает. Если люди приходят на сайт и ничего не делают там, конверсия будет низкой, и значит сайт нужно менять. Конверсией может считаться что угодно: лайк в статье, шеринг статьи, нажатие на кнопку “купить”, “нажатие на кнопку “оформление заказа”. Факт перечисления денег - апофеоз конверсии. Определяет конверсию и следит за ее показателями специально обученный человек. Это может быть интернет-маркетолог, СЕО-оптимизатор и другие заинтересованные лица.

Лиды - посетители, которые пришли по рекламе и совершают конверсию. То есть ваши потенциальные клиенты.

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

Домен - имя сайта, подробнее о домене читаем тут.

Хостинг - место, где сайт физически находится.