UX Document on Forms (Food Apps)


Forms play an essential role in user persona gathering, where businesses(restaurants) get benefited with knowing like/dislike(with the information about “age”, “geographical location” etc.) of their customers. We fill out forms regularly using our email’s or social networks to participate in discussions or giving our views on particular food, video, photo or anything with we concerned. As this is an traditional method of connecting consumer to business, it is so very important to make its experience faster, easier and more usable.

Understanding FORM


User fields — These fields must be captured in signup process in App UX. Actual call may create a user with certain fields and then update the user with some other fields making the UI still look like signup.

Field - Type - Requirement

First Name — Alpha Single Line — Mandatory
Last Name — Alpha Single Line — Mandatory
Email — Email Single Line — Mandatory
*Password — Password — Optional
Phone — Number Single Line — Optional
Date of Birth — Date — Optional
Anniversary — Date — Optional
Address — Alphanumeric Single Line — Optional
City — Alpha Single Line — Optional
State — Alpha Single Line / Single Select — Optional
**Zip Code — Number Single Line — Optional
Gender — Single Select — Optional
Favorite Location — Single or Multi select — Optional
Subscribe to Emails — Checkbox — Optional

* Password is mandatory in case of Email signup. In case of Facebook signup, password is not required. Although a user who has signed up with Facebook earlier can still reset password and have a password. Such users will be able to signup with facebook as well as with a password. However, at the time of signup, a user can either signup with Facebook or with Email/Password.

** All US Zip codes are 5 digit numbers. However, when implementing for non-US businesses or for businesses with their location(s) outside US, Zip codes (Postal Codes) can be alphanumeric or even alphabets. Database does not impose any restriction on the type of this field.

SCENARIO 1 — Currently used

  • Single signup form with all mandatory and optional fields on the same screen.
  • User has to go through the whole list to get signed up.
  • User has to check for the mandatory fields before completing the form.
  • To create password user have to put it twice to avoid mistakes.
  • No information/hint provided to user for the number of fields present in the form.
  • Finally long forms doesn’t feel easy to fill and can make user to drop signing up to the business.


Dividing form in two parts with mandatory fields on the first part and all optional fields to the next part(may be two screens one following other).

  • Easy to look up all mandatory fields.
  • Form look small and decreases chance of user drop for signing up.
  • Still user has to go through both parts(as explained above) to complete sign up process.

SCENARIO 3 — Fastest

Only “Email” and “Password(single field with option to show/hide password visibility)” to compile sign up process that means user can sign up with just providing email address and creating password for his/her account.


All optional fields can be filled afterwords:

CASE 1: After spending some time in app(may be 5min) we can pop out a small form with only fields(optional fields) that can help business to know his customer’s taste(can be different in ages and geographical conditions) better and can reward them with great offers.

CASE 2: We can ask for the above information in the very next session(user login for next time).


Same as above but the exception is we have more than 2 mandatory fields.

We can create a widget out of it, where form is divided in two steps process. First step will contain “Email” and “password” where the next step contains other mandatory fields.

Please recommend if you feel the above piece of information is helpful.

About Author

Kailash Singh Bhati is a Vice President of Design at Punchh, leading a highly creative team of designers and looking for real and tough challenges that can squeeze out the best of him.

Follow him @singhkailash_