As of 2016-02-26, there will be no more posts for this blog. s/blog/pba/
Showing posts with label webdesign. Show all posts

As you may have noticed that there are some marks on the right edge, which are the "Right-side navigation" as what I'd call it. They serve as like Table of Contents.

For now, it's three levels:
  1. Post title,
  2. First heading level in the post, and
  3. Second heading level.
Here is a screenshot:


I hope this will encourage people to go through the headings and may be interested in reading more if you don't have to scroll down a page in order to skim over the content, but simply hover their cursors over these marks.

At first, I was planning a list-like at top-right corner as opposite to the settings at top-left corner. It would look like an automatic Table of Content, which I'd wanted for long time, but never started to write it.

However, I got this idea that visualizes the logical position of the heading in the page on the right side.

I wrote first changeset for post titles only, because I was afraid that subheadings might crowd the navigation. Later, subheadings were added in second changeset and the navigation looks fine, not over-crowded at all.

I didn't add a switch for this new navigation yet, I might or not. If you think this navigation doesn't look good, please complain in comment, so I can be motivated to add a switch for it for you to shut it off.

When you click on one mark, the page will scroll to the heading smoothly, not just jump to it directly. This reminds me of my jQuery jk navigation plugin, which also uses smoothing scroll and was installed briefly on this blog long time ago. I seriously want to add it back, so visitors can not only click on the right-side navigation with mouse, but also use keyboard to navigate.

I believe that I am not the first one to implement such navigation style, if you know someone has implemented similar feature for a page, or as a plugin or script, please post the link.

I think this it worth to make it as a jQuery plugin, if you would like to use it, please do let me know. I may create one based on these code and generalize it for broad usages.

I have only tested it on Firefox, so if you see any bugs, I am sure you will, please leave a comment with what browser you are using. Also, any feedback are welcome!

Updated on 2012-05-21T09:40:04Z

It has problem with Google Chrome and since no one even commented about this navigation, I decided to remove this right-side navigation. However, you may still see it in this page.

Or load-after-scroll or whatever you like to call it.

If you need a proof, please head over to Google+ and access to Terms page with only one left click allowed after you are on Google+. Don't worry, you can scroll down, just see if your finger is faster than your Internet.

Got it?

It has a design flaw if the designer has never paid attention and provide a pause button, he or she might as well as remove stuff after the inserted position, where the new stuff will be put in.

I think the point is proved by Twitter (profile pages) and Facebook (Pages), they have no stuff below that inserted position. Google has still a lot to learn and really test their stuff when they have no bigger users base than other existing services. Users do complain. I don't really, just to earn a post count here.

Actually, Google has recently revamped Google+ to make it more touch-friendly, so I figure that's what it is: some people do really care what it is on page, but just pull up contents and pretend reading.

Google+ is just an example, I believe I was actually trying to get to developer documentation on some website when my first realized this design flaw, but I just couldn't remember what website was. So, I went through websites which I clearly remember it has Infinite Scroll. Google+ was first one I tried, BINGO!

Back to the Infinite Scroll, another flaw is harder to access a certain page since there is no page concept anymore, at least from the representation you see. I believe most of implementation is rely on the last item's timestamp, it queries for more posts upon that timestamp instead of by page number.

I noticed the problem months back when one of my post has a lot of comments, the Disqus appends more comments. I had to click multiple times to get to latest comments. After that, I increased number of comments per page and changed to numbered pagination.

Unfortunately, it seems to gain popularity. Please don't kid yourself, besides fancy, it really has nothing to benefit the quality.

One key point of using such scroll, I believe is because users tend to be lazy, so they don't even won't to click on a button to load more content or to switch pages. With this, they don't have to click on anything, just pulling or scrolling.

I truly feel sad to see this happening, even I am among lazy people, I still don't want to see this. Websites want to keep users on site as long as possible, they simply can't care less as long as they can increase the time.

Have you tried to view the Google+ Explore? Go try it and read through at least one once that new content is loaded.

Most of those posts are essentially an image, how many posts you have just skimmed? Maybe first few, you did read, then you grew impatience and just scrolled down. No one really actually read everything on social networking websites, we just skim over.

To be honest, that's not entirely readers' issues, only people tend to post poor quality content compared to the stuff you read on normal websites. I guess that's same in real life socializing, just it seems to go dumber on the Internet.