I am currently building an app for the local transport company. The Company got an API where I can get the details of all travel card (pre-paid or period (like 7 or 30 Days of unlimited travel)).

I have published an app already but I have recieved complaints about its layout and overall experience. So, my question is, how do visualize a travel card with its past transactions in the best way?

A sample of the UI - Made using MS Paint

  • Is there a reason for the massive difference between numeric size in the two screens? Left seems double the size it should be and right seems half the size it should. Sep 5 '13 at 20:20
  • @bendataclear, I have no reason to not change the size. The reason for why I did it was that on screen 1, the balance is the most important followed by the name of the card followed by the cards serial, but at screen 2, all properties of the transactions are just as important. But this is my opinion and I dont know if it applies to everyone. (I can launch an in-app survey and ask the users if necessary) Sep 5 '13 at 20:29
  • I do agree the font should be larger on the left screen, just maybe not such a big difference, I find it a bit jarring. Sep 5 '13 at 20:32
  • Where do you put the details about what the valid period of travel is for the card (i.e. if it is 7 days or 30 days, and whether it is unlimited to between zones/destinations)? I think the font size is suitable, but needs some contrast so it doesn't blend in too much with the text.
    – Michael Lai
    Sep 5 '13 at 23:44
  • I dont know yet. Some people even have both period tickets and a travel purse (like school period ticket, they are only valid until 19:00 then you must use your purse) Sep 11 '13 at 18:53

This to be improved by just going through a few exercises:

  1. List the use cases of each screen for the user. For example, "I want to see all of my cards", "I want to see how many transactions are on each card"
  2. Prioritize this list by going through your design and acting out what you think users would typically do.
  3. Once you've got that list, redo the design such that important pieces are towards the top , bolder,and larger; and less important pieces are smaller, lower contrast, or eliminated entirely.
  4. Then go back, and add either some skeumorphism, as suggested earlier, or use some shading and gestalt principles to group relevant items together.

Some things I think you'll find:

  1. Does the first screen really require the card serial numbers, or whatever those are? That number could very easily be in a gray color in the top right of the second screen.
  2. The dates on the second screen probably aren't that important, or at least they aren't more important than the label or the amount, so they should probably be simplified and presentation and lower contrast
  3. You've bolded all of your headings, and I have to wade through three levels of headings to actually get to the information I'm looking for. While the headings should look like headings, they should clearly be in a header or some other place that my mind automatically knows to skip unless I'm looking for them.

While I am not a big fan of skeumorphism as a tendency in design, I think it should be used as a tool whenever needed and this is the case you should do so.

The travel cards within the app are equivalents of the physical travel cards. AFAIK, one user does not have many of them, so there should be no need to worry about how to pack 20 of them within one interface, it would rather oscillate between 2-7 cards (just my guessing, plus archive ones of course). Thus, you can go for a more skeumorphic interface, of course still keeping the graphical design within some reasonable limits.

You can see what I mean e.g. in the Passbook iOS app - screenshots here: http://www.telegraph.co.uk/technology/apple/9326872/Apple-WWDC-iOS6-Passbook-app-prepares-iPhone-to-act-as-e-wallet.html - it also regards packing multiple cards within one screen (you can see 8 within one view in this example, which is pretty good result, I think).

Regarding the details view, you could go further, and expand (also skeumorphically "pulling it out" of the "wallet"). The card could show, then, the list of transactions - scrollable if necessary.

  • One reason for having multiple cards would be if you manage the cards for others. Feb 15 '19 at 14:48

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.