CUTLASS RUP UI User Interface Prototype v1.0

Coventry University Track Locate and Assemble (CUTLASS) User-Interface Prototype
Version 1.0
Coventry University Track Locate and Assemble (CUTLASS) CUTLASS_rup_User_Interface Prototype_v1.0.docx
Version: 1.0 Date: 9-11-2011
Revision History
Date 018/11/2011 Version 1.0 Description First Draft Author Saud Aljaloud
Author: Saud Aljaloud
Company Name, 2012
Version: 1.0 Date: 9-11-2011
Table of Contents
List of Tables List of Figures 1. Introduction 1.1 1.2 1.3 1.4 1.5 2. Purpose Scope Definitions, Acronyms, and Abbreviations References Overview 4 4 5 5 5 5 5 5 6 6 6 6 7 7 7 9 9 9 10 10 10 11 11 11 11 12 12 12 13 14 14 14 14 14 15 15 15 17 17 17 18 18 18 19 19
Device Software (client side) interfaces 2.1 2.2 Purpose Main Interface (Device software) 2.2.1 Purpose 2.2.2 Objects and Actions 2.2.3 Composites 2.2.4 Visual Dimensions 2.2.5 Screenshots Sample 2.3 Setting Interface (Device software) 2.3.1 Purpose 2.3.2 Objects and Actions 2.3.3 Composites 2.3.4 Visual Dimensions 2.3.5 Screenshots Sample
3.
Primary Window 3.1 Home page (Log in interface) 3.1.1 Purpose 3.1.2 Objects and Action 3.1.3 Composites 3.1.4 Visual Dimensions 3.1.5 Screenshot Sample 3.2 Control Panel for (Students) Interface 3.2.1 Purpose 3.2.2 Objects and Actions 3.2.3 Composites 3.2.4 Visual Dimensions 3.2.5 Screenshot Sample 3.3 Control Panel for (staff) Interface 3.3.1 Purpose 3.3.2 Objects and Actions 3.3.3 Composites 3.3.4 Visual Dimensions 3.3.5 Screenshot Sample 3.4 Registration Interface 3.4.1 Purpose 3.4.2 Objects and Actions 3.4.3 Composites
Company Name, 2012
Coventry University Track Locate and Assemble (CUTLASS) CUTLASS_rup_User_Interface Prototype_v1.0.docx 3.4.4 Visual Dimensions 3.4.5 Screenshot Sample 3.5 Device configuration 3.5.1 Purpose 3.5.2 Objects and Actions 3.5.3 Composites 3.5.4 Visual Dimensions 3.5.5 Screenshot Sample 3.6 List of devices reported as lost or theft interface 3.6.1 Purpose 3.6.2 Objects and Actions 3.6.3 Composites 3.6.4 Visual Dimensions 3.6.5 Screenshot Sample 3.7 Tracking device activity interface 3.7.1 Purpose 3.7.2 Objects and Actions 3.7.3 Composites 3.7.4 Visual Dimensions 3.7.5 Screenshot Sample 4. Secondary Window 4.1 User Database interface 4.1.1 Purpose 4.1.2 Objects and Actions 4.1.3 Composites 4.1.4 Visual Dimensions 4.1.5 Screenshot Sample 4.2 Confirm Interfaces 4.2.1 Purpose 4.2.2 Objects and Actions 4.2.3 Composites 4.2.4 Visual Dimensions 4.2.5 Screenshot Sample 4.3 Edit personal information 4.3.1 Purpose 4.3.2 Objects and Actions 4.3.3 Composites 4.3.4 Visual Dimensions 4.3.5 Screenshot Sample 4.4 Forget your password 4.4.1 Purpose 4.4.2 Objects and Actions 4.4.3 Composites 4.4.4 Visual Dimensions 4.4.5 Screenshot Sample 5. 6. Graphical Standards Browsing Hierarchies
Version: 1.0 Date: 9-11-2011
20 20 21 21 22 22 23 25 26 26 26 26 26 27 27 27 28 28 29 30 31 31 31 31 32 32 33 33 33 33 34 34 35 36 36 36 37 37 38 39 39 39 40 40 41 41 42
Company Name, 2012
Version: 1.0 Date: 9-11-2011
List of Tables
Table 1 - Table of refeteces ...........................................................................................................................................5 Table 2 - Objects and actions for Main Interface (Device software) .............................................................................7 Table 3 - Objects and actions for setting interface (Device software) ......................................................................... 10 Table 4 - Objects and Action for Home page (Log in interface) ................................................................................. 12 Table 5 - Object and Action for Control Panel for (Students) Interface ...................................................................... 14 Table 6 - Objects and Actions Control Panel for (staff) Interface ............................................................................... 17 Table 7 - Objects and Actions Registration Interface .................................................................................................. 19 Table 8 - Objects and Actions Device configuration Interface .................................................................................... 22 Table 9 - Device configuration Interface (Device type and model table ) ................................................................... 23 Table 10 - Objects and Actions User Database interface............................................................................................. 32 Table 11 - Objects and Actions for User data interface .............................................................................................. 34 Table 12 - Object and Actions for Edit personal information interface ....................................................................... 37 Table 13 - Objects and Actions for Forget your password interface ........................................................................... 40
List of Figures
Figure 1 - Main interface (for device software) (in case of status is connected) ...........................................................9 Figure 2 - Main interface (for device software) (in case of status is NOT connected) ..................................................9 Figure 3 - Main interface (for device software) , shortcuts Dropdown list ....................................................................9 Figure 4 - Setting Interface (Device software) when the test results are positives ...................................................... 11 Figure 5 - Setting Interface (Device software) when the test results are negatives ..................................................... 11 Figure 6 Home page (Log in interface) ....................................................................................................................... 13 Figure 7 Control Panel (student) Interface................................................................................................................... 15 Figure 8 - Control Panel for (staff) Interface ............................................................................................................... 18 Figure 9 - Registration Interface .................................................................................................................................. 21 Figure 10- Device configuration Interface ................................................................................................................... 25 Figure 11 - List of devices reported as lost or theft interface ...................................................................................... 27 Figure 12 - Tracking device activity interface ............................................................................................................. 31 Figure 13 - User Data interface ................................................................................................................................... 33 Figure 14 - Add a new devise confirmation interface .................................................................................................. 35 Figure 15 - Edit personal details confirmation interface.............................................................................................. 35 Figure 16 - Register new user confirmation interface.................................................................................................. 36 Figure 17 - Edit personal information intetface ........................................................................................................... 39 Figure 18 - Forget your password interface ................................................................................................................. 41
Company Name, 2012
Version: 1.0 Date: 9-11-2011
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 and computer graphics. Which provide information to the system users through onscreen displays, graphical displays, text displays, etc. as well as this document gathers information from users through the input devices for example mouse, keyboard etc. Purpose The main purpose of the UIP is to deliver or display details and information to the endusers 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 endusers in the CUTLASS system. 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 be implemented in the system. Analysts: to organize and analysis the software specifications and requirements of CUTLASS system. Stakeholders of the system: enable them to knowing current situation of the system and deliverables. Also enable stakeholders to interact with the system. Definitions, Acronyms, and Abbreviations CUTLASS: Coventry University Track Locate and Assemble UIP: User interface prototype UI: User interface 1.4 References Title CUTLASS NEXT ITERATION PLAN CUTLASS VISION DOCUMENT CUTLASS USE CASE MODEL + SURVEY Title Zainab Saad Kishen Gajanan Zainab Saad Year 2011 2011 2011
1.1
1.2
1.3
Table 1 - Table of refeteces 1.5 Overview The following interfaces describe and detailed development of CUTLASS system:
Company Name, 2012
Version: 1.0 Date: 9-11-2011
2.
2.1
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
Device Software (client side) interfaces

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 futures such 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 his email and password through this interface.
2.2 2.2.1 Main Interface (Device software) 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 software for 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 what configure first install.
Company Name, 2012
Coventry University Track Locate and Assemble (CUTLASS) CUTLASS_rup_User_Interface Prototype_v1.0.docx 2.2.2 Objects and Actions
Version: 1.0 Date: 9-11-2011
Object Drop down List box Title
Action Display the available shortcuts. However, each device has different shortcuts types for example laptop devices have shortcut as follow :
Alt + F1 Alt +F2 Alt +F11 Alt + Ctrl + 3 Alt + C Space + 0 Ctrl + Shift + N Ctrl + F7 Ctrl + F3 Ctrl + F2
.. etc.
Push button Active Push button Deactivate Push button Hide me Push button Setting
Therefore, each device has different shortcuts, so in next version of document will illustrate shortcuts for all devices that will be supported by CUTLASS system. Drop down list shown in Fig4 This makes the software active status This makes the software not active status Make the CUTLASS interface invisible. Display setting interface
Table 2 - Objects and actions for Main Interface (Device software)
2.2.3
Composites
This interface consists of: - one drop down list box - four buttons which are: o Active button: this make the system in active status that means the system is connected with CUTLASS system server. o Deactivate button: this make the system in active status, that means the system is connected with CUTLASS system server. o Hide me button: this makes the software interfaces invisible for security (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 connect with 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
Author: Saud Aljaloud Company Name, 2012
Version: 1.0 Date: 9-11-2011
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 red green white black Gray gradient
Form background For deactivate background, Status label if it Not connected. For active button background, Status label if it connected. Drop list background Form line border For Hide me and Setting buttons background.
Company Name, 2012
Coventry University Track Locate and Assemble (CUTLASS) CUTLASS_rup_User_Interface Prototype_v1.0.docx 2.2.5 Screenshots Sample
Version: 1.0 Date: 9-11-2011
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 2.3.1
Setting Interface (Device software) 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 such as email and password to be able to access to the system.
Company Name, 2012
Coventry University Track Locate and Assemble (CUTLASS) CUTLASS_rup_User_Interface Prototype_v1.0.docx 2.3.2 Objects and Actions
Version: 1.0 Date: 9-11-2011
Object Push button Test Camera Label Camera test result Push button Test GPS Label GPS test result Push button Test internet connection Label Internet connection status result Text box Email Text box Password Push button Save
2.3.3 Composites
Action Display Camera status under the button shows if it is working or not. Shows camera test result Display GPS status under the button shows if it is working or not. Shows GPS test result Display internet connection status under the button shows if it is connected or not. Shows internet connection status test result
User must fill this field. To be able to activate the device by linking it with CUTLASS system. User must fill this field. To be able to activate the device To save user email and password.
Table 3 - Objects and actions for setting interface (Device software)
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. The frame 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.
Company Name, 2012
Coventry University Track Locate and Assemble (CUTLASS) CUTLASS_rup_User_Interface Prototype_v1.0.docx 2.3.4.4 Colors
Version: 1.0 Date: 9-11-2011
Bright gray red green white black Gray gradient

2.3.5
Form background Text get red when the test result is negative Text get red when the test result is positive Text box background Form line border and normal text For buttons background.
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. 3.1 3.1.1
Primary Window Home page (Log in interface) 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.
Company Name, 2012
Version: 1.0 Date: 9-11-2011
3.1.2
Objects and Action Actions
Objects 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 can type in their enquiries or related search topics. Hyperlink - More Info About Coventry Link to Coventry University CuOnline website University Go to CuOnline 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 CuOnline website. Centre right frame: consist of two text box for user name and password, and button 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.) Visual Dimensions
3.1.4
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
Version: 1.0 Date: 9-11-2011
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)
Company Name, 2012
Version: 1.0 Date: 9-11-2011
3.2 3.2.1
Control Panel for (Students) Interface Purpose This interface is generally responsible for all CUTLASS system control. So student can access 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 for students 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 Displays the Edit personal details interface personal details. Hyperlink device configuration Hyperlink Reported device list. Hyperlink Log out Link to device configuration interface (add, edit or report device) Link to reported devices list ( to Tracking device activity) 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.
Company Name, 2012
Version: 1.0 Date: 9-11-2011
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 3.3.1
Control Panel for (staff) Interface 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.
Company Name, 2012
Version: 1.0 Date: 9-11-2011
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.
Company Name, 2012
Version: 1.0 Date: 9-11-2011
3.3.2
Objects and Actions Action Displays the Edit personal details interface Link to device configuration interface (add, edit or report device) Link to reported devices list ( to Tracking device activity) Link to users database interface ( add and configure users staff/admin , give users permission, search for users ) Displays the Home (Log in) interface
Object Hyperlink Edit personal details. Hyperlink device configuration Hyperlink Reported device list. Hyperlink User Data Hyperlink Log out
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). Visual Dimensions
3.3.4
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
Company Name, 2012
Version: 1.0 Date: 9-11-2011
Black Gray 3.3.5
This color for normal text (textbox title, alert message title etc.) And lines. Button color
Screenshot Sample
Figure 8 - Control Panel for (staff) Interface
3.4 3.4.1
Registration Interface Purpose This interface is generally responsible for register new student and validates student details 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.
Company Name, 2012
Version: 1.0 Date: 9-11-2011
3.4.2
Objects and Actions Action Displays the following titles: (Dr.- Lady.- Miss- Mr.- Mrs.- Ms.- Prof.- Rev.- Sir.- Other) User can choose one of the list items. Here user must write First Name in this field , The star (*) here means (Not optional) Here user must write Surname in this field, The star (*) here means (Not optional) The user must enter Student ID that given form Coventry University in this field, The star (*) here means (Not optional) In this field the user should write Mobile phone number. (optional field) Here user must write Email Address in this field, The star (*) here means (Not optional) In this filed user must enter a password in minimum 8 characters. Here the user must repeat the password to match the entered password. This check box must be checked by user to accept CUTLASS system terms and conditions complete and complete registration.
Object Drop down List box Title Text box First Name * Text box Surname * Text box Student ID Text box Mobile phone number Text box Email Address* Text box Password
Text box Confirm Password * Check box I have read and accept CUTLASS terms and conditions Push Button Display Register new student confirm interface and then after Submit 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 character and maximum 30 characters. o Surname: (mandatory field), Capacity of this field is minimum 1 characters and maximum 30 characters. o Student ID: (mandatory and numerical field), Capacity of this field is minimum 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 4 characters and maximum 50 characters. o Password: (mandatory field), Capacity of this field is minimum 8 characters and maximum 50 characters.
Company Name, 2012
Version: 1.0 Date: 9-11-2011
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 user can submit the application by clicking on the Submit button.
3.4.4
Visual Dimensions
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.4.5
Screenshot Sample
Company Name, 2012
Version: 1.0 Date: 9-11-2011
Figure 9 - Registration Interface
3.5 3.5.1
Device configuration 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.
Company Name, 2012
Version: 1.0 Date: 9-11-2011
3.5.2
Objects and Actions Action 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. The list here will show items based on what user had chosen in device list. more description in composites section User here must enter device serial no. Here user should enter device color ex: red, white & black etc. To submit add new device application. This display Add New Page Confirm interface then after few seconds automatically back to Device configuration interface. Display List of device reported as lost or Theft interface
Object Drop down List box Device type
Drop down List box Device Mode*l Text box Serial No* Text box Color Push Button Add
Push Button Report that selected device lost or theft Radio button To select a device to be able to report it as lost or theft. Push Button To start download device software, and install it on the device. Download Push Button Edit Display the Edit device interface Push Button Delete device from user devices list. Delete Push Button Refresh page to update all information that shown in the Refresh table 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 one for device color. It also contain two drop down List box as shown in the following table: Device Type Laptop Device Model Windows 9x/XP/Vista/7 Mac OS Linux Unix
Company Name, 2012
Version: 1.0 Date: 9-11-2011
Nokia Samsung Mobile phone IPhone OS Android OS Blackberry IPAD Barres & Noble Nook Tablet Amazon Kindle fire Sony Tablet Samsung Galaxy Apple IPod Music player Zune HD Table 9 - Device configuration Interface (Device type and model table ) 3.5.4 Bottom frame: is consisting of 5 buttons, radio button, devices status and table consist of ten columns which is show devices information.
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.
Company Name, 2012
Version: 1.0 Date: 9-11-2011
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 Red If the devices status not connected. Report stolen or theft device button Green If the devices status connected
Company Name, 2012
Version: 1.0 Date: 9-11-2011
3.5.5
Screenshot Sample
Figure 10- Device configuration Interface
Company Name, 2012
Version: 1.0 Date: 9-11-2011
3.6 3.6.1
List of devices reported as lost or theft interface 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 devices from the list. Objects and Actions Action Displays the control panel interface Displays the Home (Log in) interface Display the Tracking device activity interface. This removes the selected device from the list. Display device connection status.
3.6.2
Object Hyperlink Back to control panel. Hyperlink Log out Push Button Track activity Push Button Remove Devices status 3.6.3 are:
Composites This List of devices reported as lost or theft interface consists of the next layouts which Top frame: is consisting of CUTLASS topic and two hyperlinks (Log out & Back to control panel). Bottom frame: contain table consisted of nine columns which shows reported devices details. And the user able to track device activity and remove any device from 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 or down based on the browser window. 3.6.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.6.4.3 Shape The interface design is flexible and could be square or rectangular based in user web browser configuration.
Version: 1.0 Date: 9-11-2011
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 3.7.1 Tracking device activity interface Purpose This interface is generally responsible for the following activity: Shows for user all the reported devices activity (current activity and activity history, 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 be taken as following: (this describe thief activity) o When device turn on o When device lock or unlock o Each picture shoots from the device will be send to CUTLASS system.
Company Name, 2012
Version: 1.0 Date: 9-11-2011
This interface shows all browsing activity (Current/History) for the reported device. Such as: o Link of visited website o Dated and time of visiting. o Web browser name (IE, Firefox etc.) This interface shows keyboard activity, by recording anything written through device keyboard (passwords, usernames, etc.). The recording will use either software or hardware (Keystrokes).
3.7.2 Objects and Actions Object Action Hyperlink Back to Displays the control panel interface control panel. Hyperlink Log out Devices status Push Button Print report Push Button Page refresh Internal page with horizontal scroll Picture activity" Hyperlink Picture activity history internal page with horizontal scroll Browsing activity Hyperlink Browsing activity history internal page with horizontal scroll Keyboard tracing Hyperlink Keyboard tracing history Map box Your device in map Hyperlink GPS map history 3.7.3 Displays the Home (Log in) interface Display device connection status. This removes the selected device from the list. Display new update Display device picture activity with data and time of each picture. Display device picture activity from the reporting date This box shows all browsing activity data for the system user
Display browsing activity data from the reporting date This box illustrate all keyboard activity for system user
Display keyboard tracing data from the reporting date Display user device in the map with full address. Also shows GPS position point. (Map could be provided by Google map or any map provider). Display browsing activity from the reporting date
Composites This Tracking device activity interface consists of the next layouts which are:
Company Name, 2012
Version: 1.0 Date: 9-11-2011
Top frame: is consisting of CUTLASS topic, Log out link and Back to control panel 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
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
Company Name, 2012
Version: 1.0 Date: 9-11-2011
3.7.5
Screenshot Sample
Company Name, 2012
Version: 1.0 Date: 9-11-2011
Figure 12 - Tracking device activity interface
4. 4.1 4.1.1
Secondary Window User Database interface Purpose The purpose of this interface to enable staff and admiration users to manage users account 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 system users. 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 the staff or admin to take control of student account. In addition, admin can access to staff and student account. Objects and Actions Action Displays Control panel interface Link to Home page (Log on interface) Text box filed Display search results Make user able to search by Users Name Make user able to search by Users ID Display control panel (Student) interface. Remove the selected user from the list. Display Edit user interface. Display Add user interface
Company Name, 2012
4.1.2
Object Hyperlink Back to control panel Hyperlink Log out Text box " Search" Push Button "Search" Radio Button "Name" Radio Button "ID" Push Button "User profile" Push Button "Delete" Push Button "Edit" Push Button "Add"
Version: 1.0 Date: 9-11-2011
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 Composites This 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). Visual Dimensions
4.1.4
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
Company Name, 2012
Version: 1.0 Date: 9-11-2011
4.1.5
Screenshot Sample
Figure 13 - User Data interface 4.2 4.2.1 Confirm Interfaces 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 an application while he miss Name text box, error message will comes up which says "you need to fill Name ". Objects and Actions Object Action Tow hyperlink Back Displays Control panel interface to control panel Hyperlink Log out Link to Home page (Log on interface)
4.2.2
Company Name, 2012
Version: 1.0 Date: 9-11-2011
Automatic transfer Displays Control panel interface after wetting few seconds link "Shortly will transfer to control panel" 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 control panel hyperlink. Bottom frame: confirm message that says your submission was done successfully. As shown in screenshots 1.2.3. Visual Dimensions
4.2.4
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.
Company Name, 2012
Version: 1.0 Date: 9-11-2011
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 personal details:
Figure 15 - Edit personal details confirmation interface
Company Name, 2012
Version: 1.0 Date: 9-11-2011
The following interface is confirming for user that the user has been successfully registered:
Figure 16 - Register new user confirmation interface
4.3 4.3.1 4.3.2
Edit personal information Purpose The purpose from this interface is to make users able to edit there details. Objects and Actions Action Displays the following titles: (Dr.- Lady.- Miss- Mr.- Mrs.- Ms.- Prof.- Rev.- Sir.- Other) User can choose one of the list items. Here user must write First Name in this field , The star (*) here means (Not optional) Here user must write Surname in this field, The star (*) here means (Not optional) The user must enter Student ID that given form Coventry University in this field, The star (*) here means (Not optional)
Company Name, 2012
Object Drop down List box Title Text box First Name * Text box Surname * Text box Student ID
Version: 1.0 Date: 9-11-2011
In this field the user should write Mobile phone number. Text box Mobile (optional field) phone number Here user must write Email Address in this field, The star (*) Text box Email here means (Not optional) Address* In this filed user must enter a password in minimum 8 Text box characters. Password Here the user must repeat the password to match the entered Text box Confirm password. Password * This check box must be checked by user to accept CUTLASS Check box I have system terms and conditions complete and complete registration. read and accept CUTLASS terms and conditions Display Register new student confirm interface and then after Push Button few seconds automatically transfer to student control panel. Submit Table 12 - Object and Actions for Edit personal information interface 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 character and maximum 30 characters. o Surname: (mandatory field), Capacity of this field is minimum 1 characters and maximum 30 characters. o Student ID: (mandatory and numerical field), Capacity of this field is minimum 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 4 characters and maximum 50 characters. o Password: (mandatory field), Capacity of this field is minimum 8 characters and 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. 4.3.3
Company Name, 2012
Version: 1.0 Date: 9-11-2011
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
Company Name, 2012
Version: 1.0 Date: 9-11-2011
Figure 17 - Edit personal information intetface
4.4 4.4.1
Forget your password Purpose This interface purpose is to rest user password by sending user password to user email. As shown in Fig10. Objects and Actions Object Action
4.4.2
Company Name, 2012
Version: 1.0 Date: 9-11-2011
Text box First Name *
User must fill this box to receive a new password.
CUTLASS system send new password to user email. And Push Button then user will transfer to Home interface. Submit Table 13 - Objects and Actions for Forget your password interface 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 character and maximum 30 characters. o Surname: (mandatory field), Capacity of this field is minimum 1 characters and maximum 30 characters. o Student ID: (mandatory and numerical field), Capacity of this field is minimum 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 4 characters and maximum 50 characters. o Password: (mandatory field), Capacity of this field is minimum 8 characters and 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 4.4.3
For to frame background (topic frame), also it for information and help text. White interface background Dark red topic text, top frame
Company Name, 2012
Version: 1.0 Date: 9-11-2011
Blue Purple Black
unvested link vested link 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
Company Name, 2012
Version: 1.0 Date: 9-11-2011
6.
Browsing Hierarchies
Home
Register
Log in
Control Panel
Log out
Reported Device list
Device configuration
Edit Personal details
Track device activity
Report lost or theft device
Edit device details
Add new Device
Company Name, 2012

