Файл: Типичные проблемы дизайна в web-среде.pdf

Введение

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

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

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

Типичный жизненный цикл веб-сайта

Современная парадигма дизайна информационных систем, подразумевает четкое разделение на три взаимодействующих составляющих: внешняя визуальная часть, предназначенная для взаимодействия с конечными пользователями (или в общем случае с внешними информационными системами), подсистему хранения данных, а также подсистему промежуточного слоя, призванную обеспечивать интерфейс между визуальной частью и хранимыми данными, собственно контентом. Эта часть представлена бизнес-логикой системы. Вышеназванная парадигма обозначается как MVC (Model-View-Controller). Появление данной парадигмы, а затем активное внедрение в практику создания и эксплуатации информационных систем, в том числе и веб-ресурсов, было связано в первую очередь с необходимостью создания и поддержания в работоспособном состоянии высоконагруженных систем, с достаточно длительным сроком жизни.
Рассмотрим шаги разработки веб-сайта, а позже разберемся в ошибках, допускаемых во время этого процесса.

Исследование предметной области и анализ

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

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

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

На выходе получаем: план работ; оценка стоимости; требования к команде разработчиков; требования к программному обеспечению и железу; поддерживающие документы; санкционированные разрешения, e.t.c.

Пример 1:
Владелец ритеил-сети по продаже широкого ассортимента товаров для детей решает расширить свой рынок сбыта за счет продаж через Интернет. Основной аудиторией его будут женщины с детьми, домохозяйки в возрасте от 23 до 35 лет и именно для этой аудитории будет разрабатываться web-сайт.

Пример 2:
Завод по переработке нефти решает выйти на региональный рынок и планирует заявить о себе, как серьезной компании через Интернет. Основная аудитория данного сайта — непосредственные клиенты завода, респектабельные бизнесмены с доходом выше среднего, практическим складом ума и всеми вытекающими из этого параметрами. Опираясь на эти доводы будет производиться разработка web-ресурса.

Систематизация и построение спецификаций

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

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

Крупные проекты требуют глубоких исследований для удовлетворения технических и бизнес требований.

На входе мы имеем: заключения от команды аналитиков.

На выходе получаем: утвержденные требования и спецификации.

Разработка дизайна

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

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

Дизайнер, на основе высказанных предложений и пожеланий к системе, а так же прототипов и разработанных интерфейсов системы создает графическое отображение страниц сайта.

На входе мы имеем: документации, спецификации, пожелания.

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

Написание контента, текста для сайта

В отличии от программного обеспечения, наличие текста («контента») на страницах сайта является обязательным, и тому существует множество причин, вытекающих и из поисковой оптимизации и из дружественности интерфейса. Полноценному сайту недостаточно наличие 3-х полей ввода и 2-х кнопочек для реализации всей системы.

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

На входе мы имеем: дизайн сайта, пожелания.

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

Кодирование процессов, разработка сайта

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

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

На входе мы имеем: сайт с формами и требованиями в спецификациях, сверстанный дизайн.

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

Тестирование

Тестирование — процесс выявления ошибок и их описания, смысл данной стадии полностью совпадает с тестирование любого программного обеспечения.

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

На входе мы имеем: функционально готовый web-сайт и спецификации.

На выходе получаем: отчеты о выявленных ошибках.

Реклама и продвижение

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

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

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

На входе мы имеем: работающий интернет-сайт.

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

Обслуживание, обновление, внесение изменений

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

На входе мы имеем: готовый сайт, контент, API, перечень функций и классов.

На выходе получаем: обновленные сервисы, информацию, подключение новых услуг и т.п.

Разделение не три независимых функциональных части позволяет оптимальным образом разделять работы между различными группами разработчиков. Так, обычно разделяют разработчиков, занимающихся пользовательскими интерфейсами (front side) и разработкой серверной части — бизнес-логикой и хранением данных (server side). В наиболее нагруженных проектах, так же отдельно выделяются группы разработчиков ответственные за поддержание и оптимизацию баз данных.

Ошибки веб-дизайнера или на что обратить внимание в создании сайта

Типичные ошибки и рекомендации по их устранению

Размер и макет сайта 

В большинстве случаев начинающий разработчик и креативная личность не обращают внимания на размеры будущего сайта, в результате создают страницу, которая либо не помещается в стандартные габариты, либо слишком мала, что вызывает трудности в восприятии изложенной информации. Статистика указывает на то, что свыше 50% дизайнеров поступают именно таким образом. Рекомендованный размер рабочей площади для будущего сервиса составляет 960 px. Придерживайтесь его, и ваш ресурс не будет выглядеть ущербно.

Размеры и выдержанные пропорции в макете  

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