Make WordPress UI

Updates from August, 2012 Toggle Comment Threads | Keyboard Shortcuts

  • lessbloat 3:52 am on August 30, 2012 Permalink  

    Ticket scrub notes 8/29

    Needs patch

    Ready to commit

    Has owner, needs patch

     

  • lessbloat 1:04 pm on August 22, 2012 Permalink  

    Ticket scrub notes for 8/21

    Patches needed

    Status update

     

    • Helen Hou-Sandi 7:07 pm on August 27, 2012 Permalink | Log in to Reply

      I just realized that I never made meeting notes for the week, but this is not far from being them, so I will leave it alone. Just want to note that seeing the on-time progress on the welcome screen/panel and color picker by all involved parties was awesome! And also Sergey’s patch for page on front :) UI group rocks!

  • lessbloat 12:49 pm on July 24, 2012 Permalink  

    Welcome screen design v2 

    I’d like to get the ball rolling on the new welcome screen redesign for 3.5. I started playing around with a few ideas and I’d love to hear your thoughts:

    My hope for this screen is that it will serve as a proper “home” that users can come back to again and again to find anything they need in the admin. As I mentioned here, this was a big stumbling block for each of the users we tested.

    A couple of notes:

    • All of the copy and links are super generic, and need work.
    • You’ll notice the addition of tabs to the dashboard. My thought was that new users would be taken to this “Welcome” tab just after install. If they clicked the “dashboard” tab, we’d save that to the DB via AJAX, and on refresh, you’d still be on the dashboard tab.
    • On the right you’ll see the “viewing” drop down. My hope is to make the entire welcome tab extensible, so that you could add your own custom screen (set of links, and quick links) as an option. This dropdown would only show if you’ve added your own welcome screen option.
    • You of course should be able to easily hide the “welcome” tab (if you wish) through a hook. As well as having hooks anywhere else they make sense.
    • The “What are you trying to do” text box should suggest links as you type – similar to the idea here. I will note that while there are 1000 things that we could add to this auto-suggest dropdown, I’d prefer to just focus on adding links to functionality within the admin for the 3.5 release (and really making that experience solid).
    • The “Quick links” bar would be links to the most used sections of the admin (for new users). I was hoping we could find a nice library of open source vector icons to use there.

    Here’s the balsamiq source file if you’ve got some ideas based on this wireframe: http://cl.ly/1K3R2u383f28

    This is all still very rough, and I expect that we’ll go through a couple rounds of iteration before we get it right. Thoughts?

     

    • Tom Auger 1:29 pm on July 24, 2012 Permalink | Log in to Reply

      Yeah, I’m really digging the Quick Links, though you may be missing proper space for the actual welcome message, which I think some will want as it may be the only opportunity for any messaging regarding the current release, and/or more general/marketing messaging regarding WordPress.

      I wonder whether there shouldn’t also be more differentiation between the roles of the right-hand widget area vs. the lower widget area. In the current mockup, it’s just got this “wrap around” feel, but there should be a stronger sense of hierarchy in the areas. What about, going from left to right: (1) Main Nav (menu), (2) Tasks, welcome and help area, (3) Info/Feeds area.

      Given the current usability issues around feeds as they are now (for new users that is), perhaps the feeds start out minimized or otherwise hidden, to be revealed as an option once the user wants to “learn more” or “stay current” (or whatever the right nomenclature for that action might be).

    • Eric Mann 3:04 pm on July 24, 2012 Permalink | Log in to Reply

      I like the general layout of the screen, but I’m not sure that I’m sold on the tabbed interface. We would then have tabs at the top, the nav column on the left, and (presumably) the toolbar at the top of the screen. That kind of redundancy is … bulky.

      However, I do very much like the Quick Links idea and the omnibar/spotlight functionality. I can see both being used quite heavily by just about everyone I know who publishes with WordPress.

    • Ipstenu (Mika Epstein) 3:34 pm on July 24, 2012 Permalink | Log in to Reply

      I’m not sure ‘post a new image’ and ‘post a new video’ are that helpful, since generally we don’t do those things outside of writing posts/pages.

      ‘Customize settings’ or ‘customize site’ so people know right away to change ‘Yet another WordPress Site’ would be IMO a little bigger on the list, since really, how many sites are still stuck with that.

      • helenyhou 3:42 pm on July 24, 2012 Permalink | Log in to Reply

        I think quick posting in post formats would actually be a really good thing, especially if it’s in-screen (e.g. a slide-down panel or some such) – those of us who don’t maintain tumble-style blogs but write long-form instead aren’t really sensitive to that usage. Those kinds of actions seem like a really natural progression of Quick Press, IMO.

        Of course, there are some other considerations (meta keys, linking to an add screen and setting some fields via query args, etc.) to making that really work, but worth thinking about.

      • lessbloat 4:03 pm on July 24, 2012 Permalink | Log in to Reply

        To be honest, I didn’t put any thought into the links I added there (other than the customizer link, I’d like for that to be front and center). I just looked at the icons included in balsami1, and threw a couple in to mock it up. We’d need to think all of the links through for sure.

    • helenyhou 3:37 pm on July 24, 2012 Permalink | Log in to Reply

      The “Quick Links” box is really what I was imagining for the Dashboard in general, so +1 to that. Hooks are especially important there, and doing some smart things like “Edit your home page” when a page is set as the static front page, etc. would be nice.

      My concern here is when this isn’t really a “welcome” screen anymore, or if it never is (e.g. an upgraded install). I wonder if we can explore different language that’s more along the lines of “quick start” or something else that isn’t necessarily tied to a fresh install, since we’ve learned that a) users go back to their first place of success (so in future versions, how would this function?), and b) this could head toward the “doing” side of the Dashboard, as in a more permanent fixture.

    • lessbloat 4:38 pm on July 24, 2012 Permalink | Log in to Reply

      Some additional commentary via IRC.

    • lessbloat 4:59 pm on July 25, 2012 Permalink | Log in to Reply

      I worked up a v2 this morning (based on feedback from v1):

      A couple notes

      • I dropped the tabs.
      • I removed “Welcome”.
      • Again, the links, and copy all still need some thought (this is just a rough mockup – nothing is finalized).
      • A link to the customizer is both first in the row of icons and first in the “New User Walkthrough” section. This is important because within the customizer they can change their: site title, tag line, site colors, header image, background image, and static front page setting.
      • I’ve encapsulated all the links in a single dashboard widget container which can be hidden in screen options, or minimized (just like any other widget). However, we’d still want to load this with an action so people could remove it altogether if they wish.
      • For the “Post an image” and “Post a Gallery” links, I was wondering how hard it would be for us to link to the new post page with a $_GET var at the end of the link which would auto-load the media manager (since this would work whether their theme has post formats or not), and if the theme has post formats, auto-select the right format. Just a thought…
      • For the “Post a Video” link, can we come up with something clever there as well? I’m not sure…
      • In terms of responsiveness, this could all scale down relatively well I think.

      Am I missing anything?

      Here’s a link to the balsamiq source file: http://cl.ly/2a2I0U393C28

      Thoughts?

      • alternatekev 6:30 pm on July 25, 2012 Permalink | Log in to Reply

        While I’m really digging the spotlight-centric top area, something about having 8 icons in a row like that turns that entire area into noise for me. I feel like 4-5 is a more manageable number of options there. I also wonder if some even earlier-type options should be there, like adding plugins or themes via the UI.

    • Ipstenu (Mika Epstein) 6:27 pm on July 25, 2012 Permalink | Log in to Reply

      We could drop ‘QuickPress’ if ‘Write a new post’ did a dropdown (wrong word, hungover) to show the quickpress box?

      Call the top box ‘Welcome to WordPress!’

      I like the New User Walkthrough!

      • lessbloat 5:17 pm on July 27, 2012 Permalink | Log in to Reply

        Thanks @ipstenu!

        While I’d love to re-work the QuickPress area, I’m afraid it’s a bit out of scope for this release.

    • MartyThornley 7:02 pm on July 25, 2012 Permalink | Log in to Reply

      Very cool! Would be great if users could show/hide the row of quick links and the bulleted lists of links section. Only thing that made that come up is I feel like more advanced users would get sick of looking at the New USer Walkthrough and Basic Settings sections. But this would be awesome for new users!
      Also huge +1 for the expanding Quick Press idea!

      • lessbloat 5:19 pm on July 27, 2012 Permalink | Log in to Reply

        I think the idea will be that you can hook in and change those links however you’d like, which would also allow you to remove any of these sections if you choose.

    • lessbloat 5:06 pm on July 27, 2012 Permalink | Log in to Reply

      Here’s a quick v3:

      I’ve promised Nacin that we’ll focus on nailing down the basics first before trying to figure out any quick search functionality. As such I’ve removed it for this iteration.

      At this point, I’d love your thoughts on the copy, the order of the links, and the sections (though other feedback is also welcome).

      • Amy Hendrix (sabreuse) 5:22 pm on July 27, 2012 Permalink | Log in to Reply

        Thoughts in bullet-point form:

        • I wonder if the copy in the quick links section is too beginner-oriented. The eye-opener for me from your testing rounds was that people were using the welcome screen as a functional dashboard rather than an intro/overview. Too much “here are some things to do when you’re new”?
        • (I also suspect that the 20% may reject it because of the old fallacy of if it’s easy it must be “dumbed down”. I’m less concerned with that.)
        • Are the default widgets up for discussion? I rarely see any reason for the Plugins, WP Blog, or Other WP widgets to be there at all; the dashboard should be for doing, not reading. (OTOH, I think more people would use QuickPress if they got in the habit of actually looking at their dashboards. At least for drafting things.)
        • Next round, kill Links in the side menu ;)

      • Ryan Boren 5:36 pm on July 27, 2012 Permalink | Log in to Reply

        Would this be a good place to put a “Visit your site” link?

        I too would like to get rid of most of the boxes, particularly Links, Plugins, and the WP feeds. But really I’d like to get rid of all of them. Our options tables would all breathe a little easier without caching feeds that nobody looks at. But, I have yet to win that argument. :-)

        • lessbloat 6:08 pm on July 27, 2012 Permalink | Log in to Reply

          Well I for one +1 everything you said. ;-)

        • lessbloat 9:00 pm on July 27, 2012 Permalink | Log in to Reply

          As a practical first step for 3.5, could we uncheck all of the dashboard boxes in screen options on install (other than the welcome screen of course)? Then for 3.5.1 plan to recheck any that we hear a huge uproar about (I’m guessing there would only be a few, if any at all).

          This way, users could always activate any of them with a few clicks.

      • Isaac Keyet 6:05 pm on July 27, 2012 Permalink | Log in to Reply

        Looking at this I don’t know what will happen if I click either of the icons at the top. Do I get to a walk through? Is it a direct link to that section of WP? That’s the main concern for new users.

        For returning users, I think they’d (almost) be offended to see links to change the theme or write a post – if I’m a tech person or have ran a blog in the past most likely I already know these things. Unless it’s a comprehensive array of action-centric actions to perform across the entire install I think this is very much redundant and in your way.

        I think the solution is to ask the user a simple question once they’ve successfully installed 3.5, then show something customized for each Quick links screen depending on choice. After a while you should be able to hide the set up links but be able to keep the action-centric buttons (customize theme, new post, add page etc). Mocked this up real quick, screenshots and source files below.

        Welcome box (“hey, welcome! great to see you! here’s what’s awesome!”):

        Quick links for beginners:

        Quick links for returning users (advanced):

        Quick links in Default mode (a good start on an action-centric Dashboard IMO):

        Source files: http://cl.ly/0f2Y341e3i36

        • lessbloat 6:16 pm on July 27, 2012 Permalink | Log in to Reply

          As usual Isaac, I’m a fan. :-)

          Thanks for taking the time to crank these out. I’m really liking the flexibility that this approach provides.

        • Ipstenu (Mika Epstein) 8:46 pm on July 27, 2012 Permalink | Log in to Reply

          There’s no Like button on .org, but Like!

        • MartyThornley 10:15 pm on July 27, 2012 Permalink | Log in to Reply

          This looks great!

        • karmatosed 6:35 pm on July 29, 2012 Permalink | Log in to Reply

          Looking at these I think that the splitting in direction really is great. I was going to join in with mockups but to be honest, this about nails it for me it really solidifies everything. Like, +1 and any other way of saying this rocks :)

    • lessbloat 8:51 pm on July 27, 2012 Permalink | Log in to Reply

      Here’s my rather crude experiment to see if we can make this block responsive: http://f.cl.ly/items/0K0B3E2o0S023f3S2b3k/responsive-welcome-screen-v1.html – It’ll still need lot’s of love.

      • karmatosed 6:37 pm on July 29, 2012 Permalink | Log in to Reply

        For the bottom links is there any way to add in a 2 rather than the jump from 3 to 1 as it seems like that might be smoother?

    • lessbloat 2:24 pm on July 30, 2012 Permalink | Log in to Reply

      Here’s a v4:

      Some thoughts

      • In Isaac’s first screen he had two buttons which allowed the user to choose which welcome screen they would see. My worry in doing this is that these buttons might get lost in the noise from the rest of the dashboard, and users wouldn’t be able to see at a glance what happens once they click one of the buttons. I think I’d prefer to skip this step if at all possible, and just hop straight into showing the “get started” screen. At which point, users could change it to another screen through the options drop down.
      • Next, in Isaac’s mockups he also had an “Advanced” option. I thought about this a lot actually, and decided to leave it out as well. My hope with the welcome screen redesign is that we can get a bunch of hooks in place so that if you want to add/remove links you can. Again, I’d love to hear your thoughts here (and if you think the advanced option should stay, what links would you place there?).
      • I reduced the number of links under each column from 6 to 4. I feel like this still works well, while keeping things tidy.

      Dev tasks

      We can likely get started planning the dev side of things. cc// @sabreuse, georgestephanis, & @azaozz

      A couple of questions/considerations:

      • What is the best way to make this area easily extensible?
      • Can developers change a single link in one of the existing screens?
      • Can developers create their own screens (which are added to the dropdown options)
      • Can developers easily remove the entire “Quick links” box?
      • Can developers change the “Quick links” title
      • Can developers easily remove the options dropdown, and force either the “get started” or the “default” screen to show?
      • Can developers remove a single section within the box (e.g. remove just the “New user walkthrough” column)?
      • Can developers rename a section (e.g. change “New user walkthrough” to “Get started”)
      • Can developers add their own top icon links? If so, how do they add the icon image?
      • How/where do we save which screen the user has selected, so that on refresh they see the same screen?
      • Is there anything else we need to consider?

      I’m not saying we should support all of these scenarios. :-) I’m just trying to get them all on the table so that we can make a decision as to which we should support.

      Thoughts?

      • Helen Hou-Sandi 2:43 pm on July 30, 2012 Permalink | Log in to Reply

        Extensibility for everything mentioned (titles, additional screens, links, etc.) can and probably should all be doable via filters. Nothing in the box should be hardcoded in, but use actions instead. I think it’s pretty important to give a programmatic way to alter or turn off this particular metabox (which is special in its full-width treatment) to fit the needs of a particular site or network. Visual options not needed, though :) Besides the usual screen options checkbox.

        We can save the user’s selection the same way we do any other screen preference – user meta.

      • Sheri Bigelow 7:46 pm on July 30, 2012 Permalink | Log in to Reply

        You might consider the “advanced” option as the actual entire dashboard itself, and in that case you don’t need a separate advanced option inside the welcome screen. If you did have one though, I love the idea of a smart “common tasks” list that updates based on most-used areas (out of scope and maybe not something everyone would like).

        Regarding labeling, I think “Welcome” is fine. You can welcome advanced users back into their dashboard and they may appreciate a set of icons or links just as much as beginner users. “Welcome” also fits with what I think of as the original goal of the welcome screen—to help new users get started (correct me if that’s wrong). Keep the problem you’re trying to solve in mind.

        You lost the link out to the Codex: http://codex.wordpress.org/First_Steps_With_WordPress Do you want to promote the Codex at all? If so, maybe consider adding back a Codex link under the “Get Started with WordPress” heading. I feel like there should be something in this screen that stands out and says, “if you’re really lost and don’t know what to do, go here.” A Codex link could be it. You might even consider it (Help|Codex|Documentation) as one of the main icons (though maybe there’s not enough space).

        This will probably just reinforce some of the decisions you’ve already made, but here’s a snippet from some recent user testing I did where the user got stuck trying to get past the welcome screen after they’d been given the task to go to Appearance → Themes. It’s interesting to see it out of context (i.e. intermediate user, main goal is not getting started). Note: I cut out the top part to hide personal info displayed at the top of the page.

        http://designsimply.files.wordpress.com/2012/07/welcome-screen-406008e.mov

        One thing I did like about the old 3.4 welcome screen is that the lists felt like logical sets of steps to me: 1) Basic Settings, 2) Add Real Content, and 3) Customize. However, even if you didn’t arrange the lists like that, your v4 is still a killer improvement building up the original welcome screen work.

        One problem I’ve found in testing the Customizer is that most themes don’t lend themselves to a good customization experience for new users because brand new blogs are typically empty. Even adding a little “real” content first makes the customizer user experience 10x better. Something to keep in mind when arranging icons/lists.

        “Default” as a top right drop-down option doesn’t make sense to me because it’s not really the default panel (I think).

      • Syed Balkhi 3:05 pm on July 31, 2012 Permalink | Log in to Reply

        I don’t know if it would help to show the Get Started with WP 3.5 text/link all the time. I think after the first few times, it would get super annoying. I love the quick links icons idea, and I think many will benefit from it.

        What would be even cooler is if the user can determine their own quick links. (i.e drag Add a Post link to the icons area and it makes it into an icon link). This would be really handy for CPT’s. For example if you are running a coupons site… the quick link would then say Add a Coupon etc.

        • lessbloat 3:13 pm on July 31, 2012 Permalink | Log in to Reply

          Thanks for the feedback! The icon links will be easy to hook into and change, but they won’t be drag and drop.

      • Mel Choyce 6:34 pm on July 31, 2012 Permalink | Log in to Reply

        There doesn’t seem to be any mention of pages — it almost feels like the only major feature missing. Perhaps we could find some way to integrate it into “new user walkthrough”?

        • lessbloat 6:45 pm on July 31, 2012 Permalink | Log in to Reply

          Ah, you’re right. That must have slipped out in revision. I’ll make sure to get “pages” back in there. Nice catch!

    • Sean Butze 6:38 pm on July 31, 2012 Permalink | Log in to Reply

      +1 for the ability to customize the icons via plugins/themes. I think this is something that should definitely be customized for different use cases.

      Also agree w/ Mel that Pages should be considered for being one of the default icons. For virtually every WP site I’ve built Pages is the #1 most used feature.

    • burtrw 9:42 pm on July 31, 2012 Permalink | Log in to Reply

      I absolutely love that the dashboard and new user experience is getting some love here. I’ve thought a lot about it over the years, and in my day job, worked on lots of different plugins, dashboard widgets, and ways to improve this experience on our large multisite networks. Some of my ideas from a few months ago are here: http://wpmu.org/making-wordpress-more-user-friendly-a-usability-audit-of-joomla-drupal-blogger-tumblr-and-squarespace/

      Looking at these mockups, what I would really like to see is a whole lot less. Less redundancy. And less intimidation.

      For what it is worth, I would love to throw out a couple of ideas. Not sure how I can help or what that process looks like, but would definitely to do what I can!

      1. I’m not a fan of all the links, icons, and guides of things that are really just a click away in the flyout menus on the left. We don’t want to train users to look for these in the dashboard, as once they go to write a post, for example, they probably won’t realize how to get back to that dashboard or welcome page. We really want to train them to use the menus from the very beginning.

      2. I think the whole dashboard should be very clean and sweet – basically more like a notifications or “To-do list” area. Completely get rid of all of the overwhelming dashboard widgets and everything.

      • if this is the first time the user has logged in, welcome them, have them review their profile info, upload an avatar, etc.
      • if the theme is a default theme, suggest they may want to check out others
      • if there aren’t any posts written, or it has been more than say a week since one has been published, suggest they write a post
      • if there are comments to be moderated, show them, and let the user moderate them
      • if there are posts to be moderated, show them, and let the user moderate them
      • if plugins, themes, or WordPress needs upgrading, let ‘em know

      And so on, and so on.

      Could only show 2 or 3 at a time, so not to be overwhelming and users could dismiss them.

      As it is now, when a new user logs into the dashboard for the first time, they are left to figure it all out on their own. In this way, they would always have one simple action item or task they can complete, and in the process, would learn on the job and would know where to start.

      • Sheri Bigelow 1:15 pm on August 1, 2012 Permalink | Log in to Reply

        Redundancy is a good point. It’s almost like the smaller version is a rewrite of the Right Now meta box and the Get Started version could be it’s own separate meta box for welcoming new users.

    • rubai 8:42 pm on August 3, 2012 Permalink | Log in to Reply

      I like to say that the v4 is nice but I would have liked if some of the links can be turned off. and I am not a big fan of the full width box.

    • lessbloat 3:16 pm on August 14, 2012 Permalink | Log in to Reply

      I’m back (after a couple weeks of paternity leave)…

      OK, so just before I left, @nacin mentioned that he’d like to see us narrow our scope a bit, build off of the existing welcome screen, and focus on improving the content, copy and links.

      Hopefully round 5 takes us a bit more in that direction:

      A couple thoughts

      • I removed the big blue badge – didn’t feel like it added anything
      • I removed the big paragraph. Again, I didn’t feel like it added much.
      • I tried to design it so users know exactly what we want them to do first.
      • The links in the third column would lead to walk throughs with pointers.

      What do you think?

      • Sean Butze 4:07 pm on August 14, 2012 Permalink | Log in to Reply

        Definitely liking the simplified layout. I think the flow of tasks makes sense, too. The only thing I’m wondering is how the “Add images” feature will work. I feel like adding images makes the most sense for a new users when done in the context of creating a new post, rather than just uploading an image that sits in the library. How do you envision that working?

        • lessbloat 4:28 pm on August 14, 2012 Permalink | Log in to Reply

          Yep. So, my thought was that they’d be taken to the “new post” page (if they don’t have a static front-page set), and an admin pointer would show them where to click the “Add new image” button. My hope is that with the changes to the media manager, they’ll not need any walkthrough/pointer guidance after that.

      • Amy Hendrix (sabreuse) 4:25 pm on August 14, 2012 Permalink | Log in to Reply

        First, welcome back and congrats!

        I’d second Sean’s point about “add images” — I very rarely do it directly from the Media menu/library, most of my clients (or whatever other users I’m observing) never do, and in fact when they check it out, they’re really unclear on how this relates to putting images into their posts/pages. That’s not a problem for this screen, of course, but it’s also not a beginner step in making a site. On the other hand, adding media to a post/page is a huge step for those users in feeling like they’re taking charge of their site.

        Adding a first post/first page should be equivalent in weight, and I feel like the current division into Start and Show Me columns makes Pages feel like a bit of an afterthought; that’s reinforced by the sharing/reblogging emphasis in the whole Start Publishing column.

        • lessbloat 4:34 pm on August 14, 2012 Permalink | Log in to Reply

          RE: media – agreed, see my comment above. (Side note, after “links” is removed from the left nav, I’d secretly love to see “media” removed as well ;-) )

          RE: page/post – Let me play with this some more. I’ll try to come up with a blog, CMS, and CMS plus blog version. Hopefully that will start making more sense.

          • Sean Butze 6:14 pm on August 14, 2012 Permalink | Log in to Reply

            Does that mean we’ll be able to set a certain version of the Welcome screen based on what our users need? Because that would be awesome :)

            • lessbloat 6:17 pm on August 14, 2012 Permalink

              The plan is to add hooks galore, so modifying this screen for your users should become much easier.

      • lessbloat 4:26 pm on August 14, 2012 Permalink | Log in to Reply

        Update: @melchoyce and I have been discussing (in IRC) the idea of swapping out these link based on whether a user has a static front page set or not (and if so, whether they’ve got a page set for a blog). That way, a user can click the big blue “Customize my site” button and add a static page, then come back and the links will still make sense.

      • lessbloat 9:08 pm on August 14, 2012 Permalink | Log in to Reply

        So here’s a v5b:

        My thought was to simply replace “Add my first post” with “Add an about me page” when the static front page is set, and a blog page is not set.

        “Check out my site” and “Edit my navigation menu” could be swapped out with something else, if we think there is a link that may be higher priority for first-time users.

        I’ll mock up some copy for the walk-through links tomorrow.

        cc/ @sabreuse @georgestephanis

        • Amy Hendrix (sabreuse) 2:47 pm on August 18, 2012 Permalink | Log in to Reply

          Copy ideas for the post/page switch in the middle column:

          If front page == blog (which is also the default/starting state)

          • Add your first blog post
          • Add an About Me page // note: they don’t have any others yet, so “additional” doesn’t work
          • Check out your site

          If front == page and no blog

          • Edit your front page // edit because they’ve already added it at this point
          • Add additional pages
          • Check out your site

          If front == page and they have a blog

          • Edit your front page // edit because they’ve already added it at this point
          • Add additional pages
          • Add a blog post
          • Check out your site

          For all: I like having “Check out your site” available. One of the things I noticed in user tests (and have seen in a lot of real-world users) is that getting back to the front of the site is challenging at first.

    • lessbloat 1:36 pm on August 17, 2012 Permalink | Log in to Reply

      Two minor tweaks:

      • Removed the version number
      • Added “I’ll”

      Here’s my first pass at the three walk throughs:

      Add images:

      Change my theme:

      Edit my navigation menu:

      I’m completely open to suggestions on copy for these.

      • JerrySarcastic 7:54 am on August 18, 2012 Permalink | Log in to Reply

        I like the walk-throughs, especially the fact that the text instruction is kept short and to the point. I’ve seen plugin authors use this same concept, but get a little carried away every time. I think restraint here is key.

        One thought that come to mind (and would be nice feedback) is some kind of progress indicator to let users know that they are on “Step 1 of 3″ or something like that. For the examples you give (only two steps) this is not really necessary, but a topic like “How to add a new blog post” may have many steps. I think this will keep new users from bailing too early on a tour if they know how many steps remain.

        • lessbloat 1:34 pm on August 18, 2012 Permalink | Log in to Reply

          Thanks. RE: step indicator – love that idea. Even though there are only 2 steps, I still think we should add it. :-)

          • JerrySarcastic 10:59 pm on August 18, 2012 Permalink | Log in to Reply

            I’ve been jumping around a bit (and new here) but since there’s so much work going on to create a user handbook, how about having a hyperlink in the pop-up that links to the related page in the handbook? Have the handbook page open in a lightbox (like when adding media or browsing themes/plugins) or a new tab/window so they don’t lose their place in the tour.

            For the people I introduce to WordPress, once they are beyond the more simplistinc “getting familiar” stage of things, they’re really looking for a deeper level of learning. The tour pop ups seem like a natural jumping off point for users who want a little more background or understanding before moving on to the next stage of the tour.

          • JerrySarcastic 9:07 pm on August 20, 2012 Permalink | Log in to Reply

            Oh, I meant adding it to the walk-through notification pop-ups, not the welcome page itself. Still though, I see your point… maybe it’s not a good idea to encourage people to “jump out” of the tour. If the walk-through is truly intended for absolute beginners, it’s probably best to keep things simple. :)

    • Ipstenu (Mika Epstein) 2:02 pm on August 17, 2012 Permalink | Log in to Reply

      Add Images should be “Add Media”

      “You can add images, videos, pdfs, and other documents to your posts and pages by clicking this button.”

      Also I would shy way from saying what color the button is (create a new menu), and just say ‘Click the Create Menu” – that way if we change colors, we don’t have to edit all the copy.

    • Amy Hendrix (sabreuse) 1:50 pm on August 18, 2012 Permalink | Log in to Reply

      What about changing the “my” language to “your” — customize your site, change your theme, and so on? The grammatical shift from “get you started” to all the “my” stuff and then back to second person in the walk-throughs is jarring (and “my $foo” in interfaces always sounds a little like a childrens’ book to me anyway)

      • lessbloat 1:53 pm on August 18, 2012 Permalink | Log in to Reply

        Good call. I actually prefer “my” over “your”, but since the rest of the admin uses “your”, we’ll stick with that.

    • lessbloat 8:58 pm on August 20, 2012 Permalink | Log in to Reply

      Here’s some finalized copy:

      And the walk throughs:

      Add images:

      STEP 1 of 2 – Use the add new menu
      Select “Post” from the add new menu.

      STEP 2 of 2 – Add images/media
      You can add images, videos, pdfs, and other documents to your posts and pages by clicking this button.

      Change your theme:

      STEP 1 of 2 – Choose another theme
      To select a different theme, first click the “Appearance” button.

      STEP 2 of 2 – Install a new theme
      Now select the “Install Themes” tab.

      Edit your navigation menu:

      STEP 1 of 2 – Under appearance
      Click the “Menus” link under the appearance menu.

      STEP 2 of 2 – Create a new menu
      Give your new menu a name, and then click the “Create Menu” button.

      The door is still open for feedback (but just barely). :-)

  • Jen Mylo 5:30 pm on July 6, 2011 Permalink  

    Sometimes our admin ui is crap, depending on the screen size/resolution/browser width combination. Should we jump on the responsive design bandwagon with the admin for the next major release? Thinking maybe @saracannon could head it up if so, given her previous experiments with same?

     

    • Andrew Ozz 8:18 pm on July 6, 2011 Permalink | Log in to Reply

      I was planning to do some testing/fixes for iPad + friends, mostly to make our JS tap aware and the CSS rotation aware. Not sure we can achieve proper support for smaller screens.

      • saracannon 8:31 pm on July 6, 2011 Permalink | Log in to Reply

        I wonder what the percentage of users access their site via the browser on mobile / ipad rather than an app. I can see optimizing for mobile to be very helpful. Just took a look at 3.2 on my iphone … there is a lot of potential, especially for the collapsed-menu to work really nicely.

        • Andrew Ozz 8:50 pm on July 6, 2011 Permalink | Log in to Reply

          Looking at http://en.wikipedia.org/wiki/Usage_share_of_web_browsers the global percentage is quite low but growing. Surely something to think about, maybe not for 3.3 but soon. I think tmce will have support for iOS in the next major version too.

          • RyanWilliams 4:00 pm on July 19, 2011 Permalink | Log in to Reply

            There’s an official WordPress app which strives to provide an optimal small screen experience. Should this effort not be combined with any effort to make the admin UI itself work well on small screens?

            As users of the iPhone Facebook app probably know, it’s a bug-ridden mess that has less features and a more fiddly interface than the more recent mobile-optimised site — yet it’s still promoted as the optimal small screen interface.

            It’s only after months if not years of this horror that they’re finally conglomerating the two (the app’s news feed now literally just fetches the mobile site’s HTML and shows it in an an-app Safari window). Ideally this process will be avoided for WordPress.

    • saracannon 8:20 pm on July 6, 2011 Permalink | Log in to Reply

      This is very true. Especially when it comes to very large monitors. I find myself shrinking down my window for my post editor because I dont want to type across the screen. Simple limitations and modifications could potentially go a long way. I would love to start looking into this.

      • Jane Wells 8:50 pm on July 6, 2011 Permalink | Log in to Reply

        Yep. It’s officially your project. :) Investigate/experiment at will, report to me + @azaozz as things come up so we can discuss anything contentious, and let’s start using UI meetings for it. I’ll put out a call for people to help. A lot of people would like it to look better on their high res screens.

      • Hugo Baeta 3:56 pm on July 7, 2011 Permalink | Log in to Reply

        And the other way around would be interesting too. What about optimizing the admin for smaller mobile screens?

        • saracannon 7:41 pm on July 7, 2011 Permalink | Log in to Reply

          I agree hugo :)

          and the iphone needs some love anyway. check out the WP logo in these screen shots: http://cl.ly/1Y2O14252d2l1W0b0B0G
          Zoomed: http://cl.ly/1n2X1M2t3z2n3K322T22
          I havent looked yet to see if there is a ticket…

          In thinking about this when it comes to the mobile bag of worms: if we start heading that direction for small optimization we’re getting closer to an app-like-influence. One idea would be to somehow encourage / force collapse the side admin menu and have the icons larger to make it more interface-like but still keep the style of the admin intact.

          I can see a use case for when moderating comments via email.. clicking on the link.. going to the wp-admin in your phone’s browser.. (at least the log in screen is already optimized! yay!) and having it be actually a decent experience where you dont have to zoom to read it or fumble to click the 8px button that is “spam”

          side note: I updated all my network to 3.2 from my iphone just the other day… I dont believe you can do that from the iOS app. If we decide to work on improving the mobile “wp-admin” experience, everyone could possibly feel comfortable updating their sites and posting/moderating on the go.

          • Terry Sutton 11:02 am on July 8, 2011 Permalink | Log in to Reply

            Great to see some movement on this.

            Quick and potentially obvious question: If we force-collapse the left hand admin menu, there seems to be pages we can’t access. Categories, for example.

            I might be missing something, but I can’t seem to get at the Categories page without being able to hover over the Posts thumbtack icon.

            Am I missing something?

            • Terry Sutton 11:06 am on July 8, 2011 Permalink

              Ack! Disregard!

              I tried this on my iPhone yesterday—when I clicked a button in the admin menu, it would lead me to the main landing page fo the button. It does work for me now though. When I click any of the buttons, I do get the dropdown.

              Sorry!

          • Jorge Bernal 4:47 pm on July 27, 2011 Permalink | Log in to Reply

            Yep, we (mobile team) get lots of feature requests to add “advanced” features to the mobile apps (user/plugin management, specific plugin support, …).
            If wp-admin adapts well to small screens, the apps could just focus on the most useful features (posting, moderating, reading)

            And besides the apps, for many people (specially Asia and Africa) mobile internet is their only internet. Ideally you should be able to set up WordPress and use it from any mobile device (Opera and Nokia are stil big), without needing to go to a computer. That’s probably way beyond the scope for 3.3, but I think it should be a long term goal.

            For 3.3, I’d be really happy with an improved experience on iOS and Android

            If you need testing, coding, or anything for this, we’re here to help :)

    • Ran Yaniv Hartstein 3:50 pm on July 7, 2011 Permalink | Log in to Reply

      I like the idea of a more width-sensitive Dashboard – the Dashboard now can get quite weird on large monitors too, with very long lines for example in the settings pages.

    • Elio 7:01 pm on July 7, 2011 Permalink | Log in to Reply

      An outstanding move. Large monitors could use two sidebars instead of one in the post/page writing screen.
      How can I contribute to this?

    • Chelsea 6:14 pm on July 18, 2011 Permalink | Log in to Reply

      Helpful new discovery from @stephdau: http://www.getskeleton.com/

c
compose new post
j
next post/next comment
k
previous post/previous comment
r
reply
e
edit
o
show/hide comments
t
go to top
l
go to login
h
show/hide help
shift + esc
cancel