Making WordPress.org

Opened 10 years ago

Closed 9 years ago

Last modified 9 years ago

#421 closed enhancement (fixed)

Minor design changes for profiles

Reported by: cr3ativ's profile Cr3ativ Owned by: iandunn's profile iandunn
Milestone: Priority: normal
Component: Profiles Keywords:
Cc:

Description

Just a suggestion on better spacing and usability for the new profiles on WordPress.org -

Removed the shadow on the image and rounded corners to match buttons etc throughout the WP.org site
Better spacing on username
On hover of the avatar there is a graphical representation of what will happen
Better line spacing on information
Removal of spacing on 'dead' icons

Attachments (2)

user_profile_layout.png (91.8 KB) - added by Cr3ativ 10 years ago.
Suggested enhancements to spacing etc on new profile pages
after-examples.zip (8.0 MB) - added by melchoyce 10 years ago.

Change History (29)

@Cr3ativ
10 years ago

Suggested enhancements to spacing etc on new profile pages

#1 @samuelsidler
10 years ago

  • Summary changed from New Profile Layout to Minor design changes for profiles

#2 @jenmylo
10 years ago

Hi @Cr3ativ. The design is not completed yet, and the new profiles have not been announced as complete. We started with what you see so that we can test it more easily as we finish the design. What you see now is not the finished design. If you're interested in the profiles project, design decisions are made in the community team at http://make.wordpress.org/community, and we focus on contributor recognition and site projects during our team IRC chat the 4h Thursday of each month.

#3 @Otto42
10 years ago

  • Resolution set to invalid
  • Status changed from new to closed

This is too soon for meta.trac, I believe, as design work is not complete yet. Take it to the make sites and IRC for further development. When the work is "done" and announced rather than soft launched, then we can argue about additional work here on meta.trac.

#4 @daveshine
10 years ago

I am confused that this ticket was closed already. I was part of the Twitter conversation and we encouraged user @Cr3ativ to report here on Meta Trac as we were telled it was the perfect place for that stuff.

@Cr3ativ registered on .org for the first time only to report this.

I feel the same, that the design is not quite good yet and should be tweaked. So I'll also open tickets here. WordPress.org is a very big and popular site and I personally consider these "fixes" mostly CSS so it shouldn't be that complicated. My wish is that WordPress.org leaves no bad image on new users to the WordPress platform so we should work to make the site better, especially regarding the responsiveness and those profiles among other things.

#5 follow-up: @Otto42
10 years ago

@daveshine: When the design is done and the feature is announced, then it will be appropriate to create tickets for it here. As Jen stated earlier, this is still a feature-in-progress, and if you wish to assist with the design or to offer feedback, then there is active discussion of it on both make/community and in the IRC channels.

The meta.trac is not really an appropriate place to make tickets for pieces of the system that are known to be unfinished and in active development. You're welcome to report bugs and feature requests, but if they're on works-in-progress, then we'll likely close them and refer you to the group that is working-on-it right now instead.

#6 in reply to: ↑ 5 ; follow-up: @samuelsidler
10 years ago

Replying to jenmylo:

Hi @Cr3ativ. The design is not completed yet, and the new profiles have not been announced as complete. We started with what you see so that we can test it more easily as we finish the design. What you see now is not the finished design. If you're interested in the profiles project, design decisions are made in the community team at http://make.wordpress.org/community, and we focus on contributor recognition and site projects during our team IRC chat the 4h Thursday of each month.

Replying to Otto42:

@daveshine: When the design is done and the feature is announced, then it will be appropriate to create tickets for it here. As Jen stated earlier, this is still a feature-in-progress, and if you wish to assist with the design or to offer feedback, then there is active discussion of it on both make/community and in the IRC channels.

The meta.trac is not really an appropriate place to make tickets for pieces of the system that are known to be unfinished and in active development. You're welcome to report bugs and feature requests, but if they're on works-in-progress, then we'll likely close them and refer you to the group that is working-on-it right now instead.

I disagree with both of these comments. I won't reopen because I'm sure this will get closed again, but in general we use meta.trac for a ton of in-development features. For example, devhub is using meta.trac to track both bugs in the current development code and future features. If a site is public, meta.trac is the place to file issues.

