0

I'm designing a checkout flow for an e commerce website and I need to come up with a set 3 kind of tool tips. while they will look similar they will have variations for the following

  1. for providing instructions when i user is filling a field. e.g. email format

  2. for giving focus on a field. e.g. when a required field is not filled out

  3. for indicating an error. e.g. when a credit card number is incorrect

any ideas on how i can achieve this visually, while not over complicating the tool tips

  • 5
    Do you have any designs already that you are using, or are you asking us to design them for you from scratch? – JonW Sep 19 '14 at 9:03
  • I would not use a tool tip for 2 and 3 – paparazzo Sep 20 '14 at 13:17
1

See this PDF by Luke Wroblewski (page 60) for some examples addressing your #1 and #2.

The form can have instructions that are either static (just text sitting there) automatic (highlighting active elements w/instructions as you go), or user-activated. Note that "hover" tooltips won't work on mobile devices, so putting either plain text or a tappable "?" disclosure might be preferable.

For #3, in order to make sure users see errors as they go, consider in-line validation and real-time error checking as fields are completed, instead of waiting for "submit." That way users don't have to scroll back & forth to figure out why the form didn't go through.

In addition to changing colors (green for valid or red for invalid), also consider changing contrast w/a border, changing the input field's BG color, or use bold text or a boxed label on the incorrect field. This is better for users who can't distinguish color, but still require the user to actually notice those cues.

Adding a separate Bootstrap-style validation "arrow-bubble" makes it even more clear which items need attention so the user doesn't have to hunt.

See the same Luke W. PDF (pg 106) for suggestions on inline feedback and good error messages.

|improve this answer|||||
3
  1. for providing instructions when i user is filling a field. e.g. email format ==> Put plain text to the right of the field. Alternatively, a hover tooltip that is of a neutral color and doesn't get in the way.

  2. for giving focus on a field. e.g. when a required field is not filled out ==> Use a red or high saturation asterisk next to the field or color the label to foreshadow required. Highlight in red if they forget. Make sure the field appears in the users field of view so the user can see it.

  3. for indicating an error. e.g. when a credit card number is incorrect ==> put a red or high saturation border around the field. Put the explanatory tooltip in the same color.

|improve this answer|||||
  • Yup. Color is going to be the easiest way to achieve this. – dennislees Sep 19 '14 at 21:12
  • Unless, y'know, color-blind ;) – mc01 Sep 19 '14 at 21:31

Not the answer you're looking for? Browse other questions tagged or ask your own question.