Make WordPress Design

Updates from August, 2013 Toggle Comment Threads | Keyboard Shortcuts

  • Matνas Ventura 7:56 pm on August 16, 2013 Permalink
    Tags: , ,   

    THX38 project and weekly meetings 

    Hello all. Team THX38 will be working on the Theme Experience project, spanning the theme admin screens as well as improving the .org directory. Check our initial overview for information on our goals and the pain points we want to address. We also have some visual concepts there to start the conversation.

    Weekly office hours

    We’ll be meeting in #wordpress-core-plugins on Monday, August 19 18:00 UTC. If this works out we’ll keep this time going forward.

    Current Team

    @matveb (lead), @samuelsidler, @melchoyce, @shaunandrews, @jacobdubail. The following people have also expressed interest in helping when time permits: @helen, @bpetty, @sabreuse

    If you’re interested in contributing to the project, leave a comment here and let us know!

    Next steps

    For next week, Shaun will be working on running some tests around themes.php, and we’ll also be setting up a plugin soon so we can start playing with these ideas. See you around!

    • harribellthomas 8:00 pm on August 16, 2013 Permalink | Log in to Reply

      I’d love to help and contribute and give something back to the community (time permitting of course). You can find me at @harribellthomas. If there is anything I can do/help with, please let me know. (I am primarily a plugin author, and am familiar with PHP coding).


      • Sam Sidler 9:24 pm on August 16, 2013 Permalink | Log in to Reply

        Great! Be sure to join us for our meeting on Monday and start getting involved. Even if you get too busy to participate every week or contribute code, we’d love to have help in the form of feedback as the project moves forward. πŸ™‚

    • paaljoachim 12:02 pm on August 17, 2013 Permalink | Log in to Reply

      What about adding a button next to customize in the detailed theme mockup called “create child theme”?
      It would be nice to select a theme and then easily make a child theme out of it.

    • pixels72 11:26 pm on August 17, 2013 Permalink | Log in to Reply

      I’d also like to help out and contribute here (time permitting). My experience is in front end design-development / UI.

    • Chip Bennett 1:02 am on August 18, 2013 Permalink | Log in to Reply

      Please keep the Theme Review Team in the loop, in case there’s anything we can contribute, or in case anything that you come up with might impact the Theme Review guidelines.

      (Something that I know would be hugely popular with Theme developers is the ability to have multiple screenshots. A “mobile” screenshot would also be quite popular, I’m sure.)

    • JoshPollock 1:55 am on August 18, 2013 Permalink | Log in to Reply

      I’d definitely like to be involved, especially in regards to theme browsing on .org. I will be at the meeting on Monday. I am @shelob9 on freenode and wordpress.org. I’m an active member of the theme review team, and would happy to make reports on this project’s progress to the theme review list and bring the team’s reactions back.

      Is it possible for that the concept drawings that are linked from the overview be posted as .psd or .ai files?

      • MatΓ­as Ventura 9:44 pm on August 18, 2013 Permalink | Log in to Reply

        Great, see you on Monday then. The concepts were done using the Balsamiq Mockups app, which sadly seems to output only pngs or pdfs. It’s a good topic to discuss at the meeting, anyways β€” how to better share and contribute to these early stages assets.

  • Helen Hou-Sandi 2:56 pm on November 15, 2012 Permalink  

    A summary of the Community Summit discussion on the UI group has been published. Thanks to @sabreuse for her wonderful note-taking! Feel free to discuss the notes, and do hold us accountable for our action item. Weekly summaries will also begin very soon.


    • karmatosed 3:03 pm on November 15, 2012 Permalink | Log in to Reply

      That all sounds really cool. I will openly admit I really want to contribute to the UI team but had a hard time finding a way to and was a little daunted. I have contributed in other areas but found the UI team a bit harder to find a way in with. Having projects that can bring those of us new to the team into things would be great. I look forward to hopefully finding a way to get involved.

      • Helen Hou-Sandi 3:06 pm on November 15, 2012 Permalink | Log in to Reply

        Do you mind describing what you’ve tried or thought about trying so far? Just for data/things to think about as we constantly evaluate what we do.

        • karmatosed 4:27 pm on November 15, 2012 Permalink | Log in to Reply

          Sure, my first starting point was watching the blog and getting to know the blog posts. I found the discussion very lively which was really cool. I then started attending the dev chats and tried to get involved in the dashboard but every time I did something seemed to have been agreed outside of the chats or was already assigned as a task so it was hard to find a way in to contribute. I was made very welcome I’d like to make that clear and nothing I’m saying is against anyone, I just got lost from the welcome to the doing πŸ™‚

          I have in a few cases responded to things in discussion threads though, so I have tried through that but would love to do a bit more than just comment.

          I do front end code and design so was open to either as a contribution. It totally may have been the time I tried to join in and that everything was already allocated by then, however it seemed that an extra hand wasn’t needed and everything was already tasked up.

          I am involved in the BuddyPress side of things and have a past in Open Source so aware of the ‘get stuck in’ nature of contributing and love it. I’m not usually a wall flower over things so found it odd how hard it felt trying to start.

          I really don’t mean that comment against anyone as know nothing is perfect and it’s as much down to me as it is anyone when contributing comes in. It was just hard to find a place to ‘get stuck in’ that wasn’t already occupied.

          I’d love to work out a way to get involved though as feel whilst I do give to a side project (BuddyPress), I want to give back to the core project also. Maybe some clear areas / teams would help those of us circling around wanting to get involved but not seeing a way in beyond commenting? I know it’s never an easy solution and grateful that it’s being reviewed so hopefully more people (myself included) can step up to get involved.

          • Helen Hou-Sandi 11:57 pm on November 15, 2012 Permalink | Log in to Reply

            Thanks for responding πŸ™‚ On the UI front, I’ll keep an eye out for you in UI chats (and make sure to pipe up, especially at the roll call part – we’re trying to get better about that so we know who’s around). Right now we tend to get bogged down in what’s needed specifically for the release as we approach RC and release stages, but even just getting used to regulars is helpful.

  • 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!

  • Helen Hou-Sandi 9:29 pm on August 15, 2012 Permalink

    Meeting summary for 8/14 

    Note: meeting on 8/7 did not really happen, as many were traveling or otherwise out of commission post-WCSF.

    Meeting was largely focused on status check of various items and really bearing down on assignments and breaking down tasks into what can be realistically accomplished within a given time period (the next week) so we can regularly check in. Setting the goal is not the maximum that can be achieved – only the minimum. Things finished early or with aplomb are highly encouraged πŸ™‚

    Reminder: devs should ideally be focused on one large item at any given moment. Working on your own pet projects and roaming around is always fine, but would prefer to stay away from overcommitment, especially for point people. This includes me πŸ™‚

    • Kurt Payne 6:51 am on August 16, 2012 Permalink | Log in to Reply

      @helenyhou I can help with #21391!

      • Helen Hou-Sandi 1:09 pm on August 16, 2012 Permalink | Log in to Reply

        YAY! I will hit you up soon, then. I’ve also got blobaugh, maybe jeremyfelt, maybe tw2113, and possibly tomauger (although I think he is on the ImageMagick stuff as well; trying to avoid doubling up).

    • Shane Pearlman 11:43 pm on August 16, 2012 Permalink | Log in to Reply

      Thanks Helen, stoked to participate in brainstorming. Will work on the document.

      Things that we often debate that would be fantastic to get guidance:

      • When do you combine content into a single meta panel in a post type vs create a new meta panel?
      • When do you create a new submenu vs combine into a submenu
      • What is the proper ux for condensing long settings / form content (tabs?)
      • Thoughts on advance form permutations > thinks like chosen and select 2 which are wonderful aids, but aren’t standardized
      • Inline documentation styles

      • Helen Hou-Sandi 12:38 am on August 17, 2012 Permalink | Log in to Reply

        To be honest, I don’t think it is possible to provide be-all-end-all documentation on the first four items. The documentation would amount to something like “do what feels right and makes sense for your situation” – we can’t possibly expect software-specific guidelines to actually teach what usability means and what creating usable interfaces entails. That’s the issue that I sense will be run into in the end: we can have guidelines for the WordPress community, and we can create awareness via guidelines, but they are not a proper medium for a crash course in human-computer interaction. However, I’d love to be proven wrong, so please do work on the document, and perhaps try to find a time to have an actual discussion beyond notes on said document.

        Inline documentation styles sounds like something that could be looked at, though, and current core usages documented and ideas proposed for extension cases those don’t cover. What we really need is to get bodies on http://dotorgstyleguide.wordpress.com/ (or move it somewhere we can put more people on) and work on items that fall under the current style guide umbrella directly.

  • Helen Hou-Sandi 1:12 am on August 2, 2012 Permalink

    Meeting summary for 7/31 

    Logs: https://irclogs.wordpress.org/chanlog.php?channel=wordpress-ui&day=2012-07-31&sort=asc#m49644

    • Media wireframes: look at them if you haven’t yet, and leave feedback. Development breakdowns and work will happen in #wordpress-dev when we get there, for the development-minded. WCSF dev day will also be a forum for more discussion for those who are there, and we will be vigilant about sharing those conversations publicly. Tickets to keep an eye on: #21390 and #21391
    • Accessibility is still a big need in terms of expertise and hands on deck, and there are plenty of tasks with UI implications. Discuss on the post if you’re interested or have knowledge when it comes to making things accessible on the web (screenreaders and non-mouse users, for instance) or hit up @sabreuse, who is helping shepherd efforts. Also keep an eye on Make Accessibility.
    • Welcome screen v2 is also still in wireframe and copy feedback stage. We need to drop the Spotlight/Alfred/Quicksilver search thing in terms of core development this cycle (sorry, we know how cool it is) and focus on iterating on the panel that is there. We also need go back to focusing on new user experience (NUX) and initial walkthroughs/links for now. The ideas have been great, and are not being thrown away by any means – we just need to focus so that we can actually get something done in time. Who knows, if we move fast, and get user testing rolling, we might be able to look at more iterations (and toss in a hook to make a plugin for the Spotlight thing possible) πŸ™‚

    And finally, a reminder that open office hours are every weekday at 19:00 UTC (3PM EDT). #wordpress-ui is always open for discussions, but if you’re a little more nervous about just poking your head in or want to schedule something with a group, it’s a great time to do just that!

  • 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


      • 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!

    • 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 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.


      • 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: https://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.


        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 | Log in to Reply

              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). πŸ™‚

compose new post
next post/next comment
previous post/previous comment
show/hide comments
go to top
go to login
show/hide help
shift + esc
Skip to toolbar