По мере появления новых технологий за последние несколько лет типичный веб-интерфейс изменился. Это, вероятно, не удивительно для любых веб-разработчиков, но многие поняли, что повышенная гибкость технологии, доступной в сети, часто была такой же головной болью, как и помощь. Недавно перед моей командой была поставлена задача перестроить основной продукт нашей компании, чтобы он функционировал не так, как веб-сайт, а скорее как веб-приложение.
Это, конечно, казалось хорошей идеей. Об этом говорят тысячи постов в блогах, и тысячи блоггеров не могут ошибаться. К сожалению, на самом деле нет четкого определения веб-приложения. Вокруг так много различий, что сложно определить, что делает сайт более похожим на приложение.
Похоже, что большинство разработчиков сосредоточилось на использовании AJAX для улучшения обработки данных и уменьшения количества обновлений страниц. Хотя это, безусловно, хорошее улучшение для большинства сайтов, на самом деле это не помогает сделать сайт более похожим на приложение. Приложения по-прежнему имеют время загрузки; папки по-прежнему частично обновляются, когда вы меняете представления, и пользователи рабочего стола, вероятно, привыкли к нему. Настольные приложения не просто быстрее с данными, они, как правило, более тактильные, чем веб-приложения, но тактильная природа рабочего стола не очень хорошо перешла на веб.
Мы начали составлять список механизмов тактильного интерфейса, с которыми пользователи знакомы на рабочем столе, и искали способы их применения в приложении. После долгих обсуждений и большого количества исследований мы пришли к списку интерфейсных функций, общих для настольных приложений, которые мы хотели перевести в наше веб-приложение.
1. Перетаскивание
Одним из наиболее распространенных методов мыши является перетаскивание. В Интернете было сделано много обходных путей, но это действительно основной интерфейсный механизм для рабочего стола, который недостаточно используется в Интернете. Вместо того, чтобы выбирать категории из выпадающих списков, мы начали делать элементы перетаскиваемыми. Это делает интерфейс более удобным и значительно упрощает процесс организации данных. Это функция, которую можно легко добавить для любых данных, привязанных к категориям, папкам или другой системе организации / таксономии. Эта идея может также хорошо подходить для выбора нескольких тегов из облака тегов или добавления нескольких критериев для поиска.
Некоторые веб-приложения уже хорошо это реализовали. Проверьте Yahoo Pipes и Flickr для некоторых действительно больших применений перетаскивания. Реализация, как правило, тоже не так уж плоха. Многие из доступных библиотек javascript имеют поддержку перетаскивания между браузерами.
2. Выбор группы
После того, как у нас было несколько перетаскиваемых элементов, мы поняли, что следующим логическим шагом было создание параметров выбора. Возможность перетаскивать элементы в папки или категории не так полезна, если вы не можете перетаскивать несколько элементов одновременно. На рабочем столе есть несколько вариантов выбора нескольких предметов. Вы можете перемещать щелчок, управлять щелчком или выбирать элементы, перетаскивая рамку вокруг них.
Javascript может обрабатывать нажатие клавиш Shift и управление щелчками, но для того, чтобы он хорошо работал в разных браузерах, может потребоваться немного усилий. Как и большая часть информации о событиях мыши, состояние клавиш Shift и Control доступно, но в разных местах в каждом браузере. Мы нашли эту статью очень полезной http://www.javascripter.net/faq/ctrl_alt.htm.
3. Настраиваемые интерфейсы
Наконец, мы решили добавить в приложение более гибкий интерфейс. Большинство настольных приложений имеют некоторый уровень настройки интерфейса. Photoshop CS3 — прекрасный пример такой гибкости. Большинство меню имеют свернутый режим, в котором отображаются только значки, а не полное меню или панель. Это может быть отличным способом максимизировать использование экрана без ограничения функциональности. Меню и панели также можно перемещать и переставлять. Эти два варианта настройки предоставляют хороший метод для обеспечения лучшего пользовательского опыта для более широкой аудитории. Начинающие пользователи могут оставлять меню открытыми и использовать минимальное количество панелей или функций. Опытные пользователи могут сворачивать элементы и одновременно иметь на экране больше параметров.
Это три метода, которые вы можете использовать, чтобы придать своим веб-приложениям немного тактильнее. По большей части все это довольно легко реализовать с помощью многих библиотек JavaScript. Мы используем Scriptaculous, и он поддерживает Drag and Drop, элементы Sortable и базовые инструменты AJAX с минимальным количеством дополнительного кода.