Max Rudberg

✎ iOS subdued

Thu, 16 May 2013 18:24:21 +0900

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.

Photoshop action: Remove compositing artifacts & banding

Tue, 02 Apr 2013 22:14:01 +0900

A while back, Marc Edwards tweeted:

8 bits per channel really isn’t enough colour resolution, even for fairly basic compositing (note the banding)

Only now I realized I should probably share one of my daily actions I use in Photoshop. Like Marc, I work in 8-bits/channel, which I think most designers still do. With this bit depth, you will eventually run into compositing artifacts such as banding.

What this simple action does is convert the selected layers into a smart object, then change that smart object to 16-bit depth. When a 16-bit smart object is placed inside an 8-bit document, Photoshop compensates for the lower bit rate with dithering and your banding likely disappear. The last thing the script does is add a subtle noise – but this is entirely optional and often you get just as good as a result or better if you disabled the noise filter.

A downside to this method that each smart object you create this way will increase the file size of the document.

The upsides to this way of working is that you get the speed benefit & filters from working in 8-bit, with the compositing benefits of 16-bit.

Download the action here

Yum! This is what an iOS cookbook should be

Thu, 14 Feb 2013 19:25:00 +0900

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.

✎ Flat UI is not the only way forward

Sun, 20 Jan 2013 21:25:23 +0900

It’s curious how Apple’s hardware and software have taken such divergent paths. Looking at iOS hardware and software separately, one might think they were produced by different companies. The drop-shadows and textures of iOS stand in sharp contrast to the clean lines and invisible seams of Apple’s hardware. Comparing major models of either the iPhone or iPad line, Jony Ive’s industrial design team seems to be on the march, creating devices that feel ever more like they’re carved from a single block of magical stone. So why is it that Apple would ship these devices with software featuring deep shadows and visible stitching?

The above quote from Dave Wiskus was used by John Gruber to argue that the future of UI design is one without textures and effects that mimic real world objects or materials. I would argue that they are observing design decisions in one craft, industrial design, thinking that it applies to UI design as well. But industrial design and UI design have very different characteristics, just like print has different characteristics compared to screen design.

The hardware and UI also have different roles to play. The hardware is constant, not changing, and should take as little of your attention as possible. This goes perfectly in line with what Apple are doing; reducing the hardware to a minimum with clean lines and invisible seams. As technology gets better, the hardware gets out of the way even more. The hardware sets the stage for the user interface, and its content, to shine.

When you launch an app on your mobile device, the device essentially becomes that app. Screens are great at drawing fine details and subtle gradients. Its part of a UI designers toolbox to make use of textures, shadows, light effects, etched or embossed elements and so on to make the UI tangible and understandable. I don’t see them going away.

With Jony Ive now heading up Apple’s human interface group, in charge of both hardware and software, we will see some changes. But I think they will not be as drastic as some make them out to be. It will rather be a slight correction of trajectory that will steer clear of extremities such as Find My Friends in the future.

On a system level I hope to see more of the fine and subtle improvements we saw in iOS 6, where default elements with a glossy look was replaced with matte gradients, the pinstripes background was refined and subtle drop shadows were added to give more depth to navigation bars, making it clear that they are sitting above scrolling lists and that the list will move underneath the navigation bar. Sounds obvious, but it’s a subtle improvement that makes you understand behavior from looking at a static screen.

Jony Ive talks about being true to the characteristics of a material, such as the ability to make a sturdy unibody out of a single piece of aluminum. I wonder what that approach is when it comes to user interfaces? Some would say a “flat” look is “truly digital”, but I think the flat style is just that; a stylistic choice. There isn’t really anything to be true to, except the user and helping them understand the device and its apps as easily as possible. If you can use textures and UI effects to help you with that goal, I think you should.

✎ Will Apple Make a "Phablet"?

Sat, 05 Jan 2013 02:09:00 +0900

Mockup by Lorenzo Orlandi

The past week there has been rumors about the iPhone 5S coming in an array of color and more than one screen size. This could mean just 3.5” and 4”, the sizes that have been available previously.

But more interestingly it could be a new, larger size.

