Когда-то мне удалось попасть в мир учетных систем, и не просто учетных систем, а работающих через Интернет. С тех пор утекло много воды, родилось много систем, некоторые из них уже умерли.
Это очень динамичный мир.
В этом мире много систем, от брутальных, седых 1С , очень молодому Акуматика .
Есть гламурные Ольба С ФиноБокс , есть еще классный Мегаплан , там мой любимый, суровый, но милый Ореодор .
У всех очень умные формы, еще более умная (чем у пользователя) навигация и таблицы! Давайте подойдем еще ближе.
Это все Интернет, все работает, все функционально, функционала много.
Не так давно по долгу службы я делал обзор различных платформ и ERP-систем.
Моей задачей было разобраться в особенностях реализации интерфейсов, понять, почему сделано именно так, а не иначе.
Обзор пригодился в работе, теперь смело указываю на него коллегам, когда они хотят что-то испортить.
Не долго думая, я решил адаптировать свой обзор в статью, дополнить его, урезать и поделиться с вами, дорогие хабровцы.
Сортировка Как правило, это реализуется путем нажатия на заголовок столбца, как, например, в 1С, Мегаплан или Ореодор.
При этом в столбце появляется указатель направления сортировки.
Иногда опция дублируется в меню столбца, если оно есть (как в Oreodor).
Однако в некоторых системах (например FinoBox) сортировка естественная – по дате расходов; никакого контроля за ним нет, да и не нужно.
Кстати, большинство систем позволяют настроить сортировку из интерфейса только по одному столбцу за раз.
Удобное управление множественной сортировкой, увы, задача нетривиальная, и с ней никто не справился.
Если возможна множественная сортировка, то это задается из настроек списка, как в 1С.
Навигация по списку Три наиболее распространенных способа:
- Вид страницы (пейджинг).
Это путь Акуматики и Ореодора.
Основным преимуществом постраничного просмотра является возможность быстрого перехода к нужной позиции в списке.
Все данные разбиты на страницы, известно общее количество записей и известно окно просмотра.Настолько классика, что добавить нечего, кроме того, что окно просмотра можно рассчитывать динамически, в зависимости от размера области отображения списка.
Это позволяет полностью избавиться от вертикальной прокрутки.
- Бесконечная прокрутка (Бесконечная прокрутка) — это когда данные загружаются и отображаются в процессе прокрутки.
Те.
по сути, начальная позиция (пропуск) выделения определяется текущим положением прокрутки, а размер выделения (предел) — это размер области отображения, вот так.
Замечено в 1С.
Вещь крайне крутая, позволяет экономить трафик, разгружать DOM браузера и все такое.
Но, увы, для хорошей реализации требуется немало усилий.
А из-за своей бесконечности порождает проблемы перехода на конкретную позицию в списке (этот недостаток компенсируется фильтрацией).
Метод хорош, если данных не много (2-3 окна просмотра), либо много, но они либо фильтруются в процессе просмотра до двух-трех окон просмотра, либо каждая запись сама по себе не так важно, но важна обобщенная информация, тренд (поток).задачи в трекере ошибок, например).
В целом суть этого метода — облегчить DOM за счет уменьшения одновременно отображаемых элементов на странице.
В один момент времени рендерятся только записи в окне, что позволяет создать иллюзию одновременного отображения огромного количества данных за счет полосы прокрутки и быстрой реакции на ее перемещение.
Этот метод также полезен для кэширования, эвристики и оптимизации сервера.
- Родная прокрутка браузера — путь тех, кто не спорит с браузером.
Это когда мы прокручиваем не конкретно этот список, а всю страницу.
В этом случае может быть какая-то реализация Infinity Scroll. Данная опция используется в FinoBox, ЭLba, Мегаплан.
Если компоновка и организация системы позволяют избавиться от горизонтальной прокрутки или если горизонтальная прокрутка не вызывает проблем с ориентацией в системе, это лучший выбор.
Это очевидно, прозрачно и быстро.
Недостаток этого метода в том, что активно прокручивать можно только один список и вообще одну панель (форму, меню, таблицу).
К сожалению, в браузере сложно отобразить сразу действительно большой объем данных, хотя бы из-за тяжелого DOM, который растет пропорционально удобству представления информации (много возможностей — много элементов в ячейке).
Не путайте двойной клик с открытием ссылки, потому что.
ссылки, как правило, открываются на значение ячейки, как в Ореодоре, Мегаплане, ЭЛба.
В некоторых системах предусмотрен выбор, в том числе множественный выбор.
В интерфейсе есть два подхода — чекбоксы и выбор.
Не так важно, как это делается, важно, почему.
Множественный выбор позволяет реализовать групповые операции над указанными записями, например одновременный проводок нескольких документов.
Выбор Мегаплан, Ореодор, 1С реализован аналогично тому, как в десктопных приложениях (удержание Ctrl отмечает записи): 
FinoBox следует по пути тиков.
В целом это более наглядно, но немного менее удобно при большом количестве колонок (горизонтальная прокрутка нежелательна): 
В некоторых системах, например ЭLbe, распределение записей вообще не предусмотрено.
Это не минус, а скорее особенность, ведь функциональность альбома от этого не страдает. Аналитики и разработчики потратили много усилий, чтобы довести бизнес-процесс до такого состояния, чтобы не было необходимости подбирать элементы.
Контекстное меню В общем, в Интернете существует два типа ERP-систем: те, которые пытаются работать на основе браузера, и те, которые пытаются вести себя как настольные системы.
Контекстное меню — родной элемент управления браузера, его смеют перехватывать, но этим грешат многие, например 1С и Ореодор.
Это накладывает определенные проблемы с операциями копирования, вставки и т.п.
, но позволяет реализовать действия в контексте элемента, на котором было вызвано меню.
Пока стандарт расширения контекстного меню браузера еще не установлен, такое решение имеет очевидные недостатки, но в будущем это перестанет быть проблемой.
Большинство (например, Мегаплан, ЭLba и FinoBox) систем по-прежнему не перехватывают контекстное меню, оставляя его на откуп браузеру.
Фильтрация и поиск 
Сердцем любого списка, пропускающим данные по своим венам, является фильтрация и, в общем, поиск.
Эти вещи уже сами по себе нетривиальны.
Дело в том, что на фильтрах сходятся два противоречия – функциональность и простота.
Простота – это удобство, функциональность – это возможность получить то, что вам нужно.
Некоторые системы не имеют собственных фильтров как таковых.
Я имею в виду совсем нет. В них список открывается уже отфильтрованный по какому-либо критерию, например, активные счета, или пассивные счета, список называется «Мои активы», «Мои пассивы», или переключатель режима где-то в списке «Показать документы», « Шоу-шоу».
С одной стороны, это белый флаг, капитуляция перед заведомо невыполнимой задачей создания простого в использовании и функционального фильтра.
С другой стороны, это отточенный бизнес-процесс, который за счет минимизации позволил отказаться от произвольных фильтров в принципе.
Хорошим примером хорошей реализации этого является Эlba. Те, кто решил сделать фильтры, а это FinoBox, 1С, Ореодор, Мегаплан, разделились на две группы - фильтры через форму и фильтры через меню.
Фильтры через форму
Фильтр устанавливается на форме, где-то рядом со списком.Форма сложная.
Клиническим случаем развития идеи является использование формы с табличной частью для полноценного дерева выражений, что приводит в ужас гуманитарное и экономическое мышление.
Но даже форма (кроме формы с деревом выражений) не допускает сложной комбинации условий слияния фильтров.
И главная проблема в том, что эта форма занимает безумное количество места.
Выделенное под него пространство прямо пропорционально возможностям фильтров интерфейса и сложности установленного фильтра.
Наиболее красиво и элегантно этот подход реализован в «Мегаплане»; им удалось создать полноценную динамичную форму с хорошим откликом.
В FinoBox сделано немного брутально.
Картинка для сравнения: 
Фильтры через меню
Это попытка элегантно решить проблему в ущерб функциональности.Как правило, условиями объединения фильтров приносятся в жертву, объединяя все фильтры через «И».
При этом появляется возможность фильтровать из разных мест, поскольку управление фильтром также упрощается.
Например, фильтр может быть встроен в меню столбца или контекстное меню ячейки.
Вот как это выглядит в Ореодоре: 
Отказ от условий объединения влечет за собой перенос этой логики в сам фильтр, т.е.
некоторые типы данных, например мультиссылки, можно объединять с помощью OR, хотя все остальные фильтры объединяются с помощью AND. Практически все системы позволяют сохранять заранее настроенные фильтры, а некоторые позволяют делиться ими с коллегами по системе.
Особенно хорошо это делается в Atlassian JIRA, хоть это и другая тема, но это отличный пример для подражания.
Цвета, значки, блики Типичная задача — выделить запись в списке цветом.
Это может быть выделение новой записи, выделение отмененной и т.п.
Как правило, это выбор документа в том или ином статусе.
Возможность довольно распространена, и ее можно найти везде, где она может понадобиться.
Когда цвета недостаточно, используют пиктограмму, которая призвана символизировать душевное состояние линии в текущий момент времени.
Примеры этого в разных системах: 
Некоторые системы дополнительно используют разные шрифты, размеры и ДЕКОР .
Все, что может сделать любую таблицу нечитаемой или убить эпилептика.
Однако при умеренном использовании это незаменимый функционал для выделения поста среди друзей.
Агрегации и группировки Что может быть приятнее бухгалтеру, чем строка «Итого»? А если еще и с красным номером» — 0 руб.
17 копеек».
Эта строка вызывает бурю эмоций у чувственных, красивых хозяйк по дебету и кредиту.
Большинство ERP-систем могут строить сводную строку с различными функциями агрегирования.
Важной особенностью является его динамическая реструктуризация на основе фильтра.
Вот как это выглядит в фунтах: 
Пожалуй, мир здесь всех переплюнул по удобству и осмысленности.
В FinoBox все гораздо серьезнее: 
Ну, Ореодор довольно резок: 
О группе сложно сказать что-то новое.
Группировка идет рука об руку с фильтрацией и сортировкой.
Его также можно эмулировать иерархией (об этом чуть позже), но, конечно, лучше, когда это будет списковая функция, а не что-то другое.
Отображение данных
Интересно посмотреть плотность отображаемых данных на квадратный сантиметр экрана в разных системах: 
Заметно четкое разделение на два лагеря - тех, кто старается показать как можно больше( больше, больше, БОЛЬШЕ ДАННЫХ!!! ), и тех, кто старается показать как можно меньше и наглядно.
В общем, не все данные воспринимаются пользователем, поэтому показывать все сразу нет смысла; гораздо важнее, какой объем информации будет усвоен.
Логическим продолжением этой тенденции станет развитие вариаций отображения данных.
Красивый рендеринг для типов денег, красивый для дат, картинок и значков.
Особенно хорош в этом Мегаплан, но и FinoBox ему не уступает. Ореодор отсылает к этой стороне.
А вот Акуматика и 1С в этом плане очень сильно зажаты (в прямом смысле слова).
Показать что-то красиво и подробно там проблематично.
Отображение данных в таблице определенным образом — это первый шаг к тому, чтобы сделать эту таблицу редактируемой.
Поясню, чтобы что-то красиво отобразить, рано или поздно вам понадобится отделить данные от их представления.
И когда мы отделяем данные от представления, у нас появляется возможность работать с данными по-разному, потому что они сами больше не являются представлением этих данных.
Те.
Теперь мы передаем не красиво оформленную строку даты, а объект даты, с которым мы можем что-то сделать.
Редактируемая таблица — это вообще очень сложная вещь, полная ограничений, костылей и условностей.
Чем проще система, тем она легче и тем больше возможностей ее реализации.
Например, в FinoBox это выглядит так: 
Интересно, как подсвечиваются ячейки, доступные для редактирования.
Очень красивый эффект. А вот в Ореодоре все довольно аскетично (еще не сохраненные изменения отмечены красным углом): 
В 1С тоже есть редактируемые таблицы, но их возможности несколько ограничены: 
Список живет не только таблицами
По сути, таблица — это всего лишь один из вариантов представления набора данных.
Применив к данным какой-то интерфейс или контракт, мы можем отобразить их в другой форме.
Например, имея в наборе диапазон дат, мы можем представить набор в виде календаря, а имея ссылку на родительский элемент — в иерархии.
Эти два типа являются наиболее распространенными, хотя список можно показать на карте, причем вообще в полном 3D, в виде графика с зелеными пятнами на фоне (что тоже что-то значит).
Теги: #1с #FinoBox #oreodor #Acumatica #Мегаплан #elba #ERP системы
-
Принципы Шифрования
19 Oct, 24 -
Лучшие Аксессуары Для Ноутбуков
19 Oct, 24 -
Сделать Linux Похожим На Windows 95
19 Oct, 24
