Coursework Interaction Design _ Greenwich

The University of Greenwich

Interaction Design –COMP1649

A Coursework Report On

Interaction Design Course: COMP1649 Interaction Design

Submitted by Nguyen Anh Truong Student ID: GT60583 Class: GT0874 Date of Submission: April 28, 2014

1



I. Introduction 1. Guide the readers to your work The rocket development of smart devices has not only increased the number of its user globally but also improve the quality of those. Nowadays, there are smartphones and tablets that are widely used everywhere and are being more preferred to the inconvenient laptop PC. Those smart devices as said are being hardware and software strengthened on each new generations that they are good enough to serve for the common user activities. The use of smart device has played an important role in contributing to the world convenience. User now enjoy carrying their “virtual world” outside with the more stable connection to the internet. That means they can enjoy their favorite games anytime, directly connect to a new interesting website and even design their own application for various purpose. One among many of the smart device’s advantages is the capability to present website. It is well known that the difference between a common laptop PC’s screen size with the one in smart device has flagged up an issue in displaying a specific web page. It is required to have another web version that work properly with the smaller screen but also ensure the integrity of the total amount of data containing in the main. Furthermore, the touching interaction on smart device is also the attention point in designing the way user access to the web page.

2. Intro readers about what you will do in the next sections According to the need of having a “smart device” website which will mainly serve for the students in getting necessary information located on the root without accessing to it, the University of Greenwich (UoG) is about to start requesting an appropriate project. As a student taking part in UoG’s programme, I am commissioned to develop such an applet used to achieve the required purpose. The developing web applet: - Will have the content similar to the origin version. - Will be able to perform properly on most of smart device’s screen size (due to the size diversity). 2



- Will cover most of essential information that new students need in the first time learning at UoG. - Follow the study of Interaction Design to ensure the development key issue, such as: cognitive psychology, principle design, evaluation and methodology technique, establishment of standard and guideline, etc…

3. Related Works Personally, the original UoG Website carries itself good interaction design with many advantages in providing necessary information to students. - The advantages I have found in UoG website: The content is well performed in separate web page Logically navigate among necessary links - The disadvantages In order to develop a customized website for smart devices, the original content must be reorganized (the current content is separated into too many pages)

3



II. Issues in ID There are several principals of interaction design that we have to follow on this coursework development. The project which we have built is easy to get along with, rather interesting and is really useful in providing the second way to retrieve information. Project Consistency: The color, icon and text used in this project is consistent from the homepage to the end ( not include the admin section ). I have followed the two primary principles used on this part: the conceptual consistency and the physical consistency which mean the matching of all mentioned objects above. Project Familiarity: The website is really attractive to the user with is presentation of images as well as media means. To be more specific, the menu which I have design for the smart device can automatically adjusted base on the screen size. Project Visibility: There is no information that is invisible on the website. The user needed content will be easy to find and retrieve. Project Affordance: this feature is to make sure the natural characteristic of everything used on the website. User have to follow the right navigation part to reach the necessary content section.

Project Navigation: I have built the path which user can follow to easily move among website sections.

4



Project Control: There are limitation for the user in the website system. There is only the admin that can access the admin section, not the common user like student. There are outside links placed within the main website that will lead the user to the support content. Project Flexibility: There are no rule for the use of this project. User can choose whatever they want to move among sections.



Project Feedback: The feedback means to ensure the system will return to appropriate pages according to user request. There are always titles located on the top left of the required pages.

5



Project Recovery: According to my test plan on the main website, there is almost no chance for the user that can be lost when browsing the main pages. Project Style: My design on color, text font and photos are all suitable to the university environment. I have followed the simple style but still had its own attraction on designing. User will find it easy but impressive as well when browsing the web pages. Project Conviviality: this feature is the main key to keep good interaction between user and the website. I have never put anything that can cause bad impression on user. Project Usage Evaluation: The term aims to test the interaction due to the following principles of: Recruit Stakeholders, Prepare Material, Inspect Progress and Abstraction. In order to recruit stakeholder, I aim to let them join the website interaction testing to gather requirement that will help in improving the code. The website rating is needed in order for the stake holder to evaluate. So that it will be included in the section of Material Preparation. Project Smart Device Suitability: As mentioned before that I have built the website to fix the smaller screen of smart device. There are principles in choosing the standard photo and style of font used.

6



4. Design a. How to find the applet The project I am about to develop serves for fresh students who is searching for necessary information in UoG in order to apply for the school programme.

b. What kind of information do new students need? Personally, fresh students need information about -

