12 12 / 2013

Looking Back, Looking Forward: Apple’s Knowledge Navigator

Before there was Siri, before the iPad, before FaceTime, even before WiFi — there was Knowledge Navigator.

 

26 years ago, John Sculley - then CEO of Apple - thus envisioned the future of computer design and user interface. I don’t recall seeing this in 1987, but I’m sure I would have thought it was science fiction, just like Star Wars or E.T. Today, that very fiction is the norm. The advent of smart mobile devices have brought us exactly what was prophesied by Knowledge Navigator. Like the professor in the video above,I use a virtual butler, Siri, to get weather updates.  I use FaceTime to have a visual conference with friends. To get digital content and news, I turn to my iPad. And like the professor, as it happens, Apple is the brand with which I interface.

However far-fetched it seemed at the time, Knowledge Navigator helped its audience to reimagine what technology could be. I’m without doubt that tech will evolve at an even more incredible pace in the next quarter century. How it will impact the way we communicate with each other, and how we consume content, remains open to debate.

Kamahnie Buckle manages business development at MAZ. You can find him tweeting @KamahnieB.

15 10 / 2013

Re-Designing Hundreds of Apps for iOS 7

I remember the exact moment it hit me– we had gathered couches in the office to watch the WWDC Keynote like it was a movie, and as they unveiled the iOS 7 video segment, it became immediately clear: we were going to have to redesign everything.

Like many app designers that day, I was feeling incredibly inspired after that Keynote and immediately got right to work.

We had already been planning on a UI overhaul of the Store section of our apps, and so now I had a really good excuse to do exactly that.

The tricky part was (and always is) that the app I was designing was actually a template for hundreds of apps that use MAZ to publish onto iOS, and so while I wanted to be on the bleeding edge design-wise, it still had to be vanilla enough to look good with all the types of content we help publish.

I’ll give away the ending of the story here, but these are our new iOS 7 designs for iPad and iPhone:

image

Here is a journey through the process:

iOS 5

Version 2.6 of the MAZ Publishing platform marked the last major update of our apps’ UI, which was back in February of 2012. We launched v2.6 with the premier of Inc. Magazine for iPad. This marked an important transition as we added a web button and a Twitter button in the Store section of our apps, allowing users to visit websites in the Store. Prior to that users could only purchase/download content to view it - this was the first move toward offering free web-based content inside the apps as well.

(look at the RSS and Twitter icons toward the top right)

image


iOS 6

A year and a half later, we released MAZ Publishing 3.6, which looked like this:

image

Same general concept but with some tweaks. There had actually been five updates to our apps between v2.6 and v3.6, culminating in this modern and polished UI, but one clearly built for iOS 6.

Concepts for a New Storefront

Soon after v3.0, which was April 2013, well before iOS 7 was announced, I was already working on some concepts for a brand new Store UI.

My basic goals were to:
- give a fresh new look to the apps
- emphasize new content
- give even more access to web content
- not stray too far from our current layout so we wouldn’t need to re-process all the assets on our servers
- make Clippings more prominent (trivia: Clippings was introduced in MAZ Publishing 2.8)

My first design was one which in retrospect is actually pretty iOS 7-y with it’s bright colors and white background, even though I didn’t know about iOS 7 yet!

I took our “full cover view” and made it the default view, instead of “grid view” which had always been our default previously, so that the newest cover would be the main event when a user launched the app, instead of many small thumbnails with none weighted over the others.

image

I added a Clippings Button to the right of the cover so that a user could very easily create a clipping of the cover.

image

I also introduced more social buttons so that the user could load any of that web-based content right inside the Store. I borrowed from our iPhone UI which had a sliding drawer and applied it to iPad.

This was the birth of the “hub” idea which is now a cornerstone of MAZ Publishing - basically that a publisher’s app should be much more than the converted print product - it should be a one-stop-shop for all content, including web, social, etc.

image

I killed content descriptions since the content was big enough to be legible (as opposed to the thumbnails), and most descriptions were redundant with what was already designed into the cover.

Another thing I brought to the new Store was the draggable overlay that we were already using within our content Reader, instead of a full-page web view inside a UITableView as we had previously done for web content accessed through the Store.

Now when a user tapped on one of those buttons along the left, the site would open in a draggable overlay like this:

image


Initial Concepts for iOS 7

The very day of the WWDC Keynote, after catching a glimpse of iOS 7, I got to work on updating my designs. Ironically, I didn’t really think I had that much to do.

First, I changed the fonts and toned down the gradients of the buttons. Then I changed the drawer background color to light grey to make the whole thing feel airier.

image

I thought I was done!

Of course, a lot of my initial impressions of iOS 7 were incorrect - my buttons were wrong, there should be no separation between nav bar and status bar, and as it turned out, going lighter was the wrong move…

Seeing is Believing

Even though I was still tweaking buttons, colors, and fonts, the new Store UI was actually already well underway with our dev team at the time of the WWDC announcements.

