Notes on Design Podcast

nandhagopal
Notes on Desig Podcast
5 min readAug 25, 2015

“Sharing my notes (on design)” — this is something I thought I’ll do once in two weeks…

I have been hearing various design podcasts over the past few weeks, personally I have started feeling that I should document it or at-least write few things about it for reference (basically notes). Don’t get me wrong its not an effort to copy the notes from the website or content and claim to be mine. Its an exercise for me personally to capture things I love and refer later.

The problem with podcast is you cannot quickly breeze through or get to specific details without having to go through the entire audio again. There is no (book marking) tool to do the same.

So, as I take note I thought I can also publish them, giving all credit to the speakers and organisers, so anyone can refer if required.

The only constrain I have forced myself would be that after hearing to the podcast I’m going to spend spend just 10 minutes (I’m going to time it ) trying to write what I remember.

How will this help me (as a reader)?

  • It will be very concise.
  • Just the take aways
  • If your curious to understand more then you could listen to the podcast

Possible Concerns…

  • There is a very good chance that I could miss interpret or give the wrong specific (since it is also dependent on my ability to retain information)
  • Might be skewed since it could be my bias or mis-interpretation

I’m going publish my notes for few episodes initially then decide if it makes sense to continue..

Excerpts from the Podcast

Notes on “Designing Credit Card Form” by Chris and Jon

Podcast: DesignReview (E21)

Link to podcast: http://www.designreviewpodcast.com/05/19/2015/episode-21-designing-credit-card-forms/

Insights

  • Having a darker background(bg) or visually giving it a darker feel generally gives a secured feeling for the user
  • Having a grey bg gave a 11% uplift, grey is popular colour
  • Field label above the field is the robust way of labelling
  • Instead of saying “Address 1” “Address 2” if you can be specific on the format.

Form Errors and solutions

  • Try and keep the errors inline (example virgin airlines)
  • Two types of error exist in forms Pre Submission Validation errors (check if input is correct or not). Post submission, Server validation to check the content
  • Field labels should be promotional to the length of the content. “when people see an element they kind of start assuming or expecting it to work the way it looks” Don Norman
  • Do user work when ever possible, if there is a next time, or for retuning user try and store details
  • Make sure credit card section is on a separate page, it is easy for the user to rectify just that information.
  • Once form is submitted, during post validations errors when you return the form try and retain all the details user has entered (of-course mark the wrong ones in read).
  • Try and make sure every label in the form is there for a reason, get the other information later.

Design for the right audience if you desiging for end users then Least amount of information you need to do a credit card transaction

  • Number
  • Name on card
  • Expiration Date

Other information are generally required for checking fraud or for the banks to0gather.

Possible type of transaction..

  • Customer and Business (you can just the 3 information mentioned above to complete the transaction)
  • Business to Business (more information like tax and others, 3 information rule does not work)
  • Government Agency Transaction ( More legal details required, more information like tax and others, 3 information rule does not work)

More …

  • “Accordian” style checkout form really helps compared to hiding information as wizard, this way users will be clear what is coming up and what’s behind them. Users are ok even if the form for longer, it is not always about shorter forms. But try and justify why you are collecting those information.
  • You don’t need to really ask “Credit Card” type, the first 2 or 3 numbers would do the job for you.
  • Try add spacing between every four characters while entering credit card numbers, its easy for users to remember and type information.
  • When people see credit card declined your could loose 2–5 % of the sales, so makes sure users enter the right informations.
  • Its a good practice from a users perspective if you have Paypal/Stripe as a backup (you might loose 5% of transaction, but better than loosing the user any-day)
  • You don’t need to really ask “Credit Card” type, the first 2 or 3 numbers would do the job for you.
  • Try to add spacing between every four characters while entering numbers, its easy for users to remember and type information.
  • When people see if their credit card is declined you could loose 2–5 % of the sales, so makes sure users enter the right informations.
  • Its a good practice from a users perspective if you have paypal/stripe as a backup (you might loose 5% of transaction, but any-day better than loosing the user)

Why CVV?

Helps system confirm you are in possession of the card,

Tip: showing a picture generally helps jog users memory.

Expiration Date

Try and Match the cards format when users are trying to enter the date. Its a lot more easier for users to relate.

Submit Button

Its important to let the users know whats going to happen next, example if you are going for a review page then call the button “Review” or if you are going to charge without review call the button “Pay Now”. Try and avoid scary message like “don’t press the button again, you will be charged twice”.

Closing the Experience

Have a nice ‘thankyou’ or feedback message, something like (your product is on the way…) to make sure you have a good closing note to your experience.

About Design Review

Other References Mentioned in the podcast

http://www.lukew.com/resources/web_form_design.asp

http://www.Baymard.com

http://bradfrost.com/blog/post/single-field-credit-card-input-pattern/

--

--