Fun Topic: Nick LeGrande + Android App + MLB == AWESOME!

OK, normally helping kids with life-threatening diseases will get my attention. Wacky, cool technology barriers pushed, that will get my attention. Sports stories, that often gets my attention too. Android/Mobile Technology stories get my attention...

.. but 'Today' a story turns something sad (at least for a moment) into a story of hope, inspiration and amazement with all 4 ingredients. Tonight we had a boy with rare bone marrow disease (Severe Aplastic Anemia) throw out a ceremonial first pitch for a A's & Yankees game from 1800 miles (or 2896.82 km for us Canucks) away in a Google office using a TeleRobotic Pitching Machine using an Android App!

Children's Wish + Cool Tech Problem + Sports == AMAZING!

I first read about this story on Sportsnet.ca here. Interesting article and it got my attention, but when I dug deeper, the fully story is actually quite a lot more interesting...

If you want to learn more, I suggest you go to the site and watch the background video. I dare you not to both admire and adore the young Nick LeGrande after watching the video. (He's a all-star even if he didn't throw the first pitch at the game tonight.)

http://www.youtube.com/watch?v=WLsW2ZXtlko

Then watch the time-lapse photo of Google Fibre office turned into a pitching mound. This is 'Empathy', Google just didn't put down some astro-turf and a big monitor. They wanted Nick to 'feel' like he was part of the ballpark. (Very cool stuff. Reminds of when I used to work @ SkyDome in the JumbroTron/Production crew and peek @ the grounds crew doing the set-up before a jays game.)

http://www.youtube.com/watch?v=IvfAXFyDbzc

Now what got me *even* more stoked is to learn that it was an Android app that controlled the pitching robot. That's got to be a very cool project. 

"In explaining the process, Google said that LeGrande would use an Android application allowing him to control the movements of the robot in Oakland. That robot was equipped with a camera, livestreaming a view of the ballpark to LeGrande in Kansas City."

http://espn.go.com/mlb/story/_/id/9376820/sick-teen-nick-legrande-use-robot-throw-1st-pitch

If you didn't know Google Fibre is Google's version of a Internet Provider. They claim 1000x faster downloads (and a logo of a rabbit that got hit with the Skittles Rainbow). Google Fibre of course also has a set-top box, etc,etc. 

https://fiber.google.com/about/index.html

You can read Google's focus on the story here:

https://fiber.google.com/about/nicksfirstpitch/index.html

You can also see more photos in the twitter feed here:

https://twitter.com/search?q=%23NicksFirstPitch&src=hash

Sadly, I saw the tweet, but I haven't been able to find video of the pitch broadcasted anywhere. I'm told Sportsnet.ca didn't show the pitch either. 

************** UPDATE **************

Here is the YouTube Video for the actual pitch. It was posted the day after the event. The pitch actually starts around 3:06.

http://www.youtube.com/watch?v=KgFS4trs_PA

************** UPDATE **************

Regardless, it's still Amazing. We're in a great time now where technology is progressing to a point we can make amazing things happen for people. We are set-up to help people like never before. The only barriers I see is our imagination and our ability to combine 'compassion' and 'empathy' into 'reality'.

I am sitting here, waiting and watching for what comes next.

w.

p.s. One of the ways (as outlined by the Google Fibre Blog) to help those like Nick and others like him is to get tested to be a donor.

"You can help Nick and others with life-threatening illnesses with one quick cheek swab. Visit bethematch.org to become a donor."

p.p.s. for some more links:

http://www.techinvestornews.com/Google/Google-Bloggers/google-fiber-baseball-a-sick-kids-dream-and-the-first-telerobotic-pitch-in-

http://www.washingtonpost.com/sports/nationals/as-fan-in-kansas-city-with-rare-blood-disorder-to-throw-out-first-pitch-from-1800-miles-away/2013/06/12/9fe6894c-d3c3-11e2-b3a2-3bf5eb37b9d0_story.html

http://espn.go.com/mlb/story/_/id/9376820/sick-teen-nick-legrande-use-robot-throw-1st-pitch

