HomeGroupsTalkZeitgeist
This site uses cookies to deliver our services, improve performance, for analytics, and (if not signed in) for advertising. By using LibraryThing you acknowledge that you have read and understand our Terms of Service and Privacy Policy. Your use of the site and services is subject to these policies and terms.
  • LibraryThing
  • Book discussions
  • Your LibraryThing
  • Join to start using.

Standardization of "left nav" design

New features

Join LibraryThing to post.

This topic is currently marked as "dormant"—the last message is more than 90 days old. You can revive it by posting a reply.

1timspalding
Edited: Apr 26, 2013, 4:47am Top

LibraryThing's design needs a lot of help. One thing it needs is just standardization--the same sorts of things need to look the same on different pages.

I've just completed a standardization of the "left nav" on LibraryThing. The "left nav" is what we call LibraryThing's secondary, left-aligned navigation, used on Talk, Groups, Recommendations, More and so forth. At root the PHP and HTML code for this nav was the same across the site, but major differences crept into how the navigation was displayed.

I've gone ahead and standardized it, basing it on the one used in Talk, which fastens itself to the very left edge of the page. But I added a blue "call out" by the selected item, which was previously just bold. I think this helps somewhat.

Some of the old "left navs":


Here are the new ones.


You can see the new left nav here:

http://www.librarything.com/talk
http://www.librarything.com/groups
http://www.librarything.com/more
http://www.librarything.com/profile/timspalding/recommendations
http://www.librarything.com/profile/timspalding/stats/library (slightly wider, breaking the standard)

Let me know what you think.

2Collectorator
Apr 26, 2013, 4:46am Top

It looks nice. The More Options >> doesn't do anything though.

3timspalding
Apr 26, 2013, 4:48am Top

I'm confused. What?

4Louve_de_mer
Apr 26, 2013, 4:48am Top

"More options" works for me.

5Collectorator
Apr 26, 2013, 4:49am Top

Down at the bottom under post.

6Collectorator
Apr 26, 2013, 4:49am Top

Well now it suddenly works. Never mind.

7timspalding
Apr 26, 2013, 4:50am Top

:)

8Collectorator
Apr 26, 2013, 4:51am Top

It doesn't do anything unless you're in a topic. I suppose that is how it should work? I dunno.

9royalhistorian
Apr 26, 2013, 4:54am Top

Good job, Tim!

10r.orrison
Apr 26, 2013, 5:03am Top

Looks nice! More options didn't work for me either this morning, until I did a Ctrl+F5 refresh.

Could you add brightcopy's floating style while you're in that bit of the code? http://www.librarything.com/topic/102583

11Lman
Apr 26, 2013, 5:49am Top

More options did not work for me until a refresh either...
I always wonder why 'favourite messages' are there instead of in 'my world' but that's another discussion most likely.

Very nice Tim.

12jbd1
Edited: Apr 26, 2013, 7:25am Top

Even with a hard-refresh, the "More options" link on the main Talk page itself doesn't seem to do anything (on a thread page it breaks out and shows the various options, but not from the main Talk page). Others seeing the same thing?

Testing edit.

13r.orrison
Apr 26, 2013, 7:20am Top

Same here - Chromium Version 25.0.1364.160 Ubuntu 13.04. Works on a topic page, not on Talk

14Lman
Edited: Apr 26, 2013, 7:26am Top

add: and when I hit edit my message doesn't show just a blank box - albeit with the correct options underneath.
Wonder what it will do...

15Lman
Apr 26, 2013, 7:24am Top

And now I can't edit my message either - tried to add FF 20 and Mac OS...
It showed a blank box with correct options but when I hit saved it did not appear...

16brightcopy
Apr 26, 2013, 7:24am Top

10> I don't think Tim wants the nav bar to float. He could do it easily of he wanted. It's a design choice.

17Lman
Apr 26, 2013, 7:24am Top

OH wait - it appeared (later) as another message...

18Lman
Apr 26, 2013, 7:25am Top