Soon enough, I had a live build to run on my iPad. I thought it was going to blow me away (after all, it was my own design come to life, how could I not love it?), but the truth is, I didn’t really like it as much as I thought I would.

It didn’t really make sense– I had really seen it a million times as I worked on it, had previewed it on the actual devices (Skala Preview is the greatest invention in the world) and simulated interaction (I use Keynote for all my prototypes and even most of my final design work - builds/transitions = fast prototyping), but using the actual real app is just different. And it wasn’t good enough.

Not to mention, my initial attempts at updating to match iOS 7 weren’t actually right. Once I had time to read through the new iOS Human Interface Guidelines and actually use iOS 7 firsthand, I realized that there was a lot more work to be done.

Buttons Without Buttons

For the purchase/preview/download buttons, I toyed with various arrangements, but came to find that the new iOS 7 button-less button (i.e. only text) would work well. I made the colors of the text to match the colors our users were accustomed to. Green to buy, blue to read, and so on.

I also used the fact that we were dealing with pure text to add some more descriptive language to the buttons.

image

I couldn’t really do all the buttons as text-only because they would all be competing for attention. So for the subscription buttons, I added a simple thin border, and slightly emphasized free trials with a lighter blue.

image

Back to Black

Okay, well not black, but dark blue. One problem when I was using the live build of the new Store was that the covers were being drowned out by the pure whiteness of the background. Sort of like in the new Photos app for iOS 7, your eyes don’t know where to focus when the pics are against the white, and really pop against the black (especially when using a black device where the black screen/black hardware border is ambiguous).

image

Here is a version of the UI that is very close to the final version, in light grey and in dark blue.

image

See how much more the cover pops out on to the dark background? Our v3.6 design for iOS 6 had a subtle dark blue gradient, and so I decided to backtrack to that palette, but without a gradient.

image

I removed all the drop shadows, even on iPhone behind the drawer. We also added some gesture based navigation, like swiping back to the Store from the Reader instead of needing to tap the back button.

For the navigation bar icons, I made some modifications to our buttons to make them a bit larger, more geometric - I made them solid white with no drop shadows, and generally made them look cleaner.

image

Similarly, for the interactive buttons inside the content, we flattened all of them and made them feel lighter.

image

Here are a bunch of other side-by-side comparisons between our iOS 6 iPhone design and iOS 7 (two different apps but you get the idea).

So that’s the story! It was a long process, but I believe we landed on the right final product. Submitting those hundreds of app updates was no fun, but that is a story for another post another time…

To send you off, here is a classy animated GIF of the various iterations of our iOS 7 design. I recommend listening to a Justin Bieber song while you watch.

image

Paul Canetti is one of the founders and CEO as well as lead UX/UI designer at MAZ. He tweets about publishing, design, and media at @paulcanetti and teaches at General Assembly in physical reality.

11 5 / 2012

There has been much sparring this week as comments and responses have come pouring in about this post by Jason Pontin at Technology Review.

I wrote a brief response when I first read it, and I have a lot of thoughts on these matters, many of which were so well-articulated in this post by Mike Hanley that they do not need to be re-written here. 

While the debate is healthy, sensationalist headlines about publishers (plural) disliking apps, based on ONE company, and ONE person’s experience, is not fair or right to all of the others who are making it work, but are perhaps less rambunctious about their successes. Jason’s frustration comes across loud and clear though, and I truly do feel for him and other publishers who feel scorned by their iPad app experience.

I am not going to pick a side re: Apps vs. HTML5 in the longterm. Anyone who claims to know the future of mobile and tablet publishing and consumption norms is just speculating. Every publisher should be thinking about betting on every possible horse they can. 

We do have some historical data from these early years of content on mobile and tablet devices, and if you look at consumer habits (which you should), there is a lot in support of apps.

81.5% of time spent with smartphones is with apps, 18.5% on the mobile web [source]. There are 250+ million iTunes users with credit cards on file that can easily make App Store and in-app purchases (as opposed to entering their credit cards into a mobile site). App content can be read offline. Apps just “feel” better as they are quite literally native to the device. And the list goes on… That is why MAZ has chosen to work exclusively with apps for the time being. 

But Apps vs. HMTL5 ultimately is the wrong debate to be having. Technology Review is making a serious mistake in their assessment because they are ignoring the real wrench that has been thrown at them (clue: it’s not apps).

Mobile and tablet devices themselves are the real disrupters, not apps. The experience of using these devices is so radically different than using a computer, perhaps as radically different as the computer was 20 years ago when compared with print.

Publishers’ worlds got turned upside down with the birth of the desktop web, and they have only recently gotten their website acts together, if at all.

Now once again, a huge change is rocking their boat. And longterm, it’s true that you won’t be able to just throw your print edition up on the iPad untouched, but you also can’t just throw up a new version of your website.

