Improve the prototype (HTML-CSS), develop user acceptance test and report

User Generated

wnlqrp48

Programming

Description

The overall task is divided into two project phases (i.e. two separate, but related projects). It is strongly advised that you read the following project description in conjunction with the description for Project A.

You are to complete the following task in the order given:

  • Develop high-fidelity prototype. Based on the user test feedback and recommendations that you proposed in the previous phase ( file Project A- Feedback.docx and file ProjectA_marksheet_HCI_v2.xls attached below), develop a high-fidelity prototype (i.e. reasonably complete version) for the website base on the Project A prototype (file ProjectA.zip attached below). Use any combination of HTML5 and CSS3. Remember to indicate which browser (i.e. IE, Firefox, Safari, Chrome, etc.) you are targeting as the main working platform. For the purpose of this project, please exclude mobile devices that runs on fragmented or closed-system technology, such as Android, Apple iOS and Nook. Do not use Rapid Application Prototyping (RAD) tools or any other type of scripting languages or services, eg. Python, Lua, AJAX, Dreamweaver, WordPress etc.
  • Carry out user acceptance test. Devise two walkthrough scenarios. For example, “Instruct the user to visit the Kites section, look up two items, exit and selectQuadcopers section and look up four other items.” Apply this walkthrough scenario to your test subjects. Invite 3 to 4 potential users (e.g. friends, family members, classmates should be fine, etc.) to play the role of users. You do not need to provide their names. Ask each of the users to perform all the walkthrough scenarios you have devised. Apply appropriate techniques to determine how the website performs under these test conditions. Systematically collect data on the user performance. For example, how long did each of the users take to complete each of the scenarios? Did the users find the interface easy or challenging to use? Does the interface allow users to change their minds? Etc. Refer to your textbook for more detailed and appropriate parameters that suits your requirements.
  • Identify features. Identify any one or two features of the website that you think deserves particular attention. An example of a feature is, draw attention to interface design elements that are particularly innovative, e.g. visitors can call up a mini navigational ‘menu bar’ from any page.
page1image1691840

1

  • Recommendation. From the outcome of the user acceptance test, provide recommendations on how the high-fidelity prototype can be improved. Assertions made in your recommendation need to be supported by the test results you have carried out earlier.
  • Write a report. Produce a report to document the tasks and the outcome of your efforts undertaken for Project B. Remember, this report is intended for your employers. You need to document and support the viability of your website – that is, to convince your employer that your webpage is performing as intended.Format of ReportAs you are performing the tasks prescribed above, you will need to document every step of your activity (i.e. write up what you have done). These pieces of information will be consolidated into a report. For the purpose of this project you are assumed to be a professional. As such, you should attempt at your best to reflect this quality in the preparation of the report. As a minimum, the report should contain the following:
    1. (1) Introduction – State the purpose and objectives of the report.
    2. (2) Content – This is the main section where you should document your activities. Youshould document the design principles you have adhered to in the development of your website. You need to show the relationship of the interface design principles relating to your webpage.
    3. (3) User acceptance test. Do not include raw or unprocessed data. Summarise your findings. Include only the analysis, evaluation, summarization and outcome of the acceptance test here. If you really need to include critical or important raw data, then do so by appending them to an appendix at the end of the report. Keep a record of your raw data. If required, your instructor or marker may request that you provide them with a copy.
    4. (4) Features.
    5. (5) Recommendation.
    6. (6) Conclusion – This is basically a summation, consolidating the main points of the report.
    7. (7) There is no minimum or maximum limit to the number of words required in this report.However, the length of your report must be within reason and of adequate length tosuccinctly support the complete account of tasks you have undertaken.
    8. (8) Figures or diagrams can be added as required.
    Page formatting: A4 size paper, 2.5cm margins on all sides, single-sided, Time Romans or New Time Romans font, 12pt font size, DOC or DOCX format.

2

Learning Objective

Note that these are not programming project in themselves. The primary purpose of both Project A and Project B is to ensure that students adopt best practice and adhere closely to HCI principles during the process of designing and developing the interactive user interfaces. This process is to be fully documented in your report. Full functionality is not expected from either Project A or Project B. For example, knowledge of database backend servers and web servers are not required in this course.

