We need your help deciding what to do with the welcome screen.
Our most recent iteration was to bring in some icons (to hopefully add a bit of polish to the interface). I began implementing the icons that @empireoflight created, and wanted to give ya’ll a preview:
For contrast, here’s what the welcome screen looks like without any icons:
The question is this, should we:
A) Stick with the icons @empireoflight designed?
B) Try some flat icons similar to what @saltcod mocked up?
C) Try to find a way to polish the welcome screen without icons? Suggestions welcome…
D) Leave it (similar to the second screenshot above) shooting for a clean/minimal looking design?
Scott Taylor 3:00 pm on October 11, 2012 Permalink
I like B
George Stephanis 3:01 pm on October 11, 2012 Permalink
Honestly, I like it with icons, but would say to match the icons to whatever we’re using for the main navigation icons on the left side of the screen. There was some talk about making those flatter, and using an icon font — IMHO, whatever we do with the main nav icons, we should do with these as well, just to follow suit.
Saurabh Shukla 3:02 pm on October 11, 2012 Permalink
I like B. It’s cleaner, better contrasted and clear. I’d hope that the main navigation follows suit.
Mel Choyce 3:11 pm on October 11, 2012 Permalink
I definitely like it better with icons, and I like that saltcod gives each item some extra padding and a divider. It looks really clean. However, I’m pretty torn about which style of icon I think works better. If we do go flat, I agree with George Stephanis that all of our icons should be consistent. Unless we plan on changing our navigation icons as well (which I would be interested in seeing in the future, and would love to volunteer to make icons), I think we should go with empireoflight’s.
jacopo.vip 3:28 pm on October 11, 2012 Permalink
The icons help a lot. My eye is quickly drawn to them and they’re more universal. I like the icons that @empireoflight created since they seem to match the existing WP icons well.
Eric Mann 3:30 pm on October 11, 2012 Permalink
Definitely with icons. The break up the list a bit more so it doesn’t look as text-heavy. And while I like the icons @empireofflight designed, I do like the spacing @saltcod included in the mockup a bit more – perhaps use @empireofflight’s icons but with more horizontal padding so they aren’t as crowded with the text.
I’m looking at this from both a developer perspective and a user perspective. As a developer, I like clean and minimalist. As a user, it’s easier to click something because of a recognizable icon than it is to read text and make a decision. @empireofflight’s icons fit the current nav icon style a bit better and make for a consistent look/feel as well.
@mercime 3:42 pm on October 11, 2012 Permalink
With icons.
How about creating own set of WordPress Icon Fonts. No more problem creating small n’ large icons each time and looks good in all screen sizes.
Ben Huson 3:49 pm on October 11, 2012 Permalink
I like with the icons.
I think the text only version is difficult to scan quickly.
The should definitely be sympathetic to the icons in the left menu so if they are staying as-is for the moment then the ones by @empireoflight seem appropriate.
I do like the @saltcod flat icons though, but I would not suggest using this unless going for a flat icon approach in the menu menu too.
Matt Wiebe 3:50 pm on October 11, 2012 Permalink
1. With icons is better. Differentiation between tasks and an overall friendlier feeling.
2. I like flatter icons better.
3. The icons need to be consistent with the left side menu icons. This is more important than 2. above.
lessbloat 3:52 pm on October 11, 2012 Permalink
Yep, I’d love to see us experiment with flat icons and perhaps using an icon font, but it won’t happen in 3.5.
How’s this for a bit more breathing room:
electrolinks 3:52 pm on October 11, 2012 Permalink
Its a busy panel, but of the two I like it with the icons slightly better. It makes the options a little easier to read.
Consistency with the left side is icons is a good way to go.
If this is a wizard type screen, these links could me made even more like steps in a process 1,2,3 etc.
saltcod 3:57 pm on October 11, 2012 Permalink
A little more room in this one, keep the lines, and add bump the labels more to the left of the icons? This line pattern doesn’t repeat much throughout the rest of the ui, but I do like them.
http://cl.ly/image/2d3l1C2x2e2y
saltcod 3:59 pm on October 11, 2012 Permalink
The lines are way too faint on that last one. Less faint here:
[And the link in case my image doesn’t insert itself properly: http://cl.ly/image/221t2g1G3F1z
Amy Hendrix (sabreuse) 4:05 pm on October 11, 2012 Permalink
Definitely in favor of WordPressy icons — it’s a big improvement over none at all, and we should stick with the same icon style we’re using everywhere else (not that I wouldn’t love to play with what we can do with an icon font in a future release)
JerrySarcastic 4:13 pm on October 11, 2012 Permalink
I think @empireoflight’s icons are closer to the style of icons used currently in the dashboard than the ones @saltcod mocked up, so from that standpoint it’s a better short-term solution.
I agree that ultimately it would be better to have an icon font (similar to what saltcod mocked up) in the long run, either using something that is already GPL, or creatign our own WordPress font. For sure it would eliminate the problem of providing icons in different sizes, and would be lighter weight for improved page load.
Helen Hou-Sandi 4:14 pm on October 11, 2012 Permalink
That would be because the icons come from empireoflight.
Helen Hou-Sandi 4:14 pm on October 11, 2012 Permalink
I would like to see what happens when an item runs to more than one line (think translations, smaller widths), both with and without the lines, please.
saltcod 4:16 pm on October 11, 2012 Permalink
[ btw, my icons were straight from http://www.justbenicestudio.com/studio/websymbols/ — the only icon font I had installed at the time — and intended only to show where I thought icons might be placed. I love flat icons, but they're not WordPress-y, at least at this moment. ]
lessbloat 4:17 pm on October 11, 2012 Permalink
With lines (though getting the widths of those lines right, and the heights to always line up might be a bit tricky):
lessbloat 4:20 pm on October 11, 2012 Permalink
With line wrap:
Helen Hou-Sandi 7:45 pm on October 11, 2012 Permalink
I think of the ones you posted, this one with just extra spacing turns out the best. With the possibility of more than one line for an item, the lines look weird, but the icons help to delineate one item from another. I almost wonder if the icons should behave more the way bullets do with text having a hanging indent, though.
lessbloat 8:20 pm on October 11, 2012 Permalink
Good point. Isaac does a good job of mocking up a better indent here: http://make.wordpress.org/ui/2012/10/11/we-need-your-help-deciding-what-to-do/#comment-22465
lessbloat 4:25 pm on October 11, 2012 Permalink
Line break with lines:
RDall 6:13 pm on October 11, 2012 Permalink
HI Dave I certainly like what you designed here: http://make.wordpress.org/ui/2012/10/11/we-need-your-help-deciding-what-to-do/#comment-22457
The one with the Icons and the smaller customize your site button.
The line breaks are fine with if the more actions are going to break over both lines. If they can stay on one line then I find the line breaks are not needed.
Looking good.
Helen Hou-Sandi 7:42 pm on October 11, 2012 Permalink
With varying window widths and various translations, there’s no way we can say that it will never wrap to more than one line.
RDall 8:04 pm on October 11, 2012 Permalink
Oh of course… I was just making the mention that if there was no line breaks then the lines are unnecessary. But certainly the linebreaks help and I would encourage their use…
(In my comment I also forgot other languages as I am so accustom to only be working in English. if I am going to be a helpful contributor then I must remember the other languages of the world
Reji Thomas 7:11 pm on October 11, 2012 Permalink
@empireoflight ‘s icon rendition is better. Would go with A.
Pascal Birchler 7:35 pm on October 11, 2012 Permalink
Stick with Version A, but change the icon of the last action (“Manage widgets or menus”) to the one used under Appearance.
Isaac Keyet 7:50 pm on October 11, 2012 Permalink
I’m definitely in favor of using the same looking icons as currently in the admin (this is not the time to be adventurous). I don’t think the separating lines are needed and for the most part I think they only add clutter, but if it makes the box look more airy to some, why not.
I do think it’s important to use a good line height though, and make sure to indent the text properly if it’s going to wrap (which it should, this box being responsive and all!).
This is how I think it should be done:
lessbloat 8:17 pm on October 11, 2012 Permalink
Yup, I like it. Good call on the text wrap indenting and line-height. I’m still not 100% sold on having the lines there though. Not convinced they add much (except more overall height).
Mel Choyce 8:21 pm on October 11, 2012 Permalink
I think the lines make everything look a bit cleaner, in addition to making the sections easier to scan.
Helen Hou-Sandi 4:26 pm on October 12, 2012 Permalink
I dislike the lines once they don’t match up, and <a href="http://make.wordpress.org/ui/2012/10/11/we-need-your-help-deciding-what-to-do/#comment-22475"a later proposal here forcing them to line up just looks weird with the random spacing. Probably best without them, as nice as they are on their own merits.
Mel Choyce 8:19 pm on October 11, 2012 Permalink
Nice one Isaac, this looks like the right direction.
Empireoflight 8:21 pm on October 11, 2012 Permalink
What about making the links bold and not underlines, exactly how they are in the admin sidebar?
lessbloat 8:25 pm on October 11, 2012 Permalink
I think we’d lose the visual hierarchy of the headers above them (i.e.
Get Started, Next Steps, More Actions)
Drew Strojny 11:40 pm on October 11, 2012 Permalink
I know this discussion has been mostly about the icons, and I’m a fan of the icons and the latest mockup from Isaac.
I wanted to bring up the copy and placement of the “Learn more about getting started” link. I think this could be made more clear. We’re already saying “We’ve assembled some links to get you started:”. How about changing it to something more direct like “Learn more about using WordPress”?
I’d also vote for moving that item to the bottom of the Next Steps list. It’s not really an *action* like the other items are. You could then add another item to the More Actions list or break Widgets and Menus into separate items.
lessbloat 3:16 pm on October 12, 2012 Permalink
RE: header – I like this idea in theory, but when you try it you have “Welcome to WordPress!”, followed by “Learn more about using WordPress”. The double use of “WordPress” just throws me.
RE: More actions order – yep, good call. What if we did 1) widgets/menus 2) comments 3) learn more.
Drew Strojny 8:24 pm on October 12, 2012 Permalink
RE: Header — I can see that. Good point. I guess I’m thinking the same thing about using the “Getting started” terminology twice. Maybe we could say just “Learn more” ?
RE: Actions list. I definitely agree it should be on the bottom. But, I was thinking it should be in the other list (Next Step). If you think about it, the other items (comments on/off, widgets, menus) are very actionable (eg. you’re changing something) whereas “Learning more” is more like a Next Step.
Archetyped 12:25 am on October 12, 2012 Permalink
Definitely move forward with icons, and it should match the rest of WP’s icons. Flat icons may be ideal in the long run, especially for smaller icons in WP’s UI.
Also, I would vote in favor of no lines, just padding for separating the list options. The lines add too much noise and when they don’t line up horizontally (between the 2 columns), it makes things seem less organized.
F J Kaiser 2:29 am on October 12, 2012 Permalink
+1 for icons and lines (or just go with a list and nice dots)
When I think about translations and line-wraps, then I see the problem people have with non aligning horizontal rulers. This can be fixed easily with some changed MarkUp:
If the MarkUp gets eaten, here’s a link to a gist: https://gist.github.com/3876998
This way, we could easily have aligned rulers and text could be vertically aligned its container.
jcastaneda 6:15 am on October 12, 2012 Permalink
While I like B, I have to say go with A. My reasoning behind this is because it unifies the entire page. As far as the lines go I would say make them subtle or closer to the background color. The lines divides the steps but it may give a new user that feeling of separation we may not want.
Till 2:24 am on October 15, 2012 Permalink
My mind grasps B much faster A.
jwmcgregor 10:02 pm on October 23, 2012 Permalink
I like option B, bearing in mind any new icon development should be consistent across the entire application.