http://www.usatoday.com/story/sports/mlb/2013/06/12/nick-legrande-ceremonial-first-pitch-with-the-help-of-a-telerobotic-pitching-machine/2415599/

UX Term of the Day: "Hamburger" (#4 Hot UX Trend for 2013...)

*Ahem*...

'Hamburger' meet World. World meet 'Hamburger'...


A hamburger button or control is basically 3x horizontal lines of equal length that review a side navigation panel. The going 'theory' is that it's called Hamburger because the top and bottom lines are the 'buns' and the middle line is the 'meat' or burger patty.

Visually its identical to the menu button beside address bar on Chrome Browser (for those 52% of viewers who use Chrome to view my blog!).

Don't believe it's a new trend? Gizmodo has as #4 new UX trend for 2013. See here.

This newest little UX pattern is on the latest LinkedIn and Facebook app released just earlier this year. Jessica Lessin from 'WALL STREET JOURNAL' even did a feature article on "Hamburger Button" in March (2013) with a short video demonstration of the control on the WSJ app:

What’s a ‘Hamburger’ Button? A Guide to App Features

*IF* you are planning on using a Hamburger in your app, I have a few suggestions because this control is implemented so many different ways:

• When it's used just as a menu control in a top nav bar, it often acts like 'Butcon' (Button Icon) which you 'Tap'.
• When using as a sliding menu, it is a 'Tap-and-Drag' control. 
• However I also like the 'Bezel Swipe' gesture to also open *and* hide a menu control. (This last one is used quite often on BB10 and Win8 Surface to activate standard device menus.)

Therefore you would need at least these 3x ways:

1. 'Tapable'  Menu butcon with visual feedback for depressed state
2. 'Tap and Drag' control, so user can "drag" open the menu
3. 'Bezel Swipe' gesture from the left side of screen (along *all* of the left-hand-side).

Well, there you have it. 

If the trend stays the same, we're likely to see this control on just about everything, just like we saw the explosion for "Pull-to-Refresh". (Interestingly, for those of you who didn't see it, I think Twitter and Loren Britcher got it patented... but agreed to "only use his patent defensively"...)

Baring any radical changed, you should start to see the Hamburger on at least one Mobile SAP app that I have pushed for on at least two different platforms. SAP isn't a radical IxD shop, so when we're adopting it, it's "definitely" gone mainstream! ;)

Hope that helps...

Wayne Pau.


p.s. Er...so that Hamburger control, it just three lines right? Well.. make you don't get it mixed up with the following somewhat 'similar' controls:

1. Motorola Hardware Menu Button

2. MS Word Bullet Butcon
3. Android Holo Composition Icon
4. Android Context Action Bar Overflow (top right on Android devices)

To be honest there are a of other very similar ones too, I could have easily expanded the list. It just goes to show you, it's all in the 'subtle' details, right?

p.p.s.Still don't believe me? Well here are two screen shots from the recent Facebook and Flickr apps.

(Facebook @ Android)

(Flickr @ Android)

Fun Topic: Software Developer vs. Computer Programmer (According to US Bureau of Labor Statistics)

So the other day I stumble on this site:

