Monday, October 19, 2009

making Great Navigation in Blogger -dont let your posts go unread

Being a User Interface Designer a few years of my life, and spending umpteen hours figuring out how to prettify this blog, I have enough info to qualify for a new category of posts,viz., Bells & Whistles :Design

Lets start with good navigation - blogger doesnt support categories, so this isnt as easy as it sounds.
My leftbar navigation highlights: 1.Navigability 2. Readability & 3. User friendliness

All (main) posts are categorized, have informative post titles (mostly), it gives direction (start here) so readers can find where to go for  info of their interest in about 30 seconds - after which really, who has the time...

My design, per se, inclines towards cleaner pages & clear cut navigation, rather than fantastic design- which is an awesome user experience on its own.
First thing I found was that blogger doesnt support category based navigation unlike others out there- say type-pad & wordpress.
Now I probably should have been looking for this before the 50-odd posts, but I was taking my time getting my feet wet in this whole new social networking thingamajig here - so now, after making valid and substantial contributions to the blogosphere, I have time to design.

If you are just starting out a blog, this is a great post for you, and if you already have been blogging, theres no time like now to get organized. If you have 500-odd posts, you should go away from here real fast, else look at this in a way to highlight pages of interest.
When I have my 500-odd posts, I will create new navigation methods, and you can come back here- if you dont have 5000 by then..

Pros
Having good navigability means that useful info doesnt get unread, as it gets deeper into the blog - & all that time and effort you put in it doesnt feel like it is going down the drain.

cons
Time consuming, labor consuming, manual brick-laying work. Consider switching your mouse buttons if your index finger gets tired & wobbly- if you have 50 posts.
Ok, to make a left bar navigation like mine

1. divide your blog into categories by the kind of info you like to post about - writing on paper is probably more labor-efficient, unlike the way I do - so put it on paper.

2. Go to the Layouts>page elements

3 Open a new tab, tab2, or new window, on Posting>Edit Posts . Preferably set number to view all your posts.
That way you can see the titles of your existing posts & their url

4 Tab 1, click on add a gadget, select List
Add items to reflect your categories. This is going to be your menu -you can name it as you like it. But let naming happen at the end of it all, I'll tell you why.

5. Repeat Step 4 for all your categories

6. Populate your category lists. open each list, apart from menu, and add item by copying titles of your posts into the text box (from Tab 2) - its a bit tricky till you get the hang of it, it could just be better to type sometimes. Dont click "add item" yet

7. Click on the link at the right of add item textbox, copy shortcut(rightclick) on view post in tab 2
This makes the whole post a link.

8.Edit the item .Select some part of text to make as link and make sure that stays within the tags "a href" "/a" tags - see my categories. This is great for readability.
Part of making a (or an) usable interface is its capacity to be readable

9. Separate the list items visually. Save and see. Items are center aligned & kinda clumped together.
Add a symbol before the "a href" tag. This will make it left aligned & create organised & visual separation.
I've used "|" - you could try ::, :,*,~, or even number them

10. Edit order by clicking up & down arrows next to list items. Set items of more interest or more visitors to top & others lower down.

11. You can add ideas for upcoming posts as items without links. They are easier to remember that way, than saving titles as drafts that I've never gotten to writing about.

12. Think up a one-liner, even if it aint too smart, it'll be original - preferably in line with your blog's theme- mine is on Health & Wholeness in general - so Happy Blogs navigate & Healthy blogs navigate , blogs do it with navigation , etc popped out of my mind..

Do your stuff in photoshop or an online photo editing software without the ads & signups like pixlr
And voila, you have some eye-candy as well

Tips

Remember, each new post you write, must also be added into atleast 1 category

 Feel free to skip posts that are a bit iffy. Or make a note to rewrite them & republish later- and then include them into your navigation.

Have a misc category if you have to- but dont dump more than 10 posts into it.

And of course, if all this is too much work for you, I could do it for you, or a part - considering I already know the trouble to go through ;) - but only you know your posts, and the value you put on them- so really, you need to be doing it.

Good luck & post your comments here - and if you've used these tips, please send a link so I can see & suggest more things.

No comments:

Post a Comment

Was that Helpful, Useful, Entertaining? or anything else? TALK to me. And btw, connect to us on Facebook.