"Search as you type" uses JavaSript to filter the page as the user types. The "close-x" is added via JavaScript when content is entered into the field.
"Search as you type" uses JavaSript to filter the page as the user types. The "close-x" is added via JavaScript when content is entered into the field.
If your settings page may contain multiple settings that need to be viewed on one page if possible so that the member can make the correct choice. This design conserves vertical space so that each potential setting on the page can be viewed and evaluated before a decision is made.
Your settings aren't immediately understandable.
Perhaps not all of your options are easily understood, so an expanded explanation snippet will generate enough confidence to click a button to open a new page.
Your settings behavior is not simple/consistent.
In the case of the VerifyU Settings page, for example, some settings launch into a workflow, others toggle on/off during the page, and some cannot be changed at all. The expander pattern allows you to hide "what can I do with this" behind a click, so not every expandable section has to have the same behavior (or even the same number of potential actions).
Optional elements of note:
Most pages will not benefit from having a large icon for each line. Evaluate whether the icon is actually providing value beyond decoration.
Many may not have a simple "ON" or "OFF" value. Use your discretion as to whether that element is needed at all, or if some other piece of information would help the member make a decision about whether to click the expander.
In this example, I used animated icons for the expand/collapse. We typically also have a method using paired icons -- one hidden, the other shown -- which toggle visibility. Either method is acceptable, and you may work with a software dev to figure out which is best for your scenario. (I think the animation one is cooler, but you need to make sure the javascript is set up correctly for your click area scenario)
The .mini-heading title over the .item-container would only be necessary if the page contains multiple tile groupings.
If you've gathered all your info, the application takes 30-45 minutes
2We Review Your Application & Notify You of the Status
2 business days
3Your School Certifies Your Enrollment & Loan Amount
10 business days
View Code Hide Code
Timeline without Numbers
See Offers in Under 60 Seconds
What To Expect
Find Your Personalized Offers
Get prequalified card offers with no risk and no obligation.
Choose Your Favorite Offer
Decide which credit card is right for you.
Complete the Online Application
We'll prefill your info to make it even easier.
View Code Hide Code
Wizards
Wizards should be used for linear, multi-step workflows.
First Step
The first step has a "Next Step »" button only.
Personal Information
View Code Hide Code
Middle Steps
Middle steps include "Next Step »" and "« Previous Step" buttons.
Details
Sub Title for a Group of Fields
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam laoreet ullamcorper consectetur. Vivamus mollis pretium facilisis. Donec sodales volutpat cursus. Nulla facilisi. Fusce in orci non turpis tincidunt blandit eu sed massa.
On the second-to-last step, an orange heading reminds the user to review what they have entered before proceeding.
The primary button should tell the user exactly what hitting the button is going to do. In some wizards, this text might be decided based on user input. (i.e. "Transfer Now" vs. "Schedule Transfer"). (No forward arrow » on this button.)
When the number of steps greatly exceeds the available horizontal space, the nav can be reduced to a "Step 1 of n" style.
In this condensed nav, three dots should appear, indicating first, last, and all intermediate steps.
Personal Information
Step 1 of 13
Address
Step 10 of 13
Done!
Step 13 of 13
View Code Hide Code
Focused Wizard
This wizard appears narrower and centered on desktop. Best used with a series of small single-pointed questions. Buttons sit side-by-side on desktops and stack on mobile.
