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)
- Dropdown menus
- Radio buttons
| ||Colors Used||Dimensions||Fonts|
||#FF9A47 (dark orange 1)|
#FFAA01 (dark orange 2)
#FFC04F (light orange)
Linear gradient #FEFEFE to #9D9A94
|379 x 112px||Design based on Helvetica Neue Light, re-scalable size, #000000|
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.
- 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.
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.
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.
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.
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