What to Submit

You should submit two items for assessment. These are:

  1. All necessary files, images, scripts, coding and resources should reside in a single mainPROJECT_B.ZIP folder. The report should be separated from this folder (see item 2 below). It is up to you to organise the files and sub-folders within the main folder. Ensure that all your scripts and coding is stand-alone and portable. That is, your marker or instructor should be able to run your scripts from the type of browser you have specified by clicking on the main.html or main.htm startup file. Use only HTML5 and CSS3 to develop your website. The web browser you specified should render your markup and scripts without problems.
  2. The report should be named REPORT_B and saved as a single file in DOC or DOCX format. This file should be located outside the ZIP folder.

Submit (1) PROJECT_B.ZIP and (2) REPORT_B.DOCX as separate files. That is, submit ONE ZIP file and ONE DOCX file. Both need to be separate items when you submit through the online submission portal.


Note: I have attach the requirement in pdf file in case you cannot see the requirement clearly. Furthermore, I also attach the mark sheet for Project B, please check this mark sheet to achieve the goals of this asm.

Unformatted Attachment Preview

COIS 12036 Human Computer Interaction (HCI) Project B (Term 1 – 2018) Total marks: 45 marks Project B: Task The overall task is divided into two project phases (i.e. two separate, but related projects). It is strongly advised that you read the following project description in conjunction with the description for Project A. You are to complete the following task in the order given: • Develop high-fidelity prototype. Based on the user test feedback and recommendations that you proposed in the previous phase (Project A), develop a high-fidelity prototype (i.e. reasonably complete version) for the website. Use any combination of HTML5 and CSS3. Remember to indicate which browser (i.e. IE, Firefox, Safari, Chrome, etc.) you are targeting as the main working platform. For the purpose of this project, please exclude mobile devices that runs on fragmented or closed-system technology, such as Android, Apple iOS and Nook. Do not use Rapid Application Prototyping (RAD) tools or any other type of scripting languages or services, eg. Python, Lua, AJAX, Dreamweaver, WordPress etc. • Carry out user acceptance test. Devise two walkthrough scenarios. For example, “Instruct the user to visit the Kites section, look up two items, exit and select Quadcopers section and look up four other items.” Apply this walkthrough scenario to your test subjects. Invite 3 to 4 potential users (e.g. friends, family members, classmates should be fine, etc.) to play the role of users. You do not need to provide their names. Ask each of the users to perform all the walkthrough scenarios you have devised. Apply appropriate techniques to determine how the website performs under these test conditions. Systematically collect data on the user performance. For example, how long did each of the users take to complete each of the scenarios? Did the users find the interface easy or challenging to use? Does the interface allow users to change their minds? Etc. Refer to your textbook for more detailed and appropriate parameters that suits your requirements. • Identify features. Identify any one or two features of the website that you think deserves particular attention. An example of a feature is, draw attention to interface design elements that are particularly innovative, e.g. visitors can call up a mini navigational ‘menu bar’ from any page. 1 • Recommendation. From the outcome of the user acceptance test, provide recommendations on how the high-fidelity prototype can be improved. Assertions made in your recommendation need to be supported by the test results you have carried out earlier. • Write a report. Produce a report to document the tasks and the outcome of your efforts undertaken for Project B. Remember, this report is intended for your employers. You need to document and support the viability of your website – that is, to convince your employer that your webpage is performing as intended. Format of Report As you are performing the tasks prescribed above, you will need to document every step of your activity (i.e. write up what you have done). These pieces of information will be consolidated into a report. For the purpose of this project you are assumed to be a professional. As such, you should attempt at your best to reflect this quality in the preparation of the report. As a minimum, the report should contain the following: (1) Introduction – State the purpose and objectives of the report. (2) Content – This is the main section where you should document your activities. You should document the design principles you have adhered to in the development of your website. You need to show the relationship of the interface design principles relating to your webpage. (3) User acceptance test. Do not include raw or unprocessed data. Summarise your findings. Include only the analysis, evaluation, summarization and outcome of the acceptance test here. If you really need to include critical or important raw data, then do so by appending them to an appendix at the end of the report. Keep a record of your raw data. If required, your instructor or marker may request that you provide them with a copy. (4) Features. (5) Recommendation. (6) Conclusion – This is basically a summation, consolidating the main points of the report. (7) There is no minimum or maximum limit to the number of words required in this report. However, the length of your report must be within reason and of adequate length to succinctly support the complete account of tasks you have undertaken. (8) Figures or diagrams can be added as required. Page formatting: A4 size paper, 2.5cm margins on all sides, single-sided, Time Romans or New Time Romans font, 12pt font size, DOC or DOCX format. 2 Learning Objective Note that these are not programming project in themselves. The primary purpose of both Project A and Project B is to ensure that students adopt best practice and adhere closely to HCI principles during the process of designing and developing the interactive user interfaces. This process is to be fully documented in your report. Full functionality is not expected from either Project A or Project B. For example, knowledge of database backend servers and web servers are not required in this course. What to Submit You should submit two items for assessment. These are: 1. All necessary files, images, scripts, coding and resources should reside in a single main PROJECT_B.ZIP folder. The report should be separated from this folder (see item 2 below). It is up to you to organise the files and sub-folders within the main folder. Ensure that all your scripts and coding is stand-alone and portable. That is, your marker or instructor should be able to run your scripts from the type of browser you have specified by clicking on the main.html or main.htm startup file. Use only HTML5 and CSS3 to develop your website. The web browser you specified should render your markup and scripts without problems. 2. The report should be named REPORT_B and saved as a single file in DOC or DOCX format. This file should be located outside the ZIP folder. Submit (1) PROJECT_B.ZIP and (2) REPORT_B.DOCX as separate files. That is, submit ONE ZIP file and ONE DOCX file. Both need to be separate items when you submit through the online submission portal. PLAGIARISM CQUniversity regards plagiarism as a serious offence and it can have serious consequences for you as a student. To avoid plagiarism, please read: https://www.cqu.edu.au/student-life/services-and-facilities/referencing/what-is-plagiarism 3 Assessment Criteria The following criteria will be used to assess your assignment: Criteria Marks Task as documented in report: • Overview and description. (2 marks) • User acceptance test are appropriate and sufficiently in-depth. (3 marks) o Walkthrough scenarios are appropriate and sufficiently complex. (1 mark) o Results for the test user performance. (6 marks) o Evidence that this task have been carried out with users. E.g. analysis and evaluation of data are presented, etc. (3 marks) 21 • Features. ( 3 marks) o Features are appropriate and suitable for the website. o Innovative. • Recommendation. (3 marks) High-fidelity prototype: • Interface adheres to HCI principles in does not break major HCI rules. (6 marks) • The final prototype sufficiently demonstrate the developer’s skills in web development tools (i.e. HTML5 and CSS3 (or JavaScript, if appropriate)). Eg. webpages can be rendered to display elements to provide an idea of the overall design. (4 marks) • Final expert review. The instructor and/or marker will carry out a final usability and expert review of the website based on: o Overall interface design, e.g. the design is appropriate for intended users, and use of good metaphors. (3 marks) o Aesthetics, innovation, creativity, impression etc. (5 marks) o Walkthrough based on the walkthrough scenario you devised above. (2 marks) Presentation: • Report professionally presented. (2 marks) • Written style, expression and overall presentation. (2 marks) Total marks for Project B: 4 20 4 45 Marker’s Guideline • To obtain 76-100% of the marks allocated for a specific section of the assessment, the student’s work is expected to demonstrate a very high level of knowledge and understanding of concepts, facts and procedures, and application of knowledge within the scope of the course. • To obtain 51-75% of the marks allocated for a specific section of the assessment, the student’s work typically demonstrate a high level of knowledge and understanding of concepts, facts and procedures, and application of knowledge within the scope of the course. • To obtain 26-50% of the marks allocated for a specific section of the assessment, the student’s work typically demonstrate a sound level of knowledge and understanding of concepts, facts and procedures, and application of knowledge within the scope of the course. • To obtain 1-25% of the marks allocated for a specific section of the assessment, the student’s work typically demonstrate a limited level of knowledge and understanding of concepts, facts and procedures, and application of knowledge within the scope of the course. • 0 marks will be allocated for a specific section of the assessment, where an erroneous or no attempt has been made by the student. --- End --- 5 Running head: HUMAN COMPUTER INTERACTION (HCI) PROJECT REPORT 1. Introduction This project is undertaken to design and develop a website for “Flying Hobbies” company to help it provide the right information to customers who want to visit its shop. It will enable the company achieves one of its main goals of giving the customers a general overview of the shop layout and also find details of items available from the shop. The website will not be an online shopping shop but an information website that will provide information to customers who want to visit the shop in person. 1.1 Purpose The purpose of this document is to provide an overall description of the Project. It includes what was done in each step. In addition, this document will also describe the work experience gained from this project. The whole description of the design phase will be included in the document. 1.2 Objective In addition to adding programming skills to the students. The main objective of this project is to help the students adopt and adhere to the best practices of HCI principles. To enhance this, the project gives the students a chance to learn and use HCI principles during their process of designing and developing interactive user interfaces. The final deliverable will be in the form of a prototype and not a fully functional website that has both the front and backend. For this case, the project only concentrates on the front end which must adhere to HCI principles for it to add value to the company. This was the give the students a great HUMAN COMPUTER INTERACTION (HCI) PROJECT REPORT experience of working with prototypes which are easier to change unlike the changing the whole project. 2. Content Task analysis is one of the most important methods brought by professionals to test the usability of an application. It involves performing steps aimed at accomplishing a certain goal. This method decomposes people’s tasks and makes them understand their procedures better and enables them to receive computer help for their task. For this case, a task analysis was conducted using different types of potential users i.e. users with mixed computer skills (little, intermediate, and advanced skills). The main aim was to test how different users will be doing their task using the interface. The method used for this task was direct observation, to determine how different people will be interacting with the interface. The main goal of this analysis was to observe ease of users between the web pages and search for information. Below were some of the sub-goals: 1. Give the customers an overview of the shop layout 2. Allow the customers to find details of items in the shop including a. Quadcopter b. Toy Planes c. Kites 3. Allow the user to find information about the opening and closing hours of the shop. 4. And finally, provide easy navigation for the user to move to any page regardless of where are on the website. View information about Flying Hobbies shop Open the website HUMAN COMPUTER INTERACTION (HCI) PROJECT REPORT The above diagram was drawn to show the flow of information in the website between different pages. This diagram shows how the tasks will be made easier for the users in that one will just need to click one button/link to be taken to the required information. The user will not have to navigate through several links to find information. The vertical navigation bar will be used at the top of the website where the user just needs to click on a link that will take them to information related to that link. Each link will be labeled as per the information it provides. With all these, the website will be very easy and simple to use for all types of users regardless of their levels of computer skills, age, or language skills. It will require only the user to be able to read and click on links. Also, the website will eliminate unnecessary information as much as possible as a way of reducing complexity and improving usability, accessibility, in that, users will only be provided with the information they need (Yablonski, 2015). Proposed design and system requirements a. Vertical navigation for ease navigation between web pages b. Screen size: height(automatic), width (75%). This will ensure that information occupies much of the screen space hence eliminating unnecessary blank spaces (Yablonski, 2015). c. Colors used: light-green background color for the navigation and footer and light-blue background color for the header. Both will use white font colors which ensures the visibility of information is not affected (O'GRADY, 2015). In the content page where images and their descriptions will be used, a white background color and black font color HUMAN COMPUTER INTERACTION (HCI) PROJECT REPORT hence ensuring all the information is visible at ease even to those users with short eye sights/visions such as the old aged people. d. The Number of items to display: the items displayed per page is one image. For pages with multiple images, the users will be scrolling down to view each image after the other. This ensures that all the images are large enough for users to view without straining their eyes. e. Visibility on browsers: the target browsers are Mozilla, Google Chrome, Opera, and Safari browser. The website will contain a maximum of four pages and three sublevels. Below is my design storyboard to illustrate the proposed design of the website. Homepage HUMAN COMPUTER INTERACTION (HCI) PROJECT REPORT Quadcopters page Toy Planes Page HUMAN COMPUTER INTERACTION (HCI) PROJECT REPORT Kites Page Business Hours page HUMAN COMPUTER INTERACTION (HCI) PROJECT REPORT 3. Recommendation Having analyzed all the researched information and users’ feedbacks, I would recommend using a simple website with non-framed pages, images, navigation bar with roll effects and sliding images using JavaScript or jQuery technology. In addition, all the controls i.e. font – size colors should be done using Cascading Style Sheet so as to obtain a consistent look and feel website. 4. Conclusion With the rapid growth of Web development and websites demand, it is essential to always come up with a good page design for your website. Creating a bad design on your website will have many negative impacts including loss of visitors which can result in loss of business (Metz, 2017). Therefore, each website is expected to have a good page layout which will meet the basic requirements of a good page design. This includes the organization of fonts, color contrasts, font selections, page size, styles of a page, consistency, and graphics HUMAN COMPUTER INTERACTION (HCI) PROJECT REPORT used. It is always important to identify the audience so as to analyze their needs on the website (Gaines, 2017). Though it is very difficult to come up with a web design that will be suitable for all the users, it is good to have a design that will be appropriate for the most audience. Adhering to HCI design principles will result in good page designs that will bring more hits to the website as a result of increased accessibility and hence increasing the business profits. References Danino, N. (2011). Human-Computer Interaction and Your Site. Retrieved from sitepoint: https://www.sitepoint.com/computer-interaction-site/ Gaines, K. (2017). Designing for Your Target Audience . Retrieved from webdesignerdepot: https://www.webdesignerdepot.com/2011/12/designing-for-your-target-audience/ Metz, T. (2017). The Real Effects Of Bad Web Design. Retrieved from usabilitygeek: https://usabilitygeek.com/real-effects-bad-web-design/ O'GRADY, N. (2015). Web design 101: color theory. Retrieved from webflow: https://webflow.com/blog/web-design-101-color-theory Yablonski, J. (2015). Reducing Design Complexity. Retrieved from jonyablonski: https://jonyablonski.com/articles/2016/reducing-design-complexity/ COIS 12036 PROJECT A - Marking Sheet v2 Task as Documented in report: 1. Overview and description. (2 marks) 2. User and task analysis are appropriate and sufficiently in-depth. o User and task analysis are appropriate and sufficiently in-depth. That is, present your evidence that this task have been carried out. (6 marks) 3. Design and system requirements. o Present your evidence that this task have been carried out. E.g. Different designs have been considered or mentioned; analysis and evaluation of data are presented, etc. (6 marks) 4. User Testing and Feedback. o Present your evidence that this task have been carried out. E.g. Users were involved; analysis and evaluation of data are presented, etc. 5. Recommendation as a result of the above tests and results. (6 marks) (3 marks) Marker comments (or see in-text comments): User Testing and Feedback. Not done Low-fidelity prototype: 1. Adheres to HCI principles in general and doesn't break major HCI rules. 2. The prototype sufficiently demonstrates the main features of the initial design and its intended purpose. Marker comments (or see in-text comments): (4 marks) (4 marks) Presentation: 1. Report professionally presented. 2. Written style, expression and overall presentation. Marker comments (or see in-text comments): Summary / Overall Comments: End of Marksheet - COIS 12036 (2 marks) (2 marks) Item Marks 1.50 3.00 4.00 0.50 1.50 Section Total: 10.50 (out of 23 marks) 4.00 4.00 Section Total: 8.00 (out of 8 marks) 1.50 1.50 Section Total: All Sect. Total: Penalty: Final Total: 3.00 (out of 4 marks) 21.50 0.00 ----→ 21.50 (out of 35 marks) Reason: COIS 12036 - Project B Marking Sheet Student name: Student number: Campus: Required only if the filename of this marking sheet does not show the student's name or ID number. Task as Documented in report: 1. Overview and description. (2 marks) 2. User acceptance test are appropriate and sufficiently in-depth. o Walkthrough scenarios are appropriate and sufficiently complex. o Results for the test user performance. o Evidence that this task have been carried out with users. E.g. analysis and evaluation of data are presented, etc. (3 marks) (1 mark) (6 marks) (3 marks) 3. Features. o Evidence that features works as described. o Innovative. (3 marks) 4. Recommendation. (3 marks) Marker comments (or see in-text comments): High-fidelity prototype: 1. Interface adheres to HCI principles in does not break major HCI rules. 2. The final prototype sufficiently demonstrate the developer’s skills in web development tools (i.e. HTML5, CSS3 and JavaScript). 3. Final usability and expert review. The instructor and/or marker will carry out a final usability and expert review of the website based on: o Overall interface design, e.g. the design is appropriate for intended users, and use of good metaphors. o Aesthetics, innovation, creativity, impression etc. o Walkthrough based on the walkthrough scenario you devised. Marker comments (or see in-text comments): (6 marks) (4 marks) (3 marks) (5 marks) (2 marks) Presentation: 1. Report professionally presented. 2. Written style, expression and overall presentation. Marker comments (or see in-text comments): Summary / Overall Comments: End of Marksheet - COIS 12036 (2 mark) (2 mark) filename of this marking sheet student's name or ID number. Item Marks 0.00 0.00 0.00 0.00 0.00 0.00 0.00 Section Total: 0.00 (out of 21 marks) 0.00 0.00 0.00 0.00 0.00 Section Total: 0.00 (out of 20 marks) 0.00 0.00 Section Total: 0.00 (out of 4 marks) All Sect. Total: 0.00 Penalty: 0.00 Final Total: 0.00 (out of 45 marks) ----→ Reason:
Purchase answer to see full attachment
User generated content is uploaded by users for the purposes of learning and should be used following Studypool's honor code & terms of service.

