Usability Wishlist for Amazon Web Services

A Responsive Web Console

John Drago
8 min readJan 20, 2016

Using the AWS Web Console on my mobile device while on the train is basically impossible. Granted, the original parts of the AWS Web Console (EC2 and S3) date back to nearly the time when Clinton was in office, and there were no mobile devices to speak of back then.

I use Chrome on my iPhone 6, and I’m just going to let the AWS Web Console speak for itself (with screenshots):

What is this? A web page for ants???

OK so I’ve got an advantage and I know what to click on because I’ve been using AWS every day since mid-2011.

I click on the tiny “EC2” link:

Removing the extra menu items from the top row *really* makes a difference, dontcha think?

Can’t see much. Let’s click the “1<newline>Running<newline>Instances” link:

Spinners. Xzibit would be impressed.

I don’t know how long I should expect to wait for my “1<newline>Running<newline>Instances” to load, but apparently it might take a while. I get a spinner.

Finally, it loads.

Conerting to 750-digit instance IDs is a big deal. Too bad it’s unreadable here, and clicking the “X” will forever dismiss the message for my user on this account.

Wow. Just, wow. Hey - let’s make that “X” just a little smaller. Since I can’t read the message (which is pretty important BTW) that’s the first thing I’m going to do — close this popup.

OK so I click that tiny thing (marksmanship++) and get to business.

Information overload. Just imagine what I could do here!
  • Would that “Connect” button actually work? From my iPhone? Really? No? Then why is it there, taking up room on my screen?
  • Is “Terms of Use” that important on to be persistently visible on Every Single Screen? For mobile? Really?
  • I can’t think of another app or useful website that uses split panes on mobile. Not a single one.
  • Those column-resizing widgets on the sortable table control barely function on a good day on my desktop. I have no hope for them on my mobile device.
  • “Filter by t…?” — is this the best way to provide search functionality on mobile?
  • Since the most natural behavior on mobile is swipe-to-scroll (vertically) why must I click through endless tabs and be a sharp-shooting master of dexterity to click on tiny icons when I could very easily break something?
  • Why are the “three sizes of bottom split pane” icons even there? I can barely see anything with the two left options, and even the third option only shows a portion of the screen below.
  • Microsoft Outlook Express is *not* a guideline for usability when managing compute instances and other resources in the cloud. Please just stop it.

So…I want to use some other functions. Nothing too new, because those might still have that “beta” feel to them. No, let’s use something older and presumably mature — S3.

I start by clicking “Services” on top:

“Human-Computer-Interaction” and “Amazon” should not be on anyone’s résumé at the same time.

Possibly whoever designed this menu has never been permitted to use the Internet, and has no idea what they are doing.

An artist’s rendition of the UX designer for the AWS Web Console.

Again, I can only progress because I already know where I’m going. Otherwise this is a usability disaster.

I click “S3” (because pfft what else are you going to call it?) and wait.

Holy overuse of whitespace, Batman!

I’m sure someone who knows something about both people and computers was involved in the original design of whatever was supposed to go on this page. They might have been ejected and placed into low earth orbit before this was deployed to production, but I’m sure someone qualified was involved at some point.

At least the color scheme is consistent.

