Profile Page Improvements

[amilica]

Hey there! I’m here to discuss some improvements that we could do to the profile page of any user to:

• make it more easily scannable (experience)
• make it look more cohesive with the Global Admin Improvements (cohesion)
• make it look cleaner, more modern (aesthetics)

Current look

Profile page (home)

Preferences page

Mobile look

Identified issues

Some definitions first:

• Sections: Profile, Preferences, Groups, Network…
• Sub-sections: Display Preferences, Accessibility Preferences,…

#1 The navigation side bar of the profile page isn’t like any other menus in XS, AFAIK.

#2 In the navigation side bar, the currently selected section isn’t very clearly distinguishable from the non-selected ones.

#3 On mobile, the navigation bar isn’t optimized.

#4 The Create button is confusing in its meaning as it creates a subpage of the wiki homepage, not of the profile page.

#5 The profile picture ocuppies a significant space both on mobile and on desktop.

#6 The edit profile picture icon isn’t mapped out to FA icon set theme. ( version of my wiki is 16.4.6)

#7 Each section’s content has multiple subsections, but they are placed in one or too few big rectangles, visually grouping them as one and not allowing the eye to scan each sub-section on its own. I will offer visual examples below.

#8 Currently, each sub-section of a section has its own edit button, similar to the Edit Page button, but made icon-only. AFAIK, this style of button isn’t used anywhere else in XS. Please correct me if I’m wrong, I just couldn’t find it. Moreover, even if each subsection has its own icon, when clicked, it doesn’t enable block editing as expected, but it moves into Edit Page mode.

Global Improvements

#1 We make the navigation side bar in the same style as in the Global Admin proposal

#2 We seperate each sub-section in its own rectangle, with the title of the sub-section outside of the rectangle, to allow for better scanning of the contents.

#3 We make use of the activity stream revamp made my @tkrieck in his Notifications Revamp.

#4 We take out the Create button at the top of the page as it doesn’t conform to the user’s expectations (it doesn’t do what they expect)

#5 We take out the sub-section edit buttons, leaving only the page’s Edit button at the top to allow for entering the page. I have some reservations about this, as I don’t think the edit button is very very visible (the content of the profile page overpowers him visually), but I’d like to know your opinions

#6 We make the profile picture round. I know this needs to be proposed as a global proposal, but I though I’d include here as well.

Preferences Page

The Preferences Page is the UI that shows best the difference in splittting or merging sub-sections.

Here is the revamp of the page following improvement #2 :

Spcific improvements to the preferences page:

#7 We wrap the sub-sections one after another, respecting the Z pattern of scanning webpages.

#8 We take out the word “Preferences” at the end of each sub-section’s name.

Mobile Immprovements

#9 We wrap the navigation sections on 2 columns to make use of the horizontal space we got, while not taking as much from the vertical (that’s the most important on mobile).

#10 We make the profile picture smaller and the name of the user follows it on the same line

On mobile, I believe improvement number #5 shouldn’t be taken into consideration, as it is much more inconvenient for the user to scroll upwards just to tap the Edit button.

#11 In this case, if we keep the sub-section edit buttons for mobile, we can adopt the block editing button which would translate in this:

Going further

I thought multiple times through my time in XWiki SAS that it would be great to have a personal small page/wiki for each user.

• Somewhere to take notes at meetings just for myself but still in the organiztaion wiki (to be able to add links easily and stuff),
• somewhere to easily have a script that lists tasks related to me,
• somewhere to have my last 10 created pages
• and so on.

I believe it would be interesting to have the profile page have an editable wiki syntax field.

It can either be:

• part of an existing section (we would rename that section to better fit both usecases)
• or create another tab in the navigation bar just for it (Notes)

What do you think about all of this?

[surli]

Hi Adina,

thanks for the proposal here.

@amilica

#1 We make the navigation side bar in the same style as in the Global Admin proposal

Why not going for an entirely different solution with using tabs instead of having a menu that takes a lot of space on the left?

[mleduc]

@amilica

#1 We make the navigation side bar in the same style as in the Global Admin proposal

+1 to align with the admin sidebar. Though the usecase are slightly different since there is no sub-sections in the user profile.

@amilica

#2 We seperate each sub-section in its own rectangle, with the title of the sub-section outside of the rectangle, to allow for better scanning of the contents.

Looks good. The main cons I can see it that the lack of global group makes it more difficult to point out that the edit button is for the whole content.

@amilica

#4 We take out the Create button at the top of the page as it doesn’t conform to the user’s expectations (it doesn’t do what they expect)

-0 as this is not standard and could contradict the personal notes use case you mention at the end.

@amilica

#5 We take out the sub-section edit buttons, leaving only the page’s Edit button at the top to allow for entering the page. I have some reservations about this, as I don’t think the edit button is very very visible (the content of the profile page overpowers him visually), but I’d like to know your opinions

-1, this is a big change compared to the current state and I feel like the edit button would be too far from what’s actually edit (e.g., clicking edit won’t allow users to edit the activity stream which is part of the page content).

@amilica

