29 More User Interface Design Principles
In the the first User Interface Design Principles chapter, we looked at how HTML and CSS help with consistency, ease of navigation, universal usability, and error prevention. Below, we’ll look at how the new techniques we learned in this section help advance these and other important principles of user interface design.
Ease of Navigation
We noted previously how the effective use of the CSS Box Model and display properties allows you to create large, easily-tappable links that will work well for everyone, whether navigating with a mouse, a track pad, or their fingers. Now we can add to that the possibility of using JavaScript to enable pop-up navigation menus so that clutter from navigation links is hidden in an easily-accessible place until the user wants to access it.
Error Prevention
Error prevention is partly about hiding syntax and run-time errors from the user. As we noted before, browsers will do the best they can to display a page that contains syntax errors, whether they come from JavaScript, HTML, or CSS, and will hide many error messages from users in the developer console.
Constraints
Good user interfaces also constrain a user to prevent them from making mistakes or causing errors through their actions. Unavailable options in a user interface should be disabled, forms should be configured so that the user can only enter legal values, and so on. HTML Input elements can help with this – you can configure the type, range, length, and other features of legal input values and constrain how the user is able to set the value of an input element. You can also use the disabled attribute to grey out an input element when it is not appropriate for the user to interact with it. JavaScript functions can decide when input elements should be enabled and can check the values entered in more detail than HTML and CSS can, displaying user-friendly error messages and visual indicators on the page in real time when the user goes wrong.
Affordances
Affordances are visual and other properties of an object that let a user know what they can or should do with that object. Good user interface design makes sure that objects present clear affordances to the user. HTMLÂ buttons and text boxes look clickable, the range slider looks like it should be grabbed and dragged, and so on. We also saw how to use CSS pseudo-classes like hover and active along with other CSS properties such as cursor can make any element look clickable. JavaScript timers and mouseover and focus events can also help interactive elements pop out of the page in a way that makes the user notice what they can do.
Feedback
Feedback is about letting the user know what is going on as they use the interface. When the user interacts with a page, JavaScript functions can respond and display messages to help guide the user. When the user fills in a form, JavaScript functions can check input contents in real time, as the user enters it, and create visual cues using color, images, and on-screen messages to let the user know how they’re doing, as in the example below (from the Instagram sign-up page).
<exercises chapter=”UI2″>
- Create a registration form with userid, password, and email fields. Have JavaScript functions that respond to input events to give feedback as the user types. The feedback should be a colored border (red for any input element with an illegal value) and a small message in a different element displayed to the right of the input element.Email addresses should have an @ character, userids must be a minimum of 6 characters long and should not start with a number, and passwords should be 8 characters long at least, and should contain uppercase characters, lowercase characters, digits, and symbols.
Add a show/hide button that converts the password input element from type password to text and back again.
- Add a number field to the form from question one to allow the user to specify how many “secret words” they want to specify for password recovery. Depending on the browser, the number field both afford and constrain number entry. The number should range from 2 to 5 and should have a default of 2. There should be 5 text boxes below with the last 3 disabled. When the user changes the number of fields, enable or disable text boxes as appropriate. What should you do if the user finds a way to enter a number outside the legal range?
