March 25, 2013
The chances are good that you’re reading this article on your smart phone. It shouldn’t be news that, increasingly, mobile design is synonymous with web design. But while the ability to read anything anywhere isn’t noteworthy anymore, the new ways that designers shape and deliver content—from a new gesture-based app, or a responsive news site that shifts to fit the device, to an interface with flat fields of content you control with the swipe of a finger—all showcase a new series of design solutions and innovations.
“People are reinventing the standard all the time,” says Nick Disabato, who runs a freelance interaction design consultancy in Chicago.
Nothing Major spoke with Disabato, also the editor of the Distance design quarterly journal and author of Cadence & Slang, and Timoni West, a designer at Foursquare, about how design is evolving in response to the challenges, constraints, and characteristics of the mobile space.
Disabato: I don’t think responsive web design would be such a big deal if it wasn’t for mobile stuff happening right now. A lot of people conflate the two.
West: When you design for mobile, you need to put a large emphasis on organizing the content, or at least how you display the content. If anything, I think the web is much more tidy now, because people have had to go through their content for mobile. I think it’s so ironic that we’ve spent so much time working towards web standards, and we’re finally at a point where you could reasonably say, “If you’re using a modern browser, it’s going to be relatively the same;” we’re the closest we’ve ever been. Meanwhile, on mobile, there are 16,000 devices and they’re all completely different, and if you choose to standardize across devices, you’re going to have a lesser experience on one device.
Disabato: There was an activist campaign that went on for 15 years, The Web Standards Project, and it ended its campaign earlier this month. Its work is done. But now mobile is a bigger problem. They won, but… please come back.
Disabato: I like Fantastical a lot, it’s a calendar app that uses a lot of natural language processing to handle your calendar events. You can type in something like “Nothing Major chat 3-4 tomorrow,” and it will just dump it in there. The way it’s working on mobile fits its data density really well.
West: Have you guys heard of a weather app called Haze? It’s great information design in a small space. If you tried to transfer it to the web, you would lose some of the magic. Path is definitely doing a good job of allowing you to get a lot of content and actually enjoy reading it on a phone, which for me can be difficult, since I’m farsighted and it’s hard to read tiny things.
Disabato: The Magazine is a really good example of reformatting content. I know it’s a very generic title, but it’s run by Marco Arment, who co-founded Tumblr. It fits on iPhone and iPad, and you can share it out to other people or add it to Instapaper, which allows you to read things offline. ProPublica has done some really responsive news apps, very information dense and well-researched.
West: I notice there’s some very cool uses of random images to make things look prettier. This Is My Jam just came out with a new way of dealing with background images, and Rdio has done great work with their new release and the background art of individual songs. You could certainly template that stuff.
Disabato: I think you’ll see apps with very clean lines, soft gradients, and not a lot of information density, for better or for worse. For instance, look at an app like Rise, an alarm clock, that has this soft gradient that reflects the sunrise or sunset, and it looks amazing. But it also really only has three or four things you can do with it.
West: Items as movable objects is going to be incredibly popular. Right now, in iOS, natively, you can go into some edit interface to move lists and so on. [The list-making app] Clear has the same thing. It’s sort of assumed, after a certain period of time, you can do something with anything on the screen and move it around in a useful way. I think that will extend into applications that don’t have something like that now.
Disabato: I see that happening in lots of indie games right now. You see that in games like Spaceteam and Hundreds, the two-tap gesture and the ability to control something in the interface. The more I think about it, the more I see various design patterns in game designs working their way into more utility apps.
West: There is a whole class of gesture-based functionality, basically, that mobile apps are trying to take advantage of, which is fantastic. Now on Foursquare, when you pull down on a venue, it checks you in without you having to tap the screen. It’s a power user feature we tell people about—it’s very rare you accidentally do it. Plus, a little bit of a learning curve isn’t that bad. A lot of web gurus say it’s bad if there’s any kind of learning curve or tutorial needed, but I disagree. We’re making the standards. This is the time when we’re figuring out what the best practice is.
Disabato: It’s funny, I’ll see people much younger than myself having no problem learning totally new interaction models on these interfaces when they aren’t given any help. I’ll see people my age or older, I’m 31, they’ll struggle and won’t be able to do anything on it, and they’ll need help.
West: We already have a mental model, or muscle memory, tripping us up. I have an Xbox, and I always had Nintendo before, so I keep wanting to hit A and B all the time. If I was a five year old, I would have no issues.
Disabato: I think you might start seeing apps that are experimental for their own sake. They do very weird things with gestures, they’re not really serious labored endeavors, but they’re something you can play with and understand the limitations of the medium. You see that a lot with game design and sound apps, music generation apps, that sort of stuff, where it’s just this weird set of graphics you play around with, like [sound toy app] Pluto Pluto. The more people actually use them, the more you’ll start to understand there’s way more to design than what Apple proscribes in their interface guidelines.
Disabato: Calling something flat design is often a red herring. If you look at something frequently held up as an example of flat design, an iOS game called Letterpress, there are shadows everywhere. When you pick it up, you slide it all over the place. You call it flat, but you’re just not looking at the spatial relationship there.
West: “There’s no gradient, so it has to be flat.”
Disabato: Yeah, or there’s no rounded corners. It’s a way to say it’s rectangular, and not 3D, and it doesn’t look like leather stitching. I do think people are upset with skeuomorphism, and it’s not used as frequent as I used to see. But it’s funny that people name it flat design and are very surface about it, no pun intended. Okay, that pun was entirely intended, fine.
West: I like the aesthetics of flat design, it’s mid-century modern again, maybe Bauhaus-y. It’s very minimal. People conflate it and think it’s the results of responsive design, as opposed to a reaction to skeuomorphism. It’s coming out of a huge part of the design of the last couple years. If everything’s textured and embellished and ornate, designers get sick of it and do something completely different.