Max Rudberg

Posts tagged ios

Aug 12

iOS Launch Image: An Alternate Approach

The launch image is the piece of graphic that is briefly displayed on a cold launch of an app. The recommended approach is to display a placeholder image with things like the navigation and tab bar, but without any seemingly tapable icons. This primes the user for what’s coming next.

iOS 7 added a fade from the icon on the springboard to the launch image, followed by a fade from the launch image to the starting point of your app. This makes for a smooth transition and will gently fill the blank bars with tappable elements.

For a third party apps, the launch image can be a way to extend your branding. This should be done in a tasteful manner, and without any artificial delays. Adding even just a few milliseconds of extra launch image time will frustrate users.

Twitterrific is a nice example of tasteful launch image branding. It has a frosted glass look, with a blurred version of the app icon behind it. “Twitterrific” is shown in see-through letters. The resulting transition from the springboard is that the icon is being zoomed into and blurred.

What’s lacking from this launch image is the priming achieved by placeholder elements. This has bothered me a bit and was reason enough for me to steer clear of a similar approach in our own Filibaba cooking apps.

However, what we’ve done in our recent updates feels like a nice middle ground. The launch image is a combination of an enlarged high definition icon and outlined elements. This way you have something nice to look at, while still primed for what the UI will start out like. The outlined grey visual style more strongly clarifies the inactive state, compared to colored bars.

After the launch image we present each recipe with a scaling animation, which makes the transition from the springboard pretty seamless.

tl;dr

I feel like I’ve found a nice middle ground between branding and priming the user for the starting point of an app.


Jul 9

May 29

✎ Spinners

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.


May 16

✎ 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.


Feb 14

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.

You can learn more on Filibaba, or go download it directly from the App Store.

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.


Dec 28

✎ 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.

image

image

image

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.

image

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.

image

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.

image

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.

Update 2012-12-28:

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])"

Phill Ryu:

"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?


Dec 20

✎ 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.

Download here

image


Nov 1

Inspired by the more living home screens of Windows Phone and Android, this concept video shows how the iOS home screen could become more. 

In this concept, an app icon can be resized from 1x1 to 2x2 or 4x2, similarly to how you would on Windows Phone 8. The increased size can house widget like functionality and provide easy access to core features of that particular app. For example, you could expand the Settings icon into a widget with a brightness slider, and quick toggles for WiFi, Bluetooth, Personal Hotspot and Do Not Disturb. 

The newfound space could also be used to give a miniaturized window into the app, showing content already on the home screen. This could be useful for Phone, Messages or Mail. Instead of a glaring red badge, you’d be able to see the messages or calls directly on the home screen.

To launch the app, you can press the shrunken app icon in the lower left. 

The expanded icons can be moved around like regular icons and placed in the manner you like. But for obvious reasons, you cannot place an expanded icon in the dock; it would just slide back onto the home screen. 

One could imagine that this functionality would also be available to developers, who could include it for their apps.

This would rather nicely complement the existing feature set of iOS and make the home screen more engaging.


Sep 8

✎ 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

Icon-72@2x.png            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).


Aug 23

✎ 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.

I’ve written about this previously:

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 :)


Jun 15

✎ 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:


Jun 15

Jun 13

Jun 13

✎ 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.


Jun 11

iOS 5 Notification Center Fall Down Transition

My tweak is a change to the transition that takes you to the Notification Center. Swiping down from the menubar makes the interface fall to the bottom of the screen, revealing the notifications in the background. To leave the notifications, you tap the interface at the bottom of the screen.

There has been a number of redesigns of the Notification Center after Apple revealed it in the WWDC keynote. Most change the linen texture into something else. I think the texture could be toned down a bit, but my gripe is that the linen texture is used inconsistently.

The linen texture has been used to denote that something is at the very bottom layer of the interface. For example, when you open a folder, the wallpaper separates to reveal the folder contents on a linen texture.

Therefore, the Notification Center that slides out above the interface shouldn’t really use the linen texture.


Page 1 of 2
Copyright