Welcome screen design - v2

[lessbloat]

For 3.5 we'd like to try and redesign the welcome screen - making it even more useful for users. I've mocked up a rough proposal of what I'd like to see included here: ​http://make.wordpress.org/ui/2012/07/24/welcome-screen-design-v2/

[lessbloat]

Several elements will need to be coordinated to make this project happen, including:

• The redesign of the welcome screen - this includes the layout, copy, and front-end code - which will be discussed over on the Make/UI blog (then brought back to this ticket as a patch).
• Adding a hook so that the welcome screen can be easily removed (see #19972)
• Allowing plugin authors to create their own welcome screen - with their own set of links and layout (see #21331). This should also optionally enable the "viewing" drop down, as mocked up in my wireframe. Note: the "viewing" drop down should have a hook as well to enable plugin authors to disable it.
• Saving which tab you selected (welcome, or dashboard) to the DB, and loading that tab by default on refresh.
• Adding the “What are you trying to do” text box auto-suggest functionality. Focusing on making admin functionality easier to find.

I added these as a comment as none of these have been solidified yet. Please feel free to discuss/debate.

[beaucollins]

I am attaching a plugin that provides a search interface similar to the demo I posted on make.wordpress.com/ui.

​Download Hopscotch Plugin

Once activated the plugin provides access to the navigation elements int he WordPress menu in a Dashboard widget as seen in this screenshot (by default it will be the last widget on the page unless you drag it to a new position):

You can use the keyboard arrow keys our mouse pointer to activate items.

I have the groundwork laid for hooks/filters that allow other parties to add searchable items.

For the navigation items we want to add additional terms other than those explicitly in the menu. I think the most obvious route would be to leverage the [title] attribute on the anchor tags in the menu which currently don't have any (this also improves accessibility in general). So the "Settings -> General" navigation element could have a title attribute that reads something along the lines of:

Change your blog's title, tagline and date formats

Those terms could then be added to the search index for that navigation element.

I tested this out with the Spanish translation and it works as I expected but I'm not sure how other languages may behave (especially non-latin type).

The plugin is currently named "Hopscotch" since it's just a fork of the same web browser extension.

[lessbloat]

@beaucollins - You've outdone yourself. This is really great. As you mentioned, the only thing that I can see needed is the ability to add additional keywords. I'm not sure stuffing them all into the title will be feasible. I'm excited to see this taking shape. :-)

[beaucollins]

Replying to lessbloat:

As you mentioned, the only thing that I can see needed is the ability to add additional keywords. I'm not sure stuffing them all into the title will be feasible.

I uploaded a new zip with this feature. After the initial indexing of the navigation it makes an ajax request for additional terms for each page. I provided a filter that then allows us to add terms for a given page. For demo purposes I added a few for different options page like this:

add_filter( 'hopscotch_navigation_terms', function( $terms ){
	
	$terms[] = array(
		'page' => 'options-general.php',
		'terms' => array( 'Site Title', 'Tagline', 'WordPress Address (URL)', 'New User Default Role' )
	);
	
	$terms[] = array(
		'page' => 'options-discussion.php',
		'terms' => array( 'Comments', 'Comment Moderation', 'Comment Blacklist' )
	);
	
	$terms[] = array(
		'page' => 'options-reading.php',
		'terms' => array( 'Front page displays', 'Encoding for pages and feeds' )
	);
		
	return $terms;
	
} );

The filter will automatically pass these terms through the i18n functions so if a translation already exists for the given term it will use it. I pulled these terms from the corresponding options pages. So, as an example, the JSON for an 'es_ES' configured blog will output:

{
    "options-discussion.php": [
        "Comentarios", 
        "Moderaci\u00f3n de comentarios", 
        "Lista negra de comentarios"
    ], 
    "options-general.php": [
        "T\u00edtulo del sitio", 
        "Descripci\u00f3n corta", 
        "Direcci\u00f3n de WordPress (URL)", 
        "Perfil predeterminado para nuevos usuarios"
    ], 
    "options-reading.php": [
        "La p\u00e1gina inicial mostrar\u00e1", 
        "Codificaci\u00f3n para p\u00e1ginas y feeds"
    ]
}

And they additional terms work for the given page:

[beaucollins]

Hopscotch plugin, demo of quick links search

[DrewAPicture]

Take the example search of 'media' above. Would users (who maybe aren't familiar with the lingo yet) be able to search for things like 'image', 'video' or 'audio' and still get directed to the Media Library or Add New Media?

[sabreuse]

related: #21331

[lessbloat]

As an update, we've decided to leave search out for 3.5, and to focus on simply improving the existing welcome screen copy and links. ​Here's the latest mockup.

[sabreuse]

Updates copy and links according to make/ui discussions

[sabreuse]

attachment:21368-part1.diff​ updates copy and links according to the discussions here and at ​http://make.wordpress.org/ui/2012/07/24/welcome-screen-design-v2/. Still to come are the walk-through admin pointers and hooks.

This could also use a bit of restyling: without the big badge and longer large-type intro, the panel looks pretty sparse. I think we can afford to bump up the font size a notch or two, since this panel is meant to stand out for users who aren't familiar with the interface.

[SergeyBiryukov]

21368-part1.2.diff​:

• Adds missing i18n for "Customize Your Site" string
• Separates the tags from the translated strings
• Replaces echo sprintf() with printf()
• Fixes "Add media" link (post-new.php vs. media-new.php)
• Removes .about-description styles from wp-admin-rtl.dev.css as well

[lessbloat]

21368-part1.3.diff is my first attempt at adding some styles. Have a look:

I'm still unsure about the background color, but I felt like without it, the content wasn't framed very well.

Thoughts?

[sabreuse]

Looking good - I agree about the need for some kind of framing: after removing some of the larger elements from the original welcome panel, it felt like the content was floating without any real focus.

[georgestephanis]

Revising the patch to apply cleanly since .dev.css files have been swapped out for plain .css and .css files have been swapped out for .min.css

[georgestephanis]

Adding pointers in. Still need to include conditional way of only showing the step2 pointers when following a step1 pointer. Cookie perhaps?

[georgestephanis]

21368.4.now-with-more-onclick.diff

Adding pointers in. Still need to include conditional way of only showing the step2 pointers when following a step1 pointer. Cookie perhaps?

[lessbloat]

In 21368.5.diff:

• Changed "Add additional pages" and "Add an About page" to point to post-new.php?post_type=page (so the user doesn't need to click twice to get to where they want to go).
• Changed "Add a blog post", and "Write your first blog post" to point to post-new.php.
• Changed "Check out your site" link copy to "View your site".
• Added "or, change your theme completely" under big button, and removed step 1 of admin pointers for this link.
• Changed "change theme" link in right column to "Add/remove widgets" and added a pointers.
• Changed z-index of left nav sub menus to show up over top of admin pointers.

[sabreuse]

In 21368.6.1.diff:

• Add a cap check for install_themes to the "optionally, install a new theme" pointer
• Hide the change your theme link in the case that the user has only one theme installed and doesn't have privileges to install new ones
• Make the "or," in "or, change your theme" translatable

[helenyhou]

21368.7.diff​ changes the cap check for the "change your theme" link to be a little more thorough (tested with various users and theme numbers in multisite) and does a good bit of CSS cleanup. Also, a thought about the change theme pointer - seems to me it might make sense to name it install theme instead, since that's where it really points.

Edit: Darn. Forgot to take the media query block out of one of the colors CSS files. Next iteration should remove that, please. :)

[georgestephanis]

Latest revision removes the install_theme capability check, as that tooltip shouldn't show in a walkthrough, as the link kicking it off got removed! Also removed the relevant function, etc.

Added in a get variable appender for the links we care about. This way we can only show the step 2 tooltip when following a click on the link from the previous page. No cookies needed!

Also made a minor change in verbiage as requested by Koop (element becomes link)

Koop requested changing setup to use e.preventDefault() rather than return false -- I tried it, but it won't work, as the same function also needs to run on pageload, and that generates a script error in practice. Has to return false to prevent the link from going, either that or some convoluted test for if e is an event then preventDefault()-ing.

Also removed the media block from colors-fresh as per Helen.

[georgestephanis]

Put the theme pointer back in and tidied up the code for it.

[azaozz]

Replying to georgestephanis:

Koop requested changing setup to use e.preventDefault() rather than return false -- I tried it, but it won't work...

Changing the href attribute of an <a> tag always "triggers" the link. Also it shouldn't use html entities from JS in -1 == href.indexOf('?') ? '?' : '&', the browsers handle that internally.

Wondering if there is another way of doing this without changing the link's href.

[lessbloat]

RE: adding hooks - quote from helenyhou today in ticket scrub, "and i'm pretty sure there will only really be two hooks - disabling the panel completely (like not even having it in screen options), and one for the entire inner HTML output".

[lessbloat]

In 21368.9.diff I made a couple of minor CSS (padding, font-size) tweaks. Also changed "Add media" link to "Add image/media".

[ryelle]

Adding a hook using nacin's idea from #21331:

do_action( 'welcome_panel' );

And in default-filters:

add_action( 'welcome_panel', 'wp_welcome_panel' );

[lessbloat]

This ship is just about ready to set sail. Any last minute thoughts on design improvements?

[helenyhou]

Replying to lessbloat:

This ship is just about ready to set sail. Any last minute thoughts on design improvements?

We can still make design tweaks for some time yet. Just need it to be functioning and somewhere close to a look.

[lessbloat]

Replying to helenyhou:

We can still make design tweaks for some time yet.

Sorry, I should have said. Everything is in except for any remaining design tweaks. :-)

[JerrySarcastic]

One minor change: "Learn how to:" should probably be changed to "Learn How To:"

The word "Learn" might even be a bit redundant, so we could even shorten it to just "How To:" instead, and it works just fine.

[lessbloat]

21368.10.refresh.diff resolves a conflict in dashboard.php.

[helenyhou]

Would like to see the following:

• The button to use new built-in button gradients and just resize accordingly
• Everything added to the welcome_panel action to be inside the wrapper markup (a couple of divs plus the dismiss link, I believe). Will probably need to do some has_action() checking there to conditionally output the wrapper, much like the screen options checkbox.

[lessbloat]

Removed custom button styles in 21368.11.diff. The big blue button now mostly defaults to the new button styles.

[sabreuse]

21368.12.diff does the following:

• conditionally outputs the wrapper and Dismiss button based on a has_action()
• free gift with purchase - removes the version variable that we're no longer using for "Welcome to WordPress 3.5"

[helenyhou]

Tested removing the panel, replacing, and adding to it. Works nicely :)

[helenyhou]

21368.12.nopointers.diff​ looks good for a first run.

[lessbloat]

One last tweak needed. After you click the "Customize your site" button, when you click the "cancel" button in the customizer, it should take you back to your dashboard. Other than that, it looks good to me too.

[lessbloat]

21368.13.nopointers.diff fixes comment:37.

[helenyhou]

Looks good. 21368.14.nopointers.diff​ removes one more reference to a pointer in a URL.

[nacin]

In [22018]:

New design and content for the welcome panel. First pass.

props lessbloat, helenyhou, georgestephanis, sabreuse, ryelle.
see #21368.

[azaozz]

In [22028]:

Too much z-index on the admin submenus, see #21368

[DrewAPicture]

First-pass: Adds hide-if-no-customize to primary button

[DrewAPicture]

Fixes admin-header checks

[DrewAPicture]

It occurs to me that we need to hide the Customize button on the Welcome panel if it's not supported (such as no-js). 21368.16.1.no-customize.diff​ is a first pass at hiding the button with the hide-if-no-customize class, although I'm sure the UI folks will want to find a way to more gracefully degrade that section.

On a side note: As far as I can tell, the no-customize-support body class is set in admin-header by default and adjusted after the fact by wp_customize_support_script(), which hide-if-no-customize relies on. So I also adjusted the check in admin-header.php.

[lessbloat]

I'm not sure we can just remove the customizer button itself. Doing so leaves the "First, tweak the look of your site:" text which no longer really applies. In 21368.16.2.no-customize.diff I moved the .hide-if-no-customize class up to the parent .welcome-panel-column div which removes the entire first column when .no-customize-support is set. But that leaves a pretty noticeable gap to the right which isn't great.

[lessbloat]

Instead of hiding the "Customize Your Site" button, 21368.17.diff changes the link to point to the themes page, and removes the "or, change your theme completely" line below the button when .no-customize-support is set.

[nacin]

I missed it in [22018], but there is a better API we can use here. With the customize loader script properly loaded and implemented, we can allow the customizer to open as an overlay over the page, rather than requiring it to open to customize.php. Also, rather than rewriting the link, we can simply print two different buttons — one if customize is enabled, one when it isn't.

[nacin]

In [22089]:

Provide no-customize fallback to the welcome screen. Use the customize overlay rather than a page reload. see #21368.

[lessbloat]

Removed the "First, tweak the look of your site:" line in 21368.18.diff which makes all 3 columns the same height:

[lessbloat]

Decreased font-size of header and sub-header in 21368.18.2.diff:

[nacin]

The third column, "Learn How To," doesn't make much sense when there are no pointers. I'm not suggesting we add the pointers back in (they are clever, but the workflow and pointers UI seems half-baked for this), but rather, we need to revisit our content.

I think good places to start would be looking at the original welcome panel and also studying the Codex links that got removed with v2.

[sabreuse]

refresh of .18.2

[sabreuse]

21368.18.3.diff is a refresh after .2 gave me a hunk failed

[lessbloat]

In 21368.19.diff made updates to links and header in right column per Nacin's comment above and our discussion in ​IRC

[saltcod]

Welcome panel with icons

[saltcod]

I mentioned using icons in the IRC chat early today. I thought I'd just post a very quick mockup of what I was talking about to get some reaction before I do any coding.

The column headings don't reflect what was talked about today, and obviously the icons would need to be meaningful (and GPL), etc, etc...but it shows the main sentiment at least.

[JerrySarcastic]

That looks quite nice, actually. +1

[melchoyce]

Loving the use of icons, @saltcod -- it definitely makes the Welcome Screen a little friendlier.

@saltcod, you asked on UI chat about GPL icon sets. I'm a little fuzzy on the image copyright version of GPL, but I think either public domain or CC non-attribution should be okay. (If someone knows for sure how this works, please let me know.) In addition to the resources helenyhou mentioned, you can search ​http://www.iconfinder.com/ and specify "allowed for commercial use (no link required)" to find some icons/icon sets. Each set should have an attached license which will let you know if it's okay to use. Alternately, you can look for public domain and non-attribution icons on ​http://thenounproject.com/. If you end up not finding any icons you like, let me know. I'd be happy to design some for this specifically.

@sabreuse mentioned in chat bringing in some of the admin icons, which I think is a good solution to help tie together each link with its action. We have icons for post, page, comments, and appearance, so we'd just need to make a "view" and "learn more" icon that matches the admin style, if we decide to go in that direction.

[nacin]

Replying to melchoyce:

Loving the use of icons, @saltcod -- it definitely makes the Welcome Screen a little friendlier.

@saltcod, you asked on UI chat about GPL icon sets. I'm a little fuzzy on the image copyright version of GPL, but I think either public domain or CC non-attribution should be okay. (If someone knows for sure how this works, please let me know.)

Only CC0 is compatible with the GPL.

I think we would ask empireoflight (Ben Dunkle) or chexee to make icons for us, though. So, if we are to do icons, they would be custom and these are only placeholders.

[lessbloat]

Replying to saltcod:

I mentioned using icons

I like it. My thoughts:

• I'll ping Ben Dunkle to see if he's interested
• Let's try and keep these icons flat (minus gradients and shadows)
• I'd remove the border-bottom under the third row or both the second and the third column (just a personal preference).

[lessbloat]

Just making a note of the new links in 21368.19.diff. Here are the links:

[empireoflight]

No prob, I'll hook it up with some icons, I'm thinking the standard WP style, like in the left column? Or do we want them simple and flat?
I'm assuming we need 16x16 and 32x32 (2x) sizes...please advise if there's flexibility there, since 16x16 can be tough.

[empireoflight]

Sorry, just reading this; ignore my post about icon style; we'll do the WP style.
So we just need view and learn more then?

Replying to melchoyce:

Loving the use of icons, @saltcod -- it definitely makes the Welcome Screen a little friendlier.

@saltcod, you asked on UI chat about GPL icon sets. I'm a little fuzzy on the image copyright version of GPL, but I think either public domain or CC non-attribution should be okay. (If someone knows for sure how this works, please let me know.) In addition to the resources helenyhou mentioned, you can search ​http://www.iconfinder.com/ and specify "allowed for commercial use (no link required)" to find some icons/icon sets. Each set should have an attached license which will let you know if it's okay to use. Alternately, you can look for public domain and non-attribution icons on ​http://thenounproject.com/. If you end up not finding any icons you like, let me know. I'd be happy to design some for this specifically.

@sabreuse mentioned in chat bringing in some of the admin icons, which I think is a good solution to help tie together each link with its action. We have icons for post, page, comments, and appearance, so we'd just need to make a "view" and "learn more" icon that matches the admin style, if we decide to go in that direction.

[melchoyce]

Replying to nacin:

Only CC0 is compatible with the GPL.

Good to know, thanks for the copyright clarification @nacin. Would public domain also be acceptable, or just CC0?

@lessbloat, is the "next steps" column still changing depending upon if the site is set to a blog frontpage or a static frontpage?

Replying to empireoflight:

Sorry, just reading this; ignore my post about icon style; we'll do the WP style.

​Looks like @lessbloat is recommending we actually do make them flat. @lessbloat, were you thinking we would use new flat icons, or making the existing icons flat?

[nacin]

Replying to melchoyce:

Good to know, thanks for the copyright clarification @nacin. Would public domain also be acceptable, or just CC0?

A public domain work is GPL compatible. CC0 is preferred because it is an actual license, defines what "public domain" means, and offers a permissive fallback. ​http://www.gnu.org/licenses/license-list.html

[empireoflight]

Welcome icons in WP style

[empireoflight]

Just posted designs. Are these the links that will appear?
Did two for "View your site".
I have no clue what to do for "Manage widgets and Menus"--suggestions?

[lessbloat]

Replying to empireoflight:

Just posted designs.

Awesome. Thank you!

Are these the links that will appear?

They are. This looks great.

Did two for "View your site".

Although the "eye" one stands out more, personally, I'd go with the non-eye one.

I have no clue what to do for "Manage widgets and Menus"--suggestions?

Here's one quick idea (don't feel like you have to roll with it though):

