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?
lessbloat, 
Tom Auger 1:29 pm on July 24, 2012 Permalink
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
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
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
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.
Ipstenu (Mika Epstein) 11:34 pm on July 24, 2012 Permalink
Oh… post .formats — I was still thinking, y’know, the old stuff
We’d have to check if they’re available in the theme.
lessbloat 4:03 pm on July 24, 2012 Permalink
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
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
Some additional commentary via IRC.
lessbloat 4:59 pm on July 25, 2012 Permalink
I worked up a v2 this morning (based on feedback from v1):
A couple notes
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
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.
lessbloat 5:16 pm on July 27, 2012 Permalink
Took this into consideration for the v3. Thanks!
Ipstenu (Mika Epstein) 6:27 pm on July 25, 2012 Permalink
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
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
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
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
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
Thoughts in bullet-point form:
Ryan Boren 5:36 pm on July 27, 2012 Permalink
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
Well I for one +1 everything you said.
lessbloat 9:00 pm on July 27, 2012 Permalink
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
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
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
There’s no Like button on .org, but Like!
MartyThornley 10:15 pm on July 27, 2012 Permalink
This looks great!
karmatosed 6:35 pm on July 29, 2012 Permalink
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
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
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
Here’s a v4:
Some thoughts
Dev tasks
We can likely get started planning the dev side of things. cc// @sabreuse, georgestephanis, & @azaozz
A couple of questions/considerations:
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
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
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
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
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
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
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
+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
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.
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
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
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
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
What do you think?
Sean Butze 4:07 pm on August 14, 2012 Permalink
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
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
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
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
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
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.
Amy Hendrix (sabreuse) 4:27 pm on August 14, 2012 Permalink
+1 to this!
Sean Butze 6:13 pm on August 14, 2012 Permalink
+1
lessbloat 9:08 pm on August 14, 2012 Permalink
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
Copy ideas for the post/page switch in the middle column:
If front page == blog (which is also the default/starting state)
If front == page and no blog
If front == page and they have a blog
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 8:24 pm on August 20, 2012 Permalink
I like it.
lessbloat 1:36 pm on August 17, 2012 Permalink
Two minor tweaks:
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
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
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
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.
lessbloat 5:25 pm on August 20, 2012 Permalink
Which handbook are you referring to?
JerrySarcastic 6:51 pm on August 20, 2012 Permalink
Oh, sorry. This is work going on in make.wordpress.org/support, and is something of a “quick start” manual for new users. Still in rough draft, but being worked on for upcoming release.
New User Handbook
lessbloat 8:54 pm on August 20, 2012 Permalink
Thanks. While that project looks great, and I think it has a place (perhaps under help), I worry about adding it to the welcome screen. Since we’re targeting first-time users, I feel like they’d get overwhelmed landing on a page like this: http://make.wordpress.org/support/handbook/just-write/posts/new-post-screen/ while they are just trying to get started.
JerrySarcastic 9:07 pm on August 20, 2012 Permalink
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
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.
lessbloat 2:03 pm on August 17, 2012 Permalink
Both are great points. Thanks!
Amy Hendrix (sabreuse) 1:50 pm on August 18, 2012 Permalink
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
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
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).