Preface:
My thoughts, mostly on styling but there are some usability concerns too. I've included some information in invisible, size-zero text (as to not crowd the post with small implementation details, etc) throughout, so for more information, one could select the whole post and paste into your favorite text editor.
Landing page:
Initial thoughts:
- There's so much blank space it's almost awkward. Space is good, but preserving the consistency of smaller buttons throughout the site is more important in my mind.
- The buttons feel like they are going to swallow me whole- so much padding, heh. The text in them is almost hard to read because of this. Long, small text is kinda hard to read. The smart people putting together accessibility guidelines have a thing for this- see https://www.w3.org/WAI/GL/WCAG20/#visual-audio-contrast-visual-presentation. It's not strictly applicable here, but it looks official and makes a good point.
- I think it also helps the page if one puts the borders seen all around the site. It's a page done in a more modern way, sure, but I think it fits in better to the rest of the site with borders.
I like seeing the site source without the dinosaur fossils for a change ;)
Result (click to enlarge):
Listing pages I:
I've
already done a mockup of how I envision this looking so there's no point in me rewriting what I have to say.
Though I have actually done a decent amount of research into designing webpages (mostly out of necessity) I don't think there's much I would change there, besides making "more info" into a button of its own, making the text a little smaller, and fixing some accessibility issues.
One key thing- I don't think that the objective shouldn't be to cram as many projects on a page as possible but to attempt to make each program as appealing as possible. The former is ugly and results in me looking at a wall of text. It may be beneficial to give users the opportunity to make a short description (< 300 chars, perhaps?) for this page and a long description for the "more info" page (if they don't you could just truncate the long description or something).
Listing pages II:
Ignoring that mockup, here's what I suggest as far as style changes to the current listing page:
- The breadcrumbs look a little out of place. I just kinda stuck em in the mainbodyinner but they could go anywhere
- It's still kinda got the wall-of-text feel so I added some padding in places, made sure the description column couldn't take over the world, and vertically aligned program names.
- The description column is still pretty wide, so I added an author column.Maybe one could put first authors here?
- I'd personally use mm/dd/yy hh:mm:ss as a default for dates here. Thinking about it some more, users have their own date format strings in their preferences, so I guess one could use those?
Forget what I said about not seeing dinosaur HTML earlier- I found some! :P Instead of using classes for even/odd, you could just use nth-child(odd) and nth-child(even) in your CSS for that https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child#Keyword_values
I did my styling to the "Most Recent" page, but this idea applies to other pages, too.
Here's what that looks like, kinda. It's more subtle here. (click to enlarge)
Guess what the next header is going to be :P Listing Pages III:
This focuses more on the sorting pages.
Initial Thoughts:
- Basically everything in section II, plus:
- The tables look off to me a little bit because the columns don't really line up.
- I'm not a fan of the clicking on the link and waiting for another page to load to change the sorting of the list- I think this is a valid reason to whip out some JS.
- The bottom looks a little off- missing the fillet/round on the corners.
Didn't do a mockup for this one.
People smarter than I am can probably find more things to do here, this was just a quick pass. I'll probably edit this with more things later when I have more time.
UI stuff ↑
UX stuff ↓
My thoughts on organization. Edit: It turns out I stole these
from commandblockguy. It doesn't change the quality of the ideas, or the details I fleshed out further.
Instead of the directory-based organization, it might be better to think about what they want first (games, math, art, etc), and make compatibility like a filter.
Each file could have little icons indicating which calcs/platforms it is for, and maybe even libraries it needs (dcs, c libs, etc). The user could select what calculator they have with radio buttons or checkboxes or something, and it would filter out the programs.
This is a difficult problem and there was
some fairly extensive discussion in the previous thread.
I personally didn't come up with a good solution, so here we go: we basically run the user through a flowchart.
First, we ask them "Are you looking for TI calculator programs, Casio Programs, or Computer Programs", but with huge icons. Like, maybe as large as the icons in the floating menu thing in SC3.
Say they click TI programs. We then ask "Are you looking for Monochrome Calculator,
Color Calculator, or Computer Programs" (with big, huge icons/popups with like a TI-83 screen for monochrome, a TI-84+CE screen for color, and like some
Apple II computer for
satire, err, the computer menu).
If they click color, we give them some tips on differentiating between a CSE and a CE, show them two more options, and
bam! we've figured out what calculator they have. Having a standard checkbox list for advanced users is a good idea, too. For bonus points, this could be saved in a cookie or something.
Ideally, we can narrow down a platform for a clueless user in three clicks or less and one click for advanced users- I think this is a fair sacrifice for preventing compatibility problems.
I also think it would be nice to automatically give programs PotM winner/PotY winner badges somehow. I know the latter exists, but the former could be nice.
There's even a list of winners floating around in the PotM subforum. Not sure how that could work, though.
