denise: Image: Me, facing away from camera, on top of the Castel Sant'Angelo in Rome (Default)
Denise ([staff profile] denise) wrote in [site community profile] dw_news2010-05-26 10:28 pm

Weekly update, 26 May

Good afternoon, Dreamwidthians! ...Okay, okay, it's evening where I am, and morning elsewhere in the world, and and and ... but you know what I mean.

This week's update is late because I was busy getting married! (Okay, not so busy -- it was just a simple courthouse ceremony. But still. [personal profile] sarah said that she doesn't work on days she gets married, and I happen to agree.) Then, as I was settling in to gather things for the update, something big happened. Like, huge. Big enough to blow away everything else I was going to talk about in the rest of this update.

Before I get to that, though, a quick hit: welcome to [personal profile] poulpette, who has had her first patches committed! (Two, to be exact.) Also, this month we're running a Clean Up The Small Stuff hackathon in an attempt to knock down our open bug count. So, if you've been considering getting involved, now would be a great time. (Come to the dark side. We have cookies.)

Still, all of this pales next to ...



The Update Page Redesign Mockup



Yes, that's right. [personal profile] fu has been working her fingers off to turn my crappy pencil sketches into an actual semi-usable mockup. This mockup doesn't work to actually post entries to your journal, and you can't use any of the draft entries/scheduled entries functions yet (since it's not yet finished!), but it will let you play with it and figure out what you love about it and what things you think can still be improved.

Before I link to it, though, we need some background.


The Motivations



The reason for this redesign is to make it possible -- and easy -- to have draft and scheduled entries in the future. This means that you'll be able to:

a). Work on multiple entries at once, save the entries you haven't finished yet, and keep them in your DW account instead of in a file on your computer somewhere.

b). Schedule finished entries for posting sometime in the future, so that you don't actually have to be in front of your account at a certain time in order to post an entry. For instance, if you're going on vacation, you'll be able to write a week's worth of entries ahead of time and they'll post right on schedule.

c). Set a particular entry to post at specified intervals (daily, weekly, monthly) so if you post the same text every week, you don't have to remember that it's Monday again. (Something I am clearly failing at, seeing as how the Monday update is on Wednesday this week!)

d). Temporarily "unpublish" entries back to draft status, instead of deleting them or setting them to Private, so that if you want to revise an entry after you post it, you can do so and still keep the same URL and privacy settings when the entry is republished.

We've also tried to improve on the general usability of the update page, group the metadata settings into logical categories, modernize the interface and add some useful tricks (better tag autocomplete, for instance, and the ability to hide certain metadata sections that you never use and have that choice remembered when you load the update page).


The Requests



When we asked you a while back what you wanted in the update page, and in the conversations we've been having with people about the topic since, the chief things that were mentioned were:

* Prominence of the icon selection, security, and date/time options.
* Good keyboard navigability.
* Better tagging options.
* The ability to hide unused or less-frequently-used options, but still have access to them if needed on an entry-by-entry basis.

The design that we came up with fits these criteria as much as we could. It borrows heavily from the Wordpress posting interface, because when we were looking around at all of the available options out there, the Wordpress one was the closest to what we wanted. It's far from being an exact clone, though, because on DW, the focus is entirely on different things.

Another major thing this redesign does: Because we have so many options for posting an entry, it can be totally overwhelming for new people, but everyone uses a different set of those options and therefore we can't get rid of any of them (or hide them, or put them behind another click for an 'advanced options' page) without annoying somebody. So, for all of the more advanced options, we went with a simple JS trick: the settings for the option won't show up until you select the option, thus saving space and simplifying the process for new people, but they aren't hidden behind a further click to avoid annoying the people who use them regularly.


The Anti-Requests



The major thing that we did even though a few people said we shouldn't: the design uses a two-column design, rather than a one-column design, even though some people said that they'd find a two-column version annoying. There are two reasons we went with this design rather than a one-column one:

1). Our usage data shows that under 1% of our users access the site at a screen resolution under 1024x768. At this resolution, the entry-typing area is still about 70% of the existing update page entry-typing area, and the two-column option allows us to make more of the metadata options visible on the first screenload.

2). A survey I did a while back about the order in which people write entries turned up that everyone does things slightly differently. We wanted to optimize the design for the most common workflow, except there wasn't really a most common workflow! Because of that, we needed to build a version that people could adapt to their own preferred workflow without too much doubling back, and a two-column option means that most of the common workflow items can be visible on the screen at the same time for people to select.

For those users who are accessing DW on a mobile device with a much smaller screen: We are, as part of an unrelated project, working on a redesign of our mobile site. (One of the Summer of Code projects is also an iPhone client.) This will make it easier for you to use the update page on a mobile screen. The design also degrades gracefully into a one-column version if the working screen space is small enough, so users on small devices and low resolutions will still have a large enough working space.

The design is also meant to degrade gracefully if Javascript is off.


A few notes



* The design should be fully keyboard-navigable and screenreader-friendly. We've checked it with the accessibility team, but if it isn't for you, that's a bug and we want to know about it!

* To collapse boxes, hit the arrow in the top left corner. To expand a box and make it larger -- to have more room to type in things like tags and "current mood/music/etc", click the more magnifying glass next to the text entry box.

* If your computer is older or slower, and you're having trouble with the Javascript used to create the various zoom effects, there's a "disable effects" link in the upper right hand corner of the page that will shut those off.

* To choose a custom time to display on the entry, select "Custom" for "Displayed Entry Time" under Date & Time. To schedule a post for the future, select "in the future" for "Scheduled Publishing Time" under Date & Time. A calendar will pop up for scheduling. Tabbing or clicking outside the calendar will dismiss it. (This is one of the things I'm most nervous about. We don't want to lose the ability to make the entry display a date that isn't "now", but we're going to be introducing the concept of "entry posted in the future at a time other than now", and I'm a little nervous that the distinction isn't clear enough. But more about that later.)

* The "Works in Progress" bin will show you draft posts and scheduled posts. Scheduled posts display with both absolute and relative time, and the recurring entry icon indicates that it's scheduled to be posted regularly and not just once. Under the Draft column, "draft" means that it's never been published, and "retracted" means that it was published once but then pulled back for more revision.

* To pick a custom security level (custom filter the entry), select "Custom" under the "Security Level" in the Publishing area. A series of checkboxes for your defined custom filters (or, in this case since it's a mockup, some sample custom filters) will show.

* Preview and Spellcheck are under the Other Actions box, which is collapsed by default as a demonstration of how the collapse-on-load will work -- it won't be collapsed by default the first time you load the new update page when it's live on the site.

* To save as a draft, you'd select "Draft" under "Publishing Status" (in Publishing), then the "Post Entry" button.


The Feedback



So, the purpose of showing you this mockup is to get your feedback now, before we release it on the userbase as a whole! This means that this is the part where I ask you guys what you love about the design and what you think could be better.

Your feedback is important to us, because we want you to be as comfortable as possible with the new design when we release it. It's really important for me to note, though, that the overall design won't be changing, because we chose it for very specific reasons. This means that feedback like "I hate the whole thing and you shouldn't change anything about the existing page" won't be helpful for us -- if you dislike a part of the redesign, tell us the specific pieces you don't like about it, and why, so we can see if there's another way of doing the same thing that will be more widely useful for people.

(Also, before anyone asks: Because this redesign is to allow more functionality, there also won't be any chance to opt out of the redesign and keep using the old update page. It's necessary for us to standardize on one design, especially since we're going to be making sweeping changes to the backend that you guys won't see but will require us to use the new update form to create posts.)

If you're stuck on the kind of feedback you want to give, here are some questions you might want to answer. (You don't have to answer them -- this is just a sample of the kind of things we want to hear!)