CUTLASS RUP UI User Interface Prototype v1.0

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CUTLASS RUP UI User Interface Prototype v1.0

Uploaded by

Copyright:

Available Formats

Coventry University Track Locate and Assemble (CUTLASS) User-Interface Prototype

Coventry University Track Locate and Assemble (CUTLASS) CUTLASS_rup_User_Interface Prototype_v1.0.docx

Version: 1.0 Date: 9-11-2011

Author: Saud Aljaloud

Company Name, 2012

Coventry University Track Locate and Assemble (CUTLASS) CUTLASS_rup_User_Interface Prototype_v1.0.docx

Version: 1.0 Date: 9-11-2011

Author: Saud Aljaloud

Company Name, 2012

Version: 1.0 Date: 9-11-2011

Author: Saud Aljaloud

Company Name, 2012

Coventry University Track Locate and Assemble (CUTLASS) CUTLASS_rup_User_Interface Prototype_v1.0.docx

Version: 1.0 Date: 9-11-2011

Author: Saud Aljaloud

Company Name, 2012

Coventry University Track Locate and Assemble (CUTLASS) CUTLASS_rup_User_Interface Prototype_v1.0.docx

Version: 1.0 Date: 9-11-2011

Author: Saud Aljaloud

Company Name, 2012

Coventry University Track Locate and Assemble (CUTLASS) CUTLASS_rup_User_Interface Prototype_v1.0.docx

