Loomio

Sidebar - request for feedback :)

DU
[deactivated account] Public Seen by 449

Hi product enthusiasts! Hannah from Loomio here, with an update from Loomio HQ, and a request for feedback :)

Over the last couple of weeks we’ve been implementing a sidebar for Loomio navigation, based on the Material design spec. It is quite a significant UI change, and we wanted to run it by you before pressing play.

Our goal is to make the most common options more accessible, and simplify navigation.

  • The Recent and Unread options have been moved from the navbar into the top panel of the sidebar, which also has an option to see your Muted threads.
  • The Groups list has been moved to a panel in the sidebar.
  • The user options dropdown menu has been removed, and all of the options are now in the sidebar.

The sidebar is open by default on large screens, and collapsed by default on small screens like smartphones. It can be toggled via the bars icon in the navbar.

I’ve attached a few gifs showing the sidebar on both a large screen and a small screen.

I would love to hear your thoughts, feedback, and be alerted to anything we may have overlooked over the course of developing this feature.

Thanks very much!


DU

[deactivated account] Thu 30 Jun 2016

Looks great to me.

DU

[deactivated account] Thu 30 Jun 2016

Thanks James!

MB

Matthew Bartlett Thu 30 Jun 2016

I think it'll be a great improvement & help people get oriented people to what's available in the app.

One little thing — the gap above e.g. the Recent threads heading looks oddly large to me

S

Simon Thu 30 Jun 2016

Looks good to me.

DU

[deactivated account] Thu 30 Jun 2016

Thanks very much for your feedback Simon :)

LP

Louis Parisot Thu 30 Jun 2016

A title "Groups" at the top of the group list would be more meaningful.
Moreover, why is the group "Footloose" displayed several times?

A "search group" field could also be added to the top of the list. Either add a new search field or move the one from the navbar (which is not only for group search).

DU

[deactivated account] Thu 30 Jun 2016

Hi Louis, thanks very much for your feedback. Just to clarify, the name "Footloose" appears several times because in this test setup there are several groups called "Footloose". Apologies for the confusion.

JK

James Kiesel Thu 30 Jun 2016

<3! Here's some thoughts:

  • We really need something to indicate who you're logged in as, now that the user profile image is gone
  • I'm distracted by the loomio logo appearing very off-center (both desktop and mobile)
  • This could really use some page transitions; switching between groups in particular seems like a potentially confusing experience
  • The notifications icon looks small to me? Or maybe the navbar is just a bit bigger than before and could use a trim?
  • Did we lose the contact link? I think we want it to be rather prominent (in fact, I think it or maybe help could probably replace the user dropdown button)
  • I think we could use a slightly more prominent 'where am I' indicator than grey-on-grey; maybe there's a stronger color choice, or maybe a 'paint chip' thing (like we do with the existing recent, unread, groups pages)
CF

Cam Findlay Fri 1 Jul 2016

Generally this looks great and I'd offer the following points:
- I think the user profile and menu items for this could stay where it was (top right next to alerts).
- The side nav should be for getting around your different groups and catching up with activity rather than mixed with account details.
- Help should be 1 click away, in that case I'd be keen to see the top right space include ALERTS | HELP | + icons.

On the whole this looks great! Well done on the refactor :thumbsup:

AT

Aaron Thornton Fri 1 Jul 2016

Nice Hannah

I think the side bar is an improvement.
I agree as above the profile settings, email_settings and signout should all stay where they are. Behind an icon at top right of navbar.
The reasons for this are as follows:
- That is where I would expect them
- I don't use them very often
- They make the side bar look cluttered and heavy
- More room for groups/subgroups (especially on smaller screens)

One idea to help users locate the settings in this location (and keep the navbar minimal and flat) is to replace the current avatar with a setting type cog. The signed in user name will then be the header of the dropdown to satisfy @jameskiesel concern above.

10c

Aaron

NL

Natalia Lombardo Mon 4 Jul 2016

I reply to a lot of user support, and many times I have to guide people to find their user profile menu as they don't seem to be able to locate from where to change their user preferences.
So, I highly recommend having it on the sidebar for easier visibility/access.
Unless the user profile gets changed to the cog icon instead of the avatar as it was suggested and we can see if that makes a difference.

JK

James Kiesel Mon 4 Jul 2016

