Post on 05-Apr-2018
transcript
7/31/2019 CUTLASS RUP UI User Interface Prototype v1.0
1/43
Coventry University Track Locate and Assemble(CUTLASS)
User-Interface Prototype
Version 1.0
7/31/2019 CUTLASS RUP UI User Interface Prototype v1.0
2/43
Coventry University Track Locate and Assemble (CUTLASS) Version: 1.0
Date: 9-11-2011
CUTLASS_rup_User_Interface Prototype_v1.0.docx
Author: Saud Aljaloud Company Name, 2012
Revision HistoryDate Version Description Author
018/11/2011 1.0 First Draft Saud Aljaloud
7/31/2019 CUTLASS RUP UI User Interface Prototype v1.0
3/43
Coventry University Track Locate and Assemble (CUTLASS) Version: 1.0
Date: 9-11-2011
CUTLASS_rup_User_Interface Prototype_v1.0.docx
Author: Saud Aljaloud Company Name, 2012
Table of Contents
List of Tables 4List of Figures 41. Introduction 5
1.1 Purpose 51.2 Scope 51.3 Definitions, Acronyms, and Abbreviations 51.4 References 51.5 Overview 5
2. Device Software (client side) interfaces 62.1 Purpose 62.2 Main Interface (Device software) 6
2.2.1
Purpose 6
2.2.2 Objects and Actions 72.2.3 Composites 72.2.4 Visual Dimensions 72.2.5 Screenshots Sample 9
2.3 Setting Interface (Device software) 92.3.1 Purpose 92.3.2 Objects and Actions 102.3.3 Composites 102.3.4 Visual Dimensions 102.3.5 Screenshots Sample 11
3. Primary Window 113.1 Home page (Log in interface) 11
3.1.1 Purpose 113.1.2 Objects and Action 123.1.3 Composites 123.1.4 Visual Dimensions 123.1.5 Screenshot Sample 13
3.2 Control Panel for (Students) Interface 143.2.1 Purpose 143.2.2 Objects and Actions 143.2.3 Composites 143.2.4 Visual Dimensions 143.2.5 Screenshot Sample 15
3.3 Control Panel for (staff) Interface 153.3.1 Purpose 153.3.2 Objects and Actions 173.3.3 Composites 173.3.4 Visual Dimensions 173.3.5 Screenshot Sample 18
3.4 Registration Interface 183.4.1 Purpose 183.4.2 Objects and Actions 193.4.3 Composites 19
7/31/2019 CUTLASS RUP UI User Interface Prototype v1.0
4/43
Coventry University Track Locate and Assemble (CUTLASS) Version: 1.0
Date: 9-11-2011
CUTLASS_rup_User_Interface Prototype_v1.0.docx
Author: Saud Aljaloud Company Name, 2012
3.4.4 Visual Dimensions 203.4.5 Screenshot Sample 20
3.5 Device configuration 213.5.1 Purpose 213.5.2 Objects and Actions 223.5.3 Composites 223.5.4 Visual Dimensions 233.5.5 Screenshot Sample 25
3.6 List of devices reported as lost or theft interface 263.6.1 Purpose 263.6.2 Objects and Actions 263.6.3 Composites 263.6.4 Visual Dimensions 263.6.5 Screenshot Sample 27
3.7 Tracking device activity interface 273.7.1 Purpose 273.7.2 Objects and Actions 283.7.3 Composites 283.7.4 Visual Dimensions 293.7.5 Screenshot Sample 30
4. Secondary Window 314.1 User Database interface 31
4.1.1 Purpose 314.1.2 Objects and Actions 314.1.3 Composites 324.1.4 Visual Dimensions 324.1.5 Screenshot Sample 33
4.2 Confirm Interfaces 334.2.1 Purpose 334.2.2 Objects and Actions 334.2.3 Composites 344.2.4 Visual Dimensions 344.2.5 Screenshot Sample 35
4.3 Edit personal information 364.3.1 Purpose 364.3.2 Objects and Actions 364.3.3 Composites 374.3.4 Visual Dimensions 374.3.5 Screenshot Sample 38
4.4 Forget your password 394.4.1 Purpose 394.4.2 Objects and Actions 394.4.3 Composites 404.4.4 Visual Dimensions 404.4.5 Screenshot Sample 41
5. Graphical Standards 416. Browsing Hierarchies 42
7/31/2019 CUTLASS RUP UI User Interface Prototype v1.0
5/43
Coventry University Track Locate and Assemble (CUTLASS) Version: 1.0
Date: 9-11-2011
CUTLASS_rup_User_Interface Prototype_v1.0.docx
Author: Saud Aljaloud Company Name, 2012
List of Tables
Table 1 - Table of refeteces .......... .......... ........... .......... ........... ........... .......... ........... .......... ........... .......... ........... .......... ... 5Table 2 - Objects and actions for Main Interface (Device software) ......... ........... .......... ........... .......... ........... ........... .... 7Table 3 - Objects and actions for setting interface (Device software) ........... .......... ........... .......... ........... .......... .......... 10Table 4 - Objects and Action for Home page (Log in interface) .......... ........... .......... ........... .......... ........... .......... ........ 12
Table 5 - Object and Action for Control Panel for (Students) Interface .......... .......... ........... .......... ........... .......... ........ 14Table 6 - Objects and Actions Control Panel for (staff) Interface .......... .......... ........... .......... ........... .......... ........... ...... 17Table 7 - Objects and Actions Registration Interface .......... .......... ........... .......... ........... .......... ........... .......... ........... .... 19Table 8 - Objects and Actions Device configuration Interface .................................................................................... 22 Table 9 - Device configuration Interface (Device type and model table ) .......... ........... .......... ........... .......... ........... .... 23Table 10 - Objects and Actions User Database interface .......... .......... ........... .......... ........... .......... ........... .......... .......... 32Table 11 - Objects and Actions for User data interface ........... .......... ........... .......... ........... .......... ........... .......... .......... 34Table 12 - Object and Actions for Edit personal information interface ........... .......... ........... .......... ........... .......... ........ 37Table 13 - Objects and Actions for Forget your password interface ......... ........... .......... ........... .......... ........... ........... .. 40List of Figures
Figure 1 - Main interface (for device software) (in case of status is connected) ........... .......... ........... .......... ........... ...... 9Figure 2 - Main interface (for device software) (in case of status is NOT connected) .......... ........... .......... ........... ........ 9Figure 3 - Main interface (for device software) , shortcuts Dropdown list ........... .......... ........... .......... ........... ........... .... 9Figure 4 - Setting Interface (Device software) when the test results are positives ............... .......... ........... .......... ........ 11Figure 5 - Setting Interface (Device software) when the test results are negatives .......... ........... .......... ........... .......... . 11Figure 6 Home page (Log in interface) ......... ........... .......... ........... ........... .......... ........... .......... ........... .......... ........... .... 13Figure 7 Control Panel (student) Interface................ .......... ........... ........... .......... ........... .......... ........... .......... ........... .... 15Figure 8 - Control Panel for (staff) Interface .......... ........... .......... ........... .......... ........... .......... ........... .......... ........... ...... 18Figure 9 - Registration Interface .................................................................................................................................. 21Figure 10- Device configuration Interface ................................................................................................................... 25Figure 11 - List of devices reported as lost or theft interface .......... .......... ........... .......... ........... .......... ........... .......... ... 27Figure 12 - Tracking device activity interface ............................................................................................................. 31Figure 13 - User Data interface ........... .......... ........... .......... ........... ........... .......... ........... .......... ........... .......... ........... .... 33Figure 14 - Add a new devise confirmation interface ......... ........... ........... .......... ........... .......... ........... .......... ........... .... 35Figure 15 - Edit personal details confirmation interface ........... .......... ........... .......... ........... .......... ........... .......... .......... 35Figure 16 - Register new user confirmation interface........... ........... .......... ........... .......... ........... .......... ........... .......... ... 36Figure 17 - Edit personal information intetface ........................................................................................................... 39Figure 18 - Forget your password interface ................................................................................................................. 41
7/31/2019 CUTLASS RUP UI User Interface Prototype v1.0
6/43
Coventry University Track Locate and Assemble (CUTLASS) Version: 1.0
Date: 9-11-2011
CUTLASS_rup_User_Interface Prototype_v1.0.docx
Author: Saud Aljaloud Company Name, 2012
User-Interface Prototype
1. Introduction
The UIP user interface prototype document of the CUTLASS system is a document that
deals the creativity and designing of UI and made up of windowing architectures andcomputer graphics. Which provide information to the system users through onscreendisplays, graphical displays, text displays, etc. as well as this document gathers
information from users through the input devices for example mouse, keyboard etc.
1.1 Purpose
The main purpose of the UIP is to deliver or display details and information to the end-users on screen and graphically etc. to enable them perform a particular task. In addition
this document shows designs and graphics that are easy and clear to the end- users in the
CUTLASS system.
1.2 Scope
UIP document will be useful for the next departments in the CUTLASS system: Designers: the designers of CUTLASS system will need UIP to tests systems
compatibility with the internal architecture of the CUTLASS system.
Testers: testing implementation, in what way and how testing will beimplemented in the system.
Analysts: to organize and analysis the software specifications and requirementsof CUTLASS system.
Stakeholders of the system: enable them to knowing current situation of thesystem and deliverables. Also enable stakeholders to interact with the system.
1.3 Definitions, Acronyms, and Abbreviations
CUTLASS: Coventry University Track Locate and AssembleUIP: User interface prototype
UI: User interface
1.4 References
Title Title Year
CUTLASS NEXT ITERATION
PLAN
Zainab Saad 2011
CUTLASS VISION
DOCUMENT
Kishen Gajanan 2011
CUTLASS USE CASE MODEL
+ SURVEY
Zainab Saad 2011
Table 1 - Table of refeteces
1.5 Overview
The following interfaces describe and detailed development of CUTLASS system:
7/31/2019 CUTLASS RUP UI User Interface Prototype v1.0
7/43
Coventry University Track Locate and Assemble (CUTLASS) Version: 1.0
Date: 9-11-2011
CUTLASS_rup_User_Interface Prototype_v1.0.docx
Author: Saud Aljaloud Company Name, 2012
Device Software (client side) interfaces Home page (Log in interface) Control panel interface (student ) Control panel interface (Staff) Registration Interface Device configuration interface List of devices reported as lost or theft interface Tracking device activity interface Add new user (staff /admin) interface Edit personal information interface Edit Users Staff/student interface. Users database interface Forget your password interface Add new device confirm interface Edit personal information confirm interface Register new student confirm interface
2. Device Software (client side) interfaces
2.1 Purpose
The purpose of this interface is to make user able to control the CUTLUASS software on
his own device. So user can active the software or deactivate it also test the device futuressuch as camera, GPS, and internet connection. Moreover, user can knows the current
status for the device if is it connected or not. User to be able to connect to CUTLASS
system must register in the system first and then add the new device and then enter hisemail and password through this interface.
2.2 Main Interface (Device software)
2.2.1 Purpose
The purpose of this interface is to make user able to access to device setting, active or
deactivate CUTLASS software. Also user able to choose a shortcut for runs this softwarefor security purpose. And then user will be able to hide the interface to be invisible. Next
time if user wants show CUTLASS system interface, he can use shortcut that whatconfigure first install.
7/31/2019 CUTLASS RUP UI User Interface Prototype v1.0
8/43
Coventry University Track Locate and Assemble (CUTLASS) Version: 1.0
Date: 9-11-2011
CUTLASS_rup_User_Interface Prototype_v1.0.docx
Author: Saud Aljaloud Company Name, 2012
2.2.2 Objects and Actions
Object Action
Drop down List box Title
Display the available shortcuts. However, each device hasdifferent shortcuts types for example laptop devices have
shortcut as follow :Alt + F1 Ctrl + Shift + N
Alt +F2 Ctrl + F7
Alt +F11 Ctrl + F3
Alt + Ctrl + 3 Ctrl + F2
Alt + C .. etc.Space + 0
Therefore, each device has different shortcuts, so in next versionof document will illustrate shortcuts for all devices that will be
supported by CUTLASS system. Drop down list shown in Fig4
Push button
Active
This makes the software active status
Push button
Deactivate
This makes the software not active status
Push button Hideme
Make the CUTLASS interface invisible.
Push button
Setting
Display setting interface
Table 2 - Objects and actions for Main Interface (Device software)
2.2.3 CompositesThis interface consists of:- one drop down list box- four buttons which are:
o Active button: this make the system in active status that meansthe system is connected with CUTLASS system server.
o Deactivate button: this make the system in active status, thatmeans the system is connected with CUTLASS system server.
o Hide me button: this makes the software interfaces invisible forsecurity (the thief user cannot realise if there are any tracking
software in the stolen device )
o Setting button:- Status label which shows for user the current status for the software if its connectwith CUTLASS system or not, as shown in Fig2 & Fig3.
2.2.4 Visual Dimensions
2.2.4.1 Position
The position of the design is unmovable frame so user cannot change frame border. Also
7/31/2019 CUTLASS RUP UI User Interface Prototype v1.0
9/43
Coventry University Track Locate and Assemble (CUTLASS) Version: 1.0
Date: 9-11-2011
CUTLASS_rup_User_Interface Prototype_v1.0.docx
Author: Saud Aljaloud Company Name, 2012
the frame cannot be scrolled up or down. The position of the form will be in the middle
of user screen also will be in the top of any other app.
2.2.4.2 Size
The design has a title bar, so it can closed but cannot be minimized or maximized. The
frame size is 147,246 pixels. The font type is Tahoma and the size is 8pt.
2.2.4.3 Shape
The interface design is rectangular.
2.2.4.4 Colors
Bright
gray
Form background
red For deactivate background, Status label if it Not connected.
green For active button background, Status label if it connected.
white Drop list background
black Form line border
Gray
gradient
For Hide me and Setting buttons background.
7/31/2019 CUTLASS RUP UI User Interface Prototype v1.0
10/43
Coventry University Track Locate and Assemble (CUTLASS) Version: 1.0
Date: 9-11-2011
CUTLASS_rup_User_Interface Prototype_v1.0.docx
Author: Saud Aljaloud Company Name, 2012
2.2.5 Screenshots Sample
Figure 1 - Main interface (for device software) (in case of
status is connected)
Figure 2 - Main interface (for device software) (in case of
status is NOT connected)
Figure 3 - Main interface (for device software) , shortcuts Dropdown list
2.3 Setting Interface (Device software)
2.3.1 Purpose
The purpose of this interface is to make users able to change device software setting and
test the device equipments such as camera, GPS etc. Also to enter user access info suchas email and password to be able to access to the system.
7/31/2019 CUTLASS RUP UI User Interface Prototype v1.0
11/43
Coventry University Track Locate and Assemble (CUTLASS) Version: 1.0
Date: 9-11-2011
CUTLASS_rup_User_Interface Prototype_v1.0.docx
Author: Saud Aljaloud Company Name, 2012
2.3.2 Objects and Actions
Object Action
Push button TestCamera
Display Camera status under the button shows if it is workingor not.
Label Camera test
result
Shows camera test result
Push button Test
GPS
Display GPS status under the button shows if it is working or
not.
Label GPS testresult
Shows GPS test result
Push button Test
internet connection
Display internet connection status under the button shows if it
is connected or not.
Label Internetconnection status
result
Shows internet connection status test result
Text box Email User must fill this field. To be able to activate the device bylinking it with CUTLASS system.
Text box Password User must fill this field. To be able to activate the device
Push button Save To save user email and password.Table 3 - Objects and actions for setting interface (Device software)
2.3.3 Composites
This interface consists of one frame which contains:- Four buttons for testing purpose to make sure all device futures work. Also under
each button status label, which shows the testing result if exist or not also if is it
work properly or not.- Two text box: user email and password for CUTLASS system. User should fill these
fields to be able to get connected to the system.
2.3.4 Visual Dimensions
2.3.4.1 Position
The position of the design is unmovable frame so user cannot change frame border. Also
the frame cannot be scrolled up or down. The position of the form will be in the middle
of user screen also will be in the top of any other app.
2.3.4.2 Size
The design has a title bar, so it can closed but cannot be minimized or maximized. Theframe size is 147,246 pixels. The font type is Tahoma and the size is 8pt.
2.3.4.3 Shape
The interface design is rectangular.
7/31/2019 CUTLASS RUP UI User Interface Prototype v1.0
12/43
Coventry University Track Locate and Assemble (CUTLASS) Version: 1.0
Date: 9-11-2011
CUTLASS_rup_User_Interface Prototype_v1.0.docx
Author: Saud Aljaloud Company Name, 2012
2.3.4.4 Colors
Bright
gray
Form background
red Text get red when the test result is negative
green Text get red when the test result is positivewhite Text box background
black Form line border and normal text
Gray
gradient
For buttons background.
2.3.5 Screenshots Sample
Figure 4 - Setting Interface (Device software) when
the test results are positives
Figure 5 - Setting Interface (Device software) when
the test results are negatives
3. Primary Window
3.1 Home page (Log in interface)
3.1.1 Purpose
This interface illustrates what CUTLASS system about and what system futures, in
textual and graphical representation. In addition, users staff/student can log in through
this interface and can access to registration interface.
7/31/2019 CUTLASS RUP UI User Interface Prototype v1.0
13/43
Coventry University Track Locate and Assemble (CUTLASS) Version: 1.0
Date: 9-11-2011
CUTLASS_rup_User_Interface Prototype_v1.0.docx
Author: Saud Aljaloud Company Name, 2012
3.1.2 Objects and Action
Objects Actions
Push Button- Log on Makes the registered users access to the system(Control panel interface)
Push Button- Click here to sign up Transfer users (Student) to registration
interface.
Hyperlink - Forgot your password Transfer users to rest password interface which
make users able to send new password to their
email.
Check box Keep me signed in When user checked the box, user do not need
enter his password and user name on each
access to the system. Access details will be
saved automatically.
Hyperlink - Help Directs users to a search box which users cantype in their enquiries or related search topics.
Hyperlink - More Info About CoventryUniversity Go to CuOnline
Link to Coventry University CuOnline website
Text Email Address For user email address to be entered here to be
able to access to the system to Control panel
interface.
Text Password For user password to be entered here to be able
to access to the system to Control panel
interface.
Table 4 - Objects and Action for Home page (Log in interface)
3.1.3 Composites
This Home page interface consists of the next layouts which are:
Top frame: is consist of CUTLASS topic Centre left frame: Gives a brief description of what CUTLASS system is about
and its objectives. Also there are links to registration interface and to CuOnlinewebsite.
Centre right frame: consist of two text box for user name and password, andbutton link to log in to the system. Moreover, there is check box to make users
able to save log in data. And hyperlink to rest password interface.
Bottom right frame: Hyperlink to help page (enquiries, instruction etc.)3.1.4 Visual Dimensions
3.1.4.1 Position
The position of the design is flexible with internet browser and can be scrolled up or
down based on the browser window and user screen resolution.
3.1.4.2 Size
The design has a title bar, so it can be minimized, maximized or closed that based in user
7/31/2019 CUTLASS RUP UI User Interface Prototype v1.0
14/43
Coventry University Track Locate and Assemble (CUTLASS) Version: 1.0
Date: 9-11-2011
CUTLASS_rup_User_Interface Prototype_v1.0.docx
Author: Saud Aljaloud Company Name, 2012
internet browser configuration.
3.1.4.3 Shape
The interface design is flexible and could be square or rectangular based in user web
browser configuration.3.1.4.4 Color
The Interfaces design mostly consists of the following colors:
Cyan For to frame background (topic frame), also it for information and
help text.
White interface background
Dark red topic text, top frame
Blue unvested link
Purple vested link
Black This color for normal text (textbox title, alert message title etc.)
And lines.
Gray Button color
3.1.5 Screenshot Sample
Figure 6 Home page (Log in interface)
7/31/2019 CUTLASS RUP UI User Interface Prototype v1.0
15/43
Coventry University Track Locate and Assemble (CUTLASS) Version: 1.0
Date: 9-11-2011
CUTLASS_rup_User_Interface Prototype_v1.0.docx
Author: Saud Aljaloud Company Name, 2012
3.2 Control Panel for (Students) Interface
3.2.1 Purpose
This interface is generally responsible for all CUTLASS system control. So student canaccess to one of the following interfaces: Edit personal details. Device configuration. Reported device list.
All users have different permission. Therefore this interface has been designed forstudents users. For more about permission see Supplementary Specification document.
Users to be able to access to this interface must log in through Log in interface.
3.2.2 Objects and Actions
Object Action
Hyperlink Edit
personal details.
Displays the Edit personal details interface
Hyperlink device
configuration
Link to device configuration interface (add, edit or report device)
Hyperlink Reported
device list.
Link to reported devices list ( to Tracking device activity)
Hyperlink Log out Displays the Home (Log in) interface
Table 5 - Object and Action for Control Panel for (Students) Interface
3.2.3 Composites
This Control Panel for (Students) Interface consists of the next layouts which are:
Top frame: is consist of CUTLASS topic and Log out button Bottom frame: three links (Edit personal details), (Device configuration),
(Reported device list).
3.2.4 Visual Dimensions
3.2.4.1 Position
The position of the design is flexible with internet browser and can be scrolled up or
down based on the browser window and user screen resolution.
7/31/2019 CUTLASS RUP UI User Interface Prototype v1.0
16/43
Coventry University Track Locate and Assemble (CUTLASS) Version: 1.0
Date: 9-11-2011
CUTLASS_rup_User_Interface Prototype_v1.0.docx
Author: Saud Aljaloud Company Name, 2012
3.2.4.2 Size
The design has a title bar, so it can be minimized, maximized or closed that based in user
internet browser configuration.
3.2.4.3 Shape
The interface design is flexible and could be square or rectangular based in user web
browser configuration.
3.2.4.4 Colors
Cyan For to frame background (topic frame), also it for information and
help text.
White interface background
Dark red topic text, top frame
Blue unvested link
Purple vested link
Black This color for normal text (textbox title, alert message title etc.)
And lines.
Gray Button color
3.2.5 Screenshot Sample
Figure 7 Control Panel (student) Interface
3.3 Control Panel for (staff) Interface
3.3.1 Purpose
This interface is generally responsible for all CUTLASS system control. So Staff and
admin can access to one of the following interfaces:
Edit personal details. Device configuration.
7/31/2019 CUTLASS RUP UI User Interface Prototype v1.0
17/43
Coventry University Track Locate and Assemble (CUTLASS) Version: 1.0
Date: 9-11-2011
CUTLASS_rup_User_Interface Prototype_v1.0.docx
Author: Saud Aljaloud Company Name, 2012
Reported device list. User Database
All users have different permission. Therefore this interface has been designed for staff
and admen users. For more about permission see Supplementary Specification document.
Users to be able to access to this interface must log in through Log in interface.
7/31/2019 CUTLASS RUP UI User Interface Prototype v1.0
18/43
Coventry University Track Locate and Assemble (CUTLASS) Version: 1.0
Date: 9-11-2011
CUTLASS_rup_User_Interface Prototype_v1.0.docx
Author: Saud Aljaloud Company Name, 2012
3.3.2 Objects and Actions
Object Action
Hyperlink Edit
personal details.
Displays the Edit personal details interface
Hyperlink device
configuration
Link to device configuration interface (add, edit or report device)
Hyperlink Reported
device list.
Link to reported devices list ( to Tracking device activity)
Hyperlink UserData
Link to users database interface ( add and configure usersstaff/admin , give users permission, search for users )
Hyperlink Log out Displays the Home (Log in) interface
Table 6 - Objects and Actions Control Panel for (staff) Interface
3.3.3 Composites
This Control Panel for (staff) Interface consists of the next layouts which are:
Top frame: is consist of CUTLASS topic and Log out button Bottom frame: three links (Edit personal details), (Device configuration),
(Reported device list, User Data).
3.3.4 Visual Dimensions
3.3.4.1 Position
The position of the design is flexible with internet browser and can be scrolled up or
down based on the browser window.
3.3.4.2 Size
The design has a title bar, so it can be minimized, maximized or closed that based in user
internet browser configuration.
3.3.4.3 Shape
The interface design is flexible and could be square or rectangular based in user web
browser configuration.
3.3.4.4 Colors
Cyan For to frame background (topic frame), also it for information and
help text.
White interface background
Dark red topic text, top frame
Blue unvested link
Purple vested link
7/31/2019 CUTLASS RUP UI User Interface Prototype v1.0
19/43
Coventry University Track Locate and Assemble (CUTLASS) Version: 1.0
Date: 9-11-2011
CUTLASS_rup_User_Interface Prototype_v1.0.docx
Author: Saud Aljaloud Company Name, 2012
Black This color for normal text (textbox title, alert message title etc.)
And lines.
Gray Button color
3.3.5 Screenshot Sample
Figure 8 - Control Panel for (staff) Interface
3.4 Registration Interface
3.4.1 Purpose
This interface is generally responsible for register new student and validates studentdetails with Coventry University database. And through this interface students can
register their self in CUTLASS system to enable them to access to the system. Also there
are the most important point in this interface which is the users must accept CUTLASS
terms and conditions, or the user can not register with CUTLASS system.
7/31/2019 CUTLASS RUP UI User Interface Prototype v1.0
20/43
Coventry University Track Locate and Assemble (CUTLASS) Version: 1.0
Date: 9-11-2011
CUTLASS_rup_User_Interface Prototype_v1.0.docx
Author: Saud Aljaloud Company Name, 2012
3.4.2 Objects and Actions
Object Action
Drop down List box
Title
Displays the following titles:
(Dr.- Lady.- Miss- Mr.- Mrs.- Ms.- Prof.- Rev.- Sir.- Other)User can choose one of the list items.
Text box First Name*
Here user must write First Name in this field , The star (*) heremeans (Not optional)
Text box Surname
*
Here user must write Surname in this field, The star (*) here
means (Not optional)
Text box StudentID
The user must enter Student ID that given form CoventryUniversity in this field, The star (*) here means (Not optional)
Text box Mobile
phone number
In this field the user should write Mobile phone number.
(optional field)
Text box EmailAddress* Here user must write Email Address in this field, The star (*)here means (Not optional)
Text box Password In this filed user must enter a password in minimum 8
characters.
Text box Confirm
Password *
Here the user must repeat the password to match the entered
password.
Check box I have
read and acceptCUTLASS terms and
conditions
This check box must be checked by user to accept CUTLASS
system terms and conditions complete and complete registration.
Push Button
Submit
Display Register new student confirm interface and then after
few seconds automatically transfer to student control panel.Table 7 - Objects and Actions Registration Interface
3.4.3 Composites
This Registration Interface consists of the next layouts which are:
Top frame: is consisting of CUTLASS topic. Bottom frame: There are seven text box which are:
o First Name: (mandatory field), Capacity of this field is minimum 1 characterand maximum 30 characters.
o Surname: (mandatory field), Capacity of this field is minimum 1 charactersand maximum 30 characters.
o Student ID: (mandatory and numerical field), Capacity of this field isminimum 7 characters and maximum 20 characters.o Mobile phone number: (Optional and numerical field), Capacity of this field
is minimum 11 characters and maximum 11 characters.
o Email Address: (mandatory field), Capacity of this field is minimum 4characters and maximum 50 characters.
o Password: (mandatory field), Capacity of this field is minimum 8 charactersand maximum 50 characters.
7/31/2019 CUTLASS RUP UI User Interface Prototype v1.0
21/43
Coventry University Track Locate and Assemble (CUTLASS) Version: 1.0
Date: 9-11-2011
CUTLASS_rup_User_Interface Prototype_v1.0.docx
Author: Saud Aljaloud Company Name, 2012
o Confirm Password: (mandatory field), this field must match Password field.Also in the same frame there is Check box for terms and conditions so the user
should checked the box to complete registrations process.
Bottom frame: there are Submit button, after complete filling all fields the usercan submit the application by clicking on the Submit button.
3.4.4 Visual Dimensions
3.4.4.1 Position
The position of the design is flexible with internet browser and can be scrolled up ordown based on the browser window.
3.4.4.2 Size
The design has a title bar, so it can be minimized, maximized or closed that based in user
internet browser configuration.
3.4.4.3 Shape
The interface design is flexible and could be square or rectangular based in user web
browser configuration.
3.4.4.4 Colors
Cyan For to frame background (topic frame), also it for information andhelp text.
White interface background
Dark red topic text, top frameBlue unvested link
Purple vested link
Black This color for normal text (textbox title, alert message title etc.)
And lines.
Gray Button color
3.4.5 Screenshot Sample
7/31/2019 CUTLASS RUP UI User Interface Prototype v1.0
22/43
Coventry University Track Locate and Assemble (CUTLASS) Version: 1.0
Date: 9-11-2011
CUTLASS_rup_User_Interface Prototype_v1.0.docx
Author: Saud Aljaloud Company Name, 2012
Figure 9 - Registration Interface
3.5 Device configuration
3.5.1 Purpose
This interface is responsible for add new devices such as laptop, mobile phone etc.
It also responsible for devices configuration such as report stolen or theft device,download device software, edit and delete device from devices list. Also user can view
device status connected or not connect.
7/31/2019 CUTLASS RUP UI User Interface Prototype v1.0
23/43
Coventry University Track Locate and Assemble (CUTLASS) Version: 1.0
Date: 9-11-2011
CUTLASS_rup_User_Interface Prototype_v1.0.docx
Author: Saud Aljaloud Company Name, 2012
3.5.2 Objects and Actions
Object Action
Drop down List box
Device type
Displays the following titles:
(Mobile phone, Laptop, Tablet, Music player).User can choose one of the list items. This list is related to the
next list.
Drop down List box
Device Mode*l
The list here will show items based on what user had chosen in
device list. more description in composites section
Text box Serial
No*
User here must enter device serial no.
Text box Color Here user should enter device color ex: red, white & black etc.
Push Button Add To submit add new device application. This display Add New
Page Confirm interface then after few seconds automaticallyback to Device configuration interface.
Push Button
Report that selected
device lost or theft
Display List of device reported as lost or Theft interface
Radio button To select a device to be able to report it as lost or theft.
Push Button Download
To start download device software, and install it on the device.
Push Button Edit Display the Edit device interface
Push Button
Delete
Delete device from user devices list.
Push Button
Refresh table
Refresh page to update all information that shown in the
interface.Table 8 - Objects and Actions Device configuration Interface
3.5.3 Composites
This Device configuration interface consists of the next layouts which are:
Top frame: is consisting of CUTLASS topic and two.Middle frame: there are two text box one for device serial no and the other onefor device color. It also contain two drop down List box as shown in the
following table:
Device Type Device Model
Laptop
Windows 9x/XP/Vista/7Mac OS
Linux
Unix
7/31/2019 CUTLASS RUP UI User Interface Prototype v1.0
24/43
Coventry University Track Locate and Assemble (CUTLASS) Version: 1.0
Date: 9-11-2011
CUTLASS_rup_User_Interface Prototype_v1.0.docx
Author: Saud Aljaloud Company Name, 2012
Mobile phone
Nokia
Samsung
IPhone OS
Android OS
Blackberry
Tablet
IPAD
Barres & Noble Nook
Amazon Kindle fire
Sony Tablet
Samsung Galaxy
Music playerApple IPod
Zune HD
Table 9 - Device configuration Interface (Device type and model table )
Bottom frame: is consisting of 5 buttons, radio button, devices status and tableconsist of ten columns which is show devices information.
3.5.4 Visual Dimensions
3.5.4.1 Position
The position of the design is flexible with internet browser and can be scrolled up or
down based on the browser window.
3.5.4.2 Size
The design has a title bar, so it can be minimized, maximized or closed that based in user
internet browser configuration.
3.5.4.3 Shape
The interface design is flexible and could be square or rectangular based in user web
browser configuration.
7/31/2019 CUTLASS RUP UI User Interface Prototype v1.0
25/43
Coventry University Track Locate and Assemble (CUTLASS) Version: 1.0
Date: 9-11-2011
CUTLASS_rup_User_Interface Prototype_v1.0.docx
Author: Saud Aljaloud Company Name, 2012
Colors
Cyan For to frame background (topic frame), also it for information andhelp text.
White interface background
Dark red topic text, top frameBlue unvested link
Purple vested link
Black This color for normal text (textbox title, alert message title etc.)
And lines.
Gray Button color
Red If the devices status not connected. Report stolen or theft devicebutton
Green If the devices status connected
7/31/2019 CUTLASS RUP UI User Interface Prototype v1.0
26/43
Coventry University Track Locate and Assemble (CUTLASS) Version: 1.0
Date: 9-11-2011
CUTLASS_rup_User_Interface Prototype_v1.0.docx
Author: Saud Aljaloud Company Name, 2012
3.5.5 Screenshot Sample
Figure 10- Device configuration Interface
7/31/2019 CUTLASS RUP UI User Interface Prototype v1.0
27/43
Coventry University Track Locate and Assemble (CUTLASS) Version: 1.0
Date: 9-11-2011
CUTLASS_rup_User_Interface Prototype_v1.0.docx
Author: Saud Aljaloud Company Name, 2012
3.6 List of devices reported as lost or theft interface
3.6.1 Purpose
This interface is generally responsible for listing reported devices as lost or theft.
Moreover, shows device connection status and make users able to track or remove devicesfrom the list.
3.6.2 Objects and Actions
Object Action
Hyperlink Back tocontrol panel.
Displays the control panel interface
Hyperlink Log out Displays the Home (Log in) interface
Push Button Track
activity
Display the Tracking device activity interface.
Push Button
Remove
This removes the selected device from the list.
Devices status Display device connection status.
3.6.3 Composites
This List of devices reported as lost or theft interface consists of the next layouts whichare:
Top frame: is consisting of CUTLASS topic and two hyperlinks (Log out & Backto control panel).
Bottom frame: contain table consisted of nine columns which shows reporteddevices details. And the user able to track device activity and remove any devicefrom the list in case the device has been found.
3.6.4 Visual Dimensions
3.6.4.1 Position
The position of the design is flexible with internet browser and can be scrolled up ordown based on the browser window.
3.6.4.2 SizeThe design has a title bar, so it can be minimized, maximized or closed that based in userinternet browser configuration.
3.6.4.3 Shape
The interface design is flexible and could be square or rectangular based in user webbrowser configuration.
7/31/2019 CUTLASS RUP UI User Interface Prototype v1.0
28/43
Coventry University Track Locate and Assemble (CUTLASS) Version: 1.0
Date: 9-11-2011
CUTLASS_rup_User_Interface Prototype_v1.0.docx
Author: Saud Aljaloud Company Name, 2012
3.6.4.4 Colors
Cyan For to frame background (topic frame), also it for information and
help text.White interface background
Dark red topic text, top frame
Blue unvested link
Purple vested link
Black This color for normal text (textbox title, alert message title etc.)
And lines.
Gray Button color & Table header color
3.6.5 Screenshot Sample
Figure 11 - List of devices reported as lost or theft interface
3.7 Tracking device activity interface
3.7.1 Purpose
This interface is generally responsible for the following activity:
Shows for user all the reported devices activity (current activity and activityhistory, from the date of reporting to current date).
Make the user able to knows a device connection status Shows the current GPS position point in the map with full address of the reported
device. Also user will be able to review all map history.
Illustrate for user pictures that taken from the reported device. Picture will betaken as following: (this describe thief activity)
o When device turn ono When device lock or unlocko Each picture shoots from the device will be send to CUTLASS
system.
7/31/2019 CUTLASS RUP UI User Interface Prototype v1.0
29/43
Coventry University Track Locate and Assemble (CUTLASS) Version: 1.0
Date: 9-11-2011
CUTLASS_rup_User_Interface Prototype_v1.0.docx
Author: Saud Aljaloud Company Name, 2012
This interface shows all browsing activity (Current/History) for the reporteddevice. Such as:
o Link of visited websiteo Dated and time of visiting.o Web browser name (IE, Firefox etc.)
This interface shows keyboard activity, by recording anything written throughdevice keyboard (passwords, usernames, etc.). The recording will use either
software or hardware (Keystrokes).
3.7.2 Objects and Actions
Object Action
Hyperlink Back to
control panel.
Displays the control panel interface
Hyperlink Log out Displays the Home (Log in) interface
Devices status Display device connection status.
Push Button Print
report
This removes the selected device from the list.
Push Button Page
refresh
Display new update
Internal page with
horizontal scroll
Picture activity"
Display device picture activity with data and time of each
picture.
Hyperlink Picture
activity history
Display device picture activity from the reporting date
internal page withhorizontal scrollBrowsing activity
This box shows all browsing activity data for the system user
Hyperlink Browsing
activity history
Display browsing activity data from the reporting date
internal page with
horizontal scroll
Keyboard tracing
This box illustrate all keyboard activity for system user
Hyperlink Keyboardtracing history
Display keyboard tracing data from the reporting date
Map box Your
device in map
Display user device in the map with full address. Also shows
GPS position point. (Map could be provided by Google map orany map provider).
Hyperlink GPS map
history
Display browsing activity from the reporting date
3.7.3 Composites
This Tracking device activity interface consists of the next layouts which are:
7/31/2019 CUTLASS RUP UI User Interface Prototype v1.0
30/43
Coventry University Track Locate and Assemble (CUTLASS) Version: 1.0
Date: 9-11-2011
CUTLASS_rup_User_Interface Prototype_v1.0.docx
Author: Saud Aljaloud Company Name, 2012
Top frame: is consisting of CUTLASS topic, Log out link and Back to controlpanel link.
Middle frame: Bottom frame:
o Picture Activity:o Browsing activity:o Keyboard tracking activity:o Your device in the map:o GPS position point:o Table consists of six columns show basic details for the
selected device. As shown in Fig7.
3.7.4 Visual Dimensions
3.7.4.1 Position
The position of the design is flexible with internet browser and can be scrolled up ordown based on the browser window.
3.7.4.2 Size
The design has a title bar, so it can be minimized, maximized or closed that based in user
internet browser configuration.
3.7.4.3 Shape
The interface design is flexible and could be square or rectangular based in user web
browser configuration.
3.7.4.4 Colors
Cyan For to frame background (topic frame), also it for information and
help text.
White interface background
Dark red topic text, top frame
Blue unvested link
Purple vested link
Black This color for normal text (textbox title, alert message title etc.)
And lines.
Gray Button color
7/31/2019 CUTLASS RUP UI User Interface Prototype v1.0
31/43
Coventry University Track Locate and Assemble (CUTLASS) Version: 1.0
Date: 9-11-2011
CUTLASS_rup_User_Interface Prototype_v1.0.docx
Author: Saud Aljaloud Company Name, 2012
3.7.5 Screenshot Sample
7/31/2019 CUTLASS RUP UI User Interface Prototype v1.0
32/43
Coventry University Track Locate and Assemble (CUTLASS) Version: 1.0
Date: 9-11-2011
CUTLASS_rup_User_Interface Prototype_v1.0.docx
Author: Saud Aljaloud Company Name, 2012
Figure 12 - Tracking device activity interface
4. Secondary Window
4.1 User Database interface
4.1.1 Purpose
The purpose of this interface to enable staff and admiration users to manage usersaccount as shown in Fig8 such as:
Edit user personal details. Add new user (Student, staff, admin), the user to able to add new admin or staff must
be the type of user is admin. In addition staff user permitting to add new user but
cannot add staff or admin. Search for users in CUTLASS system database, either by name or user ID. Block users from using CUTLASS system. Staff able only blocks student users.
Moreover, the admin can block any users in the system. Also can view users status if
block or not.
This interface provides a table that shows basic details about CUTLASS systemusers. However, there are button provided in front of each user linking to full user
details interface.
Browse user profile that by display control panel (Student) interface. This makes thestaff or admin to take control of student account. In addition, admin can access to
staff and student account.
4.1.2 Objects and Actions
Object Action
Hyperlink Back to
control panel
Displays Control panel interface
Hyperlink Log out Link to Home page (Log on interface)
Text box " Search" Text box filed
Push Button"Search" Display search results
Radio Button "Name" Make user able to search by Users Name
Radio Button "ID" Make user able to search by Users ID
Push Button "User
profile"
Display control panel (Student) interface.
Push Button "Delete" Remove the selected user from the list.
Push Button "Edit" Display Edit user interface.
Push Button "Add" Display Add user interface
7/31/2019 CUTLASS RUP UI User Interface Prototype v1.0
33/43
Coventry University Track Locate and Assemble (CUTLASS) Version: 1.0
Date: 9-11-2011
CUTLASS_rup_User_Interface Prototype_v1.0.docx
Author: Saud Aljaloud Company Name, 2012
Push Button "Block" Block the selected user from CUTLASS system.
Radio button "No" To select a particular user to able to edit, delete, block,
Table 10 - Objects and Actions User Database interface
4.1.3 CompositesThis Home page interface consists of the next layouts which are:
Top frame: is consist of CUTLASS topic and Log out button Bottom frame: three links (Edit personal details), (Device configuration),
(Reported device list, User Data).
4.1.4 Visual Dimensions
4.1.4.1 Position
The position of the design is flexible with internet browser and can be scrolled up ordown based on the browser window.
4.1.4.2 Size
The design has a title bar, so it can be minimized, maximized or closed that based in userinternet browser configuration.
4.1.4.3 Shape
The interface design is flexible and could be square or rectangular based in user web
browser configuration.
4.1.4.4 ColorsCyan For to frame background (topic frame), also it for information and
help text.
White interface background
Dark red topic text, top frame
Blue unvested link & background for the selected item in the table &search rustles text
Purple vested link
Black This color for normal text (textbox title, alert message title etc.)
And lines.
Gray Button color
7/31/2019 CUTLASS RUP UI User Interface Prototype v1.0
34/43
Coventry University Track Locate and Assemble (CUTLASS) Version: 1.0
Date: 9-11-2011
CUTLASS_rup_User_Interface Prototype_v1.0.docx
Author: Saud Aljaloud Company Name, 2012
4.1.5 Screenshot Sample
Figure 13 - User Data interface
4.2 Confirm Interfaces
4.2.1 Purpose
The purpose of this interfaces are to confirm that submitted data by user were done
successfully. If not there are validation feedback to users such as if user submit anapplication while he miss Name text box, error message will comes up which says "you
need to fill Name ".
4.2.2 Objects and Actions
Object Action
Tow hyperlink Backto control panel
Displays Control panel interface
Hyperlink Log out Link to Home page (Log on interface)
7/31/2019 CUTLASS RUP UI User Interface Prototype v1.0
35/43
Coventry University Track Locate and Assemble (CUTLASS) Version: 1.0
Date: 9-11-2011
CUTLASS_rup_User_Interface Prototype_v1.0.docx
Author: Saud Aljaloud Company Name, 2012
Automatic transfer
link "Shortly will
transfer to control
panel"
Displays Control panel interface after wetting few seconds
Table 11 - Objects and Actions for User data interface
4.2.3 Composites
This Home page interface consists of the next layouts which are:
Top frame: is consisting of CUTLASS topic, Log out button and back to controlpanel hyperlink.
Bottom frame: confirm message that says your submission was done successfully.As shown in screenshots 1.2.3.
4.2.4 Visual Dimensions
4.2.4.1 PositionThe position of the design is flexible with internet browser and can be scrolled up ordown based on the browser window.
4.2.4.2 Size
The design has a title bar, so it can be minimized, maximized or closed that based in userinternet browser configuration.
4.2.4.3 Shape
The interface design is flexible and could be square or rectangular based in user web
browser configuration.
4.2.4.4 Colors
Cyan For to frame background (topic frame), also it for information and
help text.
White interface background
Dark red topic text, top frame
Blue unvested link
Purple vested link
Black This color for normal text (textbox title, alert message title etc.)
And lines.
7/31/2019 CUTLASS RUP UI User Interface Prototype v1.0
36/43
Coventry University Track Locate and Assemble (CUTLASS) Version: 1.0
Date: 9-11-2011
CUTLASS_rup_User_Interface Prototype_v1.0.docx
Author: Saud Aljaloud Company Name, 2012
4.2.5 Screenshot Sample
- The following interface is displayed when user get successful in adding a new device.
Figure 14 - Add a new devise confirmation interface
- The following interface displayed when users get successful in editing their own personaldetails:
Figure 15 - Edit personal details confirmation interface
7/31/2019 CUTLASS RUP UI User Interface Prototype v1.0
37/43
Coventry University Track Locate and Assemble (CUTLASS) Version: 1.0
Date: 9-11-2011
CUTLASS_rup_User_Interface Prototype_v1.0.docx
Author: Saud Aljaloud Company Name, 2012
The following interface is confirming for user that the user has been successfully registered:
Figure 16 - Register new user confirmation interface
4.3 Edit personal information
4.3.1 Purpose
The purpose from this interface is to make users able to edit there details.
4.3.2 Objects and Actions
Object Action
Drop down List box
Title
Displays the following titles:(Dr.- Lady.- Miss- Mr.- Mrs.- Ms.- Prof.- Rev.- Sir.- Other)
User can choose one of the list items.Text box First
Name *
Here user must write First Name in this field , The star (*) heremeans (Not optional)
Text box Surname
*
Here user must write Surname in this field, The star (*) here
means (Not optional)
Text box Student
ID
The user must enter Student ID that given form CoventryUniversity in this field, The star (*) here means (Not optional)
7/31/2019 CUTLASS RUP UI User Interface Prototype v1.0
38/43
Coventry University Track Locate and Assemble (CUTLASS) Version: 1.0
Date: 9-11-2011
CUTLASS_rup_User_Interface Prototype_v1.0.docx
Author: Saud Aljaloud Company Name, 2012
Text box Mobile
phone number
In this field the user should write Mobile phone number.
(optional field)
Text box Email
Address*
Here user must write Email Address in this field, The star (*)
here means (Not optional)
Text boxPassword
In this filed user must enter a password in minimum 8characters.
Text box Confirm
Password *
Here the user must repeat the password to match the enteredpassword.
Check box I have
read and accept
CUTLASS terms
and conditions
This check box must be checked by user to accept CUTLASS
system terms and conditions complete and complete registration.
Push Button
Submit
Display Register new student confirm interface and then after
few seconds automatically transfer to student control panel.
Table 12 - Object and Actions for Edit personal information interface
4.3.3 Composites
This Registration Interface consists of the next layouts which are:
Top frame: is consisting of CUTLASS topic. Bottom frame: There are seven text box which are:
o First Name: (mandatory field), Capacity of this field is minimum 1 characterand maximum 30 characters.
o Surname: (mandatory field), Capacity of this field is minimum 1 charactersand maximum 30 characters.
o Student ID: (mandatory and numerical field), Capacity of this field isminimum 7 characters and maximum 20 characters.
o Mobile phone number: (Optional and numerical field), Capacity of this fieldis minimum 11 characters and maximum 11 characters.
o Email Address: (mandatory field), Capacity of this field is minimum 4characters and maximum 50 characters.
o Password: (mandatory field), Capacity of this field is minimum 8 charactersand maximum 50 characters.
Confirm Password: (mandatory field), this field must match Password field
4.3.4 Visual Dimensions
4.3.4.1 Position
The position of the design is flexible with internet browser and can be scrolled up or
down based on the browser window.
4.3.4.2 Size
The design has a title bar, so it can be minimized, maximized or closed that based in user
internet browser configuration.
7/31/2019 CUTLASS RUP UI User Interface Prototype v1.0
39/43
Coventry University Track Locate and Assemble (CUTLASS) Version: 1.0
Date: 9-11-2011
CUTLASS_rup_User_Interface Prototype_v1.0.docx
Author: Saud Aljaloud Company Name, 2012
4.3.4.3 Shape
The interface design is flexible and could be square or rectangular based in user web
browser configuration.
4.3.4.4 Colors
Cyan For to frame background (topic frame), also it for information and
help text.
White interface background
Dark red topic text, top frame
Blue unvested link
Purple vested link
Black This color for normal text (textbox title, alert message title etc.)And lines.
4.3.5 Screenshot Sample
7/31/2019 CUTLASS RUP UI User Interface Prototype v1.0
40/43
Coventry University Track Locate and Assemble (CUTLASS) Version: 1.0
Date: 9-11-2011
CUTLASS_rup_User_Interface Prototype_v1.0.docx
Author: Saud Aljaloud Company Name, 2012
Figure 17 - Edit personal information intetface
4.4 Forget your password
4.4.1 Purpose
This interface purpose is to rest user password by sending user password to user email.
As shown in Fig10.
4.4.2 Objects and Actions
Object Action
7/31/2019 CUTLASS RUP UI User Interface Prototype v1.0
41/43
Coventry University Track Locate and Assemble (CUTLASS) Version: 1.0
Date: 9-11-2011
CUTLASS_rup_User_Interface Prototype_v1.0.docx
Author: Saud Aljaloud Company Name, 2012
Text box First
Name *
User must fill this box to receive a new password.
Push Button
Submit
CUTLASS system send new password to user email. And
then user will transfer to Home interface.Table 13 - Objects and Actions for Forget your password interface
4.4.3 Composites
This Registration Interface consists of the next layouts which are:
Top frame: is consisting of CUTLASS topic. Bottom frame: There are seven text box which are:
o First Name: (mandatory field), Capacity of this field is minimum 1 characterand maximum 30 characters.
o Surname: (mandatory field), Capacity of this field is minimum 1 charactersand maximum 30 characters.
oStudent ID: (mandatory and numerical field), Capacity of this field isminimum 7 characters and maximum 20 characters.
o Mobile phone number: (Optional and numerical field), Capacity of this fieldis minimum 11 characters and maximum 11 characters.
o Email Address: (mandatory field), Capacity of this field is minimum 4characters and maximum 50 characters.
o Password: (mandatory field), Capacity of this field is minimum 8 charactersand maximum 50 characters.
Confirm Password: (mandatory field), this field must match Password field
4.4.4 Visual Dimensions
4.4.4.1 Position
The position of the design is flexible with internet browser and can be scrolled up or
down based on the browser window.
4.4.4.2 Size
The design has a title bar, so it can be minimized, maximized or closed that based in user
internet browser configuration.
4.4.4.3 Shape
The interface design is flexible and could be square or rectangular based in user web
browser configuration.
4.4.4.4 Colors
Cyan For to frame background (topic frame), also it for information and
help text.
White interface background
Dark red topic text, top frame
7/31/2019 CUTLASS RUP UI User Interface Prototype v1.0
42/43
Coventry University Track Locate and Assemble (CUTLASS) Version: 1.0
Date: 9-11-2011
CUTLASS_rup_User_Interface Prototype_v1.0.docx
Author: Saud Aljaloud Company Name, 2012
Blue unvested link
Purple vested link
Black This color for normal text (textbox title, alert message title etc.)
And lines.
4.4.5 Screenshot Sample
Figure 18 - Forget your password interface
5. Graphical Standards
The interfaces on the CUTLASS system used tools and formats for the development and design
of the system, as following:- HTML with using HTML editor (Microsoft Frontpage 2003).- JavaScript- Times New Roman is the font that used in the all interfaces, with font size 12pt.- Minimum screen resolution 800x600 and the maximum is based on internet browser
futures.
- All icons in .PNG extension
7/31/2019 CUTLASS RUP UI User Interface Prototype v1.0
43/43
Coventry University Track Locate and Assemble (CUTLASS) Version: 1.0
Date: 9-11-2011
CUTLASS_rup_User_Interface Prototype_v1.0.docx
6. Browsing Hierarchies
Home
Log inRegister
Control Panel Log out
Edit Personal
details
Device
configurationReported Device
list
Report lost ortheft device
Edit device
detailsAdd new Device
Track deviceactivity