Mobile app design considerations for web designers
The statistics too, have been kind of staggering. One recent study by Flurry, showed that consumers spent 81 minutes per day using mobile apps, compared to 74 minutes of web surfing.
As more people begin to spend time on apps compared to the Internet, you may be wondering if mobile app design is an area you should begin to explore and how transferable your web design skills are.
In this post, we checked in with a number of experts in the field to gain their perspectives. Joining us are Robin Nixon, Aaron Maxwell, Sarah Lynn, Mike Gualiatieri, Josh Clark, and J.D. Biersdorfer.
What advice would you give to web designers who are thinking about entering the area of mobile app design and development?
How transferable are web skills?
Fortunately, for the vast majority of apps, it is possible to use web technologies for achieving similar results to writing native code. It is only when you get to time-critical functions, such as the high frame rate requirements of fast action games, that you have to return to the native language of a device or operating system.
In your opinion, what app(s) do you think are good examples of a well-designed app?
I don’t really like to mention any particular apps as representing good design since there are so many of them, but since you asked the question, undoubtedly an outstanding app is Theodore Gray’s The Elements, which is an interactive 3D exploration of all the elements, in which you can almost imagine touching them because you can rotate each sample, moving them about with your finger tips, and even view them in 3D. For me this is an example of where an eBook (which is what this really is) becomes far more than a simple book to eBook translation (which most other eBooks are), taking books to a whole new level.
How do you view this time in web design?
Robin Nixon: I believe that right now is the most exciting time for programmers and developers since the early 1980s, when microcomputers first blossomed. Once the PC took the computing throne, only Macs and the Linux operating system offered any real competition (and precious little at that). But now the operating system wars are on again, this time fueled by the exponential take up of mobile devices such as phones and tablets, and the phenomenal downloading of apps for them, which means there’s a world of opportunities out there. In my view, “There’s gold in them hills.”
Aaron Maxwell is founder of Mobile Web Up, a mobile web design agency.
What should web designers think about as they embark upon the area of web apps?
Many of the same concepts still apply. As a designer, think about what actions you want the user to be able to take—what experiences you want them to be able to have. This focus is often the best place to start.
Menus are most effective when they do not overwhelm with too many choices. Organize into a hierarchical, drill-down structure, with no more than a dozen choices on each level. Consider whether using a tabbed navigation will help the user quickly take the different action they need.
Spacing of elements is tricky on mobile. Extra padding is a very useful technique on the desktop for semantic grouping; you can place a group of widgets, images, or text boxes together that are related, and distinguish them from a different group just by separation of vertical and horizontal space.
But on a mobile screen, you just have so much real estate to work with. So the designer must be more economical with how elements are spatially separated, padding with just a few pixels rather than dozens. This can work by including other cues. Rounded corners around a perimeter help imply grouping. And different background colors can also communicate a change of context.
What you omit is at least as important as what you put in. Think of it like this: every item you add to the settings menu, for instance, has a cost in added complexity, in time and attention of the user. Carefully consider whether any feature or element is worth it, especially considering the kind of high-distraction environments that mobile apps tend to be used.
In your opinion, what apps exemplify good design?
It’s important to study other highly successful mobile apps to find what’s effective. Look at the famous names: Facebook, Skype, whatever Twitter client is most popular this week. Ask friends and family what apps they use the most, and try to figure out why. (Hint: they may not consciously know why, so asking them directly won’t help much.) Study Mobile UI Patterns.
Sarah Lynn is a web designer and creative and the owner of Sarah Lynn Design.
How do you suggest designers should go about learning mobile app design?
I’ve found some of the best ways to learn how to design for apps is by researching the market. Look at some of the apps out there, analyzing their functionality, what elements they utilize that are already a part of the phone’s offerings and how they could be improved upon to be easier to use. Study the interactions of different elements and how different apps compare to one another. Many companies have already put in the time to do extensive user testing. Learn from what they have developed already and find ways to build upon them and make them better.
There are many great books out there to get you started. One I highly recommend is a book by Suzanne Ginsburg titled Designing the iPhone User Experience. If of course you’re interested in the iOS market. It talks about user testing and how to plan for an app design. A great place to start when you aren’t sure how to go about the process of designing an app.
Learning how to gain user feedback and heavily plan on paper before going to the computer is a great skill for any app designer (or interactive designer in general). Another great way to learn is to get in touch with an app designer who is already producing great work. Ask them to be a mentor and give you any pointers they are willing to offer up. Most designers are willing to spend a few moments of their time if you ask nicely. Get feedback from your friends and other designers you may know. Show them your prototypes and get their feedback.
In your opinion, how transferable are web design skills for designing for apps?
Somewhat transferable. I would say it falls more in the realm of interaction design as a whole. Which encompasses them both.
There are many different things you need to consider though, due to the size of the devices, requirements of the different platforms, and simply because of the way the users interact with apps compared to a website. Mobile user profiles can vary quite a bit, from the typical on-the-go mobile user, to the mobile user who is simply too lazy to grab their laptop and uses their apps while hanging around the house (myself included.) So studying these patterns and designing to fit different lifestyles can be similar in a sense to designing a website. No matter what the medium you’re always looking to design it around your target audience.
Learning to think in a smaller, and often times less flexible format can be challenging. The same goes for thinking about landscape vs vertical & how you might adapt your app to work both ways. Leveraging the mobile device’s built-in tools is another reason why researching is so important when it comes to designing apps. It’s almost best to pick one platform and learn the ins and outs of it, rather than trying to learn them all. It can be quite daunting and overwhelming if you try to learn it all at once.
Just like any new medium, it requires the willingness to learn and keep up-to-date with the fast-paced market to be successful.
What does a designer for apps need to pay particular attention to in designing a good user experience?
User expectations are higher for mobile apps than they are for websites. Apple’s iPhone apps brought design cachet to mobile apps. Also, the touch and gesture capabilities provide new ways of interacting with apps. The first step to design great apps is to understand your users better than they understand themselves. Traditional quantitative and qualitative research is important to create personas (fictional people that represent your users). Great design comes from imagination— designer imagining what a user would find useful, usable, and desirable in the context of the app.
For mobile apps in particular, designers should consider the five dimensions of mobile design context: location, locomotion, immediacy, intimacy, and device.
Source: Forrester Research, Inc.
What advice would you give to web designers thinking about moving in this direction?
Do it. Mobile app design for smartphones and tablets is a growing opportunity. Everyone needs great design. There are three paths to mobile app development:
- HTML5. Apps
- Hybrid. Is a native application that renders HTML5 inside of it.
All of these development paths require design.
Josh Clark is a designer, developer, and the author of Tapworthy: Designing Great iPhone Apps and Best iPhone Apps: The Guide for Discriminating Downloaders.
What advice would you give to web designers who are interested in moving into app design and development? What do they need to learn?
As for the actual design process itself, designing mobile experiences differs in important ways from desktop design. The two gotchas for newcomers are ergonomics and context.
For touchscreen devices, you have honest-to-god ergonomic issues to contend with. You’re designing an interface for fingers and thumbs, and that means you have to consider issues of comfortwhere does your thumb naturally come to rest on the screen? More than that, there are visibility issues. When you’re working an interface by hand, you’re obviously obscuring the screen. That means you have to design your controls so that they don’t interfere with the content. Both of these considerations—comfort and visibility—explain why most touchscreen smartphones display their main controls and navigation at the bottom of the screen. That’s where your thumb comes to rest when using the phone one-handed, and it also means that you can work the controls without getting in the way of the content. This is exactly the opposite of what we’re used to on the desktop where primary menus and controls go to the top of the screen.
The other area that’s new to consider is context. How and where will people use this app? How does that affect their priorities, and the features you should put front and center? You have to be careful here. A myth has evolved that there’s just one kind of mobile user: hurried, in a rush, distracted. That’s certainly the case sometimes, but not all the time. Mobile isn’t just on the go: it’s on the couch, in the kitchen, waiting at the airport for a delayed flight. All of these situations are moments when your audience has lots of attention to spare and can really spend time with your app. At the same time, mobile devices can also do more than desktop computers because they’re loaded with all these sensors that effectively give them superpowers: GPS, microphone, camera, touch, gyroscope, compass. This device context shapes how your audience uses their phone and will expect to use your app.
All of this means that you have to consider how the device context affects user priorities, and those priorities are likely to be different from desktop priorities. But there’s a tricky twist to this: you can’t confuse this context with user intent. There’s a common instinct to oversimplify mobile apps, to make them desktop lite. That’s wrong. We do everything on our phones these days, and every time you say, “People don’t want to do that on mobile,” you’re wrong. We’ve all had that experience where you go to a website on your smartphone, and you’re bumped to the mobile version of the site, where they’ve stripped out exactly the feature or content you’re looking for. Just because you’re on a small screen rarely means you want to do less. It’s like saying that just because a paperback book is smaller, we should remove chapters. Don’t confuse device content with intent.
What I’m saying is that I believe that in most cases, mobile apps and websites should have thematically similar content and features to their desktop cousins. The presentation and priority may very well change to fit mobile mindsets, but the content should almost always be the same. In fact, in many cases, the mobile versions should do more, because the devices are capable of more. That’s why Amazon’s mobile app can do things that the website can’t do: scanning barcodes, for example, to look up items.
For web designers, this means that you have to start thinking more flexibly about how to build websites. We’ve been doing it wrong for over 15 years, building websites only for desktop browsing. That’s not what the web was designed for. It was designed to be platform neutral, to be displayed on any kind of screen or device. You just don’t know how your website will be viewed now. There are a jillion devices all with different form factors that can access your website now, and that means it’s important to build websites that can adapt to any device. For most of us, this is a new way to think about building websites — it’s not a matter of generating a separate mobile website and a separate desktop website. Instead, it means building a single website that gracefully adapts to each device’s constraints and capabilities.
We are very fortunate here on planet earth that we live alongside the universe’s smartest guy about how to design this kind of responsive website, and his name is Ethan Marcotte. Ethan just wrote a great new book called Responsive Web Design that describes how to go about building sites that adapt their design and features for any device. He’s a genius, and you can be a genius, too, by reading his book. This stuff is as important to the health and future of our craft as the web standards campaign of the last decade. Every web designer should put aside a few hours to knock back that book.
In your opinion, what makes for a well-designed app and good user experience?
After looking at 400-500 apps for the book, Best iPhone Apps, I think the apps that work best are the ones where the user interface has been specifically designed for the small phone screen and not apps that take the desktop approach (with lots of icons and menus) and try to cram too much into the space. A good app is also a stable app—well-tested and relatively crash-free.
Are there any particular apps that come to mind for being good design examples?
Although I didn’t include it in the book at the time because I found it cluttered and crashy, “AccuWeather” has redesigned its iPhone app into a really gorgeous weather program with big, colorful graphics and a fairly intuitive interface so you don’t have to dig around several screens just to see how hot it is — and how hot it will be. The free and the paid apps differ slightly in the design, but both use the same visual elements to quickly convey weather conditions.
I also like the “Kayak” app for the stuff the developers put into it besides the usual flight-and-hotel-booking part. For example, there’s a section you can tap to find out how much each airline charges you to check bags, another to find out what stores and restaurants are in the airport you’re stuck in, a currency converter and even a packing checklist to make it a well-rounded practical travel app that’s easy to navigate.
News-wise, I still think the “BBC News” app is great for headline hounds. The app’s creators manages to find a legible way to put nine top stories (with headlines and small pictures) on the home screen, along with a Breaking News banner and a button to tap so you can hear live streaming BBC Radio. It’s very easy to edit the categories of news you want to follow and there are links to popular pre-recorded video and audio clips you can stream, like the brief World News Summary video.
Compiled exclusively for Webdesigner Depot by Debbie Hemley. Debbie is a blogger and social media aficionado. She works with businesses to develop content and social media strategies. Read her blog posts on All the News. You can also follow Debbie on Twitter (@dhemley).
This post was brought to you by the offset booklet printing company, Next Day Flyers.
What are your experiences with mobile app design? What apps do you think demonstrate good design principles and user interface? Let us know in the comments below.
Mobile app design considerations for web designers
Thu, 22 Sep 2011 09:45:44 GMT