In the case of the new profiles (and unlike devhub), the feature is live. Even if it hasn't been "announced as complete" it's live for users and very visible. If bugs are found, why not encourage users to file issues? Unless there's a list of what's complete and what's not for people to peruse prior to filing tickets, I don't see any reason not to file tickets here. Furthermore, a statement like "design decisions are made in the community team at http://make.wordpress.org/community" is bearing on false. The last discussion about the design of Profiles took place on February 26 and is completely different than the design that has launched. Where should feedback have been given when this ticket was filed?

Likewise, where should a user report issues they find in their testing? This comment says: "We started with what you see so that we can test it more easily as we finish the design." Where? How? When?

We should be encouraging involvement from all directions, not shutting it down because a feature hasn't been "announced as complete."

#7 in reply to: ↑ 6 @iandunn
10 years ago

Replying to samuelsidler:

We should be encouraging involvement from all directions, not shutting it down because a feature hasn't been "announced as complete."

+1. I don't see any harm in letting people open tickets. Many of them will be for things we're already aware of and just haven't had time to fix yet, but in that case it's easy to leave a comment to that effect, and then close the ticket when a fix is committed.

It's also likely that we'll get feedback on legitimate bugs -- like #420 -- or on things that we didn't anticipate, which could help influence decisions.

Ultimately, I think that telling users we're not open to feedback sends the wrong message, especially when they can't be expected to know that a live feature hasn't been announced yet. It may be a bit more noise for us to sift through, but it's a much friendly experience for potential contributors.

#8 follow-up: @Otto42
10 years ago

  • Resolution invalid deleted
  • Status changed from closed to reopened

@iandunn If you want to take ownership of those tickets and make sure that they get done and closed properly and such, feel free.

But I disagree with both of you. I don't see trac, of any stripe, as an appropriate place to send users with design ideas and feature requests for systems that are still being actively developed. This isn't "shutting them down", but rather pointing them to places where the discussion is actively occurring and development is actively happening.

You're working on profiles too, presumably. When and where are the design discussions happening? How can people get involved in that? Just having somebody post a one-off request or observation here, where the people actually working on the project will likely never see it, is kind of a waste of time. If you want people to participate, then tell them where to go. Using meta.trac as a catch-all for things that people will ultimately ignore benefits nobody.

#9 @Otto42
10 years ago

  • Owner set to iandunn
  • Status changed from reopened to assigned

#10 @jenmylo
10 years ago

The sketch wasn't the last time it was discussed, we did a video screenshare during the community team chat of the development version that looks exactly like what Ian launched, and is based on the sketch (missing the stats segment bc it's non-trivial and needs to be built). The team meetings that are listed in the sidebar are when we officially discuss the project no matter what.

We shouldn't have launched it as we did, period. We should have waited until after Mel was able to do the CSS run-through and we were able to build in more of the planned stuff. We were trying to go with the launch early and iterate idea, but it has clearly not worked well.

#11 in reply to: ↑ 8 @iandunn
10 years ago

Replying to Otto42:

You're working on profiles too, presumably. When and where are the design discussions happening? How can people get involved in that?

Much of the code for Profiles hasn't been open-sourced yet, so most of the work has been done in private by Jen, Mel, Scott and myself. Without access to a wporg sandbox or the code, there isn't much a dev could contribute. There have been several posts on the Community blog, and Community team chats, to give people chances to provide feedback on the design and features, though.

And now that v1 is launched, there are certain aspects (like the CSS and the notification/handler plugins) that are accessible to anyone. So, if anyone wants to get more involved, they should come to the Community team chats.

Just having somebody post a one-off request or observation here, where the people actually working on the project will likely never see it, is kind of a waste of time. If you want people to participate, then tell them where to go. Using meta.trac as a catch-all for things that people will ultimately ignore benefits nobody.

I think it's perfectly fine to direct people to the Community team chats if they want to get more involved, but I don't think we should close the tickets or discourage people from filing them. I subscribe to the mailing list, so I see all the tickets that come in, and I pay close attention to anything in the Profiles and WordCamp components. A lot of reports are a low priority -- or, at least, a lower priority than the dozen high-priority projects on my list at any given point -- so they realistically won't go anywhere without a patch from the community, but nothing is ignored.

Worst case scenario is that somebody reports something that's already on our list, so I just close the ticket when we complete it. No harm done. In other cases the report could be useful feedback or a legitimate bug.

I definitely see where you're coming from, but I think reporters will get the wrong impression if we just close their tickets. Regardless of your intentions or what the "right" way to report things would have been, it can feel dismissive, which makes people less likely to get involved.

