{"id":125,"date":"2023-05-18T20:04:22","date_gmt":"2023-05-18T20:04:22","guid":{"rendered":"https:\/\/ux.mariajandersen.com\/?page_id=125"},"modified":"2024-04-11T19:39:21","modified_gmt":"2024-04-11T19:39:21","slug":"buttons","status":"publish","type":"page","link":"https:\/\/ux.mariajandersen.com\/?page_id=125","title":{"rendered":"Radio buttons"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"125\" class=\"elementor elementor-125\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-c624441 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"c624441\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e8e121a\" data-id=\"e8e121a\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a8a69fc elementor-widget elementor-widget-text-editor\" data-id=\"a8a69fc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Radio buttons\u00a0 &#8211;\u00a0 Check boxes\u00a0 &#8211;\u00a0 List\u00a0 &#8211;\u00a0 Toggle<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-07be034 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"07be034\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-628df8d\" data-id=\"628df8d\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-25f7c08 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"25f7c08\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-bf1dabf\" data-id=\"bf1dabf\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-84cde03 elementor-widget elementor-widget-text-editor\" data-id=\"84cde03\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>Rule 1:<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d838992 elementor-widget elementor-widget-text-editor\" data-id=\"d838992\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2><strong>Radio buttons should always have exactly one option pre-selected.<\/strong><\/h2>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8b925d6 elementor-widget elementor-widget-text-editor\" data-id=\"8b925d6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The main guideline for radio button design is to\u00a0<strong>select one of the radio buttons by default\u00a0<\/strong>(i.e., when the page loads, in the case of a web application.) This is good usability and elegant design. I say this not because I am waving a banner for traditionalism, or even for consistency. Rather the banners I\u2019d parade in this case would be decorated with concepts such as the following:<\/p><ul><li>user control,<\/li><li>expediting tasks, and<\/li><li>the power of suggestion.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3682487 elementor-widget elementor-widget-text-editor\" data-id=\"3682487\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>Radio button groups should\u00a0always\u00a0have\u00a0exactly\u00a0<em>one<\/em>\u00a0selected item.<\/strong>\u00a0So, that would mean that you\u00a0<em>should<\/em>\u00a0indeed select one of the items. What is the meaning of a group of radio buttons without a selected item? However, for a yes-or-no question, I don&#8217;t think a radio button is the right control to use. Instead, use a check box.\u00a0 &#8212;&#8211;<span style=\"font-size: 16px; letter-spacing: var( --e-global-typography-text-letter-spacing ); text-transform: var( --e-global-typography-text-text-transform ); word-spacing: var( --e-global-typography-text-word-spacing );\">Chat GBT?<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-c5895ef\" data-id=\"c5895ef\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-afc1069 elementor-widget elementor-widget-ha-slider happy-addon ha-slider\" data-id=\"afc1069\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;animation_speed&quot;:300,&quot;autoplay&quot;:&quot;yes&quot;,&quot;autoplay_speed&quot;:3000,&quot;loop&quot;:&quot;yes&quot;,&quot;navigation&quot;:&quot;arrow&quot;}\" data-widget_type=\"ha-slider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n\t\t<div class=\"hajs-slick ha-slick ha-slick--slider\">\n\n\t\t\t\n\t\t\t\t<div class=\"ha-slick-slide slick-slide\">\n\t\t\t\t\t<div class=\"ha-slick-item\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"ha-slick-img\" src=\"https:\/\/ux.mariajandersen.com\/wp-content\/uploads\/2024\/01\/dropbox.webp\" alt=\"Dropbox\">\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"ha-slick-content\">\n\t\t\t\t\t\t\t\t<h2 class=\"ha-slick-title\">Dropbox<\/h2>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t\n\t\t\t\t<div class=\"ha-slick-slide slick-slide\">\n\t\t\t\t\t<div class=\"ha-slick-item\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"ha-slick-img\" src=\"https:\/\/ux.mariajandersen.com\/wp-content\/uploads\/2024\/01\/03.-NEW-Your-Account-Payment-Card.png\" alt=\"Payment example\">\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"ha-slick-content\">\n\t\t\t\t\t\t\t\t<h2 class=\"ha-slick-title\">Payment example<\/h2>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t\n\t\t\t\t<div class=\"ha-slick-slide slick-slide\">\n\t\t\t\t\t<div class=\"ha-slick-item\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"ha-slick-img\" src=\"https:\/\/ux.mariajandersen.com\/wp-content\/plugins\/elementor\/assets\/images\/placeholder.png\" alt=\"\">\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t\n\t\t\t\t<div class=\"ha-slick-slide slick-slide\">\n\t\t\t\t\t<div class=\"ha-slick-item\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"ha-slick-img\" src=\"https:\/\/ux.mariajandersen.com\/wp-content\/plugins\/elementor\/assets\/images\/placeholder.png\" alt=\"\">\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t\n\t\t\t\t<div class=\"ha-slick-slide slick-slide\">\n\t\t\t\t\t<div class=\"ha-slick-item\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"ha-slick-img\" src=\"https:\/\/ux.mariajandersen.com\/wp-content\/plugins\/elementor\/assets\/images\/placeholder.png\" alt=\"\">\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t\n\t\t<\/div>\n\n\t\t\t\t\t<button type=\"button\" class=\"slick-prev\"><i aria-hidden=\"true\" class=\"fas fa-chevron-left\"><\/i><\/button>\n\t\t\n\t\t\t\t\t<button type=\"button\" class=\"slick-next\"><i aria-hidden=\"true\" class=\"fas fa-chevron-right\"><\/i><\/button>\n\t\t\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ae56aeb elementor-widget__width-auto ha-advanced-tooltip-enable ha-advanced-tooltip-right elementor-widget elementor-widget-image\" data-id=\"ae56aeb\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ha_advanced_tooltip_enable&quot;:&quot;enable&quot;,&quot;ha_advanced_tooltip_content&quot;:&quot;Choose a payment method example&quot;,&quot;ha_advanced_tooltip_position&quot;:&quot;right&quot;,&quot;ha_advanced_tooltip_animation&quot;:&quot;ha_fadeIn&quot;,&quot;ha_advanced_tooltip_duration&quot;:1000,&quot;ha_advanced_tooltip_arrow&quot;:&quot;true&quot;,&quot;ha_advanced_tooltip_trigger&quot;:&quot;hover&quot;}\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"http:\/\/ux.mariajandersen.com\/wp-content\/uploads\/2024\/01\/03.-NEW-Your-Account-Payment-Card.png\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-title=\"Payment example\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MTgyLCJ1cmwiOiJodHRwczpcL1wvdXgubWFyaWFqYW5kZXJzZW4uY29tXC93cC1jb250ZW50XC91cGxvYWRzXC8yMDI0XC8wMVwvMDMuLU5FVy1Zb3VyLUFjY291bnQtUGF5bWVudC1DYXJkLnBuZyJ9\">\n\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"1802\" height=\"1286\" src=\"https:\/\/ux.mariajandersen.com\/wp-content\/uploads\/2024\/01\/03.-NEW-Your-Account-Payment-Card.png\" class=\"attachment-full size-full wp-image-182\" alt=\"\" srcset=\"https:\/\/ux.mariajandersen.com\/wp-content\/uploads\/2024\/01\/03.-NEW-Your-Account-Payment-Card.png 1802w, https:\/\/ux.mariajandersen.com\/wp-content\/uploads\/2024\/01\/03.-NEW-Your-Account-Payment-Card-300x214.png 300w, https:\/\/ux.mariajandersen.com\/wp-content\/uploads\/2024\/01\/03.-NEW-Your-Account-Payment-Card-1024x731.png 1024w, https:\/\/ux.mariajandersen.com\/wp-content\/uploads\/2024\/01\/03.-NEW-Your-Account-Payment-Card-768x548.png 768w, https:\/\/ux.mariajandersen.com\/wp-content\/uploads\/2024\/01\/03.-NEW-Your-Account-Payment-Card-1536x1096.png 1536w\" sizes=\"(max-width: 1802px) 100vw, 1802px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Payment example<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cde4274 elementor-widget__width-auto ha-advanced-tooltip-enable ha-advanced-tooltip-right elementor-widget elementor-widget-image\" data-id=\"cde4274\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ha_advanced_tooltip_enable&quot;:&quot;enable&quot;,&quot;ha_advanced_tooltip_content&quot;:&quot;Example from Dropbox&quot;,&quot;ha_advanced_tooltip_position&quot;:&quot;right&quot;,&quot;ha_advanced_tooltip_animation&quot;:&quot;ha_fadeIn&quot;,&quot;ha_advanced_tooltip_duration&quot;:1000,&quot;ha_advanced_tooltip_arrow&quot;:&quot;true&quot;,&quot;ha_advanced_tooltip_trigger&quot;:&quot;hover&quot;}\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"http:\/\/ux.mariajandersen.com\/wp-content\/uploads\/2024\/01\/dropbox.webp\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-title=\"Example from Dropbox\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MTYyLCJ1cmwiOiJodHRwczpcL1wvdXgubWFyaWFqYW5kZXJzZW4uY29tXC93cC1jb250ZW50XC91cGxvYWRzXC8yMDI0XC8wMVwvZHJvcGJveC53ZWJwIn0%3D\">\n\t\t\t\t\t\t\t<img decoding=\"async\" width=\"554\" height=\"500\" src=\"https:\/\/ux.mariajandersen.com\/wp-content\/uploads\/2024\/01\/dropbox.webp\" class=\"attachment-full size-full wp-image-162\" alt=\"\" srcset=\"https:\/\/ux.mariajandersen.com\/wp-content\/uploads\/2024\/01\/dropbox.webp 554w, https:\/\/ux.mariajandersen.com\/wp-content\/uploads\/2024\/01\/dropbox-300x271.webp 300w\" sizes=\"(max-width: 554px) 100vw, 554px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Dropbox example<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-239e188 elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"239e188\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-extended\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-08ba37c\" data-id=\"08ba37c\" data-element_type=\"column\" data-e-type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-502c54f elementor-view-default elementor-widget elementor-widget-icon\" data-id=\"502c54f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"icon.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-icon-wrapper\">\n\t\t\t<div class=\"elementor-icon\">\n\t\t\t<i aria-hidden=\"true\" class=\"fas fa-check-circle\"><\/i>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bdf20dc elementor-widget elementor-widget-text-editor\" data-id=\"bdf20dc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>Pre-selected<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1b88fde elementor-widget elementor-widget-html\" data-id=\"1b88fde\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html>\n<body>\n\n\n\u00a0 <input type=\"radio\" checked=\"checked\" id=\"html\" name=\"fav_language\" value=\"HTML\">\n\u00a0 <label for=\"html\">HTML<\/label><br>\n\u00a0 <input type=\"radio\" id=\"css\" name=\"fav_language\" value=\"CSS\">\n\u00a0 <label for=\"css\">CSS<\/label><br>\n\u00a0 <input type=\"radio\" id=\"javascript\" name=\"fav_language\" value=\"JavaScript\">\n\u00a0 <label for=\"javascript\">JavaScript<\/label>\n  \n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-13bc6b6\" data-id=\"13bc6b6\" data-element_type=\"column\" data-e-type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f1a1e3f elementor-view-default elementor-widget elementor-widget-icon\" data-id=\"f1a1e3f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"icon.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-icon-wrapper\">\n\t\t\t<div class=\"elementor-icon\">\n\t\t\t<i aria-hidden=\"true\" class=\"fas fa-window-close\"><\/i>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c036964 elementor-widget elementor-widget-text-editor\" data-id=\"c036964\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>Not selected<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2932b23 elementor-widget elementor-widget-html\" data-id=\"2932b23\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html>\n<body>\n\n\n\u00a0 <input type=\"radio\" id=\"html\" name=\"fav_language\" value=\"HTML\" >\n\u00a0 <label for=\"html\">HTML<\/label><br>\n\u00a0 <input type=\"radio\" id=\"css\" name=\"fav_language\" value=\"CSS\">\n\u00a0 <label for=\"css\">CSS<\/label><br>\n\u00a0 <input type=\"radio\" id=\"javascript\" name=\"fav_language\" value=\"JavaScript\">\n\u00a0 <label for=\"javascript\">JavaScript<\/label>\n  \n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-63b6e08 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"63b6e08\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-fc89e22\" data-id=\"fc89e22\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-7c53f66 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7c53f66\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-extended\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-26a485d\" data-id=\"26a485d\" data-element_type=\"column\" data-e-type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7cdb984 elementor-widget elementor-widget-text-editor\" data-id=\"7cdb984\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Vertically (example)<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5efaf40 elementor-widget elementor-widget-image\" data-id=\"5efaf40\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"638\" height=\"326\" src=\"https:\/\/ux.mariajandersen.com\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-27-at-20.28.31.png\" class=\"attachment-full size-full wp-image-174\" alt=\"\" srcset=\"https:\/\/ux.mariajandersen.com\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-27-at-20.28.31.png 638w, https:\/\/ux.mariajandersen.com\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-27-at-20.28.31-300x153.png 300w\" sizes=\"(max-width: 638px) 100vw, 638px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-860dedb elementor-widget elementor-widget-text-editor\" data-id=\"860dedb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>non-vertically \/ Horizontal&nbsp;<span style=\"font-family: Poppins, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 300; color: var( --e-global-color-primary ); letter-spacing: var( --e-global-typography-text-letter-spacing ); text-transform: var( --e-global-typography-text-text-transform ); word-spacing: var( --e-global-typography-text-word-spacing );\">(example)<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4c888ce elementor-widget elementor-widget-image\" data-id=\"4c888ce\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"636\" height=\"114\" src=\"https:\/\/ux.mariajandersen.com\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-27-at-20.28.45.png\" class=\"attachment-full size-full wp-image-175\" alt=\"\" srcset=\"https:\/\/ux.mariajandersen.com\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-27-at-20.28.45.png 636w, https:\/\/ux.mariajandersen.com\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-27-at-20.28.45-300x54.png 300w\" sizes=\"(max-width: 636px) 100vw, 636px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-57bc0a4\" data-id=\"57bc0a4\" data-element_type=\"column\" data-e-type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-dd4b4ac elementor-widget elementor-widget-text-editor\" data-id=\"dd4b4ac\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>Rule 2:<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-aa44427 elementor-widget elementor-widget-text-editor\" data-id=\"aa44427\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2><strong>Lay Out Your Lists Vertically<\/strong><\/h2>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-226be57 elementor-widget elementor-widget-text-editor\" data-id=\"226be57\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The main guideline for radio button design is to\u00a0<strong>select one of the radio buttons by default\u00a0<\/strong>(i.e., when the page loads, in the case of a web application.) This is good usability and elegant design. I say this not because I am waving a banner for traditionalism, or even for consistency. Rather the banners I\u2019d parade in this case would be decorated with concepts such as the following:<\/p><ul><li>user control,<\/li><li>expediting tasks, and<\/li><li>the power of suggestion.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-30031a0 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"30031a0\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a10d980\" data-id=\"a10d980\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-64531be elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"64531be\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-extended\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-2bc8beb\" data-id=\"2bc8beb\" data-element_type=\"column\" data-e-type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1a0a2d6 elementor-widget elementor-widget-text-editor\" data-id=\"1a0a2d6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>Rule 3:<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d71e83c elementor-widget elementor-widget-text-editor\" data-id=\"d71e83c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2><strong>List them in a logical order (from easy to complex)<\/strong><\/h2>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-24e195d elementor-widget elementor-widget-text-editor\" data-id=\"24e195d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>xxxxxx<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-5367bcb\" data-id=\"5367bcb\" data-element_type=\"column\" data-e-type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-db8e947 elementor-widget elementor-widget-text-editor\" data-id=\"db8e947\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Hvor meget betaler du i husleje?<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-61758bf elementor-widget elementor-widget-text-editor\" data-id=\"61758bf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li>Intet<\/li><li>1,000 kr<\/li><li>4,000 kr\u00a0<\/li><li>10,000 kr\u00a0<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e292ed9 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e292ed9\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1d89998\" data-id=\"1d89998\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-cdb8386 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"cdb8386\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-extended\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-245279e\" data-id=\"245279e\" data-element_type=\"column\" data-e-type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-00ccc09 elementor-widget elementor-widget-image\" data-id=\"00ccc09\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"600\" src=\"https:\/\/ux.mariajandersen.com\/wp-content\/uploads\/2024\/01\/1_YEmB6t9x0-0JRSpvTM2kTQ.gif\" class=\"attachment-full size-full wp-image-161\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-75e9cf4\" data-id=\"75e9cf4\" data-element_type=\"column\" data-e-type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0bdd0bd elementor-widget elementor-widget-text-editor\" data-id=\"0bdd0bd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>Rule 4:<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-35c0d09 elementor-widget elementor-widget-text-editor\" data-id=\"35c0d09\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2><strong>Use visual feedback<\/strong><\/h2>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7e078c8 elementor-widget elementor-widget-text-editor\" data-id=\"7e078c8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>xxxxxx<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Radio buttons\u00a0 &#8211;\u00a0 Check boxes\u00a0 &#8211;\u00a0 List\u00a0 &#8211;\u00a0 Toggle Rule 1: Radio buttons should always have exactly one option pre-selected. The main guideline for radio button design is to\u00a0select one of the radio buttons by default\u00a0(i.e., when the page loads, in the case of a web application.) This is good usability and elegant design. I [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","footnotes":""},"class_list":["post-125","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/ux.mariajandersen.com\/index.php?rest_route=\/wp\/v2\/pages\/125","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ux.mariajandersen.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ux.mariajandersen.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ux.mariajandersen.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ux.mariajandersen.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=125"}],"version-history":[{"count":134,"href":"https:\/\/ux.mariajandersen.com\/index.php?rest_route=\/wp\/v2\/pages\/125\/revisions"}],"predecessor-version":[{"id":367,"href":"https:\/\/ux.mariajandersen.com\/index.php?rest_route=\/wp\/v2\/pages\/125\/revisions\/367"}],"wp:attachment":[{"href":"https:\/\/ux.mariajandersen.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=125"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}