basil - user interface design document

NYSS SOFTWARE SOLUTIONS

Barcoded Assessment System For Independent Learning(BASIL)

Version 1.2

Barcoded Assessment System For Independent Learning(BASIL) Version: 1.2 Date: 20-11-2010

Basil_rup_uiprt.docx

Revision HistoryDate Version Description Author

05/11/2010 1.0 First Draft Ndumayak Onomo

10/11/2010 1.1 Second Draft Ndumayak Onomo

20/11/2010 1.2 Final Draft Ndumayak Onomo

Author: Ndumayak Onomo NYSS SOFTWARE SOLUTIONS, 2023



Table of Contents

1. Introduction 41

1.1 Purpose 411.2 Scope 411.3 Definitions, Acronyms, and Abbreviations 411.4 References 411.5 Overview 41

2. Primary Window 42

2.1 Home page/ Selection Interfaces 422.2 Purpose 42

2.2.1 Objects and actions 422.2.2 Composites 422.2.3 Visual Dimensions 422.2.4 Screenshot Sample 43

3. Primary Window 44

3.1 Module Assessment Interface 443.2 Purpose 443.2.1 Objects and actions 443.2.2 Composites 443.2.3 Visual Dimensions 443.2.4 Screenshot Sample 45

4. Secondary Window 47

4.1 Course Lecturer 474.2 Purpose 474.2.1 Objects and actions 474.2.2 Composites 474.2.3 Visual Dimensions 474.2.4 Screenshot Sample 48


5.1 Requirement Interface 495.2 Purpose 495.2.1 Objects and actions 495.2.2 Composites 495.2.3 Visual Dimensions 495.2.4 Screenshot Sample 50

6. Secondary Windows 51

6.1 Faculty/ Module Registration 516.2 Purpose 516.2.1 Objects and actions 516.2.2 Composites 516.2.3 Visual Dimensions 516.2.4 Screenshot Sample 52





7.1 Log out Interface 537.2 Purpose 537.2.1 Objects and actions 537.2.2 Composites 537.2.3 Visual Dimensions 537.2.4 Screenshot Sample

8. Primary Window 8.1 Log in Interface 8.2 Purpose 8.2.1 Objects and actions 8.2.2 Composites 8.2.3 Visual Dimensions 8.2.4 Screenshot Sample

9. Graphical Standards 54

10. Browsing Hierarchies 55

1. Introduction

The user interface prototype document of the BASIL system is a document that deals the creativity/ designing of user interfaces. It also consists of computer graphics, windowing architectures which can be used to present information to the users of the system through (graphical displays, textual displays, onscreen displays, on-printer displays, etc). This document also collects information from users through the input devices such as: keyboard, mouse, etc. The characters on the system, and the way the words are coordinated enables users to understand, read, and perform a particular task.

1.1 Purpose

The main objective of the user interface prototype is to provide or display information’s to the users (graphically, textually, on screen, etc) to enable them perform a specific task. It also collects information from the users of the system that is been transferred to the main program for processing. It also displays graphics, designs that are easy to read and understandable to the users in the BASIL system.

1.2 Scope

This document will be useful for the following departments in the BASIL system and they are:

Designers: the designers will need the user interface prototype to tests system’s compatibility with the internal architecture of the BASIL system.

Testers: to determine how the testing will be implemented in the BASIL system. Analysts: to prepare the software requirements and specifications of the system. Stakeholders: enables them to interact with the system and knowing the system

deliverables.

1.3 Definitions, Acronyms, and Abbreviations

BASIL - Barcoded Assessment System For Information Learning




1.4 References

Title Title Year

BASIL NEXT ITERATION PLAN Yavuz Erdem 2010

BASIL VISION DOCUMENT Yavuz Erdem 2010

BASIL USE CASE MODEL + SURVEY

Saqib Abbas 2010

1.5 Overview

This document will be developed using the following interfaces which are:

Home page/ Selection Interfaces.

Module Assessments.

Course Lecturer

Registration Interface

Faculty/ Module Registration

Log out Interface

Log in Interface

2. Primary Window

2.1 Homepage/ Selection Interfaces

2.2 Purpose

This interface gives students/staff guidelines and directive of what the BASIL system is all about and it’s function through textual and graphical representation.

2.2.1 Objects and Action OBJECTS ACTIONS

Push Button- Staff Contains the information of the staff of the university, lecturer’s room number, email addresses, phone numbers and the modules each of the lecturer is lecturing.

Push Button- Students Signifies if the students are either post graduates, under graduates, part time, online and CPD.

Push Button- Courses This contains the departments and the courses each of the student in a department offers.

Push Button- Contact Us This gives contacts of the staff in the CuOnline department, their phone numbers and email addresses.

Push Button- Help Directs users to a search box which users can type in their enquiries or related search topics.




2.2.2 Composites

The BASIL system consists of the following layout which are: Top Frame: is made up of BASIL and the links to staff, students, courses, contact us, and

help buttons. Centre Frame: Gives a brief description of what BASIL is all about and it’s objectives.

2.2.3 Visual Dimensions

2.2.3.1 Position

The position of the design is immovable and cannot be scrolled either up or down. In otherwords the interface design is fixed.

2.2.3.2 Size

The design does not have a title bar, so it cannot be maximized, minimized or closed.

2.2.3.3 Shape

The interface design was created using a rectangular web window.

2.2.3.4 Color

The interface design possesses mostly the following colors which are: Lavender Dark Blue Light Turquoise




2.2.4 Screenshot

Fig I Homepage/ Selection Interface 3. Primary Window

3.1 Module Assessment Interface

