User Interface (UI) Design and Evaluation

Coursework: High-Fidelity Design Portfolio, Heuristic Evaluation and Assessment Criteria

Topic:

Present a Design Portfolio on producing a high-fidelity prototype (HTML/JavaScript) for a desktop Web-based meeting planner system and demonstrate a user based Heuristic Evaluation for it.

Learning Outcome 1: Design and develop interactive, responsive user interfaces

Learning Outcome 2: Demonstrate visualisation techniques for user interfaces

Learning Outcome 3: Assess accessibility in user interfaces

Learning Outcome 4: Demonstrate user interface design and prototyping following a user-centered design process

Learning Outcome 5: Evaluate usability of user interfaces with direct/indirect heuristics

What is a High Fidelity Design Portfolio?

What is the high-fidelity Design Portfolio, functional prototype, and Heuristic Evaluation that I need to produce for CW2-RESIT?

This resit requires you to design/create/evaluate a proposed application (web-based) that allows the user to record, plan and suggest activities for a meeting planner system for entertainment purposed. This app could allow the user to do some of the following:
record and manage their entertainment event activities
allocate timings and pre-requisites to run them
give them a rating (e.g. favourite events)
place them into event categories.
filter them based on different priorities
create custom lists
allow for different people/users to create their own event lists and share them.
For CW2-RESIT you are expected to submit TWO elements. The first is a portfolio of evidence for a typical Web-based meeting planner system. This document needs to show where elements of the design have met the needs of the end-user, and perform a user based Heuristic Evaluation (HE) and Usability testing involving theoretical users to your system.
The second element of submission is to supply a functional prototype, which has been created using HTML (with CSS), Bootstrap and JavaScript. This prototype can be created in a package of your choosing, as long as it allows for you to code your own HTML, CSS, Bootstrap and JavaScript (such as Notepad ++).

Your portfolio must include the following (these are the requirements of your design portfolio):
Clear, well-structured and presented Introductory (1-2 paragraphs), where you explain the topic of application/technology (in this case the desktop Web-based meeting planner system for entertainment purposes), explaining the motivation behind designing such a system and its key user requirements. The latter part of this section can be similar/almost the same to your CW1 first paragraph, as is present in this assignment to remind you of your focus for the design. 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).

A development list of the functions/features, which you will be developing, to fulfil the development of a "T" shaped / "vertical" prototype. The choice of each element proposed should be justified.

A series of annotated screenshots (one page of your site per A4 page) that highlights...
a short page description (the function of the page)
the functionality/features of all element found within each page of your web- based product.
where functionality has been simplified for the prototype, but could be expanded in the final product (i.e. additional database interactivity).
elements that meet the requirements of the client/end-user.
where accessibility has been considered in your implementation (functionality, features and design choices).

Clear, separate 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 THREE individuals test your product. These can be class peer but you are encouraged to test with other individual who could benefit from your product. The more suitable individual testing your prototype the better the evaluation.

Clear, well-written Discussion section on your evaluation findings where you provide clear review of the feedback. This review should then be used to document influence of change to your design, or justification to why your design will not change even when feedback identifies potential issues with end-users.

Clear, well-structured and presented Conclusion (1-2 paragraphs) 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).

Your functional prototype must include the following.
A "T" or "vertical" prototype which shows a breadth of features with a smaller focus on some of the functionality.

This could be creating...
A working log in page (maybe not using a database backend but hard coding in the users details).
A fully designed first page to the system (once logged in) with all navigation and interactive features working.
A number of elements of functionality for aspects of what your meeting planner will finally do (e.g. editable list of entertainment events to monitor, some kind of ranking and filtering system, suggestion list for different members of the family/different users).
A set of static pages such as profile, settings and help pages.
And use of local storage to retain data locally between different pages.

The prototype must be developed in a professional manor with...
suitable folder structure for managing pages (images in an ""image"" folder, everything appearing in a root folder),
suitable naming conventions (index.html being your first page),
the correct use of CSS (inline is acceptable but external is more professional),
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")
all images having alternative text added (to aid with accessibility)
no use of tables for layout (to aid with accessibility). Tables used only where necessary.
being a clean submission with no additional pages, scripts, or images that are not used in the final prototype.
The final submission of your website should be as a single COMPRESS (zip) file that contains all of your development files. It is your responsibility to ensure that everything required is found within this single compressed file. If any elements are missing due to being omitted from the compressed file (an image is missing, or the database) it will be marked as if it was never there. So please check your compressed file before submitting.

How should my Heuristic Evaluation and Usability Testing section look like?
Your Heuristic Evaluation and Usability Testing section in CW2-RESIT should be comprised of the following:
You need to use the Nielsen's 10 Heuristics (as presented within our lectures and tutorials) to evaluate your hi-fi prototype. You should look for aspects of the design for each heuristic (pros and cons), and to score them using the "Severity Ranking".
You also need to create a simple series (at least 5 tasks) of Usability Testing (Tasks, Goals and Attributes) to be used to assess the success of your final design.
Evidence of collecting results for a number (at least 3 users) for your designed usability test.
A short discussion of how your finding could/have affected your final design.
Coursework: An Annotated Medium Fidelity Design Portfolio and Heuristic Evaluation for a system

Design Portfolio (where you present your designed prototypes alongside with text walkthrough)
Heuristic Evaluation of the designed system (as presented in the 1. Design Portfolio)

Learning Outcome 1: Be exposed to and be able to summarise, assess and reflect on theories, principles, methods and practices of Human-Computer Interaction (HCI) and User Interface (UI) Design

Learning Outcome 2: Understand how design methods are applied in research practice and within real-life projects

Learning Outcome 3: Perform UI Prototyping using different tools and at different fidelities

Learning Outcome 4: Design considering different visualisation techniques and evaluate UIs

Topic for your Design Portfolio and Heuristic Evaluation (HE):
"Create a design portfolio for a meeting planner and perform a Heuristic Evaluation (HE) on it."

What is a Design Portfolio?

What is the Design Portfolio that I need to produce for CW1?