#6 We make the profile picture round. I know this needs to be proposed as a global proposal, but I though I’d include here as well.

Need to be checked again with the most recent version of the profile picture, where the small pencil button was replaced with at larger button.

@amilica

#7 We wrap the sub-sections one after another, respecting the Z pattern of scanning webpages.

+1 as long as it’s reactive (i.e., swap to a single column on smaller screens)

@amilica

#8 We take out the word “Preferences” at the end of each sub-section’s name.

+1

@amilica

#9 We wrap the navigation sections on 2 columns to make use of the horizontal space we got, while not taking as much from the vertical (that’s the most important on mobile).

Same question as Simon. Did you consider switching to tabs for all screen sizes, as it would save a lot of horizontal space?

@amilica

#10 We make the profile picture smaller and the name of the user follows it on the same line

°1

[mflorea]

@amilica

#2 We seperate each sub-section in its own rectangle, with the title of the sub-section outside of the rectangle, to allow for better scanning of the contents.

I would prefer the section title to be aligned with the section text.

@amilica

#4 We take out the Create button at the top of the page as it doesn’t conform to the user’s expectations (it doesn’t do what they expect)

I’m not convinced by this. The Create button is not used only to create child pages. Why would we prevent the user to create a blog post (in the blost post space) or a meeting note (in the meeting notes space) directly from the user profile page?

@amilica

#5 We take out the sub-section edit buttons, leaving only the page’s Edit button at the top to allow for entering the page. I have some reservations about this, as I don’t think the edit button is very very visible (the content of the profile page overpowers him visually), but I’d like to know your opinions

Would be nice to enable inplace editing for the user profile preferences instead, i.e. to be able to edit separately each preference, directly from view mode.

@amilica

#7 We wrap the sub-sections one after another, respecting the Z pattern of scanning webpages.

In your screenshot the sub-sections have, conveniently, the same height, more or less, but we don’t know / can’t have any expecation about this. So I’m not sure how this is supposed to work with sub-sections that have significant variation in their height.

The rest of the proposal looks good to me.

Thanks!
Marius

[tkrieck]

Hi Adina, thank you for the proposal. I liked it very much, and agree with most of it. One thing though: The “Name Lastname” beneath the profile picture can get very large, depending on the user’s name, pushing the menu downwards. Considering that the page name already states the full name, perhaps we could go on without it.

@amilica

I have some reservations about this, as I don’t think the edit button is very very visible (the content of the profile page overpowers him visually), but I’d like to know your opinions

I agree with you. Perhaps it could be styled as a primary button only on the profile page(I don’t know if it’s possible, though). My reasoning for it is that one of the bigger UC of this page is to edit personal information or preferences.

@amilica

On mobile, I believe improvement number #5 shouldn’t be taken into consideration, as it is much more inconvenient for the user to scroll upwards just to tap the Edit button.

Another way of solving would be by making the edit button stay put in the interface when scrolling (sticky). This, however, has a much bigger impact on the whole UI (not just this page).

@amilica

I believe it would be interesting to have the profile page have an editable wiki syntax field.

It can either be:

• part of an existing section (we would rename that section to better fit both usecases)
• or create another tab in the navigation bar just for it (Notes)

This is interesting, but probably should be available everywhere, like a floating panel for example. Otherwise, I need to visit my own profile every time to take notes.

---

@surli

Why not going for an entirely different solution with using tabs instead of having a menu that takes a lot of space on the left?

@mleduc

Same question as Simon. Did you consider switching to tabs for all screen sizes, as it would save a lot of horizontal space?

Currently, tabs styles are very weird on XWiki on mobile. I am all for improving them, though.

@mleduc

-0 as this is not standard and could contradict the personal notes use case you mention at the end.

If we go forward with personal stuff at the end, I agree that the create button could be brought back, as it would have a clear function. But today I think that’s not the case.

@mflorea

I’m not convinced by this. The Create button is not used only to create child pages. Why would we prevent the user to create a blog post (in the blost post space) or a meeting note (in the meeting notes space) directly from the user profile page?

Creating pages is the default though, and it tries to create these pages under the “XWiki” page, which throws an error when the user tries to save, because of a lack of Rights.

Context matters a lot in this case. It’s a similar situation when visiting the User listing on the drawer. Even as an administrator, I can list the users but not create new ones there, even though there’s a Create button available on the page.

I fully understand the global characteristic of the Create button, but the positioning can create some confusion. These buttons are also missing on the Global Admin pages, so I guess there’s a precedent for it.

Thanks @amilica again for the proposal!

[vmassol]

@amilica

Going further

I thought multiple times through my time in XWiki SAS that it would be great to have a personal small page/wiki for each user.

• Somewhere to take notes at meetings just for myself but still in the organiztaion wiki (to be able to add links easily and stuff),
• somewhere to easily have a script that lists tasks related to me,
• somewhere to have my last 10 created pages
• and so on.

I believe it would be interesting to have the profile page have an editable wiki syntax field.

It can either be:

• part of an existing section (we would rename that section to better fit both usecases)
• or create another tab in the navigation bar just for it (Notes)

See also Personal Pages feature

Thx