CO2104: User Interface (UI) Design and Evaluation
Homework 2: High-Fidelity Design Portfolio and Heuristic Evaluation
Homework structure:
. Present a Design Portfolio on producing a high-fidelity prototype (HTML/JavaScript) for a web-based tourism website for a hobbyist
. Demonstrate a user-based Heuristic Evaluation
Submission Deadline: Friday 13th May, 2024, 16:59 BST
Coursework weight: 50%
CW2 addresses the following Intended Learning Outcomes (ILOs):
. Design and develop interactive, responsive user interfaces
. Demonstrate visualisation techniques for user interfaces
. Assess accessibility in user interfaces
. Demonstrate user interface design and prototyping following a user-centred design process
. Evaluate the usability of user interfaces with direct/indirect heuristics
The submission will take place via Blackboard site – please submit in time and not at the last minute
(Please see the University’spolicy on late submission penalties(section 7.90-7.95))
What is a High Fidelity (Hi-Fi) Design Portfolio?
A High Fidelity (Hi-Fi) Design Portfolio is a reflective document that supports a functional prototype. It also charts the development and testing of a functional interface application. User Interface (UI) Interaction and User Experience (UX) designers utilise this development to work with end-users/clients/stakeholders to assess the suitability and functionality of the proposed solution.
Alongside the portfolio is a functional development that demonstrates elements of the prosed product, which allows the end-users or clients to test the ideas of the development team.
Bear in mind that this will not be a complete system but could be seen as either a “Horizontal”, “Vertical”, or “T” shaped prototype, where a “slice” of the final product will be created to allow for testing of the key requirements, accessibility, usability, and to carry out a feasibility studies for the final development.
Your Tasks:
For CW2, you are expected to submit TWO elements for the design portfolio:
(1) Prototype Description Document – 50%
The first part is a portfolio of evidence for a typical web-based tourism website for a hobbyist (could be a Desktop or Responsive Mobile Web application). This document will need to show where elements of the design have met the end user’s needs and perform. a user-based Heuristic Evaluation (HE) and Usability testing involving users of your system. It must include the following:
. Introduction - A clear, well-structured introductory (1 paragraph), where you explain the topic of application/technology (in this case, your tourism website for a hobbyist), explaining the motivation behind designing such a system and its key user requirements.
. Prototype functionality - A development list of the functions/features which you will be developing to fulfil the development of a “T” shaped / “vertical” prototype. This must include：
(1) One common function (e.g. a generic feature such as login/sign-up/user profile etc.
(2) One unique feature you designed in Coursework 1. If you intend to make
significant alterations to the original design, please provide a brief overview of the reasons behind these changes.
The choice of each element proposed should be justified. This will also form part of your evaluation when you reflect on how the design/focus might have changed due to technical issues or because of testing (as examples).
. Background technologies – Briefly explain any external CSS frameworks or JS libraries used in the development of your prototype (see Part 2).
. Walkthroughs in the form of annotated screenshots - A series of annotated screenshots (at least 3 pages) that highlights:
o A short page description (the function of the page)
o Functions/features of all elements found within each page
o How to navigate between pages.
o Where accessibility has been considered in your implementation (functionality, features and design choices)
. Heuristic evaluation and Usability testing results - A section within your portfolio where you present the results of your Heuristic evaluation, and Usability testing - You should be looking to have had at least FIVE individuals test your product. These can be class peers, but you are encouraged to test with other individuals who could
benefit from your product. * (Please refer to the appendix for more information)
. Feedback and Discussion - A discussion section on your evaluation findings where you provide a clear review of the feedback. This review should then document the influence of change on your design or justify why your design will not change even when feedback identifies potential issues with end-users.
. Conclusion - A conclusion (1 paragraph) where you summarise what you produced, the success of implementing your original idea, and what would be required to progress this into becoming the starting point for the final development (if it was to be made).
(There is no word limit for Part 1. Recommended word count: 1500)
(2) Functional High-fidelity Prototype - 50%
The second part of the submission is to develop a functional prototype, which could be created using HTML/CSS/JavaScript. This prototype can be developed using any UI framework or JS library of your choice (e.g. including but not limited to Bootstrap, Foundation, jQuery, Vue.js, Angular, etc.)
Your functional prototype must include the following:
. A "T" or "vertical" prototype that shows a breadth of features with a smaller focus on some of the functionality
This should include:
o At least one common function, such as sign-up/login, user profile page.
o A fully designed page showcasing your unique function with all navigation and interactive features
(*client-side only, do not require a database backend but hard coding)
• The prototype must be developed in a professional manner with...
o Suitable folder structure for managing pages (e.g. images in an "image" folder, everything appearing in a root folder),
o Suitable naming conventions (index.html being your first page),
o The correct use of CSS and JS (inline is acceptable, but external is more professional)
o The correct use of relative path referencing and not full referencing for images and links (references should look like this... "images/logo.jpg" and not "d:/uniwork/UI/CW2/TM/Images/logo.jpg")
o All images having alternative text added (to aid with accessibility)
o Avoid using tables for layout (to aid with accessibility, used only where necessary)
o A clean submission with no additional pages, scripts, or images not used in the final prototype - For any external CSS or JS libraries (e.g. JQuery *.js, Bootstrap *.css), it is recommended to link to CDN. Alternatively, you may copy them to a separate folder (e.g., libraries) if necessary.
Submission
The final submission of your website should be as a single zip file that contains all of your development files. The archive should be named CO2104_CW2_(your email id).zip (e.g. CO2104_CW2_yh37.zip). It will be your responsibility to ensure that everything required is found within this single zip file. So please check your compressed file before submitting it. You are allowed to re-submit as many times as you like before the deadline.
Anonymous marking
We operate an anonymous marking scheme. All submitted files will be renamed using anonymous fingerprinting generated by SHA256.
Appendix
How should my Heuristic Evaluation and Usability Testing section look like?
Your Heuristic Evaluation and Usability Testing section in CW2 should be comprised of the following:
. You need to use Nielsen’s 10 Heuristics (as presented in our lectures and tutorials)
. You need to create some form of evaluation document that could be used with your “end-users” so they can give you feedback about your hi-fi design.
. In this evaluation form, they should be allowed to work through your prototype,
looking for how aspects of the design support (or not) Nielsen’s 10 Heuristics, and for them to score them using “Severity Ranking”
. You also need to create a simple series of Usability tests to assess the success of your final design.
. Evidence of collecting results for a number (at least 5) for your designed usability test.
. A short discussion of how your finding could/have affected your final design.