5 Different “Share-Link-on-Social Media” Interfaces

Recently while working on my personal project, I did start looking for a nice interfaces to share the links on the social medias, Facebook, Twitter, MySpace etc. Doing so, I came to know five different ways to do that, and hence this experience I would like to share with you and my take on it.

Here are my picks..

1) CNN:

What I love about CNN Interface is it is less clutter and it highlights on mouse-over, though it don’t offer any other Social Media integration like MySpace etc. however the simplicity really the best way to get the thing done quickly.

2) Lifehacker (any Gawker Media Blogs)

Again the simple clean version, what I don’t like the placement of the links to share, reason is when I am done reading the article, then at that time I should be able to share it, because as a reader I am good judge of “should I share it with my friends on Social Media or not”. The best thing I like in this interface though the name of the Author is vivid as compare to the CNN.

3) NYTimes

The minimalist icons and putting few Social Media icon upfront and rest under the “Share” menu is good idea. Though the presentation of that small pop-up is not so really vivid, and visually confusing for the user. It should present the icons of other Social Medias on the different background rather than the White one, to keep it more clear about the choices.

4) Rotten Tomatoes

Using the third-party service and their interface is really a quick way to putting the Share-a-link feature, however I think it does create some redundancy and create a big “What’s the difference between this and that?” question in User’s mind. As we can see in Rotten Tomatoes’ example they put the Facebook and Twitter link upfront like NY Times. However the plethora of options I can see when I click on the “Share” button conveniently from “AddThis” making user experience little more than messy.

5) Mashable

My personal favorite is Mashable,  It is “organic”. Drag and Drop is in User’s nature and utilizing it in an innovative way as Mashable does, it really makes a difference. Presenting only the popular social medias to share the link on to them is the best way to keep the User Experience simple and fluid, with the touch of innovative drag-and-drop feature.

At the end my suggestion is you only need to apply the best suitable interface for that matter according to your site content. However if you are using the third-party tool like “AddThis” then be aware of the duplicity to avoid the confusing for your users.

FedEx Track-bar

Recently I noticed few things in the DHL and UPS and other courier services about the presentation of their “Tracking Detail”, the most innovative one is the FedEx Track-bar.

It tells me exactly what is the current status of my package. Without reading too much “text”.

Here is a lesson for the newbies and experts alike, where the Info-graphic-like picture can represent the detail of the task: Use it! They actually make the task done quickly.

Freelance iPhone App Developer needed…

I am looking for the person who have almost all the following
requirements:

  • Past development of iPhone Apps, it is not how many years of development experience you have. It is about Passion! Do you have it?
  • Extensive knowledge of multiple mobile platforms and their limitations, because Mobile Devices is not your mom’s computers equipped with 4Gig of RAM and 1TB of Hard Drive and always-on broadband!
  • Must know the pain of Users, after all, you the developer, won’t be using that app as much as an average Joe would be using it.
  • Self-motivated, because you are a big kid!
  • Development background with C, C#, Java C++ & Objective-C is helpful, but not necessary
  • Good optimization and debugging skills
  • Understanding of Google MAP API, Twitter API and Yelp API is a big plus
  • Experience working in a startup/garage-based environment, if not, then why not gain some?
  • Preferably a pragmatic + perfectionist combo we are looking for.
  • Also if you are the resident of San Francisco Bay Area that would be great, else not a big deal.


If you think you know that type of person OR if you are that type of
person that we are looking for then why not get back to me?

The Fresh User Experience: Drag to Share

Image Link: http://img262.yfrog.com/img262/9607/9222009121439pmy.png

Yes, I know we are use to with the few steps of sharing when it comes to share the links across our social network Facebook, Twitter, MySpace, Digg etc.

Well, today when I was at Mashable I was surprised to see the new interface of sharing the link among the social media by just Dragging it and dropping it over hte Social Media Icons. It is easy and no need to click-n-click then selecting the social media (YouTube had that Click-Click Steps).

Although it looks good from visual perspective and the ease of use, however is there a way to share accross multiple social-media via one drag and drop, instead of multiple drags and drops. At the moment I don’t see that option, but I hope we going to have some kind of “Basket” or “Add-to-Social-Media Cart” icon very soon near every link.

Web Form Blunder: Act of Labels Placement

Have you read the book name “Web Form Design” by Luke Wroblewski? If your answer is Yes then you must know there are Three known standards for placing the labels on the form. Left Align, Right Align and Top Align (from Field / Textbox). If your answer is in NO then fret not! Read the brief intro of it from Luke Wroblewski’s website http://www.lukew.com/ff/entry.asp?793 .

