Вкусная альтернатива Marquee

Итак, моя клиентка делает повторные запросы о вещах, которые были «крутыми», когда ее веб-сайт был запущен в конце девяностых. Одной из функций является бегущая строка, которая просто говорит «добро пожаловать в {доменное имя}» (клиент и домен скрыты из-за NDA).

Я неоднократно советовал клиенту, что это отрицательный элемент дизайна, потому что прокручивающийся бегунок полезен только для постоянного обновления данных, а все, что она хочет поместить, — это приветственное сообщение. Можете ли вы придумать что-нибудь современное, кроме тонких анимаций, которые могли бы заменить бегущую полосу? В тексте снова будет просто написано «Добро пожаловать в {Domain Name}».

ОБНОВИТЬ

Некоторые люди просили разъяснений, поэтому вот еще немного информации о сайте. Я бы поделился дизайном, но опять же, NDA. : (

Дизайн выполнен в следующих темах: Патриотическая, Чистая, Слегка фактурная. Концепция, которую мне дали, представляла собой стоковое изображение со старым американским флагом и копией конституции с лежащим на ней пером. Я использовал это в качестве фона и поместил содержимое в центральный контейнер с бумажной текстурой. Цвета красный белый и синий (белый фон с красными заголовками и синими ссылками). Как предположил @Scott, размахивание флагом может быть идеальным для этого. Я хотел бы увидеть предложение о том, как это реализовать.

ОБНОВЛЕНИЕ 2

В интересах предложения решений, а не просто создания проблем, вот jsfiddle плагина jquery, чтобы поднять волну. Предложения? Улучшения? http://jsfiddle.net/yPZVy/

РАЗЪЯСНЕНИЕ

Я мог или не мог объяснить эту часть достаточно хорошо, она не просто использует тег «шатер», а скорее флэш-анимацию, которая делает то же самое. Это очевидная проблема по многим причинам.

Я бы предложил неподвижный текст. Но если вам нужно что-то сделать, выберите летающих голубей и многократно инвертирующий дизайн радужного градиента вместе с фоновым саундтреком, который вы не можете отключить.
Для этого клиента это будут визжащие белоголовые орланы и F-35, летающие по странице. Я не уверен, что у Кенни Логгинса можно получить разрешение на использование Danger Zone.
Вы можете сделать несколько анимаций с помощью jQuery. И вы можете управлять интервалом, направлением и типом гораздо больше, чем старый тег выделения. Я бы разместил это на StackOverflow.com. Это лучше подходит для этого сайта.
@scott Я так не думаю, я не прошу о технической возможности того, что я могу сделать. Я, вероятно, в конечном итоге использую анимацию на основе css3 с запасным вариантом jQuery. Мой вопрос касался дизайна: какой тип элемента может концептуально заменить выделенную жирным шрифтом анимацию, не влияя на удобочитаемость?
Ах, достаточно справедливо. Это загадка, так как любая замена, даже близкая к шатру, будет отвлекать. Я имею в виду... "Tasteful Marquee" сам по себе оксюморон :)
В яблочко! Возможно, это непреодолимая сила встречает вопрос о неподвижном объекте, но я подумал, что у кого-то может быть идея. Я нашел несколько сайтов с изящной анимацией, которая появляется, когда вы наводите указатель мыши на что-то и т. д., но я не могу найти что-то, что привлекло бы внимание, не будучи... ну, знаете... ужасным.
Я не думаю, что мог бы адекватно предложить что-либо, не имея хотя бы некоторого представления о дизайне сайта или, по крайней мере, общего понимания концепции. На ум приходят такие вещи: медленно развевающийся флаг, временной интервал между перелистыванием баннера, отображение/скрытие загрузки страницы.
Хорошо, у меня есть два вопроса, прежде чем я отвечу: 1. Она хочет эти классные элементы, когда ее сайт впервые был запущен как «возврат» или почему? 2. Можете ли вы дать общее ощущение остальной части сайта, например, «техническое», «грубое», «современное» и т. д.?
Она требует этого, потому что думает, что это делает сайт популярнее. Да, один из тех клиентов. Честно говоря, я просто хочу выжить, не воссоздавая их старый сайт. Я обновил вопрос с подробностями о дизайне.
Как насчет волн флага (ОЧЕНЬ медленно). Вероятно, вы могли бы добиться этого с помощью небольшого набора изображений и эффекта затухания вместо полной анимации.
На форумах css-tricks есть действительно классный эффект ленты волны флага css3, но я не вижу простого способа воспроизвести это для IE, потому что он так сильно зависит от градиентов css3. css-tricks.com/forums/discussion/11054/…
Можете ли вы использовать Flash для этого? В противном случае вы, вероятно, могли бы сделать что-то более изящное, используя Javascript; Я бы посмотрел на Paperscript для довольно простой работы с фреймворком. Это открыло бы вам массу возможностей.
На самом деле, я бы сказал ей, что Marquee больше не поддерживается, и нет хорошего способа сделать это, который поддерживается повсеместно. Мобильные телефоны будут иметь проблемы, если вы сделаете это во Flash, а старые компьютеры не обязательно смогут увидеть анимацию Javascript, использующую HTML5.
@ryan На самом деле я обсуждаю создание анимации jquery, чтобы она работала во всех браузерах. Но я все еще пытаюсь договориться о решении, основанном на всех этих ответах.

