Days ago i saw a post talking about ‘paging wordpress posts without using plug-ins‘ like pagenav. The way to integrate such codes into themes is easy, but with a little bug. 
First put this paging function in the theme’s functions.php

function kriesi_pagination($query_string){
global $posts_per_page, $paged;
$my_query = new WP_Query($query_string .”&posts_per_page=-1″);
$total_posts = $my_query->post_count;
if(empty($paged))$paged = 1;
$prev = $paged – 1;
$next = $paged + 1;
$range = 2; // only edit this if you want to show more page-links
$showitems = ($range * 2)+1;

$pages = ceil($total_posts/$posts_per_page);
if(1 != $pages){
echo “<div class=’pagination’>”;
echo ($paged > 2 && $paged+$range+1 > $pages && $showitems < $pages)? “<a href=’”.get_pagenum_link(1).”‘>最前</a>”:”";
echo ($paged > 1 && $showitems < $pages)? “<a href=’”.get_pagenum_link($prev).”‘>上一页</a>”:”";

for ($i=1; $i <= $pages; $i++){
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )){
echo ($paged == $i)? “<span class=’current’>”.$i.”</span>”:”<a href=’”.get_pagenum_link($i).”‘ class=’inactive’ >”.$i.”</a>”;
}
}

echo ($paged < $pages && $showitems < $pages) ? “<a href=’”.get_pagenum_link($next).”‘>下一页</a>” :”";
echo ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) ? “<a href=’”.get_pagenum_link($pages).”‘>最后</a>”:”";
echo “</div>n”;
}
}

Then put this reference code in the place where page navigation is needed to show.

<?php kriesi_pagination($query_string); ?>

And finally add some styles in the theme’s style.css file.

.pagination{
line-height:23px;
}
.pagination span, .pagination a{
font-size:12px;
margin: 2px 6px 2px 0;
background:#fff;
border:1px solid #e5e5e5;
color:#787878;
padding:2px 5px 2px 5px;
text-decoration:none;
}
.pagination a:hover{
background: #8391A7;
border:1px solid #fff;
color:#fff;
}
.pagination .current{
background: #fff;
border:1px solid #8d8d8d;
color:#393939;
font-size:12px;
padding:2px 5px 2px 5px;
}

Here comes a problem. When that is put in a new page to navigate posts, it does not work. And after carefully checking, the problem gets located in the function calling where the  ’query_string’ is used. If it is going to be used in a page with its ID equals 99, then the ‘query_string’ should be like this:

kriesi_pagination(“cat=99″);

or else, the page navigation would not show up due to the post number is zero.

FOR THE MEMORY OF PR RECOVERY

While changing the domain name from andol.info to andol.info, i lost all the page rank datas which was reset to zero. After nearly 2 months’ waiting, finally, the page rank starts to recover. It is back !

This is the 2nd part of usability evaluation for go.taobao.com. According to the 1st part evaluation, we found some of unfluent to browse the pictures which is probably due to the networking speed. So, in this review, networking was test 5 times destributed in different times in the day and night.

One random search word was selected on the page which looks quite hot. And, onece the first page was ready, regular click started at the rate of 1 click one second. Looks quite smooth at the first beginning~

Oops, looks something happened accidently, the picture displaying was sucked although the small thumbnails were still working.

Ok, waiting would be the only thing to do…

Getting into the picture detail entry, new window, detailed page and … oops, a small thumb’s missing.

Finally, the pictures caught up with my brouwsing. Wait… what is this, motel ? i found it when i was searching skirt ? Cool~

Again, similar lagging behind things happened, fortunately, i have understood it now.

So, the review conclusions:

1)  Precise picture matching, need be improved ( at least dont mistook motel to women’s dress, ;] ).

2) It is better to improve the rapidly picture browsing, don’t show sucking status in the front of users.

3) Small thumbnails are much faster to be loaded than big ones, why not fill the page with numrous of small pictures ( clear enough ) which would indicate bloody number of pictures.

4) The most important one, fliping from right to left seems not the perfectly effecient way to display information like those thousands of handreds pictures. If it flips fast, it looks blur and the users can not see the contents.

Morning by Krzysztof Browko

Goðafoss by Ragnheidur Arngrimsdottir

Morning impression by Przemyslaw Wielicki

Central Balkan by Vladimir666

Flowing Water & Ice Formations by Doug Roane

Morning Sun by Norbert Maier

Planet Earth by steler

A Reflective Morning by John Parminter

Gold Fields by Janusz Wanczyk

Sea by jtangen

Morning line by Janusz Wanczyk

Mountain Waves by Alan Czekierda

Dream about a green valley by Janusz Wanczyk

Two valley view by Bergljot

Autumn curve by Janusz Wanczyk

Lovely Old Lane by Northman

