HTML mockup for manage/circle/edit page

[fu]

I've been working with hope on redoing a couple of pages, and here's one of the pages that resulted from the brainstorming.

HTML mockup of a revised Manage Circle page

Throwing it out here for discussion and fleshing out. This is just quick example HTML. The CSS is preliminary (more on that in a bit), and there's no supporting JS so if you could kindly gloss over these two things :-)

The biggest changes are:

• tabs for the various sections (to be hidden by JS), so that you can focus on only one thing at a time, instead of scrolling up and down the page


• changing the way the relationships split up so that it's split along the lines of your relationship to them / their relationship to you, rather than access/subscribe


• a dropdown so you can sort by username or relationship


• a filter for usernames so you can easily find / edit people in your circle


• cleaner table markup, and cleaner markup in general


• added heading for the custom colors

Comments

[lanterne_rouee]

The tabs are a great idea. Thank you!

[cesy]

I like it! How does the search work - is that just a search for a particular username, or more fancy stuff?

[fu]

I am thinking just the username to start out with, and we could expand to other things if they look useful.

[ninetydegrees]

I like it a lot. Visually, however, I would have expected it to match Account Settings to keep styles unified (it's already bad enough). In any case, there isn't enough contrast between text color and background color in headers. Also, I don't know if you care about that but in 800x600 custom colors and the color picker aren't visible.

[fu]

Visually, however, I would have expected it to match Account Settings to keep styles unified (it's already bad enough)

Agreed!

My next post (I just need to clean up a tiny bit more, gn) will demonstrate a quick list of general classes which we should be using in all the pages. And then one of my more long term projects is making sure all the HTML is updated to be consistent and to use said classes. (Account Settings is in for a lot of work *heh*)

Account Settings, Manage Profile, and Manage Circle all need to have more or less the same appearance. (More or less, lalala)


Hm, re: contrast, isn't it the same as what's currently in Account Settings?

And re: 800x600
Is this the case in the current page, or does it only affect the mockup?

[ninetydegrees]

If you're going with this design with more pages then I'm in favor of less lines or less obvious ones. Also, the top of the boxes (where the black line meets the thick pinkish border) looks a bit weird. Like they're unfinished and not the same on the left and on the right (there's some red on the left?); the buttons look odd too: no top border, no background color; and there's no top border for the bottom table either.

Hm, re: contrast, isn't it the same as what's currently in Account Settings?

Nope. I've got dark text (black?) on Account Settings, red one in new Manage Circle.

Is this the case in the current page, or does it only affect the mockup?

Current page: Table's ok, color picker is cut off as well although it's a bit better.

[fu]

Oh huh, so it is!

*checks*

Ah, I got it. I made a mistake in moving around colors, and set the correct color based on original in some of the skins, but not all of them. Thanks for pointing it out! (Probably not going to fix in this mockup, but it will be fixed in the general cleanup one)

Which reminds me that I'd been hoping you'd cast an eye over the CSS class consolidation patches once I've put them up. I've done my best, but it's a lot of work and I've touched several thousand lines of code, so it's quite possible I've missed something. You've a really sharp eye, and I trust your judgement in matters like these!

(Case in point, heh).



I feel obligated to note that any ugliness comes from me and my half finished general cleanup :-)

I am pretty sure that the borders around the buttons will simply go poof once we've tweaked the markup and CSS appropriately.

[ninetydegrees]

Which reminds me that I'd been hoping you'd cast an eye over the CSS class consolidation patches once I've put them up.

Do you have a time frame for these? I'll be happy too once I get my connection back and providing I'm still on vacation (although I should have some free time even after that).

And thanks for the compliment and right back at you. *hugs* Of course it's easier to spot things when you're not involved. ;)

[fu]

Timeframe is about two minutes ago *G* (I was almost done, have been almost done for a while, and have decided that what this is is good enough to start building upon)

And yeah *ruefully* I have been working on this so long, I have at times forgotten how the pages should originally look, and take for granted some things that look different! So I would really appreciate the fresh set of eyes *grin*

[matgb]

Ooh, that's similar to what I had in mind.

Put in extra columns for reading & access filters, and it would be a Very useful page.

If there's a way to collapse a vertical column, then only people needing to expand them need see them, otherwise just putting them after custom colours with a horizintal scroll would work OK. But collapsible columns could be very useful indeed.

[fu]

Oh hm! being able to collapse a vertical column sounds intriguing. *thinks* How would you expand it up again though? have a tiny placeholder column in that place?

[matgb]

Something like that, yes. Possibly a top column called 'filters' and a clickable link that expands to show them all? Might be a plan to have reading and access filters separate, with an advanced popup for reading for paid users.

[jeshyr]

Is there a reason the 'give access' checkbox only occurs for one of those four? Presumably the top one is yourself who you can't give access to, but the others?

It looks great upon first glance - have not looked about accessibility as I'm deadded today but I can do that later. Less visual clutter is a win, thank you!

r

[fu]

*checks* Oh! I'd banned them while testing some other functionality; normally they should just have the checkbox. (The subscribe checkbox is there so I can revoke access)

[jeshyr]

Ahhh! There's no visual indicator that person is banned - it might perhaps be a good idea to say why the checkbox is missing in some way to avoid people going "it's borked!" when the forget they banned $person...

[sophie]

I agree - I'd say disable the check box with disabled="1" and put "(banned)" next to the username in the username column. (although don't disable the checkboxes if it's already ticked, so that you can revoke them)

[luinied]

Um, maybe this isn't the best place to ask, but where exactly did the ability to assign custom colors on the manage/circle/add page go?

[sophie]

Just looking at the code now, and I think it's the result of a bug. I'm just testing out a fix, and if it works, I'll make sure it goes into Bugzilla.

[sophie]

Yep, it was a bug, and the bug and its fix are now in Bugzilla. It's a quick fix so it'll probably get into the next code push.

Thanks for letting us know! (In the future, btw, if you have any queries on that sort, you might find it better to go to Support to make sure it doesn't get lost in the comments.)

[kyrielle]

I like the layout. I hope the CSS cleanup will mean no red text on salmon background for the tabs tho. :)

[noxie]

I like it! I have a question though - will it ever be possible to leave communities on the edit circle page? I'd very much like that. Sometimes I want to leave a couple of comms at a time, and it would make things so much easier if that were possible via this page. And it would make sense to be there as a feature, don't you think? Or is there a reason why it's not that I may not know about?

Thank you and keep up the great work! :D

[turlough]

+1 It would be really cool to be able to do that on this page.

[erika]

It looks great! This will be so much easier to use than the old page!

[msilverstar]

Group membership info should be there for each circle member. It would be great to make sure that people are in the right groups!

[turlough]

Do you mean reading/posting filters when you say groups? Because in that case I totally agree. I would love to have that on this page.

[msilverstar]

yes, exactly!

[archangelbeth]

Is there any way to have a color-wheel for picking custom colors? Someone with a big reading circle is going to start running into "there are only a limited number of color combos I can read" issues...

Otherwise, nothing is jumping out at me as missing, for my purposes. (Which may be very simple purposes, compared to other people's, of course!)