Max Rudberg

Posts tagged design

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.


Jan 20

✎ Flat UI is not the only way forward

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.


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?


Nov 18

The Feed - Ocean’s first iPad app!

The Feed iPad app icon

Short version:
We’ve made a Free RSS Reader for the iPad! Check it out!

The longer version: how we did it!

During one of the creative days at Ocean, a FedEx day, me and my colleague Sebastian Evans decided to try and come up wih a design for an RSS reader for iPad. 

We are both heavy Google Reader users, so this was familar ground for us. At the time, the iPad I bought off of ebay arrived just a few weeks earlier. The iPad already felt like the ideal device for consuming content, but the RSS readers were less then optimal for the new format.

What we set out to do was a as direct an RSS reader as possible. Immediate acces to your content, no navigating through narrow lists that forces you to focus on only a fraction of the screen.

The basic idea is similar in layout to Google Reader, as we both like it. You have your news items in a long scrollable canvas. A set of arrow buttons let you quickly jump from one article to the next. Articles are marked as read as you scroll past them. 

The Feed reading view

To give you a better overview we later decided that a zoomed out mode was a good idea. It gives each item a fixed size, letting you more easily glance all the posts in a category. It can be accessed by a zoom button or the pinch gesture. 

In addition to the standard Google Reader functions such as star, we also have a pin function. This function will keep the pinned item unread, until you unpin it. It will also put that item in a folder so you can easily collect articles that seem interesting in one place. This works as a compliment to the star function, but letting you use the star for articles that you have actually read and like.

The Feed Zoomed out view

Selecting which feed to read from is a little tucked away in our RSS app, as we felt the content should take center stage. But it’s only a tap away. In the lower left you have the feed button. It brings up the filter. Depending on how you have your Google Reader account set up (yes, you have to manage it separately on the computer) you will see your folders and feeds in a horizontal layout. Tapping a feed opens that feed in the reading canvas, tapping a folder expands the filter with an other row.

Folders and feeds change their appearance depending on the number of items they contain. A folder with feeds in it has a paper sticking out, an empty folder does not. A news feed with many items has a large pile of papers, it will then be reduced as you read more and eventually it will become empty. We felt this is a more natural and hopefully less stressful way of finding your news.

As it is based around consuming content, there is a witty eating theme to the app. The Feed will give read items a chew mark and the delicous looking icon will hopefully keep you coming back for more!

The graphical style is tuned to make your reading experience as enjoyable as possible, with a subtle graphite gray as the base. A vibrant red will make any selections you make clearly visible. 

The Feed filter view

The Feed is free, and it is made for ourselved as an endavour to create something that is entirely ours. We have done everything from initial ideas to concepts, mockups, coding, branding and marketing of this app. I hope that you will enjoy using it as much as I’ve enjoyed being part of making it.

I would like to give a big “thanks!” to: Christoffer Ahlbin who coded the app, he just kept going and going! The sweet Jenny Sundén who was the interaction designer in the project, also responsible for sanity check and planning of the effort. And everyone else at Ocean Observations for making it come true!

And do be understanding, as it is our first app, there might be some bugs. But we are dedicated to ironing them out and are eager to hear your feedback and improve The Feed even further. If you do find anything, please shoot us an email to thefeed@oceanobservations.com

So what are you waiting for? Go Download The Feed!


Oct 11

The Importance of a Well-Designed iPhone App Icon





The first thing that will catch your attention when looking at the iPhone is the candy-colored, push-friendly icons that inhabit the home screen. 

The rounded squares that frame the icons makes them look like buttons. The shape is characteristic enough to be printed on the hardware home-button as a representative of the home screen. And with a curved gloss put on top, the impression is a device that looks so good you want to lick it. Or at least pick it up.


Ruining a perfect picture

Ever since the introduction of the iPhone 3G and the 2.0 firmware, users of the iPhone have been able to download third party apps from Apple’s App Store. Consequently, the balanced design present in the stock icons and depicted on every box that the iPhone ships in is quickly shattered once you’ve downloaded a handful of third party apps. Many third party icons fail to reach the same quality.


Stand out in the crowd

Aesthetics might not be the main concern if you are the developer of an app. But I think users are picky with which icons they let inhabit their home screen. Collecting apps and their icons on the home screen is almost like having a physical item, a small gem. If it doesn’t look the part, it might get stuffed a way on a different page or in a folder.

And with the large number of apps on the App Store, it’s becoming increasingly harder to get people to notice you. 

When browsing the App Store, all you really have to guide you is the name of the app and the icon. Based on those two pieces of information you have to decide if the app seems interesting enough to read more about and possibly download.

With so little information to go on, the importance of a well-executed icon becomes apparent. The icon must not only represent the core functionality of your app and communicate your brand, it must also do so in such a visually appealing way that makes it stand out and get the quick scrolling through long lists of apps to come to a grinding halt.


Gloss for everyone

Apple provided an easy way for anyone to become a master of the lickable gloss. You can simply add a squared image to your app and it will automatically be masked in the correct shape and have a pre-made gloss put on top. 

This might sound like an easy way to a good-looking icon. But if your image is pulled off a website or perhaps a photograph, all the gloss in the world is not gonna make it a good icon. It’s like putting lipstick on a pig.


Thinking inside the box

I believe that a successful icon needs to be made from scratch. And instead of seeing the rounded square shape as a limitation, it should be seen as a possibility to be creative. The shape can for example be used to deform regular objects to fit inside. Take a look at the Youtube, Calendar and Notes icons – these are clever examples of how an object can fit into this shape.

And remember that an iPhone icon doesn’t have to have to have gloss either, almost a third of the stock icons does not have it.


A dedicated community

Did you know there is an entire community based around the customization of the home screen icons on the iPhone?

The MacThemes forum is probably the biggest outpost for such icon sets or themes.

The majority still uses the exact same rounded square shape and many are very similar to the design of the original icons. In fact, some of the most popular icon sets are just refined stock and third party icons. 

So if you don’t supply a good icon with your app, chances are someone else will. If they notice you in the first place.


Copyright