Morning valley by Janusz Wanczyk

Elf’s Land by Alexander Maslarski

Thin Ice by Doug Roane

In the mist’s sea by Janusz Wanczyk

The Sky Goes All the Way Home by Mark Broughton

Strolling on the Dolomites by Robert Strahinjic

Glacier Formation by Axel Gimenez

Sea by Boots

Pangong Tso by Prateek Dubey

The Other Side by Stefan Bingham

Seljalandsfoss by Henrik Spranz

[From smashingapps.com, all rights reserved by original authors]

There is a comment plugin for wordpress which is called ‘WordPress Thread Comment‘  which was develped by ‘Author: 偶爱偶家’.

This Plugin is an enhancement for WordPress’s comment function. It enables users to reply on a exist comment, and the discussion will be displayed threaded or nested.

But, i found a new way to get ‘reply comments’ function working without plugins, it is very simple:

First, check the wordpress version, i hope it would be 2.7.

Second, download ‘comments.php’ from wordpress 2.7′s default thems folder.

Last, replace the new ‘comments.php’ file as the older one and check the wordpress admin’s settings/discuss to enable multi thread comment.

Well, get some CSS style to control the display and start to enjoy it !

This showcase will focus mostly on the layout and organization schemes. Below are about 40 different typographic layouts used in different fields of print such as brochure design, editorial design, and poster design.

Effektive CV/Poster Mailer

Spit Kingdom

Sheridan & Co.

Avant Garde Gothic Typeface Booklet

Akimoto Typeface

NTU Art & Design Prospectus

BABE

Rizzo + Gobart

Mise au point

UsineSonore

Bionic Systems

National Geographic

Colorcubic

Kiosk 37

ALPHA_TXT

Posters by Official Classic

Poster

Stel Christian Cambas Poster

Typography Poster

Beck 8-Bit Variations

Children of the idiom

Commune

Aesthetic Mathematics

What’s the World…

Oscar_Wilde_Retrospective

Play With Colors

Posters by Pablo Alfieri

More Posters by Pablo Alfieri

99 Dingbats

No Lemon Daydream Magazine

Lazydog

Real Dutch Design Books

Macro Micro

Marius Martinussen

DADA Design

Berlin Cafe Posters

[From smashingmagazine.com, all rights reserved by original authors.]

The main page is quite a little dark with simple search engine like style to lead user easily finding the entance. Some hot search words and pictures, on the left top corner, a even more simpler interface style switch button is there, but not so clear what it is used for until click it. 

Typing some words and click search, there comes results page. Looks the images are quite huge and slow to load, during the tests,  i tried several times to reload to stop page getting down, but at last i gave up to go back. Probably, the web speed would be the first problem.

Finally i saw the pictures, fantastic indeed, except bit of slow speed.

Browsing the page by click or wheel scrolling, either is good to use, nice work.

Oops, got down again. I wonder, why does Taobao sacrify so much waiting time to show such couple of pictures, patient challengable ? It would be nightmare under china’s web speed environments. 

So, i designed an illustration below to compare with the original one: getting smaller pictures which can be enlarged when mouse is over.

Here is just the first sight review, whether it is good to use or not, how easy to use and what exactly the interaction effectiveness it is, all those will come up soon. 

I have a similar problem. On page.php, after the loop I’m using get_posts to grab and display some Posts that are related to the current Page.

Everything is fine except that I’m getting full content without the more link. Does the more quicktag not work with get_posts on page.php?

Here is the solution: 

the “more…” does NOT work on Pages by default – a Page displays just one single entry, so no need for it: there is no “multi-Page” view in WP.

According to some older posts in this forum that you could find by searching – this should address the issue:
<?php $more = 0; ?> if placed before the query.

After much experimentation, here is what I’ve learned:

The more quicktag does not seem to work with get_posts() outside the loop even when using $more = 0; or a custom template instead of page.php.

The more quicktag will work with query_posts() outside the loop if you set $more = 0; even if you use page.php.

A note for people switching functions. Use category= with get_posts(). Use cat= with query_posts().

Next challenge: get tags working on my related posts displayed below a page’s content.

Here’s my query for posterity:

<?php if (isset ($relatedcat)) {
// related cat set in custom field
 $query= 'numberposts=99&cat='.
$relatedcat.'&orderby=date&order=ASC';
 query_posts($query); // run the query
 global $more; $more = 0; // allow more quicktag
 while (have_posts()) : the_post(); // the loop
 setup_postdata($post);
?>
<div class="post" >

It is a strange thing that,  when i was a tutor, i taught students web design but they all interested in making flashing things like blink texts and cool flash effects. As they thought, flashing things attracted people’s attention, what a pity, they didn’t notice that flashing also took away the attention belonging to some other important contents. Going further, how long could people’s attention be, the answer is 1 to 3 minutes at most. Shocking, isn’t it ?There are several pitfalls of using flash things as important components:

1) SEO issues: google cann’t index the flash as good as normal ones, that is truth, at least until now it is that.

