<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:dc="http://purl.org/dc/elements/1.1/" version="2.0"><channel><atom:link rel="hub" href="http://tumblr.superfeedr.com/" xmlns:atom="http://www.w3.org/2005/Atom"/><description>My name is Tait Brown, and I’m a Melbourne-based UI designer and a front end developer. I like to make stuff.
taitbrown.com

taitbrown@gmail.com


var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

try {
var pageTracker = _gat._getTracker("UA-327294-3");
pageTracker._trackPageview();
} catch(err) {}</description><title>Nothing Insightful</title><generator>Tumblr (3.0; @taitems)</generator><link>http://taitems.tumblr.com/</link><item><title>User Styles: The Age</title><description>&lt;p&gt;&lt;small&gt;&lt;span&gt;&lt;strong&gt;Alternate title:&lt;/strong&gt; &lt;/span&gt;&lt;em&gt;&amp;#8220;The day I took Occam&amp;#8217;s razor to The Age&amp;#8221;&lt;/em&gt;&lt;/small&gt;&lt;/p&gt;
&lt;p&gt;I really dislike visiting &lt;a href="http://theage.com.au" target="_blank"&gt;theage.com.au&lt;/a&gt;. It&amp;#8217;s ridden with click-bait articles, annoying advertising and shameless cross promotion, but for some reason we can&amp;#8217;t seem to shake it as a local news source. What else are we going to read, the Hun? I&amp;#8217;m not alone in expressing these sentiments, and this is a post I could have composed almost entirely from tweets. &lt;/p&gt;

&lt;blockquote class="twitter-tweet"&gt;
&lt;p&gt;I’ve highlighted all ‘news’ on The Age homepage (i.e., not entertainment, sport, editorial, lifestyle, etc) &lt;a href="http://t.co/9cc1jbbiIW" title="http://dl.dropbox.com/u/128401/Screenshots/wkpt.png"&gt;dl.dropbox.com/u/128401/Scree…&lt;/a&gt;&lt;/p&gt;
&lt;div&gt;&lt;a href="https://twitter.com/bobearth/status/313587617746780160"&gt;March 18, 2013&lt;/a&gt;&lt;/div&gt;
&lt;/blockquote&gt;

&lt;p&gt;This got a few people discussing custom user styles for The Age, and I decided to have a dabble. &lt;/p&gt;
&lt;p&gt;&lt;span&gt;Are you left wondering why I hid certain features? Particular &amp;#8220;news&amp;#8221; streams, comments, author bios et cetera? &lt;/span&gt;&lt;span&gt;Let&amp;#8217;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&amp;#8217;t wish upon anyone.&lt;/span&gt;&lt;/p&gt;

