October 11, 2013

Common design issues in Hindi blogs हिंदी ब्लॉग डिज़ाइन

Compilation of Hindi blog directory has its thrills and travails. We have talked about the positives of the Hindi blogosphere earlier and in the present post, we'd share some very common design and readability problems we found on Hindi blogs.

We feel bad when we find that many Hindi bloggers ignore some very elementary design aspects and it makes their blogs shabby, unprofessional, kiddish, unreadable... sometimes even ugly and irritating. It is even more pitiable considering that most Hindi bloggers do not spoil their blogs in trying to monetise them, an irritating tendency we see in many English blogs.

Let us show some common design and readability issues by real examples. We have, however, masked the blogs' identity by smudging, blurring or shading some parts. We have given links to posts on ITB on related aspects.

A. The first image has screen shots of two blogs. The main shot shows a large number of elements all around with hardly much real content. The inset is a blog in which the opening screen has nothing but a huge photo.

ITB's view: Don't clutter the blog. Give prominence to the main content. Show up the best or the most current content in the top 10 inches of the blog.
ITB references: best websites are clean and simple . put best content in top 10" of the blog   

B. In the image below, the top screen shot is a post supposed to be in Hindi but when it was posted by the blogger on the blog, in native font, it became abracadabra. The lower [red] text is a part of the huge label list in the bottom of a blog. The text [blue] in the right column is a portion of a massive label list in a sidebar.
ITB's view: In Hindi blogs, use Hindi in Devnagri script and in Unicode font, not Roman script or native fonts. Use labels wisely; when the label list is too big, it not only loses its utility it badly clutters the blog.
ITB reference: use labels effectively   

C. Have a look at the screen shots of text as it appeared on two blogs. These shots show spelling errors or matra issues, indicated with arrows.

ITB's view: Before you push the 'publish' button for a post, have a final look at grammar, punctuation [especially the usage of ending marks and indentation] and matras [especially 'ki' and bindu as in 'hain'].

D. The next image is a collage of four columns taken from different Hindi blogs. Note the first one: it has a thin columns that cannot even list the month-wise archives properly. There is a widget under it [a red arrow pointing at it], which does not open as it cannot be accommodated in the column. In the second one, the sidebar is comparatively wider but is so much filled with text that you cannot comfortably read it. The third shot [dirty yellow] has a sidebar hanging beyond the main content and the blog's bottom is full of badges and an empty looking social widget. The fourth one has enormous blank space [grey] and a few links and widgets scattered here and there. 

ITB's view: We have seen very long and thin sidebars in a large number of Hindi blogs, including those listed in the Directory of Best Hindi Blogs. Sometimes the sidebar hangs down much beyond the main content. We advise that you keep a decent width to the sidebar(s) and keep only those widgets in the sidebar which add value to your blog. Do not over-stuff the sidebar(s) with text and long lists.
Many bloggers stuff long text and long lists, blogrolls, badges etc in the sidebar which makes the blog look unkempt and childish. Widgets that do not open or go beyond the sidebar also spoil the looks. Blog's bottom is not a sink or dustbin; it should also be kept neat and clean, and it should be used purposefully. 
ITB reference: using widgets with impact  

E. This collage has three parts. The top right screen shows a huge popup covering the entire page. The rectangle below it shows a post that is an image of the blogger's article published in a magazine, which is not readable. The third shot, in blue, is an example of (i) text that is unreadable due to poor contrast between the text and the background, and (ii) long sidebar that goes beyond the main column.   

ITB's view: Pop-ups are OK if they serve a purpose, for example, asking the visitor for some action that will help him in some ways. Even there, pop-ups should not be too big and should go away if the visitor does not take any action in 5 seconds or so. Use scans for reading text only when it is unavoidable. 

F. The collage above has four screen shots. Look at the readability of each of these portions: light blue text on green; black on blue; light text on background that has text and also nearly the same colour value as that of the text; and [at the right bottom] text and background of almost similar hues.

ITB's view: Text is there to be read, so do not ignore text colour in relation to the colour of the background. Avoid experimenting with text couration. [More on this after image 'G'.]
ITB reference: taking care of text colour  

G. This picture is even more interesting when it comes to reading and use of text colours. Look at the top pink bar and notice how the text becomes unreadable because of wrong choice of colours. In the two left columns, do you notice the use of bright green, pink, cyan, orange and yellow colours? 
Have a look at the Chrome warning. Your visitors are likely to get such warnings if you put on your blog links and widgets that have malicious code. Will a visitor getting such an alert visit your blog again?

ITB's view:Being playful with colours is OK, but we should not take too much liberty with TEXT colours. Whether in text or otherwise, avoid using garish colours, especially the primary colours - red, green, yellow and blue. In blogs and websites meant to be read rather than seen, one should use a sober colour scheme in which text is eminently readable. Text in such blogs should not attract attention to its looks such as curious font, variations in text size, and too bright and gaudy colours.
Well, we have talked recently about the risk of putting malicious code on the blog. This is not a design issue but we put it here to illustrate the point.
ITB references: when a blog is too gaudy . beware of harmful code     

Other annoying issues we found on Hindi blogs: 
Use of too small or too big text.
Too big footers after each post, giving details of other blogs of the same blogger etc.
Use of photos of sizes that are too smaller or bigger than the width of the column in which they are put.
Childish use of text inside title images.

यह पोस्ट अंग्रेजी में है, लेकिन चूंकि ज़्यादातर बातें चित्रों के माध्यम से समझायी गयी हैं, हमें आशा है कि हिंदी के ब्लॉगर्स उनका लाभ उठा सकेंगे. हिंदी के बारे में पोस्ट हिंदी में नहीं लिख पाने के लिए हम क्षमा चाहते हैं.