The point of having the profile picture in the top right is to let you know who you're logged in as (and that you're logged in at all). I'm also a fan of how having a blank user profile on screen all the time is a little reminder that you should probably put your face on this thing at some point.

I'm actually having trouble finding a comparable app which doesn't do this, save reddit / pivotal tracker (which doesn't ask for profile pictures), and my old nemesis Intercom (which puts it way down in the bottom left, gwarf.) Google's material mockups seem to favor having the profile information as part of the sidebar, which would be okay too I guess.

I'd like to strongly campaign for having some indication somewhere about who you are at the moment on Loomio, though. (I'd block on that.) Having a picture in the navbar (or the sidebar) is the easiest solution to that, although interesting would be something like showing a preview of any content you're about to create with your avatar next to it instead.

For now, I could live with having links in multiple places, or just having your picture link to the edit profile page.

DU

[deactivated account] Mon 4 Jul 2016

I like the idea of the face on the top right, but I agree with @natilombardo that in giving support, the clicking on the top right icon seems to cause some concern. So I like the idea of settings being on the left hand bar.

RDB

Richard D. Bartlett Tue 5 Jul 2016

Having two ways of getting to the same place strikes me as an incomplete design.

The Material spec shows the user avatar, name and email address in the navigation bar - so I'd like to see how that looks in Loomio land.

In practice though, Google is inconsistent. Their "Inbox" app is one of the most stringent adherents to the Material spec, but even that app puts the user avatar in the top right (in desktop). The avatar links to 'edit profile' and 'sign out', but 'settings' and 'help & feedback' are in the bottom of the sidebar.

One of the major reasons for this proposal was because of the large volume of support requests we're getting from people who haven't found the links to 'edit profile', 'email settings', 'contact us', and 'help'. So I'm keen for us to try a solution that involves doing something different than we currently are, to see if we can find something better.

I'd like to see a couple of mockups:

  • By the book: User avatar, name and email address in the top of the sidebar as per the navigation drawer spec, with an expansion panel concealing the 'edit profile', 'sign out', and possibly 'email settings' links
  • Blend: User avatar in the top right of the toolbar, with a Menu concealing the 'edit profile', 'sign out' and 'email settings' links. 'Help' and 'Contact' remain in the sidebar.
  • Minimum: leave the sidebar exactly as is, but on the 'edit profile' link, replace the 'cog' icon for the user avatar.

@hannahsalmon are you up for drawing those?

@natilombardo do you know which of the 'user options dropdown' links people are having the most trouble finding?

DU

[deactivated account] Tue 5 Jul 2016

Happy to have a play and draw up some options

DU

[deactivated account] Tue 5 Jul 2016

I must admit, I am a little concerned that this job is going to keep getting bigger and bigger.

DU

[deactivated account] Wed 6 Jul 2016

Here is a mockup of the first of the options Rich mentioned above as potential solutions to the avatar problem:

AT

Aaron Thornton Tue 5 Jul 2016

I don't use Loomio very often now, and never as a signed out user so I am not familiar with this use type. One question to ask if a user cant easily tell weather they are signed in or not is what on the signed in nav bar do they need if they are signed out? Because It seems like the nav bar could be tailored for their use case and look completely different so there is no question in any bodies mind.

RDB

Richard D. Bartlett Tue 5 Jul 2016

In the logged-out view the sidebar is gone, and the log in button is prominent in the navbar

AT

Aaron Thornton Tue 5 Jul 2016

How do you have notifications?

RDB

Richard D. Bartlett Tue 5 Jul 2016

Maybe it should, but I think that's out of scope for this job. I'd say that removing the search and notifications is in scope though.

AT

Aaron Thornton Tue 5 Jul 2016

Shouldn't the signed out nav bar look more like this(with nicer colours and a search)

AT

Aaron Thornton Tue 5 Jul 2016

Dont you need search?

RDB

Richard D. Bartlett Tue 5 Jul 2016

Yep it would be good, but right now logged-out search is not supported.

AT

Aaron Thornton Tue 5 Jul 2016

gotcha

AT

Aaron Thornton Tue 5 Jul 2016

That makes is a little smaller @hannahsalmon and without the notifications smaller and smaller :ant:

DU

[deactivated account] Tue 5 Jul 2016

