![Actions ,[object Object],[object Object],[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommandé
Recommandé
Contenu connexe
Plus de UIEpreviews
Plus de UIEpreviews (20)
Web Form Luke W Preview
- 1. “ When a form has multiple pages , there is the need for Next and Back buttons. Most web form guidelines say that the primary action button should be on the left, but in this case, it would seem to make more sense to have the primary button (Continue or Next) on the right , with the secondary button (Back or Previous) on the left . Do you have any thoughts on this topic?” Previous & Next Actions
Notes de l'éditeur
- A few examples of primary and secondary actions
- All those labels, fields, and groups need to do something.. Label Field Action!
- I’ve been advocating this for years and finally decide to formalize the recommedations. So we ran some tests -Etre & I -Great usability testing company Tested 6 options with 23 people. Usability & eye tracking -don’t worry about the aside article is online as of yesterday.
- Fastest performing, least amount of fixations (shorter & fewer) = B But many people commented on C & A’s ability to slow them down & appreciated it. 8 more fixations in C than in A (on average) A actually performed the best.
- E performed worst - 6 people made a mistake out of 23. 6 seconds slower than B. F -required most fixations and longest fixations Though they successfully completed this design, were more efficient with others (according to eye-tracking)
- One of the most common questions I get is about prev & next. can an action which leads people to the previous step of a process be placed to the right of an action that leads users to the next step of a process? One side of the debate argues that there is a natural organization: actions that move you forward are on the right, actions that move you backward are on the left (in places where people read from left to right). The other side argues that the notion of “primary” actions (those that move people forward) outweigh this consideration and “secondary” actions (which are much less used) can be placed to the right of primary actions even if they allow people to access previous steps. The presence of a prominent primary action in the “line of fire” of people filling a Web form, allows them to land on the action they need to take as they finish answering the questions a form requires.
- the first option should be avoided because people may select “Previous” by default assuming it is the primary action on the form since it aligns directly with their path to completion. Providing a visual distinction between these actions but maintaining the same order (as illustrated in the image) helps prevent this issue. In situations where previous and next are both primary actions, don’t break the left to right order as shown in the two bottom-most examples.
- Top-aligned labels are especially prone to challenges of previous and next action positioning because they may lack screen space to the left of the label and input field. In these cases, maintaining a left to right ordering of previous and next actions could lead to inadvertent clicks on “Previous” as people complete the last question on a form. Perhaps the best solution is to think of these actions instead as “Continue” and “Go Back” to help people make forward progress In each of these examples a few simple considerations point to appropriate design solutions: ensuring there is a primary action that guides people forward; being careful not to introduce confusion by shifting the left to right order expected when moving between pages; and knowing when previous and next are both truly primary actions so they can be presented as such