* Does your computer/browser display any elements of the page wrongly? (If it does: please let us know what browser (and browser version) and operating system, and what screen resolution, you're using.)

* Is there enough visual distinction to the "Works in progress" bin? If you don't think so, what do you think would improve it?

* Is the distinction between "timestamp on the entry", aka "displayed entry time", and "time the entry will be posted", aka "scheduled posting time", clear enough for you? If it isn't, what can you think of that might make it more instinctive?

* If you use assistive technology: Does this design work for you in it? Is there anything that annoys you about it? Is there anything that's actively hard to work with about it? If so, let us know, and let us know specifically what assistive tech you're using so we can try to reproduce.

* After trying it out a few times, is there anything about the workflow that seems off or wrong to you? Are there any little details of the process that you think will quickly get annoying?

* Is the process of saving a draft, instead of posting the entry directly to your journal, clear enough?

* And, finally, because [personal profile] fu worked her butt off on this and needs some positive feedback to focus on in the middle of all the critique: What're your favorite parts of the mockup?


The Mockup



So, after all that ... here's the link to the mockup!

Remember, this is only a demo. It will not post entries to your journal or save them as drafts, and it won't use your icons, your tags, or your custom filters.

There's a note on the page itself about what else it doesn't have, but to reiterate: the Rich Text Editor isn't integrated yet (since we're replacing it as part of a Summer of Code project), and neither is draft auto-save or functional preview/spellcheck. The links to the sample "draft" and "scheduled" posts don't work yet, either.

Try a few sample posts, bang around on it, see how it works, and let us know what could be better!

Without further ado ...

Create Entries Demo



EDIT (5/27/10, 1024 EDT):



Things that are coming up frequently in comments, that we will definitely look into changing/improving/etc, that are already on the list and don't need to be mentioned anymore:

* Moving the location of the 'tags' option -- nearly everyone who's commented would like that moved, and we'll play around with the best location.

* Tag autocomplete not working perfectly with mouse selection (typing 'ca' to get 'cake', selecting 'cake', and getting two tags of 'ca' and 'cake')

* Location of the spellcheck/preview buttons (please do note, though, that the box they're in right now would not be automatically collapsed when you load the page: the page will remember your last-used value) -- we'll play around and try to find a good solution. (We very much want to separate them, since a common complaint is that people hit post when they meant preview, but what we're hearing from you guys is that they're too separated.)

* The phrasing of the "Take out of normal date flow" box -- that was our best attempt to make the "date out of order" option clearer, since it's a source of much confusion, and we've apparently succeeded in making it worse!

* Requests for the ability to drag & reorder the modules -- I don't know if it'll be technically possible, but I'll have [personal profile] fu looking into how easy it would be!

Also, thank you guys so much for the thoughtful and incredibly helpful feedback and comments so far!

END EDIT

aveleh: Close up picture of a vibrantly coloured lime (Default)

[personal profile] aveleh 2010-05-27 04:02 am (UTC)(link)
\o/ \o/ \o/
gchick: Small furry animal wearing a tin-foil hat (Default)

[personal profile] gchick 2010-05-27 04:03 am (UTC)(link)
OHMYFUCKINGGODFUILOVEYOUSOMUCH!!
gchick: Small furry animal wearing a tin-foil hat (Default)

[personal profile] gchick 2010-05-27 04:03 am (UTC)(link)
Oh, also, the getting married thing, grats D and Sarah!
scheherezhad: Robin flailing, "Flail" (flail)

[personal profile] scheherezhad 2010-05-27 04:06 am (UTC)(link)
I am teary-eyed with joy over this!

Also, congrats to you, Denise and Sarah!
innerslytherin: (Default)

[personal profile] innerslytherin 2010-05-27 04:07 am (UTC)(link)
Congratulations!

Also, OMG WOW. This is the update page I WISH WordPress had. I am so sloppy at maintaining my blog over there because it's such a clumsy interface. You guys have made this gorgeous and workable but not overwhelming. Great job!
aveleh: Close up picture of a vibrantly coloured lime (Default)

[personal profile] aveleh 2010-05-27 04:07 am (UTC)(link)
Actually useful information:

* If your computer is older or slower, and you're having trouble with the Javascript used to create the various zoom effects, there's a "disable effects" link in the upper right hand corner of the page that will shut those off.


This is GREAT.

Also, I use a netbook with 1024x600 resolution, and it shows up (very nicely) with the entry space above the options space.

And if I test it out in elinks (one of three browsers I use hours a day), it is WAY easier to navigate than the current update page. My only complaint there is that the "Date & Time" section is harder to read than in firefox, but otherwise it's really great.

On visual browsers, maybe a border between drafts and scheduled? I didn't realized it was down then across, I first read it as across then down. (Yes, my brain skipped the headers.)
rhi: A dreamsheep lifting weights.  Getting sheepshape (sheepshape)

[personal profile] rhi 2010-05-27 04:07 am (UTC)(link)
Oh, wow. [personal profile] fu, that looks great. Very straightforward, or so it seems to me.
evilawyer: young black-tailed prairie dog at SF Zoo (Default)

[personal profile] evilawyer 2010-05-27 04:08 am (UTC)(link)
Congratulations on the nuptials! Many, many happy years to you and sarah.
jd: (Default)

[personal profile] jd 2010-05-27 04:09 am (UTC)(link)
I really like how it looks :)
florahart: (cheerleading)

