12 способов улучшить юзабилити сайта при помощи JavaScript и AJAX - Компьютерная документация по Windows. Оптимизация Windows.
 Компьютерная документация по Windows. Оптимизация Windows.  Компьютерная документация по Windows. Оптимизация Windows. Поиск
  Здравствуйте  [ Новый пользователь ] Домой  .  Статьи по темам  .  Компьютерная документация  .  Личный кабинет  .  Toп 10  .  Карта сайта  

  Навигация

 Главная   Главная
 Главная   Магазин софта
 Темы новостей   Темы новостей
 Топ 10   Топ 10
 Архив новостей   Архив новостей
 Карта сайта   Карта сайта
 Конструктор   Конструктор
 Обзоры   Обзоры
 Интересное   Интересное
 Рассылка новостей   Рассылка новостей
    Полезные ресурсы
 Пользователи   Пользователи
 Поиск   Поиск
 Написать нам   Написать нам
 Тест скорости   Тест скорости


  Наши темы
Windows 8
Windows 7
Windows Vista
Windows XP
Настройка Windows
Реестр Windows
Восстановление системы
MS-DOS
BIOS
Интернет
Microsoft Office
Сетевые настройки
Обработка видео
Вебмастеру
Оптимизация Windows
Обзор софта
Технологии, обзоры
Обзоры компьютеров и комплектующих
Рецензии
Полезные советы
Продвижение сайтов

Новые обзоры

Как заработать на ремонте компьютеров

Переработка отходов электроники

Типовые неисправности I:Phone, Pad, Pod и Macbook

Место для вашей электронной души

Ремонт компьютеров в Москве


12 способов улучшить юзабилити сайта при помощи JavaScript и AJAX

Размещено 29/05/2008

Вебмастеру

В последние годы урожай на всевозможные JavaScript-штучки был богатым. Сайты с энтузиазмом обрастали «аяксовыми голосовалками , как на Дигге» и «галереями на базе LightBox». Но вот эйфория пошла на спад, разработчики наигрались. Самое время выдохнуть и оглянуться.



1. Edit In Place

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

Edit in place в Pligg

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

Исправлять ошибки в текстах тоже удобно. Хотя я видел варианты edit in place только с input type="text", но для textarea можно что-то придумать.

Google раньше использовал edit in place на «домашних страницах». В админке Pligg эта фишка тоже используется.

2. Автосохранение

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

Автосохранение в ЖЖ

В жж эта функциональность реализована. Для редактора TinyMCE есть плагин.

3. Редакторы с поддержкой визуального форматирования (WYSIWYG)

Иногда уместны языки быстрой разметки (Markdown, Textile), иногда — чистый HTML, иногда никакого форматирования вообще не требуется. На форумах популярны редакторы, помогающие вставлять bb-code.

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

Визуальный редактор на livejournal.com

4. LightBox, ThickBox

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

Thickbox

Теоретически это удобно, потому что не открываются новые окна и не грузятся новые страницы. Но я пока не привык, сайты с LightBox´ом вызывают у меня ощущение дискомфорта.

5. Всплывающие HTML-окна

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

ISPManager

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

6. Отправка данных посредствам AJAX

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

Отправлять «серьезные формы» мне пока непривычно — от серьезного действия ждешь какого-то значительного эффекта. Разработчикам AJAX-приложений не очень удается убедить меня, что форма действительно отправилась, и что данные не ушли в никуда.

7. JavaScript drag´n´drop

Манипуляция объектами в окне браузера по средствам перетаскивания. Удобно растаскивать блоки по странице сайта при настройке движка, сортировать пункты меню, менять порядок вывода продукции в каталоге.

Удивительно, что в CMS до сих пор слабо поддерживается drag´n´drop.

8. Поля с автодополнением (autocomplete)

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

Autocomplete

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

9. Resizable textarea

Часто разработчики не думают о размере текстовых полей. Писать что-то объемное в форумном окошке не удобно. Поэтому наряду с очевидным ходом, увеличить высоту textarea по умолчанию, появляются решения, основанные на JavaScript.

В форумном движке Vanilla над полем для ввода сообщений есть переключатель «Большое окошко / маленькое». Иногда высота textarea увеличивается в зависимости от объема ввода постепенно. Это пример адаптивного поведения. В Drupal внизу textarea есть уголок, за который можно потянуть и увеличить размер поля до нужного значения.

Textarea resize

10. Изменение параметров отображения страницы

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

Размер шрифта на сайте

11. Скриншот при наведении курсора на ссылку

Сервис snap.com одно время был очень популярным, но к счастью здравый смысл победил.

Snap.com

12. JavaScript tabs

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

* * *

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

В Drupal сейчас есть предпосылки для заметного усовершенствования админки. Например, есть набор модулей JS Tools, в котором есть и autocomplete, и js tabs, и edit in place, и ajax submit.

Источник: www.dserg.com


 



Компьютерная документация по Windows Copyright © 2008-2019