Thu, Oct 21

Fonts, Forms and More

Today's objectives

Forms, and a bit of type

  • Forms in HTML
  • Styling forms with CSS
  • Form processing
  • Examples
    • Order flow (e-commerce)
    • Booking flow (airline)
    • Visa
    • Trusted traveller program
  • JavaScript form validation
  • Testing forms
  • Prototyping forms
  • Fonts - intro
  • UX design with Adobe XD: Basics (for next week)

Tasks

In-class practice.

Presentations

Forms intro

Forms- implementation and validation

Forms-implementation and validation

Forms-implementation and validation

Forms-design and styling

Forms-design and styling

Fonts

Fonts

Agenda

Agenda

Examples

Example: SCAT Airlines
http://www.scat.kz/kz/
Example: Apply for a visa
https://www.visa.gov.tj/index.html#/apply
Example: Buy a new shiny thing
https://www.apple.com/ca/
Example: Trusted Traveler Programs
https://ttp.dhs.gov

Readings

A good intro to simple form design.
https://www.seerinteractive.com/blog/ux-checklist-series-form-design/
Fundamentals of form design Required
https://www.nngroup.com/articles/web-form-design/

Preparation

Make sure Adobe XD is installed and working on your computer. For next class, please review https://www.adobe.com/ca/products/xd/learn/get-started-xd-design.html Required and https://www.adobe.com/ca/products/xd/learn/get-started-xd-prototype.html Required

Samples

Here you will find any sample files you need for class.

Using Google Fonts

See the Pen Untitled by Robert Currie (@rcurrie) on CodePen.



Minimal form (HTML only)

See the Pen Super basic form by Robert Currie (@rcurrie) on CodePen.



Basic form elements (HTML only)

See the Pen Basic form by Robert Currie (@rcurrie) on CodePen.



Form with labels and action

See the Pen Form with labels and action by Robert Currie (@rcurrie) on CodePen.



Form with CSS

See the Pen Form with real action by Robert Currie (@rcurrie) on CodePen.



Tutorials

A quick intro
https://blog.logrocket.com/how-to-style-forms-with-css-a-beginners-guide/
Styling forms
https://developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms
Code examples
https://codepen.io/collection/KuDsH?cursor=ZD0xJm89MSZwPTEmdj0zMQ==
Your first form
https://developer.mozilla.org/en-US/docs/Learn/Forms/Your_first_form
Best practices
https://xd.adobe.com/ideas/principles/web-design/best-practices-form-design/

Resources

Getting started with form styles
Basic CSS for forms.
Fonts: what's in your browser?
CSS Font Stacks

Tools

Google fonts
Free fonts hosted by Google you can use in your web site. You can also download the fonts and serve them from your server, for a higher level of privacy.
Adobe TypeKit fonts
You may have access to these, depending on your Adobe CC subscription details.
Assignment 05
Add a form

Using your Assignment 4 as a starting point, add a form to it. The idea is to collect data from web site visitors in order to help them plan their trip to Iceland. Focus on clarity, hierarchy and flow of interactions, and use of the best HTML form elements.

Here are the pieces of information you are to collect. Think about the order, labels, sizes, any default settings, what are required fields and what are optional, and any other aspects of the user experience.

Approach: Be an active designer. Research, think about the project from the user's perspective, and provide solutions to the best of your ability. There may be details of the design brief that are missing information or have not be 100% thought through. Respond to the intent of the request - to get information about web site visitors. Contact me (slack public channel messages are best) if you need clarification.

Add headings, instructions, or other element you think would be helpful. Make sure to use the appropriate form element for each field. Form validation is not required, but feel free to add if you wish to experiment. Add or alter fields if needed, but all the information noted below must be collected.

  • Name
  • How you will get there - fly or ferry?
  • Reasons for visit:
    • See puffins
    • Volcano viewing
    • Food
    • Glacier hiking
    • Spas and pools
    • Diving
    • Pony riding
    • Sightseeing
    • Other (allow users to provide own answer )
  • Country of origin
  • How long a visit?
  • When do you plan to visit?
  • Email address
  • Would you like to sign up for our e-newsletter?
  • How do you expect to travel during your visit?
  • Would you like a copy of our free printed vacation guide? (Note: if they do, you will need to capture their mailing address in the form, with each "chunk" of information as a separate field. Look at similar forms to see how they are structured.)
  • Room for additional comments or questions.

What happens when people submit the form? For this assignment, use the following:
<form action="http://rcurrie.nscadlab.ca/form-processor.php" method="post">

Create a page that represents what they will see when the form is submitted. Call this file success.html

Name the assignment folder "assignment-05" and add a link to it from your main index page.

Due Wed, Oct 27, 6:00 PM.

Late assignment penalties

For this assignment, late submissions will be penalized at 10% of the total mark (that is, if an assignment is graded out of 10, you will lose 1 point per day, starting on the due date.)

A 1-hour grace period after the assignment due time will be given to avoid any technical issues related to internet speed resulting in late assignment penalties.

The best approach, however, is to submit work early.

Professional practice

Start your own collection of links to good (and bad) forms and interface elements. Is there something that really works well? Or poorly? Did you have a good or bad experience? A collection of precedents is a vital part of every designer's toolbox.

Need help?

Contact me - Slack is best.


Robert Currie
This page was last updated at 2022-05-17 12:45.