Starting point for the UI logic. Please find below some pointers:

Shared Space UI Graphical and operation/interaction Logic

This document presents the graphical guidelines and interaction logic of the shared space application releasesM24.

The descriptions of the components of the shard space application have been divided as follows:

  • Name of component
  • Description of its activity within the interface
  • Image of the component in the user interface with optional comments pointing out physical traits or important points that should be noted in its structuring
  • Details about its layout/graphics

The user interface of the Shared Space Application is made up of many different parts. The main parts are the tabs, the working area where direct manipulation occurs of items in the view, and the menu bar. These parts are made up of the following basic components:

  • Tabs, dialogue box, alert boxes
  • Buttons (Control)
  • Scrollbars
  • Dropdown menus
  • Icons
  • Checkboxes
  • Radio buttons

Colors UsedDimensionsFonts
#FF9A47 (dark orange 1)
#FFAA01 (dark orange 2)
#FFC04F (light orange)
#EFDBA9 (tan)
#FF6600 (red)
#8D8D8D (grey)
#4F4F4F (black)
Linear gradient #FEFEFE to #9D9A94
379 x 112pxDesign based on Helvetica Neue Light, re-scalable size, #000000

Tab button
The tab “button” is an integral part of the tab container, since it is with this button that the tab is expanded or collapsed. The button is always visible in the interface, thus, it available for the user all the time.

Command Buttons
  • The OK button should appear either to the left of the Cancel or above it and the spacing of the buttons should be consistent with the other buttons in the interface
  • Align the buttons in a row along the bottom or right side of the window
  • Ensure that all command buttons are the same dimensions throughout an application; place them in the same position on all windows.

Alert Boxes
An alert box is a dialog box that provides information to the user on the user actions. Alert boxes present for example, error messages, warn of potentially harmful actions, and informational messages. The basic alert box has a symbol that identifies the type of the alert, a textual message, and one or more command buttons. The alert boxes should have a title and provide affordances for the user from where to move them or close them.

Window Appearance
The panel windows can be moved but there is no affordance from where the user can grasp the window and move it.

- Is there a reason for the different background colour in the above examples? If not this kind of displaying is not consistent.
Scroll bars
Most of the scrollbars are in a container, such as the Tab. The scrollbar functions in the same way as on any conventional application e.g., browser. The style and colouring of the scrollbar maximizes the visual cues for the user to understand their actions within the user interface.

Drop-down Menus
The dropdown menu is used when only one single choice is possible.

Icons enable recognition of the item without a need to read what the item represents, i.e., recognition rather than recall. When using icons, the symbols used need to be internationally recognisable . Use of meaningful names in icons is essential. In the following cases, the icon name affects the display or the functionality of an action

A checkbox allows the user to make more than one choice at a time. Checkboxes are used in situations where one or more parameters can be chosen. An example is the use of checkboxes in the “Show/Hide” section in the Controls tab to show or hide the tasks, content items, notes, links and link descriptions.

Development M 28 - M 42 Graphic Design


Complete interface.PNG Info on Complete interface.PNG 57193 bytes
SharedSpace Graphic and Logic.doc Info on SharedSpace Graphic and Logic.doc 4213760 bytes
UserInput properties.PNG Info on UserInput properties.PNG 48078 bytes
alert boxes.PNG Info on alert boxes.PNG 27087 bytes
buttons properties.PNG Info on buttons properties.PNG 84331 bytes
buttons1.PNG Info on buttons1.PNG 1860 bytes
buttons2.PNG Info on buttons2.PNG 1887 bytes
checkbox properties.PNG Info on checkbox properties.PNG 9359 bytes
icon properties.PNG Info on icon properties.PNG 99442 bytes
logo.PNG Info on logo.PNG 8306 bytes
menu.PNG Info on menu.PNG 93916 bytes
radio buttons.PNG Info on radio buttons.PNG 44438 bytes
scrollbars.PNG Info on scrollbars.PNG 26399 bytes
session Default.PNG Info on session Default.PNG 1794 bytes
session log2.PNG Info on session log2.PNG 777 bytes
tab properties.PNG Info on tab properties.PNG 30596 bytes
tabs.PNG Info on tabs.PNG 50138 bytes
windowProperties.PNG Info on windowProperties.PNG 65284 bytes
  Page Info My Prefs Log in
This page (revision-41) last changed on 18:24 25-Mar-2017 by merja.

Referenced by
Accross W Ks UI T...

JSPWiki v2.4.102