CUTLASS RUP UI User Interface Prototype v1.0

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


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


3/43


Date: 9-11-2011



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


4/43


Date: 9-11-2011



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


5/43


Date: 9-11-2011



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


6/43


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 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/43


Date: 9-11-2011



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.


8/43


Date: 9-11-2011



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


9/43


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

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.


10/43


Date: 9-11-2011



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.


11/43


Date: 9-11-2011




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.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.


12/43


Date: 9-11-2011



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.


13/43


Date: 9-11-2011



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


14/43


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)


15/43


Date: 9-11-2011



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.


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.1 Position


down based on the browser window and user screen resolution.


16/43


Date: 9-11-2011



3.2.4.2 Size



3.2.4.3 Shape


browser configuration.

3.2.4.4 Colors


help text.



Blue unvested link

Purple vested link


And lines.

Gray Button color


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.


17/43


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.


18/43


Date: 9-11-2011




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 )


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:


(Reported device list, User Data).


3.3.4.1 Position


down based on the browser window.

3.3.4.2 Size



3.3.4.3 Shape



3.3.4.4 Colors


help text.



Blue unvested link

Purple vested link


19/43


Date: 9-11-2011




And lines.

Gray Button color


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.


20/43


Date: 9-11-2011




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.


21/43


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 usercan submit the application by clicking on the Submit button.


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



3.4.4.3 Shape



3.4.4.4 Colors

Cyan For to frame background (topic frame), also it for information andhelp text.


Dark red topic text, top frameBlue unvested link

Purple vested link


And lines.

Gray Button color



22/43


Date: 9-11-2011



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.


23/43


Date: 9-11-2011




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


24/43


Date: 9-11-2011



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.1 Position



3.5.4.2 Size



3.5.4.3 Shape




25/43


Date: 9-11-2011



Colors

Cyan For to frame background (topic frame), also it for information andhelp text.


Dark red topic text, top frameBlue unvested link

Purple vested link


And lines.

Gray Button color

Red If the devices status not connected. Report stolen or theft devicebutton

Green If the devices status connected


26/43


Date: 9-11-2011




Figure 10- Device configuration Interface


27/43


Date: 9-11-2011



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.


Object Action

Hyperlink Back tocontrol panel.

Displays the control panel 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.1 Position


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.


28/43


Date: 9-11-2011



3.6.4.4 Colors


help text.White interface background


Blue unvested link

Purple vested link


And lines.

Gray Button color & Table header color


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.


29/43


Date: 9-11-2011



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).


Object Action

Hyperlink Back to

control panel.

Displays the control panel 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:


30/43


Date: 9-11-2011



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.1 Position


3.7.4.2 Size



3.7.4.3 Shape



3.7.4.4 Colors


help text.



Blue unvested link

Purple vested link


And lines.

Gray Button color


31/43


Date: 9-11-2011





32/43


Date: 9-11-2011



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.


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


33/43


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 CompositesThis Home page interface consists of the next layouts which are:


(Reported device list, User Data).


4.1.4.1 Position


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



4.1.4.4 ColorsCyan For to frame background (topic frame), also it for information and

help text.



Blue unvested link & background for the selected item in the table &search rustles text

Purple vested link


And lines.

Gray Button color


34/43


Date: 9-11-2011




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 ".


Object Action

Tow hyperlink Backto control panel

Displays Control panel interface

Hyperlink Log out Link to Home page (Log on interface)


35/43


Date: 9-11-2011



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.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



4.2.4.4 Colors


help text.



Blue unvested link

Purple vested link


And lines.


36/43


Date: 9-11-2011




- 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


37/43


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 Edit personal information

4.3.1 Purpose

The purpose from this interface is to make users able to edit there details.


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)


38/43


Date: 9-11-2011



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





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.



Confirm Password: (mandatory field), this field must match Password field


4.3.4.1 Position



4.3.4.2 Size




39/43


Date: 9-11-2011



4.3.4.3 Shape



4.3.4.4 Colors


help text.



Blue unvested link

Purple vested link

Black This color for normal text (textbox title, alert message title etc.)And lines.



40/43


Date: 9-11-2011



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.


Object Action


41/43


Date: 9-11-2011



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





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.



Confirm Password: (mandatory field), this field must match Password field


4.4.4.1 Position



4.4.4.2 Size



4.4.4.3 Shape



4.4.4.4 Colors


help text.




42/43


Date: 9-11-2011



Blue unvested link

Purple vested link


And lines.


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


43/43


Date: 9-11-2011


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

CUTLASS RUP UI User Interface Prototype v1.0

Documents

Transcript of CUTLASS RUP UI User Interface Prototype v1.0