coursework assessment human computer interface

Coursework Assessment

Human

Computer Interface

Semester 1

Human Computer Interface Semester 1 – 2021/2022

2

Table of Contents

1 Introduction ................................................................................................................................. 3

1.1 Description ............................................................................................................................ 3

1.2 Interface Requirements ........................................................................................................ 3

1.3 Implementation .................................................................................................................... 4

2 Submission Details ....................................................................................................................... 5

3 Feedback ...................................................................................................................................... 5

4 Assessment .................................................................................................................................. 6

4.1 Dividing up the Work Fairly .................................................................................................. 6

4.2 Marking Scheme ................................................................................................................... 6

4.3 Task Summary ....................................................................................................................... 7

5 Detailed Task Description ............................................................................................................ 8

5.2 Interface Requirements Capture ........................................................................................ 11

5.3 Report Writing .................................................................................................................... 11

5.4 Demonstrations of Prototypes ........................................................................................... 11

5.5 Questionnaire Design .......................................................................................................... 12

5.6 Honesty in your work .......................................................................................................... 12

Week 5 Demonstration Mark sheet ............................................................................................. 13

Week 10 Demonstration Mark sheet ........................................................................................... 14

Appendix 1: User Class Template ................................................................................................. 15

Appendix 2: Heuristic Evaluation Template ................................................................................. 16

2.1 Evaluation Details ............................................................................................................... 16

2.2 Heuristics ............................................................................................................................. 17

2.3 Evaluation ........................................................................................................................... 18

Appendix 3: Example Analysis of Heuristic Evaluation ................................................................. 20

Appendix 4: Usability Evaluation Template .................................................................................. 22


3

1 Introduction

The aim of this coursework is to design a standalone prototype of an application and implement it using web technologies.

This coursework will address the following learning outcomes

1. Apply techniques for gathering and analysing user requirements for interface design 2. Observe, model and describe aspects of the user’s behaviour at the interface 3. Design human computer interfaces using appropriate published guidelines 4. Specify, design and evaluate an interface with techniques that include formalmethods. 5. Design test to evaluate usability of a system 6. Apply self-awareness in evaluating their impact in team based work and utilise appropriate

communication and problem resolution strategies.

1.1 Description

Your group can decide what kind of system you would like to specify, but the most important thing is to keep it simple! You will be conducting an iterative design process, so the emphasis is on the design of the interfaces for each prototype as well as the evaluation techniques used. Please note that you will be required to evaluate another group’s work (using an evaluation designed by them) during the demonstration of the first and second prototypes.

You will be shown some examples in lectures of a similar process for designing familiar systems such as PIP and a calendar application, but there will be no attempt to design a full system, just some aspects of the functionality. The emphasis here is on the methodology.

1.2 Interface Requirements

• The interface should be quick and intuitive to use without prior training. • The interface should have minimal (or no) text entry. • The interface should be completely accessible to anyone.


4

1.3 Implementation

The interface is to be implemented using web technologies, for example Javascript and HTML. Your coding has to be sufficiently skilled to implement the prototype that you design. Remember that the assignment is primarily concerned with how well you use methods for developing a well-designed human-computer interface rather than the technical implementation details. Unlike other modules, we’re not primarily assessing your technical development skills, and you can, for example, use and adapt scripts from Javascript websites, provided that you give proper credit, thus avoiding plagiarism.

You can have any assistance that you like with the “how” of producing the interface: first consult the practical sheets to see if your query is covered there, otherwise, ask a practical tutor, or use online resources but make sure that you acknowledge any sources you have used. You must ensure that your site is viewable with either Chrome or Firefox (the versions available on the lab computers). If it matters which, state this in your report.

Please note: a web site refers to a whole suite of interconnecting web pages, whereas your application may use very few pages. The prototypes you are developing are not really for the usual kind of a web site; essentially you are developing a standalone application that just happens to be implemented using web technologies. This means being careful about what advice you use concerning on web site design, because some of it (particularly the bits concerning navigation) won’t be so relevant to your design. The design advice for GUI applications is more relevant to your work.

