Reference no: EM133097612 , Length: word count:3000
CO2104 User Interface Design and Evaluation - University of Leicester
Annotated Medium Fidelity Design Portfolio and Heuristic Evaluation for a Task Manager system
1. Design Portfolio (where you present your designed prototypes alongside text walkthrough)
2. 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 Uls
Specific Topics that you need to work on for your Design Portfolio and Heuristic Evaluation
Topic for your Design Portfolio and Heuristic Evaluation (HE):
"Create a design portfolio for a Web-based Task Manager/Personal Assistant system and perform a Heuristic Evaluation (HE) on it."
Your design portfolio must include the following:
Clear, well-structured and presented Introduction (max 1 page) where you explain the topic of application/technology (in this case the web-based Task Manager/Personal Assistant), explaining the motivation behind designing such a system and its key user requirements.
The medium-fidelity prototype development (i.e. Wireframes). All your prototype designs need to be accompanied by a text walkthrough (in the main text of the document) and annotations on your wireframes describing what they are about and what interactions they accommodate. It is very important you demonstrate clear flow when presenting that. To do so, you need to set a clear scenario and context of use to map the wireframes. You are expected to include rationale and explanations for every UI design choice you make. All produced wireframes need to demonstrate all the inputs, processes and outputs, and need to match the end-user and functional requirements. You need to provide wireframe screens for all the presented UI features and functions of your Web-based desktop Task Manager/Personal Assistant. You need to present at least 5 different wireframe screens that demonstrate all the key functions of your system. You can include mobile-based wireframe screens if you deem necessary but you need to provide clearly expressed rationale for doing so. Please note that is essential to present and produce standard web-based wireframes for your Task Manager/Personal Assistant.
• Clear, separate section within your portfolio where you present and discuss the Heuristic evaluation of your designed system/wireframes (this part can be called
`Wireframes Evaluation')
• Clear, well-written Discussion section on your evaluation findings where you provide clear recommendations on how you can address in practice all the heuristic violations of your wireframe prototype.
• Clear, well-structured and presented Conclusion paragraph (1 paragraph) where you summarise what you produced in your design portfolio, the rationale behind it and the heuristic evaluation results.
An example section of an annotated medium-fidelity (i.e. wireframe) presentation from my own research can be seen below in Fig.1:
Please note that the example below (Fig. 1) demonstrate the 'holistic picture' of the produced prototype, indicating the links and the flow between the different screens.
You are strongly advised that when you present your annotated design portfolio, you start with such a 'holistic picture' first to indicate how the different screens connect to each other (and indicate the user flow) and then you move on presenting each of your designed screens one by one alongside with the annotations and the text walkthroughs.
Please note: Annotations are different from text walkthroughs - these will be discussed further in the week where we discuss medium fidelity prototyping.
In a nutshell, annotations are the bubble/'post-it' notes you can see on each screen in Fig. 1- these indicate key features that each prototype screen entails. Annotations are part of the actual wireframes; on the other hand, text walkthrough refers to the text you write up alongside the presentation of each prototype screen to explain to the reader what a user needs to do/does when using the prototype screen by screen.
Your Heuristic Evaluation section in CW2 should be comprised of the following:
• You need to use Nielsen's 10 Usability Heuristics (as presented/will be presented within our lectures and tutorials)
• A walkthrough by heuristic where you 1) present the related wireframes to demonstrate the issue (either positive or negative - you need to evaluate both the positive and negative aspects of your designed wireframes) 2) provide the Severity Ranking
Attachment:- User Interface Design and Evaluation.rar