{"action":"created","issue":{"url":"https://api.github.com/repos/wet-boew/wet-boew-styleguide/issues/222","labels_url":"https://api.github.com/repos/wet-boew/wet-boew-styleguide/issues/222/labels{/name}","comments_url":"https://api.github.com/repos/wet-boew/wet-boew-styleguide/issues/222/comments","events_url":"https://api.github.com/repos/wet-boew/wet-boew-styleguide/issues/222/events","html_url":"https://github.com/wet-boew/wet-boew-styleguide/issues/222","id":44832370,"number":222,"title":"Details/Summary Polyfill widget not perceived as clickable","user":{"login":"neoinsight","id":1855584,"avatar_url":"https://avatars.githubusercontent.com/u/1855584?v=3","gravatar_id":"","url":"https://api.github.com/users/neoinsight","html_url":"https://github.com/neoinsight","followers_url":"https://api.github.com/users/neoinsight/followers","following_url":"https://api.github.com/users/neoinsight/following{/other_user}","gists_url":"https://api.github.com/users/neoinsight/gists{/gist_id}","starred_url":"https://api.github.com/users/neoinsight/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/neoinsight/subscriptions","organizations_url":"https://api.github.com/users/neoinsight/orgs","repos_url":"https://api.github.com/users/neoinsight/repos","events_url":"https://api.github.com/users/neoinsight/events{/privacy}","received_events_url":"https://api.github.com/users/neoinsight/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":37,"created_at":"2014-10-03T18:29:24Z","updated_at":"2015-04-01T21:06:57Z","closed_at":null,"body":"Recent usability tests of this widget on a CIC page confirmed something we had seen in mobile participants in the June testing. People overlook these detail/summary items and use other actionable page objects because the expand/collapse items do not appear to be actionable. In fact, in this round of testing, one of the participants slides her cursor over them in frustration and says \"These aren't links\". Participants are unable to solve the task correctly, because they simply do not click to expand the item with the answer in it. \r\n\r\nThe expand/collapse widget is shown in the video clip below in two forms. In the first segment of the clip, we see the widget with a button outline.  Ron at Transport modified it for the prototype testing, as we had previous usability test data on this widget that showed that people did not perceive it as a link. This was a successful approach - no one missed it.   In the second and third segments, you see the widget NOT being clicked,in fact the user says out loud that it is not a link. Several people failed to click that widget. Instead they used the map, which was not correct.  We believe that the current arrows look like bullets when used in a list,  instead of actions.\r\nhttp://www.screencast.com/t/BSY9haLnG\r\n\r\nPotential solutions: \r\n** A quick fix would be to add underlining, so that at least people can tell it's clickable. Other ideas in image below. \r\n\r\nRon added button highlighting, that worked very well but will look too complex in a list like the one on the Visa page. I believe in our heuristics review, we pointed out that the side arrow is not a good indicator that content is hidden below, and in fact, is directly inconsistent with the downward-facing chevron on the menus that show content is available below. The convention is a down-facing arrow.  Even placing the arrow at the END of the line would have helped.\r\n\r\nAnd the style guide should suggest that the most important content on a page should NOT be collapsed when the user first views the page... \r\n\r\nOr if this widget has an option to default a particular item to Expanded, that would really help too. \r\n\r\n@pjackson28 - wasn't sure if this was the right place to file this issue or not...\r\n![details polyfill ideas](https://cloud.githubusercontent.com/assets/1855584/4510479/d057e83e-4b2a-11e4-9db4-dfa6e190168f.png)"},"comment":{"url":"https://api.github.com/repos/wet-boew/wet-boew-styleguide/issues/comments/88632004","html_url":"https://github.com/wet-boew/wet-boew-styleguide/issues/222#issuecomment-88632004","issue_url":"https://api.github.com/repos/wet-boew/wet-boew-styleguide/issues/222","id":88632004,"user":{"login":"thomasgohard","id":1810242,"avatar_url":"https://avatars.githubusercontent.com/u/1810242?v=3","gravatar_id":"","url":"https://api.github.com/users/thomasgohard","html_url":"https://github.com/thomasgohard","followers_url":"https://api.github.com/users/thomasgohard/followers","following_url":"https://api.github.com/users/thomasgohard/following{/other_user}","gists_url":"https://api.github.com/users/thomasgohard/gists{/gist_id}","starred_url":"https://api.github.com/users/thomasgohard/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/thomasgohard/subscriptions","organizations_url":"https://api.github.com/users/thomasgohard/orgs","repos_url":"https://api.github.com/users/thomasgohard/repos","events_url":"https://api.github.com/users/thomasgohard/events{/privacy}","received_events_url":"https://api.github.com/users/thomasgohard/received_events","type":"User","site_admin":false},"created_at":"2015-04-01T21:06:57Z","updated_at":"2015-04-01T21:06:57Z","body":"@nrustand92 I think it would be best to make the entire summary element look like a button. When just making the arrow part look like a button it looks like a \"play\" button."}}