HTML iOS Notifications - UX Lab 007
I thought I’d build a facsimile iOS notification plugin for shits and giggles. It’s pretty much the exact opposite of a good UX, but it’s more of a proof of concept than anything else.
- It’s 100% wide on standard and retina iPhones and 60% on desktop and iPad resolutions.
- It has built in retina icon handling.
- Doesn’t break middle mouse clicks when using a URL.
- Passes JSHint.
- It works with Chrome, Safari, Firefox and I believe Opera, but I haven’t tested.
Documentation and options are available on the demo page.
It also has its own GitHub repository.
iOS eBay: The Good, The Bad, The Ugly
Mike Rundle, author of Design Then Code, is a firm believer in an iOS application being a pixel perfect representation of a company’s branding and unquestionable design. He can be a real stickler, calling out poor design or UX conventions on Twitter and just generally being a loveable prick about it all. But every so often he does stop and remind us that there are real people behind these decisions - and that things are often beyond their control.
The people responsible for the eBay iOS applications care enough about their product to trawl Twitter looking for whingers like myself. And they’re not just looking to mitigate complaints, they’re keen to hear feedback and where people think they have room for improvement. They were sure to pre-empt criticism by stressing that the original application was rushed out in only 5 weeks.
Okay, you caught me out. I was more keen on using the “Good/Bad/Ugly” metaphor than actually thinking up reasons why both the iPhone and iPad eBay apps are “Good”. They both do some pretty cool things (barcode scanning, being more picture/gallery oriented than the website), but that’s not really what this post is about. This post is more about where the apps fall flat on their face.
Branding and Consistency
The only thing marketing experts love more than cocaine is “synergy”. But what the iPad app delivers is an icon and UI different to that of the iPhone app, and eBay’s branding in general. I’m not entirely sure what page in the styleguide the blacks and deep greys come from, and for some reason it really irks me. I think eBay’s marketing department may have overlooked the inconsistant approach for the sheer joy of being able to say they have an iPad app. It was, as mentioned, rushed out in only 5 weeks.
Considering the difference at the simplest level, picking up an iOS device and trying to flick through screens full of apps to quickly locate the eBay app can be difficult. It’s hard to remember that, for example: “oh, I’m on an iPad now, I should be looking for a grey icon, not the yellow one, silly!”
In fact the icon differences just draw attention to the fact that the two apps are presented separately in the app store, and not part of a universal application. Dropbox, Twitterific, Instapaper. These popular apps, free or paid, all have universal installs. I can’t imagine the eBay code-base being very different. Merging the two would even avoid inconsistant language and interaction between the two, like refining how far an item can be from your location:
eBay Mobile - “Local Search”
eBay for iPad - “Max Distance”
Design Treatment
Frankly, I haven’t seen diagonal scanlines used in web or app design since the early-00’s when I was abusing them too. I really can’t understand why eBay pushed an update that replaced the original simple graphics with dated scanlines. Subtle Patterns is a brilliant website for discovering and previewing modern designs of tiling patterns. All of which are free. They’re rich and tactile. They’ll date just as quickly, but scanlines already have a head-start.
Odds and Ends
There are also a few less critical odds and ends that need cleaning up. Prioritisation in lists could do with some work. As a category, “Won” probably is third-most important in the following view. But when the proceeding categories are empty, is it still relevant to show them at the top of the page?
In terms of showing when refinements have been applied to a search, the iPad app takes the better approach. Normally black buttons turn blue when criteria are applied. The iPhone app uses text instead, with a lazy check/square root symbol.
iPad App - Normally black buttons become blue
iPhone App - Text only indication
Also strange is the way in which setting a price range is not enough to trigger the refinement indicator in the iPad, while the search radius is.
There are also plenty of other little bugs and enhancements, but no app is perfect. The inability to enter a landscape keyboard mode in the message centre could probably be fixed and pushed out quickly. The caching of gallery images when flicking between items is probably just as straightforward. These are less UX issues and more programming bugs.
Breakable Workflow
It’s far too easy to get to a point in your search where you can no longer get back to your results, or preserve your refinements.
For me, one of the most interesting functions I can perform on eBay is to view a sellers other items. I’ve done this countless times on eBay and Gumtree (an Australian Craigslist), and it can result in beautiful things and some absolute bargains.
If you were to click “View Sellers Other Items” on the iPad app, you can kiss your search results goodbye. This is incredibly frustrating when you’ve spent time narrowing your search with refinements. I want a road bike. Only from the cycling category. Within 100km of where I live. Only the recent listings because I’ve seen the rest. You might find a cool bike, but the size isn’t right or it’s already well outside your price range. The seller mentions they restore bikes, and suggests you check out their other items. Maybe you’l have some luck there? Boom. Search results, refinements and position gone. No back button. Start again.
Oddly enough I just noticed this only happens on the iPad app, the iPhone app remembers exactly where you came from. Another reason to merge code bases.
Can’t Refine Location Unless Logged In
All iOS devices at this point should be able to geolocate themselves, regardless of 3G connection. Apple and Google are both conducting some wizardry where they can pinpoint your location based on Wi-Fi signal alone. But unless you have an eBay account and you’re signed in, the eBay application gives you no way to filter search results by location.
Even mobile Safari has been able to request your current location since 3.0 with a simple JavaScript call:
navigator.geolocation.getCurrentPosition
The user is offline, or Safari can’t determine the location of this particular Wi-Fi router? Store with window.localStorage and it will persist between sessions. Simple.
What appears to be a fairly straightforward issue to resolve can be immediately attributed to reviews in the app store:
Can’t Update Location When Travelling
Travelling overseas or even interstate will not search where you are now located. This can be directly attributed to the apps reliance on the user’s location listed in their account profile, and not the device’s geolocation. While definitely an edge case, it would also be resolved while addressing the above issue.
Overall
I think that my personal frustration stems from usability issues that could be handled better as a mobile web application. That’s not to say I would ever suggest that eBay goes down the path of only offering web apps. Native will ALWAYS trump web facsimile. But with that being said, if you know that performing a particular action will always break your workflow - you get used to opening that link in a new tab. There is no quick native fix for that. A desktop-sized web app can become a mobile-sized app with a few lines of responsive CSS. There is no quick native fix for that. Merging code bases will be fiddly and time consuming.
Bugs take time to identify. Bugs take time to fix. Submitting to the App Store for a review and update takes time (and isn’t guaranteed to pass). As we speak there are probably similar items as I’ve described, logged internally for eBay’s development teams. But as I’ve discussed, there is no end user work-around for some of these issues - while there would in a mobile app. eBay still offers both, but it highlights a flaw in the native vs. web app argument.
I hope that the product owners and dev teams can take some of what I’ve said on board. This isn’t unwarranted criticism. Staff at eBay have expressed a desire to learn more about what UX people like myself think they can improve on. Here’s to a better UX for everyone.
Luke Beard wrote an insightful post on the front end development of Zerply. One of the little things that stuck out to me was the method of using native iPad and iPhone controls disguised as normal HTML elements. He uses a native <select> element at zero opacity to trigger the native controls on touch. It’s incredibly straightforward when you think about it, but then again the best ideas always are!
Making OS X Look Like iOS - Quick & Easy
Before we get started I’ll answer the obvious question: why would you do such a heinous thing? Well, I like consistency - and so do others. Apple’s recent direction with the Lion UI has been to make things more like the iPad, so why should the overall skinning be any different. It’s also great for people who have never used a Mac before, or have trouble adapting from a Windows OS.
Changing Dock Icons
I thought I’d get the most obvious one out of the way quickly. Installing CandyBar (USD $29) is a great way to replace dock icons that contribute to an inconsistant experience. It helps to rectify debacles like the Twitter for Mac icon and present a unified dock. The next step is to install the Flurry icon set from Iconfactory. My experience with CandyBar so far has been a bit mixed. It simplifies the process of manually replacing the icons, but the fact that certain icons (like the Calendar) cannot be overridden, and the requirement to restart several times for icons to ‘take’ - kind of make the price of CandyBar seem a bit high.
Changing Growl Skins
Even if you’re a Windows convert like me, one of the first things you probably did was install Growl. The vast majority of applications can push notifications to Growl. It’s surprising that Apple hasn’t adopted Growl into it’s OS like a lot of their other innovations.
Theming it’s notifications to look like iOS is a bit cheesy, but extends the experience from the iPhone and iPad. You’ve got plenty of choice in terms of style.
My favourite:
More of a “Notification Centre” one:
More like what you’ll see in iOS5:
And That’s It
… only two steps. There are plenty more steps over on this page, good and bad. Simple things like changing the top bar to be black make sense, others such as hiding the hard drive to mimic the iOS file system are just a touch excessive. ■
iOS Inspired jQuery Mobile Theme
jQuery Mobile doesn’t deviate far from the pattern established by its sibling libraries: provide something that normalises functionality and/or design across browsers and operating systems.
The work by the Filament Group has been vital for standardising the look and feel of jQuery Mobile, especially when dealing with incredibly dated or under-featured mobile browsers. Borrowing upon conventions established by both the iOS and Android operating systems, they created something that is palatable across a range of devices.
There will be odd instances when you need an application to look as close to native as possible. I completely agree with the Filament Group’s arguments against this, but currently designers are forced to roll their own solution. What I have created is the beta framework for an iOS-inspired theme that attempts to bring jQuery inline with the native iOS UI elements. I actually began this project when the first alpha was released, but with taking on a new job and other responsibilities, I found myself lagging behind the release schedule. I’m not sure of the response this will get, so hopefully I can gauge how much time I should spend on this in future.
But without further ado: here is the iOS-inspired theme for jQuery Mobile. It works great in Chrome, Safari, iPhone and iPad mobile Safaris.
Some Caveats
- To achieve the look of the iOS style back button with CSS3, the HTML is customised and therefore must be copied and pasted manually. The back button template can be found in the GitHub readme file.
- The CSS3 back button isn’t perfect, there are some jaggedness and shadow issues.
- Plenty of elements still remain unstyled, or are missing hit state styling.
- Cross browser compliance is a low priority.
- This is an add-on theming layer. It was impossible to fork the actual jQuery Mobile theme and attempt to keep up with their changes, so this just sits as a skinning layer on top.
Some Issues This Exposes in jQuery Mobile
- Dialogs need some serious work. I could have spent a lot of time and made my dialogs look exactly like the iOS ones, but this would have involved some pretty hectic CSS and JavaScript. As is I had to do a bit of a work around to get them to dock to the bottom and not the top. Most notably broken, the inability for these dialogs to behave like modals - showing the background as obscured.
- Back button syntax. They’re are definitely some cleaner ways to create the iOS style back buttons. I was keen to avoid images, but an image mask might have done really well in this situation. Regardless of that, you will probably find yourself plugging in custom HTML when working with jQuery mobile, and not just the buttons.
- It’s bloody hard to keep up with the release cycle. This is not a bad thing ;)
I am, as always, open to merging pull requests and suggestions to help improve this project. I must also stress that it is important that truly innovative changes best be held off until jQuery Mobile makes it out of beta. ■
A Sidenote on iOS Notifications
A lot of speculation is brewing over the impending overhaul of notifications in iOS 5. The entire focus appears to be on the software end, but that is only part of the equation. If you keep an iPhone docked silently on your work desk, you too have probably felt the need for a better visual cue of notifications. Currently, you rely on strangely spaced reminder intervals, or compulsively checking your screen when you return to your desk. Neither method addresses email notifications.
A new lock screen would go part of the way to addressing the issue: Return from a meeting/coffee/toilet break and press a button to trigger the lock screen. It also fixes the problem of silent email alerts. The other blindingly obvious solution is to provide a new area of visual feedback, not linked to the main screen and its limitations. The power drain and risk of component failure are fairly straight forward reasons such a feature should never be built into the main screen (excessive size aside).
A second screen is certainly not a new concept. “Clamshell” phones have been running external displays for a long time, but they’ve always been far from seamless. Cheap and nasty plastic is broken up by an equally lo-fi LCD screen. My old Motorola KRZR was probably one of the better attempts, burying both the surrounds and the display beneath coloured glass. It did an okay job in softening the difference in materials. Others were less than ideal:
There were some more serious attempts that still looked pretty lo-fi, namely the LG Lollipop/dLite. I never saw this one in person, but the effect seems to be replicated outside of the press shots. Other clamshells like the Sony Ericsson z750 weren’t too shabby either.
The challenge should be clearly defined, it “simply” becomes a matter of implementation. Can Apple source a low power colour display capable of blowing back to near invisibility? Will this component fail all the time like the iPad 2 screen? Is the only other solution an etched screen backlit by coloured LEDs? Should the user be able to configure what icons are represented (Twitter, Facebook, IMs etc)?
The options, you can only have two:
- Configurable information/icons
- “Always on” display
- Colour display
If it were an LCD screen, it could lend itself to a range of possibilities including the time, the weather and all kinds of jailbreak goodness. Retail and enterprise implementations could be quite inventive too.
One thing is certain: the icons should completely disappear when not in use.
Not “as long as you’re facing it front-on they should be mostly invisible”.
Not “as long as they’re not in full sunlight they should be mostly invisible”.
Regardless of implementation, this is something I’d be really keen on seeing in the iPhone 5, 6. I’m also pretty certain that somewhere in 1 Infinite Loop, CA, this concept exists and sits in a room full of other Jobs-spurned prototypes. And it’s a damn shame really. ■
The iPad as a Travel Companion
Believe me when I say this, the iPad makes an excellent travel companion. It’s easy to dismiss what you see in the Apple commercials as being purely marketing hype. All I can offer you in response is a real world example of real people travelling with an iPad. The following thoughts and experiences may not be original or applicable to you, but they happened.
Up, Up and Away!
You’ve probably heard it before: the iPad is great on a plane. Parents preload their devices with Pixar movies and stifle irritable children mid-flight. Kids and adults alike whittle away delays with various games. For me, the defining feature would have to be filling up my Instapaper account with interesting articles, syncing them for offline access, and then poring over these at 30,000 feet. There’s also something terribly meta about playing Flight Control while inside of a plane. I think I tried to avoid mid-air crashes just that bit harder.
The iPad was also critical in ensuring the safe return of our luggage. Pulling up a copy of the itinerary from my email cache helped me when arguing with the Jetstar call centre about exactly how far up shit creek they wanted to place us. Sidenote for Jetstar employees.
Camera Flash Forward
… to the end of day one away. My girlfriend and I forgot to offload the photos of our last trip from our SD card and we were fast approaching capacity. The ideal solution here would have been to chuck the SD card into the camera connection kit and back them up directly to the iPad’s bigger memory. Embarrassingly, I didn’t see the point of the adapter when they first launched. Now I really do. I’ll admit we had to resort to chucking the SD card into someones laptop to back it up.
There is a valid argument for saving the money on a camera connector kit and simply buying super cheap flash memory. But tiny cards can be lost, stolen or confiscated at a border crossing. And if you’re only buying “just a bit more” each time you’re running low, you’re going to end up with a heap of low capacity cards all over the place. The one major positive the connector kit offers in regards to this is the ability to have the the images available immediately for processing on your device. Just pop in the card, sync them to the iPad and back them up to MobileMe or Dropbox. This is the perfect solution for lower capacity devices. Sync, back up, delete. Back to a clean slate.
Over Coffee
Sharing happy snaps had always seemed like a bit of a chore. As a kid, a travelling relative always meant hours of thumbing through albums upon their return. Since we got back this morning, we’ve already caught up with both my sisters’ families. We hadn’t even been home for five minutes, got the call, and grabbed the iPad on the way out. It allowed us to flick through a couple of hundred shots and relive our weekend, all while waiting for coffee and a bagel.
Overall
Think twice next time you pack up that chunky laptop for a short journey. Remember that it’s not just the laptop, but the power cord, the USB mouse, the case, and don’t forget the nosey TSA agent legally allowed to scan through your files. If an iPhone completes your setup then you only need the one charger, the iPad and, if I’ve learned anything from this - the camera connector kit. ■
I’m in a bind. See, there’s this brilliant iPad app called Flipboard. When it first launched I knew it was special. In the weeks leading up to buying an iPad 2, I watched this video nearly once a day. Then I actually had the iPad in hand, Flipboard on screen - and I came across a perplexing problem: it’s completely free.
I love Flipboard. It’s the best iPad app I’ve used so far, and probably the best iOS app I’ve ever used. It’s smart, it’s dynamic and it never crashes. It constantly leaves me satiated, grinning stupidly at it’s glowing screen. But it’s completely free.
Someone tweeted at me saying that they aim to make their money off content suppliers, and not end users. What I’m saying is I pretty much have a blank cheque here, and nowhere to send it. I’m so pleased with the app that I’ve done everything else I can think of: tweeting, blogging, water-cooler-ing… but I still feel like I haven’t shown my appreciation enough.
Flipboard, you’re swell.
The blogs seem to be really excited about Real Racing 2 running at 1080p on your TV, via the HDMI adapter. While it’s a step in the right direction for iOS as a gaming platform, there are still some glaring issues. It’s still pretty disappointing that you can’t do this completely wirelessly.
Having to pay Apple for an expensive adapter, that’s pretty Apple-like. Having to sit a couple of metres from your big screen TV holding a flat, unergonomic device with a bulky cable out the side; well that’s pretty un-Apple-like. If I had to guess I would say that more than 90% of HDMI cables sold so far have been under 2 metres in length. My TV and couch are (a slightly excessive) 3+ metres apart and I’m not a) moving my couch closer, or b) sitting on a kitchen chair in front of a 50” TV just to “game”.
Don’t get me wrong, this is really exciting - but it’s not ready until the Apple TV is even remotely useful.
Source: Firemint
iPad vs iPad 2
