2005

Theodore Pitikaris

[USER INTERFACES]
This courseworks user interface has as scope to allow the interaction between a number of users and a Content Management System (CMS) for managing remote web sites.This application is a web based application running on Apache/IIS web server, the language that has been used is PHP version 4.0.3 and uses the Myself Database facilities. Because of his web-orientation this application has special needs in terms of Usability Design.

Acknowledgement
I would like to thank Mr. Quiong Ching, and Mr.Kevin Chen, for their voluntary help in System evaluation

Table of Contents Acknowledgement ................................................................................................... 0 I would like to thank Mr. Quiong Ching, and Mr.Kevin Chen, for their voluntary help in System evaluation ............................................................... 1 Table of ContentsTable of Figures .................................................................... 2 Table of Figures ....................................................................................................... 2 Introduction ............................................................................................................... 3 Introduction ............................................................................................................... 3 1. UI Design .............................................................................................................. 3 1.1Who will be the users?................................................................................ 3 1.2What task should be performed.............................................................. 4 1.3 Application Layout ....................................................................................... 5 1.3.1 Special Web Usability Requirements ............................................... 6 2. User Application Interaction ...................................................................... 7 3.Evaluation............................................................................................................. 15 Bibliography............................................................................................................. 17 Table of Figures Figure 1 Initial Use Case that Describes task performed by User ....... 4 Figure 2 Interface layout ...................................................................................... 5 Figure 3 Application Screenshot ........................................................................ 6 Figure 4 State Transition diagram for user logon ...................................... 7 Figure 5 User Validation Screen ....................................................................... 7 Figure 6 Welcome Screen .................................................................................... 8 Figure 7 Failed Authentication ........................................................................... 8 Figure 8 Modify/delete selection screen ......................................................... 9 Figure 9 Modify/delete main screen .............................................................. 10 Figure 10 Update/Delete Confirmation Screen.......................................... 10 Figure 11 Modification/update/insert ............................................................ 11 Figure 12 Insert new employee screenshot................................................ 12 Figure 13 Flow chart of deletion sub-dialogue ......................................... 12 Figure 14 A Microsoft Word like environment is offered for some categories maintain .............................................................................................. 13 Figure 15 System Transition Diagram ......................................................... 15

Introduction
This courseworks user interface has as scope to allow the interaction between a number of users and a Content Management System (CMS) for managing remote web sites. This application is a web based application running on Apache/IIS web server, the language that has been used is PHP version 4.0.3 and uses the Myself Database facilities. Because of his weborientation this application has special needs in terms of Usability Design.

1. UI Design
In order to start the Design process firstly we have to determine the key factors in our UI Design process: 1. Who will be our user 2. What task should be performed 3. How the above tasks: o would be preformed by our target user o with what sequence In a second stage we have to take care about aesthetic elements. 1.1Who will be the users? Our target group is people who have no knowledge of programming but still are information literal in terms of using computer for every day office work(word processing, web browsing). As a consequence we have to provide them with a User interface, that will use vocabulary terms and syntax that can be understood by them and also the system should use a way to perform task similar to what they have used to deal with. In other words our user interface must bridges the gap between what must be done and what the user can do. If we are successful on that our system will be productive in a short period of time, since no extra user-training will be necessary while the user satisfaction will maximize.

1.2What task should be performed The user must be able to: Update content in text form Delete content in text form Updload/Update Images Delete Images

But in order to perform the above tasks properly user must also: Authenticate Be able to undo (go back in case of an error input/output) Also because our system use is a client/server application we may experience: network delays Disconnect events And so we have to handle this event in such away that will constrain users discomfort.

Figure 1 Initial Use Case that Describes task performed by User

1.3 Application Layout

Or application screen is divided in 3 parts the top where the companys logo goes and the most left part that holds the navigation menu and finally the main window in where the user can input, delete and update, content.

Figure 2 Interface layout

The purpose of the logo on the top is to make the user to fell comfortable by looking at a familiar to them logo. The left hand site menu is based to the speculation that there is a big enough number of websites that use the left side for navigation also companys site use a left side navigation men and probably our users know how to use it. Colours that has been used are simple while animation has been wiped off since it adds nothing to User-Machine interaction maybe confuse the user

Figure 3 Application Screenshot