Ответы (5)

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

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

  • Им нужно движение, которое фокусирует внимание на новом покупателе, активно направляя его внимание на начальную точку и активно знакомя покупателя с выбранными элементами. Если это так, то существует множество вещей, которые используют движение, чтобы сфокусироваться на ключевых элементах, которые могут понравиться вашему клиенту, если они представлены правильно. Помимо эффектов перехода текста, очевидным является карусель — может быть, немного клише и часто используется неправильно, но они могут быть очень эффективными, если все сделано правильно. Это также, вероятно, самая близкая вещь к шатру.
  • Они инстинктивно чувствуют, что их клиентам нравится индивидуальный подход, и их может испугать даже самый чистый современный веб-дизайн. Они чувствуют, что хотят протянуть руку и доставить приветственное сообщение своим клиентам, как четкое место для начала, и они хотят донести это сообщение до посетителя, как восторженный хозяин. Если это то, чего они хотят, эта Smashing статья о знакомстве с веб-сайтами может стать отправной точкой для получения идей.
  • Они могут знать, что их аудитория любит вещи в более медленном темпе и любит, когда к ним приходят вещи - больше канал для покупок, чем торговый пассаж. Поэтому им нравится идея медленного, мягкого подталкивания объектов к зрителю в заданном устойчивом темпе. Возможно, ваш клиент знает, что его демографические данные чувствуют себя потерянными в цифровых джунглях, и шатер — это самое близкое, что может придумать ваш клиент, чтобы бросить ему путеводную нить. Если это то, чего хочет ваш клиент, у вас действительно интересная проблема дизайна: вы захотите исследовать и переосмыслить разнообразный мир элементов веб-сайта, которые работают для полупассивной аудитории. Несколько примеров того, что мне приходит в голову, — это использование видео и управляемых интерфейсов, которые вы иногда видите в интерактивных визуализациях ( домашняя страница Development Seed).это классный, хотя и немного запутанный пример применения этого принципа к веб-дизайну в целом - общий принцип таков, что есть четкий и плавный путь, и вы можете отклониться от него, если хотите)

Никогда не недооценивайте, насколько хорошо хороший владелец малого бизнеса инстинктивно знает свою аудиторию, даже/особенно если он не разбирается в дизайне или не разбирается в дизайне. (также никогда не стоит недооценивать то, насколько невежественными могут быть некоторые менеджеры среднего звена в крупных компаниях относительно своей аудитории...)

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

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

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

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

Если у вас есть IP-адрес вашего клиента, вы можете сделать мигающую рамку только для него...

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

«Я обеспокоен тем, что это может отвлечь клиента от покупки вашего продукта, потому что его внимание будет отвлечено от вашего продукта или вашей презентации, и после первых 5-6 раз готовое «Добро пожаловать в X» немного надоедает... вы ведь не хотите терять продажи, верно?»

Если это не сработает, можете ли вы убедить клиента, что достаточно прокрутить 1-2 раза и что после этого сообщение «Добро пожаловать» может стать статичным?

Я работаю над базовой анимацией «загрузки», когда она медленно появляется с одной стороны. Этого может быть или не быть достаточно, чтобы удовлетворить любое их желание, но я пытаюсь думать об этом как о возможности найти компромисс между тем, что они хотят, и тем, что им действительно нужно.
«Загрузка» — это идея, но что у вас есть на сайте, что требует времени для загрузки, и примет ли клиент это вместо приветственного сообщения?
Извините, я не хотел сказать, что он говорит «загрузка», а скорее, что он выполняет анимацию только один раз при загрузке. Подобно тому, как css-tricks.com показывает цвет каждого элемента меню при загрузке, но затем не делает этого снова (хотя это та же анимация, которую вы видите при наведении курсора на элементы навигации)
@NateDSaint О, хорошо. Да, это было бы хорошим решением, если бы клиента можно было убедить.

Вы задаете неправильный вопрос. Вопрос в том:

Как заставить клиента сосредоточиться на бизнес-потребностях, а не на личных желаниях?

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

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

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

Я бы попробовал что-то вроде «hello bar» http://www.hellobar.com (или закодировал его сам), довольно красиво, и вы могли бы объединить его с кнопкой «Нравится» в социальных сетях.

Он не на 100% встроен в маркировку, но добавляет движения на страницу.

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

Лично мне они не нравятся, но современным эквивалентом элемента <marquee>является анимированное слайд-шоу/слайдер. Они часто имеют плохое удобство использования (нельзя остановить или приостановить, чтобы посетитель мог прочитать полный текст, показать изображения, содержащие большие блоки текста, недоступные для программ чтения с экрана, и их нельзя скопировать и вставить, отсутствуют элементы управления, позволяющие пользователю перемещаться по на нужный им слайд и т. д.), а постоянная анимация отвлекает пользователей от другого контента на странице.

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

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

Помимо этого, существует множество анимаций HTML5, которые имеют такую ​​же бессмысленную новизну, как бегущая строка. Вы можете найти тот, который со вкусом (или просто менее безвкусный) и может бесконечно повторяться, не будучи очень раздражающим. Хотя лично я бы просто выделил там шатер и провел быстрый пользовательский тест с 5-10 людьми и показал клиенту результаты.

Ваши предложения сделать карусели / ползунки менее раздражающими хороши: еще один хороший совет - сделать каждый элемент html-элементом div с реальным текстом position:absoluted поверх изображения (никогда, никогда, никогда, текст на изображении). Навигация по миниатюрам тоже хороша.
Вкусная альтернатива Marquee
СпросиСетьПолитика конфиденциальности1y, 0v