4.4 Разработка пользовательского интерфейса системы
Взаимодействие пользователей с CRM-системой должно осуществляться посредством графического пользовательского интерфейса (GUI). Интерфейс должен обеспечивать удобство поиска и просмотра информации, быть простым и интуитивно понятным для пользователя.
Интерфейс разрабатываемой системы включает в себя следующий перечень экранных форм:
Формы модуля авторизации:
Авторизация
Рабочее пространство
Формы модуля работы с группами пользователей:
Список групп пользователей
Редактирование группы пользователей
Подтверждение удаления записи
Формы модуля работы с пользователями системы:
Список пользователей
Редактирование пользователя
Формы модуля-справочника «Типы контрагентов»:
Список типов контрагентов
Редактирование типа контрагентов
Формы модуля-справочника «Атрибуты контрагентов»:
Список атрибутов контрагентов
Редактирование атрибута контрагентов
Формы модуля-справочника «Шаблоны проектов»:
Список шаблонов проектов
Редактирование шаблона проектов
Редактирование этапа проекта
Добавление участника проекта
Выбор шаблона для связи
Формы модуля-справочника «Категории обсуждений»:
Список категорий обсуждений
Редактирование категории обсуждений
Формы модуля-справочника «Категории заметок»:
Список категорий заметок
Редактирование категории заметок
Формы модуля-справочника «Статусы задач»:
Список статусов задач
Редактирование статуса задач
Формы модуля контрагентов:
Список всех контрагентов
Информация о контрагенте
Выбор атрибутов контрагента
Список сотрудников
Редактирование сотрудника
Список головных компаний
Список филиалов
Добавление филиала
История по контрагенту
Редактирование события в истории
Список запланированных событий
Редактирование запланированного события
Выбор исполнителей
Список проектов по клиенту
Создание проекта – шаг 1
Создание проекта – шаг 2
Редактирование проекта
Формы модуля текущих планов:
Список текущих задач
Завершение задачи
Формы модуля поставленных задач:
Список поставленных задач
Формы модуля архива мероприятий:
Список завершенных задач и этапов проектов
Ссылка на созданный excel-файл с отчетом
Формы модуля текущих задач по проектам:
Список текущих этапов проектов
Запуск этапа куратором
Завершение этапа исполнителем
Формы модуля рассылки писем:
Список рассылок писем
Создание рассылки
Выбор адресатов
Выбор прикрепленных файлов
Сохранение письма как шаблона
Формы модуля шаблонов писем:
Список шаблонов писем
Редактирование шаблона письма
Формы модуля настройки рассылки:
Формы модуля «Обсуждения и идеи»:
Список предложенных идей
Создание новой идеи
Формы модуля вопросов:
Список вопросов
Создание нового вопроса
Создание ответа на вопрос
Формы модуля последней активности:
Список последних событий в системе
Быстрое комментирование вопроса
При переходе на веб-страницу CRM-системы пользователь увидит перед собой форму авторизации, которая изображена на рисунке 6. В этой форме пользователь должен ввести логин и пароль от своей учетной записи.
Рисунок 6 – Форма «Авторизация»
После корректного ввода логина и пароля система определяет права доступа к различным модулям системы для данного пользователя и затем отображается форма «Рабочее пространство» (рисунок 7).
Рисунок 7 – Форма «Рабочее пространство»
Слева на форме находится меню для работы с различными модулями системы. Все новые формы будут открываться во внутреннем пространстве этой формы справа от меню. В верхнем правом углу – кнопка для выхода из системы.
Главное меню данной формы состоит из следующих пунктов (может варьироваться в зависимости от прав доступа пользователя):
Группы пользователей
Пользователи
Справочники
Типы контрагентов
Атрибуты контрагентов
Шаблоны проектов
Категории обсуждений
Категории заметок
Статусы задач
База контрагентов
Планировщик
Текущие планы
Проекты
Текущие задачи
Рассылка
Мастер рассылки
Шаблоны писем
Настройка
Общение
Последняя активность
Если пользователь нажимает на пункт меню «Группы пользователей», то на экране открывается форма «Список групп пользователей», представленная на рисунке 8.
Рисунок 8 – Форма «Список групп пользователей»
Кнопка «Добавить» над списком или кнопка «Редактировать» у одной из записей открывают новую форму «Редактирование группы пользователей», показанная на рисунке 9.
Рисунок 9 – Форма «Редактирование группы пользователей»
На этой форме пользователь вводит название группы и выбирает доступные ей группы модулей из главного меню.
Если же на форме «Список групп пользователей» пользователь нажмет на кнопку «Удалить», то появится форма «Подтверждение удаления записи», изображенная на рисунке 10.
Рисунок 10 – Форма «Подтверждение удаления записи»
Кнопка «Да» разрешает удаление записи из базы данных, «Нет» - возвращает обратно на предыдущую форму.
Данная форма будет вызываться на всех будущих формах, где присутствует кнопка «Удалить».
Если пользователь выберет в главном меню пункт «Пользователи», то на рабочем пространстве появится форма «Список пользователей», показанная на рисунке 11.
Рисунок 11 – Форма «Список пользователей»
Кнопка «Добавить» над списком или кнопка «Редактировать» у одной из записей открывают новую форму «Редактирование пользователя», показанную на рисунке 12.
Рисунок 12 – Форма «Редактирование пользователя»
Здесь пользователь вводит имя, логин, пароль пользователя и выбирает из выпадающего списка уровень доступа (группу пользователя).
Если пользователь выберет в главном меню пункт «Типы контрагентов», то в рабочем пространстве появится форма «Список типов контрагентов», представленная на рисунке 13.
Рисунок 13 – Форма «Список типов контрагентов»
Кнопка «Добавить» над списком или кнопка «Редактировать» у одной из записей открывают новую форму «Редактирование типа контрагентов», показанную на рисунке 14.
Рисунок 14 – Форма «Редактирование типа контрагентов»
На этой форме пользователь вводит название для типа контрагентов, которые будут использоваться в карточке контрагента.
Если пользователь выберет в главном меню пункт «Атрибуты контрагентов», то в рабочем пространстве появится форма «Список атрибутов контрагентов», представленная на рисунке 15.
Рисунок 15 – Форма «Список атрибутов контрагентов»
Кнопка «Добавить» над списком или кнопка «Редактировать» у одной из записей открывают новую форму «Редактирование атрибута контрагентов», показанную на рисунке 16.
Рисунок 16 – Форма «Редактирование атрибута контрагентов»
На этой форме пользователь вводит название для атрибута, который затем можно будет присвоить контрагенту.
Если пользователь выберет в главном меню пункт «Шаблоны проектов», то в рабочем пространстве появится форма «Список шаблонов проектов», представленная на рисунке 17.
Рисунок 17 – Форма «Список шаблонов проектов»
Кнопка «Добавить» над списком или кнопка «Редактировать» у одной из записей открывают новую форму «Редактирование шаблона проектов», показанную на рисунке 18.
Рисунок 18 – Форма «Редактирование шаблона проектов»
На этой форме пользователь добавляет этапы в проект, может редактировать уже созданные или удалять их. Кнопка «Добавить» над деревом этапов или кнопка «Добавить подзадачу» возле каждого этапа открывают форму «Редактирование этапа проекта», изображенную на рисунке 19.
Рисунок 19 – Форма «Редактирование этапа проекта»
На этой форме пользователь выбирает, является ли этап продолжением предыдущего этапа, ссылкой на другой шаблон или точкой окончания проекта. Затем вводит название, выбирает участников этого этапа и при необходимости ссылку на другой шаблон.
Кнопка с изображением плюса открывает форму «Добавление участника проекта», показанная на рисунке 20.
Рисунок 20 – Форма «Добавление участника проекта»
На этой форме пользователь вводит название роли проекта, которая будет отображаться в списке на предыдущей форме.
Если пользователь на форме «Редактирование этапа проекта» поставит переключатель в позицию «Линк», то ему необходимо выбрать этап из шаблона другого проекта, для этого он щелкает по кнопке «Выбрать», и открывается форма «Выбор шаблона для связи», изображенная на рисунке 21.
Рисунок 21 – Форма «Выбор шаблона для связи»
На этой форме пользователь выбирает этап другого шаблона, который должен стать продолжением создаваемого шаблона.
Если пользователь выберет в главном меню пункт «Категории обсуждений», то в рабочем пространстве появится форма «Список категорий обсуждений», представленная на рисунке 22.
Рисунок 22 – Форма «Список категорий обсуждений»
Кнопка «Добавить» над списком или кнопка «Редактировать» у одной из записей открывают новую форму «Редактирование категории обсуждений», показанная на рисунке 23.
Рисунок 23 – Форма «Редактирование категории обсуждений»
Если пользователь выберет в главном меню пункт «Категории заметок», то в рабочем пространстве появится форма «Список категорий заметок», представленная на рисунке 24.
Рисунок 24 – Форма «Список категорий заметок»
Кнопки «Добавить» или «Редактировать» открывают новую форму «Редактирование категории заметок», показанную на рисунке 25. Чтобы отредактировать запись, ее предварительно нужно выбрать в дереве категорий щелчком мыши.
Рисунок 25 – Форма «Редактирование категории заметок»
На этой форме пользователь вводит название для категории и выбирает родительскую категорию для построения дерева.
Если пользователь выберет в главном меню пункт «Статусы задач», то в рабочем пространстве появится форма «Список статусов задач», представленная на рисунке 26.
Рисунок 26 – Форма «Список статусов задач»
Кнопка «Добавить» над списком или кнопка «Редактировать» у одной из записей открывают новую форму «Редактирование статуса задач», показанную на рисунке 27.
Рисунок 27 – Форма «Редактирование статуса задач»
На этой форме пользователь вводит название для статуса задачи, которые используются, когда создаются единовременные задачи (мероприятия) у контрагентов. Затем нужно ввести цвет в шестнадцатеричной системе в формате RGB для окраски задачи на форме списка текущих задач. Поле «Важность» влияет на порядок вывода задач, чем больше число, тем больше срочность задачи.
Если пользователь выберет в главном меню пункт «Контрагенты», то в рабочем пространстве появится форма «Список всех контрагентов», представленная на рисунке 28.
Рисунок 28 – Форма «Список всех контрагентов»
Кнопка «Добавить» над списком или кнопка «Редактировать» у одной из записей открывают новую форму «Информация о контрагенте», показанную на рисунке 29.
Рисунок 29 – Форма «Информация о контрагенте»
На этой форме слева находится навигационное меню, открывающее другие формы. Список пунктов меню:
Информация
Сотрудники
Головные компании
Филиалы
История
Планы
Проекты
На форме «Информация о контрагенте» находится множество полей, представляющих набор сведений о компании-клиенте. Здесь также находится выпадающий список «Тип контрагента», который мы заполняли на форме «Список типов контрагентов». Кнопка «Выбрать» возле поля «Атрибуты» создает форму «Выбор атрибутов контрагента», представленную на рисунке 30.
Рисунок 30 – Форма «Выбор атрибутов контрагента»
На этой форме пользователь выбирает галочками необходимые атрибуты для контрагента.
Выбрав в подменю формы «Информация о контрагенте» пункт «Сотрудники», пользователь попадает на форму «Список сотрудников», показанную на рисунке 31.
Рисунок 31 – Форма «Список сотрудников»
Кнопка «Добавить» над списком или кнопка «Редактировать» у одной из записей открывают новую форму «Редактирование сотрудника», показанную на рисунке 32.
Рисунок 32 – Форма «Редактирование сотрудника»
На этой форме пользователь заполняет карточку сотрудника персональными данными. Галочка «Основной контакт» означает, что именно этот сотрудник будет показываться на форме «Информация о контрагенте» (рисунок 29).
Выбрав в подменю формы «Информация о контрагенте» пункт «Головные компании», пользователь попадает на форму «Список головных компаний», показанную на рисунке 33.
Рисунок 33 – Форма «Список головных компаний»
На этой форме отображается список тех контрагентов, которые выбрали текущего контрагента как филиал. Это делается на следующей форме, доступной в меню под пунктом «Филиалы»: форме «Список филиалов», которая представлена на рисунке 34.
Рисунок 34 – Форма «Список филиалов»
Кнопка «Добавить» над списком или кнопка «Редактировать» у одной из записей открывают новую форму «Добавление филиала», показанную на рисунке 35.
Рисунок 35 – Форма «Добавление филиала»
На этой форме пользователь вписывает в строку поиска название другого контрагента, а затем выбирает его в списке и нажимает «Ок». Теперь выбранный контрагент становится филиалом текущего клиента.
На форме «Список филиалов» (рисунок 34) также напротив каждой записи есть кнопка «Просмотр», которая позволяет быстро открыть карточку этого контрагента.
Выбрав в подменю формы «Информация о контрагенте» пункт «История», пользователь попадает на форму «История по контрагенту», показанную на рисунке 36.
Рисунок 36 – Форма «История по контрагенту»
На этой форме отображаются все события, связанные с этим контрагентом, многие из которых добавляются автоматически. Но есть возможность добавить вручную какую-нибудь заметку или событие в историю, используя кнопку «Добавить», или изменить существующую кнопкой «Редактировать». Обе эти кнопки открывают форму «Редактирование события в истории», представленную на рисунке 37.
Рисунок 37 – Форма «История по контрагенту»
На этой форме пользователь назначает дату события, описывает событие с помощью заголовка (поле «Действие) и примечания.
Выбрав в подменю формы «Информация о контрагенте» пункт «Планы», пользователь попадает на форму «Список запланированных событий», показанную на рисунке 38.
Рисунок 38 – Форма «Список запланированных событий»
Кнопка «Добавить» над списком или кнопка «Редактировать» у одной из записей открывают новую форму «Редактирование запланированного события», показанную на рисунке 39. На этой форме пользователь заносит дату начала выполнения задачи, выбирает исполнителей кнопкой «Выбрать», которая открывает форму «Выбор исполнителей», изображенную на рисунке 40. Пользователь вносит название события в поле «Действие», выставляет статус из выпадающего списка, который заполняется из списка на форме «Список статусов задач» (рисунок 26). Пользователь может добавить примечание и примерное время выполнение.
Рисунок 39 – Форма «Редактирование запланированного события»
Рисунок 40 – Форма «Выбор исполнителей»
На форме «Выбор исполнителей» пользователь выбирает галочками пользователей, которые будут запускать или завершать запланированное событие.
Выбрав в подменю формы «Информация о контрагенте» пункт «Проекты», пользователь попадает на форму «Список проектов по клиенту», показанную на рисунке 41.
Рисунок 41 – Форма «Список проектов по клиенту»
На этой форме выводят все проекты по данному контрагенту. Кнопка «Добавить» открывает новую форму «Создание проекта – шаг 1», показанную на рисунке 42.
Рисунок 42 – Форма «Создание проекта – шаг 1»
На первом шаге создания проекта пользователь вводит его название, выбирает один из шаблонов, созданных на форме «Список шаблонов проектов» (рисунок 17), затем выбирает куратора из числа пользователей CRM-системы и нажимает кнопку «Далее», которая открывает форму «Создание проекта – шаг 2», представленную на рисунке 43.
Рисунок 43 – Форма «Создание проекта – шаг 2»
На втором шаге пользователь назначает роли в проекте пользователям системы. Затем нажимает кнопку «Готово», что завершает создание проекта. Есть возможность вернуться на шаг назад, воспользовавшись кнопкой «Назад».
На форме «Список проектов по клиенту» (рисунок 41) можно отредактировать созданный проект, для этого нужно щелкнуть на кнопку «Редактировать» напротив одного из проектов. Откроется форма «Редактирование проекта», показанная на рисунке 44.
Рисунок 44 – Форма «Редактирование проекта»
На этой форме пользователь может просмотреть выполненные этапы и изменить название, поменять куратора и участников проекта, используя две закладки в верхней части формы.
Если пользователь выберет в главном меню системы пункт «Текущие планы», то в рабочем пространстве появится форма «Список текущих задач», представленная на рисунке 45.
Рисунок 45 – Форма «Список текущих задач»
На этой форме выводится список текущих единовременных задач (мероприятий) только для текущего пользователя, в которых он является Исполнителем. Кнопка «Редактировать» открывает форму «Редактирование запланированного события» (рисунок 39). Рядом находится кнопка «Запустить/Завершить». Кнопка «Запустить» запускает задачу в работу, а кнопка «Завершить» открывает форму «Завершение задачи», показанную на рисунке 46. Кнопки справа от записи в таблице позволяют перенести задачу на завтра или на сегодня.
Рисунок 46 – Форма «Завершение задачи»
На этой форме пользователь может написать результат запланированного события и завершить его, нажатием на кнопку «Ок».
Если пользователь выберет в главном меню системы пункт «Поставленные задачи», то в рабочем пространстве появится форма «Список поставленных задач», представленная на рисунке 47.
Рисунок 47 – Форма «Список поставленных задач»
На этой форме выводятся те задачи, где создатель – текущий пользователь, но исполнитель – кто-то другой.
Если пользователь выберет в главном меню системы пункт «Архив мероприятий», то в рабочем пространстве появится форма «Список завершенных задач и этапов проектов», представленная на рисунке 48.
Рисунок 48 – Форма «Список завершенных задач и этапов проектов»
На этой форме выводится список завершенных задач и этапов проектов за определённый период. Для каждой задачи высчитывается затраченное время, а затем высчитывается общее время. Можно посмотреть список для любого из пользователей системы, а затем выгрузить отчет в excel-файл кнопкой «Выгрузить». После создания файла на сервере появится форма «Ссылка на созданный excel-файл с отчетом», показанная на рисунке 49.
Рисунок 49 – Форма «Ссылка на созданный excel-файл с отчетом»
Щелкнув по гиперссылке, пользователь сможет скачать файл к себе на компьютер.
Если пользователь выберет в главном меню системы пункт «Текущие задачи», то в рабочем пространстве появится форма «Список текущих этапов проектов», представленная на рисунке 50.
Рисунок 50 – Форма «Список текущих этапов проектов»
На этой форме выводится список текущих задач по проектам. Если текущий пользователь – куратор проекта, то слева от задачи будет находиться кнопка в виде часов «Запустить задачу», которая открывает форму «Запуск этапа куратором», изображенную на рисунке 51. А если он является исполнителем, то кнопка принимает вид галочки и имеет название «Завершить», нажатие на которую открывает форму «Завершение этапа исполнителем», показанную на рисунке 52.
Рисунок 51 – Форма «Запуск этапа куратором»
На этой форме пользователь-куратор вводит планируемую дату начала этапа, после чего нажимает «Ок», и задача передается исполнителям.
Рисунок 52 – Форма «Завершение этапа исполнителем»
На этой форме пользователь-исполнитель выбирает результат выполнения этапа, записывает комментарий по выполненной задаче и для будущего этапа.
Если пользователь выберет в главном меню системы пункт «Мастер рассылки», то в рабочем пространстве появится форма «Список рассылок писем», представленная на рисунке 53.
Рисунок 53 – Форма «Список рассылок писем»
На этой форме отображается список всех рассылок и их статус: сколько писем отправлено. Кнопка «Добавить» над списком или кнопка «Редактировать» у одной из записей открывают новую форму «Создание рассылки», показанную на рисунке 54. Кнопка «Старт/Пауза» запускает или приостанавливает рассылку.
Рисунок 54 – Форма «Создание рассылки»
На этой форме пользователь выбирает адресатов, вписывает тему письма, шаблон, пишет тело письма, используя специальный редактор, прикрепляет файлы к письму.
Адресаты выбираются нажатием по кнопке «Выбрать…», которая открывает форму «Выбор адресатов», показанную на рисунке 55.
Прикрепить файлы можно кнопкой «Добавить» в разделе «Файлы» внизу формы, откроется форма «Выбор прикрепленных файлов», изображенная на рисунке 56.
Созданное письмо можно сохранить как шаблон, чтобы использовать в дальнейшем. Для этого пользователю надо нажать кнопку «Сохранить как шаблон», которая откроет форму «Сохранение письма как шаблона», представленную на рисунке 57.
Кнопка «Начать рассылку» добавляет письма в специальную очередь, чтобы скрипт на сервере мог потом отослать письма выбранным адресатам.
Рисунок 55 – Форма «Выбор адресатов»
На этой форме пользователь выбирает адресатов рассылки путем простановки галочек в дереве. Можно выделить как отдельных сотрудников, так и всю компанию целиком. Для более удобного поиска наверху форму размещен фильтр по названию, статусу и атрибутам контрагентов.
Рисунок 56 – Форма «Выбор прикрепленных файлов»
На этой форме пользователь выбирает файлы на сервере, которые необходимо прикрепить к письму. Можно добавить свои файлы, загрузив их на сервер, сначала нажав кнопку «Выберите файл», а потом «Загрузить». Пользователь выделяет файл в правой части окна и нажимает кнопку «Ок», чтобы прикрепить файл к письму.
Рисунок 57 – Форма «Сохранение письма как шаблона»
На этой форме пользователь вписывает название для нового шаблона, созданного на основе письма. Но также можно заменить существующий, поставив переключатель на «Заменить» и выбрав в списке один из существующих шаблонов письма.
Если пользователь выберет в главном меню системы пункт «Шаблоны писем», то в рабочем пространстве появится форма «Список шаблонов писем», представленная на рисунке 58.
Кнопка «Добавить» над списком или кнопка «Редактировать» у одной из записей открывают новую форму «Редактирования шаблона письма», показанную на рисунке 59. На этой форме пользователь может дать название шаблону и ввести его содержимое для повторного использования в рассылках писем.
Рисунок 58 – Форма «Список шаблонов писем»
Рисунок 59 – Форма «Редактирования шаблона письма»
Если пользователь выберет в главном меню системы пункт «Настройка», то на рабочем пространстве появится форма «Форма настройка рассылки», представленная на рисунке 60.
Рисунок 60 – Форма «Настройка рассылки»
На этой форме пользователь выбирает способ отправки писем: через стандартную функцию языка PHP mail() или через SMTP-сервер. В зависимости от выбранного способа, пользователю нужно заполнить разные поля. После внесения необходимых настроек необходимо нажать на кнопку «Сохранить настройки».
Если пользователь выберет в главном меню системы пункт «Обсуждения и идеи», то в рабочем пространстве появится форма «Список предложенных идей», представленная на рисунке 61.
Рисунок 61 – Форма «Список предложенных идей»
Кнопка «Добавить» над списком открывает новую форму «Создание новой идеи», показанную на рисунке 62.
Рисунок 62 – Форма «Создание новой идеи»
На этой форме пользователь выбирает категорию обсуждения, которая была создана на форме «Список категорий обсуждений» (рисунок 22), а потом записывает текст идеи в соответствующее поле «Текст».
Если пользователь выберет в главном меню системы пункт «Вопросы», то в рабочем пространстве появится форма «Список вопросов», представленная на рисунке 63.
Рисунок 63 – Форма «Список вопросов»
На этой форме справа выводится список вопросов, которые задавали пользователи системы, а слева – фильтр по категориям вопросов (заметок), которые были заполнены на форме «Список категорий заметок» (рисунок 24).
Кнопка «Добавить» над списком открывает новую форму «Создание нового вопроса», показанную на рисунке 64.
Каждый вопрос сопровождается тремя кнопками: «Удалить», «Ответить», «Все комментарии». Первая кнопка – удаляет вопрос из системы, вторая – создает форму для ответа «Создание ответа на вопрос», представленную на рисунке 65, а третья – раскрывает комментарии под вопросом.
Рисунок 64 – Форма «Создание нового вопроса»
На этой форме пользователь выбирает одну из категорий вопросов и вводит в поле «Вопрос» сам текст вопроса.
Рисунок 65 – Форма «Создание ответа на вопрос»
На этой форме пользователю необходимо лишь ввести текст ответа в соответствующее поле и нажать «Ок».
Если пользователь выберет в главном меню системы пункт «Последняя активность», то в рабочем пространстве появится форма «Список последних событий в системе», представленная на рисунке 66.
Рисунок 66 – Форма «Список последних событий в системе»
На данной форме выводится список последних действий пользователей в системе. Некоторые из записей содержат в себе гиперссылки, которые позволяют открывать другие формы, рассмотренные выше. Например, нажатие на ссылку с именем контрагента откроет форму «Информация о контрагенте» (рисунок 29).
Если в этом списке появляется сообщение о том, что пользователь создал новый вопрос, то можно, не переходя на форму «Список вопросов», нажать на ссылку с текстом вопроса, и откроется форма «Быстрое комментирование вопроса», показанная на рисунке 67.
Рисунок 67 – Форма «Быстрое комментирование вопроса»
На этой форме пользователь видит открытый вопрос с кнопками «Ответить» и «Все комментарии». Кнопка «Ответить» открывает форму «Создание ответа на вопрос» (рис. 65), а «Все комментарии» - скрывает или разворачивает ответы на вопрос.
|
