0

Okay so first of all I am a developer and I donot have much idea about designing and all. Now it so happens that I have to fix design inconsistencies of the table that I have attatched below.

I would be glad to see suggestions.

enter image description here

Also that hover (the black one) looks extremely odd . What colour should I make it?

P.S. the colour of this table will remain the same (that is white and green )

2
  • I'm going to make this a comment because it's more a UX aspect than design, but "Book now" is a call to action and should probably be a button unless your users really are likely to book more than one flight at once (in which case there would be a "Book all ticked flights" button at the bottom, I suppose.) May 18, 2014 at 9:30
  • The table seems very consistent to me. What, exactly, do yo feel is inconsistent?
    – DA01
    May 18, 2014 at 16:44

1 Answer 1

3

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.

1
  • Thank you so much Jon. I really appreciate that fact that you took your time out to make so many suggestions.You rock:)
    – Smrita
    May 18, 2014 at 8:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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