News

Twitter Offers Mobile App Dev Tips

Twitter Inc. started the new year by sharing some of the hard-won tips and advice it has gleaned from its own development of mobile apps for the iOS and Android platforms.

In the inaugural post of its Mobile App Playbook series, the Twitter dev team last week tackled prototyping and design of the UI, along with using testing and analytics to ensure the initial code is stable and not "crashy."

"Even though good design seems obvious when you see it, designing for great user experiences isn't a simple process," Twitter said. "Big companies devote entire teams to it -- but if you don't have the luxury of having a big team, there are still ways to create a solid UX on your own."

Twitter didn't disclose the size of its mobile dev team, but indicated in the blog post that the tips come from its "(very) small team" that built mobile apps such as Cannonball, described as a "magnetic poetry game," and Furni, an example mobile-first furniture store.

To begin the prototyping and design process, Twitter advocated a decidedly low-tech technique. "Start with a whiteboard," Twitter said. "It's old-school, but way faster for iteration (so easy to erase mistakes). Show other people the whiteboard. If they look confused, ask them why, then make changes with them."

Twitter devs also advised creating a good wireframe of the app and, again, soliciting feedback. The dev team is taking pains to list the tools it has found success with (along with their Twitter handles), and for wireframing, it mentioned Sketch (@sketchapp), Paper (@FiftyThree) and Balsamiq (@balsamiq), which can all "turn a scribbly hand design into one people can read and give good feedback on."

"These tools also make it much easier to communicate ideas between team members who aren't sitting next to each other," the post continued. "When we were building Cannonball with our team in London, San Francisco, and São Paulo, this was critical. A proper wireframe helped us all be sure we were building the same app."

After whiteboarding and wireframing other tips included "get a quick and (maybe) ugly version working" with the barebones basics, such as system fonts, standard padding and standard views, and "then get a prettier version working."

Speaking of the prettified version, Twitter said, "No amazing mobile app relies entirely on system-provided views, animation, and interaction design. Once you walk you can start to run -- with animation libraries and physics engines that make your app more fun to use. Once you've made the app functional, it's important to make it fun."

Throughout these initial phases, Twitter said, it's important for the team to focus on the actions people will take most with the app. "Are they selling crafts?" the post asked. "You'll definitely need a 'create listing' view. Is it an events app? Collecting RSVPs should be easy. Make these screens easy to locate, and buttons for key actions easy to find- and understand. Designing your own icons may help establish an individual look and feel for your app, but don't reinvent the wheel. Obvious is what's familiar."

Part two of the initial post in the Mobile App Playbook series explained how to start with a stable foundation, using tools such as Crashlytics Beta, which the team said "really saved us."

"Simulators and emulators can take you pretty far for some amount of testing, but there's no substitute for getting your app on real devices, being used by real people who use and abuse it in ways you couldn't predict," Twitter said. "Having our colleagues test out the apps helped us find and solve dozens of bugs we had never seen before."

As it continues its Mobile App Playbook series, Twitter is soliciting help from other mobile developers to add to its list, inviting them to Tweet their tips to #MobileAppPlaybook.

"Next time, we cover our experience with account systems and social login," Twitter said.

About the Author

David Ramel is an editor and writer for Converge360.