(http://www.bls.gov/home.htm)

I hear about BLS on the news all the time. According to BLS they are:

"The Bureau of Labor Statistics of the US Department of Labor produces some of the Nation’s most widely followed measures of the economy."

I didn't realize they had an on-line "Occupation Finder". Basically it's a tool to tell you what the outlook will be for a particular job if you are younger person (or I guess a parent of a young person). 

So, I did what I always do when I find something new. I "played" with it. I kept playing around with the filters till I find job that is:

a) The Highest Paying (who couldn't use more $, right?)
b) Fastest Growing (who doesn't want job security, right?)
c) Lowest Education pre-req (who doesn't want the easiest path, right?)

Wanna guess what it was?

(http://www.bls.gov/ooh/occupation-finder.htm?pay=&education=&training=&newjobs=&growth=20+to+28+percent&submit=GO)

Basically it's "Software Developers". (Everything else seemed like Dr or other heath professional... This is why I believe the US needs Universal Healthcare... but another topic for another time...)

It's the only job that had 50,000+ jobs, in the highest pay bracket and only need a bachelor degree. 

Mark Twain (the pen name for Sammuel Clemens) once said "There are lies, damned lies and statistics." Never was that more true than now..

Honestly, I think the US Bureau of Labour needs to be 'LITTLE' more specifc. Is this mobile developers? Is this game developers? How big is this bucket? So I "click" similar jobs and I got this list:

http://www.bls.gov/ooh/computer-and-information-technology/software-developers.htm#tab-7

First I see is "Computer Programmers". Can anyone tell me how that is different from "Software Developer"? Doesn't Software run on Computers? Don't they both Develop Programs? 

(I *am* in the software industry. I have been for a long time. I am part of 60,000 person "Software Giant" in SAP. I can tell you right now, this is a very very vague title. There are SCRUM masters, there are UX experts, there are test suite managers, there are X-Coders, there are Android Developers, there are COBOL coders, there are QA experts, etc...*ALL* of these people come together to 'develop' software.)

Have a look at the description:

What Software Developers Do

Software developers are the creative minds behind computer programs. Some develop the applications that allow people to do specific tasks on a computer or other device. Others develop the underlying systems that run the devices or control networks.

What Computer Programmers Do

Computer programmers write code to create software programs. They turn the program designs created by software developers and engineers into instructions that a computer can follow.

Software developers account for 913,100 jobs, average pay of $90K a year and grow 30%. Computer programmers account for 363,100 jobs, average of $71K a year and grow only 12%?!? 

So what's the real answer if these jobs overlap? Do I add these together? Is there something I'm missing...The only thing I can conclude is that maybe Computer Programmers are just the 'coders'? However in that case, how can it be only 1/3 of the size of 'creative' Software Developers? I would assume that you'd need more execution people than designers, no?

I guess I shouldn't be surprised. The BLS also grouped Information Security Analysts, Web Developers, and Computer Network Architects into a single group. Web Developers, which according to BLS only develop web sites that provide a "public face" for companies. No HTML 5 or WebApp developers here. No private intra-net or on-line SaaS developers here...

However, I also found this text extremely 'interesting':

"...and additional knowledge of web programming languages can be helpful for web developers."

(http://www.bls.gov/ooh/computer-and-information-technology/information-security-analysts-web-developers-and-computer-network-architects.htm)

Hmm... *cough*... I could see how 'knowing' HTML *might* be 'helpful' for web development. Or is HTML not a true 'Programming Language'?


Two things that scare me:

#1 - If this info is given to young people in jr high & high school, which they make some of the most important decisions of their life on. (Just imagine being read this info @ Grade 7 Career Education/Guidance class.)

#2 - If this info is used to create important and crucial future policy, or tax structures.

Either way I'm a little concerned if someone needs to take a critical eye and double-check the data before presenting it? I mean this is"Nation’s most widely followed measures of the economy", right? (BTW I'm sure Canada is no better...)


Thoughts?

Wayne Pau.

Fun Topic: Pandas @ Toronto Zoo (Are they the biggest waste of money ever?)

(Dao Mao @ Toronto Zoo)

If you haven't already heard, two pandas arrived earlier this year @ the Metro Toronto Zoo. My family has an annual membership and my daughter *LOVES* the zoo so we are they many times a year. It took us a few weekends, but we finally were able to find a time to go and see both Dao Mao and Er Shun. 

(I guess "technically" I didn't need to rush, since they will be here for 5 years, before moving to Calgary for another 5 years. Normally these loans cost about $1 million, but according to CBC, Canada didn't pay for the pandas, likely because we were successful in the past to help breed them captivity. The Zoo, which is owned and run by the City did however, spend $8 million on a new exhibit.)

But damn it, pandas are cute. They are iconic. When they arrived, they got better 'red-carpet' welcome than most diplomats. See here. 

What is not obvious is the sudden back-lash against pandas. (I mean honestly who hates pandas, right? That's like saying you want to punch the late Mother Theresa...). Turns out conservationist Chris Peckham would rather let pandas die off (in a more shocking, less Politically Correct way) and spend the resources elsewhere:

"I would eat the last panda if I could have all the money we have spent on panda conservation put back on the table for me to do more sensible things with..."

(http://www.theaustralian.com.au/news/health-science/beyond-cute-and-cuddly/story-e6frg8gf-1111114841214)

He's actually President of Britain's Bat Conservation Trust and part of me wonders if 

1. The 'eating' is a not too veiled joke about how Chinese people eat just about anything *and* that we as a race are probably responsible for more than our share of eating some species into oblivion.
2. Or maybe he's somewhat jealous that "bats" simply *do not* elicit the same 'awwww' factor that Pandas do. Besides Gotham superheros, not too sure of how many people use Bats as their symbol?

Here are some more links about the 'Panda Excess':

• http://www.guardian.co.uk/commentisfree/2011/dec/07/edinburgh-zoo-pandas-big-waste-money
• http://the-butterfly-and-the-cave.blogspot.ca/2013/06/pandas-national-treasure-or-waste-of.html
• http://discovermagazine.com/2008/aug/12-are-efforts-to-save-the-panda-a-giant-waste-of-money#.UbVJG_m1GSo

There are only about 1600 pandas in the wild according to WWF. (They should know, it's their mascott/logo, right?) About 325 pandas in captivity and I got to see 2 of them. (Actually it might be 4, I think I might have saw Quinn Quinn and Sha Yan in 1985 when I was a lot younger, but I honestly don't remember much.) 

I honestly do count myself "lucky", as they are sight to see in real-life. They playful, cute and when not sleeping (which is up to 10 hours a day I'm told) they are "highly" entertaining... often enticing a lot of 'awww's from the crowd.

Internally or Externally motivated  as a person of Chinese decent, I *do* feel a kinship to pandas. They are such a symbol for China and their 'cute mug' is often used for many cute cartoon and anime characters. Much like polar bears are a symbol for Canada, pandas are symbol of National Pride for China.

To me, it was 'great' seeing them up so close. They made my daughter so Happy! I'm sure she'll be talking about it for years to come. So, 'NO', I don't think they are a waste of money. Some things in life are special and shouldn't be subjected to cold accountant like objectivity. 

Thoughts?

Wayne Pau.

p.s.  Ironic that the polar bear too now is facing very real possibility of extinction. National Geographic says they may be gone by 2050.

UX Term of the Day: "Fitt's Law" (aka Fat Fingers...)

Ever have one of those controls on a screen that was Soooooooo small you couldn't tap it twice in a row if your life depended on it? These are the apps that make me pull out my pinky-finger in order to try to tap something... (If I'm totally honest with myself, pretty much every mobile phone soft-keyboard feels like this at times...there just *never* seems to be enough space to fit in all those keys!)

Earlier this year I was helping test an application for BB10 that clearly had some usability struggles. One of the issues that really stuck out was that one UI controls was about 4mm in width. That's actually about 1/2 what size it should have been.

So how big is big and how big is big enough? Turns it's not arbitrary and we have some math & science that basically tells how big something should be. The formula often used is called Fitts' Law:

Fitts' Law Formula

I've *simplified* here, but Difficulty (or technically the ID - Index of Difficulty) is logarithmically proportional to Distance Moved or how far the user has to move (the cursor or their "finger") and the Width of Button or the size of the 'tappable area' of the UI control. 

When we're talking about menu or nav buttons which could be selected from anywhere, really we don't care about distance moved (because it varies a lot), so really usability is somewhat *inversely* proportional to size. Even more so, if size *approaches* zero, the difficulty level becomes infinite! (Starting to remember infinity and limits from first year calc class, right?) 

In plain English, smaller buttons are harder and larger buttons are easier. Obvious right?

*However* the 'amount' that they are easier to use isn't linear, but rather at some point making the button bigger doesn't help *that* much. The converse is also true, at some point a little smaller can make it *really* *really* *really* hard to use.

For the full math and derivation of Fitts' Law, I'd suggestion the following links. (These are mostly best left for "geeky" HCI PhD's...)

• http://en.wikipedia.org/wiki/Fitts's_law
• http://www.cs.umd.edu/class/fall2002/cmsc838s/tichi/fitts.html

For the rest of us 'mere mortals', I would use Microsoft's (see below) much more human-understandable guidelines. I especially like MS depiction of various 'sizes' of fingers!

Quote from Microsoft (Win8) Touch Interaction Design Guide:

"People often blame themselves for having "fat fingers." But even baby fingers are wider than most touch targets. The image on the left shows the width of the average adult finger is about 11 millimeters (mm) wide, while a baby's is 8 mm, and some basketball players have fingers wider than 19 mm!"

http://msdn.microsoft.com/en-us/library/windows/apps/hh465415.aspx

MS goes on to say if you have a control @ 7mm, your error rate for mis-taps is about 1%. If you can make it at least 9mm, it's 0.5%. Notice how the curve is *almost* logarithmic? (Anything after 10-11mm, the difference is marginal at best. The % of missed taps gets smaller, but never 'actually' becomes zero...)

http://msdn.microsoft.com/en-us/library/windows/apps/hh465415.aspx

Apple too states that UI controls should be about 44 Pixels, which is about 9mm in real life on iPhones and iPads. Google/Android says 48 DPs, which is about 9mm on Superphones and Tablets, but the guidelines say stay within 7-10mm range if possible. 

(I think this is one of the *only* times I've ever seen all 3x big players agreed on anything!)

So bottom, if you don't want to do the messy math, 8-10mm should be a good threshold. Any smaller and you run a real risk of "mis-taps" from your mobile device (and likely *frustrated*) users.

Hope that helps...

w.

p.s. Still don't believe me? Every platform has a default "calculator" app. Load up the calculator app on your device and measure the physical size of the buttons. Break out the ruler and give it a try yourself!

Every time I've done this, at least one dimension is always at least 8mm long or longer. 

For the record here a quick snapshot of my finger on a ruler. I'd say that's just under 10mm and I assure you I don't have basketball player sized hands!

Pop Question: What's a Phablet? (Is the iPad Mini a Phablet?)

For a while now the 'industry' has been just inventing terminology for devices. The latest one is 'Phablet'.

Phone + Tablet = Phablet

Basically it's a device that is too big to be a phone and too small to be a true tablet. Here is "semi-official" breakdown of devices:

• Phones - 5" or smaller display
• Phablet - >5" and <7" display
• Tablet - 7" or larger display

Phones today range up in size to largest phones like today's HTC One, Samsung Galaxy S4 or iPhone 5. On the smaller end they are like the cheaper "free" with contract Android phones or smaller HTC One SV or Samsung SIII (S3) Mini.  They are generally cellular devices, used regularly as phones and kept on the individual at all times.

Tablets today range up in size to 10"-ish devices like Samsung Galaxy Tab 10.1, Google Nexus 10 or iPad 3. On the smaller end they are like Samsung Galaxy Tab 2 (7"), Kindle Fire or iPad Mini. They are mostly used on WiFi or data-only devices, and often used in landscape (and not portrait) mode.

Phablets are the compromise between the two worlds. While other 5"-ish sized devices existed first, the forerunner for Phablets was the Dell Steak 5 (which died in 2011) which was unique in that it was bigger than a phone, but still could be used as a phone. 

However in my mind, the real 'King' of Phablets now is Samsung Galaxy Note and Note II (2). What makes it unique to me is not so much the size, but the EMR stylus which I mentioned in a previous post here.

Practically what does this mean? I don't really develop directly for Phablets. In reality I treat them as Phones, since the overall dimensions more resemble a Phone. 

For example, Samsung S4, a definitely Phone format is:

• 5" Display
• 16:9 Ratio
• 1080 x 1920 Pixels

For example, Samsung Note II, a Phablet format is:

• 5.5" Display
• 16:9 Ratio
• 720 x 1280 Pixels

Therefore the Note II is basically about 10% larger diagonally and lower number of pixels (but identical to the older SIII, which was 720 x 1280 pixels). The difference is **nominal**. (The Galaxy Tabs have 5:8 ratio which is much more "squat".)

Samsung Galaxy Tab 10.1 (left), Galaxy Note II (middle) and Galaxy S4 (right)

Have a look at the low-res snapshot above. Which one do you think the Note II more resembles? Tablet or Phone?

So practically... for me... from a mobile app development point of view, there is still just Phones and Tablets. 


Lastly, is the iPad Mini a Phablet? In my mind "no". It's well in the Tablet 7"+ space (7.9" to be exact) and it keeps the full-sized iPad ratio of 4:3. So for me, Phablets are pratically *only* an Android concept right now. 

For Apple, there are only iPads and iPhones. No iPhablets. Yet. j/k.


Hope that helps...

w.

p.s. For a great list of screen size, density and ratios, this Wikipedia page below is great. I use it all the time and it's fairly up-to-date and has almost all the most common devices:

List of displays by pixel density

The other list I usually use is off Blundell's blog, which is also updated very regularly. 

Blundell Blog - List of Android Devices

UX Term of the Day: "Affordances" (aka Hints for your Users!)

Last year I had former college @ SAP, Quan Sasaki remind me that "Affordances" is the number one term that non-UX-ers forget about. Almost 15 years ago I had the term drilled into my head @ University Waterloo when I was first inundated by the Human Factors prof Carolyn MacGregor on Donald A. Norman and the same principles.

Websters has the following definition:

Affordance - A visual clue to the function of an object.

(http://www.webster-dictionary.org/definition/affordance)

I don't think I can understate how important this term is for mobile apps. On desktops we have mouse-overs and tool-tips which are great at explaining what to click on desktop apps and websites. Cursors change (on desktops in Windows, often a arrow tip to a hand with a finger pointed up) when we roll-over buttons and buttons generally have at least 3x states: normal, hover/mouse-over and down/click.

On mobile devices we don't have these things*. We have "fat fingers" with very inaccurate haptic interfaces on small devices (UPDATE: For more info, see this later blog entry). *Therefore* we need to make a concerted effort to assist users visually as much as possible with hints or "Affordances".

Consider the following example:

#1 - Butcon (Button Icon) with little/no affordance 

In this case it's a very common menu or hamburger control (If you don't know what a Hamburger Control see this later post) that has etched view or 3D-ish look. You could argue that the styling and location on screen could imply it's a "butcon" and that it means it can to be clicked or tapped, but that's a little 'esoteric'. 

#2 - Butcon (Button Icon) with button frame

For me just the small border around "butcon" makes a 'huge' difference. It tells me it's not *just* a background artifact and that the rounded square border implies button (oval or circle border *might* not have the same convention and red border might mean something altogether different too).

Everywhere we are surrounded with 'hints' to how things work. Handles on mugs imply where to hold, vertical & horizontal poles imply where to hand onto on buses & subways, (well designed) door handles imply when to pull or pull, etc. 

Life is tough enough as it is. Using a new app is hard too. So next time, give a little "Affordance" on your next mobile app. With any luck you'll have a happier user! =)

w.

p.s. *While I said we don't have mouse-overs on haptic (aka "touch screen") Mobile Devices, that's not 100% true. On Android, specifically Samsung's Galaxy Note line, when using the Stylus on the new Note II, you can get a "hover" feature, where a small circle is shown on the screen when your stylus is *just* above the surface. Very cool stuff. 

I believe Samsung is licensing Wacom's EMR technology which lives behind (or below) the LCD display, therefore not impact the visual quality of the screen at all! (Think passive RF tag; it's why the stylus or pen doesn't need to be battery powered.)

For more info see:

• Samsung's GALAXY Note II Site
• Wacom's EMR Stylus Info Site 

For the *super* geeks, these are two more great links about nitty-gritty details. I thought both were very cool:

• http://www.wacom-components.com/english/technology/emr.html
• http://forum.xda-developers.com/showthread.php?t=1439369