This principle was proven with the iPad with Retina and the iPad mini, that the iOS interface can have the same resolution and the same interface at two different screen sizes. The smaller iPad mini uses a 163 PPI screen, the same pixel density as the original iPhone. The corresponding Retina version of that screen is 326 PPI. The iPad with Retina uses 264 PPI, still plenty of pixels¹ to qualify for the Retina brand.

We’ve learnt that displays are made out of larger sheets, then cut into the desired size. Apple are already making these sheets at 326 and 264 PPI. So what they could do is cut the same 640x1136 pixels used for the iPhone from the 264 PPI sheet, and get a 4.9” screen.

This would be both cost effective and would require no effort from developers; apps would just work. An interface that becomes larger only becomes more usable.

This way, Apple would enter the “phablet” market². There is obviously such a market, likely people who figure they can get something in between a phone and a tablet instead of having two separate devices. If they can enter a new market segment this easily, why shouldn’t they?

You might think Apple wouldn’t compromise the quality of the display by lowering the PPI. But Retina is just a brand, not a pixel density. It basically means double the density of what it was before. For example, the MacBook Pro with Retina use 220 PPI. So 264 PPI is still a high resolution screen and Apple could just say you will use it further away from your eyes, qualifying it for Retina. Changing the amount of pixels and introducing a new resolution is not likely since it would cause increased fragmentation. ↩
You might think Apple wouldn’t make a phone you cannot easily use with one hand. They made a point of this when introducing iPhone 5. But what Apple says is always in support of their current lineup; it doesn’t mean they won’t do something else in the future. For example, Steve Jobs said 7” tablets should ship with sandpaper so the user could sand down their fingers to be able to use them. But now we have the iPad mini, although to be fair it’s closer to 8”. ↩

✎ If you see a UI walkthrough, they blew it

Fri, 28 Dec 2012 02:06:00 +0900

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.

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

✎ iOS Icon Template

Thu, 20 Dec 2012 03:08:00 +0900

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

Inspired by the more living home screens of Windows Phone and...

Thu, 01 Nov 2012 17:44:07 +0900

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.

✎ Corner Radiuses of iOS Icons at Different Sizes

Sat, 08 Sep 2012 19:19:17 +0900

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

✎ Black Status Bar in iOS 6 Gives Apps Slightly Rounded Corners

Thu, 23 Aug 2012 18:44:00 +0900

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

MacWorld.se reviews Veggie Meals ➞

Sun, 08 Jul 2012 18:54:00 +0900

MacWorld.se reviews Veggie Meals ➞:

Swedish MacWorld.se has posted a very positive review of our iPad cookbook! They enjoy the easy-to-use navigation, temperature settings, beautiful graphics and straightforward recipes. What they miss are a greater number of recipes, something we plan to remedy in the future. iPad feels like a natural companion in the kitchen. If you’re looking for some inspiring recipes, be sure to try these out. They’re vegetarian recipes, but you don’t have to be a vegetarian to enjoy them.

Technical feasibility of an iPad mini ➞

Sat, 07 Jul 2012 01:33:29 +0900

Technical feasibility of an iPad mini ➞:

I got reminded by Lorenzo Orlandi about this article from appadvice.com, dated march this year. Written by BY A.T. Faust III, it explains why a 7.85 inch iPad mini is technically feasible:

“If you do the math, a 7.85-inch tablet with a resolution of 1024 x 768 works out to a PPI of 163. 163!

[…]

See, when Apple was designing its first iPhone, company engineers determined through testing that the minimum comfortable size for an interactive element on a touchscreen display is 44 x 44 pixels. Anything smaller would yield erratic results. The pixel density used to arrive at this number, naturally, was that used in the first iPhone — again, 163 PPI.

[…]

Whatever the size of a given menu option in a given iPad app, it cannot shrink beyond Apple’s pre-established minimum. It might take a bit more hand-eye coordination, but overall interaction should not be affected.”

If Apple does this it’s a departure from what iOS have been up until now. An important strength of iOS is that you know the exact dimensions of the user’s screen.