The course they are interest in Updated fee and policy for appropriate course Student support services Trusted accommodation School outdoor activities Health care service

c. Applet Functionalities The applet mostly include the functions used to display information. There are information about all of the content displayed in the main website as well as other stuff such as news and events.

7



The applet which I develop is separated into part of content. Each content can be adjusted by the use of admin functionalities. d. How to choose icons, colors, text, fonts, etc… I have referenced to some university website related to my work to do my own test about picking the most suitable primary background color. Finally I pick the light lime which I most satisfy with as the primary. I have used the font called “FontAwesome” which is not a common often seen, it is a user defined font that I have the right to apply for the developing website. e. Navigation design The website navigation is designed pretty wise in sequence. It all start from the Home page then to another following the arrow of the way. For example: To navigate to the Student Fees and Finance section of the website applet, we follow this direction: HomeStudentFinanceStudent Fees and Finance f. Screen size issue: I have tested the website in two smart devices: iPhone5 and iPad using the support tool from the website.

8



The screen of iPhone5 appear to best present the website. While the appearance of the iPad is not as beautiful as that. However, the data is kept integrity

9



10



5. Use Case Diagram Use Case Diagram 1: Student Section

Use Case Diagram 2: Admin Section

6. Implementation The background language here is English only. It is well recomposed to be suitable reading in smart devices with small screen. 11



This is how my home page of the applet looks like. The whole pages below are taken directly from my smart device by the screenshot feature.

The home page contains information about News, Events and other stuff which mainly used in providing daily information to UoG Students.

12



The quote part is the area used to impress student with meaningful quote.

There are news that are daily posted to the website for the students to be updated with useful information.

13



There are events listed on the main page for the students to catch up and keep track of them.

When clicking on the rectangle icon located in top right of the page, a menu will be listed out. As we just develop an applet for the UoG website and that the Student tab plays that main role. Student access the applet to retrieve information about: Greenwich Accommodation, Study Programme, Student Services, Student Activities, Chatting and Finance. Personally, all of the mentioned above is what freshman need once studying at UoG.

14



There is information provided on each fields. Student can click on each particular post to retrieve information.

15



 Greenwich Accommodation This section includes four sub sections that are used to present steps for student to have appropriate place to live when learning at UoG. This main section include:    

Our Halls Our Guarantee Seeking Private Accommodation Special Circumstances

Those screenshots below are taken directly on my smart device. Site Navigation: Home Student Greenwich Accommodation  Accommodation

16



The accommodation section provide information about the place for students to live during the time in UoG as well as other related services. Student by reading those will be able to select their most appropriate accommodation.

17



1. Our Halls Section:

Site Navigation: Home Student Greenwich Accommodation  Accommodation  Our Halls

18



2. Our Guarantee Section Site Navigation: Home Student Greenwich Accommodation  Accommodation  Our Guarantee

3. Seeking Private Accommodation Site Navigation: Home Student Greenwich Accommodation  Accommodation Private Rented Accommodation

19



4. Special Circumstances Site Navigation: Home Student Greenwich Accommodation  Accommodation  Special Circumstances

20





Study Programme Site Navigation: Home Student Study Programme  Programme

This is where student can browse to choose which major they will follow to learn for their own career.

21



The Study Programme section provides information about all subject hosted in UoG. There are undergraduate programmes, postgraduate programmes, foundation degree, etc…

22



Each field carries relevant subjects as well as the information about how to apply for it. There are also skills and hints for students to easily achieve the goal on each subject.

23



1. Undergraduate Programmes 2014 Site Navigation: Home Student Study Programme  Programme  Undergraduate Programmes 2014

2. Post Graduate Programmes 2014 Site Navigation: Home Student Study Programme  Programme  Post Programmes 2014

24



3. Foundation Degrees 2014 Site Navigation: Home Student Study Programme  Programme  Foundation Degrees 2014

4. Applied Professional Study Site Navigation: Home Student Study Programme  Programme  Applied Professional Study

25





Student Services

Site Navigation: Home Student Student Services  Student Support and Services

26



This section provides information about services used to support student during school time. It is extremely helpful to know what we can be best support for the education process.

27



As shown in this current page, there are information related to your chosen career, chaplaincy, counselling, health and medical, opportunity, study skills. They are all important fields of school services that student need to know in order to register to get its right.

28



1. University-wide careers and employability support Site Navigation: Home Student Student Services  Student Support and Services  University-wide careers and employability support

1. Chaplaincy Site Navigation: Home Student  Student Services  Student Support and Services  Chaplaincy

29



