wiki:BluePrint/SAFIRE/GUIDesign

Version 43 (modified by Nuwan Waidyanatha, 7 years ago) ( diff )

--

SAFIRE GUI DESIGN

Design Norms

Why design norms? They are for simplifying the GUI design for optimizing the human computer interactions to:

  • interface with the system with zero complexity
  • know where they are at every step of each function
  • present the information using a standard set of objects

Each of the GUI objects will comprise the following design and functional characteristics:

  1. Dashboard
  2. Profile

Dashboard

  • Upon login the user will be presented with the dashboard
  • It has two main containers
  1. Quick Nav with:
    1. Indicators with statistics to realize where are the workloads and bottlenecks in the EOC workflows
    2. on-click to select the dataset for the table and map data
    3. Incidents will be the default dataset
  2. Two tabs with the table and map views for filtering the dataset
    1. By default, the Incident data is displayed
    2. when user selects another operation or entity that data is diplayed
    3. tabs will try to remember the last applied filter option, even if user changes between datasets

First "Quick Nav" container

A row with status Indicators that also serve as a Quick Nav control. They would vary for each of the EOC role specific dashboards:

Role dashboard incidents resource request dispatch planning logistics admin & finance
Commander Y Y Y Y Y Y
Operations Y Y Y
Planning Y Y Y Y Y
Logistics Y Y
Communication Y

Second "Filter" container

This container lays static below the first <div> container has two tabs: (1) Table view and (2) Map view.

  • The data displayed in the table and map view are:
    • based on the selected Quick Nav object
    • It will display the data based on the last set filters (both table or map)
  • Table view is a listing of all the records with attribute specific filtering
  • Map view is spatial representation of the records with zoom in & out functions for filtering
  • The table and map view records synchronize during the filtering processed used by either tab (with an option to clear the filters)
  • When a record is selected, it triggers navigation to a Profile representation of the record

Profile

  • Upon selecting a record from the table or map view the user is be presented with the information
  • Depending on the information (or queried dataset) it can have a combination of any of the following sub containers:
    • Summary of the key pieces of information (e.g. title, headline, area description) to confirm that the selected record
    • Map indicating the origin or the area pertaining to the information (zoom in on the area)
    • Table listing of all related entities (e.g. related to an incident are: dispatched resources, SitReps, etc)
    • Feeds photos, videos, social media, other content feeds from the response team
    • Qualifying elements such as identifiers, dates, and author information

The table describes the

Component Summary Map Table Feeds Qualifiers
Report event type, event title, incident title, incident type, reporting person contact details, report details Location of of the incident, address, geocodes, NONE NONE event id, incident id, reported date, authored by, updated by, update date,
Incident event type, event title, incident title, incident type, incident state, incident commander, Location of of the incident, address, geocodes, (e.g. to help response teams get to location) response resources (dispatch) who & what is dispatched & pending, image gallery, video stream, social media posts event id, incident id, reported date, authored by, updated by, update date,
Plan event title, incident title, SOP type, plan state, incident commander, nearest available resources
Track
Sitrep

GUI Objects

The GUI design comprises the following objects

Object Description
01. Menu items role specific navbar menu items and the submenu hierarchy; typically itemized in the nav-bar
02. Dashboard role specific landing page (i.e. upon login direct user to the page). It can be a collection of one or more of the objects listed below.
03. Profile is a presentation of all the relevant information pertaining to a selected query record that might be presented using one or more of the objects listed below
04. Quick Nav image icon or container to navigate to a particular EOC function: Operations, Planning, Logistics, Communication, Admin & Finance.
05. Button Strictly for CRUD only; i.e. standard Eden buttons
06. Summary summary box with either a paragraph or list (e.g. headline, title, status, priority, date information)
07. Indicator numbers, color-coding, chart, or other dynamic indicator (e.g. number of active incident reports)
08. Table table listing or the records with selected columns (i.e. standard Eden table).
09. Map map view of the geo-tagged information on a map (i.e. standard Eden map).
10. Feeds other data feeds such as photos, video streams, social media streams, chat window between EOC and Site,
Note: See TracWiki for help on using the wiki.