Anvil.app and HTTPS
A quick post to break the drought. I’m not sure if any of you Mac users have heard of or use Anvil.app for front end development — but I love it! Coming from a .NET background, I was in no rush to edit host files, dick around in IIS etc. Anvil takes care of all that.
The one tidbit I couldn’t find online anywhere was how to get HTTPS working with Anvil. A quick tweet and they put me on to Tunnels. A quick gem get, sudo tunnels and we’ve got HTTPS working with Anvil.
File under “shit I wish someone else had documented, so I’ll do it myself”.
A Web App for Converting CSS to LESS/Sass
I made this little open source experiment to see how difficult it would be to programatically parse a CSS file and find the colours used. From here you could sort by count or hue. Rename what you felt mattered on the fly. Download your output. Whatever.
It turns out I wasn’t the only one to be inspired by Nicole’s talk, and Tom Genomi went on to produce CSSDig (albeit in python). It parses files and identifies redundancy.
A colleague also put me on to CSS2Compass, which takes what I was trying to achieve to the extreme. And while it may lack some interactivity, it certainly makes up for it in features.
Building my experiment was relatively simple. Open source scripts and libraries greatly accelerated the process, so the time I spent tying the loose threads together was minimal.
- Flat UI dictates the look and feel (Bootstrap dependent)
- Dropzone handles the file drop
- Filesaver produces the downloadable blobs
- The colour match RegExp and array magic come from Stack Overflow
- Eventually I’ll port the code to Knockout or Angular
Basically, don’t write code that’s already been written.
All things said and done, there are still a few bugs and edge cases. I really don’t want to spend much time fixing them if this script isn’t particularly of value, so I’ll wait and see how it’s received.
iOS 7 Mobile Safari for Front End Developers
In much the same manner as last year’s post on what iOS 6 brought to the table for front end developers, here is what we know about Mobile Safari as of iOS 7 Beta 1.
Whilst particularly sought after features like
getUserMedia remain as elusive as ever, it’s worth remembering that this is only the first beta. Extra functionality was added to Mobile Safari in subsequent iOS 6 beta releases.
What is doing the rounds on Twitter and from my own testing:
- The Nitro engine has not been integrated with UIWebView meaning “native” apps still run 3-4 times slower than Safari
- Page Visibility API support
Allows code to programatically determine if the page has focus. Previously the best way to determine this was using the idleTimer technique. I put together an example a while back about queuing up notifications while the page is idle, but visibility and idleness are two separate things.
- Video Subtitle Support
Supposedly following the Web TT standard.
- XMLHttpRequest 2 Blob Support
My assumption here is that you can now return file blobs via JSON to iOS7?
- Ryan Seddon noted on Twitter that mobile frameworks with non-fixed headers are having some issues with the persistant URL bar sitting on top. I’ve got some screenshots on that towards the bottom.
- Un-prefixing of some
-webkit-items and swapping out for standards compliant versions
- If Apple is focusing on Gamepad support in the SDK, perhaps the Gamepad API will make it to the front end. Not as yet though.
A lot of other stuff remains under NDA because it’s included in WWDC video streams. If you think that means it’s exciting, it’s not particularly. Someone leaked the following image on Twitter, which possibly violates their developer agreement. Dunno, the whole thing’s a farce anyway.
Mobile Framework Headers vs. Mobile Safari Toolbar
This is an example of some of the layout issues to expect with the new toolbar style of iOS7. This is the jQuery Mobile demo page. By default the page header is obscured.
Fixed jQuery Mobile headers do a bit better.
Sencha Touch does a bit better, mostly because I think all headers are fixed by default, but it’s not immune to other issues.
User Styles: The Age
Alternate title: "The day I took Occam’s razor to The Age"
I really dislike visiting theage.com.au. It’s ridden with click-bait articles, annoying advertising and shameless cross promotion, but for some reason we can’t seem to shake it as a local news source. What else are we going to read, the Hun? I’m not alone in expressing these sentiments, and this is a post I could have composed almost entirely from tweets.
I’ve highlighted all ‘news’ on The Age homepage (i.e., not entertainment, sport, editorial, lifestyle, etc) dl.dropbox.com/u/128401/Scree…
This got a few people discussing custom user styles for The Age, and I decided to have a dabble.
Are you left wondering why I hid certain features? Particular “news” streams, comments, author bios et cetera? Let’s focus on the news, and nothing but the news. Reading the comments of any Australian news website, generally comprised of deliberate trolling or plain good old fashioned stupidity, is a pain I wouldn’t wish upon anyone.
*passes thru suburbs* roll up ur window, son. this is a bad neighborhood. this is where ppl who comment on newspaper articles live
You can try my user styles on for size by installing something like Stylish (Chrome Firefox) and copying the styles across from the GitHub repository. I attempted to make the upgrade process as seamless as possible by referencing the raw CSS with an
import tag but GitHub prevents this by serving up a different content-type. That would have meant any improvements I made would have reflected immediately. I’ll think of something else.
I had the privilege of attending number eight in the series of the Melbourne Creative Mornings series. The ideas that Joost Bakker presented were really exciting, and as soon as the video of the event came out I was quick to share it with whoever I know in the industry. They’re just as energised and excited as I am!
With all this focus on the Pebble, the rumoured Apple Watch, and even the iPod + Lunatik setup - I’d love to see some actually useful applications like Strava ported across to work on this new medium.
I think where watch apps would actually add value, instead of simply being a gimmick, is by acting like a HUD for apps when you don’t want to risk your phone being out of your pocket or bag.
Styling File Inputs in iOS6 with jQuery Mobile
File this post under: “stuff that’s in obscure forum posts but not really documented well”. As per a previous post, iOS6 brought about access to the camera in Mobile Safari. While access is not real time (
getUserMedia would be amazing), we are able to prompt the user to take a new photo or access the camera roll. Presumably for security reasons, styling file inputs in desktop browsers has always been hell on earth. Mobile is much the same.
What you can do as a work around is rely on native browser functionality where clicking a
<label> triggers the clicking of it’s associated
<input>. I’ve relied on the native jQuery Mobile button styling for speed, but you can achieve pretty much anything. Hiding the input can be achieved in various different ways, but as far as I know it cannot be
display: none; for security reasons. Setting
visibility: hidden; or
opacity: 0; will all achieve the same effect, and setting
position: absolute; will take it out of the page’s flow.
You can see it in action in the JSFiddle below.
More Form Failures
In the post directly below I discussed the ramifications of bad form design on the overall customer experience. I compared Telstra’s woeful forms to those of The Commonwealth Bank of Australia, and how even a lethargic bank is beating them in the form stakes. Oh how I was wrong.
Unlike the Telstra forms, the Commbank forms do accept ‘space’ as a character. Transactions descriptions have all kinds of horrible length and character restrictions, but I can live with that. The main qualm is that while the account number and BSB fields accept spaces, they still have
maxlength requirements that will trim the last few characters off your pasted value silently. No validation error. No automatic removal of spaces. Nothing.
You could argue that it’s my responsibility to check and compare the account number in the confirmation step. I would generally side with you, but I honestly feel that copy and pasting a value from an email, well, I take it as gospel and I’m sure I’m not alone.
How this differs from the Telstra examples (contributing to an overall shit-house experience) is that this mistake actually costs you money. No-one likes paying bank fees, especially when they have all your money to bet (and lose) already, but this form failure will result in an incorrect transaction and a $2.50 account fee.
Be careful. Bad form design can cost you and your customers money.
An Autopsy of a Bad User Experience
I’d like to take a moment to share a bad user experience with you. Why? I believe it’s important to diagnose the how and the why whenever these issues occur. It’s one thing to feel empowered by social media and sound off your 140 characters of fury. But what does that achieve? How do others learn from these mistakes?
To try and explain what a user experience designer or developer does is not an easy task. Some even contest the field’s right to exist, comparing the UX crowd to SEO specialists and their fellow snake oil salesmen. But for the sake of the word count, I’ll attempt to distill a large part of what UX means to me, into a single key quote:
UX is all about reducing friction.
- Andrew Fisher, @ajfisher
Friction as in, having to fill out unnecessary information. Having to repeat yourself. Reading lots of instructions. Specify a value that should be a default. Unnecessary points of contact. Email activation. Inefficient and inaccessible CAPTCHAs.
We’re taught as programmers to be DRY (don’t repeat yourself), so why must the user repeat themselves? Being pre-emptive. Being presumptuous. Terrible ways to spec and build software, but critical in a user’s path. Speedy processes are, after all, about reducing friction.
But back to the issue at hand: a terrible user experience.
I recently moved to Telstra. For the international readers, Telstra is kind of what you move onto when you’re no longer a tight-arsed teenager and want a telco that actually works. But if you plan to sign up or interact with a Telstra service at any point, the path is unfortunately predictable. Either an online form or the legacy system behind will trip you up. You will receive an unspecific, confusing error. You will call Telstra. The lovely call centre staff will fix the problem. The form or system will remain broken. Repeat.
The flaws in the workflow are plain to see:
- The forms themselves are littered with usability and accessibility issues
- The user is not given a descriptive error or instructions to rectify an error when it occurs
- The user is encouraged to call a 24/7 call centre instead
- The call centre staff spend their time fixing relatively straight forward issues
- The form remains broken
The issues I experienced became largely apparent when I was getting overdue bills that I simply couldn’t login to pay. I had difficulty beforehand getting into the system, but now I had a real financial motivation. I won’t go into the problems I experienced pre-ordering the iPhone 5. That form was presumably cobbled together at short notice after the phone was announced. That doesn’t excuse the number of problems I experienced, but see the workflow above for a short summary of how I negotiated those forms.
Maxlength everywhere and the ‘Space’ key is forbidden
So whenever you see your account number mentioned you will notice it’s neatly broken up with spaces. This was probably done because it makes it easier to read aloud to a call centre operator when you inevitably have to speak to one, but I digress. Almost everywhere you need to enter your account number, you might attempt pasting it in directly from the email.
Paste it in. Fill in the rest of the details. Hit enter.
Oh damn. The spaces are forbidden characters.
Remove said spaces. Hit enter.
Oh now I’m getting an error (depending on the form, it may actually be helpful and tell you that your account number must have one of three numbers of characters). Eventually you’ll work out that there’s a
maxlength on the field and the last two characters of your account number are always trimmed.
Sidenote: I noticed the other day that even the Commonwealth Bank is schooling Telstra in this area. Yes, a bank. Come on guys.
Your username is not your username
Just in case you ever have trouble logging in (you will), it’s worth remembering that your username is not actually your username.
Confused? Don’t be. Try a “forgot my username” email.
Oh great, I thought that’s what it was. Maybe I’ll try resetting my password while I’m at it.
Oh, I see, the label on the left is wrong. It must want my email instead.
Sidenote: Don’t even get me started on the non-standard
<select> elements they use when asking for your date of birth.
Double sidenote: I was 99.999% sure of what my username and password were, and the system isn’t letting me in.
It’s not like the underlying systems are any better
I enjoy re-telling this story. I couldn’t pay any of my bills because I couldn’t create an account. And I couldn’t create an account because the system hadn’t created my “account”. That’s when this lovely exchange took place over the phone.
Telstra: Sir, your account could not be created because the system is missing some key information such as your date of birth. Could we have it please?
Me: You mean the date of birth I just gave you to verify my identity?
Telstra: … Yes.
Me: ………….. Okay, sure it’s XX/XX/XX
Did I mention the system failures?
If you’ve jumped through enough hoops you might finally get to the point where you have an account set up, you can log in to it, and you can finally pay your overdue bills (did I mention my service was suspended?). This is when the call centre operator (who was great mind you), will inform you that the payment cannot be processed because the direct debit systems are down. He’ll call you back tomorrow.
Inconsistent inline errors and error pages
As of right now, I can’t log into the Telstra My Account area because my username and password are “incorrect”. I find this quite funny, because they’re coming from the Chrome Autofill tool and were working previously. Perhaps my account has been locked after too many incorrect attempts? But of course, I’ve got no way of finding out because the system doesn’t provide any user feedback. Then again, I could call that 24/7 support line…
A freebie: Pre-filling Information
In the opening paragraphs I reiterated some of Andrew Fisher’s thoughts about building frictionless experiences. In part that can be expressed as “why ask for information that you already know?”. It’s not critical, but I’ve always been frustrated how something as simple as the “state” field cannot be inferred by GEOIP lookup, or at least persist across steps. Every state field in the system that doesn’t come directly from your account settings will default to NSW. If you change that in step 1, and go to step 2 where you need to enter billing or shipping details, that state has also been set to NSW by default.
The vast majority of sites are guilty of this, but it still shits me to no end.
So who am I to tell the largest telecommunications company in Australia how to run their business? Well, I’m an end user who experienced some pretty glaring issues, for one. On the other hand, I know my way around a computer, and I can build a website or two. So spare a thought for all the people that aren’t even remotely technical. The people that weren’t able to figure out the
maxlength on the account number field was set too low. The ones that don’t understand why a ‘space’ character isn’t numeric. These are sometimes the delightful kinds of people that dial the call centre to give the staff an absolute spray, for experiences they have no control over but must answer for.
Corporations of Telstra’s size (eg: banks) are notoriously silo’d and the speed of change approval can be glacial. At a guess, I’m assuming there are multiple product owners within Telstra that these forms span across - so hopefully some of Telstra’s newly appointed UX leads can internally champion the cause and act swiftly.
Evidence based decision making and rigorous testing play a large role in ensuring change is effective. Tracking the occurrence of form failures and validation errors, as obvious as it seems, would reveal when your form is simply too hard. Drilling down as granular as possible, you may find that end users are having difficult with one field in particular. Perhaps the validation rules around account numbers are generating too many inline errors. Perhaps responding to that might have precluded this whole blog post?
I can’t tell you whether what I experienced was a bad user experience or instead a negative customer experience. But what is important is that these experiences are tied perilously close to the overall perception of the brand. It’s one thing to establish a “tone of voice” or enforce a style guide, but in a digital world, these points of interaction are just as important for representing your company and it’s priorities. From what I’ve seen to date, it appears that UX is not one of those priorities.
UX Lab 013: ThreeJS Battery
It’s been a bit quiet in the lab of late, and for that I apologise. To make up for it I thought I would have a dabble with something small in ThreeJS. I’ve played with it before, but never put out anything production-ready.
3D artwork has become pretty common place these days. But generally you’ll see it flattened, and in turn, unable to be interacted with. ThreeJS opens the web up to a whole new world of possibilities when it comes to gaming and immersive experiences. But what about the little things?
Here’s a little experiment from the lab, demonstrating just how easy it is to bring a bit of excitement to the web. As uptake of WebGL grows, so does the opportunity to liven up the web. I’m not impressed when you can build an entire iPhone with CSS using a single HTML element. I’m actually impressed when you design something awesome, you build it without compromise, and it’s not a completely flat, static experience.
So with that in mind, here’s a shitty battery I built :)
You can go about building things in different ways with ThreeJS. The ability to export existing 3D objects from popular programs like 3DSMax, Maya or Blender is the sole reason this technology is remotely useful in the real world. Strangely enough, I chose to create the battery with primatives, by hand, and not import any objects. No 3DSMax. No Photoshop (aside from a reflection map, oops). Just ThreeJS.
That meant it took a couple of hours one night to create the geometry and camera tracking, and a couple of hours the next night to create all the materials. That’s not long. I really don’t see why more people can’t build stuff like this.
So check it out, the source code is on Github.
iOS Theme Update
I pushed an update to the iOS jQuery UI Theme to add support for the latest release - jQuery Mobile 1.2.0. Not much should change, but there is a notable syntax change to “in page” buttons.
The changes are:
- Added support for jQuery Mobile 1.2.0
- Support for, and styling of new
- An example iOS style
popupas per the image below (would be best if you set it up with a timer to hide after a couple of seconds?)
- Major refactoring of “in page” button styling. No more messy
.ui-btn:not(this):not(that), instead it inherits from
- Closed various issues and pull requests
- While basic popups are supported, no nested popup menu support is available
- As above, button syntax has changed. This causes an issue with
<button>elements. I’ve raised a bug here.
Delta jQuery UI Theme
Hey guys, just a quick heads up that I released the “Delta” jQuery UI theme a while ago over on the blog of my employer, Kiandra IT. It’s a completely free theme, and the best looking one yet. There are some known issues reported on the GitHub repo, so I’ve got to find some time to push up the fixes. All in all it’s pretty stable and cross browser compliant. It works on both light and dark backgrounds, something you don’t always see. It’s also retina display friendly and makes use of my OS-dependent modal script.