Familiarity can help improve the usability of your website. By leveraging familiar design patterns, like a navigation bar, users will be able to quickly to start using your site based on what they already know. In this lab, we’ll explore the image gallery design pattern and practice implementing client and server side form validation and feedback.
| Lab Homework | Deadline | Slip Days | Credit | Solution |
|---|---|---|---|---|
| All Parts | Wed 2/26, 11:59pm | Max: 2 days | 20 points (completion) | Provided |
Note: This lab homework is designed to be completed outside of your February Break; you are not expected to work on this during your break.
Read “Match Between the System and the Real World: The 2nd Usability Heuristic Explained” before your lab section: https://www.nngroup.com/articles/match-system-real-world/
Clone your lab repository.
Clone the following URL: git@github.coecis.cornell.edu:info2300-2020sp/YOUR_GITHUB_USERNAME-lab04.git
Sign the attendance sheet.
It is your responsibility to sign the attendance sheet before you leave. If it wasn’t handed to you, ask to sign it. No signature on the attendance sheet will result in an immediate 0 for this lab’s attendance grade. Forgetting to sign the attendance sheet will not be considered a valid excuse to have your lab attendance corrected.
Work together.
Work with your peers to complete this lab. Talk aloud, discuss, troubleshoot problems. You are encouraged to work together so long as you do your own work and you don’t give away answers.
Submit.
When you’re finished, follow the instructions in submit.md to submit your assignment.
Before attending your lab section, you should have read “Match Between the System and the Real World: The 2nd Usability Heuristic Explained.”
Homework: Write a 1 paragraph reflection on how you can apply this reading to your Project 2 in reflection.md.
For Project 2 you will design and build some form of an online catalog. One of the most common types of catalogs is an image gallery (note: image galleries are prohibited for Project 2.) In this part, we’ll explore the common design pattern for an online image gallery.
Objective: Form teams of about 4 persons. Pick an existing image gallery service: 1) as a class, list image gallery services (examples: Google Photos, openclipart.org, Instagram, etc.), 2) a TA will write the services on the board, 3) next, each group should pick one of the services; no group should have the same service. Each team should then analyze the design of their service.
Within your team, document how the design supports these common activities:
For each activity, document how the design supports this: what are the components in the design that the user interacts with to complete the activity? For example, a design may support removing an image 1) when a user’s mouse enters a image thumbnail, 2) then a hidden trash icon button becomes visible, 3) the user can click the trash button and is 4) then prompted with a modal dialog whether they want to 5) permanently delete the image or 6) cancel the action.
Once your team has analyzed how the design supports these common activities, sketch these designs on the board and explain how the design supports these activities to the class. Make sure when explaining the design you specify the user controls that the user interacts with: button, link, thumbnail, check box, X button, etc.
As a class discuss the similarities and differences in the way that these image galleries support the above activities. How familiar are these designs (hint: reading from Part 0)? Does the familiarity make these designs more usable or does familiarity make these designs less usable?
Homework: Write a reflection of the common designs for each activity above in reflection.md. You should write a few sentences about each activity. In your reflection pay special attention to when buttons are used compared to other controls.
This part is intended to be homework.
Objective: Last week you filtered input, and escaped output for insurance.php. However, we didn’t implement any form validation or corrective feedback. This week you’ll implement client and server side form validation and corrective feedback for 2300 insurance!
Validation and Feedback Requirements:
type="email"; FILTER_VALIDATE_EMAIL)Tip: You are not required to make the form sticky. However you will find the form easier to test if you make it sticky.
Hint: Test client and server side feedback separately. To test client-side validation comment-out the server-side feedback (Control/Command + / in VS Code). To test server-side validation comment-out the JavaScript (Control/Command + / in VS Code).
Hint: See flowershop.php if you need a working example of client and server side form validation and feedback.
Note: Client-side form validation and feedback is prohibited unless explicitly permitted by the assignment.
The following individuals made contributions to this assignment.