2) Flash player is another issue: nobody could say that every brower is campatible with the flash? The answer is NO.

 3) Some flash effects are not compatible. Like the effect showed in the picture above, it is some kind simulation of Mac’s Dock. What is it used for? Just show that it’s cool, funny or efficient? Neither, i think. 

In my opinion, just like the picture demonstrated below, clear, simple and accessable navigator plus inspirative design would be useful and helpful to all browsers. 

Several days ago, we published a new way to add ‘related posts’ function into wordpress without plugins, that works. And accidently  today, in smashingmagzine i found a similar way to update ‘related posts’ function:

<?php

$tags = wp_get_post_tags($post->ID);

if ($tags) { echo ‘Related Posts’;

$first_tag = $tags[0]->term_id;

$args=array( ‘tag__in’ => array($first_tag), ‘post__not_in’ => array($post->ID), ‘showposts’=>5, ‘caller_get_posts’=>1 );

$my_query = new WP_Query($args);

if( $my_query->have_posts() ) { while ($my_query->have_posts()) : $my_query->the_post(); ?>

<p><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title_attribute(); ?>”>

<?php the_title(); ?></a></p> <?php endwhile; } }

?>

So now there are 2 ways to update the ‘related posts’ function into your blog.

Six feet by Lev Tsimring

envy by Fulvio Pellegrini

Please wait a little by Marc Siewior

Turtle and apple by Vedran Vidak

Collaboration by ryandws

Kung Fu Master by Lina Gunawan

Softdrink Addict by Andrei

About a dream by Jurga

Sunshine in a cup by She Hates Monday

Tired by Bill Mangold

Teaser by Johan Lind

So Hungry by Heath Carney

Say, Harold, haven’t we seen her before? by Ursula I Abresch

I’ll never talk to you again by Adrifil

Passionate by Ursula I Abresch

You are my best Friend by Jani

Ohhh Nooooo!!! by Mark B Bartosik

Anatomy Lessons by Paul van Geldrop

No Birds by Sameli

Bicho by Barbara C.

The Dancing Nebula

Infinity

Experiment Wall

Age Is Beauty

Loose Leaf

Motion Senses

A E R O S T R E A M

HD walls for windows

Experiment Wall

Explo Wall

Rainbow

Reflux

Horsehead Nebula

Ever Wondered?

Confused Trajects

Dusk

ONyx

Horizon

Zebra stripes

Blue Interlaced

Explode texture

Apple color shades

Epic

Leopard Aurora

Hologram Reflector

Used Crayons

Ultimate Vista

Last Stripes

Magma texture

Life Magic

Vortex Apple

Bunch of light vectors

Blue Apple logo

Abstract waves

Not thinking straight

Spirit Lanterns

When i noticed my blog andol.info lacking some popular functions like ‘related posts’, i decided to do it myself. I googled the ‘related posts’ but most of present results are about installing plugins, no code level tips are provided. I dont like using plugins in wordpress bacause huge number of plugins probably slow down the browsing speed. 

So i just hacked it myself: adding the 2nd post query-> matching the query conditions->get result & display & CSS. Some codes are shared below.

<div id=’rltpost’>

<?php

  if(get_the_category()) {

    echo”<p><strong>&nbsp;Posts may be of interest to you:</strong></p><ul>”;

    foreach((get_the_category()) as $category) {

      $query2 = new WP_Query(“cat=”.$category->cat_ID.”&showposts=3&orderby=rand”);

      while($query2->have_posts()):

      $query2->the_post();

?>

      <li><a href=”<?php the_permalink() ?>” title=”permalink to: <?php the_title() ?>”><?php the_title() ?></a></li>

<?php

      endwhile;

    }

    echo”</ul>”;

  }

?>

</div>

Instruction: just copy all the codes above to where you wanna show your ‘related posts’ section, and add the CSS style in current theme’s style.css file, done, enjoy.

1) Google is simple

Under the same technology & engineer conditions, Google makes simple products which are easy and fast to use; Yahoo, will make fantastic products too, but, probably, with some complicated functions which users dont need so much but which only confuse users. For example, GMAIL vs YMAIL; GTALK vs YAHOO! MESSAGER; and GOOGLE SEARCH vs YAHOO! SEARCH. That is the truth, if, one tool is able to archive one tast, the simpler, the better.

2) Yahoo! is aged

Just like human being, young people always have more strange ideas than aged ones, so is Yahoo!. Yahoo! was created on the first wave of internet which was populare with news, messages and information. While going to today, the third wave of internet has nearly pasted, Yahoo! still hasnt made imaginable products catering web2.0 users.

