Discoverability
(
32)
Mon 2007/08/27 00:32
Just wanted to run through a few new features recently added to the site and talk about how "discoverability" is just as important as "userbility" when it comes down to web design.
Many talk about userbility for humans and end up with a site that has no userbility whatsoever for a search engine - sites must be designed with SEO (Search Engine Optimization) in mind so that one can expect natural traffic from search engines.
Another element that you dont hear much about in web design is "discoverability." As the term suggests, discoverability is a way to design a site so that users can easily discover the content or services that you offer. Folks putting effort in driving traffic to their site via SEO or SEM (Search Engine Marketing) or through advertising need to realize that efforts should also be put into converting the user once they arrive at the site.
"Conversion" in this case means to get that new visitor to buy something (in the case of an EC site) or get them to discover something that will make them want to come back for more.
Here are a few new features which hopefully should help you think about how you can go about organizing your content.
Above: In the middle column you will notice a new set of tabs. Upon clicking on the tab "Figures", the browser will fetch the latest figure posts and load it into that tab without the browser refreshing - this should happen in an instant. This means that you can discover and get to more content from the top page.
The "latest" tab is loaded in the HTML with the index page so searchbots can still see the default content to crawl thus SEO is still enabled. Read up on my Blog Monetization post for more tips on SEO.
Folks who want this script can get it at DynamicDrive - its quite easy to use and appearance is managed by one css file.
Above: after clicking on the "Gundam" tab, the tab will be loaded with the latest Gundam posts in summary format.
In order to do this, before a new post goes live, I kick of a build which generates flat files from the database for each post that appears in any of the tabs. A process within the build then creates another flat file for each category which will be called into each tab. The file for figures lives here.
The link for the above file is accessible from the top page which means that I am creating a new shortcut for a searchbot to reach more content - getting searchbots to reach as much content as possible from the top page within a few branches is crucial.
The new header is intended not only to be a bit more safer for work, but also enable me to group categories under one image. For example, previously I had a pair of "eyes" for idol videos and another pair of "eyes" for idol photos - these two items are similar and yet competing with each other.
Through my own observation of user behavior, I discovered that a visual representation of a category as a menu item greatly improved click through rates. For example, a picture of Gundam as a menu item converts much better than the text "Gundam." If you want a high click through rate for a particular category then stick an image of a girl on it. This is the reason why we always had an image of a girl on the top page at MSN Japan - Yahoo Japan uses the same tactic too but on different pages.
Above: Previously, related items used to be just a text link. I changed that to an icon+title and got a higher click through rate. Now that I have changed the format to a summary and icon, the click through rates for related items have gone up to over 50%.
The idea was to have the items as part of the post where the user continues reading the summary instead of deciding whether to read more just by looking at the title and icon.
And this is for those who fell asleep reading this post. Its by my fave (probably) artist Peko-tan. That site could have blocked access from outside of Japan so if thats the case then get this wallpaper from somewhere here - click on the link at the top of that page.
Many talk about userbility for humans and end up with a site that has no userbility whatsoever for a search engine - sites must be designed with SEO (Search Engine Optimization) in mind so that one can expect natural traffic from search engines.
Another element that you dont hear much about in web design is "discoverability." As the term suggests, discoverability is a way to design a site so that users can easily discover the content or services that you offer. Folks putting effort in driving traffic to their site via SEO or SEM (Search Engine Marketing) or through advertising need to realize that efforts should also be put into converting the user once they arrive at the site.
"Conversion" in this case means to get that new visitor to buy something (in the case of an EC site) or get them to discover something that will make them want to come back for more.
Here are a few new features which hopefully should help you think about how you can go about organizing your content.
Ajax Tabs
The "latest" tab is loaded in the HTML with the index page so searchbots can still see the default content to crawl thus SEO is still enabled. Read up on my Blog Monetization post for more tips on SEO.
Folks who want this script can get it at DynamicDrive - its quite easy to use and appearance is managed by one css file.
In order to do this, before a new post goes live, I kick of a build which generates flat files from the database for each post that appears in any of the tabs. A process within the build then creates another flat file for each category which will be called into each tab. The file for figures lives here.
The link for the above file is accessible from the top page which means that I am creating a new shortcut for a searchbot to reach more content - getting searchbots to reach as much content as possible from the top page within a few branches is crucial.
Header Navigation
Through my own observation of user behavior, I discovered that a visual representation of a category as a menu item greatly improved click through rates. For example, a picture of Gundam as a menu item converts much better than the text "Gundam." If you want a high click through rate for a particular category then stick an image of a girl on it. This is the reason why we always had an image of a girl on the top page at MSN Japan - Yahoo Japan uses the same tactic too but on different pages.
Related Items
The idea was to have the items as part of the post where the user continues reading the summary instead of deciding whether to read more just by looking at the title and icon.
If you are new here, you may want to keep up with more of the same via RSS or Danny's other networks. (dont show again)
Announcing Featured Feeds EX - a program that is aimed at growing the online Otaku Sphere.
As y...(more)
Tue 07/10 06:30 comments (74)
Pushed out the code for Profile Page EX (EXtended). You can click through to your profile page b...(more)
Wed 06/06 05:08 comments (19)
it was easy b4 --> easier now~ so easy of easy ^^
(ID #55532) Posted on 2007/08/27 02:07
omg that pick totally woke me up
(ID #55533) Posted on 2007/08/27 02:17
Link Cosplayer, Video Gamer, Amatuer Programmer, and Artist
Danny, I don't know if you can make it even easier but if you can by all means prove us wrong/show us up. And now, that pic is gonna be my laptop wallpaper for all my college buddies to see. XP
(ID #55534) Posted on 2007/08/27 02:24
Nice updates Dan! Your site gets better and better all the time. Side question: how are you getting the posts to have those icon/thumb things? Are you using a php script to generate them? Can you give a tip where I can get the function to generate specific size thumbs (croped if needed) regardless of initial ratio? Thanks :D
(ID #55535) Posted on 2007/08/27 02:38
ha really cool ... nice add to this web ,... anyway hi i am new member here .. been visiting daily but suddenly decided to sign up as a member haha :D
(ID #55536) Posted on 2007/08/27 02:59
CEO MIrai Inc
Demacrez, Alden, Glad you like the wallpaper ^^ Rayk, I make a thumb manually in Fireworks and dump into a local directory. I then run a PHP script that uses GD to resize into two different sizes and upload. You can also use imagemagick. Or try this http://jonkenpon.com/2007/01/11/creating-captcha-images-and-square-thumbnails-using-gd-library/ Joshua, Welcome!
(ID #55537) Posted on 2007/08/27 03:05
Mandalorian in training + Otaku...
Thank you for the great tips danny. One can never have too much tips. Will use this to improve my blog (hopefully XD)
(ID #55538) Posted on 2007/08/27 03:31
very good feature there! ^_^
(ID #55539) Posted on 2007/08/27 04:03
Good advice; the stats on the increase you've seen in CTR by switching to image based links was especially interesting. Food for thought, indeed...
(ID #55540) Posted on 2007/08/27 04:09
Web Developer/ウェブデベロッパー, Photographer/写真や
SOme great tips. Been looking to a AJAX top bar for a while. Thanks for the tips Danny. Will try them out!
(ID #55542) Posted on 2007/08/27 04:52
Navigation for humans? Perfection. Its all great now with the updates to your page. But I believe the last picture got me eyes open less than a second then when I saw the Ajax tabs.
(ID #55543) Posted on 2007/08/27 05:02
soon-to-be 2nd year Civil Engineering student
Another great addition to an already great website of yours. Keep it up!!!
(ID #55544) Posted on 2007/08/27 05:06
Programmer, Web Developer / Web Designer
Nice addition! Not only it helps in navigating but more work friendly! I do agree that images does tends navigation than pure text. Simple and relevant image like your header work well. Keep it up!
(ID #55545) Posted on 2007/08/27 05:16
Very useful for people who serch new news of one topic nice add
(ID #55546) Posted on 2007/08/27 05:36
Very informative, I might use some of these suggestions on my own sight. The more visual something is usually results in people wanting to know more, which is why I think a text/pic link works so well...though I assume most people knew this ^^.
(ID #55548) Posted on 2007/08/27 05:49
Denno Coil Encoder + Tangerine Slicer
very nice addition - i was wondering if it is possible to make the main news column a little wider - jut a little... some of your photos/pictures look too compressed
(ID #55552) Posted on 2007/08/27 05:59
MIS Executive
Well done Danny, an extra addition to your websites.Looking forward upon new updates from you.
(ID #55553) Posted on 2007/08/27 06:15
Jack-of-all-Trades Tech Support
Nice Danny. Actually perfect timing for me since I'm changing the layout on one of my blogs and some of your new features may be worth looking into. Can't wait to see what other interesting features you'll bring out in the future :)
(ID #55554) Posted on 2007/08/27 06:50
Dog of the Country
the header definition is a lot more organised and safe...at least i dun have to hide the window when my parents come in..there's no babes in bikinis....
(ID #55559) Posted on 2007/08/27 09:47
it's already very easy to navigate through..
(ID #55561) Posted on 2007/08/27 10:03
anime/cosplay events organizer
a very nice job on what you've done in terms of navigation ^^ the menus and navigation are much more organized and easy to navigate ^^ great advice and i'll apply this to my site designs ^^
(ID #55569) Posted on 2007/08/27 12:39
Aeronautical Engineer
Love the new header... no more need to be too cautious... and the tabs thing is quite good as well. I will have to check that out...
(ID #55570) Posted on 2007/08/27 12:48
五〇一軍团 TK8316 Singapore Garrison Public Relations Officer
the new tabs are definitely a welcomed feature. :)
(ID #55576) Posted on 2007/08/27 14:34
Anime Store Owner, artist, Web master
great addtion to the already easy to navagate site. And as for that wallpaper.. ::Nosebleed::.. dammit.
(ID #55578) Posted on 2007/08/27 14:52
Visual Communications and Web 2.0
good addition to the site that already has great features. I understand what you are talking about as a web designer I often have to do all of this things to make my client's web site more successful.
(ID #55581) Posted on 2007/08/27 15:37
Wow. Just when we wonder how better it can be, you do it for us. This site is extremely easy to browse at this point thanks to your efforts. Thanks Danny for your hard work.
(ID #55592) Posted on 2007/08/27 18:52
Troubleshooter, Universal Exports
Thanks for another informative and great learning post! I have been sitting here reading more about SEO and SEM. All this is very fascinating to me, looking forward to learning more on this when I return to college this fall. I surprised how little people make use of these things. Will the internet being so saturated with sites and information, it has become vital to make certain that users easily find the information they are seeking. Most importantly they are directed to one's site! I still find myself amazed at how many Japanese sites do not appear to use such concepts or create easily navigable pages that promote return visits. The visual concept doesn't come as a surprise. Maybe because of my art background, I realize by nature we tend to be visual. While we do read when searching or examining something we always respond best to a mix of text and visual elements. I do like the changes you have been making. I enjoy the thumbs and blurb of text you have added to the "related items" section. I suppose that relates back to the SEO concept, right? Anyway, I find myself spending less time trying to remember when and where you talked about a topic and more time reading and answering questions. Yes, I do like that wallpaper. ^o^
(ID #55604) Posted on 2007/08/27 21:49
.NET/Web Developer
Another great post. THanks for this very useful information. It's rare these days that you get to see site owners make posts about how they build their website you know. Can't wait to apply this at work. heheh. ^^ I do like what you did with the related items thing and I find myself clicking them more often this time. As always, keep up the good work. :D
(ID #55639) Posted on 2007/08/28 02:39
This is very helpful Danny, how on earth did you find this? this gimmick is awsome. I'm testing it at the moment and the crap thing is that it wont load the pages in the DIV container with IE, however, it works find with FireFox. Pretty strange. I do have the updated EI too... Be implementing this when possible. Love new things like this, Danny, do this more often! it'll help us a great deal ^^
(ID #55704) Posted on 2007/08/29 02:43
CEO MIrai Inc
All, Thanks for the compliments - glad you like the changes. Expect to see more features within the next few weeks.
(ID #55728) Posted on 2007/08/29 08:11
Mustafa in Sultanahmet, Istanbul Turkey
what a great website!
(ID #56041) Posted on 2007/09/01 12:54
Part trooper, part -timer, 100% loser...
Peko- tan sure can draw cute girls... Huh? What were you talking about Danny? Anyway, being a noob at IT person, I believe your site is GREAT! It's really convenient coz' whenever I press a link, it opens up another window which is really kewl~ Wish I could make a website half as great as yours! Keep up the good work Danny!
(ID #71380) Posted on 2008/02/03 18:18
Ever wished that there was an encyclopedia in English with all things Ota...(more)
Fri 06/05 17:37 comments (264)
A while ago, in a move to clamp down on illegal parking, the police invit...(more)
Wed 08/01 23:12 comments (42)
Tis the rainy season in Japan right now meaning that many house and shop entrances across Japan star...(more)
Sat 07/04 11:31 comments (96)
The Mirai Suenaga Merchandise project has changed gears and is back on the project timeline. I've be...(more)
Fri 07/03 22:16 comments (94)
Subscribe to RSS or get dannychoo.com delivered to your inbox.
