Quick ux and ui update list

From Cynefin.io
Jump to navigation Jump to search

This page contains all that is suggested for some early simple updates initially undertaken by our Intern Andrea working from Singapore.

Main ideas

Basic CE colour and font standards

Goal - set the Workbench page to match colours and fonts to the Platform page.

The workbench will always allow for a blank page when the Workbench URL is invoked without parameters. This provides a dropdown list of framework selection options. The main page content area will always contain the particular framework workbench graphics and not the framework selection list as is the case for the Platform. This is because most usages will involve passed in framework properties and will display the graphics on entry.

Example pages

This is the platform home page, considered currently to reflect CognitiveEdge standards for such applications:


and the current Workbench home page - no framework selected:


and the current Workbench home page - a framework has been selected or passed in:


Issues to address

The details of colour values and font names and sizes will be given via the CE dev team.

  1. Colour - self explanatory.
  2. Fonts - self explanatory.
  3. Logos as per Platform; the bottom CognitiveEdge one and SenseMaker one on the top left.
  4. Copyright to be added.
  5. The menu system works slightly differently in the Workbench to the Platform. In particular, menu content (top and left) will be dynamically built. But with the current Shiny Dashboard with right menu pull out we should add user name and photo in the top left instead of top right.
  6. The Platform left menu is, like the workbench, broken into sections. The Workbench for now 2 sections. At the top is the modules, then the filters. The Platform image above has 4 sections: "Manage my...", "Beta Testers", "Alpha Testers" and "Platform Administrators". The workbenches 2 sections and the details displayed under the modules section should look just like the Platform. The filters section is different as it contains dropdowns etc, not simply text. But the fonts and colours should still match.
  7. The Platform also has a second top menu, information and input bar. This then can contain information about whatever is selected within context as well as additional selection and update options (search boxes, update/add buttons and so on). It would be good for the Workbench to also contain an area like this, and we can work towards providing it initially through the R Code.
  8. The Workbench also contains tabs at the top - this is specific to the workbench (I have not seen tabs in the Platform). But the colours and fonts need to match standard, and we may need to enquire about specific tab standards.

Technical points

The main ui.R Shiny R script file has a CSS sheet attached to it. This should be removed and made external. It will be necessary to determine the best way in R Shiny to implement external CSS. We wish to have a cascading hierarchy in order to implement client specific overrides for all the main page elements.

Some of the layout details are within the R Code - e.g. the colour buttons with the left menu colour select. These may also need to be externalised.


The workbench should allow the scrolling of each section of the page to scroll independently. In particular:

  1. While scrolling the graph page the top menu (and if we add the second top menu, that too) and the left menu should remain still.
  2. The left menu should scroll independently of the main graph area and keep the top menus displayed.
  3. Thus the top menu should always show.

Left menu too wide

The left menu is taking up too much screen space but the current widgets seem to squash when trying to narrow it. We need to look at this and see if a combination of code/css can fix this.

Fitting text and page sizing

A number of areas within the left menu text can expand out over the left menu area. It would be good to know if we can make all left menu text fit within the left menu.

Pages within the main graphic should reflect the amount of data displayed. Currently a black background area shows when the graphic display area overruns the page height. We need to make this dynamic (not sure whether css or code or both).

The top menu also has some layout and text size issues. Ones known:

  1. Reset option buttons should be the same size - currently they alter via amount of text.
  2. Framework selected display should be as per the Platform second top menu.

Signification dropdown to fragments

Each fragment/story (Fig 1.) can have a dropdown to show signification, similar to those on the Platform (Fig 2.)

Fig 1.
Fig 2.