Советы дизайна веб интерфейсов: Техника Желтого Выцветания

Июнь 21, 2010

Вчера я начал читать книгу "Get It Real" на русском языке. Книгу эту написали ребята из компании 37 signals, которая не стала еще одной рядовой веб-студией, а разработала подход "get in real" и на его основе создает качественные веб-приложения. Эта книга уже является культовой и наверняка есть на столе у каждого уважающего себя веб-разработчика, будь он дизайнером, программистом или разработчиком какого-либо уровня. Но сегодня разговор пойдет не об этой книге, а о подходе, который был озвучен в ее 13 главе - The Yellow Fade Technique.

The Yellow Fade Technique

Впервые упоминание о "The Yellow Fade Technique" появилось еще 19 февраля 2004 года в блоге "Signals vs Noise" под авторством Matthew Linderman. Техника проста и наверняка вы ее видели или уже даже встраивали в собственные продукты. Однако в интернете сходу мне не удалось найти перевод авторского поста и поэтому я возьму на себя смелость перевести пост про "The Yellow Fade Technique" своими словами. Приступим.

-----------------------------------

Техника Желтого Выцветания

“Because something is happening here
But you don’t know what it is
Do you, Mister Jones?” - Bob Dylan

"Потому, что здесь что-то произошло
Но Вы не знаете, что
Не так ли, мистер Джонс?" - Боб Дилан.

Множество сайтов и веб приложений дают Вам немного себя почувствовать мистером Джонсом. Именно поэтому в Basecamp мы впервые применили Технику Желтого Выцветания ("The Yellow Fade Technique", aka YFT, Alexus). Это отличный способ красиво обратить внимание на только что измененную область страницы.

Почему это важно? Когда Вы редактируете или удаляете что-либо на странице. это зачастую влечет за собой ее перезагрузку. Проблема в том, что когда страница перезагружена, то бывает сложно определить в где были проведены изменения (особенно если они затронули середину страницы). YFT с помощью JavaSript создает желтую подсветку только что измененной части страницы после ее перезагрузки. Затем в течении одной-двух секунд желтая подсветка выцветает и страница возвращается в свое нормальное состояние. YTF дает возможность легко заметить внесенные изменения в то время как ее ненавязчивый характер позволяет быстро вернуться к работе после внесенных правок.

Давайте взглянем на пример.

допустим я хочу изменить название второго сообщения на представленной странице Basecamp с "CEO Photo" на "Jim Messier Photo."

Прежде всего я попаду на страницу "Изменить сообщение" и отредактирую заголовок записи.

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

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



Вуаля, страница возвращается к нормальному состоянию за несколько секунд.

Чтобы увидеть это в действии, вы можете зарегистрироваться на Basecamp (Вы можете опробовать сервис бесплатно). Там это особенно полезно на страницах с множеством мелких элементов, таких как списки дел и этапы работы.

-----------------------------------

Оригинал статьи "The Yellow Fade Technique" Вы всегда можете прочитать на блоге компании 37signals: http://37signals.com/svn/archives/000558.php


Автор:



Добавить свой комментарий » | Просмотров: 1214 | Рекомендаций у статьи 0. рекомендовать

Постоянная ссылка на статью: http://alexusblog.com/post/Web-Interface-Design-Tip-The-Yellow-Fade-Technique.html


Следующая статья: Все кабели в одном месте :)
Предыдущая статья: Палю тему: Как взломать Filepost.ru
Все статьи в разделе оглавление

AlexusBlog.com

Поиск по сайту:
 
  регистрация : о блоге : на главную