To Do
=====
Groceries
---------
- [ ] Buy milk
- [x] Buy eggs
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.
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.
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.
EDIT: Another 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.
I want to introduce a tool which allows creating custom
checklists, sharing them, printing, etc. - for free:
http://checkvist.com . There are some premium features,
but they are not checklist-oriented. You can create list,
share it with your team, clone the checklist, print it.
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?
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.
This[1] is the official CSU Sacramento checklist for accessibility, it might help flush out some of OP's checklist items. It is a bit outdated (2009) so I wouldn't necessarily recommend taking it wholesale.
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 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 "ó".
I've added 'window.onbeforeunload' to test a weird behavior of IE<=8 (actually I could tweak the JS on the page to add the listener only for old IE). When you have a link like '<a href="javascript:void(0);">' + onbeforeunload + click event listener bound to <a> doesn't return false, then clicking (from mouse/kbd) such a link triggers onbeforeunload().
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).
> Color. Visited links color is different than unvisited.
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.
Speaking of usability, what does the "reload" button in the bottom right do? For me it resets the form, not reloads it, whatever reloading a form means.
Otherwise very nice list. Can probably be made infinitely long though
The css :visited pseudo-class now only allows certain changes, such as changing the color of text. The browser does show those changes. JavaScript can ask what color a link is, but the browser will always lie and say that the page is un-visited. If blue is un-visited and purple is visited, you may see in the browser a mix of blue and purple links, but your JavaScript will only see blue.
Visited link coloring work on my Mac Safari 5.1.7. You can easily try it on your own browser by going to google.com and clicking a search result there. The link changes color.
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.
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.
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..
- Site should work even if the page is zoomed in (e.g., visually impaired people may do this). There are two kind of zooms in browsers, one zooms the whole page pixel by pixel. The other one zooms only fonts. It is usually tricky to get the font zooming look good.
- Some people use Screen Readers to browse the web. The web site should have easy navigation and have text for all non-textual content. See http://webaim.org/techniques/screenreader/
Also, you already mention responsive design for various screen sizes. You could mention that it means the pages should look ok on tablets and phones.
EDIT: I just can't stop... one more thing: The page should load fast even for users who are using 3G networks
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.
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.
EDIT: Another 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.