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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


Читайте также
"Мобильный" сайт как ключ к высокой конверсии
Чек-лист: 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:
Сайт:
Комментарий:*
→ введите буквы и цифры с изображения*. Все буквы - латинские (английские)
Поля, отмеченные *, обязательны для заполнения.
Наверх
Сделать стартовой Добавить в избранное Версия для печати
Новости электронной коммерции и торговли
20.07  "Яндекс" запустил поиск для интернет-магазинов
20.07  Лучшие интернет-магазины - дружественные к пользователю и мобильному экрану (1)
14.07  Amazon провалил Prime Day
12.07  Alibaba открывает магазины в виртуальной реальности
06.06  "Печкин-mail" лихорадит из-за прошлого владельца (2)
18.04  "Электронная торговля-2016": где и когда
18.04  Почему клиенты прерывают бронирование онлайн (инфографика) (1)



Форум
14:19 13.07 Анатолий Радов  Оцените пожалуйста сайт (7)
12:02 26.06 Сергей Багров  Оцените, пожалуйста, удобство пользования сайтом (4)
13:43 11.06 divone  Полностью переделал сайт, просьба оценить. (2)
19:27 23.05 Liminoff  Прошу оценить интернет-магазин бескаркасной мебели
07:33 20.05 kaavain  Посмотрите лендинг по продаже очков виртуальной реальности (10)
22:46 05.05 andy212  Новый сайт-советы до запуска. (6)
20:09 04.05 kaavain  Новая форма оформления заказа (4)
14:40 02.05 divone  Прошу оценить сайт по продаже строительных и отделочных материалов (1)
14:37 02.05 divone  Прошу оценить крупный интернет магазин (дизайн, юзабилити, верстка и т.д.) (1)
20:41 19.04 kaavain  Сайт по ремонту вызывает желание позвонить и вызвать замерщика? (1)


Статьи и аналитика
19.07  7 правил успешной распродажи: как подготовить сайт
24.05  "Уличная магия" для интернет-магазина: что мы сами пойдем смотреть на ECOM Expo`16
04.05  "Мобильный" сайт как ключ к высокой конверсии (2)
14.03  Чек-лист: 9 неочевидных причин снижения конверсии интернет-магазина (4)
28.12  "Эра экономии": 2015 год в российской ecommerce
20.11  Пять способов повысить продажи ИМ детских товаров
11.11  Черная пятница в магазине подарков. 15 дней до старта
28.10  Черная пятница в магазине подарков. 28 дней до старта
27.10  Черная пятница в магазине подарков. 29 дней до старта
26.10  Черная пятница в магазине подарков. 30 дней до старта




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