Posts tagged iOS
You know what you’re in for when you see this. The default spinner screams “WAIT!”. You’ve seen it hundreds of times and laying eyes on it makes you hold you breath as you wait. And wait. How frustrating.
But a spinner fills an important purpose. Apps often make calls to servers or in other ways have loading times, and a spinner clearly indicates to the user that something is going on and you just need to hang in there.
In fact, lack of spinners can be a usability problem. Twitterrific is an overall very polished app. However, when tapping the retweet button there is no indication that anything happened. I’ve done the same thing several times where I tap it again, and I’m presented with an error. Turns out the retweet did go through the first time, it just needed a few seconds. Replacing the retweet button with a temporary spinner while this is happening would remedy the issue.
A spinner is an excellent opportunity for branding, that little extra touch that sets your app apart from the rest. A custom spinner doesn’t send the same frustrating signal that you’re in for a wait. A well done, polished spinner can be mesmerizing and make time fly. An excellent spinner is one that you wish won’t go away. You might even go back and repeat the action just so you can get a second look.
To be fair to Twitteriffic, they have an excellent custom spinner of Ollie the bird flapping his wings when you do a pull-to-refresh in the app. It’s a terrific example of a spinner you don’t mind watching over and over.
The more basic kind of spinners can be easily made with Photoshop’s animation palette, just by tweening position or alpha channels. More advanced spinner are better made with a tool such as After Effects where you have finer control. A personal favorite is to draw a shape in Photoshop or Illustrator, then animate it in After Effects and apply layers styles imported from Photoshop. Once made, export it as a series of PNGs with at least 30 frames per second. Both iOS and Android can step through PNGs, resulting in a high quality animation.
Here are a two examples of spinners that I’ve designed.
Wrapp is a social gifting service I designed and branded for its first year. The spinner was an important element, using a ribbon shaped as a repeating “W”.
Filibaba is our personal venture where we make vegan & vegetarian cookbooks. Each recipe can be shared freely. When tapping the share button, the app asks a server for an URL and the button turns into a tasty spinner.
So don’t use the default spinner if you can avoid it, instead seize the opportunity to add that extra touch of delight.
✎ iOS subdued
If Apple redesigns iOS, think about the conditions for that design. A screen with vibrant colors, wide viewing angle, and a resolution where individual pixels disappear. That screen is laminated to the glass that sits in front of it, blending with the hardware.
It’s very likely these improved conditions would make the result different, and much more subdued, than what iOS 6 is.
I mean, have you seen a 2G, 3G or 3GS screen recently? You’d think you have some kind of eye disease. That screens sits at the bottom of a well with water covering it. No wonder a design made under those conditions is starting too look a little heavy handed.
While the default UI has changed some to accommodate the Retina display, bits and pieces of iOS still look the same as they did when the first iPhone came out.
This is one aspect of what the iOS 7 graphical overhaul will bring; a design set in today’s conditions.
And yes, people are more accustomed to touch, so let’s course correct and steer clear of forced real world metaphors.
Yum! This is what an iOS cookbook should be
At long last, Filibaba Meals (formerly Veggie Meals), is available on the iPhone. It’s been built from the ground up as universal app and it works great on both your iPhone and iPad. This update bring 4 new recipes, bringing the total up to 63 simple vegetarian & vegan recipes.
The original iPad only app has been available since January 2012 and has allowed us to collect essential feedback from early adopters, as well as arriving at conclusions we wouldn’t have made otherwise.
Such improvements includes an iPad landscape mode with an independently floating ingredients list, allowing you to efficiently see both ingredients and cooking instructions at the same time. We also increased the dimension of the recipe photo and added the ability to set recipe language (English, Swedish or Brazilian Portuguese) independent of your device settings.
Going from the big iPad screen to something that fits in your pocket was a refreshing perspective. I think this added to a bolder design for the iPhone.
Launching the app, you dive right into a two column grid with 9 categories. Picking a recipe brings your to the recipe view, with a recipe note sliding into the screen from the left. You can tap the edges of the screen or swipe anywhere to move side to side. Tap the recipe photo and it will rotate into fullscreen.
The most clever feature is the egg timer. It presets to any cooking time mentioned in the recipe – all you have to do is tap it to begin. I think it’s an excellent example of a simulated object working really well in an interface. It sounds like the real thing too, but luckily the ticking sound goes away when you return to the recipe.
Going universal, we’re slashing the price in half. The app wasn’t expensive to begin with, but to be a competitive on the iPhone, we feel we want to make it affordable for everyone at just a $1.99.
We think we’ve found a format for an iOS cooking app that’s better than anything we’ve come across out there. We hope you feel the same, and we’re hoping for your support as we continue our Filibaba endeavor. We’re planning several more cooking apps and your support will inspire the confidence we need to get there.
We’re a small team consisting of me, my girlfriend Jenny, her brother Viktor and our friend Robert Dougan. So far we’ve spent an unreasonable amount of time doing something we really believe in and we hope to be able to continue doing so.
If you’re a journalist or blogger or if you have feedback, feel free to contact us. We’re happy to answer your questions over email or a call.
✎ If you see a UI walkthrough, they blew it
Clear, Rise and Solar are three examples of a trend of “gesture driven” apps with a flat UI. These are novelty apps for people lusting for the very latest in app design. Besides using a more flat UI style, which is a topic for a different discussion, all apps contain non-standard interactions. This means users don’t know how to use them beforehand, and all start with a multi-step UI walkthrough before you get to use the app.
These apps have chosen to reduce details to achieve a minimal UI, but in the process the UI has also become harder to use. Unfortunately a UI walkthrough is quite an inelegant way to explain the core functionality of an app. It can be a frustrating obstacle before you can dive into an app, and you have to remember all of those new ways of using it once you get in.
The problem is mainly the lack of visual cues; there is no way to tell that sliding the main screen to the left will toggle the alarm on in Rise, or pinching a list in Clear will minimize it and take you up a level in the hierarchy. It’s not obvious, and what’s often called mystery meat.
Arguably a less intrusive way compared to a walkthrough is to guide the user in the situation with UI hints. This can be done through slight visual cues and animations. A hint should not be a popup (it’s probably even more disruptive than a tutorial).
Some examples of clever explanation of UI gestures include Apple’s own camera lock screen sliders. Just tapping on the camera icon makes the screen jump, briefly revealing the camera UI behind the lock screen. This combined with the ridges above and below the camera tells the user to slide the lock screen up. Before this behavior the camera was activated by a mystery meat action; double tap the home button and a camera button would appear to the right of the Slide to unlock well. There was no way to find it unless you knew that double tapping the home button was possible in this screen.
A more hands on approach can be found in games which often deals very well with progressive disclosure, revealing game mechanics as you move further into a game. In Pudding Monsters, if you sit idly by when facing a new scenario, an animated hand will appear and make a sliding motion. It’s inherent in humans to mimic actions we see and it immediately becomes clear how to proceed.
In our own iPad cooking app Filibaba Meals, which is soon to be updated for the iPhone, we have adapted the recipes to work equally well on the smaller screen. To do so effectively we have the ingredients in a separate layer to the left of the description. To make it obvious that there is something more to the left of the current screen, there is a subtle animation that moves a piece of paper into the left part of the screen each time you pick a recipe. It’s subtle enough not to get annoying over time, but still serves as a UI hint the first time. We allow both tapping the piece of paper, as well as a horizontal swipe anywhere on the screen to move to the ingredients view.
When it comes to teaching users to use your UIs, I would recommend to do so mainly by progressive disclosure with slight visual cues and subtle animations - only use a walkthrough as a final resort.
I just wanted to clarify my thoughts a little. It’s easy to pick on a few apps and present a few solutions that worked in other cases.
First off, the headline I picked for this article is a nod to late Steve Jobs “If you see a stylus, they blew it” and there is a disconnect between it and what I present in the article. I used it because I thought it would provoke a reaction, which it clearly did. If I were to do it again, I’d probably pick something more descriptive of my point.
I like Clear and understand the need for a walkthrough in that app. Clear brings many innovative features and tries to improve on the foundation of iOS through a more gesture based navigation that minimizes UI elements. And that’s a hard thing for a single app to do without giving the users some pointers. So I think the walkthrough is justified in Clear’s case, although perhaps given some iteration it could be transformed into a more gradual discovery. They already have an excellent starting to-do list that teaches the user basic functionality of the app.
Phill Ryu, from Impending, said:
"I … consider it a suboptimal solution we rushed in to fix a more broken situation (without [the walkthrough])"
"I agree with your point Max btw, it’s just extra tricker to do! I hope we can improve on it someday"
I don’t have any solutions for Clear and consider myself a fan, so if anyone can do a good job improving on an already excellent app, it’s them.
What’s ironic is that Rise and Solar so closely follows Clear’s formula. Without the walkthrough, they are hard to explore on your own.
Phill Ryu agrees of the irony:
"… It’s definitely a weaker spot. those apps taking inspiration should try to innovate there!"
Jeremy Olson of Tapity has an interesting follow up article; “Are UI walkthroughs evil?”
✎ iOS Icon Template
I made this template out of necessity and quickly realized it would be useful for the community. It has the following features:
• See each icon size accurately in its context and make sure it looks its best.
• The icon-small sizes are a bit tricky since they actually crop out part of the icon. If you want a perfect matching inner rounded rectangle, this template will help you.
• Rounded corner radius noted for each icon size.
• Made for Slicy, just drop the PSD on Slicy and get PNG assets ready for Xcode.
• Optimized for viewing on a Retina screen, i.e. future proof.
✎ Corner Radiuses of iOS Icons at Different Sizes
I still see icons getting this wrong, and there is some misinformation about which numbers to follow. Hicksdesign has the accurate numbers, and they are as follows:
Icon512.png 512px 89.825
Icon.png 57px 10
Icon@2x.png 114px 20
Icon-72.png 72px 12.632
Iconemail@example.com 144px 25.263
Icon-Small.png 29px 5.088
Icon-Small@2x.png 58px 10.175
An easy rule of thumb if you want to create a matching inner radius is to subtract the spacing from the outer shape from the corner radius. Ie, if I make a roundrect at 57x57 with 10 px radius (the standard iPhone shape), then make an inner shape that’s 49x49, 4 px from the edges, the matching corner radius would be 6 px (10-4 = 6).
✎ Black Status Bar in iOS 6 Gives Apps Slightly Rounded Corners
Jordan Borth noticed that apps such as Tweetbot running under iOS 6
b4 (Mitch Bernstein says it’s been in all betas) got a 2.5 pt corner radius added on top of it. Jordan says this only happens when the developer has chosen the black status bar style.
The black status bar has become increasingly popular among app makers and designers such as myself because it blends nicely with black hardware, and allows for nice rounded corners around the app, making the app feel like it’s own “unit”. This thinking was pioneered by Palm with the Palm Pre which made heavy use of this design choice throughout the OS, making things like notifications appear to happen on the hardware bezel.
Apple must agree with this thinking. What both Jordan and me found a bit disappointing is the exact radius the’ve chosen; 2.5 pt or 5 retina pixels, which is really quite tiny. I’ve always kept the radius to 5 pt (10 retina px). Sparrow even has double that, 10 pt (20 retina px). So this slight corner radius won’t be very noticeable. Dean Mayers hopes for some added consistency:
The radius size is stranger because notification centre has bigger corners. 10px I think
But since they’re essentially forcing this on apps with the black status bar, they probably wouldn’t want to make it too in-your-face as it does change the character of an app quite a bit.
And if you prefer the larger radius, you can still add it manually like you’ve used to.
Worth noticing is that the corner radius is on a system level, so if the app allows you to move the navigation bar out of place, it will become obvious that it’s not the bar itself that is rounded. Such as in Safari:
Thanks to Jordan Borth for the discovery and screenshots!
Erik Olsson adds:
This will end with completely round apps in a few years :)
✎ How the adaptive status bar in iOS6 determines which color to use
Wrapp iOS developer Simon Blommegård has been experimenting further with the new adaptive status bar and how it determines which color to use from the header bar. Turns out it’s quite a funky method. Rather than going on the tintColor, It uses the average color from the bottom pixel row of the header bar. This is illustrated by Simon’s yellow header bar with a blue and red bottom pixel row, resulting in a purple status bar:
✎ Adaptive status bar in iOS 6
The new status bar in iOS 6 is actually not blue, which you might think from looking at Apple’s keynote, but adaptive to whichever color the app uses. It uses the tintColor set on the navigation bar. Nice find by iOS developer Simon Ljungberg.
Swedish travel planer “Skånetrafiken” uses a red header and gets a red status bar:
eBay gets a gray status bar:
The black status bar has become increasingly popular among app makers and designers such as myself because it blends nicely with black hardware, and allows for nice rounded corners around the app, making the app feel like it’s own “unit”. This thinking was pioneered by Palm with the Palm Pre which made heavy use of this design choice throughout the OS, making things like notifications appear to happen on the hardware bezel:
However, as Simon points out, this new adaptive status bar in iOS 6 will blend better on white hardware where the black status bar is kind of an eye sore. And the running app gets even more brand prominence. I’m already starting to lean towards using this new status bar for future app designs.
This kind of feels like a “back to iOS” feature taken from the Mac, which has had a transparent menu bar since 10.5 Leopard. I’m glad for the unification of the status icons as well. Now they’ll always be pictograms and not switch to the more realistically rendered versions at times.
Thanks to Simon for the screenshots.
Why touch screens could still come to the Mac
There’s a misconception in the Mac community that multitouch capable screens will never come to the Mac. This is due to a statement made by Steve Jobs in the Back to the Mac event where Apple revealed Mac OS X Lion.
But what did he really say? I made a transcript of his keynote speech:
The first thing you think about is this [shows the above image of the hand pointing at a MBP screen]. We thought about this years ago. We’ve done tons of user testing on this. And it turns out it doesn’t work.
Touch surfaces don’t want to be vertical. It gives great demo, but after a short period of time, you start to fatigue. And after an extended period of time, your arm wants to fall off. It doesn’t work. It’s ergonomically terrible.
Touch surfaces wants to be horizontal - hence, pads! For notebooks, that’s why we have perfected our multitouch trackpads over the years. Because that’s the best way we found, to get multitouch into a notebook.
We’ve also in essence put a multitouch trackpad on the mouse, with our Magic mouse. And we’ve recently come out with a peripheral trackpad as well, for our desktop users. So this is how we are going to use multitouch on our mac products. Because this [points forward] doesn’t work.
- Steve Jobs
So in essence, multitouch needs to be a horizontal surface, because vertical multitouch causes fatigue and doesn’t work. And their current solution are trackpads and mice.
So what about a Mac with a horizontal surface?
This patent shows an iMac with a flex base that would let the screen pivot backwards. Such a Mac could have multitouch without contradicting anything that Steve said, since the touch surface is horizontal.
The final piece of the puzzle would be Mac OS X Lion. Many of the built-in apps such as iPhoto, iCal and Mail have a full-screen state that lets each app occupy its own dedicated space. The difference from Snow Leopard is that spaces in Lion are laid out horizontally. To switch between them, the default behavior is to swipe left or right with four fingers. Sound familiar? Yep, just like the gesture Apple tried out for iPads in iOS 4.3.
The full-screen state could make a great touch screen mode for apps, because they are essentially like large iPad apps. iPhoto is a prime example, since it mirrors all the features of the regular iPhoto, but in a touch-friendly manner. It even has an iOS-like bottom tab bar.
Launchpad is an other key feature for a touch-friendly Mac. What better way to launch your apps than something that looks and behave just like the iOS home screen?
Perhaps this touch screen Mac could automatically bring you to the fullscreen state of the current app as you pivot it backwards, or bring you to Launchpad if the current app doesn’t support touch.
We’ve already seen a number of Mac apps from third party developers that are basically touch-friendly, such as Reeder and Sparrow. And the Mac is increasingly influenced by its iOS siblings, as demonstrated by Mac OS X Lion. I would be surprised if Apple doesn’t eventually borrow the biggest innovation made in iOS - multitouch- and bring it back to the Mac.
Ps. If you want “a great demo” of what not to do, watch this Asus All-in-one video.
All images in this post are © Apple, Inc. This text is pure speculation.