What important aspect of interaction design does a simplified data entry directly impact?
a. Acceptability
b. Desirability
c. Usability
c. Usability
What is the recommended maximum number of suggestions to present to users?
10 options
*The limit may best be set according to the screen size or simply as a product of the number of items you feel can be immediately scanned.
What are the 6 steps to implementing autocomplete?
- Use a highly visible input field
- Display options in the right place
- Allow scrolling down the options
- Highlight the matching search term
- Prioritize the closest match
6.
What should you bear in mind with autocomplete?
a. Users prefer larger numbers of suggestions, even if they have to scroll
b. You should offer a small number of suggestions based on the most popular choices first.
c. It’s easy to prioritize the list of suggestions based on common sense.
b. You should offer a small number of suggestions based on the most popular choices first.
What is the recommended maximum number of suggestions to present to users?
10
What are the 5 best practices to implement input fields?
- Establish the different inputs you will require from the user.
- Establish how much information will be entered
- Choose an appropriate color for the input field
- Assign appropriate labels to each of the input fields
- For a useful piece of informative feedback, when the user has clicked in a particular input field, you can use an intermittently visible vertical black line
What is one benefit of putting a border around an editable input field?
a. To enhance the visual attractiveness of the input field
b. To conform with general web design regulations
c. To make it stand out from the non-editable background
c. To make it stand out from the non-editable background
What are the 4 best practices to implement refined search?
- Provide the users with an input field in which to enter their search term.
- Identify the different categories of contents the users can use to refine their search. Assign logical names to these categories, so the users are in no doubt which section of the user interface search results will be generated from.
- Put these different ‘refine search’ categories into another user interface design pattern; typically, a dropdown menu is used for this purpose (see the example above). As a default search option, you can select ‘all’, or simply leave the default option blank in the menu so the search is not refined at first.
- Allow the users to select an option in the ‘refine search’ menu using the mouse and keyboard. Once an option has been selected, the users should be able to move back to the input field by using the shift key or clicking on any area within the input field.
What benefits do refined search options have when they are implemented in an e-commerce webpage offering a very diverse and extensive range of products?
a. They allow users to find unexpected items.
b. They improve the user’s feeling of control.
c. They help the retailer sell more products.
b. They improve the user’s feeling of control.
What refined search option is NOT relevant for a webpage offering streaming music services?
a. File size
b. Mood
c. New Releases
The file size filter is not so relevant for a music streaming app because it is a streaming tool. Music usually has the same small size and is easier to stream than a movie, for example.
Which two approaches to forgiving formats exist?
a. Correcting mistakes and offering multiple strategies
b. Correcting mistakes and providing preceding warnings
c. Providing preceding warnings and offering multiple strategies
a. Correcting mistakes and offering multiple strategies
Which of the following is true about forgiving formats?
a. Users might become disappointed later because the interface let them continue without entering needed information.
b. Users may take any approach they like to provide whatever information they want.
c. Users have a variety of approaches so they can resort to entering something else if another format/method didn’t occur to them.
c. Users have a variety of approaches so they can resort to entering something else if another format/method didn’t occur to them.
What are the 7 best practices to implement event calendars?
- The event calendar is typically hidden from view at first, but accessed either by clicking in the associated input field or on an icon at the end of this field. If you are using the latter approach, make sure you employ a clear and unambiguous icon that leaves the user in no doubt that a calendar will appear when clicked.
- When the event calendar is displayed, ensure that an appropriate date range appears. For example, if the users are booking flight tickets, they should only be shown the dates available. Therefore, there should be no way of choosing dates in the past or selecting a day on which there are no tickets available. To prevent users from viewing certain dates as available when they are not, use a different and less eye-catching color (e.g., light grey) for these days, and make sure they are inactive (i.e., unclickable).
- Provide the user with shortcuts, such as switching between whole months and years, jumping to today’s date (especially when this is not the default), and closing the calendar.
- When the user selects a date, that action should automatically fill the input field, with no delay in between the selection and the date appearing; otherwise, the user might think the choice has not been logged and he/she needs to do something else.
- If users are entering a date range, you must make sure they cannot enter the end date as the start date. Therefore, you must design the system so that the date furthest in the future is automatically set as the end date.
- Within the event calendar, ensure that whole week are shown, even when they span over two different months. Obscure or grey out the dates that appear from other months, but allow the user to select them still.
- While you do not want the event calendar to span a large area of the user interface—as the process of identifying and selecting a particular date would take longer—the dates should be large enough for the user to click on them with ease and without accidentally selecting an unintended date.
What are the 4 best practice on how to implement input hints?
- Establish your input fields
- Provide short hints that are instantly understandable and directly linked to the task. For example, if the user is requested to enter his/her name, the hint might be an example name (such as “e.g., John Smith”). If the input field is for the user’s date of birth, the hint may state “e.g., 12/31/1976”(note the date format is geared for American users here). Ambiguity can be confusing, so these input hints must be in line with what the user would expect; this is not an area to show creative flair. Simply provide the user with the information necessary to satisfy all elements of the task as quickly as possible.
- Now decide on the superficial aspects of the input hints. Traditionally, the hint font is in a lighter color to the user input font. This allows users to distinguish immediately between the input fields that have been completed and those that are still outstanding. You may want to use a different font entirely or show the input hints in italics. Just make sure the users can perceive the difference between their own input and the hints themselves.
- Once the user clicks in an input field, make sure the input hint disappears, so the user does not end up typing in the box with the hint still present.
Why are input hints inside data entry fields often a lighter shade than other text on that webpage?
To distinguish between the hint and input from the user
How can you prevent users from forgetting what they should input after they have started typing while maintaining the usability of the editable field?
Position the input hint beneath the editable area.
Which of the following is good advice for how you should design input hints?
Ensure the hint vanishes when the user starts typing in the field/box. Or keep it visible outside of the editable area.