So, (again, because I already know what to click) I click on the “codedeploy-foo” link (next to the search icon, because even though all the terminology everywhere says “this is a bucket” there’s no “bucket” icon under “All Buckets (7)”.

Why is “None” selected? What is “None” anyway?

From this page, I can operate on the bucket itself and change settings for it.

I click “Transfers” because that sounds important.

Prominent calls to action appear even when there is no reason for them to be there.

I’m no usability expert, but something tells me that if this one little checkbox is important enough to be summoned by a great big button at the top of the screen, it’s probably a big deal. There’s no indication of what I should expect to see here (a list of completed file transfers — to and from my computer) yet a great deal of effort has been made to place it front-and-center over other things like permissions, history, traffic analysis, usage of storage space and/or bandwidth over time, etc.

OK, transfers to/from my computer are a really, really big deal. Gotcha.

For some idea of what should go there, I recommend we all spend at least 30 seconds visiting http://emptystat.es/ (it’s a heavy investment but I’m pretty sure it will pay off for everyone).

I click “Properties” at the top:

codedeploy-foo codedeploy-foo codedeploy-foo (wait, what bucket am I in?)

Again, can we make that “x” to remove permissions just a wee bit smaller? I understand the main objective may be to *add* permissions but sometimes we want to remove them, too.

On a mobile device, maybe I could get a whole screen for dealing with something important like permissions. Maybe I don’t need to see a list of objects in the bucket while I’m doing permissions-y things.

Oh hey I can add a bucket policy! Let’s click that.

Oh yeah. Let’s type up a JSON document on the train on my iPhone. Great. “Delete” and “Close” are too close. Seriously how did this get past QA?

I first want to say that those with the patience to type up an IAM bucket policy by hand, from scratch on their phone must exist. Aliens must exist too, but I haven’t met either, so why is this box there? Who is this box for? I’d like to see a demo video of the person who made this page actually using it, for something important, that they want to protect because it’s their ass if they screw it up.

CodeDeploy is a Turd that Must be Flushed, not Polished

I could write a book on all the ways I hate CodeDeploy. Let’s start with the fact that it’s dashboard isn’t responsive, either.

The default view in CodeDeploy

Entering the CodeDeploy portion of the AWS Web Console lands you on “Applications” with no obvious way to get to “Deployments”.

You have to click the menu for that. Oh this dashboard has a special extra navigational element that none of the other dashboards have.

Another tiny arrow you have to click.

After clicking that tiny arrow and then clicking “Deployments” I see this:

Wow. A list of successful deployments!

This is pretty great, but to get to the next page there’s another tiny arrow to click:

Good thing I have 20/15 vision!

So I realize that there’s no way to filter these deployments by deployment group or even by application, so I have to go back to Tiny Arrow on Top -> Applications -> <my application>

To continue this, we’ll switch back to my desktop browser.

Yes those are all the deployments for all of the deployment groups in this application.

Great — so I have a list of “Deployment Groups” on the left and “Revisions” on the right.

Clicking on a “Deployment Group” does not cause the “Revisions” to be filtered by that deployment group. This is beyond comprehension.

These are “Revisions” — not “Deployments”. Why that distinction is made has not been made clear. I’d rather click on a deployment group and then see the deployments to that group.

If I expand one of the “revisions” I can see the deployment group(s) it was deployed to.

Looks great on the surface.

This, while it slows down the process of quickly seeing what was deployed to where and when, can still get us the info we need.

However, there are some problems.

How did this make it out the door to production?

Sometimes the “Deployment Groups Deployed To” is empty:

The Void. So zen.

It would be helpful if I could just click on the “Deployment ID” but I can’t.

So I copy-n-paste the Deployment ID into the “Search by Deployment ID” field after clicking “\/” -> “Deployments” on the special navigation menu (just for CodeDeploy) and see this:

Ah. No wonder.

So then. Going back to this revision in the list of revisions for the application I was viewing:

Why would I want to deploy this again?

The only call to action for this revision is to “Deploy This Revision” — probably not a good idea since it failed when we tried to deploy it. I don’t expect the AWS Web Console to hold my hand and say that I can’t deploy this revision, but if it takes me 10 clicks and copy/paste operations to find out that this revision failed — do me a favor and just tell me right here.

EC2 Integration #Fail

When I view an EC2 instance, this is what I see:

Usability wasteland
  • Make it easier to copy the private and public DNS and IP addresses to the clipboard. That’s all anyone ever does with them.
  • The instance ID is used in CodeDeploy too (and other services). A simple “View deployments to this instance” link would be swell.
  • Cannot click on the VPC ID.
  • Cannot click on the Subnet ID.
  • Why is “Platform” set to “-” when this is definitely Linux?
  • Why is “ClassicLink” set to “-” when it’s not using ClassicLink?
  • Why is the “-” next to “Elastic IP” a navigable link? Why does it take me to a search results page??
  • Clicking “eth0” summons this popup:

(Remember, it does the same thing on mobile.)

So much information! Great! But I rarely (have never) had to debug “eth0” and even if I did, the AWS Web Console isn’t the place to make those kinds of changes. Those changes should happen in your CloudFormation template as God intended.

That’s all for Now

I’m out of time this morning, and better get some work done.

I hope that (after all these years) someone at AWS has tried the mobile app, deleted it (because really who are we kidding with that thing?) and thought “Oh hey I know — I’ll just login with my phone to the AWS Web Console and….oh no.”

--

--