COIS 12036 Human Computer Interaction (HCI) - Information Technology Assessment Answers

Information Technology Assignment Help

Background

The Global Toys, Games & Cards (GTGC), is a wholesaler of entertainment products. They have contracted you to develop a website to provide information regarding their shop outlet. You have been provided with the following initial process and technical specifications:

Project A: 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 B.

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

• Carry out user and task analysis. You must have a clear view of the users of this system. Consider that not everyone is comfortable with the technology. For example, you need to deal with user variation such as age or language skills. Perform a user analysis, i.e. characterise the users and identify your potential users. Clearly identify the tasks the potential users perform, and in what order. These are all HCI considerations that you should take into account.
• Propose design and system requirements. Consolidate your findings from your user and task analysis with the given specifications into a design and system requirements. For example, the number of items to display, the screen size, what colours, how many different screens to display etc.
• Develop a low-fidelity prototype. Based on the requirements, develop a preliminary design of the specified web user interface. Use any combination of HTML5 and CSS3. At this stage, the prototype is basically a medium to support your initial concept and ideas. For example, the prototype should show where the ‘basic’ button is located; or would it be possible to fit 20 images aesthetically on a single page, etc? The prototype need not

  be fully functional. At this stage, you only need to demonstrate the initial concept of your interface designs. 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, exclude mobile devices that run 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. You need to develop the website from scratch.

• Obtain user feedback. Invite 3 – 4 potential users (e.g. friends, family members,classmates, etc.) to provide you with feedback of your prototype (i.e. the initial draft design). These potential users should be a mix of person with computer skills and with little computer skills, so you can get more representative feedback. You should not approach this task haphazardly. Use a suitable data collection method (e.g. questionnaire, survey).
• Recommendation. Analyse the data you have collected from the previous user

  evaluation and produce a set of recommendation on how you should refine and 4 improve on your initial design. This recommendation will be carried over to the next phase in Project B for implementation.

• Write a report. Produce a report to document the tasks and the outcome of your efforts undertaken for Project A.

  • 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 Lego section, look up two items, exit and select Playing Cards section and look up four 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. 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.

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 Lego section, look up two items, exit and select Playing Cards section and look up four 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. 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.

• 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.

Project A: Task

1. Introduction:

The main purpose of the report is to identify and attract the users, who are interested for visiting the shops, The Global Toys, Games & Cards (GTGC). The design of the main.html (Home page) is very simple so that the users can easily understand about the shops. The details layout of the shop, the different product sections and opening hours for the shop are displayed. Users can click on the links of different product sections like Board Games, Playing Cards and Lego Model then automatically displayed the corresponding product images which are available on the shop. Even, the user is able to see the opening hours of the shop by clicking on a button named, opening hours. The opening hours are displayed in a pop-up window of the same page.

The design uses a low-fidelity prototype, so the non-technical users can also be able to visit the website and take an interest about the shop.

The report is to analysis the users and their feedback about the initial prototype. After collecting the data of different users (technical and non-technical), a suitable recommendation is achieved for better design.

(2) Content:

The various stages and outcomes of the activities are described in the following ways,-

1. Carry out user and task analysis: To analysis the different users for the system, mainly three indicators are considered such as Age, Language Skills and technical skills. A sample study for users under different Age distribution is obtained as follows,-

Table 1: Age of the Respondents

Another study for user variation as Language skills is obtained as follows,-

Table 2: Language known

A different study for user variation as Computer skills is obtained as follows,-

Table 3: Technology Proficient

The potential users for the system are age group of 5 to 40 and natural language (English) is known by them as well as who have computer skills.

The different HCI (Human Computer interaction) considerations are taken as natural-language interfaces, form-fill up interfaces; graphical user interfaces (GUIs), command-language interfaces, question-and-answer interfaces, menus etc.

