Latest on twitter:
Single-Step Dialing on the iPhone OS
On the iPhone OS, contacts grouped into the “Favorites” section of the phone application can be dialed with a single touch to the listed name, but for all other contacts in the “All Contacts” section, this is a two-step process. The first tap on the name instead opens the details page for that contact, and the desired phone number in that contact’s details page must then be selected by a second tap.
Out of habit, I find that I sometimes tap a name in the two-step “All Contacts” section, and hold it to my ear immediately, only to discover that the phone isn’t dialing. (I then have to lower the phone to glance at the screen, select the phone number, and raise the phone back to my ear.)
What should happen is that if this contact has only one associated phone number, the iPhone should automatically dial that number once the phone is held to your ear, using its accelerometer and ambient sensors. That way, selecting a name and bringing the phone to your ear results in the same device reaction regardless of from which of these two sections the dial originated (again, for single-number contacts only).
Current iTunes Store "Buy" Owned App
Proposed iTunes Store "Redownload" App
In the iTunes Store, you have the ability to redownload an app you already purchased, which is useful if you’ve lost the backup copies on all your devices. But it’s not immediately obvious to everyone, including yours truly, and people have to discover this by trial and error or by online resources.
Apple’s official docs on this issue are also ambiguous though, as a user trying to download an owned app will encounter the message, “Are you sure you want to buy and download [app name]? Your account will be debited for this purchase and your application will begin to download immediately.” Only after the user clicks “Buy” does a reassuring second message appear acknowledging a prior purchase - “You have already purchased this item. To download it again for free, select OK”.
This second message should have been the first and only message upon attempting the redownload. After all, the user is logged in with that account if this stage of the process is reached, so this can easily be determined.
A clearer approach would be to remove the price from the text copy of the button ($0.99 BUY) since the user will not be charged that price when clicking that button, as well as to remove the “buy” text because most people will interpret that word to mean an exchange of money unless $0.00 is explicitly written alongside it.
But writing ($0.00 BUY) is also misleading because the retail price of that item is not free. So an improvement would be something like my proposal in figure 2 (second image above), with the text (REDOWNLOAD). It could even be ($0.00 REDOWNLOAD) or (FREE REDOWNLOAD) to make it absolutely clear.
Tapping the buy button again in Mobile iTunes on iOS devices, on the other hand, is much clearer, as it first prompts the second of the two earlier messages. It still suffers the issue of saying “buy” though.
The best implemented example is the “Update” button for a previously purchased app. Updates are free for owned apps, so it gets to avoid the buying concept altogether and throws the message, “This update is free because you own a previous version of this item. To get this update now, select OK”.
These issues need to be fixed, and probably exist as a relic of the pre-app days of the iTunes Store, when users were not allowed to redownload music or other media. It’s your move, iTunes team.
Current Y! Sports Fantasy World Cup
Proposed Y! Sports Fantasy World Cup
When I first saw the picks and results board for Yahoo! Sports Fantasy World Cup 2010, it took me a second to distinguish between an incorrect pick and the actual outcome between any given two countries. There was something counterintuitive about their choice of icons and color coding for each row’s status - it was using green checkmarks for wins, but gray checkmarks for selections, including incorrect ones. And it was using red X’s to mark the winner of the actual game outcome.
This meant that if you picked Italy to win against Slovakia (where Slovakia won), it would show you a gray checkmark on Italy to indicate that you picked it, which you might mistake as a winning result based on the similar green checkmark and background for actual winners. In this case, the actual winner is marked by a red X and background, which you might mistake as an incorrect pick, rather than a correct result. Seeing that the red X and background of the score prediction in the right columns actually do indicate an incorrect pick rather than result, this inconsistency only adds to the confusion. (See the first screenshot.)
What I’d propose (in the second screenshot) is a modification that clearly distinguishes all actual outcomes the same way, say, with a bounding border with a soccer ball (not a trophy, as only one ultimate team gets a trophy). The green checks and red X’s would then be reserved for what people associate with them - correct or incorrect - in this case, the correctness of your pick. After all, it doesn’t make sense to call a country’s actual win “incorrect”, so it’s best that the green/red system doesn’t correspond with actual results at all.
This has been bugging me ever since Google rolled out its outset text input fields site-wide - the vertical alignment issue.
Someone’s container and input heights aren’t playing nice.
Headlights On Indicator on Dashboard
Headlight Switch
For a company with a reputation for quality and attention to detail, it’s surprising to see Honda’s oversight of its headlight “on” indicators on the dashboard. There are three modes for headlights on a Civic - off, daylight lamps on, and headlights on - each with its own distinct icon on the switch, as pictured in the photo.
However, the daylight lamp icon (pair of opposite lights) on the switch is the only one that lights up on the dash in both cases of daylight lamps being on and headlights being on.
The icon for the headlights on the switch has a matching icon on the dash, but that one only lights up when the high beams are on.
So here’s the summary, from top to bottom on the switch:
- Off icon on switch: nothing lights on dash (correct).
- Daylight lamps icon on switch: daylight icon lights on dash (correct).
- Headlights on switch: daylight icon lights on dash (incorrect).
- High-beams mode, headlights on switch: daylight and headlight icons light on dash (partially correct).
What should happen is that there should be a dedicated icon for high beams, so that the headlights can reclaim its own icon on the dash. You could make the counterargument that after the first time, the driver will get used to this behavior, and that it wouldn’t be an issue at that point. But if you can achieve excellency in the design, why not?
Demo: http://monstercyb.org/gordon/showandtell/collegeruled
2010 May 12. College-ruled paper web form with infinitely expandable textarea and page.
Tested as working in: Safari, Chrome, Firefox, Camino, Opera, IE 8/7/6
Demo: http://monstercyb.org/gordon/showandtell/flash
2010 April 30. The no-Flash-plugin-available blue Lego brick recreated using the canvas tag from HTML5.
Tested as working in: Safari, Chrome, Firefox, Opera 10.5+
Working except for lack of fillText support: Camino, Opera before 10.5, MobileSafari
Canvas not supported in: IE8/7/6
Demo: http://monstercyb.org/gordon/showandtell/beachball
2010 April 21. Beachballing. 2D transforms to create the spinning beachball cursor from Mac OS X.
Tested as working in: Firefox, Chrome, Safari, Opera 10.5+, MobileSafari. Should also work everywhere else once those browsers support 2d transforms.
Still image taken from Flash-based MarbleOfDoom.com, and Photoshopped to recreate the spiral stripes as a new layer while removing the original stripes.
Demo: http://monstercyb.org/gordon/showandtell/panzoom
2010 April 7. Ken Burns Effect with CSS3 (with WebKit keyframes for animation). Gecko, Presto, and Trident effectively have no equivalents, so it will not work in those browsers. This was a proof of concept.
Javascript was used to change images with alternating animations.
CSS3 animations are a part of the W3C spec, but were still in working draft at the time of this project. Much of the CSS is the same, sans the vendor prefix. (http://w3.org/TR/css3-animations)
Source: http://github.com/gordo/panzoom
Demo: http://monstercyb.org/gordon/showandtell/lost
2010 March 19: Recreating the LOST opening scene using WebKit CSS transforms and animations.
This was my first experiment with WebKit CSS animation. Other browsers like Gecko-based (Firefox, Camino) and Presto-based (Opera) support some degree of the transforms, scale, and skews that I tweak here, but as of writing this, only WebKit-based browsers support the keyframes necessary for me to animate this without using Javascript. To maintain the proof of concept, I opted out of a JS workaround for the other browsers, so this will only work in WebKit.
Tested as plays nice: Safari, Chrome, MobileSafari, Android browser (except this browser doesn’t support audio as of OS 2.1), webOS browser, and any other recent WebKit-based browser supporting keyframes.
