{"id":64,"date":"2010-09-05T08:15:00","date_gmt":"2010-09-05T08:15:00","guid":{"rendered":"https:\/\/pim.famnit.upr.si\/wp\/?p=64"},"modified":"2021-11-17T11:22:17","modified_gmt":"2021-11-17T11:22:17","slug":"how-to-create-an-interface-with-4-different-states-and-fail","status":"publish","type":"post","link":"https:\/\/pim.famnit.upr.si\/wp\/?p=64","title":{"rendered":"How to create an interface with 4 different states and fail"},"content":{"rendered":"<p>I would really like to say the opposite but some big companies (on at least some of their projects) still don&#8217;t care much about usability tests. At least it seams so. <\/p>\n<p>Take for example this USB dongle modem and its software. When I first plugged the modem in it took me about 40 minutes to upgrade the firmware even if the dongle was brand new from the mobile provider&#8217;s shop. Yes, I didn&#8217;t make a mistake &#8211; 40 minutes. It needed 5 firmware updates and upgrades. At the end I installed the modem software and I was done. The modem <strong>software is<\/strong> <strong>really simple<\/strong> <strong>and has only 4 stages<\/strong> which can be seen below on the 4 screen shots.<\/p>\n<p>1. <strong>Disconnected stage<\/strong> (in this state the application is waiting for the user to click on <em>Click to connect<\/em> button): <br \/><img decoding=\"async\" class=\"no_float\" src=\"https:\/\/pim.famnit.upr.si\/wp\/wp-content\/uploads\/2021\/11\/three-0-connect.png\" \/><\/p>\n<\/p>\n<p>2. <strong>Connecting stage<\/strong> (while connecting a user can click on the <em>Cancel button<\/em> to cancel the connecting process):<br \/><img decoding=\"async\" class=\"no_float\" src=\"https:\/\/pim.famnit.upr.si\/wp\/wp-content\/uploads\/2021\/11\/three-1-authenticating.png\" \/><\/p>\n<\/p>\n<p>3. <strong>Connected stage<\/strong> (when connected a user can only disconnect by clicking on a <em>Disconnect button<\/em>):<br \/><img decoding=\"async\" class=\"no_float\" src=\"https:\/\/pim.famnit.upr.si\/wp\/wp-content\/uploads\/2021\/11\/three-2-connected.png\" \/><\/p>\n<\/p>\n<p>4. <strong>Disconnecting stage<\/strong> (when disconnecting a <em>Disconnect button<\/em> is still active and can be clicked): <br \/><img decoding=\"async\" class=\"no_float\" src=\"https:\/\/pim.famnit.upr.si\/wp\/wp-content\/uploads\/2021\/11\/three-3-disconecting.png\" \/><\/p>\n<\/p>\n<p>The fourth state has a problem. The disconnecting process takes around 15 seconds (sometimes even more). If during this process the <em>Disconnect button<\/em> is clicked again, it remembers the click and after disconnection it connects again. Note that only the text <strong>3UK<\/strong> by the signal scale changes to <strong>Disconnecting &#8230;<\/strong> when changing from the 3rd to the 4th stage. The state of the modem field (<strong>Connected<\/strong>) stays the same and is really hard to see the change. Needless to say that at first I clicked the <strong>Disconnect button<\/strong> and after while the application went crazy. <strong>Disabling the button while disconnecting would solve the problem<\/strong>. <\/p>\n<p>Note also how the text by the signal scale and above the button changes in 4 stages: <\/p>\n<table cellspacing=\"1\" cellpadding=\"1\" border=\"1\" style=\"width: 100%;\">\n<tbody>\n<tr>\n<td style=\"width: 25%;\"><strong>&nbsp;1st stage<br \/><\/strong><\/td>\n<td style=\"width: 25%;\"><strong>&nbsp;2nd stage<br \/><\/strong><\/td>\n<td style=\"width: 25%;\"><strong>&nbsp;3rd stage<br \/><\/strong><\/td>\n<td style=\"width: 25%;\"><strong>&nbsp;4th stage<br \/><\/strong><\/td>\n<\/tr>\n<tr>\n<td style=\"width: 25%;\">&nbsp;3UK<\/td>\n<td style=\"width: 25%;\">&nbsp;Authenticating <\/td>\n<td style=\"width: 25%;\">&nbsp;3UK<\/td>\n<td style=\"width: 25%;\">&nbsp;Disconnecting<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 25%;\">&nbsp;Service available<\/td>\n<td style=\"width: 25%;\">&nbsp;Connecting<\/td>\n<td style=\"width: 25%;\">&nbsp;Connected<\/td>\n<td style=\"width: 25%;\">&nbsp;Connected<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Why are <strong>Service available<\/strong>, <strong>Connecting<\/strong>, <strong>Authenticating<\/strong>, <strong>Connected<\/strong> and <strong>Disconnecting<\/strong> on different parts of the interface if they show the state of the modem is beyond my understanding. <\/p>\n<ul>\n<li>1st state: Service of <strong>3UK<\/strong> is <strong>available<\/strong><\/li>\n<li>2nd state: While <strong>connecting<\/strong> it has to <strong>authenticate<\/strong> (does the user need to know this information)<br \/><strong>Changing Authenticating to 3UK<\/strong> would not hurt anyone as<strong> Authenticating is not really informative <\/strong>here<strong><br \/><\/strong><\/li>\n<li>3rd state: The modem is <strong>connected<\/strong> to <strong>3UK<\/strong> network<\/li>\n<li>4th state: While modem is <strong>connected<\/strong> it tries to <strong>disconnect<\/strong> (Italians would say: &quot;Ma non mi dire &#8230;&quot; isn&#8217;t this obvious)<br \/>Changing <strong>Disconnecting<\/strong> to <strong>3UK<\/strong> and<br \/>Changing <strong>Connected<\/strong> to <strong>Disconnecting<\/strong> would provide more consistency to the interface.<\/li>\n<\/ul>\n<p>This way the text by the signal scale would show just available mobile network and its type while the field above the button would show the state of the modem. If authentication would for example fail it would be nice to get the message in red in this field above the button (close to where the focus is when clicking it). A <strong>user would expect messages of the modem state to appear always in the same field<\/strong> and not on two as it is done now.<\/p>\n<p>The answer to the title question: simple!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I would really like to say the opposite but some big companies (on at least some of their projects) still don&#8217;t care much about usability tests. At least it seams so. Take for example this USB dongle modem and its software. When I first plugged the modem in it took me about 40 minutes to&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[29,31,118],"class_list":["post-64","post","type-post","status-publish","format-standard","hentry","category-4-software-hints","tag-backup","tag-mac-os-x","tag-timemachine"],"_links":{"self":[{"href":"https:\/\/pim.famnit.upr.si\/wp\/index.php?rest_route=\/wp\/v2\/posts\/64","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pim.famnit.upr.si\/wp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pim.famnit.upr.si\/wp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pim.famnit.upr.si\/wp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pim.famnit.upr.si\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=64"}],"version-history":[{"count":2,"href":"https:\/\/pim.famnit.upr.si\/wp\/index.php?rest_route=\/wp\/v2\/posts\/64\/revisions"}],"predecessor-version":[{"id":1727,"href":"https:\/\/pim.famnit.upr.si\/wp\/index.php?rest_route=\/wp\/v2\/posts\/64\/revisions\/1727"}],"wp:attachment":[{"href":"https:\/\/pim.famnit.upr.si\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=64"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pim.famnit.upr.si\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=64"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pim.famnit.upr.si\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=64"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}