It overwrote my entire message - which was yep - same here.
:((

19Lman
Edited: Apr 26, 2013, 7:26am Top

Can anyone else edit their message - properly?

ADD: OK now it is working... WT.. ?

20brightcopy
Apr 26, 2013, 7:29am Top

19> It's probably caching. Sometimes it gets a little out of whack when a new change is pushed.

21norabelle414
Apr 26, 2013, 8:41am Top

I love it. Thanks Tim!

22lorax
Apr 26, 2013, 9:14am Top

Looks good to me.

23lilithcat
Apr 26, 2013, 9:26am Top

"More options" doesn't work. What's under there?

I guess I can't really comment until that's working and I know what's there!

24Scorbet
Apr 26, 2013, 9:28am Top

>23 lilithcat:

Favorite Messages and Ignored Topics.

But only if you are in a thread. On the main Talk page it doesn't work.

25lilithcat
Apr 26, 2013, 9:38am Top

> 24

On the main Talk page it doesn't work.

That's silly. It's not intuitive. If it's there, it ought to work.

26Scorbet
Apr 26, 2013, 9:42am Top

>25 lilithcat:

Based on the comments above (including from Jeremy, I think it's a bug at the moment :-)

27elenchus
Apr 26, 2013, 9:53am Top

Commenting on the overall look-and-feel, I like both the consistency, the blue font, and the blue call-out. Nice.

28MrsLee
Apr 26, 2013, 10:43am Top

Very nice.

29timspalding
Edited: Apr 26, 2013, 10:55am Top

The more-options thing is a bug—I only changed the look. I suspect this changed because the showing or not showing is based on a style. I'll look into it.

Is anyone else having problems saving. This really shouldn't have changed anything there.

30rsterling
Apr 26, 2013, 10:59am Top

Looks fine, and good to have standardization. Personally, I liked the look of the black/white/grey/highlighted box navigation (more modern/clean) better than the blue links, but that's an aesthetic thing.

31Nicole_VanK
Edited: Apr 26, 2013, 11:04am Top

Ditto for personal preference, but making them the same on the various pages makes sense.

32.Monkey.
Apr 26, 2013, 11:09am Top

Yeah, agreed with 30, the other look was a bit sleeker. But this is alright.

33Scorbet
Apr 26, 2013, 12:06pm Top

>1 timspalding:

I like them, particularly that they are all the same, giving a common look. However, in the "stats menu" the "Helper badges" page doesn't seem to have been updated and the "Librarything Local" has a gap between the side of the page and the menu.

This is using Chrome on Win7.

34brightcopy
Apr 26, 2013, 12:12pm Top

35keristars
Apr 26, 2013, 12:17pm Top

30> Yeah, basically repeating that comment and the personal preference thing. I loved the white slider-bar looking highlighty bits, though it wasn't necessarily immediately obvious.

36timspalding
Apr 26, 2013, 12:50pm Top

This hasn't been forgotten. Full plate today…

37_Zoe_
Apr 26, 2013, 12:53pm Top

Ooh, what else is happening today?

38timspalding
Edited: Apr 26, 2013, 12:56pm Top

Snort. Well, a blog post, SOTT, a vendor who wants me to tell them what percentage of a list of ebooks we can enhance, setting up a trip to New York to meet with two companies, etc. Two sharing features may come out today, but they're dependent on an outside company approving something.

39timspalding
Apr 27, 2013, 1:02am Top

Also not updated here yet:
http://www.librarything.com/authorgallery/MEMBERNAME


Fixed. Thanks.

40AndreasJ
Apr 27, 2013, 2:52am Top

I don't like blue callout box to the left. It draws my eyes out to the lefthand wastelands where nothing happens.

Not a big thing, I'm likely to get used to it, but I thought I'd mention it as others didn't seem to like it either.

41Morphidae
Apr 27, 2013, 8:45am Top

Yeah, I'm not real happy with that little blue box. Not a huge complaint, just a small annoyance.

42KarenElissa
Apr 27, 2013, 9:06am Top

I'd have to agree that I like the other box better. I do think part of the problem with the little blue call out is that it is smushed there against the edge of the window and just blends into the edge of my browser window. I think a bit of padding at the edge of the box would make it more noticeable and useful.

43brightcopy
Apr 27, 2013, 11:04am Top

I think the last two messages show the problems in designing for a large site. Basically, one person finds it draws too much attention to itself. The next feels like it doesn't stick out enough. Whaddyagonnado? :D

44MarthaJeanne
Apr 27, 2013, 11:04am Top

I would prefer that it not be there at all. Much too eye pulling.

45brightcopy
Edited: Apr 27, 2013, 11:07am Top

#44 by MarthaJeanne> What would replace it for navigation? Drop down menus? They have their own annoyances. X)

46MarthaJeanne
Apr 27, 2013, 11:09am Top

Just the bold that we have had until now. I don't see the point of the blue square.

47lorax
Apr 27, 2013, 11:38am Top

I don't mind the blue. Back when there was a neon-toothpaste highlight box, I hated it with a fiery passion, but the blue sidebar isn't nearly as obtrusive.

48.Monkey.
Apr 27, 2013, 11:55am Top

I don't find it obtrusive at all, it doesn't bother me in the least. I just think the other style that Tim replaced everywhere was a much sleeker, more pleasing look.

49keristars
Edited: Apr 27, 2013, 12:12pm Top

48> Me, too.

But I also recall having to relearn several times that the white bar highlighting bit indicated which page I was on and wasn't a header/label of some kind. I love the way it looks, but it really isn't necessarily immediately obvious what it means. The blue links with the blue flag are much more common in navigation language on the web, I suppose.

(And I just realized another possible reason the little blue flag is a good design choice - it echoes the darker section of the header of your own posts in talk threads.)

50brightcopy
Apr 27, 2013, 2:38pm Top

#46 by MarthaJeanne> Ah, gotcha. I thought the "it" referred to the entire left nav. :)

51rsterling
Apr 27, 2013, 3:46pm Top

Seems like several people preferred the look of the black and gray font with the box rather than the blue links with little blue rectangle. I wonder how widespread that preference is. Poll? Maybe with a side-by-side comparison of a before and after for the same page?

52brightcopy
Apr 27, 2013, 4:05pm Top

#51 by rsterling> Yeah, but you'll have to start a brand new thread. And phrase it PERFECTLY. ;)

The other aspect is simply time. ANY change always sticks out until your brain has time to tune it out. As it stands, in talk we're used to seeing a sidebar chocked full of blue links all the time. Yet we tune it out for the most part. I think in a year, people won't even notice.

53rsterling
Edited: Apr 27, 2013, 4:32pm Top

52 -Yeah, I don't have any major objection to it (the new design), and don't notice it much. I just think it's not as pretty/sleek/modern. If LT wants to modernize its visual design, I think the previous nav was a step in the right direction, while this revision looks more dated (eta: mostly because of the dominance of the "blue link").

54lquilter
Apr 30, 2013, 8:58pm Top

Also not updated here:

http://www.librarything.com/editprofile/profile

http://www.librarything.com/connect

both places are missing the left-most blue call-out thingie.

55omargosh
Apr 30, 2013, 9:15pm Top

Why is there a "cursor: pointer" on the entire .leftnav div? I keep clicking on what I think is one of the links, but instead am just clicking on the empty space to its right.

56saltmanz
Apr 30, 2013, 10:18pm Top

@55: Ugh, yeah. That's no good.

57timspalding
May 1, 2013, 12:22am Top

The "More options »" thing is fixed.

58rebeccanyc
May 1, 2013, 8:40am Top

I too find the little blue box a little weird. I mean, the option we've selected is in bold -- isn't that enough?

59lquilter
May 1, 2013, 11:46am Top

I don't mind the blue call-out, but I liked the rounded-corners selection box better.

Group: New features

45,125 messages

This group does not accept members.

About

This topic is not marked as primarily about any work, author or other topic.

Touchstones

No touchstones

About | Contact | Privacy/Terms | Help/FAQs | Blog | Store | APIs | TinyCat | Legacy Libraries | Early Reviewers | Common Knowledge | 131,681,810 books! | Top bar: Always visible