One last thing, I'm sure you're already on it, but can you please add 2x images for each of these :-)

Thanks so much Ben!

[melchoyce]

Replying to empireoflight:

Did two for "View your site".

These look great! I agree with @lessbloat -- I think the first "view your site" icons works better than the eye overall.

Replying to nacin:

A public domain work is GPL compatible. CC0 is preferred because it is an actual license, defines what "public domain" means, and offers a permissive fallback. ​http://www.gnu.org/licenses/license-list.html

Thanks for the clarification.

[nayarain]

I like icons, they break up the different links for the eye, delineating between tasks. I like @empireoflight icons they feel more wordpressy (I'm making that a word)

[lessbloat]

There's some discussion taking place over here: ​http://make.wordpress.org/ui/2012/10/11/we-need-your-help-deciding-what-to-do/

@empireoflight, 2 things I noticed:

1) Sorry I missed one. When you select a static front page, with a blog page, another link shows up (Add a blog post). I attempted to hack in the existing posts icon:

But I'm not sure it works - seems a bit light compared to the others.

2) The "Manage widgets and menus" icon looks a tad off to me compared to the others:

I'm not sure if it's the size, or perhaps the dark strip at the top (where the other icons don't have any major dark sections). What do you think?

[empireoflight]

Good points; I'll get new tack and widget icons done asap.

Replying to lessbloat:

There's some discussion taking place over here: ​http://make.wordpress.org/ui/2012/10/11/we-need-your-help-deciding-what-to-do/

@empireoflight, 2 things I noticed:

1) Sorry I missed one. When you select a static front page, with a blog page, another link shows up (Add a blog post). I attempted to hack in the existing posts icon:

