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

Спонсор раздела
Дизайн и 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:
Сайт:
Комментарий:*
→ введите буквы и цифры с изображения*. Все буквы - латинские (английские)
Поля, отмеченные *, обязательны для заполнения.
Наверх
Сделать стартовой Добавить в избранное Версия для печати
Новости электронной коммерции и торговли
18.04  "Электронная торговля-2016": где и когда
18.04  Почему клиенты прерывают бронирование онлайн (инфографика) (1)
14.04  Уже 5 тысяч посетителей зарегистрировались на ECOM Expo`16
10.03  Aport.ru придумал "сеть" для подарков
18.02  Смартфоны вытесняют планшеты при совершении покупок
12.01  Почему ваш клиент предпочтет мобильную покупку? (инфографика)
18.12  Молодые покупатели не дадут вам второго шанса, если вы промедлите



Форум
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)
00:08 05.04 kaavain  Почему уходят посетители? Упадок после смены дизайна. (12)
00:02 31.03 anstrem  Странные отказы, посмотрите свежим взглядом (1)
21:56 27.03 happy-ninja  Всем привет! оцените сайт на юзабилити ИМ гироскутеры (14)


Статьи и аналитика
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 дней до старта
21.09  Письма ни о чем: что не надо писать своим клиентам




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