3) Google is creative

On the other side, Google is young and full of creation, especially its talent and energical engineers. They create all kinds of products, whether it is good or not, then, put the products into lab to test the response of usabilities. One by one, there increases the number of Google’s popular products and attracts users. 

Sometimes we dont know what users want, so we have to design all kinds of products according to the clues from web. Once we put the products on market, then, users will choose which ones are good and which ones aren’t — that is called rapid developing and fast evolution.

Now let me tell you my recent ebay experiences:

1) payment & registration & login

It is nearly the common sense that before starting deserving the services of a website, signing up is mandatory, absolutely no other choices. Suppose, all users have the choice to purchase some stuffs in eBay, probably the results would be that nobody like the petty registration stuffs. The important thing, if the account is not created for communication, then, it is useless for users. That only benifets the company. 

2) items search

No dout, that search is so important that if we lost it we would spend couple of times to find what exactly we want among numrous goods. However, search results’ items’ order is a problem. By price, the seller can publish low goods price plus expensive postage; by date, new stuffs maybe not the best ones; by place, how about a place like NewYork, millions of goods online; or, by combination of these search, do you think that will work out? My answer is NOT POSSIBLE.

Take Bill Gates for example, it is said that, one time, he visited microsoft.com to download a software, ironically, he was not able to find the software in the site although he knew it must be some where. The same thing, The CEO of eBay, maybe, couldnt find the right stuffs neither. 

3) design for goods’ display

With this problem, just open the eBay site, and you will find its massiveness. People come here only for watching the colorful page? Dont be stupid. When i go to apple.com, eigher i would buy some devices or get some related information of hardware or software. 

So, i think that is the first thing, display the propriate things what the users want, and display should be designed to cater the customers’ request.

New google pagerank updated today, and andol.info’s rank increased to 2.

The layout of iAndol.com has been slightly changed. The new design looks more clean and more easier to find the topic.

Original template of iAndol.com is called Tree2 which was designed by   Headsetoptions, after adopted, the theme has beem redesigned several times, and we will continue to improve it if necessary.

Big news, my blog’s PR is updated to 1 out of 10. It was even no rank at all, but now it is 1, great progress.

The PageRank can be checked in PageRank Checker.info

It is a story, big and long story which comes from nearly half year ago. And what presented in the front of you, is the start of story. This is indeen many people’s dream, it is absolutly many boys and girls’ crystal.

54XING.COM is a company which locates in hangzhou China and the web site we see comes from here. The company is consisted with powerful designer, deeply experienced product manager, and many hard working guys. When i was a member of them, i often felt the driven of the mission-do what we want. No matter later i left, the story, the dream is still burning. I admired the product manager Mr. Mu who comes from a huge internet business company in china, because of his interest the same as me, because of the insignt and personality. Some guys in the photo above is familiar to me although some isn’t. Whatever, dream is the most important thing when young.

Well,there’s still lot things to do as the sites designed.

Fianlly, I hope this will be a fantastic and brilliant long story, good luck, 54xing.com.

Related Read: What is good logo design

[From techradar.com, all rights reserved by orignal author]

Do you like the new Google Chrome? Just admitted, almost all people like it after using it, it is smart, responsing quick and simply and easy-so many merits that hardly can not we dislike it.

However, there is a problem while i was surfing the web today, i cited the reason here:

[From 'http://searchlightdigital.com', all rights reserved by original author]

For those of you who enjoy living under rocks, Chrome is the new browser created by Google. It is open source and currently only available for Windows, although I have found a site that says how to build it from source for the Mac. However, despite the hype, I have decided that I will not be using it. In fact, I’m not even going to download it.

Is it because they don’t have a Mac version? Well, whilst it’s annoying that we Mac users have to wait, I’m not so aloof as to hold that against them, and let’s be honest, there’s a whole lot more Windows computers out there than OSX. Also, I could just compile it myself.

No, the reason I won’t be getting it is their terms of service, the fine print of the program. So, what do they say that I am not happy about?

Section 11.1
You retain copyright and any other rights you already hold in Content which you submit, post or display on or through, the Services. By submitting, posting or displaying the content you give Google a perpetual, irrevocable, worldwide, royalty-free, and non-exclusive license to reproduce, adapt, modify, translate, publish, publicly perform, publicly display and distribute any Content which you submit, post or display on or through, the Services. This license is for the sole purpose of enabling Google to display, distribute and promote the Services and may be revoked for certain Services as defined in the Additional Terms of those Services.

Converted to English this means that anything I send via Chrome is usable by Google, they don’t own it but they can republish it and use it. Imagine that you are using it to post to a forum or blog, Google gets a copy that they can use. Lets suppose you use it to send a message about a really good idea you’ve just had, Google got a copy too.