The proposed interface will be presented as a GUI and potential users are also able to interact with the interface easily. The different sections of the pages will be clearly presented. By taking consideration of different types of users, the choice of icons, hyperlinks and language will be presented. So, the design will be a clear-cut view to the potential users. This design will be very user-friendly for web-base application. After launching the website, the user first views the different sections of items then they are also able to see the operating hours for the shop as well as floor plan of the shop.

1. Propose design and system requirements:

To design the system, the goal-driven approaches are considered. Because, the Goal-Based Requirements Analysis Method is very justifiable for identifying the goals that the system must meet as well as converting the goals into operational requirements. The main goal for the system is to attract the different types of users irrespective of their computer skills. So, the design will be very simple and GUI based. The natural language, English will be used to develop the system as most of the users are both comfortable and familiar of that.

The design of the webpage should use the low-fidelity prototype. The design will make by HTML5 and CSS3. It will be compatible with Mozilla Firefox, Chrome and Opera browsers. As per the specifications of the system, the following considerations should be taken,-

• The webpage will be divided into three main sections, top, left and right parts.
• The Logo of the Company and the Welcome message (as marquee) will display at the top of the page.
• The three different items like Board Games, Playing Cards and Lego Models will show at the left panel of the webpage by yellow rectangular boxes. These boxes are designed by CSS3.
• The different hyperlinks for each item will be constructed. So, after clicking these items, users will be able to see the images and names of corresponding products in different WebPages.
• At the bottom of the rectangular boxes, a button will be located as Opening Hours. After clicking the button, the users will be able to view the opening hours of the shop in a pop-up window of the same page.
• The right part of the webpage will display the Floor Plan of the shop so the users can easily visit the shop.
• The background color of the main.html page will take as Green which will be attractive for users.

1. Obtain user feedback:

The proposed design is implemented by HTML5 and CSS3. It successfully runs at Mozilla Firefox, Chrome and Opera browsers. Before launching the website, the feedbacks for the prototype design of some potential users are invited. The chosen users are mainly the family members, classmates and friends. A sample feedback in the form of Questionnaire are as follows,-

Questionnaire:

1. WHAT IS YOUR AGE? (Please Tick)

1. 5-12 years
2. 13-40 years
3. Above 40 years

1. WHAT IS YOUR QUALIFICATION? (Please Tick)

1. SSC
2. HSC
3. Undergraduate
4. Graduate
5. Postgraduate/Diploma

1. DO YOU KNOW BASIC COMPUTER AND INTERNET? (Please Tick)

Yes ( ) No ( ) Very Little ( )

1. ARE YOU COMFORTABLE WITH THIS DESIGN? (Please Tick)

Yes ( ) No ( )

1. YOUR OPINION ABOUT INTERFACING WITH SYSTEM.

• System approached to Users.
• Users approached to system.

6. ARE YOU SATISFIED WITH THE SYSTEM DESIGN AS PER REQUIREMENTS?

• Satisfied.
• Not satisfied
• Not responding

7. HOW WOULD YOU RATE THE PROTYTYPE DESIGN?

• Rigid plans.
• Non-user friendly.
• Un-satisfactory service
• Satisfactory.
• Very Good.

8.. ARE YOU PLANNING TO VISIT THE SHOP AFTER VIEWING THE WEBSIT? (Please Tick)

Planning ( ) Not planning. ( )

A suitable survey form for taking the feedback of the prototype design is as follows,- (Please Tick appropriate box as per your choice.)

After taking the feedback of 3 different users by questionnaire, the data is as follows,-

After taking the feedback of 3 different users by survey, the data is as follows,-

(3) Recommendation:

By reviewing the feedbacks of 6 different users, it is observed that the above low-fidelity prototype design has lack of user interaction rather than flat information. The design of the website and display of the products are not so attractive to the users. Mainly, the computer skilled people are not satisfied with this design at all. From the survey, it is found that 65% people know the computer fully or little. So, the design should be modified.