You may use CSS stylesheets if you are familiar with CSS, but please note that a lack of CSS is not an obstacle to producing the prototypes. In any case, separate stylesheets tend to be more useful for web sites rather than single web pages, anyway.


5

2 Submission Details

The submission points are given below. Demos will be conducted during classes. All submissions are via Student website. For the websites you have to submit all your files.

All students must be present for the demos in weeks 5 and 10 in order to be awarded marks for their demos and their evaluations of their opposite group’s system.

Week Submission Class Activity Files 5 Part 1 documentation

and first prototype Demo of first prototype Evaluation of opposite group’s first prototype

• Part 1 report • First prototype in

Pencil or similar

10 Second prototype Demo of second prototype Evaluation of opposite group’s second prototype

• Second prototype in Javascript/HTML

• NO report

12 Part 2 documentation and third prototype

• Part 2 report • Third prototype in

Javascript/HTML

3 Feedback

You will receive verbal formative feedback on Part 1 work when you demonstrate it in week 5.

The marks and written feedback for Part 1 will be given by the end of week 7. The summative feedback for the final submission will be available by the end of week 14.

In addition to feedback at submission points, formative feedback will be available every week in the practical class on the coursework tasks completed so far.


6

4 Assessment 4.1 Dividing up the Work Fairly

One of the first things you will need to do as a group is decide who does what. When you do this, bear in mind the marking scheme, and spread the workload evenly so that everyone is contributing work that will be worth a fair share of the total marks.

You should also take care to balance the workload: in particular the development of the implemented prototypes is time-consuming, so one way to balance this would be to have two people assigned to the prototype implementation, and the other two should do the more time-consuming prototype evaluation involving user testing. Those doing the prototype implementation should also do less of the initial assembling of the user group and capturing of user requirements. All group members should participate equally in the task analysis, task scenarios and designing the interface.

Note that the total marks for the coursework are out of 176. That works out at 44 each for a group of 4. Therefore, in your group you should each aim to do approx. 0-48 worth of marks. This will be scaled to 50 for its contribution to your overall module mark. Each group member must take responsibility for 2 tasks and carry them through the whole evaluation/implementation process.

It does not matter if the work is not shared evenly in parts 1 and 2. So, for example some group members may do more than their share of part 1 and less of part 2 or vice versa, but it doesn’t matter as long as the marks are evenly split in the end.

4.2 Marking Scheme

This section describes the tasks required to build your system using user-centred design methodology, together with a description of the material you are required to provide for the Coursework Written Report and the marks for each portion of the work.

Each week in the practical your group will be expected to show the completed coursework tasks from the previous week in order to have feedback from the practical tutor. You will miss this opportunity if you do not complete the tasks on time.

When writing up the report, please use the provided templates (supplied in the appendix), as it will ensure that you provide the correct information required.


7

4.3 Task Summary

The following table shows the tasks for the coursework, together with the weeks that they should be carried out and the marks awarded. More details of each task are given in Section 5.


8

5 Detailed Task Description Tasks

Marks in this section will be awarded for the following

Task Week Marks Form groups and select application domain 1 4 Describe the purpose of the website and outline some of the content requirements. Remember to keep it simple: the functionality will be limited to at most 8 tasks, which will be determined from the subsequent needs analysis with users. Define user classes 1 4 Describe the classes of users that your system needs. (There may be only one or many, but if there is only one you should include some justification of this.) Describe (up to 4) sample users 1 8 A description of the sample users you used to come up with the first specification of your system. Why did you choose them, what did each one contribute to the specification? Which user class did they belong to? Your description should include listed characteristics, and the subsequent evaluations that they give of your system should be recorded. Design requirements capture method(s) 1 8 Describe your process for capturing user requirements. Summarise the raw un-analysed information you got from your user group. Make sure that you gather data that truly represents users’ needs. If you use a questionnaire then explain how you have adhered to guidelines (see below). Describe how you analysed the qualitative and quantitative data that you gathered, and list the resulting requirements. Use appendices for details. Compile task list (2 tasks per person, derived from requirements) 2 8 List the tasks that users will be able to perform on your system, ensuring that you show clearly how the tasks relate to the users’ requirements gathered previously. Hierarchical task analysis (one diagram per task, 2 per member) 2 8 A full description of the task model you developed when you performed a task analysis for the system. Indicate which group member completed which part of the task model. See Redmond-Pyle Chapter 6 for more details about Task Analysis. Task scenarios (1 per person, corresponding to one of your tasks) 2 4 A full description of 4 or 5 task scenarios (each one should correspond to a task from the previous part). Each group member should provide one. Please indicate which group member completed each one. List of conceptual objects resulting from the user-object modelling 2 4 Describe the objects that the users expect to see in the interface, including any attributes, relationships to other objects etc. You might like to summarise this in a table. List of user actions on objects. 2 4 Describe which actions affect each object, for example using an Action-Object matrix. Application Style Guide 3 4 Note that this is different from guidelines like those produced by Shneiderman or Microsoft.


