CMPT381-Assignment 1 Basics of GUI Design and Development Solved

In this assignment you will design and build a user interface to demonstrate your skills with both the iterative design process (including personas, task descriptions, sketch-based prototypes, screen design, and task walkthroughs) and basic JavaFX development (including widgets, events, and layout). Part 1 covers the design elements, and Part 2 covers the coding of the interface.  

Your job is to build a GUI for a stand-alone picture frame display (called SlideShow) that presents slide shows using photos that have been uploaded to the device. The picture frame has a 12-inch 1920x1080 high-res touchscreen that is used both for displaying the photos and showing the UI when necessary.  

Part 1: Design of the SlideShow GUI
1.A Personas
Based on your own experience and discussions with friends and family, develop a persona for a representative user of SlideShow. One persona is provided below. Your persona description should have the same headings as the provided persona, but should be substantially different in terms of content (i.e., the two personas should lead to different tasks and different interface design ideas).

Your persona should include the following headings:

•        Name

•        Demographics and Background  

•        Goals and Needs

•        Motivations

•        Experience with Technology

All information in your persona should be relevant to the design problem.  

Name: Lilian

Demographics and Background: Lilian is 75 and lives by herself in a seniors’ apartment building. She has three children and six grandchildren (the grandchildren range in age from 5 to 25). Lilian’s family is very important to her – they visit regularly, and she is very interested in the activities of her grandchildren. Lilian has arthritis in her hands, making tasks that require fine motor control slightly difficult.

Goals and Needs: Lilian wants to keep up with what her children and grandchildren are doing and loves seeing pictures of them. She needs to be able to set up and view photos easily and without a lot of detailed finger work.

Motivations: Feeling connected to family; seeing recent activities; finding out about family information to talk about when her family visits.

Experience with Technology: Lilian has a mobile phone and a tablet, and is comfortable with touchscreen interfaces, but would not consider herself to be an expert on how the devices work.
Following the format used for Lilian’s persona, create a different persona who represents a different type of user for the SlideShow device. The persona should be substantially different from Lilian, and should lead to different kinds of tasks and UI design ideas.

The product of your work in part 1A will be a written persona in a PDF document.

1.B Task Descriptions
Devise four task descriptions for the SlideShow interface – two for Lilian, and two for the persona you create. Refer to the lecture notes for information on what goes into a task description, and include the following headings:

•        Task Name

•        Persona

•        Importance and frequency (including justification for your ratings of these two factors)

•        Description (one paragraph)

•        Specific data that will be used in the task

•        Specific constraints and goals relevant to the task

Write four task descriptions (maximum 0.5 pages each). The tasks should be substantively different (although you may re-use one task if it is critical for both personas).

The product of your work in part 1B will be four written task descriptions in a PDF document.

1.C Interface Sketches
Based on the information in your personas and task descriptions, sketch interface ideas for SlideShow that correspond to your four task descriptions. You will hand in three sketches for each task (so, 12 sketches in total). The sketches should be complete enough that you can carry out task walkthroughs with your tasks, and should cover a wide range of approaches (that is, don’t sketch three variations on a single idea). Refer to the lecture notes about what you should try to achieve in your sketches, and remember that your ideas don’t all have to be good ones. Your artistic ability will not be evaluated.

Take photos of your 12 sketches. In most cases, your sketches will involve a single screen – but if they have multiple parts, label the pictures to clearly indicate what is shown (e.g., write the label on paper and put it on the sketch before you take the picture).  

The product of your work in part 1C will be digital photos of your 12 sketches

1.D Task-based Walkthrough Results
For each of your 12 sketches, carry out a task-based walkthrough using the corresponding task description. Make notes about what worked well and what caused problems. Create a report that shows a picture of each sketch and a summary of the walkthrough results, with an overall assessment of the main strengths and weaknesses of each design. Clearly indicate which of your three alternatives for each task is the top choice. Organize the document as a table, with the sketch shown at left and the walkthrough results and assessment on the right.

The product of your work in part 1D will be written walkthrough results and assessments in a PDF document

Part 2: Building the GUI
Choose one of your UI designs for implementing in JavaFX. Choose a design for a task that is critical to the system, and that is reasonably complex (i.e., the design should have several widgets and at least some user interaction). Your UI must be built programmatically in JavaFX (as shown in lectures and labs), not using FXML. You should create the widgets needed for your design and lay them out using basic container widgets (e.g., VBox and HBox), and attach basic events to your widgets to demonstrate the operation of the interface. You may use placeholders for images.

Create an archive of your project to hand in: in IDEA, choose File  Export  Project to Zip file… The product of your work in part 2 will be a JavaFX project that runs in the IntelliJ IDEA IDE.