ТИПИЧНЫЕ ПРОБЛЕМЫ ДИЗАЙНА В WEB-СРЕДЕ

Содержание:

Введение

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

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

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

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

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

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

3

1. Факторы, влияющие на практичность WEB-сайта

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

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

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

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

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

Поэтому в интернете существует негласное правило – профессиональный сайт должен корректно отображаться при экранном разрешении 640х480 точек с цветовой палитрой в 256 цветов.

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

4

прочитать, у потенциальных потребителей сайта возникает разочарование.

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

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

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

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

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

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

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

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

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

5

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

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

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

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

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

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

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

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

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

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

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

6

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

Это правило распространятся и на использование графики. Графика имеет место быть, если имеет определенную цель, к примеру, привлечь внимание потребителя. К тому же все графические изображения необходимо обязательно оптимизировать для интернета. Сделать это можно с помощью графического редактора Photoshop. Сохранив файл (Shift+Contr+Alt+S) при помощи настроек, которые станут доступными, можно значительно уменьшить размер изображения.

7

2. Основные ошибки контента тематических сайтов

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

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

Второе место в перечне ошибок занимает безобразное оформление текста. По ширине он не должен занимать много места. Очень утомительно читать длинные строчки, при этом они “пересекаются”, “сбиваются”, а глаза быстро устают. Не должно быть так, чтобы дизайн диктовал ширину текста. Это также должно быть вопросом читабельности. Следуя совету по удобочитаемости и длине линии от Института Баймарда, должно быть около 60 символов на строку, если чтобы получить хороший опыт чтения. Наличие правильного количества символов в каждой строке является ключом к читабельности текста. В веб-дизайне можно добиться оптимального количества символов в строке, ограничивая ширину текстовых блоков,  используя em (относительную единицу измерения) или пиксели.

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

Следующее, что необходимо учитывать, – это выбор шрифта. Несколько лет назад информационный директор и основатель компании Information Architect Оливр Райхенштайн потряс технологический мир, заявив, что веб на 95% состоит из написанного текста, а веб-дизайн – на 95% типографика. Учитывая проявляющийся в последних тенденциях минимализм, значимость типографики стала ощутимее. Хорошая типографика – залог легкодоступной информации, в то время как при неудачной типографике приходится прикладывать усилия для понимания текста. Это происходит, во-первых, если шрифт слишком мелкий либо фиксированного размера. Во-вторых, если в тексте используется более трех разных шрифтов. В этом случае веб-сайт теряет структуру и выглядит непрофессионально.

8

Злоупотребление размером и стилем шрифта может испортить любую разметку. Поэтому следует использовать один – максимум два шрифта.

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

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

Третье препятствие удачной веб-разработки, которое следует обойти команде дизайнеров, – нестандартные ссылки. Главное правило для ссылок – ясно указывать на странице, что является ссылкой. Кроме того, пользователи должны знать, что они обнаружат, перейдя по ссылке. Не следует использовать в ссылке текст "щелкнуть здесь" или другие подобные ничего не говорящие фразы.

Ссылки - это первейший элемент взаимодействия в WEBе. Если привычная функция ссылки нарушена, это затрудняет работу пользователей с сайтом.

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

9

Заключение

В своем реферате я рассмотрел типовые проблемы дизайна в веб-среде. Подводя итоги, можно сделать ряд выводов.

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

1. Навигация.
2. Изобилие информации и неумение ее систематизировать.
3. Скорость загрузки сайта.
4. Цвета и важность их подбора.
5. Автозапускающиеся элементы, навязчивая анимация и избыточная графика.

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

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

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

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

10

Список литературы

1. В.Н. Васильев, Ю.В. Гугель, В.П. Гуров. Анализ методов передачи видеоинформации в компьютерных сетях.

2. Информационные технологии: мультимедиа. Авторы: Жук Ю.А.

3. Международный журнал экспериментального образования. – 2017. – № 4 (часть 2).

4. Основы мультимедийных технологий. Авторы: Катунин Г.П.

5. Библиотека I2R http://www.i2r.ru/static/255.

6. Всё о веб-дизайне // Обзорная статья по веб-дизайну - url: http://wseweb.ru/diz/obzor1.htm.  

7.

https://works.doklad.ru/view/c6qUNDLo58Y/all.html.

8.  http://ru.wikipedia.org/wiki/Web-Дизайн.

9. http://www.i2r.ru/static/255/ с. «Библиотека Интернет Индустрии I2R.ru».

10. http://www.iamdesigner.pro/2016/04/12-problem-veb-dizajna-i-kak-s-nimi-spravitsya.html. 12 проблем веб-дизайна и как с ними справиться [Электронный ресурс].

11