#12 follow-up: @iandunn
10 years ago

@Cr3ativ, to respond to your specific issues:

Removed the shadow on the image and rounded corners to match buttons etc throughout the WP.org site

That was intentionally added, but free free to discuss it at the Community chat if you feel it'd be better without it.

Better spacing on username

This can be taken into consideration for the next round of changes. cc @melchoyce.

On hover of the avatar there is a graphical representation of what will happen

The avatar link just goes to the profile that's already being viewed, so it's kind of pointless. I think the link should just be removed instead.

Better line spacing on information

Something similar to this is already on the list of upcoming changes.

Removal of spacing on 'dead' icons

That was already fixed soon after the launch, but the results were cached for 24 hours. None of the profiles have it now.

#13 in reply to: ↑ 12 ; follow-up: @Cr3ativ
10 years ago

Replying to iandunn:

@Cr3ativ, to respond to your specific issues:

Removed the shadow on the image and rounded corners to match buttons etc throughout the WP.org site

That was intentionally added, but free free to discuss it at the Community chat if you feel it'd be better without it.

Better spacing on username

This can be taken into consideration for the next round of changes. cc @melchoyce.

On hover of the avatar there is a graphical representation of what will happen

The avatar link just goes to the profile that's already being viewed, so it's kind of pointless. I think the link should just be removed instead.

Better line spacing on information

Something similar to this is already on the list of upcoming changes.

Removal of spacing on 'dead' icons

That was already fixed soon after the launch, but the results were cached for 24 hours. None of the profiles have it now.

Greetings and thanks for the replies everyone.

I've watched the conversation happening above and would like to constructively give a little feedback.

I think the above clearly shows how unusable the current model of gaining feedback really is when not everyone can agree where, what and how things should be organized with regard to community 'feedback'.

I do appreciate and have understood the conversation going on, I've kept out of it as there are simply too many different views on the subject, but again, I'll stress, this proves to me that things aren't as welcoming, or usable, as they could and should be for users simply wanting to attempt to join the community. It certainly made me feel like I wasn't welcome, was stupid to open a ticket here, and then the door being closed.

I'm not offended now as I see it's a matter of personal opinion from the comments.

Moving on.

I would like to reply to the latest response from iandunn - not sure why the image has drop shadow etc added intentionally as I don't see this common place throughout the current UI system. I may be missing something and that is why I offered the alternative view to help keep things more consistent. If you decided it should be that way then I presume you have a reason and that's fair enough.

I'm confused over the image hover, when it first went live and I clicked Otto's image it opened the image at full size, it didn't just link - hence my alternative offered which obviously now doesn't make sense. Was that an issue I saw or has it since been altered after the ticket was opened perhaps? Anyways, I couldn't agree more, right now if you click it's a loop. Pointless and should be removed.

Cool on the icons.

Excellent news on spacing.

Thanks for taking in to consideration the better spacing on the username and content below.

Again, please don't take anything I have said in the wrong way. I'm not new to WordPress but have been shy to dip my toe in to the community and development aspect simply because it's too confusing and spread out. Maybe this is something that could be taken in to consideration by whoever when it comes to reviewing site flow, community participation as I'm sure it could be far easier, centralized and more welcoming.

I appreciate everyones responses and hard work.

Jonathan

#14 in reply to: ↑ 13 @iandunn
10 years ago

Replying to Cr3ativ:

I'm confused over the image hover, when it first went live and I clicked Otto's image it opened the image at full size, it didn't just link - hence my alternative offered which obviously now doesn't make sense. Was that an issue I saw or has it since been altered after the ticket was opened perhaps? Anyways, I couldn't agree more, right now if you click it's a loop. Pointless and should be removed.

Yeah, not sure what happened there either. I reviewed the changeset and I don't see any difference in the link between the current version and what it was previously.

Again, please don't take anything I have said in the wrong way. I'm not new to WordPress but have been shy to dip my toe in to the community and development aspect simply because it's too confusing and spread out. Maybe this is something that could be taken in to consideration by whoever when it comes to reviewing site flow, community participation as I'm sure it could be far easier, centralized and more welcoming.