It may be a really good browser that’s several times as fast as Safari but in all honesty, I don’t think that I can use it knowing that everything I post Google gets a copy of. I run an online game that is free at the moment but what if I want to moneytise it? Google probably doesn’t want to compete with me on it, but imagine if they did? The irony is that I used to use a Gmail account and still use it for some things and I never thought to read the ToC on that.

If you want more stuff about Chrome, PCWorld have a good article that lists 7 pros and cons of Chrome.

Google launched new service and i got the invitation today. After trying the features in it, i found this product was amazing, easy to use, appropriate functions and no code experiences needed. And the look of this product is easy to costomize, the background color, the border line and the font style.

Below are two of the application gadgets, try applications go google-friend-connect.

Gmail has added many new and nice theme for Gmail users.When i open one of my Gmails,i found that i can change Gmail themes,there are many nice theme in it,very very nice.But not all all Gmail users can change your Gmail themes now,because there are only a few lucky Gmail users get the themes change feature.I am very glad that i am the one of them.Thanks,Google!

I don’t often use Gmail,because it doesn’t allow users change themes,i don’t like Gmail’s default theme very much!So maybe this is the main reason for me that i don’t often use Gmail.But i think i will start to use my Gmail again,for i like those beautiful themes.

-What can you find? regist? log in or signin? or help?

-No. There’s no ‘delete account’ button!!!

Well, while i just registed in nectar.com, i’d like to withdraw my decision, but, i can not find the ‘delete account’ button anywhere although i have search turning over the site, i can not see anything about delete the account.

Maybe there are not so many people who will use this functionality, though, i think this functionality is important to user.

Reasons of deleteing account:
1. re-regist a new account but the username is occupied by another one;
2. never use the account again, so i will delete it, nothing left;
3. show respect to the user, do what he like, coming or leaving;
4. internet privacy protection;
5. information abuse risk;
…

Actually, the ‘delete button’ added is not so serious as the participant that the user resource would lost. Whatever, if the site’s service is really not good, no user would stay. Surposing the users can not delete themselv’s account, they probably just leave the username dead sleeping, that is nothing different with former. If the worst thing that users click this ‘delete button’ happened, just take it easy and design a extra work flow to ask why he/she would like to leave.

The reason why users are leaving is most important. If the reason of staying is got, nobody will leave.

Whether you upload, embed, or invite user contributions, Magnify.net’s platform can power your site’s video experience. The magnifyfree product allows you to gather videos from across the web and build your own video channel for free!

Complete control of your site name, url, page design and CSS, as well as 50% of the advertising impressions delivered to an ad network of your choice.

Features

• Free webpage builder
• Webcam capture
• Video discovery from the most popular video sharing site
• Ten 50mb uploads per week
• “Friending” based social network
• 50/50 ad inventory share

You are welcome to share if you know more amazing firefox add-ons that will save time which our readers/viewers may like.
Read It Later

It lets you save articles and webpages so you can read them later, even when you’re offline. Now the internet is your bitch. Firefox add-on
Chunkit

This add-on is so badass, that if search engines made a superhero movie, this would be the Batman. Basically, you get to search any website with sonar vision and see through all the links at once. Firefox add-on
Remove Cookie(s) From Site

So, you visited a website you’re not too proud of, but you don’t want to delete your cookies or you will lose your progress on Defend Your Castle. Well now you can have your cookie and eat it too. Firefox add-on

YourWebsiteValue

This is your childhood cardboard fort of Firefox add-ons. Absolutely useless, but very… very cool. Basically this shows you the estimated worth of most websites. Who knows how accurate and useful it really is, but hey, did you really think your cool fort could actually keep the girls out? Firefox add-on
TryAgain

This is the Drunk Uncle at the bar that won’t stop hitting on the ladies of Firefox add-ons. TryAgain will keep trying to load a webpage when the server is not found, and it won’t stop till it gets what it wants. Firefox add-on
IMDb Preview

IMDb suffers from Wikipedia syndrome. How many times have you started on Pee-wee’s Big Adventure and ended up on The Shining? Too many damn times. However, with this add-on you get to preview links on IMDb and see snip-bits of information without leaving the page. Wait, why doesn’t Wiki have this?
Aging Tabs

What’s your record? 20 tabs open at once? Well Aging tabs will help you realize your laziness by making unused tabs fade and change colors with age. Although, it would be cooler if they made the tabs blow up in a fiery explosion instead.
Tab Mix Plus

This is the ultimate tab collection, greatest hits volume, 0.3.6. It has such classics as duplicating tabs, controlling tab focus, tab clicking options, and many of your other favorite hits. And if you download in the next 15 minutes we will throw in “undo closed tabs and windows!” Firefox add-on
CoolPreviews