9

Start first prototype: mockup using a tool. Prototype marks: tasks (4) visual design (4), description of design decisions (4)

3 12

Design your first prototype using a mockup tool, eg Pencil or Justinmind or Balsamiq. This must cover all aspects of the interface, and include

• A full description of the design decisions, based on requirements, e.g. where to place interaction objects like menus and buttons etc, explanation of how the interface adheres to the application style guide (it may not adhere to it completely at this stage).

• It should show how the system works dynamically, e.g. what happens when you click on a button.

• Interaction mechanisms, e.g. mouse clicks, keyboard shortcuts • The interface must have the ability to carry out each of the tasks in the model.

Design a evaluation of prototype 1 (see Appendix 2 template) 4 8 The evaluation will be conducted by `experts’ from another group. Please indicate clearly which heuristics are being used and be clear about which tasks the experts are required to perform (as chosen from your task list). You may wish to edit the format of the form here. Use a small set (e.g. 3 heuristics) but design the evaluation thoroughly – split each heuristic up into 4 or 5 sub-sections. Each group member should conduct the evaluation so you should receive about 4 evaluations. SUBMISSION OF PART 1 AND DEMO OF FIRST PROTOTYPE 5 All group members must be present for the demo to answer questions and also to evaluate their opposite group’s prototype Evaluate your opposite group's prototype (using their instructions) during the practical and share the results with them

5 4

All group members must take part in this exercise and all will be awarded marks. Analyse the results of your evaluation and the data you have received from your opposite group (see Appendix 3).

6 6

Summarise the data from the evaluation, including any problems exposed in the existing prototype: you should have qualitative data (comments about problems) as well as quantitative data (severity of each problem). List the design decisions made as a result of the evaluations. 6 4 Summarise the design decisions made as a result of the data analysis, explaining which parts of the interface you will change in the next prototype, and which parts you will not change. Justify your design decisions with respect to the data. Start second prototype. Marks: use of evaluation results (4), visual design and interaction (4), Javascript/HTML (10)

6-9 18

Implement an interface for the second prototype, which is designed and built as a result of evaluating the previous mockup. The third prototype will be designed and built as a result of evaluating the second prototype. The implementation should be a functional webpage that makes use of the techniques covered in the practicals. Design a user evaluation of prototype 2 (see Appendix 4) 9 8


10

Design an evaluation to conduct with your sample users using a method of your choice, e.g. think-aloud protocol, quantitative performance measurements, qualitative user satisfaction measurements according to standard usability metrics. Be clear about which tasks are being evaluated, and what measurements you are using, as well as which method you are using to gather the data. For example, you may wish to use video to record the user interactions, which can then be analysed. Describe the raw, unanalysed results from your user evaluation, including which users took part, and which tasks they were asked to perform (see Appendix 4). Demo of second prototype 10 Evaluate your opposite group's prototype (using their instructions) during the practical and share the results with them

10 4

All group members must be present for the demo to answer questions and also to evaluate their opposite group’s prototype. Analyse the results of your evaluation of prototype 2 with your users

10 8

Describe the raw, unanalysed results from your user evaluation, including which users took part, and which tasks they were asked to perform. Summarise the data from the evaluation, including any problems exposed in the existing prototype. List the design decisions made as a result of the evaluations 11 4 Summarise the design decisions made as a result of the data analysis, explaining which parts of the interface you will change in the next prototype, and which parts you will not change. Justify your design decisions with respect to the data. Build third prototype. Marks: use of evaluation results (4), visual design and interaction (4), Javascript/HTML (10)

11-12 18

Implement an interface for the third prototype, which is designed and built as a result of evaluating the second one. The implementation should be a functional webpage that makes

use of the techniques covered in the practicals. Design a mockup (using e.g. Pencil) of a mobile version of your website, including a site map

11 10

It is OK to sketch a prototype on paper but it will need to be scanned and included in the final document. Include screenshots of the mockup in the final document.

Describe how you adhered to mobile design guidelines in the design of the mobile version

11 4

Make clear which of the guidelines that we have looked at have been focussed on

Describe how (and why) you would modify your evaluation methods if you were going to conduct an evaluation of the mobile version

11 4

List the accessibility considerations 12 8 Accessibility issues are important throughout the work, particularly when considering users’ needs, requirements capture, design and evaluation. Marks in this section will be awarded for the following:


11

• Description of how accessible your Prototype 3 is, and the steps you tookduring the development to try and ensure accessibility.

• Discussion of effectiveness: How did you evaluate the accessibility measures you took? How could the final prototype be improved?

FINAL SUBMISSION: third prototype and final report 12 Total Marks for Parts 1 and 2 176

5.2 Interface Requirements Capture

• Assemble a suitable group of users (this can be time-consuming so start early!). When choosing users remember that there is a legal requirement to consider accessibility and since 1999, service providers have had to consider making reasonable adjustments to the way they deliver their services so that disabled people can use them.

• Talk to them about what they would see as their requirements for the software, and ask them how they would like the interface set out. Drawings are useful for this.

5.3 Report Writing

Be concise. Include a short description of your approach to each task, typically a sentence or paragraph. Some tasks need no description, if, for example the information is given in a table or diagram. Use appendices for more details, e.g. questionnaires, task diagrams, heuristic evaluation questionnaire.

State which group members did each task so that marks can be awarded accordingly (use student numbers not names). If no participants are stated, then marks will be evenly split.

5.4 Demonstrations of Prototypes

The purpose of the demonstrations is for you to demonstrate the intermediate designs of your system as a group and answer questions concerning how you went about the user- centred design process to develop it. You are also required to evaluate another group’s system. All members of the group MUST be present online and be ready to answer questions on every aspect of the coursework. Here we are assessing the design and build of Prototypes 1 and 2. The allocation of marks can be seen above.

You will demonstrate online on one of your group’s own machines by sharing your screen. It is a good idea to try out your arrangements before the day of assessment to avoid upsets.

If there are parts that you would have liked to have implemented, but didn’t have time, be ready to describe them in detail to your assessor.


12

5.5 Questionnaire Design

If you use questionnaires as part of your data gathering process at any stage, please explain how they adhere to the guidelines from lectures, for example:

AVOID:

1. Long questions 2. Compound sentences - split them into two 3. Jargon and language that the interviewee may not understand 4. Leading questions that make assumptions e.g., why do you like ...? 5. Unconscious biases e.g., gender stereotypes

• Give clear instructions on how to complete the questionnaire. • Strike a balance between using white space and keeping the questionnaire compact. • Decide on whether phrases will all be positive, all negative or mixed. • Decide whether questions open or closed. • Choose a consistent question format, e.g. Yes/No, scales e.g. Likert etc, checkboxes with

multiple options.

5.6 Honesty in your work The university regulations on plagiarism will be followed and students are advised to check on correct referencing procedures. Plagiarism is taken extremely seriously at Brookes and if you are at all unclear about what this is, you should consult our website: http://www.brookes.ac.uk/library/skill/plagiarism.html


13

Week 5 Demonstration Mark sheet

Group No:

Present: Absent:

MARKS MAX Tasks 4 Visual Design 4 Design Decisions 4

Start first prototype: mockup using Pencil. Prototype marks: tasks (4) visual design (4), description of design decisions (4) Design your first prototype using a mockup tool, e.g. Pencil http://pencil.evolus.vn/ This must cover all aspects of the interface, and include

• A full description of the design decisions, based on requirements, e.g. where to place interaction objects like menus and buttons etc, explanation of how the interface adheres to the application style guide (it may not adhere to it completely at this stage).

• It should show how the system works dynamically, e.g. what happens when you click on a button.

• Interaction mechanisms, e.g. mouse clicks, keyboard shortcuts • The interface must have the ability to carry out each of the tasks in the model.


14

Week 10 Demonstration Mark sheet

Group No:

Present: Absent:

MARKS MAX Use of evaluation results 4 Use of usability design principles 4 Javascript/HTML etc. 10

Implement an interface for the second prototype, which is designed and built as a result of evaluating the previous mockup. The third prototype will be designed and built as a result of evaluating the second prototype. The implementation should be a functional webpage that makes use of the techniques covered in the practicals. Marks: use of evaluation results (4), use of usability design principles, e.g. Shneiderman, Microsoft (4), Javascript/HTML (10)


15

Appendix 1: User Class Template

Complete one table per user class. For example, for the hotel management system described in lectures the classes were: receptionists, management, trainees.

Name of user class Short description of user class Type of user Direct / Indirect / Remote Existing computer experience and skills Novice / Intermediate / Expert Frequency of use of system Hourly/Daily/Weekly/Infrequent/Other Use choice status Mandatory / Discretionary Tasks performed (Cross-reference to task model)




16

Appendix 2: Heuristic Evaluation Template 2.1 Evaluation Details

Site name

Background information

This document details an expert usability evaluation of a website for XXX. The aim of the analysis is to: Insert details The questions to be answered are:

• How easy is it to carry out the primary functions of the website • How does the site compare with its competitors in terms of

usability? • How could the site be modified to improve usability and user

perceptions?

In order to address all the above issues a series of tasks have been agreed and these are presented below. You should certainly undertake these tasks but should not be constrained by them.

User requirements Gender Male

Female

1

Age 7-17 18-24 25-34

2

35-49 50+

3

Class

4

Tasks 1

2

3

4

5


17

2.2 Heuristics

Choose the heuristics that you want to use, by looking at Nielsen etc and insert your heuristics and sub-heuristics here. Here is an example for you to edit. You can select some of these heuristics or use others. Do not use more than 3 or 4 heuristics, with at most 5 sub- heuristics each.

Heuristic Sub-heuristic A Design a natural and manageable structure

A1 Match structure with user tasks A2 Breadth rather than depth in page hierarchy A3 Use frames appropriately A4 Limit use of browser windows A5 Manage long pages effectively

B Provide a usable overall design

B1 Aim for aesthetic and minimalist design B2 Use a suitable metaphor B3 Create a clear visual impact B4 Use new technology sensibly B5 Use animation appropriately – or not at all

C Support efficient and effective navigation

C1 Provide effectiveness in navigation C2 Provide efficiency in navigation C3 Provide links back and home C4 Ensure effective hypertext C5 Provide an effective search facility

D Adopt appropriate use of language

D1 Strongly match language with ‘real’ world D2 Present text comprehensibly D3 Ensure appropriate and correct language D4 Avoid complex URLs

E Ensure consistency E1 Adhere to platform conventions E2 Maintain internal consistency E3 Adopt standard form design

F Support the user

F1 Design for human information processing F2 Ensure visibility of system status F3 Support user control and freedom F4 Provide quality help and documentation F5 Support users with disabilities F6 Design for internationalization / localization

G Minimise problems with errors

G1 Prevent unnecessary errors G2 Help users recognize, diagnose, recover


18

2.3 Evaluation Note: Modify the evaluation to match the heuristics in section 2.2 on the last page

Heuristic A - Design a natural and manageable structure

A1 Match structure with user tasks Summary: Does the structure of the website enable the users to easily achieve their tasks?

Tick Usability Consultant’s expert evaluation: 0. No problem Evidence and comment: 1. Minor usability concerns 2. Significant usability issue 3. Serious usability flaw 4. Usability catastrophe

A2 Breadth rather than depth in page hierarchy Summary: Users begin to lose their way once they go beyond the third level of menu hierarchy


A3 Use frames appropriately Summary: Early problems with frames are being addressed, but they can still be clumsy...



19

A4 Limit use of browser windows Summary: Avoid these as they cause problems with the back button and consistent navigation


A5 Managing long pages effectively Summary: Long pages can lose important information – they need careful structuring


Heuristic B – Provide a usable overall design

B1 Aim for aesthetic and minimalist design Summary: Make it clean and simple as far as possible


and so on... insert more tables as needed


20

Appendix 3: Example Analysis of Heuristic Evaluation

Summary scores (adapt this to match your heuristics)

Complete one summary for each expert who did the evaluation. Then combine the results with the comments and summarise the quantitative and qualitative results. A low score means good adherence to the heuristic.

Heuristic Sub-heuristic Total Summary Score (0-4)

A Design a natural and manageable structure

A1 Match structure with user tasks A2 Breadth rather than depth in page hierarchy A3 Use frames appropriately A4 Limit use of browser windows A5 Manage long pages effectively

Total for heuristic (max 20) B Provide a usable overall design

B1 Aim for aesthetic and minimalist design B2 Use a suitable metaphor B3 Create a clear visual impact B4 Use new technology sensibly B5 Use animation appropriately – or not at all

Total for heuristic (max 20) C Support efficient and effective navigation

C1 Provide effectiveness in navigation C2 Provide efficiency in navigation C3 Provide links back and home C4 Ensure effective hypertext C5 Provide an effective search facility

Total for heuristic (max 20) D Adopt appropriate use of language

D1 Strongly match language with ‘real’ world D2 Present text comprehensibly D3 Ensure appropriate and correct language D4 Avoid complex URLs

Total for heuristic (max 16) E Ensure consistency

E1 Adhere to platform conventions E2 Maintain internal consistency E3 Adopt standard form design

Total for heuristic (max 12) F Support the user

F1 Design for human information processing F2 Ensure visibility of system status F3 Support user control and freedom F4 Provide quality help and documentation F5 Support users with disabilities F6 Design for internationalization / localization


21

Total for heuristic (max 24)

G Minimise problems with errors

G1 Prevent unnecessary errors G2 Help users recognize, diagnose, recover

Total for heuristic (max 8)


22

Appendix 4: Usability Evaluation Template

Participants Which users, and user classes will be involved?

User User class

Methods Select the methods you will use to measure usability. Some examples are given below. You may wish to use other methods such as the think-aloud protocol. You may wish to use other recording methods.

Usability Attribute Measurement Method Recording Method Efficiency Time to solve tasks Video Simplicity Number of errors Video Effectiveness % of tasks solved Video Satisfaction SUS other tools Questionnaire Cognitive Load NASA TLX other Questionnaire

Usability Requirements for Tasks Review each of the tasks along with their associated task scenarios to decide which usability criteria will measured for each task and user class and list them in the Usability Requirements table below. You may wish to measure more than one attribute per task.

Tasks 1 2 3 4 5 6

Usability Requirements Task User Class Usability

Attribute Measurement

Method Target Level Observed

Result


23

Session Protocol Describe what roles group members will have when interviewing the users to determine the requirements, e.g. facilitator, developer, logger.

Explain the results of the pilot session: what changes were made as a result?

Decide how will you run your session, e.g.

• Put participant at ease • Explain data recording methods • Select tasks/scenarios • Usability questionnaires Analysis

Analyse the recorded data to extract the information, for example:

• Average time to complete tasks • Number and nature of user errors • Significant pauses or points where the user got stuck • Relevant user comments Redesign

List the design decision made on the basis of your analysis

coursework assessment human computer interface

Documents