[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"\u002Farticles\u002Fshould-required-fields-be-marked":3},{"id":4,"title":5,"body":6,"date":185,"description":186,"extension":187,"head":188,"imageUrl":104,"meta":189,"navigation":190,"ogImage":188,"path":191,"robots":188,"schemaOrg":188,"seo":192,"sitemap":193,"stem":194,"__hash__":195},"articles\u002Farticles\u002F05.Should-required-fields-be-marked.md","Should required fields be marked?",{"type":7,"value":8,"toc":177},"minimark",[9,13,17,20,23,26,29,34,37,43,46,49,54,57,60,63,68,71,76,79,84,87,90,93,98,101,105,109,112,115,119,122,125,128,131,134,155,159],[10,11,5],"h1",{"id":12},"should-required-fields-be-marked",[14,15,16],"p",{},"It might seem like not a big issue, but in the UX world we try to make users life as easy as possible, so even such\nsmall detail as marking a field required matters.",[14,18,19],{},"I've researched a lot of materials about should we do this or not. The conclusion is...there is no unanimous opinion.",[14,21,22],{},"A very popular resource, NNGroup, states: \"Using an asterisk to mark required fields is an easy way to improve the\nusability of your forms. Only marking optional fields makes it difficult for people to fill out the form.\"",[14,24,25],{},"They provide many reasons why we should mark required fields and how to do this. I'm not going to copy the whole article\nhere, you can read it by yourself.",[14,27,28],{},"However, there is another famous UI book written in Russian. The author of this book is against marking fields as\nrequired due to the following reasons.",[30,31,33],"h2",{"id":32},"why-we-shouldnt-use-asterisks-an-opinion","Why we shouldn't use asterisks (an opinion)",[14,35,36],{},"Let's go over these reasons.",[38,39,40],"blockquote",{},[14,41,42],{},"It looks technical, not human. We design for humans, not for machines. Asterisks are \"techno-dependent\" symbols",[14,44,45],{},"In terms of humanity, an asterisk might indeed look technical, a little bit cryptic. But the thing is that people are\ngetting used to the symbol so much that I don't think it's a big issue.",[14,47,48],{},"From a philosophical point of view, it might make sense, but in practice, it doesn't have any sense.",[38,50,51],{},[14,52,53],{},"Asterisks are an invention of WEB. Operating systems usually don't use them at all.",[14,55,56],{},"That's an interesting observation.",[14,58,59],{},"But what I realized is that in operating systems most of the forms are related to settings, where you choose options,\nnot sending data to servers.",[14,61,62],{},"In most cases, these forms consist of dropdowns, toggles, and checkboxes and have a predefined number of options. So\nthey are all required by default.",[38,64,65],{},[14,66,67],{},"In most forms all the fields should be required. If the field is not required, don't ask it.",[14,69,70],{},"This one is very true. If it's possible not to ask users something, it's better not to ask. So ideally all the fields\nare always required. In such a case, it might be obvious that we ask to fill in all of the fields. But that's an ideal\nworld, in reality, things can be more complicated.",[38,72,73],{},[14,74,75],{},"If the field is not required, but we still want people to fill it, it's possible to state the requirement inside the\nfield label.",[14,77,78],{},"Another interesting approach. The author shows an example where you have a site URL input and the label says \"Your site,\nif you have one\". Or, the label is \"Site\" and there is a hint below it: \"if you have one\".",[80,81],"v-image",{"alt":82,"src":83},"Providing hint below the input","\u002Fimg\u002Fshould-required-fields-be-marked\u002Fhint.png",[14,85,86],{},"On the one hand, it feels more natural to me. It's like asking people in real life \"Hey, may I have caramel syrup if you\nhave one?\".",[14,88,89],{},"On the other hand, due to our habits, we'll probably more quickly understand if the field is required or not by looking\nat the asterisk or \"optional\" label.",[14,91,92],{},"That's all related to Jakob's law: \"users prefer your site to work the same way as all the other sites they already\nknow\".",[38,94,95],{},[14,96,97],{},"You can separate required and non required fields",[14,99,100],{},"This is a nice trick in my opinion. At first ask for required fields, and non-required fields can go later. By using\nvisual separation, the sense of the fields (they should feel optional), appropriate labels and fields, it might be a\nsolution to remove asterisks that clutter other labels.",[80,102],{"alt":103,"src":104},"Separating required and non required fields","\u002Fimg\u002Fshould-required-fields-be-marked\u002Fseparating.png",[30,106,108],{"id":107},"disabling-the-submit-button","Disabling the submit button",[14,110,111],{},"Another option is to disable submit button before the form is filled.",[14,113,114],{},"However, this is quite a dangerous step. There are some situations where it works (such as phone verification form or\naccepting terms and conditions), but in general it's considered as anti-pattern.",[30,116,118],{"id":117},"final-thoughts","Final thoughts",[14,120,121],{},"Don't forget that some of the forms don't need asterisks at all.",[14,123,124],{},"Such forms as login, credit cards and probably some other common forms that are already become very common don't need\nthis over-explanation.",[14,126,127],{},"The same applied to a form that has one field and it's explicit that you're asking for this form. For example, a phone\nverification form assumes that you have to fill your verification code and that's it.",[14,129,130],{},"Such forms are usually surrounded by appropriate context, such as a title and hints.",[14,132,133],{},"Overall, I think it highly depends on the form and each case is unique. I'm still not a fan of marking every field as\nrequired if you have dozens of fields.",[14,135,136,137,144,145,148,149,154],{},"Remember, apart from ",[138,139,143],"a",{"href":140,"rel":141},"https:\u002F\u002Flawsofux.com\u002Fjakobs-law\u002F",[142],"nofollow","Jakob’s Law"," — which says users prefer familiar patterns —",[146,147],"br",{},"\nthere’s also the ",[138,150,153],{"href":151,"rel":152},"https:\u002F\u002Flawsofux.com\u002Faesthetic-usability-effect\u002F",[142],"Aesthetic-Usability Effect",",\nwhere cleaner designs are perceived as easier to use.",[30,156,158],{"id":157},"further-reading","Further reading",[160,161,162,170],"ul",{},[163,164,165,169],"li",{},[138,166,168],{"href":167},"\u002Farticles\u002Fvertical-vs-horizontal-navigation","Vertical vs horizontal navigation: which one is better for your app?"," -\nA practical comparison of two common navigation layouts — with pros, cons, and real-life examples.",[163,171,172,176],{},[138,173,175],{"href":174},"\u002Farticles\u002Fwhat-is-optimistic-ui","What is Optimistic UI?"," - A quick look at how to make your interface feel instant by\nshowing results before the server responds.",{"title":178,"searchDepth":179,"depth":179,"links":180},"",2,[181,182,183,184],{"id":32,"depth":179,"text":33},{"id":107,"depth":179,"text":108},{"id":117,"depth":179,"text":118},{"id":157,"depth":179,"text":158},"2023-01-28T17:19:11+04:00","Should required fields be marked with an asterisk? While it may seem like a small thing, it can have a big impact on usability — and UX experts still disagree on the best approach.\n","md",null,{},true,"\u002Farticles\u002Fshould-required-fields-be-marked",{"title":5,"description":186},{"loc":191},"articles\u002F05.Should-required-fields-be-marked","_uuzGwytQ1-qFF4GputZRxVUAffCwdPvdp6_289c-uQ"]