Thanks for sharing your experience; it's always helpful to hear feedback from people who are making their first inroads into the community. A couple things that I want to try to help new contributors are:

  • Make a Vagrant config for WordCamp.org that people can check out, so that they can easily have a development environment that's automatically configured for contributing to WordCamp.org. If this proves useful, we could expand it to include Profiles, make.wordpress.org, etc.
  • Start doing contributor days through my local meetup in Seattle to introduce people to the Meta team and help them contribute their first patch. Otto did this at WCSF last year and it was very helpful for me personally. Obviously this only helps devs in Seattle, but hopefully others can do the same thing in their city.

Feel free to ping me in #wordpress-meta any time if you have any questions or need help with anything.

#15 follow-up: @melchoyce
10 years ago

Finally had a chance to look this over, and I agree with @Cr3ativ's feedback:

  • Definitely yes to removing the drop-shadow around the image. I wasn't able to attend the meeting where this was discussed, but I think it's distracting, doesn't really fit in with the clean aesthetic we're going for, and actually makes the image feel blurry.
  • I don't have a strong opinion on round or square corners yet, so I'll play around and see how it feels live.
  • Definitely going to play with spacing. I'm also going to play around with colors and typography so the page has stronger hierarchy.

Thanks for the feedback. I definitely appreciate having more designers pitch in. Since we pretty much went straight from wireframes to code, it was totally on me that this launched under-designed. I should have provided Ian & co with a polished mockup.

I'm going to work on some css updates this weekend, which I'll post in this ticket. I also don't have a sandbox, so I'm just going to inundate you all with css snippets. Sorry, Ian. :)

#16 in reply to: ↑ 15 @iandunn
10 years ago

Replying to melchoyce:

I'm going to work on some css updates this weekend, which I'll post in this ticket. I also don't have a sandbox, so I'm just going to inundate you all with css snippets. Sorry, Ian. :)

hehe, no worries :)

#17 follow-ups: @melchoyce
10 years ago

Here are a preview of my style changes for v1: https://cloudup.com/cJcP6K0Ueqc. I've also attached them as a zip to the ticket: after-examples.zip

I'd still like to clean up the icons in activity, and the icons for favorite plugin ratings, but we'll need to update the html structure for those. I got halfway through hacking it into working before realizing that hacking it was a dumb solution, and we should just restructure it to work with dashicons in the first place.

The "Find me on: [social media]" is inserted via css, which means it's untranslatable, which is bad. That'll need to be changed in the template as well.

CSS here:

#meta-status-badge-container {
	margin-top: 15px; 
}

#header-meta-links {
	margin-left: 25px; 
}

div#item-header ul {
	margin-bottom: 0; 
}

div#item-header img.avatar {
	margin-bottom: 0;
	box-shadow: none; 
}

#user-meta li {
	margin-bottom: 5px;
}

#user-social-media-accounts:before {
	margin-right: 10px;
	content: 'Find me on:';
	font-weight: bold;
}

#user-social-media-accounts li {
	float: none;
	display: inline-block;
	margin-top: 20px;
}

#user-meta .dashicons,
#user-meta .genericon {
	color: #888;
}

#user-social-media-accounts li a .dashicons,
#user-social-media-accounts li a .genericon {
	color: #21759B; 
}

#user-social-media-accounts li a .dashicons:visited,
#user-social-media-accounts li a .genericons:visited {
	color: #4CA6CF;
}

#item-body {
	margin-top: 20px;
	border: none; 
}

#content-tabs {
	padding-top: 0; 
}

#content-tabs ul li {
	padding: 10px 10px 10px 10px; 
}

#content-tabs ul li.active {
	right: -1px;
	padding-right: 11px;
	border: 1px solid #EEE;
	border-right-color: #FFF;
}

#content-tabs ul li.active div.dashicons-arrow-left {
	display: none;
}

#main-column {
	min-height: 133px;
	background-color: transparent;
	border: 1px solid #eee;
}

#content-about h4 {
	font-size: 16px !important;
	margin: 0 0 7px 0 !important;
}

#content-about h4 + div {
	margin-bottom: 25px;
}

#content-about h4 + div:last-of-type {
	margin-bottom: 0;
}

#content-about p:last-of-type {
	margin-bottom: 0;
}

ul#activity-list li {
	font-size: 14px;
	line-height: 1.4;
	font-weight: normal;
}

ul#activity-list li span {
	font-weight: bold;
}

.main-plugins ul li {
	width: 200px;  
}

.main-themes ul li {
	width: 360px;
}

#content-themes ul li h3 a img {
	width: 360px;
	height: auto;
	margin-bottom: 5px;
}

#content-themes ul li:nth-of-type(2n) {
	padding-right: 0; 
}

