Использование анимации в веб-дизайне - Oborot.ru
Подписка
Вестник электронной коммерции
Е-коммерция для занятых и ленивых
Интернет магазин. Пособие для директора
Дизайн и usability интернет-магазинов 
Поиск
На сайте (с учетом раздела)
В форуме
 
 

Тематический рубрикатор
Открытие бизнеса
 Бизнес-планированиеБизнес-планирование - форум
 Привлечение инвестицийПривлечение инвестиций - форум
 Название и регистрацияНазвание и регистрация - форум
 Создание сайтаСоздание сайта - форум
 ХостингХостинг - форум
 Первые шагиПервые шаги в электронной коммерции - форум

Привлечение клиентов
 Поисковики и сбытовая рекламаПоисковое продвижение и сбытовая реклама - форум
 Имиджевая рекламаИмиджевая реклама - форум
 Public RelationsPublic Relations - форум
 Нестандартные методы раскруткиНестандартные методы раскрутки - форум
 Эффективность рекламыЭффективность рекламы - форум

Удержание клиентов
 Дизайн и usabilityДизайн и usability - форум
 КонтентКонтент - форум
 CRM и взаимоотношения с клиентамиCRM и взаимоотношения с клиентами - форум

Ведение бизнеса
 АвтоматизацияАвтоматизация - форум
 Бухгалтерия и налогообложениеБухгалтерия и налогообложение электронной коммерции - форум
 БезопасностьБезопасность - форум
 Доставка и логистикаДоставка и логистика - форум
 Обучение и управление персоналомОбучение и управление персоналом - форум
 Общий менеджментОбщий менеджмент - форум
 Платежные системыПлатежные системы - форум
 Управление ассортиментомУправление ассортиментом - форум
 Юридические вопросыЮридические вопросы - форум

Тенденции развития
 Российские тенденцииРоссийские тенденции - форум


Главная  >> Удержание клиентов >> 
Читайте также | Ваш комментарий
16.09.04 

Использование анимации в веб-дизайне

Александр Белоликов

"Давайте будем ходить реально ногами по жизни."
Е. Лахова, лидер движения "Женщины России"

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

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

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

Случай 1. Иллюстрация переходного процесса

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

Случай 2. Смена отображаемой информации

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

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

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

Случай 3. Отображение объемных структур

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

Случай 4. Слайд-шоу

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

Этот прием можно отнести к анимации лишь с некоторой натяжкой.

Случай 5. Привлечение внимания

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

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

Плюсы и минусы флэш-анимации

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

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

• Большинство пользователей Интернета пользуются низкоскоростным модемным входом. А значит, вся эта красота вашего веб-ресурса им будет просто недоступна.

Вариант изготовления веб-сайта в двух версиях - обычной и флэш - обходится заказчику слишком дорого.

Подытожим сказанное.

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

Интересно? Поделись:


Читайте также
10 убийц конверсии: что раздражает покупателей в интернет-магазинах
"Мобильный" сайт как ключ к высокой конверсии
Чек-лист: 9 неочевидных причин снижения конверсии интернет-магазина
Что раздражает вашего покупателя? Часть 2. Выбор способа оплаты и доставки
Юзабилити-экспертиза: выпуск №10

Комментарии читателей
16.09.04 20:35
Арелав
http://virtualexs.h1.ru

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

Вот Сл. 5 - самый, что ни на есть раздражающий и совершенно, с моей точки зрения, неприемлемый. Большие анимированные картинки не сильно "утруждают" внимание, а очень маленькие и маленькие, да еще с редкими и довольно быстрыми движениями (в силу той же биологической особенности человеческого внимания) раздражают невероятно! На них ВСЕГДА отводится внимание. Мне кажется, что элементы меню, в силу их маленьких размеров, нужно делать только статическими.


16.09.04 21:02
Павел Коротов
http://www.oborot.ru

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

Хотя, можно прекрасно обходиться и без нее.


19.09.04 00:23
Борис

Самое интересное, что многие западные компаниии ИЗБАВЛЯЮТСЯ от анимации на своих сайтах.

Оказывается, даже отказ от простого графического блока в верхней части сайта УВЕЛИЧИВАЕТ продажи.

