Description
PART I – Prototyping (50 %) In this part of the assignment, you will create some prototypes for the course project, which you will develop and evaluate in assignment #3. Refer to the “Project Description” document for completing this part. Your final system will need to contain several basic features as well as those you define through your user consultations. As core functionality, your program should include management tasks for adding/deleting/editing data and an additional 5 major tasks. Among these major tasks, you need to produce the prototype for an Advanced Search as described below. Please derive these tasks from the Film Finder interface as shown in the project description page as well as through your user elicitations. Other major tasks that serve the core functionality of what you intend your system to do include (these are simply ideas, and we hope your user elicitations will provide a richer sample): x Advanced search – search for movies by different fields such as title, director or cast, including combinations of multiple fields. (* This task must be included in your choice of tasks to prototype) x Watch list – allow users to create, search and maintain a “like to see” list of movies. The movies in the list could have been suggested by friends, movie critics, etc. or could be a list of movies you have seen in trailers. x Shopping list organizer – allow users to organize movies they have at home or would like to purchase, say for Christmas, birthday, etc. x User reviews – a collection of feedback from viewers. x other tasks you that you can creatively define. (a) List the five tasks you have chosen, with a succinct description of each. From these five tasks, select three major tasks (one of which is the Advanced Search), and produce the respective hierarchical task graphs (HTG). (b) Start by sketching basic grids that will become the underlying structure of your screens. (c) Create low fidelity storyboards of the three major tasks you selected above. (d) Evaluate your prototypes with at least 4 end-users. These ideally include the same users you selected in Assignment #1. Include a user profile for each user in your write-up. (e) Document the feedback you obtained from discussing the storyboards with your users. (f) Modify your prototypes based on your findings. These should be done with a wireframing tool of your choice (https://gomockingbird.com/ is one type). These wireframes should include all the modifications based on the input from your users. You should observe proper 2 grid layout and screen design guidelines, including visual inheritance where appropriate. You should also annotate how a user would navigate from one screen to the next in your system. Hand-In: Hand in all electronic documents (e.g. parts (d) and (e)) online. Any paper documents (e.g. layout grids, paper storyboards) must be handed in by class time on the date of the deadline. Electronic copies (e.g. scans, perspective-corrected photos) of paper documents may be handed in online, but must be clearly legible. PART II – GUI Components in .NET (20 %) Create a separate .NET project for each part. (a) Keyboard Input On your main form drop a panel and change its color. When the user enters “r” and then inputs a number, n, move the panel n pixels to the right. If the user enters “l” and then inputs a number, n, move the panel n pixels to the left. (b) Timer Insert a Picture Box, an Image List and Timer on your form. Implement the form such that after every 10 seconds a new image appears in the Picture Box. You should include at least 5 images. (c) Scroll Bar Insert a text box on your form and a horizontal scroll bar at the bottom of your form. Your application should behave as follows: – When the user enters text, the text box should grow by a small amount – When the text box grows beyond the width of the form, update the scroll bar so that the user can scroll to see the text box beyond the limits of the form. (d) Drawing Create a form that will draw all the mouse movements of the user on the screen. Hand-In: for each part submit the .exe and source code. The source should be commented where appropriate. Place all clearly labeled .exe files in a single folder called “execs”. 3 PART III – Accessing Data and 2D drawing in .NET (30 %) This part of the assignment is designed to get you started on creating a GUI application which will use an XML file (or text file) as a back-end storing medium. (This method can be used for storing data in your final implementation in assignment #3.) It will also allow you to apply the concept of direct-manipulation. The sample application will be demonstrated in class and is on the course website. Your application should contain the elements that are in this application. 1) Create a GUI application similar to the sample application on the course page. 2) The main form should contain a menu with functioning “add”, “edit”, “delete”, and “exit” commands. 3) The application should allow you to add/edit/delete contacts to/from your address book. 4) The program should populate the controls from an XML file when opened. Any new or edited data should be saved to the XML file. 5) Users should be able to filter records based on the “age” field, by directly manipulating a slider control. BONUS (10%): I highly recommend trying this part. This can serve as basis for your Advanced Search feature, based off the Film Finder interface. You should allow the user to view a scatter-plot representation of age vs. university year, consisting of two axes and a number of dots on the screen, similar to the figure below. The size of each dot represents the number of people within that category. Use color coding to indicate the predominant gender in that category (yellow means there are equal number of males as there are females). In contrast to the previous part, make direct manipulation of the slider filter the scatter-plot by the “university year” field instead of “age”. Phd Msc 5 4 3 2 1 Age # of Years 10 20 30 40 50 Phd Msc 5 4 3 2 1 Age # of Years 10 20 30 40 50 (a) scatter plot display when user drags slider to show the number of people studying for 4 years and under at the U of M. (b) scatter plot display when user drags slider to show all the students in your address book. Hand-In: the executable, including a file named “readme” with instructions on running it, the XML file and any other necessary information to make the application work. If your instructions for running the application do not work, it will be considered as not completed. Place all parts in a single folder. 4 Include the complete project files for all coding parts of this assignment. Place all clearly labeled .exe files in a single folder called “execs”. Place all parts of this assignment in a single .zip file named “comp3020_group_a2.zip” and upload to the course dropbox. Format and guidelines (a) All answers should be typed using an appropriate word processor. (b) Your document should be properly structured. (c) Where appropriate, always provide a rationale for your answer.