`

polymer:ru[251317@o@1604211-b-c]

Представление информации на сайте

Введение в тему

Классификация ресурсов интернет

Психология пользователя интернета

Представление информации на сайте

Продвижение веб-сайтов

Структурированные кабельные сети

 Изображения

 

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

 

Графика формирует образ сайта, по которому пользователь де­лает свои первые суждения о нём. Использование цветовой гаммы или образов, не соответствующих контенту, формирует негативное впечатление о сайте. Особенно важно графическое оформление для корпоративного сайта. Здесь не допустим «доморощенный» дизайн, слишком яркие сочетания цветов, мигание и движение элементов без участия пользователя.

 

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

 

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

 

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

 

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

 

Примером удачной реализации титульной страницы может слу­жить сайт «Московский трамвай» http://tram.ruz.net/

 

Описание: E:\WebServers\home\localhost\www\freelife\clients\ru\w_frames\images.files\image001.jpgНа титуле этого сайта любителей городского электротранспорта отражена специфика контента и общий эмоциональный настрой сай­та. Изображение на странице периодически заменяется, что создаёт дополнительный стимул к посещению сайта у постоянных пользова­телей.

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

Характерный пример:  www.mfoto.ru

Описание: E:\WebServers\home\localhost\www\freelife\clients\ru\w_frames\images.files\image002.jpgДля художественных изображений такой вариант не подходит, так как по миниатюре пользователю очень трудно определить ценность предлагаемого ему изображения. Не видя изображения, за­нимающего значительную часть экрана, пользователь не сможет его оценить, а значит, миниатюра теряет смысл. Поэтому, экономя ес­ли не трафик, то время пользователя, имеет смысл сразу загрузить несколько изображений на страницу. За то время, пока пользователь рассматривает первое изображение, успеют загрузиться следующие. Пользователь сможет быстро перейти к их просмотру, и то, что его не заставили ждать, положительно скажется на его отношении к уви­денному. Такая галерея должна состоять из нескольких страниц-лент, каждая из которых не должна включать слитком много кар­тинок. Если удаётся разделить изображения по тематическому или какому-либо другому принципу, следует это сделать и предложить пользователю меню для выбора разных страниц. Если не удаётся — страницы-ленты могут быть пронумерованы с возможностью доступа последовательно или к любой странице по номеру. К этому же вари­анту сводится реализация, когда по клику пользователю предъявля­ется всего одна — следующая по номеру — фотография. Но исходя из вышеизложенного такой вариант надо признать неудачным.

 

Каждое изображение должно быть аннотировано. Для подписи к изображениям в языке разметки гипертекста HTML есть специ­альные инструменты (теги). Наведя курсор на изображение, поль­зователь вызывает табличку с текстом. Этот же текст использует­ся поисковыми системами для индексации изображений. Поэтому информативное наименование изображений обязательно приведёт на сайт новых, заинтересованных пользователей.

 

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

 

Изображение

Правильно

Неправильно

Миниатюра

Без подписи

Нажмите для увеличения картинки

Диаграмма, график

Диаграмма состояния сплава Ni-Cd

Круговая диаграмма. График

Схема

Схема радиоприёмного тракта

Схема

Портрет

Горбачёв М.С. Президент СССР

Это портрет президента

Пейзаж, ландшафт

Город Иркутск. 1875 г.

Вид города Иркутска в 1875 году

Изделие

Станок ЧПУ-1. Общий вид

Фотография станка ЧПУ-1

 

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

 

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

 

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

Сразу отбросьте некачественные фотографии.  Оставшиеся разложите по группам (с изображениями того, что вам обязательно хотелось бы показать).

Из каждой группы отбирайте одну-две фотографии — самые кра­сивые и наиболее полно отражающие объект.

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

 

Иллюстрированный текст представляет собой более сложный случай. Внимание пользователя переключается между текстом и ил­люстрациями. При неудачном их взаимном расположении эти пере­ключения происходят хаотично, текстовый и графический контент оказываются слабо связанными. .При переходе к иллюстрации поль­зователю приходится искать её на странице. При возврате к тексту — искать необходимую строку в тексте. Такая работа с контентом быст­ро утомляет пользователя, притупляет его внимание и снижает заин­тересованность. Задача автора и web-мастера — размещение текста и иллюстраций так, чтобы они были жёстко связаны между собой, и пользователю приходилось делать минимум действий при переходах.

 

В интернете применяются следующие способы размещения ил­люстраций в тексте: в разрыв текста, рядом с текстом, в виде тек­стовой ссылки, после текста.

Иллюстрации, на которых автор желает зафиксировать внима­ние всех пользователей, помещаются в разрыв текста. Пользователь читает текст, относящийся к данному изображению, и непосредствен­но под ним видит само изображение. Поскольку продолжение текста размещено ниже иллюстрации, все пользователи фиксируют на ней внимание. Желательно давать иллюстрацию достаточного для рабо­ты с ней размера. Миниатюра требует клика, и некоторые пользова­тели могут его не делать, а переходить сразу к продолжению текста. Таким образом, посыл автора, заложенный в иллюстрации, не бу­дет доведён до всех пользователей. Зато в разрыв можно разместить несколько миниатюр. Стационарная подпись в разрыве текста не требуется, пользователь уже подготовлен к восприятию иллюстра­ции и проинформирован о её характере предыдущим текстом. Тем не менее, если пользователь не читал этого текста, он может узнать наименование иллюстрации, наведя на неё курсор. Кроме демон­страции важных иллюстраций, такое размещение применяется для того, чтобы дать пользователю возможность передохнуть во время чтения текста, отвлечься на рассматривание картинки, после чего он сможет вернуться к тексту и продолжить чтение. Здесь действует понятие перебивка — это способ нарушения монотонности контента, утомляющей внимание пользователя.

 

Читатель! Вы уже утомились? Тогда вот Вам пример перебивки:

«По данным интернет-опросов все жители России пользуются компьютером».

Теперь можно и продолжить...

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

Описание: E:\WebServers\home\localhost\www\freelife\clients\ru\w_frames\images.files\image003.gif

 

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

 

Основные принципы формирования миниатюр:

• Графики, схемы, диаграммы, чертежи — должна быть видна графическая структура, но не текст.

• Таблицы — у них обычно нет видимой на миниатюре и самоценной без текста структуры. Лучше обойтись вообще без миниатюры.

• Портреты — человек должен быть узнаваем.

• Пейзажи и ландшафты — должны быть узнаваемы.

• Изображения изделий — так же, как и их чертежи, должна быть видна структура.

• Миниатюры обычно не имеет смысл выполнять размером меньше, чем 100x100 пикселей, то есть пользователь не должен прилагать усилий, чтобы рассмотреть слишком маленькое изображение.

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

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

 

 

 

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

æèñ

Максим Савенков

Веб-программист

KZ, Алматы

Тел: +7 (777) 138-11-13

E-mail: iqart_terminal@mail.ru

Страница контактов:

Веб-мастер, контент-менеджер, опыт работы 15 лет, создание веб-сайтов с системой управления.

 
Регистрация на сайте
 
Ваше имя:
Ваш адрес электронной почты:
Создайте пароль:
Подтвердите пароль:
Введите в поле цифры с картинки:
 
 
 
 
 
Изменение регистрационных данных
 
Ваше имя:
Ваш адрес электронной почты:
Создайте пароль:
Подтвердите пароль:
Введите в поле цифры с картинки:
 
 
 
Ваш заказ:
 
 
Заказ на сумму: 0 тенге.
Доставка:
Фамилия, Имя, Отчество
Контактный телефон:
Адрес доставки:
Дополнительная информация:
сброс набранных полей
Ваш адрес электронной почты:
Введите в поле цифры с картинки:
 
Скидка: 0 %.
Итого к оплате: 0 тенге.
 
 
 
[x]

Действия с объектами

все

Блоки на странице

[ x ]
www.000webhost.com