3.2 Purpose

This interface is mainly responsible for students individual performance through the grading and scores each students gets in a particular module he/she registered for in Coventry University. The grading are done thus:

70-100 - Distinction 60- 69 – Merit 50- 59 - Very Good 40 ---49- Pass 0-----39- Fail

3.2.1 Objects and Actions

OBJECTS ACTIONSText Displays the modules for a postgraduate student studying

software development and the mandatory modules and optional modules a student is taking and the scores in each of the modules.

Multi line Text Box Displays the specific scores gotten in each of the modules.Push Button Displays the modules (mandatory module and the optional




“Modules” module choosen by a particular student in the department.Push Button “Scores” Displays the scores.

3.2.2 CompositesThe BASIL system consists of the following layout interfaces which are:

Top Frame: is made up the BASIL and the links to staff, students, courses, contact us, and help buttons.

Centre Frame: displays the modules of the student who enrolled for MSC Software Development and the scores gotten in each of the modules.

3.2.3 Visual Dimensions3.2.3.1 PositionThe interface design is immovable and cannot be scrolled up or down. In otherwords the design is fixed.

3.2.3.2 SizeThe interface design cannot be minimized, maximized, restored or closed.

3.2.3.3 ShapeThe interface design is created using a rectangular web window page.

3.2.3.4 ColorsThe interface design possesses mostly the following colors which are:

Lavender Dark Blue Light Turquoise

3.2.4 Screenshot Sample




Fig 2 Module Assessment

4. Secondary Window

4.1 Course Lecturer

4.2 PurposeThis interface displays the module lecturers, their room numbers, email addresses and phone numbers of each of the lecturer in each department in Coventry University and the modules each of them lectures.

4.2.1 Objects and ActionsObjects ActionsTable Displaying the information as written on the

interface design.



Centre Frame: that displays the modules, module lecturer, lecturer’s telephone number, email addresses and the room number.




4.2.3 Visual Dimensions4.2.3.1 Position

The interface design is immovable and cannot be scrolled up or down. In otherwords the design is fixed.


4.2.3.3 ShapeThe interface design is created using a rectangular web window page.

4.2.3.4 ColorsThe interface design possesses mostly the following colors which are:



Fig 3 Course Lecturer Interface

5 Secondary Window




5.1 Registration Interface

5.2 Purpose The main objective of this interface is for a students to enroll for the course they want to study in Coventry University, and it redirects the users to a page for module selection/ registration.

5.2.1 Objects and ActionsObjects ActionsText “New User Registration”

For new students home page registration.

Text “Personal Details” Confidential information about a particular student.Check Box “Male” To tick the box specifically a male student.Check Box “Female” To tick the box specifically a female student.Textboxes To display student’s first name, surname, date of birth, nationality,

and address.



Centre Frame: displays the student’s personal information such as Surname, Firstname, either male/female student, date of birth, Nationality and address.

5.2.3 Visual Dimensions

5.2.3.1 PositionThe interface design is immovable and cannot be scrolled up or down. In otherwords the design is fixed.


5.2.3.3 Shape The interface design is created using a rectangular web window page.

5.2.3.4 Colors The interface design possesses mostly the following colors which are:






Fig 4 Registration Interface

6 Secondary Window6.1 Faculty/ Module Registration

6.2 PurposeThe main objective of this interface is to enable students enroll in the faculty and choose the module as outlined by the university.

6.2.1 Objects and ActionsObjects ActionsText “New User Registration”

Describes the new user registration page.

Push Button “Personal Details”

Personal information about a particular student.

Push Button“Get Modules”

List of mandatory modules and optional modules.

Drop down List box “Select Faculty”

List of faculties in the University.

Drop down List box List of modules in the different faculties depending on the




“Select Module” individual’s course.



Centre Frame: is an interface that contains new students information that deals with faculty registration and module registration.











Fig 5 Faculty/ Module Registration

7. Secondary Sample7.l Log Out Interface

7.2 PurposeThe interface signifies that the student is through with the online system and has successfully logged out or exits the application.

7.2.1 Objects and ActionsObjects ActionsText Displays the message on the screen. Push Button Displaying “Log Out”



Centre Frame: is an interface that displays how students log out of the BASIL system.











Fig 6 Log Out Interface

8. Primary Window 8.1 Log In Interface

8.2 PurposeThe main objective of this prototype is for students to access the BASIL system by logging into




the system. Using the student Id card for authentication.

8.2.1 Objects and ActionsObjects ActionsText Displays all the information on the screen.Push Button Display the “log In” button.Picture of the card swiper

The device where the students Id card are swiped through to store students data in the barcode.



Centre Frame: is an interface that displays how students assessments can be accessed using the barcode technology by swiping the student id card through the card reader to store students data.











Fig 7 Log In Interface

9. GRAPHICAL STANDARDSThe interfaces on the BASIL system used the following formats and tools for the design and development of the system which are: C#, HTML, DHTML, Times New Roman used for the text fonts, minimum screen resolution 800x600 and the maximum screen resolution 1024x768 between this range and above. Web technologies with standard image formats like (.jpg, .gif) etc.BASIL graphics team designed the logo that was used in the interface design.




10. BROWSING HIERARCHIES

HOME PAGE/ SELECTION

INTERFACES

LOG IN INTERFACE FACULTY/ MODULE REGISTRATION

REGISTRATION INTERFACE

MODULE ASSESSMENT

LOG OUT INTERFACE

COURSE LECTURER


basil - user interface design document

Documents

nyss software

list box list

barcoded assessment

student id

interface

visual dimensions

basil system

user interface