Preview how a webpage page looks like before you actually click on the link. So now you can see how unorganized, useless, and ugly the website is before you commit your precious time to it. Dating really needs a tool like this. Firefox add-on
You can also take a look at 5 must have firefox add-ons for social media addicts I found interesting on the other website.

This is me andol. The photography was took in the work place by my colleague just after supper, as the smile you see, i have good work situation, and of course, i do this job so well that i got lots praise.

Ok, this photograpy is not the first one i took in work place, we have had a lot parties in the past two months and had so much funny. Admittedly, I really really enjoy the present job that i nearly change the oversea plan and stay here.

Althought i decided to go abroad to UK at last, this work team and so many great colleagues and even my master of internet product design and all of these make me somehow reluctant to leave here, i love working with them with passion and pate.

[More photography click here]

i’d like to tell some of my sentiment of work for the last two months’ intern. There are three problems i found, the first is CORE STRATOGY. Dim stratogy is dangerous. The second is team cooperation flow. Working flow is fatal to the team working, one this part, the other one another part and suck like this. The third is speed. I think the internet application development should be develped rapidly and evoluted quickly as the users’ feedback comes back.

Although there are many problems and some difficulties else existed, i beleive this project’s future is everbright, of course the condition is to integerate all the available resources and clear the employees’ responsibilities and work flow.

These days i am doing some CSS&HTML work, editing the css file to make the html content displaying correctly. At the first start, the css file size increased repidly from the first line to more than 200 lines, that was only 4 html page’s css style lines.

I noticed this situation and pay lot attention to control the css size as less as possible.

However, the thing happend after several html pages later inspired me: the css file size’s increasing is going down and down, the next dozons html pages consumed totally less than hundred css lines.

So i think that, the css file contained enough code to display the style for the later html page which contributed the size increasing slowly. And if the size increasing progress was recorded as points or short lines, this would be a curve like shape increasing the getting slow growing.

the first design:

the second design:

I designed those two logo plus another modified pattern. It came from the shape of letter “X” and what’s more, looking around, it also looked like a five-angle star which mean the flying start. However, the program manager denied this design thought for this complicated pattern for him and not easy to be recognized by users.

Oh God!!!!!!!!!!!!!!!!

It is really amazing design pattern, right? Simplicity and meanness.

Look the other designer’s work for this:
another work from page designer:

Well, if you were the manager, which one do you prefer, the former or the last?

1. Form interaction

Form is one kind of slow applications in internet, try to register a mail account or modify the private profile, all this need form to be filled and then submitted.  But how about Ajax’s appearances in this? Quickly update after the instant input and response nearly the same time.

2.Deep tree navigator

3. Instant users communication

4.Vote, choice and grade comment

5.Complicated data filter

6.Auto complete

All above are necessary to apply Ajax into the page.

If you want to maximize the revenue of your service you need to maximize completion rates of your web forms. Unless you have some revolutionary ideas to impress your visitors at first glance, it is not enough to simply enable users to sign up on your site. To make it possible for the service to reach a maximal exposure we, designers, need to provide users with a good user experience. We need to invite them, describe to them how the service works, explain to them why they should fill in the form and suggests the benefits they’ll get in return. And, of course, we should also make it extremely easy for them to participate.

However, designing effective web forms isn’t easy. And it has one simple reason: nobody likes to fill in forms — neither offline nor online. Therefore, as designers, we need to figure out sound design decisions to make the form completion easy, intuitive and painless.

But how exactly can we figure out these decisions? Where should the link to the form be placed in the layout? How should we design it? How should we highlight the labels and how should we align them? How do web form design patterns look like in modern web-sites? These were exactly the questions we’ve asked ourselves. And to get the answers we’ve conducted a survey.

Below we present findings of our survey of current web form design patterns — the results of an analysis of 100 popular web-sites where web-forms (should) matter. We have decided to start with sign-up forms first. We present the first part of our findings below; the second part of the survey results will be published next week.

Sign-Up Form Design Survey

The main objective of the survey was to provide designers and developers with some intuition of how effective web forms are designed in practice; we also wanted to present some guidelines of how a user-friendly web form can be achieved.

We have selected 100 large sites where web-forms (should) matter. To select these sites we have considered Technorati, Alexa as well as popularity in search engines and various rankings. We used this popularity as an indicator for sites where web forms really matter as they directly affect business goals and therefore should have been given a high priority during the design process. In particular, registration forms are crucial for social applications which explains why many of the reviewed forms are from social networking sites.

We have focused on sign-up forms as we wanted to consider further crucial forms (e.g. checkout forms) separately. Aftewards we’ve gone through each and every one sign-up form of the selected sites and analyzed the design approaches implemented in these forms.