[personal profile] florahart 2010-05-27 04:10 am (UTC)(link)
*typing in splint so not good of typing so very short comment* ...but OMG FU. THIS LOOKS SO EXACTLY HOW I WANT IT TO LOOK. *\O/* ♥ *\O/* ♥ *\O/* ♥ *\O/* ♥ *\O/* ♥ *\O/*

Unurgent question: when I click on the fake draft posts below (which I understand are not real and all) it says I have unsaved changes on the page. I get that unsaved changes are not happening yet so maybe that would make moot, but will there be a save button?
greenbirds: (Default)

[personal profile] greenbirds 2010-05-27 04:10 am (UTC)(link)
UPDATE PAGE OF MY DREAMS, OMG. (And I already said congrats, but it bears repeating!)
existence: girl genius (I WILL DESTROY YOU ALL*)

[personal profile] existence 2010-05-27 04:11 am (UTC)(link)
Congrats on the marriage!

re: the new update page, the only thing that stuck out to me was tucking the customizing mood theme into a prompt box instead of having a form element right there, but that may not be an issue for everyone. When I bother to mood theme it up, I like to tweak that a fair bit, so personally I'd prefer it more if it was another box underneath the mood theme. But other then that, I'm really digging the interface a lot.
Edited (wow that was totally the wrong icon. my bad.) 2010-05-27 04:12 (UTC)
starlurker: (cheer emoticon)

[personal profile] starlurker 2010-05-27 04:14 am (UTC)(link)
The new update page is awesome, and maybe I'm just blinded by the shiny right now, but I can't think of anything I'd like to change.

Congratulations on getting married!
aveleh: Close up picture of a vibrantly coloured lime (Default)

[personal profile] aveleh 2010-05-27 04:15 am (UTC)(link)
aha! Okay, I browser with big fonts. So it degrades nicely like that, and stays "one column" even if I return the fonts smaller. But if return the fonts smaller *and then refresh*, it is two column.

Looks great both ways.
florahart: (writing)

[personal profile] florahart 2010-05-27 04:15 am (UTC)(link)
Or maybe more the popup should say instead of

you have unsaved changes/are you sure

it might say

you haven't published this as a live post or a draft/click this to just not-post/or cancel to choose a publish type?

in better words than that.

(also, congratulations on wedding)
rialian: (Default)

[personal profile] rialian 2010-05-27 04:17 am (UTC)(link)
===Very much like the new design...it works!
torachan: (Default)

[personal profile] torachan 2010-05-27 04:17 am (UTC)(link)
Yay! I'm excited about this.

Having tags in "currents" was a bit confusing. I automatically minimised currents because I never use them, then was looking all over for tags and only after not seeing them anywhere else thought to open up currents again and there they were.
runpunkrun: Pride flag based on Gilbert Baker's 1978 rainbow flag with hot pink, red, orange, yellow, sage, turquoise, blue, and purple stripes. (Default)

[personal profile] runpunkrun 2010-05-27 04:23 am (UTC)(link)
In my ancient copy of Firefox (2.0.0.20) the tag function is screwy. The text box is really tiny and when I start typing, I get the autocomplete pop-up, but if I select something, like "tea: earl grey - hot," it shows up as a series of unconnected grey text bubbles, each word its own bubble.

In other, non-dinosaur browsers -- such as my emergency copy of Opera -- the tags work, but if you start typing "te" and then select "tea: earl grey - hot" from the list, you get both "te" and "tea: earl grey - hot" as tags, which is messy and counterintuitive. I expect the tag I selected from the list to replace the typing I did, not for that unfinished typing to show up as a new tag in addition to the already existing tag.
amanda_in_pajamas: (Book & Glasses Love)

[personal profile] amanda_in_pajamas 2010-05-27 04:24 am (UTC)(link)
I second this. I never use currents, but always tag.
aveleh: Close up picture of a vibrantly coloured lime (Default)

[personal profile] aveleh 2010-05-27 04:24 am (UTC)(link)
I really like that I can minimize options I don't use. (Like the icon!)

I'd like it if the tags weren't grouped with the mood, location, and music. To me, mood/location/music is about the POSTER, while tags are about the ENTRY. (Plus, of those, I only use the tags, but that's not a valid reason.)

I'd also like it if preview (and spellcheck) were grouped with post an entry. Especially because that encourages users to actually preview/spellcheck before posting, as opposed to editing after. I also assume this form will be used for editing - so I am leaving a reminder about a delete button :)

If I switch to Rich Text and then back to HTML, there's a flash. No big deal, but it's there. (Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.2.3) Gecko/20100423 Ubuntu/10.04 (lucid) Firefox/3.6.3)

OH MY GOD THE POP UP CALENDAR WHEN YOU WANT A CUSTOM TIME.

I think I need a nap from all this excitement.
cheyinka: A glowing blue sheep with green eyes (electric sheep)

[personal profile] cheyinka 2010-05-27 04:25 am (UTC)(link)
That stuck out to me too, so it's not just you! (I use "pick a mood, then pick a roughly appropriate mood theme picture" about 80% of the time I use moods at all.)
kigan: one of the most beautiful men on the planet being flamboyant and beautiful (Default)

[personal profile] kigan 2010-05-27 04:26 am (UTC)(link)
This is made of so much win. I only wish the column on the right were on the left instead XD;; this is probably just me, but it was really disorienting/uncomfortable having it on the right; I kept wishing I could drop-drag it so I'd have the nice open text box on the right and all the fiddly things over on the left where I could set them and forget them, instead of having them in the way. (I'm not sure why they're "in the way"! XD;; I might be too right-handed/eyed/bodied or something? I'm sure I'll get used to it, and it seriously rocks anyway.)

Yay Fu! And also, congrats on getting hitched, Denise & Sarah!
giftofobedience: (Default)

[personal profile] giftofobedience 2010-05-27 04:26 am (UTC)(link)
Grats on the wedding!

As for the mockup, I really like it! I agree with one of the above commenters who suggested a separation distinction between "scheduled" and "drafts", because they did seem to be one big block, but other than that, I can't think of anything I don't like.

I did especially like the tag auto-complete, and how it doesn't just rely on the first letter/symbol of the tag. VERY useful for those of us who have long tags and sometimes forget parts of them...
kuwdora: Pooka - card 60, brian froud (dreamsheep SF)

[personal profile] kuwdora 2010-05-27 04:26 am (UTC)(link)
LOVE EWE

Page 1 of 28