I recommend that the prototype design should be implemented as high-fidelity prototype. Because, it has visual and interactive specification and different design elements like margins, compatible screen resolution, font consistency, content formatting, consistent leading space and even user friendly navigational menu bar. The improvement of the design is visual refinement, breadth and depth of functionality and richness of interactivity and data model.

(4) Conclusion:

The prototype is designed as low-fidelity. The design is the simplest one so most of the users can take a view about the shop, Global Toys, Games & Cards (GTGC). The website shows all necessary information about the shop like different products with images, operating hours of the shop and the floor layout of the shop. From the feedback, it is found that the information is well presented but the website design; product display, screen resolution, consistent leading space, user interaction etc. are not satisfied with this design. So, the design improvement should be taken as a high-fidelity prototype design.

Project B: Task

1. Introduction:

The main purpose of the report is to present the different items with their images along with opening hours of the shop with a straight forward manner in a single webpage. The design will be attractive and have vertical menu that forwards the users to a particular section to visit. When users click the menu of a particular section like Board Games or Playing Cards or Lego Model then automatically forward to the corresponding section with product images which are available on the shop. The home page (main.html) also displays the opening hours of the shop.

The design overcomes the problems of low-fidelity prototype and uses a high-fidelity prototype, so the technical and non-technical users can interact with the website and take an interest about the shop.

The report is to study the user’s acceptance test and to take the decision about further improvement of this prototype design based on user’s feedback.

(2) Content:

The design principles of the webpage are accepted in the following ways,-

• The website is divided into three main sections, header part, article section and footer part.
• The head part consists of the Logo, Welcome message, vertical menu for three categories of product and displayed message about opening hours of the shop. These designs are done by HTML5 and CSS3.
• Article section contains three article ids for three categories of product. Each article id presents the corresponding details product images with names. After each article section, a black line (designed with CSS3) with one TOP link is given which forwards the user to the header page. So, when user clicks on the menu for a product, its corresponding article section is visited and after clicking the TOP link below the article, the header part is reached.
• The footer part displays the Copyright Notice for the shop. Another TOP link is given below the footer part.

The above website is implemented by HTML5 and CSS3. It successfully runs at Mozilla Firefox, Chrome and Opera browsers.

The user interface design principle is implemented as a GUI (Graphical User interface) where different icons, menu, background color, hyperlinks and images are presented in a well-defined manner. The technical as well as non-technical users can interact with the system easily. The whole information about the shop is available in a single page. The requirement of the website is to present only information about shop so; this menu-based design will be interactive and attractive to the users.

(3) User acceptance test:

The following types of test cases are constructed to take feedbacks from different potential users,-

Test Cases:

From the above test cases and users’ feedbacks, the parameters are taken as follows,-

(4) Features:

The most attractive feature is using menu for three different product categories. The three different product categories like Board Games, Playing Cards and Lego Models are shown as Vertical Menu at the top of the page. When user clicks on a Menu, its corresponding item images are displayed at the same page (in the bottom side). After visiting the product details, the user can also go to the top of the page i.e. in the main menu by clicking on the “TOP” link. This feature reduces the overhead of multiple WebPages and users are able to visit all information in a single page. I think this is an innovative feature which attracts the users.

(5) Recommendation:

By reviewing the feedbacks of different potential users and designed test cases, it is observed that the above high-fidelity prototype design also has some drawbacks. Firstly, if the user wants to visit 3-4 items of a particular product category, the design shows all items. So, the design should be improved as per user’s choice. The item description with its images should be shown in the same page. This is not done in the above design, so the non-technical persons can take long time to complete each scenario.

I recommend that the above high-fidelity prototype design should be schedule constraints, user driven rather than system driven and more interactive.

(6) Conclusion:

The above prototype is designed as high-fidelity. The design is made in simple menu based and all information is shown at the home page. So, it reduces the overhead of multiple WebPages. The system will be very fast and take little time to load. But, from the test cases and feedback, it is observed that, users cannot get information as per their choice. The design shows all information in a flat way. The user interaction is also minimized, so the design should be improved according to user driven.