UNIT ITC72003
Resources for User Interaction
Assignment 2
User Interface (UI) Design Prototype and Reflective Report
• Objectives
By completing this assignment, students will be demonstrating their knowledge and skills learnt from Weeks 4–6 that include:
• understanding the importance of selecting appropriate resources and design elements as part of developing interactive media applications
• understanding the impact of the resources and design elements may have on user interaction and user experience
• demonstrating basic image editing and manipulation skills through using GIMP/Photoshop
• demonstrating skills to develop, preview, test and share website prototype using industry standard prototyping tool, such as Adobe XD
• applying design principles to create positive user experience in using the prototype
• demonstrating ability to analyse the features of graphics editor and prototyping tool and the user experience in using them.
DUE DATE 13th April 2020 – 23:00 QLD time
Learning Attributes 3, 4, 5 & 6
Weight 20% of overall unit assessment
Suggestion This assignment is developmental and cumulative. You are strongly advised to start doing this assignment in Week 4. Leaving your starting date to the week before the due date is a very poor strategy for success in the unit.
• Brief Description
Using a prototyping tool, such as Adobe XD, create an interface design and basic user interaction for a 3-page website. Write a reflective report on your experience in using the graphics editor and prototyping tool to complete the assessment tasks; and include feedback from two (2) testers on their user experience (UX) in testing your prototype.
This assignment involves two main parts:
• Reflective Report Template
This template includes the Assignment Cover Sheet and the following instructions for writing the reflective report.
Write a reflection report in at least 500 words to discuss the following:
• the basic editing features of the graphic editor (GIMP/Adobe Photoshop) you used the most.
• the graphic manipulation technique/s (e.g. layer masking, effects, etc.) you applied in creating graphics for your prototype.
• your user experience in using the above features and techniques. Were the tools easy to use and are you satisfied with the capability of these tools to achieve the manipulation results you were after?
• your user experience in using the prototyping software. Were the tools easy to use and are you satisfied with the capability of these tools to create an interactive media prototype?
• further improvements you can make to your prototype
• feedback you received from two (2) testers on their user experience (UX) in testing your prototype. This can primarily about your user interface design e.g. selection of colours, fonts, images and layout.
• Prototype of your interactive media (website)
Using Adobe XD as a recommended prototyping tool, create an interface design and basic user interaction for a 3-page website.
The 3 pages are Home, Shop or (Order), and Contact Us, with contents specified below.
• HOME
Text Content:
Introduce and promote your product.
Images
You must include at least the following two (2) images:
• An image of your product including its branding/label you created using graphic editor.
• An enhanced or manipulated image of your target consumer either holding or consuming your product. This mean the image can either be a composite image e.g. two or more images edited into one image or enhance the photo using filter etc.
Video Player
Since this is a prototype, you only need to display the still image of the video player, which can be the same one you had in your style tile. Instead of showing a blank screen, you can show another image relevant to your product promotion.
• SHOP (or ORDER)
This page should include all the mandatory input fields for your customer to order the product online.
You also need to provide payment options, either by providing navigation to 3rd party website e.g. paypal or you can provide the input fields for payment details as well.
Make sure you think of all the details you normally have to type in when ordering online.
• CONTACT US
This page should include the fictitious contact details, input fields for the customer to submit their enquiry, and the google map of the fictitious location.
Common interactive elements
Make sure you include the following interactive elements on each page:
• Logo
• Navigation
• Footer (e.g. copyright and privacy statement link)
• Optional: some websites also have banner/slideshow displayed on every page.
• Assessment Criteria
Marking Criteria
Max Marks (out of 20)
Part 1: Reflective Report
5.0
1.1 Analysis of Software Features
2.5
1.2 Analysis of User Experience
2.5
Part 2: Prototype
15.0
22.1 Text, Graphics and Colours
5.0
2.2 Interface Design
5.0
2.4 Interactivity (Functional Buttons)
2.5
2.5 Walkthrough Recording
2.5
• Submission Format
To assist you in understanding the submission requirement, there are three sample files supplied with this assessment brief: Report file, Adobe XD file, and Prototype Walkthrough file.
You are required to submit the following three (4) files zipped / compressed together using naming convention filename = FirstInitialYourLastName_ITC72003_A2_S1_2020.zip or .rar (i.e. AStevens_ITC72003_A2_S1_2020.zip or AStevens_ITC72003_A2_S1_2020.rar)
• Report file in a word doc/docx or pdf format naming convention: FirstInitialYourLastName_ITC72003_A2_Report_S2_2020.doc (or .pdf)
• Adobe XD file in an editable Adobe XD file .xd format with all three (3) Artboards
naming convention: FirstInitialYourLastName_ITC72003_A2_Prototype.xd
• Prototype Walkthrough file, in .mp4 format, naming convention: FirstInitialYourLastName_ITC72003_A2_Walkthrough.mp4.
It is a screen recording of you as a user interacting with the prototype by selecting the 3 menu options, one at a time, going through your 3-page website. You can use the Adobe XD recording tool, available from the preview toolbar when you are previewing your prototype.
• An original image and an enhanced or manipulated image (of the same one) in .jpg or .png. This could be the photo of the consumer of your product holding or consuming your product, to show your image editing/manipulating skills.
• Original Work
It is a University requirement that a student’s work complies with the Academic Integrity Policy. It is a student’s responsibility to be familiar with the Policy.
Failure to comply with the Policy can have severe consequences in the form of University sanctions. For information on this Policy please refer to Student Academic Integrity policy at the following website: http://policies.scu.edu.au/view.current.php?id=00141
As part of a University initiative to support the development of academic integrity, assessments may be checked for plagiarism, including through an electronic system, either internally or by a plagiarism checking service (e.g. Turnitin), and be held for future checking and matching purposes.
• Retain duplicate copy
Before submitting the assignment, you are advised to retain electronic copies of original work. In the event of any uncertainty regarding the submission of assessment items, you may be requested to reproduce a final copy.
• School Extension Policy
In general, you will NOT be granted extension unless where there are exceptional circumstances. Students wanting an extension must make a request at least 24 hours before the assessment item is due and the request must be received in writing by the unit assessor or designated academic through student service (please visit https://www.scu.edu.au/current-students/student-administration/special-consideration/ for details). Extensions within 24 hours of submission or following the submission deadline will not be granted (unless supported by a doctor’s certificate or where there are exceptional circumstances – this will be at unit assessor’s discretion and will be considered on a case by case basis). Extensions will be for a maximum of 48 hours (longer extensions supported by a doctor’s certificate or alike to be considered on a case by case basis).
A penalty of 5% of the total available grade will accrue for each calendar day (24-hour period) if an assessment item is submitted late without prior extension granted. Therefore, an assessment item worth 20 marks will have 1 mark deducted for every 24-hour period and at the end of 20 days will receive 0 marks.
Students who fail to submit following the guidelines in this Unit Information Guide will be deemed to have not submitted the assessment item and the above penalty will be applied until the specified submission guidelines are followed.
• Marks and Feedback
All assessment materials submitted during the semester will normally be marked and returned within two weeks of the required date of submission (provided that the assessment materials have been submitted by the due date).
Assignment 2 Marking Rubric
The following marking rubric will be used for the marking of your submission. Make sure you read CAREFULLY this to understand how your work would be graded against each of the defined criteria in section 4 above.
Criteria
HD
DI
CR
P
F
No points
Part 1
Reflective Report –
Analysis of Software Features
(2.5 marks)
• A concise, valid and meaningful analysis of both software features.
• Correct referencing (in-text and reference list) using Harvard.
• No grammatical/spelling errors.
• A concise, valid and meaningful analysis of software features.
• Minor referencing errors (in-text and reference list) using Harvard.
• Minor grammatical errors or minor omission of the requirements.
Analysis is too general but satisfactory and valid; may contain:
-noticeable referencing errors (in-text and reference list) using Harvard
-noticeable grammatical and spelling errors;
-only analyse 1 feature correctly
Analysis is too general but satisfactory and valid; may contain:
-major referencing errors
-grammatical and spelling errors;
-only analyse 1 feature correctly
• Analysis is unclear and meaningless; it contains incorrect information about the feature.
• No referencing evidence
No evidence.
Reflective Report –
Analysis of User Experience
(2.5 marks)
• A concise, valid and meaningful analysis of the user experience in using both graphic editor and prototyping tool.
• Correct referencing (in-text and reference list) using Harvard
• No grammatical/spelling errors.
• A concise, valid and meaningful analysis of the user experience in using both graphic editor and prototyping tool.
• Minor referencing errors (in-text and reference list) using Harvard.
• Minor grammatical errors or minor omission of the requirements.
Analysis is too general but satisfactory and valid; may contain:
-noticeable referencing errors (in-text and reference list) using Harvard
-grammatical and spelling errors;
-only analyse 1 user experience correctly
Analysis is too general but satisfactory and valid; may contain:
-major referencing errors
-grammatical and spelling errors;
• -only analyse 1 user experience correctly
• Unsatisfactory analysis of the user experience, primarily based on personal taste or liking without any reference to the theory.
No evidence.
Part 2
Text, Graphics and Colours
(5.0 marks)
• Excellent application of design principles concerning text, graphics and colours
• Highly creative enhancement /manipulation of graphics
• Both result in unique and more pleasing look and feel.
• More than satisfactory application of design principles concerning text, graphics and colours but with imperfection.
• Creative enhancement /manipulation of graphics
• Both result in more pleasing look and feel.
• Basic but satisfactory application of design principles concerning text, graphics and colours.
• Minimal but satisfactory enhancement /manipulation of graphics to achieve the intended objective.
• Standard and consistent look and feel results in satisfactory user experience overall.
• Basic but satisfactory application of design principles concerning text, graphics and colours.
• Unsatisfactory or no evidence of enhancement /manipulation of graphics,
• Some inconsistencies in look and feel, results in some negative user experience.
• Unsatisfactory application of design principles concerning text, graphics and colours.
• Unsatisfactory enhancement /manipulation of graphics,
• These result in unpleasing look and feel.
No evidence.
Interface Design
(5.0 mark)
• Correct application of interface design fundamentals, which results in great user experience.
• Perfect layout and composition of all interactive and non-interactive elements on each web page.
• Correct application of interface design fundamentals, which results in great user experience.
• Good layout and composition of all interactive and non-interactive elements on each web page but with imperfections.
• Incorrect application of some interface design fundamentals into practice which results in slightly negative user experience.
• Functional layout and composition of all interactive and non-interactive elements on each web page, aesthetically can be improved.
• Incorrect application of some interface design fundamentals into practice which results in slightly negative user experience.
• Functional layout and composition of all interactive and non-interactive elements on each web page, aesthetically can be improved.
• Incorrect application of some interface design fundamentals into practice which results in negative user experience overall.
• Functional layout and composition of all interactive and non-interactive elements on each web page, aesthetically can be improved.
No evidence.
Interactivity (Functional Buttons) (2.5 marks)
• All buttons on every page are functional.
• Perfect navigation between pages
• Showing a different button state for the active page e.g. when on the home page, the home page button should show different colour from the colour of the other two buttons.
• Broken link found on one or two buttons.
• Minor problem with navigation between pages
• One or two buttons are not showing a different button state for the active page e.g. when on the home page, the home page button should show different colour from the colour of the other two buttons.
• Broken link found on half of the button.
• Multiple problems with navigation between pages
• One or two buttons are not showing a different button state for the active page e.g. when on the home page, the home page button should show different colour from the colour of the other two buttons.
• Broken link found on half of the button.
• Multiple problems with navigation between pages
Or not showing a different button state for the active page e.g. when on the home page, the home page button should show different colour from the colour of the other two buttons.
• Only two or two buttons overall are functional, which results in negative user experience.
• Or not showing a different button state for the active page e.g. when on the home page, the home page button should show different colour from the colour of the other two buttons.
No evidence of Style Tile
Walkthrough Recording
(2.5 marks)
• A complete walkthrough recording showing user navigating between pages.
• A complete but imperfect walkthrough recording showing user navigating between pages.
• Walkthrough recording only showed 3 pages in sequential manner, without going back and forth of navigating between pages.
• Walkthrough recording only showed 2 of the 3 pages.
• Walkthrough recording only showed 1 of the 3 pages.
No evidence.