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

If you want, you can also create a raw Markdown template to use in GitHub issues, after GitHub implemented Tasks: <a href="https://github.com/blog/1375-task-lists-in-gfm-issues-pulls-comments" rel="nofollow">https://github.com/blog/1375-task-lists-in-gfm-issues-pulls-...</a>.<p><pre><code> To Do ===== Groceries --------- - [ ] Buy milk - [x] Buy eggs </code></pre> EDIT: You could also play with the idea of a paid plan that allows users to create their own custom checklist using a select amount of your checks - possibly with the option of creating their own as well.<p>I'd consider throwing down $3 or $5 as a one-time fee, and even if the site stops working, I wouldn't have minded spending that money.<p>EDIT: Another feature could be the ability to display your own list on /user/123. It'd save me the bother of always going on about the same things, especially when it comes to accessbility.<p>EDIT: <i>Another</i> feature could be custom CSS and branding, but that could be implemented as a second tier, since other companies might want to use this for branding and PR. I personally don't care for it as a private individual.

Hi Everyone,<p>I created a free - research based - usability checklist, which can be used to catch common usability issues on websites before doing expensive user testing.<p>By fixing obvious usability problems you get more meaningful feedback from user testing.<p>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?<p>Many thanks in advance!<p>-Nina, nina@userium.com, <a href="http://userium.com" rel="nofollow">http://userium.com</a>

[list-item-requests]<p>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.<p>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 commonly used to expand text selection (TheNextWeb is an offender here, as they treat arrow left/right as a shortcut for "prev/next article" which extremely annoys me). Ctrl+L focuses the location bar of the browser. AltGr+[a-zA-Z] are used in many languages to enter diacritics like "ó".

As it stands this is very web-centric. I'd suggest distributing all the points on different checklists for different types of applications. Relevant types that I could think of right now could be: Web site, web application, mobile app, desktop application, console application (maybe). Of course, many points would be the same for different applications, but some are only relevant to a subset (e.g. desktop applications don't necessaily need a memorable URL or use the browser's back button).<p>Very nice work, though.

&#62; Color. Visited links color is different than unvisited.<p>I thought most browsers disabled that feature some years ago to prevent the exploit where you could see all the websites a user has visited by sampling colors of pixels at strategic locations.<p>Speaking of usability, what does the "reload" button in the bottom right do? For me it <i>resets</i> the form, not reloads it, whatever reloading a form means.<p>Otherwise very nice list. Can probably be made infinitely long though

Very good idea. If I could suggest some improvements, it'll be good to have a separate print-only stylesheet [0] and test it cross-browser (probably one-column only, or two-columns with small adjustments). Currently, in print preview with default settings, it produces either hell lot of unused whitespace in the portrait mode (Opera), or not-so-much-but-still in Firefox due to floating issues. It looks much better though in Chrome.<p>[0] &#60;link rel="stylesheet" type"text/css" href="print.css" media="print"&#62;

great idea and a nice list. any links to articles that support the reasoning behind a recommendation would be useful, though definitely not neeeded for every bullet.

Maybe some sort of ranking of importance, even user voting. Like when following MVP, is it critical to have X or Y at release.<p>Thanks for the list.

I see a lot of the easy-to-forget-but-we-all-know-we-should-do-them things, so bravo, thanks, and bookmarked.

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.

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.

Suggest adding Font section to checklist - e.g. CSS providing generic font fallback. Fontsize recommendation 16 px, line height 1.5 em, relative fontsize for Hx etc..

Good stuff! Here's few more..<p>Should there be one check to ensure that the site works at least somehow if javascript is disabled?<p>Also, there could be one check to ensure that the pages can be printed.

You should customize the bootstrap variable that controls the navbar collapsing width.<p>There's no need for a collapsing navbar if it has just one item that easily fits on all widths.

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

I've been looking for such a list before, glad to have found it! Please don't stop developing it!

$('input[type="checkbox"]').each(function() { $(this).attr('checked', 'checked'); });

I suggest a new name. userium is giving me a headache trying to figure out how to pronounce it.