fu: Close-up of Fu, bringing a scoop of water to her mouth (Default)
fu ([personal profile] fu) wrote in [site community profile] dw_design2010-12-21 12:18 pm

HTML mockup for manage/circle/edit page

I've been working with [personal profile] 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

lanterne_rouee: glowing multicolored lantern (Default)

[personal profile] lanterne_rouee 2010-12-21 06:28 am (UTC)(link)
The tabs are a great idea. Thank you!
cesy: "Cesy" - An old-fashioned quill and ink (Default)

[personal profile] cesy 2010-12-21 09:27 am (UTC)(link)
I like it! How does the search work - is that just a search for a particular username, or more fancy stuff?
ninetydegrees: Drawing: a girl's face, with a yellow and green stripe over one eye (Default)

[personal profile] ninetydegrees 2010-12-21 10:23 am (UTC)(link)
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.
ninetydegrees: Drawing: a girl's face, with a yellow and green stripe over one eye (Default)

[personal profile] ninetydegrees 2010-12-21 04:10 pm (UTC)(link)
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.
Edited (typo) 2010-12-21 16:11 (UTC)
ninetydegrees: Drawing: a girl's face, with a yellow and green stripe over one eye (Default)

[personal profile] ninetydegrees 2010-12-21 04:41 pm (UTC)(link)
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. ;)
matgb: Artwork of 19th century upper class anarchist, text: MatGB (Default)

[personal profile] matgb 2010-12-21 04:34 pm (UTC)(link)
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.
matgb: Artwork of 19th century upper class anarchist, text: MatGB (Default)

[personal profile] matgb 2010-12-22 12:38 pm (UTC)(link)
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: Blessed are the broken. Harry Potter. (Default)

[personal profile] jeshyr 2010-12-22 03:31 am (UTC)(link)
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
jeshyr: Blessed are the broken. Harry Potter. (Default)

[personal profile] jeshyr 2010-12-23 10:12 am (UTC)(link)
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: A cartoon-like representation of a girl standing on a hill, with brown hair, blue eyes, a flowery top, and blue skirt. ☀ (Default)

[personal profile] sophie 2010-12-25 06:14 pm (UTC)(link)
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: At no point were Utena and Anthy talking about the same person. (confused)

[personal profile] luinied 2010-12-24 07:21 am (UTC)(link)
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: A cartoon-like representation of a girl standing on a hill, with brown hair, blue eyes, a flowery top, and blue skirt. ☀ (Default)

[personal profile] sophie 2010-12-25 06:21 pm (UTC)(link)
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: A cartoon-like representation of a girl standing on a hill, with brown hair, blue eyes, a flowery top, and blue skirt. ☀ (Default)

[personal profile] sophie 2010-12-25 07:24 pm (UTC)(link)
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: A photo of kyrielle, in profile, turned slightly toward the viewer (Default)

[personal profile] kyrielle 2010-12-25 03:18 am (UTC)(link)
I like the layout. I hope the CSS cleanup will mean no red text on salmon background for the tabs tho. :)
noxie: friendly girl smiling (Default)

[personal profile] noxie 2010-12-25 10:46 am (UTC)(link)
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: dreamsheep, My Chemical Romance logo from Three Cheers for Sweet Revenge ((dw) dreaming of music)

[personal profile] turlough 2010-12-27 08:36 pm (UTC)(link)
+1 It would be really cool to be able to do that on this page.
erika: (Default)

[personal profile] erika 2010-12-25 07:09 pm (UTC)(link)
It looks great! This will be so much easier to use than the old page!
msilverstar: (corset)

[personal profile] msilverstar 2010-12-26 01:54 am (UTC)(link)
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: Frank Iero asking a question, art by theopteryx ((mcr art) excuse me?)

[personal profile] turlough 2010-12-27 08:35 pm (UTC)(link)
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: (corset)

[personal profile] msilverstar 2010-12-27 09:06 pm (UTC)(link)
yes, exactly!
archangelbeth: An anthropomorphic feline face, with feathered wing ears, and glasses, in shades of gray. (Default)

[personal profile] archangelbeth 2010-12-29 03:01 pm (UTC)(link)
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!)