Stepping it up: Live Preview
As many of you have seen with the redesign and the fixed comments, I've really tried to increase the usability of the comments. Why so much focus on the comments? Because your interaction is a critical part of why I run this site. Your insights and assistance are an asset to me and to anybody else who happens to come across these pages.
In my next step in building a better experience and upon the advice of Khoi Vinh, I've added Live Preview. However, I've had to do it slightly differently than others due to a variety of factors:
Most importantly, I wanted the preview to appear as if it was just another comment in the list. The problem with this is that if the user is at the top of the page then they won't know that there is a live preview and have no way of seeing what their comment will look like.
This is where the fun begins. Clicking on the Preview button will scroll the page to the very bottom so that you can view your comment. But because the comment was designed to look like any other, it may not have been obvious what you were supposed to look at. To solve this problem, I used Garrett's BackpackBasecamp-inspired Yellow-fade technique.
Finally, what if you have JavaScript turned off? Lucky for you, I used some unobtrusive scripting and the preview functionality will work like it always did by taking you to the preview page.
So tell me, is it easier to use? How could it be even better?
Conversation
Just testing this out.
Wow, it seems pretty cool. The fade isn't very smooth in firefox/win, but the effect is there and it helps. It will be interesting to try again once there's more comments and it has to jump down the page.
omgbbq w00t! ^_^ this is awesome! taking commenting to a new level. congrats.
I saw this link on stylegala so I though I'd test it out!
What would be even cooler is if the page scrolled instead of jumped, and went down far enough so that the green arrow with the Preview button on was actually pointing at your comment!
Very nice re-design, the fixed comments idea is great!
Lets have a go then - I'm all for original design...
hmmmm not bad!
Fade is a bit jerky on Firefox 1.04 PC though, and using the scroll wheel doesn't scroll the page (weird)? Still excellent idea and brilliantly designed - well done!
Scott: I've tweaked it now so instead of 7 steps of fade, there's now 13 and I've sped it up.
Checking this one out... And i really like your redesign, nice job! 11 thumbs up!
You'd probably want to make the fading yellow erm.. green technique a bit larger - containing the column on the left side perhaps?.
Very cool .... will propably code a feature like this into my new website, whick I am currently building.
One thing to add maby ... and that is a button to submit the comment in the preview. I know it does not look like just another comment in the list then, but you don't have to go back to the right column to submit the comment.
Also like the preview updating as I write this comment :)
I love the sticky box, and the live preview... fantastic idea! :)
Sweet indeed. As for the fade, you might want to make it time-based, instead of a number of steps.
Does it validate
HTMLtoo?(<foo>illegal <img src="foo" onerror="document.title += '(hacked by 11born)'"> code here</bar>)
I definitely agree with Matthew, It would be cool if the green arrow actually pointed to your previewed comment. Nonetheless, this is very innovative. Nice goin$this->normalizeEntities16bit("8217").
Well.. lets see this neat lil comment preview then.. I'm honestly curious if it really "adds" anything to a normal commenting form..
.. yup.. Iove it.. well done!
Testing testing 123. Ooooohhhhh. Jealous...
Mark Wubben: the live preview currently doesn't validate the HTML. It is something I'd like to add so that the previewed comment more closely resembles the posted comment .
This is the best little comment form I have seen. Great job.
ooooo yeah
Like a lot of others, testing this out as a resultof the stylegala link!
SMEX
Very nice!
gotta test this thing ! !
I specially like the template
Wanted to see what all the hub-bub was about.
Most excellent usability.
nice idea... really cool in fact...
I was just testing the "Preview" feature, didn't mean to hit "Post" (suprised it worked though, with no name, email or URL). That did bring out a few points of note:
1) If you hit post and you're at the top of the document, you should be scrolled down to your newly added post.
2) Something other than "Comments" should be required, if anything to catch you from submitting bogus stuff (like I did above, on accident).
I'm really impressed with the work you are doing on this. I redesigned my comment boxes a few months back to make them nicer, but I think I may have to spend a lot more time on it now that I've seen how cool this is.
Also, very nice redesign of the site... the presentation of the information is fantastic. It's easy to follow how all of the elements on the screen fit together thanks to your green arrow technique.
Just testing :)
Test... ^_^
Oooh, this is pretty cool. Oh wow, when you preview and then keep typing ... the live preview feature kicks in.
Justin: No problem about the dummy post. I just deleted the message.
Having the user redirected to the bottom of the page makes perfect sense and I'll look to implement that.
As for requiring more than just comments, it goes back to what I was saying in the entry: I really want to encourage people to share their thoughts. I stay on top of new comments quite frequently so garbage posts haven't been a problem.
I planned to come here and just 'check it out,' but this is impressive enough to warrant praise. Good job!
I'm using Win/FF, and I'd like the arrow from this comment form to actually point at the comment I'm writing... or maybe at the bottom of the last comment.
Test test. Great site!
Just testing as well... looks good, though I think some feedback on the continue button 'Post' would be called for as well, to make sure users know that what they're seeing isn't the final posted version.
test
testing...1...2....3
whoa, that's cool!
JavaScript poping up all over the place, this is sweet!
(testing for the most part. very nice, and yes it does help.)
(testing a link here < thats tight!)
It seems I messed up my link code... wonder what I did wrong?
Sorry about that, you can remove it if you like.
View Source, seems external linkage is illegal perhaps?
non-external
I can mess with the preview by tacking stuff into the source.
While I too think the preview is very cool, I'm actually more impressed with the "sticky" design. The way the page scrolls and keeps the comment window in view just... feels good. Also the author credentials on the left hand side is nice.
Well done.
PS. Previewing is addictive.
It's very nice, congratulations! :)
Damn, this is hot. I've been wanting to do something w/ the fade technique. I'm glad somebody has done this with commenting. Really nice work, and keep it up.
Cool! I love to see the blog "standards" being challenged, as most of them are arbitrary.
(And, like everyone else, I'm posting this just to test the comment system.)
This sounds like a really well thought out usability friendly design. It is people like you who are pushing web application usability into the forefront quietly, but effectively. Yes, blogging tools are web applications :)
If I could suggest something to help make the posting easier: if I click preview, please give me a way to either edit again, or to post from the preview. At least for IE?
This is the coolest comment page I have ever seen on a site. I am not kidding in the least.
I've been staring at it for two days now and I love it!
Excellent.
I loved the position: fixed comment poster, and I love the new live preview.
The only thing that's at all funky, is that if the browser window is smaller than the width of the page, when you scroll horizontally the post-a-comment box 'stays in place' — meaning that, relative to the page, it wanders.
Not sure what to suggest bout that, though.
Randy Peterman: The preview was definitely an issue for those using IE. Especially on a long page such as this.
What I've done is updated it so that the 'post a comment' functionality works more closely like it does in Firefox and follows you as you scroll down the page. This should solve the preview issues.
test
This is probably the best commenting layout I have ever seen.
I want one of these on my website!
Nice going!
Gorgeous, simply gorgeous.
This looks very cool indeed!
This is a test... I wonder if it will work properly. Wow. Nice.
Sweet! Now how do you deal with threads ;-)
The page is too wide to fit, so I have to scroll horizontally. When I do that, the text boxes in the "Post A Comment" column stay fixed, while the black background slides out from under it.
Using Galeon 1.3.20, based on the Mozilla 1.7.7 Gecko renderer.
You know, this is brilliant. This really removes a lot of barriers to the commenting process in very clever ways.
Testing...
The fade is a bit jerky on FF 1.0.4/Mac as well.
As Chris said above, I'm not sure how to visually deal with threads, but if you could figure it out, it would be cool if this comment box could add to any thread by which comment the green arrow with the preview/post buttons is pointing to. Whatever comment the arrow is pointing at could be highlighted.
Since this comment area is fixed, it seems like it should be possible to know when a comment on the left is in the arrow region. I'm not nearly good enough to know how, though.
A mod like that would really add to the usability of a threaded messaging system. You could respond to multiple threads on a page very quickly. I have the feeling you're really onto something here.
Another test...
Man, I gotta say, I really love what you have done with this! Definatly thinking "outside the box" as it were!
The format is really easy to follow!
I just wish I had thought of it. :)
Wow, really nicely done. Gotta hand it to the innovators.
One improvement I could see is that you should move the POST A COMMENT on the side near the bottom, that way the button arrow more points at the comment you are adding (when using preview)
So hey!, test away
Looks pretty neat. Have you gotten enough useless comments on this article yet? ;-)
Like everyone else... I am impressed
I like it!
Very smooth.
There's a slight issue with the buttons at the bottom in Safari 1.3 (v312), they just need to be pushed a bit to the right.
you should move the search to the far right since it doesn't corelate with the posting column.
i hate typos: correlate
Just testing out your comments!
This is pretty cool.
MOST impressed.
I'm very impressed with this from a total design perspective. Wish I'd thought of it first ;-)
Good to see more thought being put into user interaction with elements that usually get less billing than what we consider the prominent elements.
Wow. This is beautiful. Yet another useless comment, but this is impressive stuff.
test
Testing it out. very slick. (and i even like the colour...)
test
neat
impressive system, maybe a minor bug
...I'm drunk, I'm talking double!...
very nice live preview.
Hm. Test Again.
Good idea! Maybe the fade could be a little longer! Or why dont you use the little arrow beside the commenters details, slowly fade in/out like slow blinking? That would be more personal for your design.
Lassuk, mukodik-e?
Why yellow, I wonder? Traditionally the color of caution, or warning. Suppose it fades well to white. It's sort of green here anyway.
Not fade away....
Testing!
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat.
So how does this look, and does it work in Safari?
Yes it does, and a lovely effect it is too. Nice work. Pretty damn seamless.
Hey, this is a really nice feature, congrats!
Testing here, as an interested in ajax technology.
BTW, I didn't know your blog. Seems interesting... I will synd.
Greetings.
Trying it out !
Very very nice example
Testing dude. Is this kickass?
testing
Nice feature! But as I was viewing this page in FF Mac, scrolling right (as the page is too wide) ended up with a mismatch in design (obviously, the fixed layout stays, the rest goes left. This means the commentbox goes to the right, on top of the links on the right.) Just my 2 cents!
Whoa! This is great!.
Didn't you mean "Basecamp-inspired Yellow-fade technique?
testing
Awesome
testing
This is definitly a fine hack
Bravo
Very cool. I also implemented this on my blog some days ago, but it doesn't really fit in the design (the default WordPress one). I got to fix the latter first, but this sure is inspiring!
Gavri Fernandez: 90 odd comments before somebody caught that one! That's too funny...
Just testing this out... Ajax is turning me on... seriously.
test
test
Very impressive. :)
checking this out..
Hi there
Ooh nice. More ajax at www.foopad.com!
what's it look like?
hello
Just testing...
Wow, this is pretty impressive. Can you tell us how you did it?
Works well in Safari in 10.4.1
test test
Great job Jonathan. And I mean the code (of the site, not yet the live preview) AND the concept.
When are we gonna see our live search on the right column while digiting in the search box? It's the natural target of your design, I guess ;-)
Andrea Martines: You must be psychic! It is most definitely the next feature that I want to implement! But I've been second guessing since a number of people have had issues with the design at 1024x768. I may have to rethink my implementation to handle users at lower resolutions.
Testing my comment. Again. Whoa! It is updating automagically now. As I type. I find that a distracting, because my entire comment is blinking each time I type a character (FF 1.0.3/Mac). There should probably be some sort of timeout (1 second?) before it updates, so it can wait for me to finish typing.
Any kind of privacy issue with intercepting my comments before I actually decide to post them? What if I write something really mean about you, but then think better of it? Did you read it anyway? Not that I would or you would, but that we could.
Oh... and the preview date is off by four days... says May 14th.
All that said, thanks for creating an inspiring interface.
Just testing
Taco Taco ?
testin' around
hello
some utf8: ?rv?zt$this->normalizeEntities16bit("369")r$this->normalizeEntities16bit("337") t?k?rf?r?g
Blah blah blah
Just testing out the comments...
Impressive feature. But the more interesting to me is how you highlight the blog owner's comments... Good idea.
Hmm, what's this button for?
,xzc.,sxac
Show me that yellow-fade! Okay, one more time.
sorry for the prove, but I wanted to see de YFT in action!
now, again!
i don't see nothing!
Not only is the functionality of it cool, but the design is lickable, too. Nice work!
Testing.
Ok, sorry. I didn't see the updating of the div as you scroll sideways (or did you just add that?).
Great design, and I love the comments. Testing to check this out. Nicely done.
Wow:D
Peter: Yes, I did just fix the side-scrolling issue. (No, you're not going crazy)
Jon, I'm not psychic: when design suggests functions, it's a sign of an excellent interaction strategy behind.
But, following this direction, the final search results should be rendered in the right column too. And this could probably add pain to your resolution issue! ;-)
A minor issue: while writing a comment, one cannot knows if new comments are added between the last he sees and his own. So, threaded comments could suffer of some desinchronization. I really don't see how this could be fixed, if not with a time-based ajax autorefreshing of the comments list.
Nice thing, even with javascript desactivated on-the-fly, it still works.
cool?
this is cool. i'm just testing how this works
neat
Testing it out... Wow, excellent job!
I have to say, you're site rules. I love the look and feel. The comments box is pretty dang sweet. I agree with what you say about comments. I absolutely love to get comments. It makes the site so much more interactive.
Very slick
Another one trying the
live preview.
Ok, I like.
What about removing the preview button and just having it happen automagically?
testing the live preview
Cool stuff!
Maybe you should replace <h1>tags </h1>
Funny Firefox 1.0.4 bug found with the fixed comment div. If you use the scrollbar to scroll left-right, post-a-comment stays where it's supposed to. But, if you select some text with the mouse, and drag to the right, as if you were selecting more text, the window scrolls, but the comment stuff stays fixed in the viewport. Using the scrollbar again makes Firefox realize what happened.
Hopefully that makes sense... Very innovative ideas; keep it up!
Scott DeMers: I thought of that but the problem is if the user is elsewhere on the page, I wanted them to have some way of knowing there was a preview somewhere. Besides, keeping the button creates a great failsafe for users without javascript.
Andy Fowler: It's a flaw in Firefox. The onscroll event only fires when a user clicks on the scrollbar and drags it. Something I hope they fix in the future! (I use the onscroll event to reset the div position when scrolling left to right)
This is a terrific example of creativity unleashed by the new technical approach! Great technique is nothing without great design...
Nice idea. I really like the timeline on the left hand side of the page as well. Sweet.
Love the idea of a live preview. Nice job.
Wow. The thing that I notice about myself, though, is that when I click a submit button or a preview button, I'll look away and just watch out of the corner of my eye for the page to reload. I'll sit there and wait maybe ten seconds before I realize that the content was pulled without a refresh. I can't wait until AJAX is prevalent enough that I can train myself to look for it.
This is a test.
Just test it! Wow.... Amazing! It is really a good design.
Mark
I like the conept, but it seems like the comment author detail fade away, and those would be kind of important to me as a reader.
test
Come on baby, scroll for me!
i'm checking out your widget.
Clay Smith: I just want to clarify that there is no AJAX or xmlhttprequest going on to achieve the live preview. It'd certainly be a neat idea for the Post functionality but I'm not sure how I'd handle new posts that occur while you're posting.
testing all of this jazz
testing? cool
Testing.
sweetness
whee!
Great!
very nice
Interesting idea.
I love it!
That's pretty awesome.
This is really impressive
hmmm
Sorry, just testing it out again :)
Great to see more emphasis being placed on comments. Fade looks really smooth in Firefox on Linux.
testing...
Wow I'm very impressed. Good show.
I'd by lying if I said I was commenting to do anything else than test this function, but still...
Good job from some random guy who surfed in late to the party.
amazing
Ajaxian.com has this site as a top link today. Having this up on the screen makes it impossible not to comment.
This really is very cool. Here's hoping for a tutorial or something that sums up the basics of how it's working. Excellent work!
Testing...
dog blast
I love having the comment form high on the page too.
milk milk lemonade, round the corner chocolate's made.
i think?
no comment, just testing the system
Really cool!
NIce. Really nice. But with a "live preview" you shouldn't need to hit a button to see the result, do you? But auto scrolling would then be a problem, I guess. Maybe call it "in place preview" ;)
BTW, the comment form staying at the top is a really good idea.
euideuideuidetuid
euideu
ideed
euideuiduid
Got to test this out. Burrito, burrito.
Hmm. Definite clunky bit in the fade in the middle of Firefox on Win XP. LIke it hits a 'shelf' between the green to yellow and yellow to white.
The updating of the preview as I type is very slick, though, beats the yellow fade trick by a large margin.
Oh my god, that's the funky sh!t.
wow this is nice. Fantastic!
This is a pretty good way to get a lot of comments on your site. ;)
sdaf
test
Nice page. Nice comment posting...
This thing works in Opera (for Linux 8.0) very good.
...and I like your colours.
Congratulation, well done!
Hi, this is a very nice feature you've got there :o)
Just testing this !! it's nice!
Excellent preview. Might be more usable if the green arrow on the preview line was bottom aligned with the previewed entry (that is, if the whole comment form was bottom aligned). Live updating of preview is a nice touch, though I'd be worried about the HTML parsing and potential misuse.
Testing the live preview. Cooool
loving your work!
Seems very nice and original. I love the "get out of the box" process :)
(sorry for my bad english, I am french)
I found this web via del.icio.us/popular
This is nice
Woah, pretty design and nice FAT.
Rob Kerr: There is HTML parsing that's done server-side that eliminates improper or harmful code. No more potential misuse than most other comment forms.
this looks very cool. i got a couple of ideas where i could use something like this
mjhkjkjklj
looks great!!!
43564
Testing this out
This looks really cool! A very clever idea and nicely executed.
Prueba, text, proba, test...
Very good!!
This is some sweet stuff... I'm really liking it.
Just cheking OH YEAH!
lalala
Test test. I wanna see this live preview stuff in action too.
I want to try! I want to try!
Testing comments, neato!
I have to test this to!
Oooh, the urge to consider a redesign grows greater all the time.
Pretty cool stuff.
test this uber coolness out... very very nice the live preview is money
ok. how amazing is this?
Howdy
I like, a lot!
Unreal
congratulations... this is f.... amazing!!!
Very interesting. Can't wait to see it when I click on the preview button. Wow! I love it.
test
Wow. Great stuff. Any MT plugin with that? ;-)
also a test
Now you need some Gravatar Support :)
Greetings
Bernd
How about Threading the comments or beeing ale to reply?
Wow, this is a pretty handy trick. How hard is this to implement?
I'm just testing the comments. That's pretty amazing!
great stuff...keep up the Good work. how about adding pics in here?
I haven't seen the preview in action before so let me take a look...
test
The preview is showing me a "May 14th" date. I wonder if that will change to the 20th, when I press "Post".
Awesome stuff. I'm working on a redesign of my site at the moment and have been looking at comments as a weak point so far. This technique and implementation is fantastic!
Yellow fade is quickly becoming the new black ;)
Altough your yellow looks more like green to me...
test
Woot, this looks good!
Yellow is green, per BioGeek comment
I see lots of people have tested already ;)
Wow, there are lots of comments here...
I Love Zeta
I Love Zeta
testing this cool thing out
Have you thought about using this technique to emulate position:fixed in IE?
http://www.divinentd.com/experiments/emulating-position-fixed.html
It seems to be a little less jerky.
just a thought. As I commented a few days ago, I LOVE this design!
adding you to my rssfeed makes me discover that my posting about your absolutely amazing lifepreview should have been done here, not under your wiki-tip.. i hope that one day i will get how it works!
This is my little TestComment
Really impressive!
yes, it's useful
Wow! This rocks!
Original and nice.
Testing
pretty cool idea!
Just checkin' oot the kewl commentin'
No way!
Test
test of live preview
test1234567890-
Cool man !
where have all the cowboys gone?
hallo
This is very cool! Well done! I loved the "preview as you type" feature!
This just makes me wanna post a comment! :)
yep! That's definitivly a cool one!
Really nice! -- It's a cool usability tool ...
dghjdghjdhgjdghj
test
dvdsv xcvdvxcvdvsd dsvsdvsdvdzethrtnsbngfhnn trn trn rtnasrtn atExcellent preview. Might be more usable if the green arrow on the preview line was bottom aligned with the previewed entry (that is, if the whole comment form was bottom aligned). Live updating of preview is a nice touch, thoExcellent preview. Might be more usable if the green arrow on the preview line was bottom aligned with the previewed entry (that is, if the whole comment form was bottom aligned). Live updating of preview is a nice touch, though I'd be worried about the HTML parsing and potential misuse.Excellent preview. Might be more usable if the green arrow on the preview line was bottom aligned with the previewed entry (that is, if the whole comment form was bottom aligned). Live updating of preview is a nice touch, though I'd be worried about the HTML parsing and potential misuse.ugh I'd be worried about the HTML parsing and potential misuse.en tarn gn an xvd
Nice work.
This is amazing.
this is a test
not bad at all
I want to see my post
Again
Interesting
Just testing this
just testing the comments. omg it's so cool!
omg! It's Taralyn!!!
omg! It's Taralyn!!!
testing
test
impressive
hahaha, nice.
THis is fun
something
this is really pimp, i just might have to copy and modify it a bit for my site
olvassa el az egesz blog, nagyon jo