p.user-rating,
p.downloads,
p.ago {
	color: #888;
	font-size: 13px;
	font-style: italic;
	text-transform: lowercase;
}

#18 in reply to: ↑ 17 ; follow-up: @Cr3ativ
10 years ago

Replying to melchoyce:

Here are a preview of my style changes for v1: https://cloudup.com/cJcP6K0Ueqc. I've also attached them as a zip to the ticket: after-examples.zip

I'd still like to clean up the icons in activity, and the icons for favorite plugin ratings, but we'll need to update the html structure for those. I got halfway through hacking it into working before realizing that hacking it was a dumb solution, and we should just restructure it to work with dashicons in the first place.

The "Find me on: [social media]" is inserted via css, which means it's untranslatable, which is bad. That'll need to be changed in the template as well.

CSS here:

@melchoyce - Great job! I believe these changes are a massive step in the right direction and I wanted to thank you for your hard work on this.

I hope everyone else agrees that things seem more usable, clear and precise now.

If I had to mention one thing it would be the top padding of the content text on the right aligning with the text on the tab on the left - we have a slight drop on the content. I believe it's just a small tweak to the padding of the right content area (or dropping of the tabs on the left) to get everything perfectly aligned, or it could be a line height issue with the headings being different classes, but then again, you may want to just ignore me being overly anal about things :)

https://dl.dropboxusercontent.com/u/3117718/Image%20Sharing/profiles2.png

https://dl.dropboxusercontent.com/u/3117718/Image%20Sharing/profiles1.png

Jonathan

#19 in reply to: ↑ 17 @iandunn
10 years ago

Replying to melchoyce:

Here are a preview of my style changes for v1: https://cloudup.com/cJcP6K0Ueqc. I've also attached them as a zip to the ticket: after-examples.zip

Those are done.

Let me know what markup changes you'd like and we can get that sorted too :)

#20 in reply to: ↑ 18 ; follow-up: @iandunn
10 years ago

Replying to Cr3ativ:

the top padding of the content text on the right aligning with the text on the tab on the left - we have a slight drop on the content.

#main-content {
    padding-top: 10px;
}

...would fix that. Sound good, @melchoyce?

#21 in reply to: ↑ 20 @melchoyce
10 years ago

Replying to iandunn:

Replying to Cr3ativ:

the top padding of the content text on the right aligning with the text on the tab on the left - we have a slight drop on the content.

#main-content {
    padding-top: 10px;
}

...would fix that. Sound good, @melchoyce?

I considered the alignment there, but it felt a little tight:

https://i.cloudup.com/gfIsrvGxs4.png

Looking at it again, the perfect alignment is pretty nice. I'm unsure if @jenmylo has an opinion, but if we do want to go with the matching alignment, #main-column should be:

#main-column {
	float: right;
	width: 747px;
	min-height: 137px;
	font-size: 1.4em;
	padding: 11px 20px 20px 20px;
	border: 1px solid #EEE;
}
Last edited 10 years ago by melchoyce (previous) (diff)

#22 follow-up: @melchoyce
10 years ago

Another option could be to instead increase the padding on #content-tabs ul li to 14px all around:

https://i.cloudup.com/D-QuDMAzc3.png

#23 in reply to: ↑ 22 @Cr3ativ
10 years ago

Replying to melchoyce:

Another option could be to instead increase the padding on #content-tabs ul li to 14px all around:

https://i.cloudup.com/D-QuDMAzc3.png

I think this may prove a better solution, as you want to keep that uniformed padding for the right content to be consistent no doubt.

Jonathan

#24 @melchoyce
9 years ago

Circling back around to this — I think the proposed css changes above can be added.

#25 @melchoyce
9 years ago

  • Keywords ui-feedback added

#26 @iandunn
9 years ago

  • Keywords ui-feedback removed
  • Resolution set to fixed
  • Status changed from assigned to closed

I added the new padding in [dotorg9979], and also added padding-left: 16px on #content-tabs ul li.active to make sure the first letters of the text in active and inactive tabs are vertically aligned. Before that the border on the active tab was pushing its text out of alignment.

The top padding on ul#activity-list li was pushing it out of alignment with the text in the tabs, so I removed that in [dotorg9981].

#27 @Cr3ativ
9 years ago

This is wonderful - thanks for everything you do and for listening!

Jonathan

Note: See TracTickets for help on using tickets.