Not sure if this is the right place but I would really like to see a symbol somewhere indicating that I have posts pending. Too often I compose a post and fail to hit Post. Later sometimes days later, I open the thread to discover that I have still got the post sitting in "draft" mode. My fault, but it would be good to be reminded.

DU

[deactivated account] Wed 6 Jul 2016

Thanks for your feedback, James! We'll feed it into our sprint process

DU

[deactivated account] Wed 6 Jul 2016

@matthewbartlett, before I do a few mockups, do you have thoughts as to how to address the profile conundrum? With your product owner hat on?

MB

Matthew Bartlett Wed 6 Jul 2016

First thoughts with my product owner hat on:
* optimise for people new to Loomio, and for tech-savvy team wranglers
* try not to go backwards
* think about mobile

I hope to get a more substantive response fed in tomorrow.

DU

[deactivated account] Wed 6 Jul 2016

Is there an option to mark as read for unread messages? (for all messages not just individual ones)

DU

[deactivated account] Wed 6 Jul 2016

Yep, there is. When you hover over an unread thread on the Unread thread page, then you should see two icons appear. The tick icon button allows you to mark as read, and the cross icon button allows you to mute:

DU

[deactivated account] Wed 6 Jul 2016

Here are the mockups for the other two suggestions.

I'm not sure that swapping out the 'cog' icon in the sidebar for the user avatar works - is it just too small?

RDB

Richard D. Bartlett Wed 6 Jul 2016

I agree the tiny avatar next to "Edit profile" is too subtle.

Personally I'd be happy with either of the two other options.

The big face in the sidebar makes the space feel more alive to me. We could also put a splash of Loomio colour in there, or the logo.

Having the avatar in the toolbar is cool too. My concern is how the toolbar gets cramped on mobile. Ideally I think we should remove the search input and replace it with just an icon which opens the search field when clicked, but that feels out of scope for this job. If we go with this option I think we should hide the logo or left-align it on mobile.

AI

Alanna Irving Wed 6 Jul 2016

@hannahsalmon I really like the "big face on the sidebar" version because it keep all the info in a certain category (settings/options/menus) in one place visually on the screen, and I think it would make it super obvious where to look for stuff. In that design, where do I go to find "profile" and "email settings"? If we could reveal those (maybe as buttons under the profile image?) and make them super obvious that could be great - I think some frustration users have about too much or too little notifications from Loomio comes from them not discovering the email settings options.

RDB

Richard D. Bartlett Wed 6 Jul 2016

In that design the profile and email settings are revealed by clicking the downwards pointing arrow next to the email address. In Material it's called an "expansion panel"

JK

James Kiesel Wed 6 Jul 2016

On desktop, the one with the avatar in the navbar looks best to me, while on mobile the big avatar in the sidebar works best. This could be easily accomplished with media queries, and gives a mobile app feel to mobile, and a web app feel to the web app. I think this is a good thing.

RDB

Richard D. Bartlett Wed 6 Jul 2016

I agree.

AT

Aaron Thornton Wed 6 Jul 2016

I like the face on the sidebar, perhaps placing the name and @handle to the right to balance the space there and leave more room under for groups etc.

RDB

Richard D. Bartlett Wed 6 Jul 2016

I'm guessing the spec puts the name under the photo because if they were on the same line you'd have an awkward balance where the name doesn't vertically line up with the list items beneath it.

I'm keen to stick as close to the spec as possible unless we have a great reason not to, as it helps maintain a consistent standard that people know how to contribute to.

AT

Aaron Thornton Wed 6 Jul 2016

Just a suggestion so ignore if you feel that way.
It seems to me everything below has an icon so text lining up doesn't sound right.
For the sake of 2mins of design time, it might be worth seeing both side by side before dismissing based on a spec?.

AI

Alanna Irving Wed 6 Jul 2016

Side benefit to having the user photo big in the bar there. If someone has not uploaded a photo we could replace it with an "add photo!" thing, which might increase people uploading profile pics.

DU

[deactivated account] Thu 7 Jul 2016

Hi folks, I've just built the first of the proposed solutions to he avatar dilemma:

RDB

Richard D. Bartlett Thu 7 Jul 2016

It's so great! that giant user avatar makes me want to upload a profile photo!

Minor detail, but how do you feel about shifting the "Explore public groups" out of the static bottom panel and into the scrolling Groups panel?

DU

[deactivated account] Thu 7 Jul 2016

