{"id":5724,"date":"2017-01-25T12:07:38","date_gmt":"2017-01-25T12:07:38","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=5724"},"modified":"2020-11-20T17:31:28","modified_gmt":"2020-11-20T17:31:28","slug":"placeholders-are-problematic","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/placeholders-are-problematic\/","title":{"rendered":"Placeholders: Minimal Does Not Mean Simple"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Since placeholders came along, designers have adopted them as means of storing hints. Their appeal lies in their minimal aesthetic and the fact they save space.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Since placeholders came along, designers have adopted them as means of storing hints.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Some designers go one one step further, and replace labels with placeholders. Either way, the placeholder is an Inclusive Design anti-pattern which causes problems for users. Here\u2019s why:<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">1. It\u2019s easy to forget<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The placeholder disappears when the user types. Once it\u2019s gone it\u2019s hard to remember.<\/p>\n<div id='gallery-1' class='gallery galleryid-5724 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/1.-Easy-to-forget.png'><img loading=\"lazy\" decoding=\"async\" width=\"1800\" height=\"828\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/1.-Easy-to-forget.png\" class=\"attachment-full size-full\" alt=\"easy-to-forget\" aria-describedby=\"gallery-1-5725\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/1.-Easy-to-forget.png 1800w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/1.-Easy-to-forget-600x276.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/1.-Easy-to-forget-768x353.png 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/1.-Easy-to-forget-1500x690.png 1500w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-1-5725'>\n\t\t\t\tPlaceholder text disappears as you type\n\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">2. Lack of browser support<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"http:\/\/caniuse.com\/#feat=input-placeholder\" target=\"_blank\" rel=\"noopener noreferrer\">Not all browsers support the placeholder.<\/a> In which case, the user will suffer a broken experience.<\/p>\n<div id='gallery-2' class='gallery galleryid-5724 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/2.-When-unsupported.png'><img loading=\"lazy\" decoding=\"async\" width=\"1800\" height=\"828\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/2.-When-unsupported.png\" class=\"attachment-full size-full\" alt=\"when-unsupported\" aria-describedby=\"gallery-2-5726\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/2.-When-unsupported.png 1800w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/2.-When-unsupported-600x276.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/2.-When-unsupported-768x353.png 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/2.-When-unsupported-1500x690.png 1500w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-2-5726'>\n\t\t\t\tBroken experience for browsers lacking support\n\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">3. Populated values lack clarity<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">It\u2019s obvious that a missing label is fatal. But if the hint is missing, a user will find it harder to provide an answer.<\/p>\n<div id='gallery-3' class='gallery galleryid-5724 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/3.-Populated-values.png'><img loading=\"lazy\" decoding=\"async\" width=\"1800\" height=\"828\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/3.-Populated-values.png\" class=\"attachment-full size-full\" alt=\"populated-values\" aria-describedby=\"gallery-3-5727\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/3.-Populated-values.png 1800w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/3.-Populated-values-600x276.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/3.-Populated-values-768x353.png 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/3.-Populated-values-1500x690.png 1500w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-3-5727'>\n\t\t\t\tPopulated field are hard to use\n\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">4. Reviewing entries before submission is difficult<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A user will need to memorise all the hints in order to check their form entries before submission. This is because as each form field is filled out, the hint disappears. The more fields there are the bigger the problem.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">5. Errors are hard to fix<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Errors are hard to fix because the message and the value lack context. And the hint may contain information to help fix the error.<\/p>\n<div id='gallery-4' class='gallery galleryid-5724 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/5.-Errors.png'><img loading=\"lazy\" decoding=\"async\" width=\"1800\" height=\"828\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/5.-Errors.png\" class=\"attachment-full size-full\" alt=\"errors\" aria-describedby=\"gallery-4-5728\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/5.-Errors.png 1800w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/5.-Errors-600x276.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/5.-Errors-768x353.png 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/5.-Errors-1500x690.png 1500w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-4-5728'>\n\t\t\t\tDifferent hint patterns when there are errors\n\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">You could write a verbose error message. For example <em>\u201cYour password must be at least 8 characters\u201d<\/em> instead of <em>\u201cMust be at least 8 characters\u201d<\/em>. But this doesn\u2019t entirely solve the problem.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">6. Some browsers hide the placeholder on focus<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Some browsers hide the placeholder when the user focuses, instead of when they start typing. This means the user has to read ahead of the current field to read the hint.<\/p>\n<div id='gallery-5' class='gallery galleryid-5724 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/6.-Disappearing-text.png'><img loading=\"lazy\" decoding=\"async\" width=\"1800\" height=\"828\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/6.-Disappearing-text.png\" class=\"attachment-full size-full\" alt=\"disappearing-text\" aria-describedby=\"gallery-5-5729\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/6.-Disappearing-text.png 1800w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/6.-Disappearing-text-600x276.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/6.-Disappearing-text-768x353.png 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/6.-Disappearing-text-1500x690.png 1500w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-5-5729'>\n\t\t\t\tPlaceholders disappear on focus\n\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">7. Placeholder text may be mistaken for a value<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">People that don\u2019t notice the subtle difference in contrast will skip the field mistaking it for a value. One test showed that <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.uxmatters.com\/mt\/archives\/2010\/03\/dont-put-hints-inside-text-boxes-in-web-forms.php\" target=\"_blank\" rel=\"noopener noreferrer\">99% of users thought they didn\u2019t need to enter a value<\/a>. When the user submits the form they will be frustratingly shown an error.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"One test showed that 99% of users thought they didn\u2019t need to enter a value.\"<\/p><\/span><\/blockquote>\n<div id='gallery-6' class='gallery galleryid-5724 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/7.-Mistaken-for-value.png'><img loading=\"lazy\" decoding=\"async\" width=\"1800\" height=\"828\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/7.-Mistaken-for-value.png\" class=\"attachment-full size-full\" alt=\"mistaken-for-value\" aria-describedby=\"gallery-6-5730\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/7.-Mistaken-for-value.png 1800w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/7.-Mistaken-for-value-600x276.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/7.-Mistaken-for-value-768x353.png 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/7.-Mistaken-for-value-1500x690.png 1500w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-6-5730'>\n\t\t\t\tPlaceholders might be mistaken for real values\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">8. They have insufficient contrast<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Placeholder text has a lower contrast to help users realise it\u2019s not a value. Some people will struggle to read the text due to the lack of contrast.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">9. Screen readers may not announce them<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Placeholders may not be read out by screen readers which is the visual equivalent of a blank box.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">10. The hit area is reduced<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Clicking a label moves the focus to the field. This is helpful to everyone but even moreso to people with fine motor skill impairments. Fields with the label and hint outside, increases the size of the hit area.<\/p>\n<div id='gallery-7' class='gallery galleryid-5724 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/10.-Hit-region.png'><img loading=\"lazy\" decoding=\"async\" width=\"1800\" height=\"828\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/10.-Hit-region.png\" class=\"attachment-full size-full\" alt=\"hit-region\" aria-describedby=\"gallery-7-5731\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/10.-Hit-region.png 1800w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/10.-Hit-region-600x276.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/10.-Hit-region-768x353.png 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/10.-Hit-region-1500x690.png 1500w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-7-5731'>\n\t\t\t\tNo label means a smaller hit area.\n\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">11. Placeholder text can be cut off<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If the placeholder is longer than the size of the field, it will be cut off. This means you\u2019re unnecessarily constrained to what information you can put inside it.<\/p>\n<div id='gallery-8' class='gallery galleryid-5724 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/11.-Cut-off.png'><img loading=\"lazy\" decoding=\"async\" width=\"1800\" height=\"828\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/11.-Cut-off.png\" class=\"attachment-full size-full\" alt=\"cut-off\" aria-describedby=\"gallery-8-5733\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/11.-Cut-off.png 1800w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/11.-Cut-off-600x276.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/11.-Cut-off-768x353.png 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/11.-Cut-off-1500x690.png 1500w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-8-5733'>\n\t\t\t\tLong text gets cropped\n\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">12. Some browsers don\u2019t translate them<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">For example, when Chrome translates a web page, it will fail to translate the text inside a placeholder.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">13. Browser auto-complete exacerbates the problem<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The browser\u2019s auto-completion routine populates the fields automatically. This means the placeholder text disappears making it difficult for the user to check the values against what the fields intended.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Summary<\/h2>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"It\u2019s clear\u2014at least in the case of placeholders\u2014that minimal does not mean simple.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Some people ask me if it\u2019s okay to use a placeholder in addition to a label. I say that if the hint is valuable to the user, we should make it easy-to-read and readily accessible. The placeholder doesn\u2019t meet these requirements.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Others say that the placeholder is just an enhancement and not essential to the user. To this I say that if the hint isn\u2019t essential then don\u2019t include it. Content is not an enhancement.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">It\u2019s clear\u2014at least in the case of placeholders\u2014that <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/uxmyths.com\/post\/115783813605\/myth-34-simple-minimal\" target=\"_blank\" rel=\"noopener noreferrer\">minimal does not mean simple<\/a>. Avoid placeholders. <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/adamsilver.io\/articles\/always-use-a-label\/\" target=\"_blank\" rel=\"noopener noreferrer\">Always use a label<\/a>. And, if you do need a hint, place it outside the field.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>This post was originally published on <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/adamsilver.io\/articles\/placeholders-are-problematic\/\" target=\"_blank\" rel=\"noopener noreferrer\">Adam's blog<\/a>.<\/em><\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Further reading:<\/h3>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/marvelapp.com\/blog\/new-ux-design-feeling-overwhelmed\/\" target=\"_blank\" rel=\"noopener noreferrer\">New to UX Design? Feeling Overwhelmed?<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/marvelapp.com\/blog\/body-text-small\/\" target=\"_blank\" rel=\"noopener noreferrer\">Your Body Text Is Too Small<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/marvelapp.com\/blog\/introducing-user-testing-field-guide\/\" target=\"_blank\" rel=\"noopener noreferrer\">Introducing The User Testing Field Guide<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/marvelapp.com\/blog\/testing-ux-writers\/\" target=\"_blank\" rel=\"noopener noreferrer\">Testing for UX Writers: Know When Your Words Are Working<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/marvelapp.com\/blog\/need-ui-guidelines\/\" target=\"_blank\" rel=\"noopener noreferrer\">Why You Need UI Guidelines?<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Since placeholders came along, designers have adopted them as means of storing hints. Their appeal lies in their minimal aesthetic and the fact they save space. &#8220;Since placeholders came along, designers have adopted them as means of storing hints.&#8221; Some designers go one one step further, and replace labels with placeholders. Either way, the placeholder is an Inclusive Design anti-pattern&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/placeholders-are-problematic\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":82,"featured_media":5725,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-5724","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-viewpoint"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"description\" content=\"Since placeholders came along, designers have adopted them as means of storing hints. Their appeal lies in their minimal aesthetic and the fact they save space.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marvelapp.com\/blog\/placeholders-are-problematic\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Placeholders: Minimal Does Not Mean Simple | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"Since placeholders came along, designers have adopted them as means of storing hints. Their appeal lies in their minimal aesthetic and the fact they save space.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/placeholders-are-problematic\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2017-01-25T12:07:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-20T17:31:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/1.-Easy-to-forget.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1800\" \/>\n\t<meta property=\"og:image:height\" content=\"828\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"3 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/marvelapp.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/placeholders-are-problematic\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/1.-Easy-to-forget.png\",\"width\":1800,\"height\":828,\"caption\":\"Placeholder text disappears as you type\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/placeholders-are-problematic\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/placeholders-are-problematic\/\",\"name\":\"Placeholders: Minimal Does Not Mean Simple | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/placeholders-are-problematic\/#primaryimage\"},\"datePublished\":\"2017-01-25T12:07:38+00:00\",\"dateModified\":\"2020-11-20T17:31:28+00:00\",\"description\":\"Since placeholders came along, designers have adopted them as means of storing hints. Their appeal lies in their minimal aesthetic and the fact they save space.\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/placeholders-are-problematic\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/placeholders-are-problematic\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/placeholders-are-problematic\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/b58cd0766cabcab305d4530cd07c3513\"},\"headline\":\"Placeholders: Minimal Does Not Mean Simple\",\"datePublished\":\"2017-01-25T12:07:38+00:00\",\"dateModified\":\"2020-11-20T17:31:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/placeholders-are-problematic\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/placeholders-are-problematic\/#primaryimage\"},\"articleSection\":\"Viewpoint\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/placeholders-are-problematic\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/b58cd0766cabcab305d4530cd07c3513\",\"name\":\"Adam Silver\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c9b46b3f0b18e4a5c7fb7084bb97b1bcd8aef819ea82e61996147a339e4e1c08?s=96&d=mm&r=g\",\"caption\":\"Adam Silver\"},\"description\":\"Designing simple, human and inclusive experiences for the web. Wrote a little book called MaintainableCSS. Follow me on Twitter.\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/5724","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/users\/82"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=5724"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/5724\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/5725"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=5724"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=5724"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=5724"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}