2. Counselling Site Navigation: Home Student  Student Services  Student Support and Services  Counselling

30



3. Health and Medical Services Site Navigation: Home Student  Student Services  Student Support and Services  Health and Medical Services

4. Equal Opportunities Site Navigation: Home Student  Student Services  Student Support and Services  Equal Opportunities

31



5. Study Skills Site Navigation: Home Student  Student Services  Student Support and Services  Study Skills

32





Student Activities

Site Navigation: Home  Student  Student Activities  Open Days at UoG

33



1. Preparing Your Visit Site Navigation: Home  Student  Student Activities  Open Days at UoG  Preparing Your Visit

34



2. On The Day Site Navigation: Home  Student  Student Activities  Open Days at UoG  On The Day

35



3. After You Visit Site Navigation: Home  Student  Student Activities  Open Days at UoG  After You Visit

36



4. Other Way to Visit Us Site Navigation: Home  Student  Student Activities  Open Days at UoG  Other Way to Visit Us

37



5. International Student Site Navigation: Home  Student  Student Activities  Open Days at UoG  International Student

38





Chatting

Site Navigation: Home  Student  Chatting Themed Chat Sessions

39



1. Themed Chat Sessions Site Navigation: Home  Student  Chatting  Themed Chat Sessions  Themed Chat Sessions

40



 Finance Site Navigation: Home  Student Finance Student Fees and Finances

41



1. Undergraduate Fees and Funding Site Navigation: Home  Student  Finance  Student Fees and Finances  Undergraduate Fees and Funding

42



2. Postgraduate Fees and Funding Site Navigation: Home  Student  Finance  Student Fees and Finances  Postgraduate Fees and Funding

43



3. International Fees and Funding Site Navigation: Home  Student  Finance  Student Fees and Finances  International Fees and Funding

44



4. Foundation Degrees Tution Fees and Loans Site Navigation: Home  Student  Finance  Student Fees and Finances  Foundation Degrees Tution Fees and Loans

45



5. Pre-registration Midwifery and Nursing Site Navigation: Home  Student  Finance  Student Fees and Finances  Pre-registration Midwifery and Nursing

46



6. Money Doctor Site Navigation: Home  Student  Finance  Student Fees and Finances  Money Doctor

47





News Site Navigation: Home  News

48





Events Site Navigation: Home  Events

49





Admin Site Provided Account: Username: admin Password: 123456

We also provide the admin functions in order to compose content to upload onto the main website. There are Content, Events and News management included in the section.

50



51



7. Programming I have taken most advantages from using the technology called bootstrap. It is to support in generating the suitable view that fix the screen size on smart devices. Here is its library follows with a single snap shot of its interface designed code.

The use of boostrap is applied just for the main website. The admin section is defined and implemented by my own work.

52



8. Testing and Evaluation The testing process will mainly take place in the admin functionalities which include the process of data manipulation To be more specific: 

Login

The login will be unsuccessful if the required username and password do not satisfy the right admin account. Therefore, user is supposed to remember the account information. 

Main Content When create a new content to upload into the main website, the field categoryId is required as it is shown.

53



When the user is viewing a primary content detail, if they click on Edit. Unfortunately, a serious error will be thrown out which is due to my own mistake in getting the id of the current Content.

The solution for this case will be clicking on the Edit sign located next to the record standing for the chosen content. There are a list of all content that we search for the appropriate and run the process.

 Student content

54



The field content of this section will be filled in the form of a common html writing. I have design it this way to be able to present more content of just a single post. Here is the result for the code content of the field.

When user is about to create a new Student Content, if all fields are left blank, the process is still accomplished. This is sort of an error but everything can be adjusted later. There is no fatal error like the one in the Primary Content.

55



The similar situation will occur when creating a new Event as well as News.

Picture: create new News

Picture: create new Event

56



 News and Events Date testing

Evaluation: I have paid more attention in designing the interface as well as picking the appropriate icons, color and text. The section of data manipulation belong to the admin site is not really a perfect one. There are still fatal error that I could not handle. However the website system is to serve for the student purpose, it is not any way to let them join the admin section. Personally, the interface of the main page is pretty good that satisfy the Interaction Design functionalities. Student Conclusion: The website is able to develop more in the future. As for now, it is just a prototype that might not include enough functionalities. The thing is, I have designed the website wisely that it can be developed more by not just me but another developer. The admin functionalities are not really well designed and it still get fatal error. However, the main process of data manipulation is able to accomplish by follow the guide that I have put. Thank you for reading.

57

Coursework Interaction Design _ Greenwich

Recommend Documents