I'm ok with that. I also thought about removing the left-right margins on the hover for each list item. What do you think?

RDB

Richard D. Bartlett Thu 7 Jul 2016

erm I wouldn't touch the margins unless there was a good reason to deviate from spec

DU

[deactivated account] Thu 7 Jul 2016

It seems to me we're actually mixing up quite a few different things from the spec here, and the spec seems a bit inconsistent with google's actual implementation. Would you mind showing me where in the spec that's specified? On the sidenav on the documentation landing page there aren't left-right margins when hovering over each item: https://material.angularjs.org/latest/

JK

James Kiesel Thu 7 Jul 2016

Moar feedback!

  • I'm in favor of removing the margins. They look very weird to me.
  • The profile image dominates on desktop, and has a big gob of empty space on the right. I've attached some explorations around that. I know google puts an image there, so maybe we could also consider allowing users to upload a cover photo? (Not for this iteration)
  • I'd suggest a little shadow off the right-hand side so it's not completely flat (similar to, but maybe less than, the shadow cast by the navbar). Material makes a big-ish deal of this. (maybe it's only desktop that it appears flat to me?)
  • It's not clear to me what clicking on the profile box is supposed to do, (and it's actually disorienting to me what it does; I had to toggle is 4/5 times before I figured out what it was actually doing)
  • I'm also not quite clear on what the caret in the bottom right means (is it expand? But clicking on it takes most of the stuff away... and it's a down caret all the time?)
  • I'm seeing subgroups I'm not a member of appear in the sidebar after visiting the parent group page for them (the Enspiral group is a culprit of this); I think we may need to tweak the logic to be 'groups I'm a member of' there, rather than 'groups I can see'
AT

Aaron Thornton Thu 7 Jul 2016

Would like to see a flat orange backdrop too. (as an option)

DU

[deactivated account] Thu 7 Jul 2016

@richardbartlett I'd be keen to hear your thoughts on @jameskiesel's suggestions about the user profile stuff. I'm not quite sure how to proceed

DU

[deactivated account] Thu 7 Jul 2016

And @matthewbartlett - keen to hear your thoughts too. @jameskiesel do you think a transition would help?

DU

[deactivated account] Thu 7 Jul 2016

It seems like its missing something. The background is too much though.

AT

Aaron Thornton Thu 7 Jul 2016

Hi Hannah here is a bit more from me. I hope i'm not overstepping my distance from the team. @jameskiesel respect! That is exactly as i was imagining. I was also imagining clicking on the user to behave more like an accordion. Dropping the hidden fields into the bar without removing any. Tbh as it is I feel disorientated when the user is clicked. One solution as James mentioned would be to change the caret (although I never really liked the up caret). Another solution and one that I know works is to use an accordian function. When the div is open hide the caret, when shut bring it back. On top of that, colour the new fields background slightly grey(on another color). This shows the user clearly whats new. (Analogous to an open draw being slightly darker when you look in). No disrespect meant here, great work. These are just suggestions to hone in on a great user experience.

MB

Matthew Bartlett Thu 7 Jul 2016

@hannahsalmon I suggest saving up lots of the feedback for future iterations. We don't need to get it perfect in the first release of this. Happy to pair today to help get clarity if that will help.

NL

Natalia Lombardo Fri 8 Jul 2016

I'm a bit concerned about "hiding" the user settings. I think that the option of having a cog symbol instead of the v could be a way around it for now, and let's see how well users find it or not for next iterations.

DU

[deactivated account] Wed 13 Jul 2016

Thanks so much for your input everyone! We have taken all feedback into account, and tried to incorporate as much as possible. With any luck the sidebar will be deployed by the end of the week, with an accompanying update to the community. We welcome subsequent feedback, bug reports etc, after the release :dizzy:

DU

[deactivated account] Fri 15 Jul 2016

Hi folks! The sidebar is now live! Please have a play :)

If you're interested, you can read more about the changes in our most recent blog post.

Thanks again for your input!

G

GasparI Tue 19 Jul 2016

Hi Loomio folks!
I've seen many good arguments above.
@natilombardo @jameswilson @richarddbartlett @hannahsalmon @jameskiesel

I'm in 3 groups, 4 subgroups and I already can't see the settings right away - in the menu marked with an icon primarily for Settings, not Messages/Groups (Firefox, Chrome heritage?).

