Profile wireframes – take two
I’m going to create a thread per section to collect wireframes and focus discussion in this next phase of refinement. Props to @r-a-y for suggestion.
I’m going to link each set of wireframes we have then please add any wireframes you have and any thoughts you have on the wireframes. Feel free to ‘run with’ people’s ideas too – sometimes a picture can say many words
Current focus wireframe based on the consensus from dev chat:
Other wireframe mock ups done in past for profiles:
I am recreating the profile thread here so hopefully we can focus back onto the wireframes.
I’ve had a look at some options bringing in notifications to the profile as was suggested by @djpaul. I have also added a custom header option to really provide personalisation for users. Avatars are good but they don’t ‘make a home’ so much as having that extra level of personality.
The menu area is longer to show more than anything what a longer navigation would fit – not look this isn’t about design.
And here’s a slight variation:
Top mock with avatar over a larger picture is too much a Facebook thing. Might raise eyebrows
@modemlooper : It’s not over in Facebook it’s half over the profile and the main area. Same could be levied against the first mockup where it’s at the side being like Facebook single profiles. I think it’s worth exploring having an option of a custom image header.
Depends… we can give the area option there and people can move it around – way I see it would be this lays down the possibility for those who may not be able to code custom headers per users / groups. Of course, that may be a functionality too far for 1.7.
I can easily create a plugin or doc it for theme developers to add the functionality. I just don’t feel a profile header image should be included. It should be bare bones OOTB
Also, really like Paul’s notification idea. Putting the notifications up front helps virility of site usage.
Here are two mockups I did last night. My main consideration was width.
I used the upcoming Twenty Twelve theme’s content width of 625px as a guideline.
Twenty Twelve mockup – https://i.imgur.com/Xsh58.png
Action bar – This is the area directly underneath the avatar. On the left-hand side, you’ll see the current status you have with the displayed user.
Action menu – This is the little wrench icon in the action bar. When you click on this button, you’ll get some action links like “Send private message”, “Mention this user”, “Cancel Friendship / Request friendship” (depending on your status with the member). If plugins are already hooking into BP’s profile member header to add buttons, the goal is to make this backwards-compatible.
Vertical nav – People seem to dig the vertical nav, so that’s in this mockup as well. The goal is to also make this toggleable with a simple hook like `add_filter( ‘bp_new_theme_enable_vertical_nav’, ‘__return_false’ );` so theme devs can disable the vertical nav in width-restricted layouts.
Secondary horizontal nav – I opted to keep the secondary horizontal nav as it’s still quite UI-friendly, but that’s just my opinion. In the mockup, I’ve removed certain activity subnav items that I deemed unnecessary like Mentions, Friends, and Groups. I left Personal and Favorites.
Tweaked activity loop – Currently, in bp-default, we use one line to output the username, the action and timestamp. This can be confusing. I’ve opted to separate these elements into three sections. I believe this is a little easier on the eyes.
Twenty Twelve mockup – https://i.imgur.com/hpYWX.png
This is a slightly different take on mockup 1.
* The primary nav is again horizontal and is aligned to the right. This is inspired by last.fm’s profile layouts. Removing the vertical nav gives us more content width for the main body.
* The main avatar is aligned right.
Looking forward to hearing your feedback!
Really liking the right aligned avatar and primary navigation. That would simplify fitting into smaller widths by not having two columns in the body area.
Regarding Mockup 2:
I’m okay with the primary navigation laid out horizontally as long as the user intuitively knows that there are submenus buried there (same with vertical). I do not know how “More” would work. @r-a-y, could you explain?
With the utmost respect @johnjamesjacoby, I’m not okay with the avatar on the right for a few reasons: first, that location is not typical (the US driver’s license, US and Trinidadian passport have the picture on the left… probably other documents as well…not saying this is best, but it is what I suspect most people have become accustomed to); second, with it laid out this way, the person’s name takes precedence (for those that read left to right) and that would be okay if the person’s picture/avatar weren’t on the same page/view; and third, assuming that the main menu is right justified as well, then when the submenus are accessed, they would lay over the image/avatar (no bueno). Just an opinion.
One last comment on the main menu location: it’s too far from the “action”. It requires the gaze traverse the height of the “header” continually after a menu item has been selected to then access it again. The same applies to distance between main menu and the filter. And it forces me to process the header every time I want to use the menu… because it’s between the content and the tool I need to process the content. Of course, this could all be due to my idiosyncrasies.
Yeah, I don’t like righted avi. Plus we really need vertical navigation.
I live the first pictures layout, quick question is this in development by bp or you guys thinking of making a plugin for it?
I think there are too much avatars !
H nav or V nav is one thing. Having a big avatar on the left or on the right is another thing, and imho, not the place at all. It would be better to see the big picture when going on “view complete profile”.
An icon near the name is enough.
Especially as we already have a middle sized avatar near “john doe said”
And on the same column, a small avatar aside “john doe joined group”
I would prefer to have something like an action priority for using or not avatars.
Actions with avatars (registering, complete profile page)
Actions with middle sized avatars: (X&Y are now friends, groups, members, blogs)
Actions without avatars (posting, messaging, especially on swa)
@chouf1, what you’re describing would best be illustrated in a wireframe.
The “avatar” is an identifier… a visual trigger for that person or group’s “big picture”, in my opinion. This is why selecting or creating one is extremely important; that is, once a well-established and desirable reputation has been earned, the quickest recognition cue is the avatar, then the name. Of course, if one’s rep isn’t that stellar, then continually changing the avatar may work best.
In your wireframe, could you illustrate how to
better to see the big picture when going on “view complete profile”.
With reference to the variously-sized avatars, again that is meant as a quick visual cue to the reader of who said or presented what in what could be a very long list of activities and responses to those activities. Thus, r-a-y’s first and second mockup could have easily included a whole bunch of replies from many different members and groups, each indicated through a visual, discerning cue… the avatar. The next occurrence of Joe’s mugshot may not happen for another several feet further down the page.
I may have misinterpreted what you’ve said, so one or more wireframes would help me and perhaps, everyone else better “see” what you’re saying.
I have looked through a lot of the conversations and come up with a series of wireframes taking what people have submitted so far, running with some ideas and trying to cement others.
First up: adding notifications into the mix and is fuller width but with suggested format from this thread:
Next: The above format without notifications:
Next : A profile format that works on wider screens but takes ideas from mockups in this thread:
Last: A mobile version with an icon based menu as discussed in the developer chat:
If we can discuss these and look to creating a one profile format (maybe with mobile option) then we can make that part of the developer chat this Wednesday.
So, I just came across this while I was stumbling across the interwebs. More about the header than anything else.
That Facebook cap is my suggested profile mock layout. Thinner header. No need for all that text IMHO
I don’t mind the idea of moving the status up there but where would the content we output there now go?
I think that following the Golden Ratio (http://en.wikipedia.org/wiki/Golden_ratio) with regard to, at least the header and content size, is well-supported through centuries of use. Again, the header is meant to make that group stand out against all others. Linguistic will work for some people, while visual for the remainder. Technically, from a multiple intelligences standpoint, there’s more but this ain’t the place for that discussion.
Also, I still like your first mockup but would rather the notifications be it’s own menu item whose content could be filtered accordingly. She says, “Really? A notification was sent out three weeks ago? Let me check…” Sorry about missing the dev chat yesterday.
Only username and @user in a small space above content
It could be even thinner: drop username and @user and use just a QR code…
On the Profile page, what do the “Personal” and “Friends” links refer to?
If they are activity filters, I don’t really see the utility of having activity of friends on the profile page. Maybe there are some edge cases, but do you think it is a common-enough need to deserve such valuable real-estate?
If I go to A’s profile, I want to see A’s stuff not his friends’. There Friends tab is “noise” and a UI complication as far as I am concerned. In Facebook or Twitter or G+, do you see friends’ activity on A’s profile page, or even a link to it? No sir, you don’t.
Of course, if I am A, and I am logged in, then I want to see the activity of friends, and people I am following etc, but my profile page is not the page for that. Rather, it could be the landing page upon login, just like in the case of Facebook.
Actually you DO see your friends activity on both facebook and Twitter, its called the news feed on Facebook and on twitter.com its called tweets.
The only difference is BP has a site wide activity instead of you and your friends in one stream. It’s split up.
- The topic ‘Profile wireframes – take two’ is closed to new replies.