Loomio

Sidebar - request for feedback :)

Hannah Salmon
Hannah Salmon Public Seen by 439

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!


James Wilson

James Wilson June 30th, 2016 04:30

Looks great to me.

Matthew Bartlett

Matthew Bartlett June 30th, 2016 05:47

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

Simon

Simon June 30th, 2016 06:40

Looks good to me.

Louis Parisot

Louis Parisot June 30th, 2016 06:57

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).

Hannah Salmon

Hannah Salmon June 30th, 2016 08:44

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.

Hannah Salmon

Hannah Salmon June 30th, 2016 08:44

Thanks very much for your feedback Simon :)

Hannah Salmon

Hannah Salmon June 30th, 2016 08:45

Thanks James!

JK

James Kiesel June 30th, 2016 19:26

<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)
Cam Findlay

Cam Findlay July 1st, 2016 01:54

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:

Aaron Thornton

Aaron Thornton July 1st, 2016 03:07

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

Nati Lombardo

Nati Lombardo July 4th, 2016 02:49

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 July 4th, 2016 04:36

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.

James Wilson

James Wilson July 4th, 2016 05:24

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.

Richard D. Bartlett

Richard D. Bartlett July 5th, 2016 01:31

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?

Aaron Thornton

Aaron Thornton July 5th, 2016 01:46

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.

Hannah Salmon

Hannah Salmon July 5th, 2016 02:54

Happy to have a play and draw up some options

Richard D. Bartlett

Richard D. Bartlett July 5th, 2016 03:13

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

Aaron Thornton

Aaron Thornton July 5th, 2016 03:14

How do you have notifications?

Aaron Thornton

Aaron Thornton July 5th, 2016 03:23

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

Richard D. Bartlett

Richard D. Bartlett July 5th, 2016 03:24

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.

Aaron Thornton

Aaron Thornton July 5th, 2016 03:26

Dont you need search?

Richard D. Bartlett

Richard D. Bartlett July 5th, 2016 04:01

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

Hannah Salmon

Hannah Salmon July 5th, 2016 04:11

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

Aaron Thornton

Aaron Thornton July 5th, 2016 04:21

gotcha

Aaron Thornton

Aaron Thornton July 5th, 2016 04:23

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

James Wilson

James Wilson July 5th, 2016 21:53

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.

Hannah Salmon

Hannah Salmon July 6th, 2016 00:02

@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?

JE

Jeremy Entwistle July 6th, 2016 00:05

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

Hannah Salmon

Hannah Salmon July 6th, 2016 00:09

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:

Hannah Salmon

Hannah Salmon July 6th, 2016 00:09

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

Hannah Salmon

Hannah Salmon July 6th, 2016 01:36

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

Matthew Bartlett

Matthew Bartlett July 6th, 2016 01:40

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.

Hannah Salmon

Hannah Salmon July 6th, 2016 02:08

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?

Richard D. Bartlett

Richard D. Bartlett July 6th, 2016 02:18

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.

Alanna Irving

Alanna Irving July 6th, 2016 02:23

@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.

JK

James Kiesel July 6th, 2016 02:26

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.

Richard D. Bartlett

Richard D. Bartlett July 6th, 2016 02:26

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"

Richard D. Bartlett

Richard D. Bartlett July 6th, 2016 02:27

I agree.

Aaron Thornton

Aaron Thornton July 6th, 2016 02:57

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.

Alanna Irving

Alanna Irving July 6th, 2016 03:00

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.

Richard D. Bartlett

Richard D. Bartlett July 6th, 2016 03:40

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.

Aaron Thornton

Aaron Thornton July 6th, 2016 05:59

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?.

Hannah Salmon

Hannah Salmon July 7th, 2016 03:07

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

Richard D. Bartlett

Richard D. Bartlett July 7th, 2016 04:49

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?

Hannah Salmon

Hannah Salmon July 7th, 2016 04:59

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?

Richard D. Bartlett

Richard D. Bartlett July 7th, 2016 05:01

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

Hannah Salmon

Hannah Salmon July 7th, 2016 05:07

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 July 7th, 2016 07:09

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'
Hannah Salmon

Hannah Salmon July 7th, 2016 08:57

@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

Hannah Salmon

Hannah Salmon July 7th, 2016 09:12

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

JE

Jeremy Entwistle July 7th, 2016 16:10

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

Aaron Thornton

Aaron Thornton July 7th, 2016 20:36

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.

Aaron Thornton

Aaron Thornton July 7th, 2016 20:40

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

Matthew Bartlett

Matthew Bartlett July 7th, 2016 21:54

@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.

Nati Lombardo

Nati Lombardo July 8th, 2016 01:42

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.

Hannah Salmon

Hannah Salmon July 13th, 2016 03:52

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:

Hannah Salmon

Hannah Salmon July 15th, 2016 02:49

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!

GasparI

GasparI July 19th, 2016 09:22

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)

James Wilson

James Wilson July 19th, 2016 18:00

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.

Strypey

Strypey July 20th, 2016 08:39

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?)

GasparI

GasparI July 20th, 2016 12:59

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

Rob Guthrie

Rob Guthrie July 22nd, 2016 01:12

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?

Richard D. Bartlett

Richard D. Bartlett July 22nd, 2016 04:29

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?

GasparI

GasparI July 22nd, 2016 10:58

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.

Rob Guthrie

Rob Guthrie July 24th, 2016 21:15

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

Matthew Bartlett

Matthew Bartlett July 25th, 2016 00:15

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
Cam Findlay

Cam Findlay August 1st, 2016 00:53

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:

Hannah Salmon

Hannah Salmon August 1st, 2016 00:56

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.

Cam Findlay

Cam Findlay August 1st, 2016 01:02

You're welcome @hannahsalmon :thumbsup:

DOSSE  SOSSOUGA

DOSSE SOSSOUGA August 5th, 2016 13:31

I need Sidebar principle traduction in french