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

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

1. Edit In Place

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

Для управления содержимым сайта крайне полезное изобретение. Например, я регулярно переписываю заголовки, после публикации заметок. А иногда хочется тег дописать. В большинстве 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-редакторы. А поддержка загрузки и вставки картинок покоряет сердца.

4. LightBox, ThickBox

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

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

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

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

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

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

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

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

7. JavaScript drag'n'drop

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

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

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

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

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

9. Resizable textarea

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

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

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

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

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

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

12. JavaScript tabs

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

* * *

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

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