This document, Prototype Version 1, is available to download from DropBox. In case of any modification, please update all the versions. You have to update word document, PDF document in DropBox Folder and Also this post.
By Shahin Jahromi
Posted By Amir Sezavar Keshavarz
Introduction
This artefact is aimed to discuss different aspects and rationale of the proposed GUI prototype for the SOTON Student Connect application.
The document will start by including the main screen shots of the prototype along with a full discussion on the rationale for each section and then proceeds to offer the rationale of the design by discussing a number of typical user stories. Finally the strengths and weaknesses of the design will be listed.
Screen shots
1. Home Page
Figure 1
Highlights
Figure 1 depicts the starting page of the system. The design includes a three column paradigm with a banner at the top and a footer to indicate the end of the page. The banner includes the system’s logo, application’s name and the status of the user currently viewing the page. From the status bar user can see whether she has signed in to the system or if the user has not created a account for herself, the system indicates that the current user is viewing the site as a guest and offers her the option to sign up to the system.
The body of the page consists of three columns. The left most column illustrates a picture to graphically indicate the purpose of the system. The middle column offers a textual description of the site highlighting the features and benefits of the system. Finally the right hand side column provides the login facility for users who have already created an account in the system.
The main page follows the traditional page based Web application’s paradigm as it does not include high degrees of interaction and in addition, the conventional types provides more security regarding users sensitive data such as login credential compared to rich technologies for which security remains an unsolved concern.
2. User Home Page
Figure 2
Highlights
Figure 2 depicts a registered user’s home page which acts as a portal giving access to all the features and facilities of the site in a single page. This page is essentially a mix of rich and traditional user interface paradigm in that the main and frequently used features of the application has been included as widgets which update dynamically upon user’s interactions which does not require the page to be refreshed. This way the performance of the system will be highly improved and the interface would be more compact and user friendly.
The top banner remain enact to maintain the consistency of the system. The status bar however will be updated to show the status of the user as logged in and providing a sign out facility. The footer also still present the indicate the end of the page.
The left hand side navigation bar contain the profile picture of the user along with a list of links to less frequently used features of the system or to pages which should be opened in a new window or as a front layer to the current page.
The main content pane includes a number of widgets which could be managed, closed, minimised or being replaced by other widgets available. Default widgets includes the user’s calender which is one of the most important and most frequently used feature of the system, enrolled modules list which present to the user the full list of the modules she has currently enrolled and contains links to each module’s resources and discussion pages. The notifications and actions widget lists all the recent activities, post, tags, friend’s statuses etc which are relevant to the user. The finder widget offer the facility for the user to search for people, friends, groups, events and activities through the system. The suggestion menu offers friend suggestions which is based on the system’s recommender system. Other widgets which can be included to the system would be accommodation section widget, each of the enrolled groups or activities widget, rss feed of subscribed friends, events or groups widget and so forth.
Please note that these are only the two so called landing pages of the system. If the design is accepted in the prototype review sessions, the prototype will be extended to cover the full details of the system.
Strengths
The strengths of the proposed prototype can be listed as follows:
- Taking advantage of the rich user interface design
- improved performance
- ease of use
- ease of navigation through the system
- highly customisable user pages
- quick and instant access to the most important features of the system
- high level of user interaction
- clear and intuitive interface design
- light weight widget based minimalistic design
Weaknesses
A number of weaknesses can be listed for the offered prototypes as below:
- lacks accessibility features
- implementation and coding challenges
- lack of standardised methodologies for implementation
Prototype to be expanded upon acceptance


