I love E-Trade. I’ve been a customer since the late 90’s. Heck, I was a customer of E-Trade’s predecessor/progenitor: K. Aufhauser. Why do I like it so much? Because I’ve always found E-Trade’s web site to be head and shoulders above the rest. Everything in its user interface (UI) was arranged in a clear-cut manner and there was a consistent “theme” and usage pattern to every page across the site.
Alas, recently the management at E-Trade must have decided that their site wasn’t good enough and they began “improving” it. A few months ago, E-Trade programmers modified the online bill-pay feature - a feature that was already perfect, as far as I was concerned! The original page had two “columns”: a wide one on the left, which simply listed all of ones registered payees with a text field in which to enter the amount to be paid and a calendar widget through which to specify a date of payment, and a fairly narrow one on the right, which showed a historical record of scheduled and previously made payments. Very simple. Very elegant. In my particular browser window, I could see/edit 20+ payees and see a record of 20+ payments. Whatever I didn’t see, was just a single scroll away. I wish I had a screen shot of the original user interface. But since E-Trade’s first modification came without notice, I didn’t have a chance to get one for comparison.
This first modification was not as usable as the old one, as far as I was concerned as things had begun to “spread out” - apparently the UI designers felt that white space was more important than information. But, alas, I don’t have a screen shot of that either - since that particular experiment didn’t last too long. It was quickly replaced with the even uglier, even less usable user interface that presents itself today. Since I’m just about fed up (especially since E-Trade is not threatening with an overhaul of the entire system - based on what I’ve seen in the Bill Pay area, I shutter to think what awaits me now), I decided to take screen shots this time and elaborate on what I feel are its most annoying shortcomings.
As an aside, I should mention that I have 25+ years of software development experience - much of which in UI design - so I may be a little more critical than the average user. But my comments are solely based on my use of the system - which has suffered greatly from the changes that were made.
Let’s start off with a screen shot of the screen that precedes the “Bill Pay” page:
Note the look of the tabs for both E-Trade’s overall tab group and the “Account Details” tab group (I put a red “1.” next to both): the outline and internal shading of the tabs is identical and the fonts are the same (the lower tab uses a slightly smaller font size). There is a consistency of theme there. Also note the size of the font used in the table that shows transactions and the row height for each transaction. The original Bill Pay’s “Payee” table where you entered payments used to have row heights that were similar.
Now, let’s go to the “Bill Pay” page:
Quite a jarring change, wouldn’t you agree? The tabs for the “Bill Pay” tab group (red “1.???”) look like they were drawn by a 10-year old and their shading (none) is completely different from the E-Trade tab group shown just above (red “1.”)! Even the fonts are different (and larger, wasting space). In other words, the page’s theme isn’t consistent. And the tabs are just plain ugly. But that’s a trivial shortcoming compared to the others.
The row height (see “2.” on image above) for each payee is humongous. As mentioned before, I used to be able to see - WITHOUT SCROLLING - about 20 payees in the old Bill Pay. Now I see seven! Why is that important? Because most of us try to pay our bills once a month. It is, therefore, nice to be able to simply click on the “Amount” field for each payee (and maybe specify a later date) and then hit “Submit”. In the old Bill Pay, I could do all this without ever scrolling. Now, I can’t avoid scrolling to pay everyone, scrolling to re-check the amounts I entered, and then scrolling some more to get to the “Submit” button.
So why is each payee row so tall? Well, the only answers I could come up with are (a) a love for white space and (b) to accomodate the drop-down menu that lets one specify the money source (account) for each payment. I won’t discuss (a), but (b) merits further inspection:
Let’s first review how we got to this “Bill Pay” page in the first place. E-Trade, on its main page (“Account Overview”) lets one pick an account to work with. That leads to the “Account Details” page shown in the first image above. From there one clicks the “Bill Pay” tab to get to the second image. So by virtue of how one got to “Bill Pay”, one has already decided which account to pay with! So, why is there a need to have an “Account” combo box for each payee when most folks just want to pay their bills from the account they’re in?!
Why did E-Trade lower usability for the most common use case in order to satisfy a really infrequent one??? Poor thinking.
A much better design (which E-Trade actually uses in the “Account Details” image 1): simply put a single Account drop down at the top of the “Bill Payee” page, instead of one for every payee row! For the common use case, users get to see/pay more of their payees without scrolling and for those who need to pay some folks with one account and others with another, they would simply hit “Submit” more often (once for every account from which payments need to be made).
Other than the oversized rows, the new design simply wastes a lot of screen real estate that should be used to show information (see labels “3.” in image above). The most glaring example of this is in the tab group on the right. The most useful one in that group is the “Activity” tab (don’t ask me why E-Trade designers didn’t make that the first tab, given that it’s the one most people need to look at most frequently! Or why they do some inane auto rotation that, if you leave the tab group alone, auto-rotates focus through all the tabs - very annoying and zero value!) Anyway the “Activity” tab shows historical payment activity as well scheduled payments. It’s basically a table with three columns: “Send on”, “Paid to” and “Amount/Status”. If the developer of this screen had done his job, this table would stretch with the available browser space, instead of fixing it at some arbitrary width (see all the white space in the image, for christ sake!) that requires the column content to spill over a single line - again reducing the number of rows that can be shown without scrolling, and making the whole thing just less readable. But the waste of space doesn’t stop there. Why, in gods name, is this tab group not the same height as the payee panel to its left - i.e. why doesn’t it make use of the web page, like the payee panel??? Now, in addition to only seeing SIX activities (due to row height), I need to scroll the “Activity” tab independently of the web page (see labels “4.” in image)!
(the fact that in Mac OS X you don’t see scroll bars until you hover over them doesn’t help the situation).
Just poor, poor design.
