{"id":4,"date":"2015-01-10T05:57:36","date_gmt":"2015-01-10T05:57:36","guid":{"rendered":"http:\/\/roy.vanegas.org\/thoughts\/?p=4"},"modified":"2020-07-26T16:26:20","modified_gmt":"2020-07-26T20:26:20","slug":"terrible-farecard-user-interface","status":"publish","type":"post","link":"https:\/\/roy.vanegas.org\/thoughts\/terrible-farecard-user-interface\/","title":{"rendered":"Terrible Farecard User Interface"},"content":{"rendered":"<figure id=\"attachment_5\" aria-describedby=\"caption-attachment-5\" style=\"width: 660px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/roy.vanegas.org\/thoughts\/wp-content\/uploads\/2015\/01\/2014-05-27-20.55.46.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-5 size-large\" src=\"http:\/\/roy.vanegas.org\/thoughts\/wp-content\/uploads\/2015\/01\/2014-05-27-20.55.46-768x1024.jpg\" alt=\"Farecard Station In DC\/Virginia\" width=\"660\" height=\"880\" srcset=\"https:\/\/roy.vanegas.org\/thoughts\/wp-content\/uploads\/2015\/01\/2014-05-27-20.55.46-768x1024.jpg 768w, https:\/\/roy.vanegas.org\/thoughts\/wp-content\/uploads\/2015\/01\/2014-05-27-20.55.46-225x300.jpg 225w\" sizes=\"auto, (max-width: 660px) 100vw, 660px\" \/><\/a><figcaption id=\"caption-attachment-5\" class=\"wp-caption-text\">A Farecard Station In DC\/Virginia<\/figcaption><\/figure>\n<p>Here\u2019s an example of an incredibly terrible\u200a\u2014\u200aand dizzying\u200a\u2014\u200auser interface, or UI. This is a farecard station in Virginia or Washington DC (I can\u2019t quite remember).<\/p>\n<p>My friend Dan and I are from New York, where the MetroCard stations are incredibly simple to use. We reacted exactly the same way as we came upon this farecard station: \u201cWhat the hell is this?\u201d<\/p>\n<p>We\u00a0spent about five minutes trying to figure the process out. (That\u2019s four minutes too long.) We then requested the assistance of\u00a0a very nice ticket booth clerk, and it took her another twenty-five minutes to explain it all to us.<\/p>\n<p>Let\u2019s look at a few examples of why the UI fails.<\/p>\n<p>Note the \u201cCASH \u2022 CREDIT \u2022 DEBIT\u201d heading in the upper right hand corner. Beneath it you\u2019ll note that you can get up to $10 in change during your transaction. But then, in the blue section marked \u201c1\u201d in which you can select a purchase, the maximum change is $5. Which is it?<\/p>\n<p>Under the \u201cFARECARDS AND PASSES\u201d section you\u2019ll note \u201c1 FARE PERIODS,\u201d \u201c2 FIND ONE-WAY SmarTrip Card FARE,\u201d and \u201c3 PURCHASE FARE.\u201d The horizontal space below items \u201c1\u201d and \u201c3\u201d are shared, but item \u201c2\u201d has its own horizontal space. Also, items \u201c1\u201d and \u201c3\u201d share the same heading space; that is, both are on the same baseline and share the same brown background color.<\/p>\n<p>The next section takes\u00a0a numerical, top-down approach (\u201c1\u201d on the top to start the purchase and \u201c3\u201d on the bottom to retrieve the\u00a0farecard), but fuses elements of left-to-right navigation (in step \u201c2\u201d you can pay with cash on the left using the bill drawer or with a credit card on the right using a card swiper).<\/p>\n<p>Note the coin return all the way at the bottom. Why not put that directly beneath the coin slot above item \u201c2 INSERT PAYMENT\u201d?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here\u2019s an example of an incredibly terrible\u200a\u2014\u200aand dizzying\u200a\u2014\u200auser interface, or UI. This is a farecard station in Virginia or Washington DC (I can\u2019t quite remember). My friend Dan and I are from New York, where the MetroCard stations are incredibly simple to use. We reacted exactly the same way as we came upon this farecard&hellip; <a class=\"more-link\" href=\"https:\/\/roy.vanegas.org\/thoughts\/terrible-farecard-user-interface\/\">Continue reading <span class=\"screen-reader-text\">Terrible Farecard User Interface<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4],"tags":[],"class_list":["post-4","post","type-post","status-publish","format-standard","hentry","category-design","category-ui-design","entry"],"_links":{"self":[{"href":"https:\/\/roy.vanegas.org\/thoughts\/wp-json\/wp\/v2\/posts\/4","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/roy.vanegas.org\/thoughts\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/roy.vanegas.org\/thoughts\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/roy.vanegas.org\/thoughts\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/roy.vanegas.org\/thoughts\/wp-json\/wp\/v2\/comments?post=4"}],"version-history":[{"count":6,"href":"https:\/\/roy.vanegas.org\/thoughts\/wp-json\/wp\/v2\/posts\/4\/revisions"}],"predecessor-version":[{"id":304,"href":"https:\/\/roy.vanegas.org\/thoughts\/wp-json\/wp\/v2\/posts\/4\/revisions\/304"}],"wp:attachment":[{"href":"https:\/\/roy.vanegas.org\/thoughts\/wp-json\/wp\/v2\/media?parent=4"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/roy.vanegas.org\/thoughts\/wp-json\/wp\/v2\/categories?post=4"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/roy.vanegas.org\/thoughts\/wp-json\/wp\/v2\/tags?post=4"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}