Website interface problems/solutions
Hi guys,
I'm really into this project, but every time I come around to projectpier.org I get pretty frustrated with how the site is layed out. A lot of the navigation elements lead to pretty unclear pages and some of the pages have weird/broken links in them. Here's a list of problems I can see. If this kind of thing can be made smoother then noobs will be a lot more likely to get PP and try it out.
- Development page - INTRO: "links to get you up to speed" is ok, but maybe this page should have at least some description of how you want PP to be developped, like that it's open source, that you need coders, testers AND themers to make it happen. Really, I think the best layout of this page would be in terms of the different development needs that PP has, so one section about testing/Bug tracking, one section about coding/developpers and one section about extensions/themes.
- Development page - DOWNLOADS: The note about translation for your language could probably be on the download page itself in the description. I'm not sure how you are planning to run the themes and things, but it seems a bit amorphous to call themes developped by other people "related projects". For the sake of clarity, could they be called 'extras' 'add-ons' or something? Wordpress uses that kind of metaphor very effectively to distinguish the core product from user-created extensions.
- Development page - Installation Guides: If there is no installation guide available it really shouldn't be mentioned on this page. If anything the PP project/download page should have links to install documentation and relevant how-tos.
- Development page - bug tracking: The image that is there now is so small that it is illegible, but still manages to be so big that it blocks out everything else on the page and makes it hard to find information. I would much rather have a link to a full size version of this image (maybe with a little thumbnail) than a middlesize version that does nothing. This section would also be nice if it emphasized how people can help the project by finding and detailing bugs. A link to some bug-hunting and testing guidelines would also be very useful here, so people know how to talk about bugs they find. Having such a detailed process map on a page without too much other information seems like overkill. On a different note the link to 'all issues' leads to a search page which is very confusing, rather than the actual full issues listing.
- Development page (general) : I've said this before, but I really think that setting up an email list for each type of development would be a good way to simultaneously build community and get everyone aware of what's going on. It also allows people to be passively involved in the community without constantly coming around to the site and checking the forums. Maybe it's just because I don't like the drupal interface, but having a link to a mailing list for 'testers' or for 'coders' or for 'themers' would make me a lot more interested in subscribing to PP information.
- Download page: This page should lead to clear information about how to download PP and instructions for installing it. It should also clearly point to the releveant forums, 'extensions' and language packs that people might want to use with PP.
- I think when people go to a page called 'download' they basically want a big shiny button that says 'download it!", like Firefox and Wordpress use, emphasizing the value of FREE in avoiding complicated purchasing processes. The 'download' link definitely should not take people to the general project page with all the different projects, which is super-confusing. The fact that it displays PP as effectively equal to each of the theme/color variants seems a bit embarassing and wont' make sense to a new user, who wants to download PP and doesn't understand why the download link took them to the wrong place. On top of that, even the http://www.projectpier.org/project/ProjectPier page, which summarizes the 'PProjectPier' project in drupal, might not be a particularly good idea, as it has lots of unnecessary information. I think a special page aside from the 'project summary' one would be much better, with links to the most recent version. If you do keep using the project page, then you should edit the text of the description so that all information someone might need (including a download button) is present there. As soon as most people see that 'official releases' section they are going to turn their brains off. Really, if the goal is mass appeal, then the best bet is probably to avoid the development pages Drupal outputs entirely in favor of written pages that just link to the newest release and stuff. I've never found drupal.org very useful partly because of the way they use their development pages as the public interface. Wordpress used to just let plugin writers have their own homepages for the plugins, and it worked better than the Druapl module system does. It seems to me that having a public-focussed view of things is a good idea, especially when the software actually is pretty easy to use (PP is WAY easier than Drupal to install and use).
- Download page - EXTRAS: as I said above, having a seperate page that lists projects other than the main PP project is probably a good idea, 'extensions' or 'extras' or whatever, I think it would make sense as a top-=-level category. If the only kind of extension at this point is themes, then the link could be called themes. This would emphasize how PP is sexy looking and the page would be full of screenshots, which people want to see before they even think about an app.
- About page: Adding a paragraph at the end of this page that links to different elements of the PP site would probably be a good idea. Encourage people to try iti out [link to download page] and get involved [link to development page]. I think the about page should also be closer to the left of the menu instead of the right (because it's likely to be the first page people need).
- Front Page: Having a good development page would mean that instead of sending people to the contoact form at the top of the front page, you could send them to the development page where they can find out how to help. I've said before that linking to a contact page for 'interest on any level' is pretty intimidating. I mean, I myself don't really feel like emailing you guys to say "hey guys, can I be in the loop, but not do anything yet?". Giving clear indications of what kind of help you need and what is involved in getting involved will avoid getting contacted by confused people as well as avoiding scaring people off with too much vagueness.
- Front page: no general data? There's no indication of what PP is on the front page other than the 'easy online collaboration' in the header. The front page is the portal, so having a section about what PP is would really help people coming in for the first time. I would recommend having a 1-2 sentence description of the product, followed by links to the download page, the extras page and the development page. Something like:
"ProjectPier is a free, self-hosted PHP application for managing tasks, projects and teams through an intuitive web-based interface. Its function is similar to commercial products like BASECAMP and activeCollab, but allows the freedom and scalability of self-hosting. Even better, it will always be free. [Learn More] [Download]."
- Front page: blog: Having the blog on the front page makes sense because the project is still very new, but right now there is a widget in the sidebar that is showing recent blog post titles even though the blogs are on the page itself. This space would probably be better used on other things like links to various things about PP. You may also want to allow people to sign up to the blog as an email newsletter.
- Search: Is there anything stopping you guys from having a full search field in the header rather than a link that says search? Right now there's tons of space in the banner to put a proper search field and it would make it a full pageload closer for anyone who wants to search. It would also get the search link out of the toolbar, which would be good because the toolbar is pretty crowded.
- CSS: I realize I'm being picky when I start talking about css, but the design is so clunky compared with the relative lightness of the app itself. Having the dark blue bars at the top makes the page very topoheavy, and I kind of feel like the menu is harder to use because of it. Cleaning up the interface and using just text would be fairly simple and would go a long way towards giving the impression that PP is serious, as well as leaving the PP 'brand' relatively blank if you guys want to move into something specific later. I made a quick mockup in photoshop of what I mean ( http://simianuprising.com/images/pp-styleideas.png ). I'm really sorry if you guys made the theme yourselves and i'm stepping on your toes with this comment, and you can ignore it if you want, I'm not trying to be snarky or insulting. If you are looking for help I wouldn't mind spending some time smoothing out the bumps in the theme for you.
Okay well is that enough for now or what? Obviously not all of this can get done any time soon, but it's important that new users be given a smooth ride when they come to the site so they don't leave right away and just settle for the crippleware version of aC and stuff.
If you have any questions please email me. I don't have a ton of time to work on this stuff but am willing to help out when I can (I also just want PP to work well so I can use it myself!).

Oops, I guess the first problem that we solved was getting the forum to post my topic! I'm now already working on the things I mention here. Sexy new PP content should be here soon!
Jeremy,
That was a very well thought out post, and I think right on in many of your observations.
I'd also love to see RSS added to the forum so I can monitor what's happening there as well (and I think this will be come increasingly important). I don't know how easy that is to implement in Drupal (I'm a Joomla guy).
But, your comments on putting "up front" clearly what the project is (your description is good) with a simple "download" page and a "how to install" walk through would be helpful to many people, I think.
Thanks again for your comments.
John
Thanks. With any luck these changes will be finished in the next few days and I'll move them into the live site ( currently working in the test environment).
Just in time for our first real release, which will be just in time to beat the hell out of expensiveCollab one point oh.
Roland (or whoever updated the home page) ...
I noticed that you took jeremyclarke's suggestion to put some wording about the project right up front and put it into place.
That is great, and I think it really helps to put this "here is who we are, this is what it does, and here's how to download it right now" in that prime web real estate.
I would make one very minor suggestion. The last line of the first paragraph says: "Learn why you should choose ProjectPier, then Download the newest release."
I would suggest putting that in a paragraph by itself, just for emphasis. A short paragraph by itself commands more attention than the last line of a paragraph.
thanks j,
I actually did that myself. There is some content that isnt' ready but is necessary for the cohesiveness of the new PP site layout, so I haven't moved it over from teh test environment yet. Once it's ready, the front page will be completely different, with huge icons for download, manual, tour and get involved.
Should be online sometime next week, cross your fingers :)
(and has a hard time with my suggestions ;-)
J,
Jeremy is currently the guy who's doing the major Drupal things, since I will relocate to the US in a few weeks. He's doing a great job working with a CMS that has some "very own" ways to do things - the Drupal guys recently changed their slogan to "Changing the world one node a time" :-)
I am just hanging around and try to help whereever I can ... expect me back after the move.
- Roland