I recently visited bitly.com tools page, and noticed interesting interface suggesting me to save its Bitmarklet. So if you visit their page you’ll notice this ”+ bitmark” button with a tip to drag it:
Once you start dragging, the UI now suggest you the next actions:
Google is useful but you aren’t always looking for useful, are you! Sometimes you want to entertain yourself, amuse yourself, there are times when you need a break but not sure what you want to read, there comes Yahoo!
Mind you I’m a big BIG fan of Google but its just recently I realized one field where Yahoo can get an edge over Google. Its not their mail, or the search engine, its their Home Page. Yes! I was always the advocate of Google’s home page, how it only has one text box for search and no distraction at all. It only does what it does best. But with the recent developments like Omnibox (search using browsers address bar), browser extensions for Google search (like the one in Firefox, IE), you no more need to go Google.com.
P.S. If you still heading to Google’s homepage for your searches, you need to catch up! Download Google Chrome.
I’m in middle of rolling out a fresh & clean header across all my websites (i.e. personal website, design blog, plugin pages). Here’s how it looks:
Personal Website: IAmPrashant.com
UI & Design Blog and Plugin Pages: DesignWithPC.com
All that this new header displays is a profile pic, a title, and a short description. The idea was to be clean, minimal, and HTML5-ish! The profile image uses CSS3 border-radius to make it round, CSS3 animations and transitions (on IAmPrashant.com), and the title uses CSS3 font-face ‘PT Sans Narrow’.
In year 2011 India saw a huge uprising in e-commerce with a 30% growth rate, and reaching $10 billion market size. India is undoubtedly on its way to become one of the biggest e-commerce market but its still sad to see no design innovation in the industry. Most of the famous Indian online retailers still follow the same design trend set by Amazon.com years ago.
Take a look at some leading Indian websites and notice the striking similarity with the Amazon.com:
Alexa rank India: 27
The ‘Sell By' date. And you'll be highly impressed with Kroger taking a note of this and making it easily readable from a distance! Readability/Usability Win!
One way to handle a wide range of columns is to merge the related columns into one. This can come handy when you don’t necessarily require to have your data listed in excel (tabular) format.
In a recent project I merged all address related columns into one, and avoided any cluttering. This way I was at ease to add in even more functionality with each row than possible with the original grid format. Here are some screenshots:
If you look at the image you’ll see you still have fields available to be able to sort or add any filtering. You can obviously get away from that if you don’t need sorting on all fields.
Saturday afternoon, I was hungry and wanted to order pizza. I usually order Dominos but today I wanted to try Donatos. So I go to their website on my phone, looked for a link to order online, clicked it, and landed up on their login/registration screen. And of course I walked away!
Moral of the story:
It is far more important for any merchandise to make a sale first than worrying about the email addresses.
Oh yes I ended up ordering Dominos! I left Donatos a feedback though :)
Last week I had this interesting UI problem at work where a user should be able to check or select multiple items from a list. The list only had 6-7 items but it will grow over the period of time.
So I experimented with usual alignments (horizontal & vertical):
Vertical was eating a lot of space and making the form longer. Though horizontal alignment didn’t look that bad at first, but considering the list will grow it was not a satisfying solution.
Solution: List of check boxes in drop down!
It was time to experiment a new idea I wanted to be using since long! A drop down or a combo box of check boxes. Here’s what I came up with:
And it worked great! It took the minimum space on the form, and allowed the maximum flexibility to add any number of check box items. And it wasn’t that difficult to code/layout either :) Here’s the live code and demo with jQuery & CSS.