Coursework Interaction Design _ Greenwich

The University of Greenwich Interaction Design COMP1649

1

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


2

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 devices advantages is the capability to

present website. It is well known that the difference between a common laptop

PCs 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 UoGs 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 devices screen size (due

to the size diversity).


3

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


4

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.


5

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.


6

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.


7

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.


8

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


9

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


10


11

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.


12

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.


13

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.


14

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.


15

There is information provided on each fields. Student can click on each

particular post to retrieve information.


16

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


17

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.


18

1. Our Halls Section:

Site Navigation: Home Student Greenwich Accommodation Accommodation Our Halls


19

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


20

4. Special Circumstances

Site Navigation: Home Student Greenwich Accommodation Accommodation Special Circumstances


21

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.


22

The Study Programme

section provides information

about all subject hosted in

UoG. There are undergraduate

programmes, postgraduate

programmes, foundation

degree, etc


23

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.


24

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


25

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


26

Student Services

Site Navigation: Home Student Student Services Student

Support and Services


27

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.


28

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.


29

1. University-wide careers and employability support


Support and Services University-wide careers and employability support

1. Chaplaincy


Support and Services Chaplaincy


30

2. Counselling


Support and Services Counselling


31

3. Health and Medical Services


Support and Services Health and Medical Services

4. Equal Opportunities


Support and Services Equal Opportunities


32

5. Study Skills


Support and Services Study Skills


33

Student Activities

Site Navigation: Home Student Student Activities Open Days at UoG


34

1. Preparing Your Visit

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


35

2. On The Day

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


36

3. After You Visit

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


37

4. Other Way to Visit Us

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


38

5. International Student

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


39

Chatting

Site Navigation: Home Student Chatting Themed Chat Sessions


40

1. Themed Chat Sessions

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


41

Finance

Site Navigation: Home Student Finance Student Fees and Finances


42

1. Undergraduate Fees and Funding

Site Navigation: Home Student Finance Student Fees and Finances Undergraduate Fees and Funding


43

2. Postgraduate Fees and Funding

Site Navigation: Home Student Finance Student Fees and Finances Postgraduate Fees and Funding


44

3. International Fees and Funding

Site Navigation: Home Student Finance Student Fees and Finances International Fees and Funding


45

4. Foundation Degrees Tution Fees and Loans

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


46

5. Pre-registration Midwifery and Nursing

Site Navigation: Home Student Finance Student Fees and

Finances Pre-registration Midwifery and Nursing


47

6. Money Doctor

Site Navigation: Home Student Finance Student Fees and Finances Money Doctor


48

News

Site Navigation: Home News


49

Events

Site Navigation: Home Events


50

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.


51


52

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.


53

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.


54

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


55

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.


56

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

Picture: create new News

Picture: create new Event


57

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.

Date post:	13-Oct-2015
Category:	Documents
Upload:	todd-nguyen
View:	353 times
Download:	2 times

Coursework Interaction Design _ Greenwich

Documents