Confirmed users
183
edits
User:P.A./Form user experience improvements: Difference between revisions
User:P.A./Form user experience improvements (view source)
Revision as of 11:56, 28 May 2014
, 28 May 2014Add general themes
(Create page with general overview) |
(Add general themes) |
||
| Line 3: | Line 3: | ||
Submitting information to visited websites, using a '''web form''' or similar mechanism, is an increasingly common use case on the Internet. | Submitting information to visited websites, using a '''web form''' or similar mechanism, is an increasingly common use case on the Internet. | ||
Web forms are currently the preferred way for websites to ask the user for different | Web forms are currently the preferred way for websites to ask the user for different classes of information: | ||
* Common personal information, for example a '''name and address''' for shipping a product. | * Common personal information, for example a '''name and address''' for shipping a product. | ||
* Other identifying information that may be specific to one website, for example a '''username'''. | * Other identifying information that may be specific to one website, for example a '''username'''. | ||
| Line 10: | Line 10: | ||
* Recurring input that may be specific to one website, for example '''search terms'''. | * Recurring input that may be specific to one website, for example '''search terms'''. | ||
* Information that may be reused on different websites, for example the '''e-mail address''' of a contact. | * Information that may be reused on different websites, for example the '''e-mail address''' of a contact. | ||
* Miscellaneous information that is entered only once, for example a | * Miscellaneous information that is entered only once, for example a '''message'''. | ||
Each | Each class of information has different characteristics, but most of them can generally benefit from a mechanism that is able to remember past input and help the user in entering the same data again, on either the same website or a different one. | ||
=== Themes === | |||
To offer a good user experience for all the different classes of information, the web browser needs to: | |||
* '''Identify which class of information is being requested by the website.''' | |||
** For complex data, this includes determining which input field corresponds to which part of the information. | |||
* '''Collect and store data in the most reusable form.''' | |||
** This includes building an accurate, reusable user profile from the available input. | |||
* '''Adapt to different expected input in different websites.''' | |||
** For example, deal with two separate name and surname fields or one single full name field. | |||
** Different websites may have different field validation rules. | |||
* '''Store and provide secret keys and data securely.''' | |||
* '''Provide the simplest experience for completing the current task.''' | |||
** For example, identify when a validation rule applies, and prevent the need of editing the data every time. | |||
There are current and proposed web APIs that help the browser in solving these problems. When updating a website to use them is not possible, the browser should offer a solution that, while not optimal, still improves the overall user experience. Authors interested in upgrading their website to provide a better form experience could benefit from several actions: | |||
* '''Provide meaningful console error messages and suggestions in the browser.''' | |||
** These messages should be available by default to users of developer tools in Firefox. | |||
** For example, indicate why the type of a field cannot be recognized. | |||
* '''Define and evangelize best practices for websites.''' | |||
** For example, a full name field is encouraged over separate name and surname fields. | |||
* '''Encourage sites to adopt new web features.''' | |||
** For example, the <code>autocomplete</code> attribute and the <code>requestAutocomplete</code> method. | |||