2

I have working in designing and implementing a form for adding the address in the Shopping Cart for our website, the form initially for first timers or without existing address will looks like the following:

enter image description here But if there was an existing addresses it will stack on the left like the following: enter image description here

I had few complains about the form is not so much friendly or usable, especially upon addition of new addresses the layout will be shifted to right as illustrated in the images.

Any suggestions to make it looks better? would be grateful also for some examples.

Updated Form: enter image description here

  • Are the forms above actually in the shopping cart checkout process? If so, how do you select an address for shipping? – Andrew Martin Jun 21 '16 at 9:05
  • In fact it's after the shopping cart, i have divided the process into three steps like the following: ayaami.com/ocache/869/resources/themes/step-info.png This form for second stage which is Shipping Info. – Sadiq Jaffer Jun 21 '16 at 9:26
  • So how do users select an address from the list for shipping? That's probably half your problem right there. – Andrew Martin Jun 21 '16 at 9:46
  • Basically they fill the first form and then click [ADD ADDRESS], then the record will stack on the left side and the form will goes to the right side, the user will select from existing addresses (Radio button which isn't aligned now) then will click [PROCEED]. – Sadiq Jaffer Jun 21 '16 at 9:57
  • 2
    The radio button to choose that address is quite small and easy to overlook. Maybe add a label to it like "ship to this address"? Alternatively, give the opportunity to nickname the shipping address ("Mom") and have a dropdown to choose one address. The active address populates the shipping form. – dogwoodtree-dot-net Jun 21 '16 at 10:53
1

The design as you show it assumes people want to add multiple shipping addresses and then choose one for the current order. I think this is not the typical use case.

Adding a new shipping address is needed only if it is not yet in the list of existing addresses: Either this is the first shipment, or the current order should go somewhere else.

Having this in mind, I would rename the function "Add Address" below the input form to "Send Here", and continue with the next step. That way, there is no need to "Add Address" and then select it. If this is the first time, only the form is displayed, and after "Send Here", the system shows the next step immediately.

  • Totally true and that make sense for me, I guess I would like to follow your way and make the current address exist only and IF user would add another address will have to click on link "Add Address". Answer approved. – Sadiq Jaffer Jun 23 '16 at 8:34
1

You can ask the user to name the address by something at the end of the check out. So that for the next purchase, s/he can directly select the address from a drop down. In case of new address a specific and prominent button will be present with "Add New" label.

  • 1
    By which you will be avoiding the form shift issue. – bagaria Jun 22 '16 at 7:37
1

Another **possible fix ** could be just swap the position of the form in the second case (where few addresses are already there). And make the entire address chunk/div clickable with different prominent states (hover, selected). Also you can change the visual style of showing it as possible options(in this case the position of the radio button). In the design, everything is right aligned, suddenly those radio buttons are center aligned, which can break the flow of scanning things in your page.

  • I found this post useful, I will try to make it hover or shaded; I have now made the list more aligned than the current one. – Sadiq Jaffer Jun 22 '16 at 8:02
0

I think one of the toughest things to parse here is the typography. All that extra tracking plus all-caps is making this look like a jumble of individual characters, instead of recognizable words.

  • Hmm perhaps but this doesn't confuse the users especially that it has decent spaces which make the words readable. – Sadiq Jaffer Jun 23 '16 at 8:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.