: Could you please point out design inconsistencies in the picture that I have attatched? Okay so first of all I am a developer and I donot have much idea about designing and all. Now it so

@Jamie315

Smrita, I know it can be pretty challenging if you're unsure about the design. I will try to be as clear as possible. You may not be able to implement some of my suggestions because of business policy or authority. Also, this might sound a little prescriptive, please try things out and adjust.

When trying to "fix design inconsistencies" it helps to step back and make a priority list of the thing that is trying to be achieved and the importance of the parts in achieving it.

I would think the goal is to get somebody to click 'Book Now' next to one of the flights (then maybe book a return or something).

In order to do that, they want to know time and price, then maybe airline, class and refund-ability. If you can change the order of columns I would do from left to right:
Price or Time, Airline, Class, Book Now, Fare Type

Change "Please select flight for departure:" to "Departures" . This will be sufficient for a user to identify the table's purpose. The colon is not needed. Make this distinctly large like 18–24px or so. Align the outside edge of the "D" (or the "P" in the current phrase if you can't change it) to the inside edge of the grey border.

Add some padding-left on the first column of entries so there is more space between the grey edge and the content.

Remove all the colons. It might be "proper" or "good" English, but in a table like this it's visual noise.

Increase the size of all the text 2 or 3px.

Next I would change ALL the labels (Original Fare, Cashback, and Payable Fare to be medium grey. Not too light but enough to not be black. This might not work against the green background on those rows, so if you try this and it doesn't work, return to black. Leave the prices black but make them bold.

Next, I would change the Cashback line from red to green. Maybe it's a cultural thing. Yes, red generally indicates an accounting deduction, but it's also a negative signal. Maybe try: 'You save' then the value bold.

In the "Payable Fare" line: the amount bolded. Can it read: "You pay only"

"Fare breakdown" is a big problem. Right now it wants to be the most important thing in the table. But the user wants to see if there's a flight at the right time for an OK price, and we want the user to click Book Now. I would make this a simple underlined link below the 'Payable Fare' line that says "Fare Details" or "Fare Breakdown". Get rid of the solid button like look entirely. Make this be a couple pixels smaller than the "Payable Fare" above it. Try grey or green?

In the Fare Details Hover


this can be a table, so make it one
apply border-bottom of 1px solid #ccc to the td's
add 2-3px padding to the cells top and bottom
align the price values to the right


These changes will make the information look nice and organized.


change background colour to a light grey
remove all the colons
try bold on the label or on the price to see which way reads more
quickly


NOTE Fee & Tax isn't getting its own line right now

Hope this helps, let us know here when you have some progress.

Vote Up Vote Down