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

vixalicious: (Default)

[personal profile] vixalicious 2010-05-27 03:16 pm (UTC)(link)
I really like the new design. My only suggestions would be to include tags with icons instead of currents, and I would love it if the post entry button was higher up, so that I don't have to scroll to get to it.
rosebee: Adam Lambert touches the gauges/plugs in his ears (Default)

[personal profile] rosebee 2010-05-27 03:16 pm (UTC)(link)
I'm going to add my voice the group of people who are loving the layout changes.

I adore the fact that you ask your users things that they would like or find useful, you think about them, and then implement things you think will be good & useful.

The two-column layout is fantastic - and I love the prominence of the icon choosing box & other items!

PS - Congrats on the wedding!
annotated_em: close shot of a purple crocus (Default)

[personal profile] annotated_em 2010-05-27 03:20 pm (UTC)(link)
I have no brain for meaningful feedback, but ooooh, it's pretty! Awesome work, [personal profile] fu!
tyger: Entei, Suicine, and Raioku sprites (pokémon - legendary beasts)

[personal profile] tyger 2010-05-27 03:20 pm (UTC)(link)
...ooooohh. I see. Huh.
I can kind of vaguely see the logic, now!
stellar_dust: Stylized comic-book drawing of Scully at her laptop in the pilot. (Default)

[personal profile] stellar_dust 2010-05-27 03:22 pm (UTC)(link)
Heh, my problem is that even with the buttons as far away as they are now, I often forget that "preview" and "spellcheck" even exist - so if all three were right next to each other I might remember to preview occasionally and save my flist some borked html! Moving them even farther away from the "Post" button won't help with that. If the Post button were really big and the other two were next to it but much smaller, that would work!
syntheid: [Elementary] Watson drinking tea looking contemplative (Default)

[personal profile] syntheid 2010-05-27 03:23 pm (UTC)(link)
That's true. I'm not going to think to go to "edit entries" to discard a draft I haven't actually posted yet (it's not yet an "entry"). I was thinking there would be more like a discard button right next to the draft I wanted to discard (or checkboxes) or at least click on the draft and have there be a "discard draft" button next to "post" or something.
nonelvis: (Default)