(см.http://klubok.net/article1743.html). А что же говорить об анимационных наворотах?

Мне кажется, что с анимацией на сайте надо быть очень осторожным. Согласен с Павлом - "можно прекрасно обойтись и без нее".


20.09.04 23:40
Антипохмелин

=Борис

Оказывается, вся мировая пресса за столетия существования потеряла несметное количество читателей-покупателей!


21.09.04 02:17
Алексей
http://edinorog.ru

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


21.09.04 02:42
Александр

Меня убивает безапелляционное заявление разрботчиков о том, что флеш ролики якобы очень большие.

Грамотно сделанная флешка МЕНЬШЕ чем такаяже страничка на хтмл.

Даже если это просто текст.

кстати пример http://www.ultrabudgeting.com

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


21.09.04 14:54
Арелав

2 Александр

А у меня вообще все ActiveXы выключены! Даже не смог оценить правдивость Ваших слов

Надеюсь догадываетесь по какой причине выключены (кроме размера сих объектов)?


23.09.04 23:55
softsoul
http://www.softsoul.ru/

Сорри я буду ответы писать если с чем-то не согласен...

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

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

"...Самое интересное, что многие западные компаниии ИЗБАВЛЯЮТСЯ от анимации на своих сайтах. Оказывается, даже отказ от простого графического блока в верхней части сайта УВЕЛИЧИВАЕТ продажи..."

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


26.09.04 07:52
Олег Краюшкин
http://www.buro-dv.ru

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

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


25.11.04 14:38
Андрей
http://www.trinity-mebel.ru

ЧУШЬ

1 "Ни одна российская поисковая система пока не индексирует текст в флэш-роликах" yandex и rambler индексируют, а вам какие ещё надо

2 Борис "анимация уменьшает продажи" ХА-ХА-ХА те ссылки которые Вы дали (их источники) лохотрон с выплывающими окнами и надписями типа вы выиграли 

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


16.04.11 23:43
Андрей
http://www.trinitymebel.ru

Почти 10 лет прошло, а ни кто так и не ответил )))


Ваш комментарий
Имя:*
E-mail:
Сайт:
Комментарий:*
→ введите буквы и цифры с изображения*. Все буквы - латинские (английские)
Поля, отмеченные *, обязательны для заполнения.
Наверх
Сделать стартовой Добавить в избранное Версия для печати
Новости электронной коммерции и торговли
23.08  Amiro.CMS стала еще удобнее
19.08  Canon запустил маркетплейс для дилеров
08.08  Страницы брендов на Facebook "подчистили" и обновили
26.07  В Amazon тестируют "коробку по запросу"
26.07  "Яндекс.Маркет" предлагает снимать одежду
20.07  "Яндекс" запустил поиск для интернет-магазинов
20.07  Лучшие интернет-магазины - дружественные к пользователю и мобильному экрану (1)



Форум
20:54 29.08 ilyxa2641  Прошу помочь разобраться в нежелании клиента покупать в ИМ (32)
12:24 29.08 Stello  Почему новый дизайн ВКонтакте на руку интернет магазинам
03:39 28.08 2metrics  Привет! Оцените сайт на удобство пользования (пройдите путь от поиска до заказа) (1)
03:34 28.08 2metrics  Оцените интернет магазин (3)
19:20 25.08 Елена Миронова  Оценить юзабилити сайтов (3)
12:29 23.08 Елена Миронова  Упала конверсия магазина (2)
08:28 12.08 asherik  Ваши замечания о магазине (8)
14:19 13.07 Анатолий Радов  Оцените пожалуйста сайт (7)
12:02 26.06 Сергей Багров  Оцените, пожалуйста, удобство пользования сайтом (4)
13:43 11.06 divone  Полностью переделал сайт, просьба оценить. (2)


Статьи и аналитика
29.08  10 убийц конверсии: что раздражает покупателей в интернет-магазинах
17.08  Как "убить" платежную конверсию на своем сайте (3)
16.08  7 проверенных способов завоевать доверие покупателя
11.08  На что обратить внимание при создании или доработке сайта
19.07  7 правил успешной распродажи: как подготовить сайт
24.05  "Уличная магия" для интернет-магазина: что мы сами пойдем смотреть на ECOM Expo`16
04.05  "Мобильный" сайт как ключ к высокой конверсии (2)
14.03  Чек-лист: 9 неочевидных причин снижения конверсии интернет-магазина (4)
28.12  "Эра экономии": 2015 год в российской ecommerce
20.11  Пять способов повысить продажи ИМ детских товаров




Зарегистрированным пользователям |  Реклама на сайте |  ECOM Expo |  О проекте
Главная |  Все новости |  Все статьи | Форум
Rambler's Top100 Рейтинг@Mail.ru rax.ru: показано число хитов за 24 часа, посетителей за 24 часа и за сегодня
© Oborot.ru 2001 - 2015. Корреспонденцию присылайте на info@oborot.ru. Адрес для новостей и пресс-релизов: news@oborot.ru.