I think it’s due time for a Cookbook progress update. We’ve spent the last few months actively collaborating on the Cookbook application design and working on the UI and, now, the actual programming portion has been underway for a few weeks. I think it’s worth stating out right that it has been a pleasure collaborating with Michael on the UI, as he clearly brought a lot of new ideas to the table. We never really expected the winners to play such a big role in the development — but they are, and that’s a great thing.
So where has Cookbook gone since you last saw it? Well, it has most definitely evolved. One of the most important things we wanted to emphasize was visual browsing of your food. John and I began talking months ago about how text based lists just won’t cut it for something as visually diverse as food. Would you rather see “Key Lime Pie” or an actual key lime pie? To afford the visual space required by pictures, we moved the app into three columns. Michael had created two mockups, one featuring an outline for the source list and one with a drawer and pop up based form of categorization. In our experience, average users have a lot of difficulty dealing with outlines when you almost never need to heavily nest categories. The left to right flow of a column based app works very well and provides a visual and straightforward user experience.
Considering the new visual approach to the app, we’ve decided to include at least 300 beautiful stock photos with some slick Google Image integration. You’ll be able to see a quick iChat buddy icon style pop up for the Google Image results in case you want something a bit different.
Beyond just the pictures of different dishes themselves, there is a very visually diverse nature for food: the culture behind it. Whether you’re dealing with Japanese, Italian, Mexican, or Middle Eastern, the style and beauty behind the culture is what really defines the cuisine. That’s why we’ve decided to offer some simple visual changes to the app depending on what cuisine you are in. If you’re in Mexican, you’ll feel like you’re in a Mexican restaurant. Likewise, we hope to make you crave for some great pasta when you’re in the Italian section. We’re going to do this by offering a themable attributes view whose background and section containers change. I hope you understand that we intend to approach this with a great sense of Mac style. Look at the shelves in Delicious Library, for instance… it is certainly possible to take a physical object or pattern and apply the right style to it for it to fit into a Mac app.
This brings us to the next major change: the recipe editing. The initial mockups included a sort of Address Book style list solution. A lot of users have problems understanding why you have to go into edit mode before being able to edit, and even then why they can’t just start typing free form. We’ve decided to make the direction and ingredient editing as free form as possible while still offering intelligent formatting and gutter utilities. For instance, if you reference an ingredient in a direction you might have an easy “add to shopping list” black and white icon that appears next to it. Likewise, ingredient calculation will be very freeform. We never want people to have to open up a sheet and go through a few tabs to change or find out some info. The entire visualization and management process will be transparent.
Well, there’s your update. And now… take a peak at what an actual (non mockup) build of Cookbook looks like (click for big version and bear in mind that a lot of the graphics are temporary!):
We considered describing all of the different stages of discussion in detail but I think the mockups created in the process speak for themselves. Check out what it took to get to this point:
