Schalk Venter
🔧 Front-end Development / 🎨 UI Design / 🌍 Social Good / ❤️ Destigmatising mental illness
User Input is Hard!
Let's talk pitfalls, patterns and pain.
UI DESIGNER:
Let me add a basic text input
BASIC TEXT INPUT:
Yikes!
"Forms suck. We should design accordingly."
Luke Wroblewski
Web Form Design (2008)
Forms are Deceptive
"At first glance, forms are rather easy to grasp. In less than an hour, you’ll have text boxes, radio buttons and select boxes on the page. But their low barrier to entry turns them into what Heydon Pickering refers to as a “10,000-volt electromagnet for attracting usability problems."
Adam Silver
Form Design Patterns (2018)
There is No Escape
"Want to join a fun new social network? Just fill in this form. Care to share this great video with a close friend? Just fill in a form. Want to respond to an interesting author’s blog post? You guessed it—a form. Just about everywhere people want to participate in social interactions online, forms get in the way. And since participation—number of members, number of activities completed, etc.—is how most social applications thrive, the organizations running these sites rely on forms for business success."
Luke Wroblewski
Web Form Design (2008)
The $300 Million Button
"It’s hard to imagine a form that could be simpler: two fields, two buttons, and one link. Yet, it turns out this form was preventing customers from purchasing products from a major e-commerce site, to the tune of $300,000,000 a year. What was even worse: the designers of the site had no clue there was even a problem."
Jared M. Spool
The $300 Million Button
Input is Scary
"these forms to a quick round of eyetracking tests and have analyzed the resulting data to better understand what makes Web forms usable—or unusable. [...] Rookies needed reassurance that their actions were correct, so while typing search strings, they continually checked whether the input field they were using was actually the search field. Though we first noticed this pattern while analyzing the use of search forms, we found that this pattern was also characteristic of novice users’ behavior during more complex tasks"
Matteo Penzo
Evaluating The Usability of Search Forms (2006)
Commonality?
AJAX
"Ajax (also AJAX /ˈeɪdʒæks/; short for "Asynchronous JavaScript and XML") is a set of web development techniques using many web technologies on the client side to create asynchronous web applications. With Ajax, web applications can send and retrieve data from a server asynchronously (in the background) without interfering with the display and behaviour of the existing page."
Wikipedia
Ship of Theseus
"In the metaphysics of identity, the ship of Theseus is a thought experiment that raises the question of whether an object that has had all of its components replaced remains fundamentally the same object. [...] It is supposed that the famous ship sailed by the hero Theseus in a great battle was kept in a harbor as a museum piece, and as the years went by some of the wooden parts began to rot and were replaced by new ones; then, after a century or so, every part had been replaced. The question then is if the "restored" ship is still the same object as the original."
Wikipedia
Define: Form
"Standard HTML form submission, as described in the previous article, loads the URL where the data was sent, which means the browser window navigates with a full page load. Avoiding a full page load can provide a smoother experience by avoiding network lag, and possible visual issues like flickering. Many modern UIs only use HTML forms to collect input from the user, and not for data submission."
Mozilla Developer Network
User Expectations
"And this may work for radio buttons and checkboxes, but what if there were text boxes that could be used to enter a price range? When would users expect the form to submit? Submitting while typing is out of the question. This leaves submitting the form on blur (tabbing or clicking out of the field), which is odd and unintuitive. We’d need a submit button just for that box."
Adam Silver
Form Design Patterns (2018)
VIEW
CONTROLLER
MODEL
VIEW
MODEL
VIEWMODEL
VIEW
VIEW
VIEW
VIEW
VIEW
VIEW
VIEWMODEL
VIEW
VIEWMODEL
Data Syncronization
"Data synchronization is the process of establishing consistency among data from a source to a target data storage and vice versa and the continuous harmonization of the data over time. It is fundamental to a wide variety of applications, including file synchronization and mobile device synchronization e.g., for PDAs."
Mozilla Developer Network
Respect The Server
"Fully exploiting a hardware configuration requires a variety of locking techniques, ranging from locking an entire database to entire tables to disk blocks to individual table rows. The appropriate lock granularity depends on the workload. The smaller the object that is locked, the less the chance of database requests blocking each other, while the hardware idles. Typically row locks are necessary to support high volume transaction processing applications at the cost of processing overhead to manage the larger number of locks."
Wikipedia
Going Offline
"Frequently not having any data connection in even the wealthiest and most developed cities of the world has led us to conclude that no, the mobile connectivity/bandwidth issue isn’t just going to solve itself on a global level anywhere in the near future. We’ve generally been rather optimistic about the whole problem, often thinking that coverage and bandwidth are sure to increase continually, but our recent experiences have made this attitude appear increasingly naïve."
Hoodie
Merging Data
"In version control, merging (also called integration) is a fundamental operation that reconciles multiple changes made to a version-controlled collection of files. [...] In some cases, the merge can be performed automatically, because there is sufficient history information to reconstruct the changes, and the changes do not conflict. In other cases, a person must decide exactly what the resulting files should contain. Many revision control software tools include merge capabilities."
Wikipedia
Sync or Swim
"If users are offline, changes to data can’t be available to other users. This means that several users may work on the same data without seeing how others have modified it. If you can’t avoid such a scenario, focus on exception handling and determining rules for how to deal with those exceptions."
Yalantis
No Conflict
Conflict
Resolving Conflicts
- Last write always wins
- First update always wins
- Remote source always wins
- Treat conflicts as separate items
- Ask user to decide
Asking the User
User Input is Hard! Let's talk pitfalls, patterns and pain.
ID200-4.3: User Input is Hard!
By Schalk Venter
ID200-4.3: User Input is Hard!
Let's talk pitfalls, patterns and pain.
- 885
