Show HN: Usability checklist – catch common problems before user testing • Hacker News Board

Re: Show HN: Usability checklist – catch common problems before user testing

#11

Post by kmfrk » Wed, Apr 24, 2013, 1:04 PM UTC

userium wrote: post #2

Hi Everyone, I created a free - research based - usability checklist, which can be used to catch common usability issues on websites before doing expensive user testing. By fixing obvious usability problems you get more meaningful feedback from user testing. Please help me make this service better by sending some feedback. Do you find this useful? Would you use this? Should I develop it further? Many thanks in advanc…

More suggestions for the accessibility list:

    1. If you have to use divs and spans instead of more
       semantic elements like lists and headings,
       use precise, descriptive IDs. Same for classes.

    2. Use WAI-ARIA in your HTML[1].

    3. Link skips.

[1]: https://developer.mozilla.org/en-US/docs/Accessibility/ARIA

Re: Show HN: Usability checklist – catch common problems before user testing

#12

Post by quaffapint » Wed, Apr 24, 2013, 1:15 PM UTC

Maybe some sort of ranking of importance, even user voting. Like when following MVP, is it critical to have X or Y at release.

Thanks for the list.

Re: Show HN: Usability checklist – catch common problems before user testing

#13

Post by jakub_g » Wed, Apr 24, 2013, 1:17 PM UTC

jakub_g wrote: post #10

[list-item-requests] 1. Basic functionality of the page can be used without mouse, just with keyboard (using TAB button to navigate between the links / buttons). Whenever I TAB, the active/focused item should be clearly indicated e.g. with a border or different background color. 2. You should be extremely careful not to override the native keyboard shortcuts of the browser. E.g. SHIFT+ARROW_LEFT/RIGHT/UP/DOWN are com…

Regarding (1.), some of you may find interesting my study regarding support on HTML elements to trigger JS event listeners in various browsers:

http://jakub-g.github.io/accessibility/onclick/

Re: Show HN: Usability checklist – catch common problems before user testing

#14

Post by mhaymo » Wed, Apr 24, 2013, 1:40 PM UTC

jakub_g wrote: post #10

[list-item-requests] 1. Basic functionality of the page can be used without mouse, just with keyboard (using TAB button to navigate between the links / buttons). Whenever I TAB, the active/focused item should be clearly indicated e.g. with a border or different background color. 2. You should be extremely careful not to override the native keyboard shortcuts of the browser. E.g. SHIFT+ARROW_LEFT/RIGHT/UP/DOWN are com…

> You should be extremely careful not to override the native keyboard shortcuts of the browser.

Yes. Please heed this Facebook, Twitter and all the other sites that hijack '/' to do a search. That already means "Find in page" in Firefox.

Re: Show HN: Usability checklist – catch common problems before user testing

#15

Post by fleaflicker » Wed, Apr 24, 2013, 1:50 PM UTC

You should customize the bootstrap variable that controls the navbar collapsing width.

There's no need for a collapsing navbar if it has just one item that easily fits on all widths.

Re: Show HN: Usability checklist – catch common problems before user testing

#16

Post by ScottWhigham » Wed, Apr 24, 2013, 1:59 PM UTC

Well done. For people whose Firefox's Acrobat won't print or for people who tried printing using IE8/9/10 and received the JS error, browse to the page using Chrome and print. You can easily save as PDF.

Re: Show HN: Usability checklist – catch common problems before user testing

#17

Post by Scottopherson » Wed, Apr 24, 2013, 2:13 PM UTC

Nice, this is a really good list. You should put this up on Github (or something) so others can submit feedback/requests/corrections/etc.

Re: Show HN: Usability checklist – catch common problems before user testing

#18

Post by ambiate » Wed, Apr 24, 2013, 2:34 PM UTC

jakub_g wrote: post #13

jakub_g wrote: post #10

[list-item-requests] 1. Basic functionality of the page can be used without mouse, just with keyboard (using TAB button to navigate between the links / buttons). Whenever I TAB, the active/focused item should be clearly indicated e.g. with a border or different background color. 2. You should be extremely careful not to override the native keyboard shortcuts of the browser. E.g. SHIFT+ARROW_LEFT/RIGHT/UP/DOWN are com…

Regarding (1.), some of you may find interesting my study regarding support on HTML elements to trigger JS event listeners in various browsers: http://jakub-g.github.io/accessibility/onclick/

Do you know why it prompts "This page is asking you to confirm that you want to leave - data you have entered may not be saved."?

Re: Show HN: Usability checklist – catch common problems before user testing

#19

Post by jakub_g » Wed, Apr 24, 2013, 2:44 PM UTC

ambiate wrote: post #18

jakub_g wrote: post #13

Earlier quoted context omitted.

Regarding (1.), some of you may find interesting my study regarding support on HTML elements to trigger JS event listeners in various browsers: http://jakub-g.github.io/accessibility/onclick/

Do you know why it prompts "This page is asking you to confirm that you want to leave - data you have entered may not be saved."?

I've added 'window.onbeforeunload' to test a weird behavior of IE' + onbeforeunload + click event listener bound to doesn't return false, then clicking (from mouse/kbd) such a link triggers onbeforeunload().

It's documented under http://jakub-g.github.io/accessibility/onclick/#note6

Re: Show HN: Usability checklist – catch common problems before user testing

#20

Post by tannerc » Wed, Apr 24, 2013, 3:23 PM UTC

Would be great to see local storage or something similar implemented on the page, so I could maintain this checklist on a per-project basis without having to go over the list repeatedly.