We have filled in each of these forms using a special e-mail account and a special user name. To make the survey as comprehensive as possible we have identified 29 different design problems and questionswhich may arise when designing web forms.

We have grouped them in categories and attempted to find similarities in design decisions and design ideas. Trying to approach the problem from the usability point of view we have also kept notice of both positive and negative examples to showcase them in this article among our findings.

Please notice that this post is not about checkout forms — that’s a topic for another discussion, we may consider them separately in one of the upcoming posts. We would like to thank Wufoo for providing us with a framework to conduct our survey.

1. Placement of the forms

1.1. How is the link to the sign-up form titled?

Users know that they are supposed to sign-up, register, join, become a member or create an account which is why they are looking for exactly these phrases when they want to participate. Obviously, users expect that a link with one of these links leads to a sign-up form. Unfortunately, that’s not always the case.

The most popular title was “Sign up” (40%), followed by “Join” (18%), “Register” (18%) and “Create account” (17%). We have observed less large, loud and shiny “start here”-buttons as we’ve seen them over the last years. Apparently, designers try to communicate information rathen than design and emphasize the functionality of the service.

1.2. Where is the link to the sign-up form placed?

When users are visiting a site for the first time, they try to figure out what single layout blocks stand for. The eye movements are jumping “all over the place” and users try to understand which areas are more important and where the content he or she is looking for is probably placed. To meet users’ expectations designers need to help users to intuitively anticipate what is required to start using the service.

If the user can’t find the link which leads to a sign-up form, he also won’t be able to sign up for your service. Therefore it is crucial to make the link as visible and as obvious as possible. Where should a designer place the “sign-up”-link to make it more approachable?

According to our survey, the sign-up link

• is placed in the header on 59% of the sites (76% of them have a “sign-up”-link placed at the right upper corner),
• has a prominent position on the homepage on 21% of the sites (link or the form itself is placed on the homepage)
• is hidden behind the “Login”-link in the header in 9% of the cases (e.g. Craigslist).

Not that surprising is the fact that the sign-up link was rarely placed in the sidebar (7% - Propeller, Xing). However, 4% of the sites first offered users to directly use the service and required a registration only when it was required to store the settings.

2. Design of the forms

2.1. Is the sign-up form layout simplified?

Since the user has clicked on the sign-up-link he is likely to have decided to sign up for the service you are offering. More importantly, he has not clicked on the link to explore further navigation options or attractive blinking advertisements.

Consequently, designers tend to remove all unnecessary details and distractions which don’t help the user to complete the form. Often only a logo and the form itself are presented, without any navigation options or additional information. Idea: the user must be able to focus on the task he has to accomplish. Any distractions stand in user’s way and therefore have to be removed.

Since users want what lies on the other side of a form the process of completing forms should be as obvious and as simple as possible. Hence designers often use “minimized” layouts for sign-up forms. According to our survey, 61% of web forms are simplified compared to the general page layout (e.g. MovableType,Livejournal, Amazon, Yandex.ru).

Consider the sign-up form on Yahoo. The visitors are provided only with the form which is required to set up an account. There is nothing else; consequently, there are no distractions as well. Notice that the tone and the language are conversational and appealing. That’s simple, easy and user-friendly.

Flixster is probably our favorite example of an overcrowded form which doesn’t really respect its visitors. The registration page offers every possible navigation option at once. And the login page has outstanding advertisements right next to the login form. That’s not user-friendly. The second busiest web form we’ve seen would be Photobucket.

2.2. Is any additional information provided?

Many designers try to encourage visitors to actually fill in the form by presenting additional information such as help, required information or even copyright disclaimer. It differs from sites to sites; however, in most cases benefits of registration are presented next to the form.

• 41% of the forms provide benefits of the registration
  (MySpace, Del.icio.us, Last.fm, LinkedIn, Digg, Mister Wong, Break.com)
• 28% don’t provide any additional information at all and offer a pure sign-up form
  (Pownce, DeviantArt, Dailymotion)
• 11% inform the visitors how much time investment is required
  (Threadless, Newsvine, WordPress)

Only few sites mention up front what information is needed during the registration (6%), which steps to follow (8%) or provide some warnings, hints etc. (6%, e.g. 37signals, Bloglines).

2.3. One-page-form vs. multi-page form

93% of the forms of the survey turned out to be one-page-forms. Apparently, designers try help users to get the signing procedure as quickly and painlessly as possible. Few sites using multi-page forms often try to combine signing-up with exploring users’ preferences.

For instance, Meebo combines a sign-up form with a complete registration and offers users a sign-up wizard in a pop-up window. The form consists of 6 pages where users are lead from setting their account to providing additional details about their preferences.

2.4. How are titles of the input fields highlighted?

