top 10 tips for building better mobile apps

15
TOP 10 TIPS FOR BUILDING BETTER MOBILE APPS If you keep these tips handy, they’ll help you stay focused on building best-in-class, cross-platform native apps.

Upload: linh-le

Post on 08-Aug-2015

42 views

Category:

Technology


0 download

TRANSCRIPT

TOP 10 TIPS FOR BUILDING BETTER

MOBILE APPSIf you keep these tips handy, they’ll help you stay focused on

building best-in-class, cross-platform native apps.

 Beauty is relative to the platform (#1)

These screenshots show the main screen of the app, logged in as the same user at the same time, so the data is exactly the same.

They are each beautiful and well designed, but the concept of a “beautiful Android app” is very different from that of a “beautiful iOS app.” That’s because beauty is relative to the platform.

Before you design your apps, take a step back, learn how your target platforms work, and implement your branding around their specific parameters. And remember that even if your app renders differently across platforms, with Appcelerator, you’ll still be able to use a single code base and have a very high percentage of code reusability.

Code reuse is for your app’s logic -- not necessarily for UI

There are many misconceptions about code reuse with Appcelerator or any cross-platform tool, for that matter. Expecting 100 percent code reuse isn’t reasonable because it not only means you’d have very little control over your app’s UI/UX, but also your app would look the same across all target platforms.

Of course, some people think this is the ultimate goal of a cross-platform tool, but that’s misguided. That’s the goal of a Web browser.

Code Reus

e

Make all of your programming logic completely independent from the screens or even the platform in which it will run, so all of your programming modules are platform-agnostic and, most important, reusable across platforms. Then build the native user interfaces, which will consume these “local Web services.” Using this architecture, you can make sure all the user interface code is completely decoupled from the logic, and both can flow independently.

Always think “Web service” (#3)

Because we’re developing cross-platform apps, I recommend you build your code to be completely abstracted, as if it was a Web service.

This template is written using Alloy, Appcelerator’s MVC framework. The template provides the MVC architecture needed to maintain platform-specific user interfaces, with content and logic reusability.

You can download the app template from GitHub.

Remember that tabs can be deep or shallow (#4)

iOS tabs have a built-in Navigation Controller, which allows multiple levels of navigation inside each tab. Android tabs, however, are shallow and should have no in-tab navigation.Per Android design guidelines, tapping on the Back button in the main screen with tabs should kill the app. Now, if you click on any of the notifications on the Facebook app, you’ll see what’s illustrated in the image.

There are two problems with this. First, you’re in the Notifications tab, but the ActionBar title says “Comments.” This is confusing and counterintuitive. Second, and most important, the Back button now is redefined: Instead of closing the app, it takes you back to the previous screen.

As a rule of thumb, don’t try to force navigation inside your Android tabs. Doing so will break the operation of the Back button and make your app feel awkward.

And the best way of knowing what’s available to your app, and what you should and shouldn’t do, is by reading each platform’s user interface guidelines.

Know your target platforms (#5)

Check out the iOS guidelines and the Android guidelines. After reading through these documents, you’ll have a wealth of information that will help you understand each platform, design better user interfaces, and know what to look for in the Titanium API or, alternatively, in a third-party module.

If you’re a graphic artist, make sure you learn about each platform, their navigation paradigms, and their visual language. You will find subtle differences that make a great difference in usability.

If you’re a programmer with a graphic artist in your team, or you’re working as a contractor/freelancer for an agency that is giving you mockups of the app to be built, learn to work with the designers and educate them.

Work with your design team (#6)

To cover the features not officially exposed, Appcelerator offers a Native Module Development Framework, which Objective-C and Java developers can use to expose additional features and functionality. These modules can dramatically enhance the overall quality of the app and therefore the user experience.

Don’t fear modules (#7)

Learn to love each platform with its strengths and limitations. Learn to compare the platforms, but not to criticize them. They are all good in their own right and in their own contexts. Always try to build the best possible app for the platform you’re targeting.

Love your target platforms (#8)

Don’t let your personal preference influence the design, functionality, and quality of your cross-platform apps. If you love iOS, that’s no reason to show more commitment to your iOS app, leaving behind your Android users.

Don’t spend days working on the Android version, then finally run it on iOS and discover the object positions are off, the fonts need adjusting, or the app simply crashes on load. My recommendation is to test often; if something breaks on one platform, you can immediately identify the problem.

Test often (#9)

Since your cross-platform app will have both cross-platform and platform-specific code and components, make sure you test often.

Your user is the most important consideration when it comes to building your app. Be a user of the target platform and know how the platform works. Be a user of your app so that you can experience it for yourself. Look around, examine other apps, compare and analyze as honestly as you can.

Be your user (#10)

Learn more about native cross-platform app development in the book

“Build Native Cross-Platform Apps with Appcelerator” by Ricardo Alcocer

KEEP IN TOUCH!

Email: [email protected]

Twitter: @FromLabsNews

Website: http://fromlabs.com