Skip to content
This repository

generally redesign and clean up Note posting form #53

Open
jywarren opened this Issue December 21, 2011 · 31 comments

3 participants

Jeffrey Warren R.J. Steinert mathew lippincott
Jeffrey Warren
Owner
  • There should be only one upload form
    • it should auto-detect images & add them to a gallery
    • add the first image as the "Main image" for use in thumbnails
  • single Tag field (limited to existing tags) with suggested tags below
  • All extra stuff (password protection, etc etc) should be under an expandable "Advanced" section so you don't have to think about/see it.
  • Should fit in a 500x375 px box

How about something like this:

IMG_20111221_142108.jpg

Jeffrey Warren
Owner

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.

R.J. Steinert
Collaborator

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.

The result:
plots-noteaddedit

R.J. Steinert
Collaborator

Changed Places vocabulary back to the freetagging that it was before.

Jeffrey Warren
Owner

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:

Revised note form for PLOTS website

Jeffrey Warren
Owner

and btw i removed second sidebar on all of these pages to give the form some more space. good call on that.

Jeffrey Warren jywarren closed this January 20, 2012
R.J. Steinert
Collaborator

Nice. Good job tidying that up. It looks great.

R.J. Steinert
Collaborator

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?

R.J. Steinert
Collaborator

Oh. I don't have permission to reopen :P

R.J. Steinert
Collaborator

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:

  • The gallery section get REALLY TALL.
  • All those buttons get confusing. They seem to bleed together. Some background color might help distinguish between each file uploaded.
  • The "Add another item" button is pretty weak. It's not very obvious.
  • Perhaps vocab and buttons should go in the main column as to not be pushed down.
  • You have to hit "Attach" in some contexts otherwise the file is lost.
  • Having to hit "Attach" and having the page reload sucks. This isn't the behaviour I'm used to from that widget, I'm used to it beng ajaxy.

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.

http://drupal.org/project/modalframe
http://drupal.org/project/popups

modalframe might be a better call because its javascript is based on some jQuery project. But I'm really not familiar with the innerworkings of the jquery community so I don't know if that's a long term thingy. Either way, there is some D7 way of doing modal, but for our needs, we just want what's cheap. I'll look into this if it still seems like a good idea next week.

R.J. Steinert
Collaborator

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.

Jeffrey Warren jywarren reopened this January 25, 2012
Jeffrey Warren
Owner

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.

Jeffrey Warren
Owner

what's the "Test" field at the bottom of the note posting form? were you testing something? mind if I remove it?

R.J. Steinert
Collaborator
Jeffrey Warren
Owner

Ok, comparison of current already-somewhat-simplified form with a proposed radically simplified form (haven't integrated wysiwyg option):

Current note posting form
Simplified design for research note posting

mathew lippincott
Collaborator

nice. +1x10^9

Jeffrey Warren
Owner

:-) 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

Jeffrey Warren
Owner

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.

mathew lippincott
Collaborator

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"

Jeffrey Warren
Owner

And which should be default? Plain text? I still also have to put the useful formating tips thing like here in github.

mathew lippincott
Collaborator

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:

TITLE
What is Markdown? | Markdown Cheat Sheet | Enable Rich Text.
BODY

Jeffrey Warren
Owner

How's this:

New note posting form

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

Jeffrey Warren
Owner

How's this:

New note posting form

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.

mathew lippincott
Collaborator

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.

Jeffrey Warren
Owner

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.

Latest revision of new note posting form redesign

Jeffrey Warren
Owner

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.

mathew lippincott
Collaborator

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.
silk icons

R.J. Steinert
Collaborator
Jeffrey Warren
Owner

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.

Jeffrey Warren
Owner

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.

http://publiclaboratory.org/new-note-form/

Jeffrey Warren
Owner

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)

Also http://epiceditor.com/

R.J. Steinert
Collaborator
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.