Again, see the screen-shot above from the Harvard Business Review’s Newsletter sign-up form (http://hbsp.ed4.net/prefcenter/signup.cfm). That’s an epic failure of the design. I see here that user will suffer the  “Puzzle Thinking Syndrome” for such a small task. Why not follow the tried and true standards while developing the web forms, and put the Homo-Sapiens at ease.

My humble 0.02 User Experience/User Interface Cents.

UX Two Cents: Amazon’s Add to Wish List

Recently I noticed strange behavior with the “Add to Wish List” button on Amazon.com.  When I already added the book in my wish-list, why I keep seeing this button, why there is no UI indication that the following book is already added in to my wish list?


In my opinion there should be a Text Blurb that says “Item you are trying to add already in your Wish-list” and a little link that takes me to my wish list. Instead when I click on the Add to Wish List button and then see the already exist message.


Just my UX Two Cents.

How to write a Functional Specs

As a Information Architect and/or Experience Designer you usually involve in the Functional Specs writing too. Thats how they rock!

In my recent experience I noticed few things related to the Functional Specs, they are dry and boring, they won’t offer the “interactivity” or “energy” related to the project.

As per our human nature (remember developers are humans too, pun intended), we enjoy a good movie, novel or any short stories. So why not inject that idea in to our Functional Specs for our project. This is in my opinion a superb way to keep the reader (client, project manager, developer, even investors!) enhcanted with the project and this is the power of “Story”. Explaining the shopping cart process in a story mode is always good for mind, won’t give you the “pressure” and won’t make you “sleepy” while reading it. For instance here is what a typical Shopping Cart Procedure explained in the Functional Specs:

Typical Specs:

As seen on FireBird CMS Functional Specs, you will notice the typical functional specs are just a collection of objects, for instance:

Ecommerce and Online Product Catalogue Features

4.1. Product Catalogue

• List products (Thumb, Title, Small Details, Price, RRP, View, Add to Cart)
• Pagination
• Search by Title and Description

Now imagine if we can explain this in a “Story Mode” which I think is the best way to explain, even the non-techie people will understand.

Product Catalogue: Shopping need catalog too, the best way to present the catalog is by introducing the User with the list of product with the Image of the Product, brief description and the price, if necessary we will allow user to add the product right from the Catalog to the Shopping Cart. Every user has their own prefrences we will provide them a “Pagination” feature, this will help them to paginate the catalog according to their need, we will allow them to paginate the product by viewing only 10 products per page, or 20 or 50 at max.

We will give them the ability to filter the result according to the keywords they are interested in”

Now see the big difference here, I am sure there are certain experts out there who follow that “Story-mode” religiously. But mostly things are explained in the tech-world, especially the Funtional Specs (which they usually treat as a bible of the project, no doubt about it, it is the REAL MEAT)

So the point here I would like to present is… The superb way to present the Functional Specs is using the power of Story, which includes all the detail related to a project in such a way that it won’t become only the “Developers Note” but also shared among the Clients and the Project Owners.

CliqCliq Colors: Very handy app for newbies and experts designer alike.

I generally use this app to capture the impressive colors and steal them for my ideas.

One annoying factor I noticed the Upper-Right-Corner button. It from first impression, sounds like a Settings Button. Where you can set your preferences. Problem is, it is not exactly like that. You will need this button to export your color plates and along with some settings and I do recommend it would be great if the UI especially Navigation Bar/Buttons must have more precise and general-convention-oriented icons.

Overall, the learning curve is not too steep except the above captioned annoying icon representation.

Update: There is a save button appears once you ready you Color grab. Once you click the save button it does took you to the screen where you can see the previously saved plates. Only issue I noticed is the Buttons are too tiny. And it’s like you need to snipe the tap very precisley.

It would be great if icon on the upper-right corner had a text instead of icon. I would suggest “Archieve” is the suitable for it.

Curious Interface of ATM Machine

Since I start getting deep in to the rabbit hole of Experience Design. The Experience sensory in my mind keep bugging me with so many annoynace with machines that is scattered at work at home or almost whereever I go and interact with them.

The first annoynace I experienced deep inside me is the ATM Machine.

They are your window to access your securely store stashed in your secret bank accounts!

Well the frustrating moments starts like this:

  • Please insert your card
  • Enter your pin number, then Press Enter or “#” hash sign.
  • Do you want to Check your balance? Yes / No.
  • Withdraw, Deposit, Check Balance, Quick Cash … Pick one.
  • If Withdraw selected we asked for $20, $40, $60…..$200 and Other Amount
  • You clicked “Other Amount” and entered “$15” and it says you can’t do that, and gives you the math problem to solve to get the amount (divide by 2).
  • Do you need the receipt? Yex/No
  • More Transaction? Yes/No

Wow! So many things that scary devil asks me! Why not it should act in a way I want it to?

  • Swipe
  • Enter Pin
  • From your last transaction you requested $15. Should I spit the same amount. Yex/No
    ELSE
  • Enter the Amount or select the amount ranging from $20 to $200, I picked $200.
  • “Thanks, see ya later”.

The reason things I am wondering about is “Remembering my Preferences”, in case of special occasion, I can pick the “I need Receipt this time now” option, if I want to from the different screen, by selecting that option.

But please don’t ask too much question for a small task. Do honor the user time while designing the interface, don’t make them think, and allow them to get thing done in a swift moment, without any error or annoyance.