Explanation & Answer

Hello buddy! Here is the final work for review. I have also attached a copy of the test case if you want to reference to it. In case of any rectifications you would like made, feel free to contact me. Thank you!!😊

Project Name: Flying Hobbies
User Acceptance Test
Test Priority (Low/Medium/High): Med

Test Designed by:

Module Name: Flying Hobbies website

Test Designed date: May 16th, 2018

Test Title: Ensuring there are no broken links

Test Executed by:

Description: Test the Flying Hobbies web pages

Test Execution date: May 25, 2018

Pre-conditions: User has to have access to chrome web browser

Test Case
ID
UAT01

UAT02

Test Steps

Expected Result

Actual Result

1. Go to homepage
2. Click the Quadcopters navigation
tab
3. Mouse-hover over one of the
quadcopter drones
4. Navigate to the Toy Planes section
5. Mouse-hover over one of the toy
planes
6. Navigate to the kites section
7. Mouse-hover over one of the kites
8. Navigate to the business page
9. Navigate to homepage

1. All navigations
work perfectly.
2. Description of the
element upon
mouse-hover
3. Interface is easy to
use
4. Interface is
appealing.

1.

All navigations work
perfectly.
2. Description of the
element upon mousehover
3. Interface is easy to use
4. Interface is fairly
appealing.

1. Go to homepage
2. Click the Quadcopters navigation
tab
3. Mouse-hover over one of the
quadcopter drones
4. Navigate to the Toy Planes section
5. Mouse-hover over one of the toy
planes
6. Navigate to the kites section
7. Mouse-hover over one of the kites
8. Navigate to the business page

1. All navigations
work perfectly.
2. Description of the
element upon
mouse-hover
3. Interface is easy to
use
4. Interface is
appealing.

1. All navigations ...


Anonymous
Goes above and beyond expectations!

Studypool
4.7
Trustpilot
4.5
Sitejabber
4.4

Related Tags