Version: 1.0 Date: 9-11-2011

Device Software (client side) interfaces

Author: Saud Aljaloud

Company Name, 2012

Version: 1.0 Date: 9-11-2011

Object Drop down List box Title

Table 2 - Objects and actions for Main Interface (Device software)

Coventry University Track Locate and Assemble (CUTLASS) CUTLASS_rup_User_Interface Prototype_v1.0.docx

Version: 1.0 Date: 9-11-2011

The interface design is rectangular.

Bright gray red green white black Gray gradient

Author: Saud Aljaloud

Company Name, 2012

Version: 1.0 Date: 9-11-2011

Figure 3 - Main interface (for device software) , shortcuts Dropdown list

Setting Interface (Device software) Purpose

Author: Saud Aljaloud

Company Name, 2012

Version: 1.0 Date: 9-11-2011

Table 3 - Objects and actions for setting interface (Device software)

The interface design is rectangular.

Author: Saud Aljaloud

Company Name, 2012

Version: 1.0 Date: 9-11-2011

Bright gray red green white black Gray gradient

Author: Saud Aljaloud

Coventry University Track Locate and Assemble (CUTLASS) CUTLASS_rup_User_Interface Prototype_v1.0.docx

Version: 1.0 Date: 9-11-2011

Objects and Action Actions

Objects Push Button- Log on

Coventry University Track Locate and Assemble (CUTLASS) CUTLASS_rup_User_Interface Prototype_v1.0.docx

Version: 1.0 Date: 9-11-2011

Figure 6 Home page (Log in interface)

Author: Saud Aljaloud

Company Name, 2012

Coventry University Track Locate and Assemble (CUTLASS) CUTLASS_rup_User_Interface Prototype_v1.0.docx

Version: 1.0 Date: 9-11-2011

Author: Saud Aljaloud

Company Name, 2012

Coventry University Track Locate and Assemble (CUTLASS) CUTLASS_rup_User_Interface Prototype_v1.0.docx

Version: 1.0 Date: 9-11-2011

Figure 7 Control Panel (student) Interface

Author: Saud Aljaloud