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

Содержание:

Введение

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

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

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

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

Современная парадигма дизайна информационных систем, подразумевает четкое разделение на три взаимодействующих составляющих: внешняя визуальная часть, предназначенная для взаимодействия с конечными пользователями (или в общем случае с внешними информационными системами), подсистему хранения данных, а также подсистему промежуточного слоя, призванную обеспечивать интерфейс между визуальной частью и хранимыми данными, собственно контентом. Эта часть представлена бизнес-логикой системы. Вышеназванная парадигма обозначается как 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, то придерживайтесь его для всего контента в других блоках, включая визуальное размещение информации на странице.

 

Сетки и направляющие 

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

 

Формы и цвета 

Бытует следующее утверждение — «Красота в простоте». Данный аспект существует не случайно, поскольку достаточно часто встречаются такие интернет ресурсы, в которых используются на всех страницах ВСЕ цвета радуги. Такое оформление вызывает у 50% посетителей желание поскорее покинуть сайт, чтобы не сойти с ума от буйства красок. Рекомендовано применить 3-4 цвета в создании визуально приятного ресурса, кроме этого, не стоит экспериментировать и подбирать оттенки «на глаз». Выбрав синий или зеленый, придерживайтесь его.

Наложение слоев

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

Формы и кнопки 

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

Ошибки, связанные с контентом

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

• Размер и цвет шрифта должны быть понятными, хорошо просматриваемыми и читабельными. Пользователю не нужна просто картинка, он пришел на ваш сервис за информацией.
• Пользуйтесь бесплатными шрифтами, при этом выбирайте 2-3 варианта, иначе, вы можете сделать страницу полностью неинформативной.
• Используйте только целые пиксели, никаких дробных чисел (18,3; 15,5), поскольку верстальщик не сможет попросту свести все в одно целое, в результате получится очень некрасивый текст.

Нецелевое размещение информации

 

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

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

К дополнительным рекомендациям по созданию креативного и полезного для современного юзера сайта стоит отнести следующее:

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

Вывод

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

Ссылки

http://xbb.uz/web/Process_razrabotki_web-sajta_Stadii_zhiznennogo_cikla_i_ih_osobennosti

https://studiof1.ru/blog/design/osnovnye-oshibki-veb-dizajnera/

https://ruseller.com/lessons.php?id=435