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
Accommodation Our Guarantee

3. Seeking Private Accommodation
Accommodation Private Rented Accommodation
20

4. Special Circumstances
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
Undergraduate Programmes 2014

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

25

3. Foundation Degrees 2014
Foundation Degrees 2014

4. Applied Professional Study
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
Days at UoG On The Day
36

3. After You Visit
Days at UoG After You Visit
37

4. Other Way to Visit Us
Days at UoG Other Way to Visit Us
38

5. International Student
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
Undergraduate Fees and Funding
43

2. Postgraduate Fees and Funding
Postgraduate Fees and Funding
44

3. International Fees and Funding
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
Finances Pre-registration Midwifery and Nursing
47

6. Money Doctor
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.

Coursework Interaction Design - Greenwich

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Coursework Interaction Design - Greenwich

Caricato da

Copyright:

Formati disponibili

The University of Greenwich Interaction Design COMP1649

Potrebbero piacerti anche