If the iPad and iPad mini share the same layout, the app might not look perfect on either.

Unless, we simply get the option to make a specific layout for the smaller size format. That way Apple could say all existing apps work, but developers would still be in control to adapt the UI if they wish.

I’d be all for it.

Daring Fireball on iPad mini's screen ➞

Fri, 06 Jul 2012 00:58:07 +0900

Daring Fireball on iPad mini's screen ➞:

While John Gruber is likely right about the physical size and resolution for the screen (7.85”, 1024x768 px), I think the following is just plain wrong:

” … for developers, the iPad Mini acts just like an iPad 1 or 2: same number of pixels, just a little smaller physically. It’s not a new target.”

You cannot make a touch interface that much smaller and still have it be easy to use. Text would be tiny and hard to read, buttons hard to hit.

UI elements are roughly the same size between iPhone and iPad. An iPad mini would have the same physical size elements to remain finger friendly, but with smaller screen real estate to put them on.

It would definitely have to be a new target, and apps would have to be designed specifically for it, just like you have to do different designs for iPad and iPhone.

iPad mini would obviously have more in common with iPad than iPhone though. I imagine apps could look roughly the same, but with less room for content.

✎ Podcasts app and skeumorphism

Thu, 05 Jul 2012 19:09:40 +0900

I don’t know why people get so upset over Apple’s Podcasts app with a reel to reel deck on the new playing screen. It’s a beautiful illustrative element for a screen that otherwise would be quite dull. Watching it is almost hypnotic.

You could argue it doesn’t make sense as a metaphor for podcasts, but it’s fun. It’s that simple. Get over it and carry on.

How app developers should manage their relationships with bloggers ➞

Thu, 05 Jul 2012 19:07:00 +0900

How app developers should manage their relationships with bloggers ➞:

What problem does it solve? If you can’t describe a core problem that your app solves, how do you expect a blogger to understand why it’s important enough to write about?

Some good advice on how to reach the right community with your app.

Solve Problems. Don’t Build Ideas. ➞

Thu, 05 Jul 2012 19:04:00 +0900

Solve Problems. Don’t Build Ideas. ➞:

You can toss nearly every successful company into the problem solving equation. Mark Zuckerberg is introverted and he needed a way to find more cute girls at Harvard. He built Facebook to solve his problem.

Great startup advice. Building an idea is bound to fail, solve a problem to succeed.

The iPhone and Disruption: Five Years In ➞

Wed, 04 Jul 2012 18:50:00 +0900

The iPhone and Disruption: Five Years In ➞:

Daring Fireball sums up iPhone’s fifth birthday very well:

The iPhone is not and never was a phone. It is a pocket-sized computer that obviates the phone. The iPhone is to cell phones what the Mac was to typewriters.

Be sure to read the whole thing.

Designing for Context: The Multiscreen Ecosystem ➞

Wed, 04 Jul 2012 18:36:00 +0900

Designing for Context: The Multiscreen Ecosystem ➞ :

This is the use case where we see Filibaba being very relevant:

When it’s time to cook, an iPad can be brought into the kitchen for a cook-friendly interface with large fonts and big buttons so the user can touch the tablet with a knuckle in case of wet or messy fingers. The tablet’s larger screen is a perfect size for the kitchen, much like a traditional cookbook resting on the counter.

Interesting interview with Stephen Hawking ➞

Mon, 02 Jul 2012 18:14:26 +0900

Interesting interview with Stephen Hawking ➞:

Ars Technica:

Another frightening possibility is intelligent life is not only common, but that it destroys itself when it reaches a stage of advanced technology.

Evidence that intelligent life is very short-lived is that we don’t seem to have been visited by extra terrestrials.

✎ Nostromo Wallpapers

Sun, 01 Jul 2012 21:59:42 +0900

After me and my girlfriend saw Prometheus, I had to watch the original Alien movie again. The walls of the cryochamber jumped out at me, as I used to draw similar patterns in my sketchbook. I decided to recreated the room for a wallpaper. It was made in Cinema 4D, with touchups made in Photoshop afterwards.

Head over to Max Themes to download!