&lt;blockquote class="twitter-tweet"&gt;
&lt;p&gt;*passes thru suburbs* roll up ur window, son. this is a bad neighborhood. this is where ppl who comment on newspaper articles live&lt;/p&gt;
&lt;div&gt;&lt;a href="https://twitter.com/Tormny_Pickeals/status/291959809425690624"&gt;January 17, 2013&lt;/a&gt;&lt;/div&gt;
&lt;/blockquote&gt;
&lt;script charset="utf-8" src="//platform.twitter.com/widgets.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;p&gt;You can try my user styles on for size by installing something like &lt;strong&gt;Stylish&lt;/strong&gt; (&lt;a href="https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en" target="_blank"&gt;Chrome&lt;/a&gt; &lt;a href="https://addons.mozilla.org/en-US/firefox/addon/stylish/" target="_blank"&gt;Firefox&lt;/a&gt;) and copying the styles across from &lt;a href="https://github.com/taitems/The-Age-User-Styles/blob/master/source.css" target="_blank"&gt;the GitHub repository&lt;/a&gt;. I attempted to make the upgrade process as seamless as possible by referencing the raw CSS with an &lt;code&gt;import&lt;/code&gt; 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&amp;#8217;ll think of something else.&lt;/p&gt;
&lt;p align="center"&gt;&lt;a href="https://github.com/taitems/The-Age-User-Styles/blob/master/source.css" target="_blank"&gt;&lt;img alt="image" src="http://media.tumblr.com/4673b722231f44334dd4b75276db76f3/tumblr_inline_ml8f96sGM71qz4rgp.png"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p align="center"&gt;&lt;a href="https://github.com/taitems/The-Age-User-Styles/blob/master/source.css" target="_blank"&gt;&lt;img alt="image" src="http://media.tumblr.com/68c8df54b46ed023e14c7030fa1b6fac/tumblr_inline_ml8f9kZ2ur1qz4rgp.png"/&gt;&lt;/a&gt;&lt;/p&gt;</description><link>http://taitems.tumblr.com/post/47934962902</link><guid>http://taitems.tumblr.com/post/47934962902</guid><pubDate>Sun, 14 Apr 2013 16:51:00 +1000</pubDate><category>the age</category><category>user styles</category><category>design</category><category>custom</category><category>stylish</category><category>css</category><category>css3</category><category>readability</category></item><item><title>I had the privilege of attending number eight in the series of...</title><description>&lt;iframe src="http://player.vimeo.com/video/63225503" width="400" height="225" frameborder="0"&gt;&lt;/iframe&gt;&lt;br/&gt;&lt;br/&gt;&lt;p&gt;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!&lt;/p&gt;</description><link>http://taitems.tumblr.com/post/47501179459</link><guid>http://taitems.tumblr.com/post/47501179459</guid><pubDate>Tue, 09 Apr 2013 11:03:34 +1000</pubDate><category>sustainability</category><category>environment</category><category>cafe</category><category>culture</category><category>recycle</category><category>reuse</category></item><item><title>With all this focus on the Pebble, the rumoured Apple Watch, and...</title><description>&lt;img src="http://25.media.tumblr.com/b2a00e5fa53ecc6622fee19df72a4be9/tumblr_mh9u3rjyrm1qadqixo1_500.jpg"/&gt;&lt;br/&gt;&lt;br/&gt;&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;I think where watch apps would actually add value, instead of simply being a gimmick, is by &lt;span&gt;acting like a HUD for apps when you don’t want to risk your phone being out of your pocket or bag.&lt;/span&gt;&lt;/p&gt;</description><link>http://taitems.tumblr.com/post/41589989177</link><guid>http://taitems.tumblr.com/post/41589989177</guid><pubDate>Sun, 27 Jan 2013 17:32:00 +1100</pubDate><category>strava</category><category>apple</category><category>watch</category><category>fitness</category><category>app</category></item><item><title>On "Page Weight Matters"</title><description>&lt;a href="http://blog.chriszacharias.com/page-weight-matters"&gt;On "Page Weight Matters"&lt;/a&gt;: &lt;p&gt;&lt;strong&gt;tl;dr&lt;/strong&gt; - page weight never stops mattering&lt;/p&gt;
&lt;p&gt;It’s always a relief when you see your own personal opinions reinforced by industry heavy-weights. The linked article discusses the impact of page weight on the viewing experience of YouTube. There’s a prevalent developer ethos that HTTP requests are the devil, so combining and minifying (and ideally g-zipping) is the best way forward. I’ve worked on relatively straightforward projects in the past where the JavaScript alone weighed in around 1MB+. But that’s apparently okay, because once it’s loaded, every subsequent visit is a cache-hit, so it’s near instantaneous. The user cops the initial wait on the chin, and apparently it’s all smooth sailing from there. &lt;em&gt;Except, that’s a bullshit attitude.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;I don’t believe for a second that just because some home internet connections are faster than ever, that modularity, optimisation and bit crunching are no longer relevant.&lt;/p&gt;
&lt;p&gt;This is based purely on the observations that:&lt;/p&gt;
&lt;ul&gt;&lt;li&gt;Our websites are increasingly being consumed outside the home network (phone, tablet, “dongle”), and LTE is young and 3G still crawls.&lt;/li&gt;
&lt;li&gt;As the number of users connected to the Internet is increases, so does your potential audience. Your resources can be served much more frequently than ever before, costing you money and bandwidth. Do you think Facebook can afford to serve 1MB JS files to its 1 billion users?&lt;/li&gt;
&lt;li&gt;We live, learn and work in a global community now, as the linked article demonstrates, and what is an acceptable page size locally may not be acceptable globally.&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;But where to from here? I’m not a network engineer, but I can certainly recommend research around code and CSS modularity, resource prefetching and other asynchronous techniques. Making your user wait while &lt;em&gt;every single resource you could possibly ever want to use downloads&lt;/em&gt; is just not acceptable. The end user doesn’t care how fast &lt;em&gt;your&lt;/em&gt; computer or connection is.&lt;/p&gt;</description><link>http://taitems.tumblr.com/post/40224655301</link><guid>http://taitems.tumblr.com/post/40224655301</guid><pubDate>Fri, 11 Jan 2013 13:51:15 +1100</pubDate><category>performance</category><category>optimisation</category><category>html</category><category>web</category></item><item><title>iosOverlay.js — iOS Overlay/Notification Plugin</title><description>&lt;p&gt;Here&amp;#8217;s a plugin that allows you to place iOS-style notifications over your web app. It&amp;#8217;s useful for showing short succinct messages, or notifying the user of what action is being performed. It&amp;#8217;s great for the same reason that the native iOS overlays are too; it&amp;#8217;s intrusive enough to grab your attention, but doesn&amp;#8217;t steal focus entirely. &lt;/p&gt;
&lt;p&gt;This plugin works equally well on desktop, mobile and tablet.&lt;/p&gt;
&lt;p align="center"&gt;&lt;a href="http://taitems.github.com/iOS-Overlay/" target="_blank"&gt;&lt;img alt="image" src="http://media.tumblr.com/48b1712f70567a6451c5abc29f65a9cb/tumblr_inline_mgbwuz9XMQ1qawqhu.png"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Given the trend towards micro js libraries and removing dependencies, this plugin can stand alone or work nicely with other frameworks.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Features and details:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;&lt;li&gt;Uses CSS3 transitions for smooth animation&lt;/li&gt;
&lt;li&gt;Plays nicely with &lt;a href="http://fgnass.github.com/spin.js/" target="_blank"&gt;spin.js&lt;/a&gt; for sweet spinners&lt;/li&gt;
&lt;li&gt;Notifications can show for a duration or be manually closed&lt;/li&gt;
&lt;li&gt;Notifications can be updated on the fly (icon/text)&lt;/li&gt;
&lt;li&gt;Framework agnostic (but you can degrade to jQuery animation if CSS animation is not supported)&lt;/li&gt;
&lt;li&gt;IE7+ support (minus rounded corners) and all the usual suspects&lt;/li&gt;
&lt;li&gt;Fully documented&lt;/li&gt;
&lt;li&gt;MIT/GPL/Who gives a shit just don&amp;#8217;t be a nozzle about it license&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;&lt;strong&gt;To do:&lt;/strong&gt;&lt;br/&gt;If there&amp;#8217;s a bit of interest in this project then there&amp;#8217;s more I&amp;#8217;d like to do.&lt;/p&gt;
&lt;ul&gt;&lt;li&gt;Add fancy CSS 3D transitions (drop, 3D drop etc)&lt;/li&gt;
&lt;li&gt;Use &lt;a href="https://github.com/lukasalexandre/fader.js" target="_blank"&gt;fader.js&lt;/a&gt; for cleaner animation syntax (one less optional dependency) &lt;/li&gt;
&lt;li&gt;Add a fallback IE rounded corners PNG&lt;/li&gt;
&lt;li&gt;Option to dismiss with &amp;#8216;Esc&amp;#8217; keypress&lt;/li&gt;
&lt;li&gt;Add some retina icons&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;&lt;a href="http://taitems.github.com/iOS-Overlay/" target="_blank"&gt;&lt;img alt="image" height="29" src="http://media.tumblr.com/tumblr_lnt2oxDe3P1qawqhu.png" width="93"/&gt;&lt;/a&gt; &lt;a href="https://github.com/taitems/iOS-Overlay" target="_blank"&gt;&lt;img alt="image" src="http://media.tumblr.com/tumblr_lnt2p5FsUm1qawqhu.png"/&gt;&lt;/a&gt;&lt;/p&gt;</description><link>http://taitems.tumblr.com/post/40043132249</link><guid>http://taitems.tumblr.com/post/40043132249</guid><pubDate>Wed, 09 Jan 2013 09:52:00 +1100</pubDate><category>ios</category><category>iphone</category><category>ipad</category><category>notifications</category><category>overlay</category><category>javascript</category><category>css</category><category>framework</category><category>plugin</category><category>library</category><category>css3</category><category>html</category><category>mobile</category><category>open source</category></item><item><title>Styling File Inputs in iOS6 with jQuery Mobile</title><description>&lt;p&gt;File this post under: &amp;#8220;stuff that&amp;#8217;s in obscure forum posts but not really documented well&amp;#8221;. As per &lt;a href="http://taitems.tumblr.com/post/24936855546/what-ios-6-mobile-safari-offers-front-end-devs" target="_blank"&gt;a previous post&lt;/a&gt;, iOS6 brought about access to the camera in Mobile Safari. While access is not real time (&lt;code&gt;getUserMedia&lt;/code&gt; 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.&lt;/p&gt;
&lt;p&gt;What you can do as a work around is rely on native browser functionality where clicking a &lt;code&gt;&amp;lt;label&amp;gt;&lt;/code&gt; triggers the clicking of it&amp;#8217;s associated &lt;code&gt;&amp;lt;input&amp;gt;&lt;/code&gt;. I&amp;#8217;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 &lt;code&gt;display: none;&lt;/code&gt; for security reasons. Setting &lt;code&gt;visibility: hidden;&lt;/code&gt; or &lt;code&gt;opacity: 0;&lt;/code&gt; will all achieve the same effect, and setting &lt;code&gt;position: absolute;&lt;/code&gt; will take it out of the page&amp;#8217;s flow.&lt;/p&gt;
&lt;p&gt;You can see it in action in the &lt;a href="http://jsfiddle.net/xZbgP/" target="_blank"&gt;JSFiddle&lt;/a&gt; below.&lt;/p&gt;
&lt;p&gt;&lt;a href="http://jsfiddle.net/xZbgP/" target="_blank"&gt;&lt;img alt="image" height="29" src="http://media.tumblr.com/tumblr_lnt2oxDe3P1qawqhu.png" width="93"/&gt;&lt;/a&gt;&lt;/p&gt;</description><link>http://taitems.tumblr.com/post/39881393608</link><guid>http://taitems.tumblr.com/post/39881393608</guid><pubDate>Mon, 07 Jan 2013 11:12:00 +1100</pubDate><category>ios</category><category>ios6</category><category>jquery</category><category>jquery mobile</category><category>html</category><category>css</category><category>ux</category></item><item><title>More Form Failures</title><description>&lt;p&gt;In the &lt;a href="http://taitems.tumblr.com/post/36542177004/an-autopsy-of-a-bad-user-experience" target="_blank"&gt;post directly below&lt;/a&gt; I discussed the ramifications of bad form design on the overall customer experience. I compared Telstra&amp;#8217;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.&lt;/p&gt;
&lt;p&gt;Unlike the Telstra forms, the Commbank forms do accept &amp;#8216;space&amp;#8217; 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 &lt;code&gt;maxlength&lt;/code&gt; requirements that will trim the last few characters off your pasted value silently. No validation error. No automatic removal of spaces. Nothing.&lt;/p&gt;
&lt;p&gt;You could argue that it&amp;#8217;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&amp;#8217;m sure I&amp;#8217;m not alone.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Be careful. Bad form design can cost you and your customers money.&lt;/p&gt;</description><link>http://taitems.tumblr.com/post/36581743009</link><guid>http://taitems.tumblr.com/post/36581743009</guid><pubDate>Mon, 26 Nov 2012 19:05:15 +1100</pubDate><category>UX</category><category>user experience</category><category>CX</category><category>customer experience</category><category>review</category><category>fail</category><category>form</category><category>form design</category></item><item><title>An Autopsy of a Bad User Experience</title><description>&lt;p&gt;I&amp;#8217;d like to take a moment to share a bad user experience with you. Why? I believe it&amp;#8217;s important to diagnose the how and the why whenever these issues occur. It&amp;#8217;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?&lt;/p&gt;
&lt;p&gt;To try and explain what a user experience designer or developer does is not an easy task. Some even contest the field&amp;#8217;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&amp;#8217;ll attempt to distill a large part of what UX means to me, into a single key quote:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;UX is all about reducing friction.&lt;/strong&gt;&lt;br/&gt;- Andrew Fisher, &lt;a href="http://twitter.com/ajfisher" target="_blank"&gt;@ajfisher&lt;/a&gt; &lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;That&amp;#8217;s it.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;We&amp;#8217;re taught as programmers to be DRY (don&amp;#8217;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&amp;#8217;s path. Speedy processes are, after all, about reducing friction.  &lt;/p&gt;
&lt;p&gt;But back to the issue at hand: a terrible user experience.&lt;/p&gt;
&lt;p&gt;I recently moved to Telstra. For the international readers, Telstra is kind of what you move onto when you&amp;#8217;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.&lt;/p&gt;
&lt;p&gt;The flaws in the workflow are plain to see:&lt;/p&gt;
&lt;ol&gt;&lt;li&gt;The forms themselves are littered with usability and accessibility issues&lt;/li&gt;
&lt;li&gt;The user is not given a descriptive error or instructions to rectify an error when it occurs&lt;/li&gt;
&lt;li&gt;The user is encouraged to call a 24/7 call centre instead&lt;/li&gt;
&lt;li&gt;The call centre staff spend their time fixing relatively straight forward issues&lt;/li&gt;
&lt;li&gt;The form remains broken&lt;/li&gt;
&lt;/ol&gt;&lt;p&gt;The issues I experienced became largely apparent when I was getting overdue bills that I simply couldn&amp;#8217;t login to pay. I had difficulty beforehand getting into the system, but now I had a real financial motivation. I won&amp;#8217;t go into the problems I experienced pre-ordering the iPhone 5. &lt;em&gt;That form&lt;/em&gt; was presumably cobbled together at short notice after the phone was announced. That doesn&amp;#8217;t excuse the number of problems I experienced, but see the workflow above for a short summary of how I negotiated those forms.&lt;/p&gt;
&lt;hr&gt;&lt;h3&gt;Maxlength everywhere and the &amp;#8216;Space&amp;#8217; key is forbidden&lt;/h3&gt;
&lt;p&gt;So whenever you see your account number mentioned you will notice it&amp;#8217;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. &lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Paste it in. Fill in the rest of the details. Hit enter.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Oh damn. The spaces are forbidden characters.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Remove said spaces. Hit enter.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Oh now I&amp;#8217;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&amp;#8217;ll work out that there&amp;#8217;s a &lt;code&gt;maxlength&lt;/code&gt; on the field and the last two characters of your account number are always trimmed.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;&lt;strong&gt;Sidenote:&lt;/strong&gt; I noticed the other day that even the Commonwealth Bank is schooling Telstra in this area. Yes, a bank. Come on guys.&lt;/em&gt;&lt;/p&gt;
&lt;h3&gt;Your username is not your username&lt;/h3&gt;
&lt;p&gt;Just in case you ever have trouble logging in (you will), it&amp;#8217;s worth remembering that your username is not actually your username.&lt;/p&gt;
&lt;p&gt;Confused? Don&amp;#8217;t be. Try a &amp;#8220;forgot my username&amp;#8221; email.&lt;/p&gt;
&lt;p&gt;&lt;img height="45" src="http://f.cl.ly/items/3N1l1V3a2c0r2A0X2D0U/Image%202012.11.18%2010:56:21%20PM.png" width="282"/&gt;&lt;/p&gt;
&lt;p&gt;Oh great, I thought that&amp;#8217;s what it was. Maybe I&amp;#8217;ll try resetting my password while I&amp;#8217;m at it.&lt;/p&gt;
&lt;p&gt;&lt;img height="81" src="http://f.cl.ly/items/1n1L3r0L0E303T15232M/Image%202012.11.18%2010:54:25%20PM.png" width="490"/&gt;&lt;/p&gt;
&lt;p&gt;Oh, I see, the label on the left is wrong. It must want my email instead.&lt;/p&gt;
&lt;p&gt;&lt;img src="http://f.cl.ly/items/1c272e2c3W3C1g3Y2h0M/Image%202012.11.18%2010:58:41%20PM.png"/&gt;&lt;/p&gt;
&lt;p&gt;FFFUUUUUUU&amp;#8212;.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;&lt;strong&gt;Sidenote:&lt;/strong&gt; Don&amp;#8217;t even get me started on the non-standard &lt;code&gt;&amp;lt;select&amp;gt;&lt;/code&gt; elements they use when asking for your date of birth.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;&lt;em&gt;&lt;strong&gt;Double sidenote:&lt;/strong&gt; I was 99.999% sure of what my username and password were, and the system isn&amp;#8217;t letting me in.&lt;/em&gt;&lt;/p&gt;
&lt;h3&gt;It&amp;#8217;s not like the underlying systems are any better&lt;/h3&gt;
&lt;p&gt;I enjoy re-telling this story. I couldn&amp;#8217;t pay any of my bills because I couldn&amp;#8217;t create an account. And I couldn&amp;#8217;t create an account because the system hadn&amp;#8217;t created my &amp;#8220;account&amp;#8221;. That&amp;#8217;s when this lovely exchange took place over the phone.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Telstra:&lt;/strong&gt; 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? &lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Me:&lt;/strong&gt; You mean the date of birth &lt;em&gt;I just gave you to verify my identity?&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Telstra:&lt;/strong&gt; &amp;#8230; Yes.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Me:&lt;/strong&gt; &amp;#8230;&amp;#8230;&amp;#8230;&amp;#8230;.. Okay, sure it&amp;#8217;s XX/XX/XX&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3&gt;Did I mention the system failures?&lt;/h3&gt;
&lt;p&gt;If you&amp;#8217;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&amp;#8217;ll call you back tomorrow.&lt;/p&gt;
&lt;h3&gt;Inconsistent inline errors and error pages&lt;/h3&gt;
&lt;p&gt;This is always going to be a problem in large sites with multiple forms. Depending on when a form was created (and by who), some will employ inline JavaScript validation, while others will use server-side validation. It&amp;#8217;s inconsistent, but not nearly as frustrating as the vague error pages you will be sent to. These pages leave you stuck in some kind horrible purgatory in which you iterate through each field making minor changes attempting to correct that vague error. Eventually, with no feedback, you will most likely give in and call that lovely, shiny 24/7 support line and they explain it away as something wrong with their systems and correct it manually.&lt;/p&gt;
&lt;p&gt;As of right now, I can&amp;#8217;t log into the Telstra My Account area because my username and password are &amp;#8220;incorrect&amp;#8221;. I find this quite funny, because they&amp;#8217;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&amp;#8217;ve got no way of finding out because the system doesn&amp;#8217;t provide any user feedback. Then again, &lt;em&gt;I could call that 24/7 support line&amp;#8230;&lt;/em&gt;&lt;/p&gt;
&lt;h3&gt;A freebie: Pre-filling Information&lt;/h3&gt;
&lt;p&gt;In the opening paragraphs I reiterated some of Andrew Fisher&amp;#8217;s thoughts about building frictionless experiences. In part that can be expressed as &amp;#8220;why ask for information that you already know?&amp;#8221;. It&amp;#8217;s not critical, but I&amp;#8217;ve always been frustrated how something as simple as the &amp;#8220;state&amp;#8221; field cannot be inferred by GEOIP lookup, or at least persist across steps. Every state field in the system that doesn&amp;#8217;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.&lt;/p&gt;
&lt;p&gt;The vast majority of sites are guilty of this, but it still shits me to no end.&lt;/p&gt;
&lt;hr&gt;&lt;h3&gt;Justification&lt;/h3&gt;
&lt;p&gt;So who am I to tell the largest telecommunications company in Australia how to run their business? Well, I&amp;#8217;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&amp;#8217;t even remotely technical. The people that weren&amp;#8217;t able to figure out the &lt;code&gt;maxlength&lt;/code&gt; on the account number field was set too low. The ones that don&amp;#8217;t understand why a &amp;#8216;space&amp;#8217; character isn&amp;#8217;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.&lt;/p&gt;
&lt;h3&gt;Corrective Action&lt;/h3&gt;
&lt;p&gt;So where to from here? Someone within Telstra desperately needs to take ownership of the forms and the conventions around them. Setting guidelines and defining expected behaviours would go along way towards fixing the mess on the front end at least. I hold zero hope for the legacy back end systems being fixed any time soon, so this is where some neato JavaScript code adds value by acting as a middle-man. User input in, middle-man code, sanitised code into clunky old forms.&lt;/p&gt;
&lt;p&gt;Corporations of Telstra&amp;#8217;s size (eg: banks) are notoriously silo&amp;#8217;d and the speed of change approval can be glacial. At a guess, I&amp;#8217;m assuming there are multiple product owners within Telstra that these forms span across - so hopefully some of Telstra&amp;#8217;s newly appointed UX leads can internally champion the cause and act swiftly.&lt;/p&gt;
&lt;p&gt;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 &lt;em&gt;too hard&lt;/em&gt;. 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?&lt;/p&gt;
&lt;p&gt;I can&amp;#8217;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&amp;#8217;s one thing to establish a &amp;#8220;tone of voice&amp;#8221; or enforce a style guide, but in a digital world, these points of interaction are just as important for representing your company and it&amp;#8217;s priorities. From what I&amp;#8217;ve seen to date, it appears that UX is not one of those priorities.&lt;/p&gt;</description><link>http://taitems.tumblr.com/post/36542177004</link><guid>http://taitems.tumblr.com/post/36542177004</guid><pubDate>Mon, 26 Nov 2012 09:05:00 +1100</pubDate><category>UX</category><category>telstra</category><category>user experience</category><category>CX</category><category>customer experience</category></item><item><title>UX Lab 013: ThreeJS Battery</title><description>&lt;p&gt;It&amp;#8217;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 &lt;a href="https://github.com/mrdoob/three.js/" target="_blank"&gt;ThreeJS&lt;/a&gt;. I&amp;#8217;ve played with it before, but never put out anything production-ready.&lt;/p&gt;
&lt;p&gt;&lt;img src="http://media.tumblr.com/tumblr_mcygp2qPKo1qawqhu.jpg"/&gt;&lt;/p&gt;
&lt;p&gt;3D artwork has become pretty common place these days. But generally you&amp;#8217;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?&lt;/p&gt;
&lt;p&gt;Here&amp;#8217;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&amp;#8217;m not impressed when you can build an entire iPhone with CSS using a single HTML element. I&amp;#8217;m actually impressed when you design something awesome, you build it without compromise, and it&amp;#8217;s not a completely flat, static experience.&lt;/p&gt;
&lt;p&gt;So with that in mind, here&amp;#8217;s a shitty battery I built :)&lt;/p&gt;
&lt;p&gt;&lt;a href="http://taitems.github.com/UX-Lab/Battery3D/index.html" target="_blank"&gt;&lt;img src="http://media.tumblr.com/tumblr_md1woxp37T1qawqhu.jpg"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;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&lt;em&gt; (aside from a reflection map, oops)&lt;/em&gt;. Just ThreeJS.&lt;/p&gt;
&lt;p&gt;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&amp;#8217;s not long. I really don&amp;#8217;t see why more people can&amp;#8217;t build stuff like this.&lt;/p&gt;
&lt;p&gt;So check it out, the source code is on Github.&lt;/p&gt;
&lt;p&gt;&lt;a href="http://taitems.github.com/UX-Lab/Battery3D/index.html" target="_blank"&gt;&lt;img height="29" src="http://media.tumblr.com/tumblr_lnt2oxDe3P1qawqhu.png" width="93"/&gt;&lt;/a&gt;&lt;/p&gt;</description><link>http://taitems.tumblr.com/post/35113102337</link><guid>http://taitems.tumblr.com/post/35113102337</guid><pubDate>Tue, 06 Nov 2012 16:55:58 +1100</pubDate><category>threejs</category><category>ios</category><category>battery</category><category>3D</category><category>webgl</category><category>javascript</category><category>animation</category></item><item><title>iOS Theme Update</title><description>&lt;p&gt;I pushed an update to the iOS jQuery UI Theme to add support for the latest release - &lt;a href="http://jquerymobile.com/blog/2012/10/02/announcing-jquery-mobile-1-2-0-final/" target="_blank"&gt;jQuery Mobile 1.2.0&lt;/a&gt;. Not much should change, but there is a notable syntax change to &amp;#8220;in page&amp;#8221; buttons.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;The changes are:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;&lt;li&gt;Added support for jQuery Mobile 1.2.0&lt;/li&gt;
&lt;li&gt;Support for, and styling of new &lt;code&gt;popup&lt;/code&gt; elements&lt;/li&gt;
&lt;li&gt;An example iOS style &lt;code&gt;popup&lt;/code&gt; as per the image below (would be best if you set it up with a timer to hide after a couple of seconds?)&lt;/li&gt;
&lt;li&gt;Major refactoring of &amp;#8220;in page&amp;#8221; button styling. No more messy &lt;code&gt;.ui-btn:not(this):not(that)&lt;/code&gt;, instead it inherits from &lt;code&gt;.ui-btn-plain&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Closed various issues and pull requests&lt;/li&gt;
&lt;/ul&gt;&lt;div&gt;&lt;img src="http://media.tumblr.com/tumblr_md1tlc87qG1qawqhu.png"/&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;strong&gt;Notable exclusions/issues:&lt;/strong&gt;&lt;/div&gt;
&lt;div&gt;
&lt;ul&gt;&lt;li&gt;While basic popups are supported, no nested popup menu support is available&lt;/li&gt;
&lt;li&gt;As above, button syntax has changed. This causes an issue with &lt;code&gt;&amp;lt;button&amp;gt;&lt;/code&gt; elements. &lt;a href="https://github.com/jquery/jquery-mobile/issues/5251" target="_blank"&gt;I&amp;#8217;ve raised a bug here&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;&lt;/div&gt;

