How about something like this:
Can i just create this in HTML as a block? We could merge the tag vocabularies in Drupal. The combined image/lead image/file upload may be a bit harder.
Using the NodeFormCols module I did some rearranging of things. http://publiclaboratory.com/admin/content/node-type/note/form
I'm also hiding the right sidebar on Note add/edit pages in nodes.css (committed to the repo on live but not pushed to this server, we have some cleanup to do).
I also modified how the Tool and Places vocabs show up. I unselected "tagging" in those vocabs so folks see a list of tools and places. It seems to me that if we want to add a Tool or Place term that in this form is probably not the place to do it, and this makes for a select list is easier to use than a "type and see where we end up" sort of approach. My heart won't be broken if you disagree.
Changed Places vocabulary back to the freetagging that it was before.
Aha! based on your excellent work, i massaged stylesheets and the new module for a bit until it was fairly consistent and simple through the whole site. The module affected Page, Place, and Tool pages too. It looks great now! Awesome work:
and btw i removed second sidebar on all of these pages to give the form some more space. good call on that.
Nice. Good job tidying that up. It looks great.
Aaargh this is open again. My cleanup in Chrome looks groovy, not so hot in FF. I also added a background and border to the dashboard note form. @jywarren You like?
Oh. I don't have permission to reopen :P
Just had my first shot at using the note form on the dashboard. PHEW, a little rough but I was able to do it.
Here's the post -> http://publiclaboratory.com/notes/rjstatic/1-20-2012/recap-thermal-flashlight-workshop-12182011
Just clicking edit gives you an idea of how weird it must have gotten on the dashboard page.
Issues I ran into:
Conclusions? I like this idea of a small form, it's inviting, it seems easy, the user is an asteroid and the form is the blackhole... but it's probably not the ideal place to get work done. I've been wrestling with the same problem on my FarmHack beta where I want to have a topic form on the forum itself but some forum topics are questions (where simple is good) and some are full blown how-to's (which need a serious work space). The best I can come up with is what I'll call the "deceptive form". GMail has been doing this for ages. You click on a text box to write your response and it suddenly turns into a much bigger form. I think our best shot at getting this cheaply is something that has been coined as a "modal frame". It's like Lightbox2 for forms. http://drupal.org/node/1298862
There are a number of ways to accomplish this in Drupal 6 at this point, some of which I've used and found to be fairly straight forward.
Oh! So if we do get some kind of fullscreen hotness in the Note form, the right column and middle columns could have separate scroll bars. So on the right side of the screen would be resources for the note while on the left is the text the user is writing. I was finding that as I was writing I was thinking about particular images I was going to upload. Not having to scroll away from where I was writing would have been nice.
OK, i puttered around with this a bit trying to compact, simplify, etc. I like your style changes and added a few modifications. Modal could work, and we could use Modalbox, which I use in MapKnitter, but I'm encouraged to try getting the image upload form more intuitive. I like the "deceptive upload" idea you mention.
What about http://www.uploadify.com/demos/ ?
I dunno if we can shoehorn this library into this application but it does do multiple file uploads and takes up very little space. We could ditch the image previews, maybe, to save space, too.
what's the "Test" field at the bottom of the note posting form? were you testing something? mind if I remove it?
Ok, comparison of current already-somewhat-simplified form with a proposed radically simplified form (haven't integrated wysiwyg option):
:-) I also did a variation that says "Ask a question or describe your work to open source it" -- emphasis on note posting as a primary way to contribute open source
I'm tempted to simply not offer WYSIWYG or any advanced features, instead allowing users to enable an "advanced note posting" form, maybe in the "more options" area. I dunno, maybe WYSIWYG doesn't fall under advanced features, though.
resist temptation! just add a "enable rich text formatting" text link between the title and body. I wouldn't put it in "more options" or "advanced features"
And which should be default? Plain text? I still also have to put the useful formating tips thing like here in github.
I'd say default to plain text and have that link to a pop-up formatting tips ala github. How about arranging the links like this:
What is Markdown? | Markdown Cheat Sheet | Enable Rich Text.
I also suggest we think about wiki editing separately, though we can learn from the note posting redesign. I like a lot of the ideas of commentability and the demand for richer text layout is much higher importance in wiki pages (see Chris F's page here: http://publiclaboratory.org/wiki/ndvi-plots-ir-camera-kit) and making note-posting simpler but wiki posting richer may reinforce notes as an entry-level way to participate. Then we keep a very nice low-barrier mode of participation
I also suggest we think about wiki editing separately, though we can learn from the note posting redesign. I like a lot of the ideas of commentability and the demand for richer text layout is much higher importance in wiki pages (see Chris F's page here: http://publiclaboratory.org/wiki/ndvi-plots-ir-camera-kit) and making note-posting simpler but wiki posting richer may reinforce notes as an entry-level way to participate. Then we keep a very nice low-barrier mode of participation and don't try to burden it with advanced features, while people who want those can make wiki pages.
This design rocks. I love the color, btw-- I say we think more about color in the future. the little things in this design really aide usability, like "attach an image" being separate from "attach a file." Thanks for thinking this through.
I agree with you on wiki editing being separate. The notes are just coming into their own as a nice low barrier to entry, and I think comments below notes work just fine as is. no need to mess with them.
Further refinement. We'll need to start thinking about how to actually implement this... i think CSS-fu can only get us so far, but if we code a custom HTML form, we may have to deal with things like getting the dynamic ReCAPTCHA for first-time posters to work. We would also have to tackle nice tag autocompletion.
Also some nice icons for Attach images and Attach Files, Post by Email, Rich Text would be nice. I can get monochrome versions of the SILK icon set for these.
I don't know-- will the icons increase readability? I'd be surprised if they do, and wouldn't spend time on them. The "image", "photo" and "picture" icons, for me, would just be yet another ideogram to have to mouse over and try to memorize.
i'm fine with no icons. Typically icons (especially ones as ubiquitous as SILK) don't need to be actively memorized, but they help you quickly (milliseconds) identify a button you've seen before. But it's not a huge need or anything, and i like the simplicity of the form.
I did this at the airport, just to see... it actually almost works, try it! some validation failure, so we'll probably have to wire it up as an actively generated page. I built it by tearing apart a static version of the existing /note/add page, and posting the static HTML on the server. It's not actually really connected to the Drupal website at all, it just "points" there.
More notes on rich text editing (actually markdown):
http://stackoverflow.com/questions/2512254/iterate-through-every-file-in-one-directory (try the comments editor, its GREAT and has great help information)