{"id":9048,"date":"2019-01-14T10:25:55","date_gmt":"2019-01-14T09:25:55","guid":{"rendered":"https:\/\/uxstudioteam.com\/?p=9048"},"modified":"2022-08-17T16:11:22","modified_gmt":"2022-08-17T15:11:22","slug":"form-design","status":"publish","type":"post","link":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/form-design\/","title":{"rendered":"Your Ultimate Guide To Form Design"},"content":{"rendered":"<p><span>Just imagine how you\u2019d feel if you walked into a shop, collected everything in your basket, but couldn\u2019t find the cashier.\u00a0 In the end, you\u2019d likely get extremely upset and leave everything behind without spending a cent. Well, exactly that&#8217;s what happens with bad form design in your checkout process.<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-9253\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/ux-from-design-720x438.jpg\" alt=\"UX of designing form\" width=\"720\" height=\"438\" srcset=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/ux-from-design-720x438.jpg 720w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/ux-from-design-768x468.jpg 768w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/ux-from-design.jpg 946w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/p>\n<p><!--more--><\/p>\n<p><span>Bad form designs have saved me hundreds of dollars. Long, painful forms have potentially lost your company a couple thousand bucks by scaring your customers away.<\/span><\/p>\n<p><span>Forms look like the most innocent and straightforward UI components, yet they handle the most important interactions with your product. They channel your users to sign up and pay. <\/span><\/p>\n<p><span>I don\u2019t need to tell you the important role these steps play in a well-functioning business. But I\u2019ve got some good news as well: Getting good form design does not have to come that hard after all. <\/span><\/p>\n<p><span>In this guide, I\u2019ve collected 33 form design best practices which you can apply right now. It provides a superb starting point to start testing and experimenting to find out what works best for you. Some of the things we\u2019ll cover:<\/span><\/p>\n<ul>\n<li><span>Copy matters!<\/span><\/li>\n<li><span>Optimizing for mobile form design<\/span><\/li>\n<li><span>Using the correct input type<\/span><\/li>\n<li><span>Getting smart by doing the work instead of your user<\/span><\/li>\n<li><span>Proper layout for good form design <\/span><\/li>\n<li><span>The devil of form design in the details<\/span><\/li>\n<\/ul>\n<h2><span>Copy matters!<\/span><\/h2>\n<p><span>You know copy matters. A lot. We have even written about it on our blog <\/span><a href=\"https:\/\/uxstudioteam.com\/ux-blog\/microcopy\/\"><span>here<\/span><\/a><span>. You can make huge improvements in your conversion rates by just modifying the copy around your forms.<\/span><\/p>\n<h3><span>1. Let users know the benefits they get by completing your form<\/span><\/h3>\n<p><span>\u201cIn my free time, I like to fill out different online forms. I just love it!\u201d said no one ever. Users need a solid idea of the benefits they get by investing their time in such an undesirable activity.<\/span><\/p>\n<p><span>In a checkout process, the benefits make themselves pretty obvious but what about in a signup? At the top of your form, highlight what they can do once they register. They could access exclusive content, a community or a free trial. Don\u2019t shy away from getting them excited.<\/span><\/p>\n<figure id=\"attachment_9059\" aria-describedby=\"caption-attachment-9059\" style=\"width: 720px\" class=\"wp-caption alignnone\"><img decoding=\"async\" loading=\"lazy\" class=\"size-medium wp-image-9059\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image9-720x410.png\" alt=\"Form design use of Marvel\" width=\"720\" height=\"410\" srcset=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image9-720x410.png 720w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image9-768x437.png 768w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image9-1024x582.png 1024w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image9.png 1999w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><figcaption id=\"caption-attachment-9059\" class=\"wp-caption-text\">Marvel showcasing their big clients and number of users as social proof<\/figcaption><\/figure>\n<h3><span>2. Use social proof next to the registration window<\/span><\/h3>\n<p><span>As humans, we all want to belong somewhere. We need to know if a product merits our time, money and attention. And showing the proof that other users like us, who have already joined the club and enjoy it a lot, really makes your case. <\/span><\/p>\n<p><span>Your product has some big names on board? Show those logos right next to your signup form! The number of satisfied users you already have? That can make your hesitant visitors feel more comfortable about signing up. Now take pride in what you\u2019ve achieved!<\/span><\/p>\n<h3><span>3. Be specific about errors<\/span><\/h3>\n<p><span>\u201cSomething went wrong.\u201d Well, thanks, I realized that\u2026 Still, how many times have I read this? It makes me extremely frustrated when I don\u2019t even get a hint about what exactly went wrong. Has someone already taken my username? Haven\u2019t I made my password strong enough? Do your users a favor and make it as specific as possible.<\/span><\/p>\n<figure id=\"attachment_9054\" aria-describedby=\"caption-attachment-9054\" style=\"width: 430px\" class=\"wp-caption alignnone\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-9054\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image3.png\" alt=\"Forms design illustration for error messages\" width=\"430\" height=\"253\" \/><figcaption id=\"caption-attachment-9054\" class=\"wp-caption-text\">Details?<\/figcaption><\/figure>\n<h3><span>4. Display error messages next to the respective field<\/span><\/h3>\n<p><span>Errors happen. When they do, show where. Imagine a user has submitted a form with three errors, and you display them all at the top. In this case, they need to scan through the whole form to find which ones need attention. <\/span><\/p>\n<p><span>Show your errors contextually, and don\u2019t forget about people with color blindness. Use more than just a red accent to indicate the faulty fields. Icons provide a safe bet, but read more about <\/span><a href=\"https:\/\/uxstudioteam.com\/ux-blog\/app-for-people-with-disabilities\/\"><span>accessibility in this article<\/span><\/a><span> on our blog which I highly recommend. <\/span><\/p>\n<h3><span>5. Have a crystal clear call to action<\/span><\/h3>\n<p><span>Users should feel confident about the consequences their actions have. Forget about general CTAs like \u201cSubmit\u201d, \u201cOK\u201d, \u201cProceed\u201d. Describe the action the user will take. Think more about \u201cSign in\u201d, \u201cPay now\u201d or \u201cCreate account\u201d.<\/span><\/p>\n<h3><span>6. Give your users feedback when their action succeeds<\/span><\/h3>\n<p><span>You might think this whole form design thing ends when the user presses \u201cPlace order\u201d. Wrong. Users need clear feedback on the success of their actions. Also let them know the next steps to expect. <\/span><\/p>\n<p><span>For example, after someone has placed an order at your webshop, show a screen that indicates successful payment and order placement. Maybe even provide a timeline about the expected next steps such as when the product ships.<\/span><\/p>\n<h2><span>Optimizing for mobile form design<\/span><\/h2>\n<p><span>Optimizing our forms for mobile has two sides. On the one, we need to pay extra attention to certain things. On the other, our phones have a lot of features which could make filling out forms a lot less painful. <\/span><\/p>\n<p><span>Put a bit of thought into your designs. This section will give you a couple of handy examples specifically to improve forms for mobile devices.<\/span><\/p>\n<h3><span>7. Include big enough tap areas<\/span><\/h3>\n<p><span>On Sunday nights I like to watch the NFL on television. The players\u2019 athleticism always amazes me, as do their how-the-hell-did-he-do-that catches. They need huge hands to make those catches. These football players could be your next customer. <\/span><\/p>\n<p><span>These guys seem strong, so you don\u2019t want tiny tap areas on your form making them angry. Google suggests a minimal 48x48px, which could serve as a good rule of thumb (pun intended). <\/span><\/p>\n<figure id=\"attachment_9051\" aria-describedby=\"caption-attachment-9051\" style=\"width: 480px\" class=\"wp-caption alignnone\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-9051\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/ezgif.com-optimize.gif\" alt=\"Form design metaphor football\" width=\"480\" height=\"270\" \/><figcaption id=\"caption-attachment-9051\" class=\"wp-caption-text\">Odell Beckham Jr. and his huge hands could be trying to use your app!<\/figcaption><\/figure>\n<h3><span>8. Don\u2019t shy away from making use of the phone\u2019s hardware features<\/span><\/h3>\n<p><span>Around 99% of your users who fill out your forms on a phone have a functioning camera. Have you thought about utilizing it? <\/span><\/p>\n<p><span>With the tap of a button, they could scan information from an ID or credit card which would otherwise take a lot longer. Taking it even further, think about the possibilities of using GPS or biometric authentication.<\/span><\/p>\n<h3><span>9. Use a keyboard which matches the expected input<\/span><\/h3>\n<p><span>If you expect your users to type an email address, open that keyboard with the text field active. If they need to enter a phone number, show them the number pad. <\/span><\/p>\n<p><span>It only takes a little attention, but you can save users precious time by not requiring them to switch between different keyboards. It also helps them understand what kind of input you expect.<\/span><\/p>\n<h3><span>10. Use native inputs<\/span><\/h3>\n<p><span>Both Google and Apple have put an enormous amount of research into designing their different UI controls. Most people have already encountered these, so unless you have a very strong reason not to do so, stick with the native controls. <\/span><\/p>\n<h2><span>Using the correct input type<\/span><\/h2>\n<p><span>It might look obvious, but in reality, it doesn\u2019t always come that easy. Don\u2019t make users\u2019 lives hell by asking them to pick a country from a dropdown list of 200+ or selecting yes\/no answers from dropdowns. <\/span><\/p>\n<p><span>Checkboxes, radio buttons, dropdowns, short and long text inputs \u2013 everything has a place in the world of forms. Just make sure they get used whenever appropriate.<\/span><\/p>\n<h3><span>11. Avoid super long dropdowns<\/span><\/h3>\n<p><span>The holiday season is receding quickly now, but you very likely ordered some presents online. To do that, you needed to pick the country where you wanted to ship the item. And at that point, it irritated you to scroll through all 200-something countries looking for yours. <\/span><\/p>\n<p><span>When it comes to form design next year, better let the users type and select the country from a preset list. It\u2019ll need some additional work from your developers, but your users will thank you for it!<\/span><\/p>\n<h3><span>12. Use smart search-as-you-type solutions<\/span><\/h3>\n<p><span>Why not take the previous tip one step further? Take some time to think about likely scenarios users might encounter. <\/span><\/p>\n<p><span>One living in Scotland might start to type \u201cScotland&#8221; although your site only accepts the UK as a country of residence. In an ideal scenario, they should see \u201cUnited Kingdom\u201d as a suggested item even if they typed \u201cScotland\u201d. <\/span><\/p>\n<p><span>The same could apply for \u201cNetherlands\u201d instead of \u201cThe Netherlands\u201d. Think about these scenarios and spend some time developing this logic so users don\u2019t need to guess the exact wording.<\/span><\/p>\n<figure id=\"attachment_9055\" aria-describedby=\"caption-attachment-9055\" style=\"width: 720px\" class=\"wp-caption alignnone\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-9055 size-medium\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image5-e1547026186959-720x426.png\" alt=\"Form design example from Liligo\" width=\"720\" height=\"426\" srcset=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image5-e1547026186959-720x426.png 720w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image5-e1547026186959-768x455.png 768w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image5-e1547026186959-1024x607.png 1024w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image5-e1547026186959.png 1999w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><figcaption id=\"caption-attachment-9055\" class=\"wp-caption-text\">Liligo matches user expectations, showing results from \u201cScotland\u201d even though the label says \u201cUnited Kingdom\u201d<\/figcaption><\/figure>\n<h3><span>13. Use radio buttons when you have six or fewer items<\/span><\/h3>\n<p><span>While dropdowns might not bring the optimal solution for long lists, the same applies for very short lists. Why make users open a dropdown everytime they need to answer a yes\/no question? <\/span><\/p>\n<p><span>Just use good old radio buttons for choices of six or fewer items. For even better form UX, users scan vertical stacking more easily. Excessive dropdowns probably makes for the number one sign of bad form design.<\/span><\/p>\n<h3><span>14. Have proper date input<\/span><\/h3>\n<p><span>So many forms still get date inputs (one of the most frequently requested pieces of information) wrong. How many times have you scrolled for ages below a default year of 1900? <\/span><\/p>\n<p><span>These websites either think the 100+ Club makes up the majority of their users or they don\u2019t care. I lean towards the latter. On mobile, use the default date picker or implement a masked input solution like in this example from FOX News. <\/span><\/p>\n<p><span>Take care with the expected date format, which varies from country to country. Typing eight digits on a numeric keyboard (even on mobile) can go a lot quicker than scrolling through three dropdowns. If you stick to the native iOS or Android date picker, make sure to have a realistic default date, not 1900 or the current year. Unless you\u2019re designing an application form for the Centenarians Society Annual Gala.<\/span><\/p>\n<figure id=\"attachment_9052\" aria-describedby=\"caption-attachment-9052\" style=\"width: 720px\" class=\"wp-caption alignnone\"><img decoding=\"async\" loading=\"lazy\" class=\"size-medium wp-image-9052\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image1-720x367.png\" alt=\"Form design masked input example\" width=\"720\" height=\"367\" srcset=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image1-720x367.png 720w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image1-768x392.png 768w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image1-1024x522.png 1024w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image1.png 1564w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><figcaption id=\"caption-attachment-9052\" class=\"wp-caption-text\">Use masked input for date inputs to improve UX (fox.com)<\/figcaption><\/figure>\n<h3><span>15. Match field length to the expected length of the input<\/span><\/h3>\n<p><span>You might want to make sacrifices here, but keep in mind that short input fields for postal or CVV codes work better. <\/span><\/p>\n<p><span>When you expect users to type longer answers, use a bigger text box. Sometimes making all those different length input fields look nice together can pose a challenge. But hey, we like challenges! We became designers, didn\u2019t we?<\/span><\/p>\n<h3><span>16. Lose the \u201cconfirm password\u201d field and add a \u201cshow password\u201d option<\/span><\/h3>\n<p><span>Typing passwords can get especially annoying on mobile, so don\u2019t make users type more than necessary. But why ask them to confirm their password? Want to make sure they don\u2019t make a typo in their passwords? <\/span><\/p>\n<p><span>Put a small eye icon (or \u201cshow password\u201d text) next to the input field so they can see any typos they\u2019ve made. More and more websites use a solution like this, which I find as definitely a sign of good form design.<\/span><\/p>\n<h2><span>Getting smart by doing the work instead of your user<\/span><\/h2>\n<p><span>The number one thing to keep in mind when you ask yourself how to design a form: Don\u2019t get lazy! Developing forms carefully and properly can save you a lot of time. <\/span><\/p>\n<p><span>When designing it, think of what you could guess from your already existing information without the user typing a character. Some will definitely take up more development resources than a \u201cgood enough\u201d solution, but your users will love you for it.<\/span><\/p>\n<h3><span>17. Offer login when a user tries to register with a taken email address<\/span><\/h3>\n<p><span>If a user tries to register with a taken email address, it likely means they have registered previously. Why not offer them a quick way to log in? Prefill the <a href=\"https:\/\/hunter.io\/email-verifier\" target=\"_blank\" rel=\"noopener\">verified email<\/a> address field so they only need to type their password.<\/span><\/p>\n<h3><span>18. Use smart defaults<\/span><\/h3>\n<p><span>This gets a bit general, but it really depends on your form when can you use smart defaults. You can make guesses based on the IP address, device language or in some cases, even device location. Spend a few minutes to think through all these projects every time you design a form.<\/span><\/p>\n<figure id=\"attachment_9056\" aria-describedby=\"caption-attachment-9056\" style=\"width: 720px\" class=\"wp-caption alignnone\"><img decoding=\"async\" loading=\"lazy\" class=\"size-medium wp-image-9056\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image6-720x480.png\" alt=\"Form design work at uxfol.io\" width=\"720\" height=\"480\" srcset=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image6-720x480.png 720w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image6-768x512.png 768w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image6-1024x683.png 1024w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image6.png 1600w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><figcaption id=\"caption-attachment-9056\" class=\"wp-caption-text\">When working on our product UXfol.io, our developers do the heavy lifting instead of our users<\/figcaption><\/figure>\n<h3><span>19. Avoid captcha<\/span><\/h3>\n<p><span>Captcha can annoy humans, but we still use it to avoid thousands of fake accounts in our database. However, some better, less annoying solutions also do this. When thinking about using captcha, think about alternatives, some state-of-the-art solutions, before implementing the laziest out-of-the-box idea.<\/span><a href=\"https:\/\/www.dtelepathy.com\/blog\/design\/captcha-alternatives-better-ux\"><span> Some pretty good articles discuss the topic.<\/span><\/a><\/p>\n<h3><span>20. Address information based on postal code<\/span><\/h3>\n<p><span>E-commerce shopkeepers will likely need to ask for an address at some point. You could let your user type everything, and then enter the postal code at the end. Alternatively, start with the country (as ZIP codes are not unique globally) with postal code first and auto-populate state, city or in some cases even street information. For this, you\u2019ll likely need a third-party plugin.<\/span><\/p>\n<h3><span>21. Accept multiple formats<\/span><\/h3>\n<p><span>Phone numbers provide a very good example for this: Not your users, but <\/span><i><span>you<\/span><\/i><span> must make sure you store the data in the correct format. Accept phone numbers (and other information) in multiple formats and then standardize them yourself. If not possible, at least provide a crystal-clear example of the format you expect.<\/span><\/p>\n<h3><span>23. Display errors before submitting the form<\/span><\/h3>\n<p><span>This might sound like a no-brainer, but many forms still miss this. If a user has entered an incorrect email address, show the error before they submit the form.<\/span><\/p>\n<p><span> However, take care not to validate too fast \u2013 it can get extremely annoying when you\u2019re still typing but the form \u201cshouts\u201d that you have an invalid email address. \u201cHmmm OK, but you could you just wait until I\u2019m done typing? Thanks!\u201d<\/span><\/p>\n<h2><span>Proper layout for good form design <\/span><\/h2>\n<p><span>The following tips get more general, so use them in basically any case when gathering data from users. Unlike some of the tips above, they don\u2019t require crazy development magic, simply good design. And well-designed forms always start with a well-selected layout!<\/span><\/p>\n<h3><span>24. Always show labels<\/span><\/h3>\n<p><span>In recent years it has gotten really trendy to use form labels as placeholder text. In many cases, it works well as it definitely makes design cleaner. But just imagine your user will have no clue about what information each field should contain once they\u2019ve filled them in. <\/span><\/p>\n<p><span>In some cases like an email address, it may seem obvious, but messing up the first name and last name happens so easily. So even if you decide to use the labels as placeholders, keep them visible when the field is filled, just like Google recommends.<\/span><\/p>\n<figure id=\"attachment_9058\" aria-describedby=\"caption-attachment-9058\" style=\"width: 720px\" class=\"wp-caption alignnone\"><img decoding=\"async\" loading=\"lazy\" class=\"size-medium wp-image-9058\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image8-720x360.png\" alt=\"Form design label design example\" width=\"720\" height=\"360\" srcset=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image8-720x360.png 720w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image8-768x384.png 768w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image8-1024x512.png 1024w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image8.png 1520w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><figcaption id=\"caption-attachment-9058\" class=\"wp-caption-text\">Google\u2019s suggestion for displaying labels (Material design guideline)<\/figcaption><\/figure>\n<h3><span>25. Only ask for the necessary information<\/span><\/h3>\n<p><span>\u201cThe marketing department made me do it!\u201d Yes, I know you may have great pressure on you (or us) to ask for even the user\u2019s shoe size. The more information we have, the better we can segment our different newsletters, etc. <\/span><\/p>\n<p><span>However, filling out a huge form with a ton of unnecessary information not only gets frustrating and intimidating, but it can also make users distrustful. Just imagine you\u2019ve just met someone in a bar and after 30 seconds of small talk, they start asking you extremely personal questions. <\/span><\/p>\n<p><span>Don\u2019t ask for things you don\u2019t absolutely need, or at least make it optional. If you really require that information, communicate your reasons and tell the user how it will improve their experience. <\/span><\/p>\n<p><span>Progressive profiling when you collect additional data after your users have gotten more engaged with your product provides another option.<\/span><\/p>\n<h3><span>26. Mark optional fields<\/span><\/h3>\n<p><span>Instead of using asterisks to mark required fields, just explicitly identify the optional fields. <\/span><\/p>\n<h3><span>27. For long forms, group input categories and use multiple steps<\/span><\/h3>\n<p><span>Getting long-form design UX right poses so many challenges. No matter how hard you try, some cases just need you to deal with very long forms. In these cases, two things can help get a better completion rate. <\/span><\/p>\n<p><span>First, group related fields together. Have one section for personal information and another for the address. Also consider breaking up your form into multiple steps so not to intimidate your user with a massive number of fields at the beginning. If you do, make sure to use some kind of progress indicator to indicate how much remains.<\/span><\/p>\n<h3><span>28. Avoid left-aligned labels<\/span><\/h3>\n<p><span>Research has shown that people complete forms with labels on the left-hand side of the input fields more slowly. Just imagine, your eyes need to jump all over the place while completing a form. Stacking all your labels vertically can increase the height, so use labels as placeholders that move to the top as you fill in a field. Just the way Google recommends.<\/span><\/p>\n<h3><span>29. Have a single column layout<\/span><\/h3>\n<p><span>The same goes for the overall layout of your form. If the fields cover multiple columns, users\u2019 eyes need to jump all over. Scanning just one way goes much faster. Of course, exceptions can arise when they expect multiple fields in one row, like first name and last name. In general, though, a single column layout works better even if it increases the overall height.<\/span><\/p>\n<h3><span>30. Start with the easy questions<\/span><\/h3>\n<p><span>In addition to forms intimidating users, yours might contain different types of data, some more sensitive or complicated to provide. Start with easy, common fields which users feel comfortable filling in. Ease them in and later move to those which require more engagement.<\/span><\/p>\n<h2><span>The devil of form design in the details<\/span><\/h2>\n<p><span>Making it this far shows your dedication to improving your forms\u2019 user experience. Not everyone will do the following, as it forms the icing on the cake, but it could provide users a wow factor. If you are aiming for the Best Form Design UX title, definitely keep on reading. So let\u2019s jump in, shall we?<\/span><\/p>\n<h3><span>31. Show and update password criteria<\/span><\/h3>\n<p><span>Probably my favorite tip, and as it turned out as one of my projects, not complicated to execute. Many sites have strong criteria for passwords regarding the different characters it should contain. Some websites display these criteria in a tooltip. Not the best. <\/span><\/p>\n<p><span>Users will only know of their password\u2019s weakness once they\u2019ve entered their usual password. So display the criteria once the field comes into focus at the latest. Even better, update them in real time as a user types. This makes it a lot easier to recognize what exactly they are lacking.<\/span><\/p>\n<figure id=\"attachment_9057\" aria-describedby=\"caption-attachment-9057\" style=\"width: 720px\" class=\"wp-caption alignnone\"><img decoding=\"async\" loading=\"lazy\" class=\"size-medium wp-image-9057\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image7-720x271.png\" alt=\"Form design password design example by Mailchimp\" width=\"720\" height=\"271\" srcset=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image7-720x271.png 720w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image7-768x289.png 768w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image7-1024x385.png 1024w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image7.png 1080w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><figcaption id=\"caption-attachment-9057\" class=\"wp-caption-text\">Mailchimp helps users enter a strong enough password by actively updating the list as the user types<\/figcaption><\/figure>\n<h3><span>32. Disable the submit button until the user completes all required fields<\/span><\/h3>\n<p><span>It can get pretty frustrating when you try to submit a form but then it turns out you haven\u2019t filled in all the required fields. If you mark required and optional fields properly, you can probably avoid this. <\/span><\/p>\n<p><span>Having the \u201cSubmit\u201d button (which you won\u2019t label \u201cSubmit\u201d, right?) disabled until they fill in everything can provide another way to shift focus to those remaining parts.<\/span><\/p>\n<h3><span>33. Embrace inclusivity<\/span><\/h3>\n<p><span>If you have online forms as part of your business, you likely have pretty diverse customers. You don\u2019t want to make any of them feel excluded, right? We could write a whole post on this topic (indeed <\/span><a href=\"https:\/\/uxstudioteam.com\/ux-blog\/app-for-people-with-disabilities\/\"><span>we have<\/span><\/a><span>), so let me quickly give you a few tips. First of all, don\u2019t validate names \u2013 how would it feel to read that you have an invalid name? <\/span><\/p>\n<p><span>Gender provides another sensitive topic. At least one person at your company will likely say properly targeting customers makes this information absolutely necessary. But does it really? <\/span><\/p>\n<p><span>More and more apps and products have stopped asking. So, Tip Number One: Don\u2019t ask. If you do, make it optional. In the latter case, provide an option for those who identify as neither male or female. You can easily implement an \u201cOther\u201d option (although that label can also offend). <\/span><\/p>\n<p><span>To take this one step further, add a custom input field like Facebook does. Last but not least, don\u2019t forget about accessibility. Make sure users can navigate the form with the keyboard and find labels big enough and with sufficient contrast. Read <\/span><a href=\"https:\/\/uxstudioteam.com\/ux-blog\/legibility\/\"><span>this great guide<\/span><\/a><span> from our blog to find out more about accessibility.<\/span><\/p>\n<h3><span>+1 Warn users when they have caps lock on<\/span><\/h3>\n<p><span>I really like this feature on the MacOS. Why not use it on your forms as well? When entering passwords, we sometimes accidentally hit the caps lock. It has happened to all of us. Why not save users a few seconds by warning them?<\/span><\/p>\n<figure id=\"attachment_9053\" aria-describedby=\"caption-attachment-9053\" style=\"width: 718px\" class=\"wp-caption alignnone\"><img decoding=\"async\" loading=\"lazy\" class=\"size-medium wp-image-9053\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image2-718x720.png\" alt=\"On point! (Image credit: Alice Korenyouk, Dribbble)\" width=\"718\" height=\"720\" srcset=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image2-718x720.png 718w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image2-150x150.png 150w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image2-768x770.png 768w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image2-32x32.png 32w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image2-50x50.png 50w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image2-64x64.png 64w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image2-96x96.png 96w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image2-128x128.png 128w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image2.png 793w\" sizes=\"(max-width: 718px) 100vw, 718px\" \/><figcaption id=\"caption-attachment-9053\" class=\"wp-caption-text\">Form design caps lock prevents logins funny picture<\/figcaption><\/figure>\n<h2><span>What next?<\/span><\/h2>\n<p><span>Well, if you\u2019ve made it this far, you\u2019ve taken the first step: You\u2019ve committed to well-designed forms in your product. <\/span><\/p>\n<p><span>Some of these tips will increase completion rates for your form or just simply reduce the time users need to fill it out. Others represent just small tweaks which show you care. And what could make users love you more than showing them that you value their time? <\/span><\/p>\n<p><span>I\u2019ve presented 34 tips \u2013 let me know which one excites you most to try! Leave a comment below. We always love to hear how these small guides help you improve your product.<\/span><\/p>\n<p><span>If you want to know more about the way we work here at our\u00a0<\/span><a href=\"https:\/\/uxstudioteam.com\/\"><span>UX company<\/span><\/a>\u00a0<span>I can recommend you our <\/span><a href=\"https:\/\/uxstudioteam.com\/ebooks\/PMs-guide-to-ux-design\/index.html\"><span>free ebook<\/span><\/a><span> about our UX process. We also have a <\/span><a href=\"https:\/\/uxstudioteam.com\/product-design-book\/\"><span>proper hardcover book<\/span><\/a><span> on the topic. It could make a nice Christmas, birthday or anytime present to anyone, as we ship it in Europe and US for free. <\/span><\/p>\n<p><span>But after all the reading, promise you\u2019ll take action and improve the design of your forms, OK?<\/span><\/p>\n<p>Need help with form design, or another well-defined design problem with business implications? Let us run a <a href=\"https:\/\/uxstudioteam.com\/design-sprint\/\">design sprint<\/a> for you!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Just imagine how you\u2019d feel if you walked into a shop, collected everything in your basket, but couldn\u2019t find the cashier.\u00a0 In the end, you\u2019d likely get extremely upset and leave everything behind without spending a cent. Well, exactly that&#8217;s what happens with bad form design in your checkout process.<\/p>\n","protected":false},"author":20,"featured_media":9061,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[25,28,26],"tags":[137],"table_tags":[],"coauthors":[92],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Your Ultimate Guide To Form Design<\/title>\n<meta name=\"description\" content=\"Forms handle the most important interactions with your product. We have collected 33 tips for you for better form design.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/uxstudioteam.com\/ux-blog\/form-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Your Ultimate Guide To Form Design\" \/>\n<meta property=\"og:description\" content=\"Forms handle the most important interactions with your product. We have collected 33 tips for you for better form design.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/uxstudioteam.com\/ux-blog\/form-design\/\" \/>\n<meta property=\"og:site_name\" content=\"UX Studio\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/uxstudio.hu\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-01-14T09:25:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-17T15:11:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/social-cover.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Bence Vitarius\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@UXstudio\" \/>\n<meta name=\"twitter:site\" content=\"@UXstudio\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Bence Vitarius\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/uxstudioteam.com\/ux-blog\/form-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/form-design\/\"},\"author\":{\"name\":\"Bence Vitarius\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/a1f55ff2752ed8d2db83263e241e684d\"},\"headline\":\"Your Ultimate Guide To Form Design\",\"datePublished\":\"2019-01-14T09:25:55+00:00\",\"dateModified\":\"2022-08-17T15:11:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/form-design\/\"},\"wordCount\":3648,\"publisher\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization\"},\"keywords\":[\"form design\"],\"articleSection\":[\"Mobile UX\",\"UX Design\",\"Web App UX\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/form-design\/\",\"url\":\"https:\/\/uxstudioteam.com\/ux-blog\/form-design\/\",\"name\":\"Your Ultimate Guide To Form Design\",\"isPartOf\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#website\"},\"datePublished\":\"2019-01-14T09:25:55+00:00\",\"dateModified\":\"2022-08-17T15:11:22+00:00\",\"description\":\"Forms handle the most important interactions with your product. We have collected 33 tips for you for better form design.\",\"breadcrumb\":{\"@id\":\"https:\/\/uxstudioteam.com\/ux-blog\/form-design\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/uxstudioteam.com\/ux-blog\/form-design\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/uxstudioteam.com\/ux-blog\/form-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Your Ultimate Guide To Form Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#website\",\"url\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/\",\"name\":\"UX Studio\",\"description\":\"UX design blog about designing user experience for web and mobile apps with UX research and focus on usability and ergonomics\",\"publisher\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization\",\"name\":\"UX studio\",\"url\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/05\/logo_emblem_online_green_on_white.png\",\"contentUrl\":\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/05\/logo_emblem_online_green_on_white.png\",\"width\":1000,\"height\":1000,\"caption\":\"UX studio\"},\"image\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/uxstudio.hu\/\",\"https:\/\/twitter.com\/UXstudio\",\"https:\/\/www.instagram.com\/uxstudioteam\/\",\"https:\/\/www.linkedin.com\/company\/uxstudio\/\",\"https:\/\/nl.pinterest.com\/uxstudiohu\/pins\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/a1f55ff2752ed8d2db83263e241e684d\",\"name\":\"Bence Vitarius\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/image\/0e3cc9277f6cdf16d9acf10e9946ee0c\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e1d883f19a0cd96c0814007e1702aca4?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e1d883f19a0cd96c0814007e1702aca4?s=96&d=retro&r=g\",\"caption\":\"Bence Vitarius\"},\"description\":\"Self-taught designer raised on the internet. When I'm not pushing pixels I'm either traveling, drinking coffee or taking mediocre photos.\",\"sameAs\":[\"http:\/\/uxstudioteam.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Your Ultimate Guide To Form Design","description":"Forms handle the most important interactions with your product. We have collected 33 tips for you for better form design.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/uxstudioteam.com\/ux-blog\/form-design\/","og_locale":"en_US","og_type":"article","og_title":"Your Ultimate Guide To Form Design","og_description":"Forms handle the most important interactions with your product. We have collected 33 tips for you for better form design.","og_url":"https:\/\/uxstudioteam.com\/ux-blog\/form-design\/","og_site_name":"UX Studio","article_publisher":"https:\/\/www.facebook.com\/uxstudio.hu\/","article_published_time":"2019-01-14T09:25:55+00:00","article_modified_time":"2022-08-17T15:11:22+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/social-cover.jpg","type":"image\/jpeg"}],"author":"Bence Vitarius","twitter_card":"summary_large_image","twitter_creator":"@UXstudio","twitter_site":"@UXstudio","twitter_misc":{"Written by":"Bence Vitarius","Est. reading time":"18 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/uxstudioteam.com\/ux-blog\/form-design\/#article","isPartOf":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/form-design\/"},"author":{"name":"Bence Vitarius","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/a1f55ff2752ed8d2db83263e241e684d"},"headline":"Your Ultimate Guide To Form Design","datePublished":"2019-01-14T09:25:55+00:00","dateModified":"2022-08-17T15:11:22+00:00","mainEntityOfPage":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/form-design\/"},"wordCount":3648,"publisher":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization"},"keywords":["form design"],"articleSection":["Mobile UX","UX Design","Web App UX"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/form-design\/","url":"https:\/\/uxstudioteam.com\/ux-blog\/form-design\/","name":"Your Ultimate Guide To Form Design","isPartOf":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#website"},"datePublished":"2019-01-14T09:25:55+00:00","dateModified":"2022-08-17T15:11:22+00:00","description":"Forms handle the most important interactions with your product. We have collected 33 tips for you for better form design.","breadcrumb":{"@id":"https:\/\/uxstudioteam.com\/ux-blog\/form-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/uxstudioteam.com\/ux-blog\/form-design\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/uxstudioteam.com\/ux-blog\/form-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/"},{"@type":"ListItem","position":2,"name":"Your Ultimate Guide To Form Design"}]},{"@type":"WebSite","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#website","url":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/","name":"UX Studio","description":"UX design blog about designing user experience for web and mobile apps with UX research and focus on usability and ergonomics","publisher":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization","name":"UX studio","url":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/logo\/image\/","url":"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/05\/logo_emblem_online_green_on_white.png","contentUrl":"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/05\/logo_emblem_online_green_on_white.png","width":1000,"height":1000,"caption":"UX studio"},"image":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/uxstudio.hu\/","https:\/\/twitter.com\/UXstudio","https:\/\/www.instagram.com\/uxstudioteam\/","https:\/\/www.linkedin.com\/company\/uxstudio\/","https:\/\/nl.pinterest.com\/uxstudiohu\/pins\/"]},{"@type":"Person","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/a1f55ff2752ed8d2db83263e241e684d","name":"Bence Vitarius","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/image\/0e3cc9277f6cdf16d9acf10e9946ee0c","url":"https:\/\/secure.gravatar.com\/avatar\/e1d883f19a0cd96c0814007e1702aca4?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e1d883f19a0cd96c0814007e1702aca4?s=96&d=retro&r=g","caption":"Bence Vitarius"},"description":"Self-taught designer raised on the internet. When I'm not pushing pixels I'm either traveling, drinking coffee or taking mediocre photos.","sameAs":["http:\/\/uxstudioteam.com"]}]}},"_links":{"self":[{"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/posts\/9048"}],"collection":[{"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/comments?post=9048"}],"version-history":[{"count":15,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/posts\/9048\/revisions"}],"predecessor-version":[{"id":14728,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/posts\/9048\/revisions\/14728"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/media\/9061"}],"wp:attachment":[{"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/media?parent=9048"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/categories?post=9048"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/tags?post=9048"},{"taxonomy":"table_tags","embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/table_tags?post=9048"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/coauthors?post=9048"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}