My 2 cents on the new design:
- I miss the avatar from top right --> I would put Profile settings and Sign out there
- I could imagine a cog icon next to it --> Settings (if it means less support requests, so be it)
- OR as a synthesis, next to the round-shaped avatar, just a few pixels away to the right a half cog icon - somewhat following the curve of the avatar (for giving users a hint about settings) --> thus combining profile settings & other settings (would make sense for me even if I look at Gmail...)
- I would also put an extra help icon --> Help & Contact

To sum up, I would move the last 5 items from the sidebar:
- to the top bar - as I see 2 more icons would fit even on mobile next to the bell icon (I have 5,5" screen) + change the icon for groups/message filters
- but at least the top of the sidebar (leave the settings icon as is)

DU

[deactivated account] Tue 19 Jul 2016

I am very happy with the new format. I find that once I have scrolled down a few times all the options are clearly visible.

I belong to possibly too many groups, so my only gripe is that a. the spacings between each group are too big, (lots of scrolling to find a group) and b. It would be good if the sub groups could be indented under each main group.

Ha! I forgot to hit post, so would dearly like to see a prompt to post before moving on.

DS

Danyl Strype Wed 20 Jul 2016

A couple of comments on the new look. Wow! Radical change! Definitely reduces the visual clutter by putting a lot of stuff into the sidebar, and having the groups list and other content navigation tools there makes waaaay more sense than having them on a separate page. Notifications is only giving me stuff I really want to know and not overloading me, so good to have this still on the top bar. Great work everyone involved.

A couple of things I'm finding confusing:
* account management mixed in with content navigation. I agree with @camfindlay1 's suggestion to keep user account stuff separate
* I have to scroll waaaay down to sign out. It would be great if this was at the top of the new sidebar, or as @camfindlay1 suggests, in the user account menu (as in GMail), like it used to be
* I now have a number of cases when I'm a member of a subgroups, but not its parent group. While it's useful to be able to do this, the new interface makes it hard to distinguish between groups and subgroups (remind me what project this vaguely named subgroup was part of?)

G

GasparI Wed 20 Jul 2016

I see this mega-commit, is there a quick way to revert all the sidebar-related changes in GIT?
https://github.com/loomio/loomio/commit/a36108cb3fc0c42c647a9e6493f8cac6d9bfcfc4

RG

Rob Guthrie Fri 22 Jul 2016

Yes, that commit is the sidebar commit. If you commit a reverse commit of that, then you'll remove the sidebar.

Would you rather not have it?

G

GasparI Fri 22 Jul 2016

Thanks, I just asked because I see additional items as well (in the same commit), like "Add xls/csv support" that would be good to have I guess.

For a list of groups, I think the sidebar is a great idea.
But I'd rather not hide the avatar and settings to the sidebar, I want to keep them as in Gmail, at the top right corner.

RDB

Richard D. Bartlett Fri 22 Jul 2016

I love the sidebar, but miss the negative space. I did a quick experiment, adding an extra 50px padding on either side. These screenshots are on my 13" laptop.

What do you think?

RG

Rob Guthrie Sun 24 Jul 2016

@matthewbartlett what does your trained eye think? Would love to have a firm call from you on this.

MB

Matthew Bartlett Mon 25 Jul 2016

I don't have a strong opinion, but thoughts from me:

  • from book-publishing land, ~13 words per line is a good number to aim for
  • Medium.com articles, which strike me as a kinda gold standard of online text presented to be read carefully, also look like about 13 words per line
  • our current widest left-column (on screens wider than 1120 pixels) achieves that too, so
  • narrowing the left column with extra padding would be wasteful of useful horizontal space for important text
CF

Cam Findlay Mon 1 Aug 2016

Just some further feedback... once I close the sidebar I cannot tell if I'm logged in or not as easily or where to go to change account prefs.

I think mixing the groups and account details causes confusion to be honest.

Having the groups on the side menu though is a welcome change! Well done on this :thumbsup:

DU

[deactivated account] Mon 1 Aug 2016

Hi Cam, thanks very much for that feedback. We're on the verge of beginning to develop solutions for the next iteration. It's great to have your continued input.

CF

Cam Findlay Mon 1 Aug 2016

You're welcome @hannahsalmon :thumbsup:

DS

DOSSE SOSSOUGA Fri 5 Aug 2016

I need Sidebar principle traduction in french