[personal profile] nonelvis 2010-05-27 03:27 pm (UTC)(link)
This seems to me like an argument for making the look and feel of the lower-priority buttons like Preview different from the look and feel of the higher-priority Post an Entry button. Changing the placement is a good approach as well, but hiding the buttons in an "other actions" box puts them too far away from where users might expect them to be. (Also, I have to say, as an IA/UX designer, I am always bothered by any category called "other actions," because it inevitably becomes a dumping ground for random crap people can't figure out a home for.)
nonelvis: (Default)

[personal profile] nonelvis 2010-05-27 03:42 pm (UTC)(link)
Congratulations on getting married!

I think this is a terrific redesign, and like all really good redesigns, it makes you realize you had no idea that there were problems with the existing design until you saw something better. It reflows nicely on my iPhone, too!

I have only one suggestion, which is to reconsider using lightboxes. You've already got show/hide working very well to expose additional information on-demand, and the way cross-posting slides open to show more options would work just as well for the UI to select a custom friends group. In fact, the only place I see on this page that I think absolutely requires a lightbox or other second-window option is the icon browser. Paring down the number and type of interactions on the page will only make it easier for people to learn how to use.
helens78: Cartoon. An orange cat sits on the chest of a woman with short hair and glasses. (Default)

[personal profile] helens78 2010-05-27 03:48 pm (UTC)(link)
I like the blue boxes, I do, I do! These tweaks look really nice!

Though they also make me a bit *grabbyhands* for movable modules. *g*
helens78: Cartoon. An orange cat sits on the chest of a woman with short hair and glasses. (Default)

comments in response to comments!

[personal profile] helens78 2010-05-27 04:03 pm (UTC)(link)
This is me being contrary in response to other users' feedback. ;)

* Eep, I really prefer the sidebar on the right! (Though I am now having vivid fantasies about a modular layout where the boxes can be moved around from column to column, too!)

* ...I thought "out of normal date flow" was understandable and a nifty way of putting it! Drat for being in the minority there. *g*

* I don't care one way or another whether "post" or "publish" gets used, but "share" confuses me every time on Facebook. I'm all in favor of industry-standard terms.

* I also did not realize that 2010-05-27 was a source of confusion regarding dates, but omg plz dun change it! It's hierarchical and makes perfect sense! If you have a whole bunch of files labeled that way, they sort perfectly into chronological order! (I may possibly have been using that as my filenaming system for the last decade. >_>)

And one less-contrary thing:

* OMG the teeny icon "preview" thing is awesome.
srevans: (Default)

[personal profile] srevans 2010-05-27 04:03 pm (UTC)(link)
Hitting "post" to save a draft post strikes me as non-intuitive. Couldn't the button transform in that instance and say something more accurate like "save"?

I second this! Not sure whether it's currently happening in my browser because I'm having trouble finding the "is this a draft" button (even though I found it fine before).

Also, is auto-saving drafts gone?

Really love the new update page otherwise. :D
starwatcher: Western windmill, clouds in background, trees around base. (Default)

[personal profile] starwatcher 2010-05-27 04:05 pm (UTC)(link)
.
Late, but 2 cents is 2 cents, right?

I like the layout very much, except for one minor quibble --

The default for Comments, Icons, Currents, and Other Options seems to be "Open", while the default for "Other Actions" seems to be closed. Now, I will be clicking on 'Preview' before I post. It seems counter-intuitive to have to click to open "Other Actions", and then click again for 'Preview'. (And the only reason I don't use spellcheck is because my browser is Firefox, which does it for me.)

In short - I'd like to see all the selection boxes open all the time (unless we choose to close them). Or maybe it would be possible for the user to select which modules should be closed or opened as a default for their particular studio. (EG, I'd close 'Icons' and 'Other Options', because I hardly ever change those.)

Oops! Reading fail - now I see your ETA that "the page will remember your last-used value", which is entirely satisfactory. But I'll leave this comment as a positive stroke - you (as a group) fixed my quibble before I even made it! (grins) Very well done; kudos to you and Fu. And thank you for such a responsive, well-maintained site.
.
dhobikikutti: earthen diya (Default)

Re: Recurring Posts

[personal profile] dhobikikutti 2010-05-27 04:07 pm (UTC)(link)
+1 on accessibility for other calendars!
turlough: young man in hideous green-patterned shirt with rised finger, Xander from 'Buffy the Vampire Slayer' ((buffy) excuse me?)

[personal profile] turlough 2010-05-27 04:07 pm (UTC)(link)
I'm reading comments at the moment and I'm getting very confused. It seems as if what I'm seeing on the demo page is not what others are seeing.

I'm seeing first the Subject box; then the Entry box; then two columns of expandable boxes - with Icon and Currents being in the left hand column, and Comments, Other options, and Other actions being in the right hand column; under that first Publishing and then Date & time; then the Post button by itself; and finally WIPs at the bottom.

Not even if I let the window take up the whole screen (1680x1050) do I get to see the "entry box on the left, collapsible boxes on the right" thing people are talking about. Mind you, I'm not complaining about this in any way, I like the way it looks now. I would just like to know what's going on.
confliction: (Default)

[personal profile] confliction 2010-05-27 04:08 pm (UTC)(link)
Here are my thoughts, but i'm not a programming at all, yet.

- The 'Other' mood option seems redundant.

- When selecting a mood from the drop down list on the right column, when the mood icon appears with it's default text underneath could that text be editable?

I think that way you get all of the functionality in both the unexpanded and expanded mood box, and have still have no need for the 'Other' mood option or the extra text box that appears if you select it.

Doable?
turlough: large orange flowers in lush green grass (Default)

[personal profile] turlough 2010-05-27 04:12 pm (UTC)(link)
But even when I maximize the window it stubbornly stays in the same configuration. It's just the margins that get larger.

Compare this screencap with this.

And I'm using Firefox 3.6.3 on a Mac.
Edited 2010-05-27 16:16 (UTC)
adalger: Earthrise as seen from the moon, captured on camera by the crew of Apollo 16 (Default)

[personal profile] adalger 2010-05-27 04:12 pm (UTC)(link)
I see this same thing in IE6. It looks much different in a *good* browser, but I can certainly relate to you liking what you see. I wonder if it's time for a suggestion to allow people to have the update page user-schemed instead of site-schemed?
turlough: large orange flowers in lush green grass (Default)

[personal profile] turlough 2010-05-27 04:17 pm (UTC)(link)
I'm using the latest version of Firefox, not an old browser at all. Very strange.
ellienihon: (Default)

[personal profile] ellienihon 2010-05-27 04:18 pm (UTC)(link)
Very, very cool!! No obvious issues in firefox and Windows XP OS. Love the two column design and the pop-up box for custom access groups.

Two items on my wishlist: For recurring entries, an option for every weekday would be nice (not necessary, but nice). Also, is it possible to reorder the custom access groups so the most commonly used ones are at the top?

Thank you!!
ninetydegrees: Art: self-portrait (Default)

[personal profile] ninetydegrees 2010-05-27 04:21 pm (UTC)(link)
Suggestion for "Take out of normal date flow: "don't display as a new entry" or "don't display as latest entry" or, if you can customize the message according to the date, "display as an archived entry" or "display as a future/top entry". And a little ? icon to link to FAQ #104.
turlough: Gabe Saporta doing thumbs-up ((cs) gabe approves)

[personal profile] turlough 2010-05-27 04:25 pm (UTC)(link)
Excellent suggestion!
cleo: Dreamwidth logo with a rainbow sheep! (Dreamwidth: Gay Sheep)

[personal profile] cleo 2010-05-27 04:27 pm (UTC)(link)
I love that the Publishing and Date & Time selections are at the bottom, underneath the entry text box now. This seems completely intuitive, at least for me, and I'm definitely excited about that.

I...almost hate to say this in a thread of so many amazingly positive comments, but when I initially saw the mockup my reaction was hating it so viscerally that I almost started to cry. That, of course, is irrational, and I'm not there anymore. But I'm visually impaired/legally blind; I won't go into the details of the problems I have with my eyes because there are a lot, but I will say that because of them, I function best with things when they are in the center of or slightly to the right of my vision, especially things on a computer screen. It has to do with what I can and can't see, and it has to do with equilibrium.

I know that's one person's dilemma with something that definitely seems to be working for everyone else. And I do appreciate that when I scale down the browser the option boxes shift underneath the entry. And I do love, love, love the option boxes. I've seen that people have brought up options to move the column of boxes to the other side of the screen, and for more visual imparedness reasons I won't get into, that would be a little more helpful for me, so it would be awesome to see more discussion on that. :)
turlough: large orange flowers in lush green grass ((dw) creative dreams)

[personal profile] turlough 2010-05-27 04:29 pm (UTC)(link)
YYYY-MM-DD is an ISO standard, which is to say it's an international standard that nobody actually uses (except militaries, perhaps?)

In Sweden everyone uses it all the time :-)

Page 18 of 28