But I'm not sure it works - seems a bit light compared to the others.

2) The "Manage widgets and menus" icon looks a tad off to me compared to the others:

I'm not sure if it's the size, or perhaps the dark strip at the top (where the other icons don't have any major dark sections). What do you think?

[lessbloat]

Replying to empireoflight:

Good points; I'll get new tack and widget icons done asap.

@empireoflight: A possible alternative to the widgets/menus icon: ​http://make.wordpress.org/ui/2012/10/11/we-need-your-help-deciding-what-to-do/#comment-22462

[empireoflight]

psd files for icons at 16 and 32px, and sliced png files for all icons

[empireoflight]

Icons have been updated with a darker pin and a smaller widget. Preview without the new link styles:

[lessbloat]

Replying to empireoflight:

Icons have been updated with a darker pin and a smaller widget.

Fantastic. Thanks for that! I'll work on an updated patch in the AM.

[lessbloat]

I combined 21368.19.diff and @empireoflight's icons (including 2x images) into 21368.20.diff. Here's what it looks like:

[ryan]

wp-admin.css needs refresh.

[lessbloat]

Replying to ryan:

wp-admin.css needs refresh.

21368.20-refresh.diff should do the trick.

[ryan]

Retina icons

[ryan]

Icons are off on a MacBook Retina but fine on non-retina.

[lessbloat]

Replying to ryan:

Icons are off on a MacBook Retina but fine on non-retina.

Thanks for catching that. 21368.21.diff should provide a fix.

[ryan]

In 22379:

Welcome screen refresh. Now with icons. Props lessbloat, empireoflight. fixes #21368

[TobiasBg]

I'd like to suggest that we shorten and optimize the welcome panel icon CSS a little bit. Patch 21368-welcome-panel-css.diff shortens the sprite CSS for regular and Hi-DPI.

[TobiasBg]

Optimize and Shorten welcome panel icon CSS

[azaozz]

Replying to TobiasBg:

Thanks for the patch, we were just talking about this yesterday in IRC. The only thing missing is the RTL.

[TobiasBg]

No problem :-) RTL for the welcome screen is being worked on in #22453, as far as I can see.

[helenyhou]

Think we can simplify even better with an added class: 21368.diff​

[helenyhou]

21368.2.diff​ is a refresh after [22629] and [22634].

[lessbloat]

+1 to 21368.2.diff​. Looks good.

[azaozz]

In 21368-20.patch added RTL and a fix for the Dismiss icon. Also had to tweak the vertical position of the icons a bit. Could you see if that's better?

[helenyhou]

Needed a bit more for RTL: 21368.3.diff​. Probably should acknowledge ocean90's patch over on #22453 as well. Let's finish this off to stop the confusion :)

[azaozz]

Fixed in [22638].

[helenyhou]

New tickets from now on, please.