COMP3511/9511 – Human Computer Interaction Assignment 1 1 COMP3511/9511 Human Computer Interaction Assignment 1 Term 2, 2022 User Interface Critique Concepts DUE: Saturday, Jun 25th at 18:00 (Week 4) A Turnitin submission link will be made available on Moodle prior to the due date. As you submit, your assignment will be passed through a plagiarism check. If there are any issues, you can re-submit the assignment and a new plagiarism report will be generated. PLEASE NOTE THAT FOR SECOND AND SUBSEQUENT SUBMISSIONS, IT CAN TAKE UP TO 24 HOURS TO GENERATE THE PLAGIARISM REPORT, SO DO NOT LEAVE THIS TO THE LAST MINUTE! COMP3511/9511 – Human Computer Interaction Assignment 1 2 Introduction In this assignment, you will use the content that is presented in Week 1 and Week 2 lectures (Design Principles, Visual Design, and Accessibility) and the first lecture of Week 3 (Stakeholders, Persona, and Scenario) to critically analyse the user interface of a video game distribution service website. This document is for both undergraduate students enrolled in COMP3511, and postgraduate students enrolled in COMP9511. Assessment Please ensure you read the following carefully, as there is important information regarding how you are to submit the assignment. ● The assignment constitutes 25% of your final assessment. ● This assignment is to be completed individually. ● A late penalty of 10% will be deducted (off the raw mark) per day (or part thereof) late. Assignments more than 4 days late will not be marked. Assignments submitted after 18:00 on the due date will be marked as late. Submission The assignment is to be submitted electronically through Moodle as a PDF. The assignment is due and to be submitted online (using the provided link) in week 4, Saturday, Jun 25th at 18:00. IMPORTANT NOTE: In the final hours or so before the submission deadline, Moodle often experiences a high load as students try to submit at once. A late submission because Moodle was overloaded is not a valid excuse. Upload earlier! Uploading your assignment earlier will also give you a chance to make any necessary changes to your work if plagiarism is detected by the plagiarism checker upon submission. User Interface Critique In designing a user interface, the best approach is to perform an iterative review and refinement based on feedback from your users. This model is applied through all the stages of development. Before you start the process of designing an interface, however, it is important to know what characteristics or principles a website should adhere to. It is important to be able to critique what makes a website good or bad, without simply stating that you do or do not like it. The critique should allude to formal user interface principles and theories and should not just be based on your own ideas. The process of providing a critique involves not just stating negative aspects of the interface, but also the good. The point of critiquing is to provide fixes or improvements to the problems encountered, using formal principles and methods. In the first COMP3511/COMP9511 Assignment, you are expected to learn how to critique a user interface. COMP3511/9511 – Human Computer Interaction Assignment 1 3 The following presents a list of steps that you need to follow to complete the assignment. Please set out your work clearly in a report-based format. 1. In this assignment, you will analyse one video game digital distribution service website. You can analyse one of the websites below: a. Steam (https://store.steampowered.com/) b. Crazy Games (https://www.crazygames.com/) c. Gog (https://www.gog.com/) d. Humble (https://www.humblebundle.com/store) e. Itch (Itch.io.) f. Green Man Gaming (https://www.greenmangaming.com) g. Epic Games Store (https://store.epicgames.com) h. Ubi Soft (https://store.ubi.com/) i. Fanatical (https://www.fanatical.com/) • You can analyse the whole website or just some specific pages. • Please make sure you review a website in the English language. 2. After choosing the website, you should provide a brief explanation of the purpose of the website and state three goals of the selected website. 3. “Users” - Who do you think would use this website? Give examples of FIVE different types of people that would use this website. Try to come up with different types of people (who may have differing needs – are they primary, secondary, or tertiary stakeholders?)! Give a brief description of each of these stakeholders (2-3 lines for each stakeholder). 4. “Tasks” - Choose TWO users from your list above, and analyse what it is each of those people are trying to accomplish when they use this website? For each one of the two people that you identified above, please describe a function or task that they are trying to achieve when they use your selected site. You can also mention the users’ broader goals. Try to choose tasks that differ to give the best possible overview of your chosen interface. In one paragraph explain why you have chosen these particular users and their tasks. Now, you will conduct a “WALKTHROUGH” of your chosen website using the tasks that you have come up with in Step 3. You do not need to write down the series of steps of the walkthrough, you just need to be aware of any issues that were encountered in the process. 5. “Analysis of the Design Principles” - As you do your walkthrough of the interface, note down any issues you are having or any positive aspects of the interface in an issues table (see Appendix B). Then choose SEVEN issues from your issues table and IN DETAIL provide a critique of the issues and potential solutions to solve the issue. Your COMP3511/9511 – Human Computer Interaction Assignment 1 4 critique is based on Design Principles, Heuristics, Usability Goals and User Experience Goals found in Appendix A. For your issues table, please use Appendix B – a template provided for you to record the issues. Please consider the points below in your analysis: a. In your issue table, you should try to list as many usability issues as you can, including both positive and negative issues. b. Number each of the issues that you discovered in your walkthrough. The issues table will consist of an Issue Number, Positive/Negative, Severity rating of each issue, Description of Issue, Heuristic/Design Principle that applies to each issue, Effects of each issue on the usability goals and the user experience goals, Sketch/Screenshot of the issue with annotation that explains the issue visually (You should annotate your screenshots to make it clear where the issue presents itself). As you go, link your observations to the design principles, and heuristics principles and indicate how the lack of or the existence of each principle could affect the usability goals and consequently user experience goals. For example, if the links text colour is completely different in different pages of the website, it is an example of lack of consistency which is related to the design principal category, lack of consistency can affect learnability which is related to usability goals, and it can make the website annoying or frustrating which is related to the user experience goals. You can find this example in appendix B. c. Please consider that each issue can be related to more than one design or the heuristic principle. d. You must consider both positive and negative observations. e. You should take screenshots and point out specific features on the screenshots by annotating the screenshots. We strongly encourage you to take regular screenshots as the websites are live and can change without notice. Pictures below show some examples of annotated screenshots: COMP3511/9511 – Human Computer Interaction Assignment 1 5 f. Now using your issues table, choose SEVEN issues from your issues table and IN DETAIL provide a critique of the issues and potential solutions to solve the issue. For example, if you have 20 issues in your issue table, choose the Seven most important issues and explain them in detail. g. You should explain each issue based on the design principles, the heuristics principles, or a combination of both, then mention why and lack of or existence of each issue could increase or decrease the usability goals and consequently the user experience goals. h. You should also define the principles the first time you use them (make sure to reference where you got the definition from. HINT: Read the textbook). i. Your critical analysis should have enough detail. For instance, it is not enough to just mention “the arrangement of buttons provides a poor mapping.” You must be able to justify each of your points in detail. 6. “Analysis of the Visual Design” - In this section you should analyse the chosen website based on different visual design elements. Consider the visual design of the website in terms of: - Proximity of elements to create groups - Proximity of elements to create relationships - Use of symmetry or asymmetry - Use of white space - Use of colour harmony - what colours are used and what scheme is this? Is colour used effectively? COMP3511/9511 – Human Computer Interaction Assignment 1 6 - Colour contrast - Alignment of the components - Placement of the elements to support logical flow through a task - … * Provide some screenshots for this section, it is not necessary to provide one screenshot for each visual design issue. If one screenshot can cover different visual design issues, just annotate the issues on the screenshot. 7. “Analysis of Accessibility” - In this section you will analyse the website in terms of the accessibility for people with different kinds of disabilities including vision impairment, colour blindness, hearing impairment, etc. You should analyse the website limitations for users with a disability and explain any specific accessibility features that the website provides. * You don't need to provide any screenshot for the accessibility section. 8. “Propose and sketch design solutions” - Looking at the issues related to the design principles, visual design and accessibility and explain and sketch 14 potential solutions (7 sketches related to the usability issues, 4 sketches related to the visual design principles, and 3 sketches related to the accessibility considerations) to these issues that you think may improve the interface. Please annotate the sketch of your solution with what you have changed and explain how it has improved the interface or removed the issue you have found. There is a 21 page limit to this assignment with line spacing 1.5 for the content and line spacing 1.0 or 1.5 for the tables and references. Please do not exceed the limit. The following should be used as an overall guide for structuring your report: A. Title Page, stating title of your assignment, your name, student number and the name of your tutor – THIS IS NOT INCLUDED IN YOUR PAGE LIMIT B. INTERFACE (0.5 page) C. USERS (1 paragraph, up to 0.5 page) D. TASKS related to TWO of the above users and justification of why you chose each of the above users/tasks (0.5 page) E. ISSUES TABLE (including Annotated Screenshots) (3-4 pages). F. Analysis of the 7 design issues (3-4 pages). G. Analysis of the visual design (2-3 pages). H. Analysis of the accessibility (2 pages). I. Design solutions and sketch of the solutions (5-6 pages) – each sketch must be at least 1/3 a page for readability J. References - Your references can either be part of your page limit or can be outside of this. Note to the above: The number of pages above are guidelines and suggested maximums for each section. You do not need to fill the suggested space. The maximum for the report is 21 pages in total, please note that the title page does not contribute to this page COMP3511/9511 – Human Computer Interaction Assignment 1 7 limit. Your work is evaluated based on your depth of analysis and accuracy of your answers. Therefore, if the number of pages is less than 21, it cannot affect your mark given you covered all the requested items of the assignment. Formatting Please read the following carefully, as there are marks allocated for your formatting and presentation. ● The report should be presented in an A4 document. ● 12-point font should be used for the main body of text. ● The report, excluding the cover pages, must be a maximum of 21 pages with 1.5 line spacing. ● Consider including the following: (HINT: Use this as a checklist) o Page numbers o Headers/Footers on each page o Consistent font sizes (e.g., Use the same font size for all headings) o Use 1.5 line spacing o Correct use of paragraphs o Use of the spell checker and grammar checker o Correct use of professional referencing techniques in both the body of the text as well as including a full list of references at the end. For more details about how to reference within a report, please use the following resource: https://student.unsw.edu.au/harvard-referencing. You may use other formats of referencing (e.g. APA or IEEE) if you are consistent. o Include your personal details such as name, student number, tutorial time, and tutor on the title page. It is our experience that many CSE students who study HCI go on to work in design and UI work, where reporting is highly regarded. You must take pride in your reports and make them presentable. They are easy marks you cannot afford to lose. Learning Outcomes • Apply your understanding of the heuristics and design principles to formally evaluate the usability and user experience goals of an interface. • Evaluate the visual design of a website. • Apply your knowledge of accessibility to evaluate the accessibility limitations of a website. • Identify both positive and negative aspects of design. • Understand how the design of a system is influenced by the intended audience. • Consider accessibility issues. • To understand the practical issues of real-world interface design and evaluation. COMP3511/9511 – Human Computer Interaction Assignment 1 8 Plagiarism If plagiarism is detected a maximum penalty of zero marks will be awarded for this assignment. Note that all cases of plagiarism are reported to the School Plagiarism officer. All assignments are run though a plagiarism checker so it would be ill advised to copy and paste either from the web, or from another student. Assignments are checked against a database of past and present submissions, along with online websites and other resources. What is Plagiarism? Plagiarism is the presentation of the thoughts or work of another as one’s own. * Examples include: • direct duplication of the thoughts or work of another, including by copying material, ideas or concepts from a book, article, report, or other written document (whether published or unpublished), composition, artwork, design, drawing, circuitry, computer program or software, web site, Internet, other electronic resource, or another person’s assignment without appropriate acknowledgement. • paraphrasing another person’s work with very minor changes keeping the meaning, form and/or progression of ideas of the original. • piecing together sections of the work of others into a new whole. • presenting an assessment item as independent work when it has been produced in whole or part in collusion with other people, for example, another student or a tutor; and • claiming credit for a proportion a work contributed to a group assessment item that is greater than that actually contributed. For the purposes of this policy, submitting an assessment item that has already been submitted for academic credit elsewhere may be considered plagiarism. Knowingly permitting your work to be copied by another student may also be considered to be plagiarism. Note that an assessment item produced in oral, not written, form, or involving live presentation, may similarly contain plagiarised material. The inclusion of the thoughts or work of another with attribution appropriate to the academic discipline does not amount to plagiarism. The Learning Centre website is main repository for resources for staff and students on plagiarism and academic honesty. These resources can be located via: https://student.unsw.edu.au/plagiarism The Learning Centre also provides substantial educational written materials, workshops, and tutorials to aid students, for example, in: • correct referencing practices. • paraphrasing, summarising, essay writing, and time management. • appropriate use of, and attribution for, a range of materials including text, images, COMP3511/9511 – Human Computer Interaction Assignment 1 9 formulae, and concepts. • Individual assistance is available on request from The Learning Centre. Students are also reminded that careful time management is an important part of study and one of the identified causes of plagiarism is poor time management. Students should allow sufficient time for research, drafting, and the proper referencing of sources in preparing all assessment items. * Based on that proposed to the University of Newcastle by the St James Ethics Centre. Used with kind permission from the University of Newcastle Adapted with kind permission from the University of Melbourne. COMP3511/9511 – Human Computer Interaction Assignment 1 10 Appendix A Design Principles Heuristics Usability Goals Some User Experience Goals Structure and layout Match between system and the real world Effectiveness Satisfying Affordance User Control and Freedom Efficiency Enjoyable Visibility Consistency and Standards Safety Fun Feedback Help users recognise, diagnose and recover from errors Utility Entertaining Constraints Error Prevention Learnability Helpful Mapping Recognition rather than recall Memorability Motivating Consistency Flexibility and Efficiency of Use Aesthetically pleasing Aesthetic and minimalist design Frustrating Help and Documentation Boring Visibility of System Status Rewarding Annoying You can find detailed definitions of these design principles, user experience goals, usability goals and heuristics in your textbook (Sharp et al., 2019): • For Design Principles: Section 1.7.3 (p26-32) in Interaction Design (Sharp et al., 2019) • For Use Experience Goals: Table 1.1 (p22) in Interaction Design (Sharp et al., 2019) • More information on User experience goals, Section 1.7.2 (p22-26) in Interaction Design (Sharp et al., 2019) • For Usability Goals: Section 1.7.1 (p19-22) in Interaction Design (Sharp et al., 2019) • For Heuristics: section 16.2.1 (p550-560) in Interaction Design (Sharp et al., 2019) • Accessibility and Inclusiveness 1.6 (p17-18) in Interaction Design (Sharp et al., 2019) • Also, review Week 1 lectures (Design Principles), Week 2 lectures (Visual Design, and Accessibility) and the first lecture of Week 3 (Stakeholders, Persona and Scenario) COMP3511/9511 – Human Computer Interaction Assignment 1 11 Appendix B Please use the following Issues Table format to present the issues you have found in your selected website Issue table Reference Severity +/- Principle Description Effects on the usability goals Effects on the user experience goals Screenshot 1 3 Negative Consistency (Design Principles) The link text colours are completely different in different pages of the website which makes the user unsure if they provide the same function. Learnability and memorability Annoying frustrating 2 positive Match between system and the real world (Heuristics) The shopping cart icon is a trolley that is similar to a real-world trolley. This allows the user to connect the icon its function, purchasing their items. Learnability Helpful 3 positive Flexibility and Efficiency of Use (Heuristics) There is a quick purchase feature without the need to create a new account and login to the system preventing any unnecessary steps and streamlining the process. Efficiency Satisfying Helpful … • Reference: Choose how you would like to number or reference your issues • Severity: 0 = Not a usability issue (a technical bug) 1 = Cosmetic issue (fix if there is time) 2 = Minor issue (should fix) 3 = Major issue (must fix) 4 = Showstopper (cannot release until fixed) • +/-: Positive or negative, can use a + or a – to denote
欢迎咨询51作业君