&lt;p&gt;&lt;a href="http://taitems.github.com/iOS-Inspired-jQuery-Mobile-Theme/index.html" target="_blank"&gt;&lt;img height="29" src="http://media.tumblr.com/tumblr_lnt2oxDe3P1qawqhu.png" width="93"/&gt;&lt;/a&gt; &lt;a href="https://github.com/taitems/iOS-Inspired-jQuery-Mobile-Theme"&gt;&lt;img height="29" src="http://media.tumblr.com/tumblr_lnt2p5FsUm1qawqhu.png" width="116"/&gt;&lt;/a&gt;&lt;/p&gt;</description><link>http://taitems.tumblr.com/post/35109026617</link><guid>http://taitems.tumblr.com/post/35109026617</guid><pubDate>Tue, 06 Nov 2012 15:37:39 +1100</pubDate><category>jquery</category><category>jquery mobile</category><category>ios</category><category>iphone</category><category>ipad</category><category>design</category><category>theme</category><category>github</category><category>open source</category><category>OSS</category></item><item><title>Delta jQuery UI Theme</title><description>&lt;p&gt;Hey guys, just a quick heads up that I released the &amp;#8220;Delta&amp;#8221; jQuery UI theme a while ago over on the blog of my employer, &lt;a href="http://www.kiandra.com" target="_blank"&gt;Kiandra IT&lt;/a&gt;. It&amp;#8217;s a completely free theme, and the best looking one yet. There are some known issues reported on the GitHub repo, so I&amp;#8217;ve got to find some time to push up the fixes. All in all it&amp;#8217;s pretty stable and cross browser compliant. It works on both light and dark backgrounds, something you don&amp;#8217;t always see. It&amp;#8217;s also retina display friendly and makes use of my OS-dependent modal script.&lt;/p&gt;
&lt;p&gt;&lt;img src="http://media.tumblr.com/tumblr_mcyfefw5wl1qawqhu.jpg"/&gt;&lt;/p&gt;
&lt;p&gt;The details:&lt;/p&gt;
&lt;ul&gt;&lt;li&gt;&lt;a href="http://blog.kiandra.com.au/2012/09/delta-a-free-jquery-ui-theme/" target="_blank"&gt;Detailed blog post&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://kiandra.github.com/Delta-jQuery-UI-Theme/" target="_blank"&gt;View Demo&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/kiandra/Delta-jQuery-UI-Theme" target="_blank"&gt;GitHub Repository&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;Enjoy.&lt;/p&gt;</description><link>http://taitems.tumblr.com/post/35020036755</link><guid>http://taitems.tumblr.com/post/35020036755</guid><pubDate>Mon, 05 Nov 2012 11:16:12 +1100</pubDate><category>jquery</category><category>jquery ui</category><category>theme</category><category>kiandra</category><category>github</category><category>open source</category><category>OSS</category><category>javascript</category><category>design</category></item><item><title>Wishlist: An integrated iPhone experience</title><description>&lt;p&gt;I&amp;#8217;ve always liked the way that the iPhone fades out and pauses your music whenever a phone call interrupts. It took a bit of getting used to, but now I can&amp;#8217;t imagine it working any other way. So I think it&amp;#8217;s understandable that it feels a bit disconnected that my phone, ringing in my pocket, can&amp;#8217;t pause iTunes running on my Mac Book - or even music and video on the iPad and Apple TV. Looking into the options turns up a &lt;a href="http://www.macupdate.com/app/mac/16070/bluephoneelite" target="_blank"&gt;$20 shareware solution&lt;/a&gt; that allegedly no longer works, and it&amp;#8217;s not the answer. As a relatively new Mac user, I get the impression that Apple rewards those who commit fully to the ecosystem. And so I feel, something like this &lt;em&gt;needs to go native&lt;/em&gt;.&lt;/p&gt;
&lt;p&gt;But that got me thinking: why stop at pausing media?&lt;/p&gt;
&lt;p&gt;The concept of finding a phone number online, pulling your phone out of your pocket and physically dialing the number; well it all feels a little last decade, doesn&amp;#8217;t it? Admittedly, you can purchase Skype-out credits and have a dicky little widget that overrides numbers in web pages, but it&amp;#8217;s just another program to install and more logins to maintain. Some of you may scoff at the experience I&amp;#8217;ve described. Perhaps it&amp;#8217;s already possible on an Android phone and a Windows box? But things like this are not about who is first to market, it&amp;#8217;s about the value they add.&lt;/p&gt;
&lt;p&gt;It&amp;#8217;s been said that a lot of Apple innovations seem inevitable when you think about them. You can already use iMessage and FaceTime on nearly every iOS device. Phone calls via a FaceTime-esque protocol seems to be a standout omission. So whether calls are routed through a mobile phone via bluetooth or handled via VOIP, it doesn&amp;#8217;t really matter. It&amp;#8217;s certainly possible today, it just hasn&amp;#8217;t been executed &lt;em&gt;well&lt;/em&gt;.&lt;/p&gt;
&lt;p&gt;Although pocket change for both companies, a pivot on Apple&amp;#8217;s part would rival the value that Microsoft paid $8.56 billion for when purchasing Skype.&lt;/p&gt;
&lt;hr&gt;&lt;p&gt;Dribbble is rife with shots portraying desktop widgets for answering calls. Spurred on by an informal rebound contest, there were 22 follow ups to Daryl Ginn&amp;#8217;s shot. Funnily enough the shot was a conceptual take on (the terrible, existing) Skype for Mac, but the execution is good. I&amp;#8217;d love something like this.&lt;/p&gt;
&lt;p&gt;&lt;a href="http://dribbble.com/shots/537964-Incoming-call" target="_blank"&gt;&lt;img src="http://media.tumblr.com/tumblr_mawjg6Vzdx1qawqhu.jpg"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;small&gt;&lt;a href="http://dribbble.com/shots/537964-Incoming-call" target="_blank"&gt;&amp;#8220;Incoming Call&amp;#8221; by Daryl Ginn&lt;/a&gt;&lt;/small&gt;&lt;/p&gt;</description><link>http://taitems.tumblr.com/post/32257523079</link><guid>http://taitems.tumblr.com/post/32257523079</guid><pubDate>Tue, 25 Sep 2012 21:05:23 +1000</pubDate><category>iphone</category><category>skype</category><category>mac</category><category>os x</category><category>ios</category><category>ipad</category><category>apple tv</category><category>facetime</category><category>imessage</category><category>integration</category><category>apple</category></item><item><title>Great concept. Be sure to watch the video as the text just...</title><description>&lt;iframe src="http://player.vimeo.com/video/49375288" width="400" height="225" frameborder="0"&gt;&lt;/iframe&gt;&lt;br/&gt;&lt;br/&gt;&lt;p&gt;Great concept. Be sure to watch the video as the text just doesn’t do it justice!&lt;/p&gt;
&lt;p&gt;&lt;a class="tumblr_blog" href="http://simurai.com/post/31460815120/flick-scroll"&gt;simurai&lt;/a&gt;:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Flick Scrolling&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;You might wanna watch the video above, but in short: When scrolling content on a touch-screen, instead of letting momentum stop the scrolling, you can decide exactly where it should stop. &lt;strong&gt;It stops at the point where you flicked it&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;It would be great for things like books, blogs, timelines or anywhere where you don’t fly over, but continuously wanna “&lt;strong&gt;move forward&lt;/strong&gt;”. Kinda like paging but within and long scroll. Some apps have a page up/down feature, but I don’t really use it because it moves always the whole height and might cut off a picture or so. With this “flick scrolling” you can decide to where it should move to. The last paragraph or beginning of a picture.&lt;/p&gt;
&lt;p&gt;&lt;img alt="Flick Scroll illustration" height="388" src="http://archive.simurai.com/lab/flick-scroll/flick-scroll.gif" width="500"/&gt;&lt;/p&gt;
&lt;p&gt;Why not just use pages or cards? Yes, that works sometimes, but not always, especially not when you have no control over the content. iA wrote a good post about it: &lt;a href="http://informationarchitects.net/blog/ipad-scroll-or-card/"&gt;Scroll or Card?&lt;/a&gt; With flick-scrolling you get the joy of “card flipping” without the cards.&lt;/p&gt;
&lt;p&gt;Here the two demos from the video so you can try it out (only tested on iOS).&lt;/p&gt;
&lt;p&gt;&lt;a href="http://archive.simurai.com/lab/flick-scroll/book/"&gt;Book demo&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="http://archive.simurai.com/lab/flick-scroll/timeline/"&gt;Timeline demo&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Warning: I’m not really a programmer so the demo is just a hack to demonstrate how it could work. Would need some improvements. And of course, performance would be better if it would be implemented natively.&lt;/p&gt;
&lt;p&gt;One thing I’m &lt;strong&gt;not sure&lt;/strong&gt; about.. there is the possibility that you intend to do a flick scroll but end up doing a normal scroll or vice versa. You can judge for yourself in the demos. Maybe the detection could be further optimized or here some other possibilities (Let me know if you can think of more).&lt;/p&gt;
&lt;ul&gt;&lt;li&gt;Use a two-finger scroll. But then you can’t use just your thumb which makes it not that useful.&lt;/li&gt;
&lt;li&gt;Split up the screen into two areas, for example left for normal scroll and right for flick-scroll.&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;&lt;strong&gt;Credits&lt;/strong&gt;: Demos use the &lt;a href="http://cubiq.org/iscroll-4"&gt;iScroll4&lt;/a&gt; library and in the timeline demo, the “scrollToElement” feature is used, which is a pretty cool one.&lt;/p&gt;
&lt;/blockquote&gt;</description><link>http://taitems.tumblr.com/post/31496529672</link><guid>http://taitems.tumblr.com/post/31496529672</guid><pubDate>Fri, 14 Sep 2012 11:23:23 +1000</pubDate><category>ios</category><category>iphone</category><category>ipad</category><category>scroll</category><category>javascript</category><category>ux</category><category>iscroll</category></item><item><title>The Milwaukee PD Website</title><description>&lt;p align="center"&gt;&lt;a href="http://www.milwaukeepolicenews.com/" target="_blank"&gt;&lt;img src="http://media.tumblr.com/tumblr_ma9k7mgY7W1qawqhu.jpg"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;I first time I saw the Milwaukee PD website was on &lt;a href="http://www.awwwards.com/web-design-awards/milwaukee-police-department" target="_blank"&gt;Awwwards&lt;/a&gt;. While the design treatment and technical execution was undoubtedly rich, I couldn&amp;#8217;t quite put into words what was just so wrong about it all. It goes without saying that the American approach to policing is different to the rest of the world, but I still felt the agency was stressing the importance of the wrong information. Join the force, play with guns and big, black, military grade machinery. Less of a focus on making a difference, working with the community - just guns, trucks and bad guys.&lt;/p&gt;
&lt;p&gt;&lt;a href="http://news.ycombinator.com/item?id=4514066" target="_blank"&gt;This comment from jpxxx&lt;/a&gt; on Hacker News summarises it beautifully.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;It&amp;#8217;s militaristic, it&amp;#8217;s alienating, it&amp;#8217;s fetishistic, it&amp;#8217;s hostile, it insidiously portrays class and ethnic conflict as an everyday battle worth fighting, and it panders to the worst in Americans who already endorse the myriad excesses and injustices of an ever-growing quasi-private law and order machine that has ruined the lives of millions.&lt;/p&gt;
&lt;p&gt;But awesome job on the scrollbars, yo.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;&lt;a href="http://www.milwaukeepolicenews.com/" target="_blank"&gt;Check the site out.&lt;/a&gt;&lt;/p&gt;</description><link>http://taitems.tumblr.com/post/31434122460</link><guid>http://taitems.tumblr.com/post/31434122460</guid><pubDate>Thu, 13 Sep 2012 11:05:00 +1000</pubDate><category>design</category><category>parallax</category><category>web design</category></item><item><title>Introducing techevents.co</title><description>&lt;p align="center"&gt;&lt;a href="http://techevents.co/" target="_blank"&gt;&lt;img src="http://media.tumblr.com/tumblr_m9voz1SOcB1qawqhu.jpg"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;I&amp;#8217;m pleased to announce the launch of a micro-site aimed at aggregating the multitude of tech events centered in and around Melbourne, Australia. It&amp;#8217;s far from ready but with the sheer number of events in the next few days/weeks I thought it was important I get it out the door.&lt;/p&gt;
&lt;p&gt;It&amp;#8217;s &lt;strong&gt;buzz word compliant&lt;/strong&gt;!&lt;/p&gt;
&lt;p&gt;It&amp;#8217;s responsive. It&amp;#8217;s got some subtle parallax. It passes JS Hint.&lt;/p&gt;
&lt;p&gt;It&amp;#8217;s boilerplated, bootstrapped, heroku-hosted, JSON driven, jQuery drawn wizardry.&lt;/p&gt;
&lt;p align="center"&gt;&lt;a href="http://techevents.co/" target="_blank"&gt;&lt;img src="http://media.tumblr.com/tumblr_m9voti68RR1qawqhu.jpg"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;But, the err, source code has seen better days. Hopefully I can clean that up in the next few days.&lt;/p&gt;
&lt;p&gt;It&amp;#8217;s been a pleasure working with &lt;a href="http://twitter.com/sesh" target="_blank"&gt;@sesh&lt;/a&gt; on this. I basically provide him with a static JSON file, he uses that as a DTO for his back end stuff and, once we flick a magic switch, all the data becomes live. He flat out gets what you&amp;#8217;re on about so most of the work can be organised in a 140 character twitter DM.&lt;/p&gt;
&lt;p&gt;In terms of future functionality, we plan on cleaning up the UI a bit, adding more events and the ability to change state/location, with the potential for other countries too.&lt;/p&gt;
&lt;p&gt;&lt;a href="http://techevents.co/" target="_blank"&gt;So yeah, check out &lt;strong&gt;techevents.co&lt;/strong&gt;.&lt;/a&gt;&lt;/p&gt;</description><link>http://taitems.tumblr.com/post/30969597124</link><guid>http://taitems.tumblr.com/post/30969597124</guid><pubDate>Thu, 06 Sep 2012 11:34:42 +1000</pubDate><category>tech events</category><category>responsive</category><category>website</category><category>design</category><category>melbourne</category></item><item><title>You heard the pixels!</title><description>&lt;img src="http://25.media.tumblr.com/tumblr_loslmbGDTn1qzjggvo1_500.jpg"/&gt;&lt;br/&gt;&lt;br/&gt;&lt;p&gt;You heard the pixels!&lt;/p&gt;</description><link>http://taitems.tumblr.com/post/30716591474</link><guid>http://taitems.tumblr.com/post/30716591474</guid><pubDate>Sun, 02 Sep 2012 19:31:30 +1000</pubDate></item><item><title>Real Racing 3 is looking pretty boss. Lets hope they can make it...</title><description>&lt;iframe width="400" height="300" src="http://www.youtube.com/embed/UmkYHZpel3Y?wmode=transparent&amp;autohide=1&amp;egm=0&amp;hd=1&amp;iv_load_policy=3&amp;modestbranding=1&amp;rel=0&amp;showinfo=0&amp;showsearch=0" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;&lt;br/&gt;&lt;br/&gt;&lt;p&gt;Real Racing 3 is looking pretty boss. Lets hope they can make it much more addictive than older versions which, besides looking beautiful, could get a bit repetitive at times.&lt;/p&gt;</description><link>http://taitems.tumblr.com/post/28585730746</link><guid>http://taitems.tumblr.com/post/28585730746</guid><pubDate>Fri, 03 Aug 2012 08:53:05 +1000</pubDate><category>real racing</category><category>ipad</category><category>ios</category><category>game</category></item><item><title>UX Lab 10, 11 &amp; 12</title><description>&lt;p&gt;Here&amp;#8217;s a bulk upload of three UX Lab experiments. I&amp;#8217;ve been pretty busy, but these are ideas I&amp;#8217;ve had for a long time and have been kicking around on my hard drive to some extent. I thought I&amp;#8217;d better get them out and about.&lt;/p&gt;
&lt;hr&gt;&lt;h3&gt;UX Lab 010 - Blurred Modal Backgrounds&lt;/h3&gt;
&lt;p&gt;Modal dialogs are used in preference to regular popups because they generally disable interaction with the page behind and guide focus to the new window. This is achieved by visually obscuring the content behind the modal, but not so much that the two seem disconnected.&lt;/p&gt;
&lt;p&gt;As long as people have been doing this, the have been attempting to blur out the background to greater magnify the effect. It hasn&amp;#8217;t been possible without the use of non-dynamic PNGs, Flash or some other form of hack. Now that Webkit-based browsers are supporting the CSS filter property (not to be confused with the IE legacy one), the sought after feature is now possible.&lt;/p&gt;
&lt;p&gt;The linked demo guides focus in two modes. One blurs out all background elements, the other desaturates them.  Unfortunately there is no support for animation of these properties, so until that is implemented the effect is a bit blunt.&lt;/p&gt;
&lt;p&gt;&lt;a href="http://taitems.github.com/UX-Lab/ModalBlur/index.html" target="_blank"&gt;&lt;img height="29" src="http://media.tumblr.com/tumblr_lnt2oxDe3P1qawqhu.png" width="93"/&gt;&lt;/a&gt; &lt;a href="https://github.com/taitems/UX-Lab" target="_blank"&gt;&lt;img height="29" src="http://media.tumblr.com/tumblr_lnt2p5FsUm1qawqhu.png" width="116"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;hr&gt;&lt;h3&gt;UX Lab 011 - Flipboard-style Notifications&lt;/h3&gt;
&lt;p&gt;I see notifications similar to these throughout iOS and OS X applications everywhere. I like the way they demand a bit more attention than your normal jGrowl, but still aren&amp;#8217;t too impactful.&lt;/p&gt;
&lt;p&gt;Maybe I&amp;#8217;ll fork these properly into their own GitHub repo. Maybe I won&amp;#8217;t.&lt;/p&gt;
&lt;p&gt;&lt;a href="http://taitems.github.com/UX-Lab/FlipboardNotify/index.html" target="_blank"&gt;&lt;img height="29" src="http://media.tumblr.com/tumblr_lnt2oxDe3P1qawqhu.png" width="93"/&gt;&lt;/a&gt; &lt;a href="https://github.com/taitems/UX-Lab" target="_blank"&gt;&lt;img height="29" src="http://media.tumblr.com/tumblr_lnt2p5FsUm1qawqhu.png" width="116"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;hr&gt;&lt;h3&gt;UX Lab 012 - OS Dependent Modal &amp;amp; Close Buttons&lt;/h3&gt;
&lt;p&gt;This is something I thought of a long time back, and has been live in Kiandra IT development template for a while now. It&amp;#8217;s frustrating that on the web, OK/Cancel button order and close button placement are all decided by the designer/developer. I remember a while back when a notable ex-Apple designer more or less told Dan Cederholm the close/delete icons should be on the left for everyone. Sure, there are probably more Macs and iOS devices on Dribbble than Windows - but it&amp;#8217;s still pretty inconsiderate to force that upon the entire audience.&lt;/p&gt;
&lt;p&gt;A UX guy once explained to me that the OK/Cancel placement on a Mac had a lot to do with the linear direction of the workflow. The OK being on the right, as it advances you another step to the right in a wizard. I remember the Windows placement being that you read the desired action first, and that&amp;#8217;s the most important. After a bit of research, it appears Jakob Neilsen &lt;a href="http://www.useit.com/alertbox/ok-cancel.html" target="_blank"&gt;summarised it quite nicely.&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;But the little Mexican girl in me says:&lt;/p&gt;
&lt;p&gt;&lt;img src="http://media.tumblr.com/tumblr_m7wwbiGYkM1qawqhu.png"/&gt;&lt;/p&gt;
&lt;p&gt;It&amp;#8217;s not even remotely difficult to implement technically, and shows you&amp;#8217;re willing to compromise. Exhaustive studies may one day show one method to be &amp;#8220;better&amp;#8221; than the other, but until then, don&amp;#8217;t be a dick about it.&lt;/p&gt;
&lt;p&gt;&lt;a href="http://taitems.github.com/UX-Lab/OSCloseButtons/index.html" target="_blank"&gt;&lt;img height="29" src="http://media.tumblr.com/tumblr_lnt2oxDe3P1qawqhu.png" width="93"/&gt;&lt;/a&gt; &lt;a href="https://github.com/taitems/UX-Lab" target="_blank"&gt;&lt;img height="29" src="http://media.tumblr.com/tumblr_lnt2p5FsUm1qawqhu.png" width="116"/&gt;&lt;/a&gt;&lt;/p&gt;</description><link>http://taitems.tumblr.com/post/28254968490</link><guid>http://taitems.tumblr.com/post/28254968490</guid><pubDate>Sun, 29 Jul 2012 18:11:39 +1000</pubDate><category>UX</category><category>lab</category><category>javascript</category><category>css</category><category>html</category><category>iOS</category><category>Mac</category><category>Windows</category><category>usability</category><category>notifications</category></item><item><title>Beautiful Retina iPad Wallpapers</title><description>&lt;p&gt;&lt;a href="http://simoncpage.co.uk/blog/2012/03/ipad-hd-retina-wallpaper/" target="_blank"&gt;&lt;img src="http://media.tumblr.com/tumblr_m7hu97LXtZ1qawqhu.jpg"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;I&amp;#8217;m not one for customising my iPhone or iPad to the nth degree, which is why I thought I would share this amazing retina iPad wallpaper collection with you all. A lot of wallpapers are suited only to lock screens, and contrast badly with the app icons of the home screen. But not these beauties! I really struggle to pick just one to use at a time, and I&amp;#8217;m sure you will too.&lt;/p&gt;
&lt;p&gt;Check them out over at &lt;a href="http://simoncpage.co.uk/blog/2012/03/ipad-hd-retina-wallpaper/" target="_blank"&gt;Simon C Page&amp;#8217;s blog&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;&lt;a href="http://simoncpage.co.uk/blog/2012/03/ipad-hd-retina-wallpaper/" target="_blank"&gt;&lt;img src="http://media.tumblr.com/tumblr_m7hu3fx2UP1qawqhu.jpg"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;small&gt;Many thanks to &lt;a href="http://twitter.com/james_paintwork" target="_blank"&gt;@james_paintwork&lt;/a&gt; for the find.&lt;/small&gt;&lt;/p&gt;</description><link>http://taitems.tumblr.com/post/27794885610</link><guid>http://taitems.tumblr.com/post/27794885610</guid><pubDate>Mon, 23 Jul 2012 09:59:59 +1000</pubDate><category>retina</category><category>ipad</category><category>wallpapers</category><category>iOS</category><category>iphone</category><category>design</category></item><item><title>JavaScript Trends (Presentation Resource)</title><description>&lt;p&gt;&lt;span&gt;As long as I continue to participate in the in-house Kiandra IT Friday &lt;/span&gt;&lt;span&gt;presentations, I&amp;#8217;ll endeavor to open source and post my material &lt;/span&gt;&lt;span&gt;online where it makes sense.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span&gt;&lt;/span&gt;&lt;img src="http://media.tumblr.com/tumblr_m6o2v4XCl31qawqhu.png"/&gt;&lt;br/&gt;&lt;br/&gt;&lt;span&gt;Friday just gone, I gave a quick talk on the advances made to &lt;/span&gt;&lt;span&gt;JavaScript in the last 12-24 months, and what changes are on the &lt;/span&gt;&lt;span&gt;horizon. It tied in nicely with the release of a high-level roadmap &lt;/span&gt;&lt;span&gt;from jQuery regarding versions 1.8, 1.9, 1.9.x and 2.0.&lt;/span&gt;&lt;br/&gt;&lt;br/&gt;Topics included:&lt;/p&gt;
&lt;ul&gt;&lt;li&gt;&lt;strong&gt;jQuery Majors&lt;/strong&gt; - 1.8 release notes, 1.9 vs. 2.0 and the oldIE debacle&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;ECMAScript 6&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Patterns &amp;amp; Best Practices&lt;/strong&gt; - MVVM/MVC, AMD, Compilation &amp;amp; Linting&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;&lt;span&gt;I decided not to cover any of the hardware and browser based &lt;/span&gt;&lt;span&gt;innovations as they&amp;#8217;re more about exposing new device properties, &lt;/span&gt;&lt;span&gt;inputs and outputs. I wanted to focus on how we&amp;#8217;re writing our code, &lt;/span&gt;&lt;span&gt;not WHAT we&amp;#8217;re writing. I also forgot to add unit testing to the slides, but we covered it loosely.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="http://taitems.github.com/JS2012-Presentation/" target="_blank"&gt;&lt;img height="29" src="http://media.tumblr.com/tumblr_lnt2oxDe3P1qawqhu.png" width="93"/&gt;&lt;/a&gt; &lt;a href="https://github.com/taitems/JS2012-Presentation" target="_blank"&gt;&lt;img height="29" src="http://media.tumblr.com/tumblr_lnt2p5FsUm1qawqhu.png" width="116"/&gt;&lt;/a&gt;&lt;/p&gt;</description><link>http://taitems.tumblr.com/post/26533972558</link><guid>http://taitems.tumblr.com/post/26533972558</guid><pubDate>Thu, 05 Jul 2012 13:05:28 +1000</pubDate><category>javascript</category><category>presentation</category><category>impress.js</category><category>best practice</category><category>jquery</category></item></channel></rss>
