{"id":11641,"date":"2013-11-07T12:41:17","date_gmt":"2013-11-07T11:41:17","guid":{"rendered":"http:\/\/touk.pl\/blog\/?p=11641"},"modified":"2023-03-20T13:46:55","modified_gmt":"2023-03-20T12:46:55","slug":"context-menu-or-action-buttons","status":"publish","type":"post","link":"https:\/\/touk.pl\/blog\/2013\/11\/07\/context-menu-or-action-buttons\/","title":{"rendered":"Context menu or Action buttons ?"},"content":{"rendered":"<p>Recently I was drawn into one of those UI \u201creligious\u201d disputes that has no easy answers and usually both sides are right. One of our web developers was trying out new web tech (with pretty rich widget library) and started to question himself about some basic usability decisions. The low level problem in this case is usually brought to \u201cwhich widget should I use ?\u201d. I\u2019m not fond of bringing the usability problems to questions: Should I use Tabs over Menu ? Or should I use Context menu instead of buttons panel ? But sometimes if time is crucial factor and other usability levels are by default not addressed at all \u2013 better developer that asks those basic questions than developer that do not question himself at all. One of often \u201cproblematic\u201d choice that is bring up by web developers is should user launch actions on selected objects (one of many or some of many) by \u201cContext menu\u201d or \u201cAction buttons\u201d. Basic example is shown below and it is usually a table or list of components that has some defined actions (i.e. on table where rows are single orders change status of selected order would be on of possible actions). Of course there are many other solutions that can be implemented (some actions can be handled directly in table row or cell) but narrowing choice to those two was subject of mentioned discussion. During those hot and fast discussions I wasn\u2019t able to point out pros and cons of both solution that\u2019s why I decided to grab them all in this one short post. I hope it will be helpful for same lone developers that thirstily look for best practise or choice while the answer is usually much contextual\u2026<\/p>\n<h2 id=\"Test-Actionbuttonpanel\"><span id=\"action-button-panel\">Action button panel<\/span><\/h2>\n<p><a href=\"http:\/\/touk.pl\/blog\/wp-content\/uploads\/2013\/11\/example_view_1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11645\" alt=\"example_view_1\" src=\"http:\/\/touk.pl\/blog\/wp-content\/uploads\/2013\/11\/example_view_1.png\" width=\"570\" height=\"330\" \/><\/a> <\/p>\n<map id=\"gliffy-map-65077414-849\" name=\"gliffy-map-65077414-849\">\n<\/map>\n<\/p>\n<p><map id=\"gliffy-dynamic-map-65077414-8518\" name=\"gliffy-dynamic-map-65077414-8518\">\n<\/map>\n<\/p>\n<h3 id=\"Test-Pros\"><span id=\"pros\"><img decoding=\"async\" src=\"https:\/\/touk.pl\/confluence\/s\/pl_PL-1988229788\/4252\/6ac85e9b14675c5514a674e1aecae99c9505ed36.30\/_\/images\/icons\/emoticons\/add.png\" alt=\"(plus)\" \/> Pros<\/span><\/h3>\n<ul>\n<li>Clear indication of where and how many actions you can apply to selected row (or other selected object)<\/li>\n<li>If action panel is visible all the time theme has expectable behaviour (at least if you are consistent at where you position your action panel)<\/li>\n<li>Accessible solution on most mediums (mouse, touch screens, other pointing devices), panel can be bookmarked to be heard on reading devices<\/li>\n<li>Action panel can be combined with Details panel (if there is enough space)<\/li>\n<li>Actions can be described very precisely<\/li>\n<\/ul>\n<h3 id=\"Test-Cons\"><span id=\"cons\"><img decoding=\"async\" src=\"https:\/\/touk.pl\/confluence\/s\/pl_PL-1988229788\/4252\/6ac85e9b14675c5514a674e1aecae99c9505ed36.30\/_\/images\/icons\/emoticons\/forbidden.png\" alt=\"(minus)\" \/> Cons<\/span><\/h3>\n<ul>\n<li>Space consumption, even if some actions can be hidden under \u201cAdvanced\u201d button, this design is always more \u201cstuffed\u201d<\/li>\n<li>Can generate (sometimes really long) extra mouse moves and additional clicks<\/li>\n<li>Keyboard support may be difficult if rows or selected widgets also use navigations buttons (tab key, arrows etc.)<\/li>\n<\/ul>\n<h2 id=\"\"> <\/h2>\n<h2 id=\"context-menu\">Context menu <\/p>\n<map id=\"gliffy-map-65077418-3833\" name=\"gliffy-map-65077418-3833\"><\/h2>\n<\/map>\n<p><map id=\"gliffy-dynamic-map-65077418-4156\" name=\"gliffy-dynamic-map-65077418-4156\">\n<\/map>\n<p> {#Test-Contextmenu}<\/p>\n<h3 id=\"Test-Pros\" class=\"1\"><span id=\"-2\">\n  <a href=\"http:\/\/touk.pl\/blog\/wp-content\/uploads\/2013\/11\/example_view_2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11646\" alt=\"example_view_2\" src=\"http:\/\/touk.pl\/blog\/wp-content\/uploads\/2013\/11\/example_view_2.png\" width=\"570\" height=\"320\" \/><\/a><br \/>\n<\/span><\/h3>\n<h3 id=\"pros-2\"><img decoding=\"async\" src=\"https:\/\/touk.pl\/confluence\/s\/pl_PL-1988229788\/4252\/6ac85e9b14675c5514a674e1aecae99c9505ed36.30\/_\/images\/icons\/emoticons\/add.png\" alt=\"(plus)\" \/> Pros<\/h3>\n<ul>\n<li>If you stick to short action names space consumption is minimal and since it\u2019s used only during action selection it\u2019s also less perceptible<\/li>\n<li>Much faster if you use mouse or keyboard (with context menu shortcut \/ button)<\/li>\n<li>Actions can be organised in tree like hierarchy which can be navigated (expanded) with minimal mouse moves and no additional mouse clicks<\/li>\n<li>Nicely combines with drag&drop or multi record actions<\/li>\n<\/ul>\n<h3 id=\"Test-Cons\" class=\"1\"><span id=\"cons-2\">\n  <img decoding=\"async\" src=\"https:\/\/touk.pl\/confluence\/s\/pl_PL-1988229788\/4252\/6ac85e9b14675c5514a674e1aecae99c9505ed36.30\/_\/images\/icons\/emoticons\/forbidden.png\" alt=\"(minus)\" \/> Cons<br \/>\n<\/span><\/h3>\n<ul>\n<li>Since context menu is invisible until explicitly called some people may not be aware that there are any actions available on selected objects<\/li>\n<li>Poor support on some touch pads or touch screens, problematic support on screen readers<\/li>\n<li>If used in web applications it overrides default browser context menu which can be a nuisance for some users<\/li>\n<\/ul>\n<h2 id=\"-3\"> <\/h2>\n<h2 id=\"why-not-both\">Why not both ? <\/p>\n<map id=\"gliffy-map-65077420-9222\" name=\"gliffy-map-65077420-9222\"><\/h2>\n<\/map>\n<p><map id=\"gliffy-dynamic-map-65077420-1741\" name=\"gliffy-dynamic-map-65077420-1741\">\n<\/map>\n<p> {#Test-Whynotboth%3F}<\/p>\n<h3 id=\"Test-Pros\" class=\"2\"><span id=\"-4\">\n  <a href=\"http:\/\/touk.pl\/blog\/wp-content\/uploads\/2013\/11\/example_view_3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11647\" alt=\"example_view_3\" src=\"http:\/\/touk.pl\/blog\/wp-content\/uploads\/2013\/11\/example_view_3.png\" width=\"570\" height=\"330\" \/><\/a><br \/>\n<\/span><\/h3>\n<h3 id=\"pros-3\"><img decoding=\"async\" src=\"https:\/\/touk.pl\/confluence\/s\/pl_PL-1988229788\/4252\/6ac85e9b14675c5514a674e1aecae99c9505ed36.30\/_\/images\/icons\/emoticons\/add.png\" alt=\"(plus)\" \/> Pros<\/h3>\n<ul>\n<li>Beginners has clear indication of where and what actions are available on selected objects<\/li>\n<li>Advanced users can use faster context menu approach, that do not confuse beginners (they still has their action buttons)<\/li>\n<li>Action buttons panel can be compressed to minimum, only to show most important actions (other actions can be hidden under \u201cAdvanced\u201d button)<\/li>\n<li>Action panel can be combined with Details panel, since action buttons would be minimal, there should be more space for details<\/li>\n<li>Hide action panel option if workspace size is crucial (i.e. some clients has limited screen size) and users are aware of context menu<\/li>\n<\/ul>\n<h3 id=\"Test-Cons\" class=\"2\"><span id=\"cons-3\">\n  <img decoding=\"async\" src=\"https:\/\/touk.pl\/confluence\/s\/pl_PL-1988229788\/4252\/6ac85e9b14675c5514a674e1aecae99c9505ed36.30\/_\/images\/icons\/emoticons\/forbidden.png\" alt=\"(minus)\" \/> Cons<br \/>\n<\/span><\/h3>\n<ul>\n<li>Initially you still loose some fix space<\/li>\n<li>Redundancy may be confusing for some users (although this con is questionable \u2013 unaware beginners do not see any redundancy, advanced users can hide action panel if it REALLY bothers them)<\/li>\n<\/ul>\n<h2 id=\"summary-choice-between-context-menu-or-action-buttons-panel-is-pretty-contextual-and-right-choice-strongly-depends-on-supported-media-and-user-group-however-there-is-pretty-good\">Summary Choice between Context menu or Action buttons panel is pretty contextual and \u201cright\u201d choice strongly depends on supported media and user group. However there is pretty good \u201cmix\u201d solution that gives more pros than cons (unless redundancy is big problem for you) and will satisfy unaware beginners and users that strives for fast actions. If you come to mentioned choice, always give a chance to \u201cwhy not both ?\u201d scenario.<\/h2>\n","protected":false},"excerpt":{"rendered":"Recently I was drawn into one of those UI &#8220;religious&#8221; disputes that has no easy answers and usually both sides are right. One of our web developers was trying out new web tech (with pretty rich widget library) and started to question himself about some basic usability decisions. The low level problem in this case is usually brought to &#8220;which widget should I use ?&#8221;. I&#8217;m not fond of bringing the usability problems to questions: Should I use Tabs over Menu ? Or should I use Context menu instead of buttons panel ? But sometimes if time is crucial factor and other usability levels are by default not addressed at all &#8211; better developer that asks those basic questions than developer that do not question himself at all.\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[71,440],"class_list":{"0":"post-11641","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-development-design","7":"tag-frontend","8":"tag-ux"},"_links":{"self":[{"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/posts\/11641","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/comments?post=11641"}],"version-history":[{"count":9,"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/posts\/11641\/revisions"}],"predecessor-version":[{"id":15379,"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/posts\/11641\/revisions\/15379"}],"wp:attachment":[{"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/media?parent=11641"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/categories?post=11641"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/tags?post=11641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}