62% of the sign-up forms used bold to highlight the title of the input field. It’s remarkable that not a single site used italics to achieve the same effect. To make the labels more visible 20% of sign-up forms used color and 18% used plain text.

Large version

2.5. Label alignment

To be honest, we have expected a stronger trend toward one of the possible alignments. However, in our opinion no strong trend in the label alignment can be identified.

• right-aligned labels are used on 41% of the reviewed sites
  (YouTube, Facebook, Metacafe)
• 30% of sign-up forms use top-aligned labels
  (Behance.net, Wufoo, Tickspot, DZone)
• 29% use left-aligned labels
  (Digg, Ning, Wykop.pl, 43things, StudiVZ).

According to Matteo Penzo’s label placement research (1996) and Luke Wroblewski’s findings(pdf), top-aligned labels can dramatically reduce completion times since they require less eye fixations. If you want to achieve the same aim but have a vertical screen real estate constraints, right-aligned labels work better. And in case your form requires people to scan labels to learn what’s required (unfamiliar or advanced data), left-aligned labels work best.

2.6. How many mandatory fields?

When conducting a survey we’ve observed a strong trend toward forms with very few mandatory fields. Few years ago designers asked visitors to type in their personal information such as first name, last name, address, country and personal interests. Now login, password and password confirmation suffice.

We found out that 54% of the forms required the user to fill at most 5 input fields (in 6% of the cases registration wasn’t required at all to start using the service). 34% of the forms use 6-8 input fields, while 12% risk user’s patience with over 9 mandatory input fields.

2.7. How many optional fields?

Similarly to above findings one can observe that most sites avoid optional fields and ask users to provide the optional information after the registration process is already done. 62% of the forms had no optional fields at all, and 98% of the forms had less than 5 optional fields.

2.8. Vertically or horizontally arranged fields?

In this aspect sign-up forms show a strong trend toward vertical arrangement of fields with a clear vertical path to completion. 86% of web-sites have input fields arranged vertically. Apart from that, 15% emphasize a beautiful and engaging visual design which is supposed to attract visitors and make them feel more comfortable when filling in the form.

Box.net offers a simple sign-up form with vertically arranged input fields. When the visitors type in the data their eyes are fixed across the vertical axis at the left to the input field.

Mint has a sign-up form with horizontally arranged input fields. When the visitors type in the data they eye needs to jump from one field to the other.

Further findings

• 18% have a sign-in form or a link to the sign-in form placed next to it (e.g. YouTube, Reddit, Digg, Lulu, Metacafe);
• 78% do not use asterisks to highlight required input fields; in most cases neither asterisks nor any other form of highlighting is used.
• 9% use a progress indicator to show to the users where they currently are and which steps are required to get the registration done.
• 85% of the sites don’t use legend and fieldset preferring a simple web-form with as few input fields as possible.
• fields are usually grouped and divided by whitespace (69%), borders are also used (22%), different background colors are used in 9% of the cases.

Bottom line

Let’s conclude the first part of the survey results with a brief overview of the main findings of our survey of current web form design patterns. Please keep in mind that we have considered only sign-up forms.

• the registration link is titled “sign up” (40%) and placed in the right upper corner,
• sign-up forms have a simplified layout to avoid distractions for users (61%),
• sign-up forms are one-page-forms (93%),
• sign up forms attract visitors by explaining the benefits of registration (41%),
• titles of the input fields are highlighted bold (62%)
• no trend in the label alignment can be identified,
• designers tend to use few mandatory fields,
• designers tend to use few optional fields,
• vertically arranged fields are preferred to horizontally arranged fields (86%).

Please stay tuned, we’ll present the second part of our findings next week.

 

June 25th, 2008

Bill Gates’ web experience: Byzantine, idiotic logic

Posted by Michael Krigsman @ 7:03 am

 

Analyzing IT program management failures with the perfect vision of hindsight often leads the observer through a senseless and convoluted maze of past decisions. Studying the Byzantine and idiotic logic behind many IT failures, one wonders, “How did we get here from there?”

Bill Gates experienced this Tower of Babel when he tried to download two Microsoft consumer products (MovieMaker and Digital Plus Pack).

The seattlepi.com released an internal Microsoft email where Bill described his experience. The email begins with Bill’s summary, emphasizing how program management, the coordinating entity, has failed:

I am quite disappointed at how Windows Usability has been going backwards and the program management groups don’t drive usability issues.

Bill then details the complexities that prevented him from downloading the software:

I decided to download (Moviemaker) and buy the Digital Plus pack … so I went to Microsoft.com. They have a download place so I went there.

…

 

 

The second is that this editor is hard to download underneath my web environment and narrow band width.

The third is that configure of this editor is easy, just search the topic in google, there would be mountains results about how to set up the editor’s run environment.