Scribd
Upload
4 views4 pages

Input Hints

The document outlines best practices for implementing input hints in user interface design, emphasizing the importance of clear, concise hints that guide users in data entry. It suggests using distinguishable font styles for hints and ensuring they disappear when the user interacts with the input field. Additionally, it promotes an online course on UI design patterns to enhance skills in creating effective user experiences.

Uploaded by

lilazeybek243
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views4 pages

Input Hints

The document outlines best practices for implementing input hints in user interface design, emphasizing the importance of clear, concise hints that guide users in data entry. It suggests using distinguishable font styles for hints and ensuring they disappear when the user interacts with the input field. Additionally, it promotes an online course on UI design patterns to enhance skills in creating effective user experiences.

Uploaded by

lilazeybek243
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Input Hints

Best Practice: How to Implement Input Hints


Input hints help users establish what information should be entered into an input field. They are
concise descriptions given inside—or just beside—the data entry fields that guide users to enter the
right information. Take to following steps to implement this design pattern:

1 Establish your input fields.

2 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.

3 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.

[Continued on next page]

INTERACTION-DESIGN.ORG

Creative Commons BY-SA license: You are free to edit and redistribute this template, even for commercial use, as long as you give credit to the Interaction Design Foundation. Also, if you remix,
transform, or build upon this template, you must distribute it under the same CC BY-SA license.
[Continued from previous page]

4 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.

INTERACTION-DESIGN.ORG

Creative Commons BY-SA license: You are free to edit and redistribute this template, even for commercial use, as long as you give credit to the Interaction Design Foundation. Also, if you remix,
transform, or build upon this template, you must distribute it under the same CC BY-SA license.
Do you want to learn more?
Learn how to use this template to your best advantage in our online course UI Design Patterns for
Successful Software. Sign up for it today and learn how you can create user interfaces that work
just right if you haven’t already started the course.

UI Design Patterns for Successful Software


Beginner course
User interface (UI) design patterns can be a designer’s best friend, allowing you to build excellent
user experiences with structure and speed. When used in the wrong way, however, they can quickly
lead to experiences that confuse your users... and no-one wants that! Our course UI Design
Patterns for Successful Software will equip you with the knowledge required to master UI design
patterns and secure them as one of the best attributes in your designer’s toolkit. You’ll be guided
through best practices relating to content organization, navigation, data entry, and social
integration—all with detailed templates that you can use in your daily work. You’ll also analyze and
critique popular websites to see how the best of the best utilize UI design patterns to achieve great
UX design. If you found this template useful, then this course is a treasure trove of resources and
guidance that will continue to enhance your knowledge of UI design.

Learn more about this course

INTERACTION-DESIGN.ORG

Creative Commons BY-SA license: You are free to edit and redistribute this template, even for commercial use, as long as you give credit to the Interaction Design Foundation. Also, if you remix,
transform, or build upon this template, you must distribute it under the same CC BY-SA license.
How to advance your career
with our online courses

Take online courses by Get a Course Certificate. Advance your career.


industry experts.
Your answers are graded by Use your new skills in your
Lessons are self-paced so
experts, not machines. Get existing job or to get a new
you'll never be late for class
an industry-recognized job in UX design. Get help
or miss a deadline.
Course Certificate to prove from our community.
your skills.

See all our courses

About the Interaction Design Foundation

With over 66,000 alumni, the Interaction Design Foundation is the biggest design school globally.
Industry leaders such as IBM and Adobe train their teams with our courses, and universities such
as MIT and the University of Cambridge include our courses in their curricula. Our online courses
are taught by industry experts and cover the entire spectrum of UX design from beginner to
advanced. We give you industry-recognized course certificates to advance your career. Since 2002,
we’ve put together the world’s biggest and most authoritative library of open-source UX Design
literature created by such noted authors as Don Norman and Clayton Christensen.

INTERACTION-DESIGN.ORG

Creative Commons BY-SA license: You are free to edit and redistribute this template, even for commercial use, as long as you give credit to the Interaction Design Foundation. Also, if you remix,
transform, or build upon this template, you must distribute it under the same CC BY-SA license.

You might also like