UI Design in Apple iBooks Author

Apple recently announced a big push into education, expanding iTunes U's already awesome selection of free online University classes, and adding K-12 as well. Adding a new textbook section, with a whole bunch of features specifically for text books, such as note taking, integrated quizes, and the ability to automatically create flash card tests for yourself. These textbooks have several interactive elements: such as pictures you can zoom to take up the whole page, or swipe across to see changes over time in a diagram, custom javascript widgets right inside the book, and so on.

The thing that interested me most is the authoring tool though. There's a new program called iBooks Author that lets anyone create these books, test them on your own iPad (wow!), and put them up on iTunes for free or for sale. (Note: there was some PR fumble where people though Apple owned your content, but they don't. You are free to publish your content anywhere else too.) Anyway, pretty sweet.

The iBooks Author program was immediately accessible/understandable to me because the UI is basically the same as iWork programs such as Pages. The same buttons for inserting shapes or tables, working with text, working with graphics and so on. It has a few extra buttons for inserting widgets and publishing.

The whole reason I'm writing this is actually specifically the portrait/landscape mode feature. This is the very FIRST thing that I thought of regarding this authoring tool. How the hell are they going to handle that? Doing a layout when you know a fixed screen size/ratio is one thing, but how the hell is this authoring tool going to handle when you turn the iPad sideways? All programs/books do handle that, but this seems like a big problem. All the iBooks I've read before were just plain text, so it's only Apple's own UI that changes when you rotate a book, then the author's text gets reflowed to fit the page, no big deal. These textbooks can have very complicated page layout though, with graphics and text that have to be just in the right place to make it look right.

What's worse is that if you rotated a layout sideways, it wouldn't even fit the same number of words anymore. It would be possible for some words to get cut off when rotating due to how all the images fit in portrait vs. landscape, and now it would mess up all the rest of the layouts in the entire book. You really need to layout the entire book twice, once for portrait and once for landscape. That is decidedly un-Apple, especially if it's going to be in a consumer-level tool. Imagine if your graphic is in on page 6 of one layout, but page 7 in another, and the annoyance and frustration of laying everything out twice. What the heck are they going to do here?

I watched the official Apple video of the event where they announced this stuff. All these hassles I was puzzling about, the presenter swept aside in two sentences. He explained that sometimes you want to get right down to the text, and focus on that rather than all these extras. Viewing a book in landscape mode gives full page layout with pics, movies, and interactive elements as integrated parts of that layout. But turning the iPad sideways into portrait mode automatically changes the formatting, and extracts all those non-text elements and puts them in a labeled column to the left. You can touch any of them to make them full screen, then close them when you're done to return to rest of the book. And this view is generated automatically by the authoring tool, so book-creators only actually have to worry about designing the page layout mode (landscape). You get the portrait mode "for free."

I tried it out with one of the new texbooks on my iPad, and it works well, as promised. It makes sense. The reason I mention this is I thought it was an interesting example of lateral thinking--of solving a different problem rather than the one you're stuck on. I was imagining this whole "you have to layout every book twice, how do make a good authoring UI for that?" type of problem. But that's a sucky problem to have to solve. A simpler solution is to not have the problem in the first place.

I think that comes up in game design quite a bit. Many times I've struggled with the wording of a card in a card game where there thing it's trying to do doesn't fit so easily into the system. Sometimes we come up with a good wording. Sometimes we sort of can't and say we'll come back to it, then later realize that card should be doing a different thing entirely anyway, which just happens to be easier to write text for! So you know, if you're stuck on something, maybe come back at it from a new angle.

Comments

[A Pizza Pie]

Thanks for writing about this. Very insightful and informative. I wasn't aware of Apple's keynote on education and their current and future plans. This will come in very handy. Thanks again!

[Z]

I must say I love you blog, came to know because of kongai and I always wondered what your thoughts about on kongai's ui design. For me I felt like that was the reason the game never achieving it's full potential.

I'm not usually the commenter type I feel more like reading but since you posted something about UI design I felt I should ask now XD even though I don't know if you can say anything about it because of kongregate or some kind of legal obligation

well thanks for your time and keep up the good work ;D

oh yea my interest on that is because I'm currently studying human–computer interaction

[Sirlin]

I think Kongai's UI is "ok." Some big buttons in the middle that you mostly click. Some info shown on those buttons, can get to move info with mousever / click. It's painful that the whole game is a fixed resolution that's pretty low res though. It's wanting to show a whole lot more info than there is an easy way to at that res.

The real problem imo is the production values. If it had some real animation, it wouldn't *just* be eye-candy, it would make the game more "readable," like easier to understand what is actually happening. You kind of have to read the game log sometimes, and rather than fixing that by making the game log take up a bunch of space on screen, more production values that specifically give visual cues for things that appear in the game log would really help. (Tafari's trap for example. Whether Bathazar has a cannon ball loaded or not. Some graphics that show Darla's bird actually taking the other guy's item.) I think it's hard to really get what's going on in the game sometimes.

[Z]

oh thanks for answering so fast... I see your point, indeed if you want to know what's going on you need to check log or buff/debuff icons... and I must say it's probably really hard to argue to someone saying a "card game" needs animation to work XD

again thanks for your time ;D