Coursework Interaction Design _ Greenwich
April 15, 2017 | Author: Todd Nguyen | Category: N/A
Short Description
Download Coursework Interaction Design _ Greenwich...
Description
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
The University of Greenwich
Interaction Design –COMP1649
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
The University of Greenwich
Interaction Design –COMP1649
- 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
The University of Greenwich
Interaction Design –COMP1649
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
The University of Greenwich
Interaction Design –COMP1649
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
The University of Greenwich
Interaction Design –COMP1649
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
The University of Greenwich
Interaction Design –COMP1649
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 University of Greenwich
Interaction Design –COMP1649
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.
8
The University of Greenwich
Interaction Design –COMP1649
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
The University of Greenwich
Interaction Design –COMP1649
10
The University of Greenwich
Interaction Design –COMP1649
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
The University of Greenwich
Interaction Design –COMP1649
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 University of Greenwich
Interaction Design –COMP1649
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
The University of Greenwich
Interaction Design –COMP1649
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
The University of Greenwich
Interaction Design –COMP1649
There is information provided on each fields. Student can click on each particular post to retrieve information.
15
The University of Greenwich
Interaction Design –COMP1649
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 University of Greenwich
Interaction Design –COMP1649
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
The University of Greenwich
Interaction Design –COMP1649
1. Our Halls Section:
Site Navigation: Home Student Greenwich Accommodation Accommodation Our Halls
18
The University of Greenwich
Interaction Design –COMP1649
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
The University of Greenwich
Interaction Design –COMP1649
4. Special Circumstances Site Navigation: Home Student Greenwich Accommodation Accommodation Special Circumstances
20
The University of Greenwich
Interaction Design –COMP1649
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 University of Greenwich
Interaction Design –COMP1649
The Study Programme section provides information about all subject hosted in UoG. There are undergraduate programmes, postgraduate programmes, foundation degree, etc…
22
The University of Greenwich
Interaction Design –COMP1649
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
The University of Greenwich
Interaction Design –COMP1649
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
The University of Greenwich
Interaction Design –COMP1649
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
The University of Greenwich
Interaction Design –COMP1649
Student Services
Site Navigation: Home Student Student Services Student Support and Services
26
The University of Greenwich
Interaction Design –COMP1649
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
The University of Greenwich
Interaction Design –COMP1649
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
The University of Greenwich
Interaction Design –COMP1649
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
The University of Greenwich
Interaction Design –COMP1649
2. Counselling Site Navigation: Home Student Student Services Student Support and Services Counselling
30
The University of Greenwich
Interaction Design –COMP1649
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
The University of Greenwich
Interaction Design –COMP1649
5. Study Skills Site Navigation: Home Student Student Services Student Support and Services Study Skills
32
The University of Greenwich
Interaction Design –COMP1649
Student Activities
Site Navigation: Home Student Student Activities Open Days at UoG
33
The University of Greenwich
Interaction Design –COMP1649
1. Preparing Your Visit Site Navigation: Home Student Student Activities Open Days at UoG Preparing Your Visit
34
The University of Greenwich
Interaction Design –COMP1649
2. On The Day Site Navigation: Home Student Student Activities Open Days at UoG On The Day
35
The University of Greenwich
Interaction Design –COMP1649
3. After You Visit Site Navigation: Home Student Student Activities Open Days at UoG After You Visit
36
The University of Greenwich
Interaction Design –COMP1649
4. Other Way to Visit Us Site Navigation: Home Student Student Activities Open Days at UoG Other Way to Visit Us
37
The University of Greenwich
Interaction Design –COMP1649
5. International Student Site Navigation: Home Student Student Activities Open Days at UoG International Student
38
The University of Greenwich
Interaction Design –COMP1649
Chatting
Site Navigation: Home Student Chatting Themed Chat Sessions
39
The University of Greenwich
Interaction Design –COMP1649
1. Themed Chat Sessions Site Navigation: Home Student Chatting Themed Chat Sessions Themed Chat Sessions
40
The University of Greenwich
Interaction Design –COMP1649
Finance Site Navigation: Home Student Finance Student Fees and Finances
41
The University of Greenwich
Interaction Design –COMP1649
1. Undergraduate Fees and Funding Site Navigation: Home Student Finance Student Fees and Finances Undergraduate Fees and Funding
42
The University of Greenwich
Interaction Design –COMP1649
2. Postgraduate Fees and Funding Site Navigation: Home Student Finance Student Fees and Finances Postgraduate Fees and Funding
43
The University of Greenwich
Interaction Design –COMP1649
3. International Fees and Funding Site Navigation: Home Student Finance Student Fees and Finances International Fees and Funding
44
The University of Greenwich
Interaction Design –COMP1649
4. Foundation Degrees Tution Fees and Loans Site Navigation: Home Student Finance Student Fees and Finances Foundation Degrees Tution Fees and Loans
45
The University of Greenwich
Interaction Design –COMP1649
5. Pre-registration Midwifery and Nursing Site Navigation: Home Student Finance Student Fees and Finances Pre-registration Midwifery and Nursing
46
The University of Greenwich
Interaction Design –COMP1649
6. Money Doctor Site Navigation: Home Student Finance Student Fees and Finances Money Doctor
47
The University of Greenwich
Interaction Design –COMP1649
News Site Navigation: Home News
48
The University of Greenwich
Interaction Design –COMP1649
Events Site Navigation: Home Events
49
The University of Greenwich
Interaction Design –COMP1649
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
The University of Greenwich
Interaction Design –COMP1649
51
The University of Greenwich
Interaction Design –COMP1649
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
The University of Greenwich
Interaction Design –COMP1649
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
The University of Greenwich
Interaction Design –COMP1649
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 University of Greenwich
Interaction Design –COMP1649
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 University of Greenwich
Interaction Design –COMP1649
The similar situation will occur when creating a new Event as well as News.
Picture: create new News
Picture: create new Event
56
The University of Greenwich
Interaction Design –COMP1649
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
View more...
Comments