Tablet and mobile consumption is so so different than computer consumption. Flipboard’s CEO, Mike McCue, spoke recently about the beauty “revolution” of the iPad. All hail! The dark ages of web design are finally over! Viva la revolution!

For the beauty of the iPad, print is actually a much closer analogy than a website is. 

In the end, we need to be aiming to perfect the tablet consumption and production experience. It’s not print, and it’s not the web. It’s somewhere in the middle. I personally call it “digital print”. No one has it quite right yet, but how could they? The device itself has only existed for 2 years. 

All that being said, there is very much a place, now, in 2012, for tablet versions of print, AND tablet versions of websites. You have to start somewhere. There must be an entry point for publishers into this new market. You can’t just skip to the end. (and if you wait until then to start, you’ll be way too late)

Magazine publishers now have two products to worry about with tablets: their print edition and their website. How do you do it all?

TR writes about moving to a purely RSS-like model. I think that makes sense for a web team that is used to outputting to a website— used to templates, a CMS, and sacrificing branding to other RSS readers. The expectations of website consumers is met also: they can read what they want and/or read it through a nice RSS reader like Flipboard.

However for a team used to outputting to print, they need a solution that builds on their existing workflow, which is very different than a web team’s. These are editors and designers who greatly value the curation, presentation, and branding integrity of their content. And in turn, their readers have come to expect that experience. 

Newspapers have it the hardest. Their content is consumed more like a website’s, but they are used to print workflows. Tough spot to be in. 

Over time, these various sorts of publishers may all converge to a single mobile/tablet type of content provider. I believe there will in fact be a convergence at some point. It won’t be web, and it won’t be print— it will be something new. 

But you still need to start somewhere, and you need to start now. Don’t go bet the farm, just start. Get in the game. Choose a way that is frictionless and cost-effective, leaving room to grow as the market grows. 

Readership will only get more fragmented over time, not less. Think of apps and HTML5 “web apps” as two different platforms, just like iOS and Android are different platforms. That’s how the app/HTML5 conversation should be framed.

What you should be concentrating on instead is mastering the experience of tablet and mobile devices, and working with tools that allow you to explore and experiment.

11 5 / 2012

Really well written and thoughtful response. I agree 100% about custom costs being impossible to regain ROI on, and about how apps are not magically successful— traditional marketing and promotion still applies in the app world!

On the tech side, platforms rule the game here— the legwork is already done, allowing publishers to do what they do best: content.

08 5 / 2012

Keyboard shortcuts are one of things I miss the most on the iPad. Love this non-literal gesture stuff. Just awesome.

Tags:

Permalink 1 note

05 4 / 2012

Depending on the sort of app, the gap becomes much smaller or much larger. But the convergence is inevitable.

03 4 / 2012

NUI is a dumb term.

Read this article with a grain of salt, but some nice pointers in there.

03 4 / 2012

Almost entirely large publishers working with Adobe (even Woodwing is built off Adobe). Bloomberg Businessweek+ is a true departure from the norm and highly innovative, even if is not necessary better than replica apps. I find it does not feel enough like the print edition, which I like more.

They are evaluated on “design, functionality and use of rich media” which I also find strange since consumers consistently say that they don’t always love rich media in digital mags.

Certainly seems biased toward the biggest publishers but interesting whenever studies about this space are published. Any attention is good attention.

02 4 / 2012

Interesting analysis of various large-publisher digital subscription strategies.  I think the ownership sub vs. the access sub is the fundamental divide that needs to be solved. The right answer might differ based on the type of content. (same with iTunes vs. Spotify)

29 3 / 2012

Wall Street’s lastest iPad projections for 2012 average to 63.5 million.

63.5 million iPads is up 50% from 42.3 million iPads sold in 2011, which is the average of publicly-announced analyst figures from TrendForce, Strategy Analytics, DisplaySearch, Merrill Lynch and others.

I believe 150% growth is too conservative. Let’s look at Apple and the iPad by the numbers:

42.3 million iPads sold in 2011 compared to 14.8 million in 2010 (286% growth)

Q1 2012 revenue = $46.33 compared to Q1 2011 = $26.74 (173% growth)

$AAPL stock price hit a new high yesterday at 620.06 whereas 3/29/11 it was 350.96 (177% growth)

The iPad (and iPhone) had a nice hockey-stick over the holiday season (Q1 for Apple).

This is what the next 4 quarters will look for the iPad like if they take exactly the same trajectory as last year. I would argue that in reality the growth rates will be steeper.

Also consider the push Apple is making in China— I believe China sales will overtake US sales sooner than later, and as production becomes more efficient they will sell more and more. The only limited factor there is Apple’s manufacturing ability. (which is arguably the best in the world, so that just shows how insane the China market upside is)

All in all, I think these new published estimates for 2012 are low, and then if you pile on another killer Q1 in 2013, are we looking at over 100k iPads over the next 365 days?

I think yes!