1.3.1 Special Web Usability Requirements Since web application suffer from limitations that are not exists in the ordinary web applications the usability requirements are different. In order to produce an effective Web User Interface we have to take into account the following things: 1. Network access speed is variable, maybe we have broadband but some of our customers may access the interface via dialup and speed of 56Kbits 2. There is not only one web browser. Mozilla, firefox, opera coexists with Internet Explorer and Safari. The worst thing is some of the cool characteristics that are well supported in one web-browser are unknown to another. That is very important especially during the design and the use of CSS technology for image/text distribution around the page. 3. There is not only OS, so we have to be very careful what type of fonts we are going to use. In general we must try to produce lightweight web pages, use global-compatible techniques for Image/Web Distribution, and common web-fonts. All these factors has been already taken into mind for this project.

2. User Application Interaction

Firstly, in order for a user to get the appropriate privilege user must authenticate via user-validation web page.

Figure 4 State Transition diagram for user logon

If user authentication is successful user is redirected to a new welcome page which contains the navigation menu on the Left. Via navigation menu we can access any other application function whatever in witch page of the CMS we are, in that way we achieve a unified and immediate way of navigation.

Figure 5 User Validation Screen

Figure 6 Welcome Screen

In case of authentication failure user get the information that logon has failed and some directions how to overcome the problem.

Figure 7 Failed Authentication

After

our user has logon has the following options: Update a company client-profile Insert a new company-client to corporate web site Update an employee profile

Insert a new employee profile Update the company profile e.t.c Add new job opportunities Update contacts.

To update the a company-client profile the user select the appropriate option from navigate menu, after he had selected The option he is redirecting to a new web page in which he select From a drop down menu the company that he want to update/delete (figure 8).(Usability goal for using drop-down menu: Easy
access to a company profile the Backward is that the drop down menu are not efficient in case of a large number of companies.)

Then he goes to a new page where he has access to modify/delete the specific company. Before new changes apply user is asked to confirm. If confirmation is not granted user return back (actually is redirected to a new page but that is transparent to user) in order to make the appropriate modification.

Figure 8 Modify/delete selection screen

Figure 9 Modify/delete main screen

After the successful update user is redirected to the Update/Delete selection Screen which now display a message that confirms the fact that the previous update was successful.

Figure 10 Update/Delete Confirmation Screen

The same process is for Employee update profile (PHP is also object oriented language so the reuse of classes has as result also the Interface to be similar for similar procedures).

Figure 11 Modification/update/insert

Insert a new person/company is also similar; to prevent time waste we are going to present the people insert webpage: User selects the insert people option from left side menu, a new page that ask from user to complete some forms fields and/or upload an picture of the employee, comes to surface. When the user has finished he must press the submit button to upload the data, and then he return to the main welcome page. In all the aforementioned categories user freedom is very limited, and he is guided step-by step to complete every task, that happened in purpose so the case of a mistaken entry to be as limited as possible.

Figure 12 Insert new employee screenshot

Delete D1 Please select Company to Update

read record C1

No Delete /Update ?

answer? C1 Delete

other

Update Confirm delete record C1 Yes Finish Finish

Figure 13 Flow chart of deletion sub-dialogue

A special category is the Update of About, Account, Careers, Contact. All of these categories has a free text to be edit every time we want to update it, thus the previous model of limited freedom that we have achieved until no has limited functionality. To overcome this situation we go a step further and we offer a Microsoft Word like word processing environment.

Figure 14 A Microsoft Word like environment is offered for some categories maintain

After the text has been modified user can save the new content by pressing the Diskette Icon or press submit at the end of the text. Then he redirected to a confirmation page when he can see how the new page is look like. Here we can rise a point of discussion, since is a web operation and is very possible that our application may face some network latency we, normally, have to add a progress bar in order to inform user how the upload of information is going. But Still, since we have just small text, we can assume that the time that is needed for the new data to be uploaded is very small, and thus we had decide to avoid this extra screen.

Unfortunately a confirmation mechanism that will prevent mistakes in update the page has not been implement at this point but is in the to do list.

Figure 15 System Transition Diagram

Finally when the user wants to quit he can either go to logout menu-item or just close the browser.

3.Evaluation
This project has been developed initially for a customer of mine, and has been evaluate for several persons that works for Client Solutions LTD. The user interface has been evaluated for more than one month, and after this stage of testing has take the final form that is

convenient in term of usability for the people that work for Client Solution LTD. To test further the efficiency of the application, I have asked some of my fellow-students from school of management to try the system. The results were very encouraging since after a small tutorial of 10 minutes and same practice of 15 minutes(average) they were able to perform the majority of tasks without mistake/or help.

Bibliography
Dr Hinton, T. 2005, CS285 Human Computer Interaction lecture notes distributed , CS285 Human Computer Interaction at the University of Surrey, UK, spring semester 2005.[Available from http://www.computing.surrey.ac.uk/courses/cs285/ Last Visit:25/4/2005]