Our spanking Groovy Books #3 and #3⅓ have been released last period and we’re sincerely grateful for the tremendous feedback, reviews and photos submitted by our truly smashing readers across the planetary. We appreciate your event and your interest, and thanks all for your support and esteem.
Today we are happy to present a yet another sample chapter from the book. Within his chapter, Aral Balkan explores what “native” actually means, what options designers and developers have and gives practical advice on what you need to know when deciding on tools all for your next mobile-optimized project. The taster is too available gratis download in PDF, EPUB and MobiPocket or .NAUGHT next to all files.
— The Smashing Editorial Team
Printed via Aral Balkan, reviewed by Josh Clark and Anders M. Andersen. This cover doll in the Smashing Book #3 was designed by Kate McLelland.
As you probably know, user experience designing is the discipline concerned next to all aspects of the design of interactive products. Tho` it incorporates important elements of graphic shape and happening design, it is primarily concerned with the design of interaction. Its nearest cousin in the design realm is goods design. As user experience designers, we design practical products. Furthermore, since munition design and software design are so intrinsically linked and inseparable, the line that separates commodity image from interaction design — if it exists whatever — is a faint one.
A Web Designer Is a User Experience Designer
Designing an application is element much nearly drawing a pretty picture of an application as designing a car is astir drawing a beautiful picture of a saloon. Just As an automotive designer essential have intimate knowledge of the various materials that walk into making a car, so too must a Web designer understand the materials that go into a website or application.
As interaction designers, we’re interested not simply in the aesthetics of AN interactive doubt but in how it behaves. This is particularly important when you’re designing applications (which are behavior-based objects) as opposed to designing documents (which are content-based objects).
Designing Documents vs. Designing Applications
Even designing interactive documents well — particularly within a responsive manner for the Web — requires specialized knowledge. At a bare minimum, it involves an understanding of responsive image principles and progressive enhancement. Drawing pretty pictures, against the other hand, is art, not design.
Interactive products or applications, however, are a completely different ball game. Artful for an interactive medium requires skills in graphic design, motion design and, most importantly, interaction design. The most important feature of AN interactive product is its interactions. These interactions are constructed in code.
Unfortunately, due to increased specialization on teams, the role of Web builder and Web developer has been artificially separated. While such a separation may be required when in use on a squad, these labels should mark out the current tasks of the team members, not sandbox their knowledge. You might focus on certain areas more — especially in particular projects — but you must understand that the primary reason we figure products is to satisfy user needs and that every role on a development team has an result on the mortal experience. This is reason working within small interdisciplinary teams is vital, where every member is responsible for e`er thinking of the user first.
Designing for the User First
When building a product, design leads development and development informs design. This is a cyclical, iterative process in which the goal is to continually improve the product to better touch the needs of users.
Every decision you gross for your product should stem from the user. You essential surmise of the user’s needs first, before considering your own desires. In other language, practice what we call “outside-in design.” Think about the user’s needs and their context, designing what the user faculty see and interact near, then go about decisive how to solve all the problems that creates for you.
Outside Within Is Good, Inside Out Is Evil.
Is your firstborn question in a new project which server-side technology you will spending or what your database schema will facade like? Stop! This is a wrong approach. You’re trying to solve your own hitches, not the user’s. That’s inside-out design, and that’s a Very Bad Thing.™
Purpose of This Section
Two of the core decisions you will need to make during the designing process is whether to make the product cross-platform and if it should be native.
The purpose of this section is to empower you, element a user experience designer, to understand your medium so that you can reply these questions informedly, starting by looking at what exactly we mean by an application being “native.”
The compromise would be to make a single custom keyboard and use that regardless of the user’s system keyboard. Of course, it would neither look nor desire the main keyboard and thus wouldn’t provide the same unseamed experience of Feathers on iOS. Or else, users of the app would have to memorize to use ii different types of keyboards in the app and should exert cognitive effort when switching from one to the other.
Similarly, on homegrown platforms that do not have a active, consistent visual language and culture—such as Android—or on native platforms that are notorious for being confusing to use—such as Windows—non-native applications will have less of a handicap. They might even provide better usability and user experiences in some situations.
A great instance of a non-native application providing a better someone experience on faultless original platforms is Gmail. Using a desktop mail case against an operating policy (OS) such arsenic Windows could involve you to find and install the application itself, keep it updated, keep your mail synced between your various tendency, and make sure messages are checked for viruses and otherwise malware. Compare that to the simplicity of Gmail, within which you go in a URL within the Web browser of any device and — boom! — you have your message. End of story. Gorgeous.
Figure 9.6. The Gmail Network app provides a consistent experience across platforms. Users don’t have to install thing or worry about syncing their email to multiple devices.
Gmail is also a great example of how creating good cross-platform user experiences can require a bunch of platform-specific optimizations. Although the Gmail app runs across upside and mobile chopines, there are actually several highly optimized versions of the app.
The Web as a platform itself, however, has few user experience consistencies of its personal. Although Network applications quota common features, there is no “Human Surface Guidelines” document for the internet (maybe there should be). Or else, we focus on documenting good coding and design practices, such as progressive enhancement. Different browsers (that is, homegrown applications that run Web apps) implement the bahavior of core form controls differently. And that’s reason a Web application could behave differently in various browsers even if it has like net, components and code.
Figure 9.7. A browser is an application that runs in the discourse of the OS. In other words, a browser is a native application. A Web app, on the another hand, is an application that runs in the context of the browser. It is not a native application since it has one measure of separation (the browser) between it and the PORTA. Similarly, a Flash app runs in the context of a Web app. It is not a native Network application since it has one degree of separation (the Trellis app) involving it and the browser. Shine apps, therefore, are not native to the browser, just as Web apps are not native to the OS. (Image: Rosmarie Voegtli, smashed.by/voegtli)
So, we’ve got native applications, which refer to the culture of the platform that they tear on, and we’ve got Web applications, which run in a browser on the Net. But we’ve missed a ordinal family that galore modern applications fall into: hybrid apps.
We need to comprehend the strengths of various technologies and use them where appropriate. Declarative Pattern authoring technologies (primarily HTML and CSS) are great for creating complex documents and styling them beautifully. Thus, many designers of original applications occupy HTML and CSS when they need to display rich content. These types of applications are called hybrid applications because they employ a mix of native and Web technologies.
Figure 9.8. The Facebook app on iPhone is a hybrid app.
The Facebook app on iPhone is cardinal example of a interbred app, where certain sections (such as the news feed) are rendered using Web technologies.
Overcoming Ideological Leaning
Every too often, technology and design decisions are made based not on a desire to choose the best materials and tools for the job but on ideology. the internet standards suggest who blindly recommends the Web platform and Web authoring technologies for any project, regardless of the users’ needs is, unfortunately, all as well common. Developers who blindly advocate Flash and native iPhone or iPad apps all for any project are all too common, too. The old adage “When all you’ve is a cock, everything looks like a nail” comes to head. So, it is important to endorse such biases and to base your decisions on the needs of your users, not on ideology. It is also important to be able to recognize ideological views so that you can steer the discussion back into the realm of pattern.
Whatever recommends of Web standards hold a core assumption that the Web platform and Web authoring technologies are, by quality, a force for good. 1 wouldn’t quarrel that the Internet and, via extension, the Web have had element radical a democratizing effect on the world as the Gutenberg Grip (if not more so). Withal, the internet platform and authoring technologies are inherently neither good nor atrocious, and they could easily Be used for any end.
In the skin of the internet platform, the common assumption is that it is inherently good because any document or application placed next to it is universally accessible. While this may be true for open collections of documents — as was the norm for content in the premature days of the Web — it is generally not true for what we would consider a modern Web application today. Take Facebook. Facebook is a Web application. It isn’t open. It is free, but what this means is that you, the user, are not Facebook’s customer. You are Facebook’s product.
Your in-person information and behavioral traits are what Facebook sells to its sincere clients, advertisers. Is this in any way inherently better or more than open than having to buy a commercial application from Apple’s App Bank?
In reality, you could easily argue that buying a license for a commercial iPhone app is a more honest and outspoken transaction. You pay for it and thereby own a license to use it. You become the customer of the band or individual who made the application. There is transparency in how the company makes its money. In plentiful way, this is a much more traditional commercial relationship.
Of course, even commercial apps can use your data in devious ways, so being open-eyed about your personal information these days is important. But the point is that simply being a Web application does not somehow magically make it a force for good in the global.
Are Homegrown Applications and Platforms Endangered Taxon?
As Jeremy Keith famously put it astatine the Update Conference, “Writing a local app is like writing for LaserDisc.” The implication here is that native platforms, like CD-ROMs and LaserDiscs, will be obsolete soon since the Web is “catching up.”
I sure hope that is not the case, because the internet itself is a local podium and is becoming even more so (in the traditional sense) next to the come up of OS’s such as WebOS and Chromium, which are supported local Web authoring technologies. We’ve to understand that what the internet is supposedly catching up to is a moving target. New features, user experience enhancements and more are mortal added to native platforms all the time. It’s not like Apple will decide on 1 September 2012 that iOS is “done” and stop creating new versions of the OS or new models of iPhone and iPad, at which point the Web can lug a few years to finish catching up.
We know that “native” refers to the center culture and language of a level, so predicting the demise of “native” is analogous to saying that different devices will not have distinct cultures within the future.
The assumption real in this view is that a monoculture will arise in the future where every application on every device will speak via the components of the internet and be authored using native Web authoring technologies, and moreover that these applications will all be served from the Web platform. If anything, this is a greyish and chilling vision of the future, in which people will soul even less control of their own facts and where their tendency faculty only become dumb terminals that hook busy intense silos in the sky (“the cloud”) that are controlled by large corporations.
Instead of owning a license to a word-processing application, for occasion, you would write everything in Google Docs. Google, all for its part, will be analyzing every word and sentence, trying to comprehend more about who you are and what makes you tick so that it can use that information to better manipulate your commercial behavior.
This is not to say that Web applications are necessarily evil, just they are definitely not inherently good.
Blurring of the Lines
We keep hearing that “the Web is catching up to native.” What people mean when they read out this is that Web authoring technologies are feat better access to device features such as touch, hardware-accelerated graphics, GPS, accelerometer support and cameras. What is rarely mentioned, however, is how native applications are catching ahead to Web applications. Within some respects, the strides that native applications are making are far more important because they threaten the core user experience advantages that Web applications have historically enjoyed over native applications.
The 3 main areas in which endemic applications are catching up to Web applications are ease of deployment and access, automatic updates and seamless access to data.
Ease of Deployment and Access
One of the core user experience advantages that Object applications have historically had over native applications is the wellbeing with which they have the ability to be deployed and accessed. Click the “Upload” button within your FTP application of choice and your app becomes accessible to anyone WHO has the URL anywhere within the world. Simples.
No need to transfer a Zip file, then flush for an application to unfasten it with, then look for where you downloaded it to, next unzip it, past pose it, then run it, only to find out that it doesn’t support your graphics card. Eek! Is it any surprise that Web applications like Gmail and Google Docs have enjoyed such phenomenal success, especially on native platform beside insolvent usability?
Figure 9.9. The line between the user flows of Web applications and native OPENING applications is blurring. In fact, in OS’s based on Web technologies, Web applications are original OS applications.
However, native apps are catching up to the ease of deployment and accession offered by Web applications gratitude to the development of app stores. With an app store like Apple’s, the process of finding an application is as easy as hitting a URL in a browser. In certainty, you can hit a URL to reach an app in the App Store and, from there, simply click a button to download and install it.
Web applications, by spirit, have always provided automatic updates. In fact, we don’t even consider the “version” of a Net application because the Network is inherently version free.
You’re always using the latest copy of Gmail, and you don’t care what book it is.
It’s not Gmail 7; it’s just Gmail.
Native applications, by contrast, have routinely had clunky update mechanisms that interrupt the user’s flow. That, too, is changing with increasingly native applications implementing seamless updates. When, for example, was the last juncture you noticed Google Chrome updating? Never. It does it softly.
Broadloom Access to Data
The various huge advantage that users of Web applications have traditionally enjoyed is the ability to access their notes from any device. You never have to worry about syncing email from your desktop to your mobile handset when using Gmail. It’s always at hand. Relate this to the nightmare that has traditionally plagued syncing connected native platforms.
Native apps, however, are again catching up. With Apple’s iCloud, all for instance, extremity synchronization is becoming a entry of the past. Your data is simply, transparently and automatically available on your Apple devices and is kept constantly in sync without your having to worry about it. Although iCloud is primarily an Apple-centric continuous punter solution, otherwise cross-platform technologies, such Dropbox, bring related advantages to other platforms.
Just Another Case
Did you read the previous partition thoroughly? Good. Then you may have noticed the common strand within all three areas where native applications are catching up to Web applications. They are all areas where the advantage in user experience is due to a characteristic of the Internet and not the internet . The Net is just a stack of technologies — namely, HTTP and URLs — on top of the Internet stack. So, local applications are catching up to the internet by taking advantage of the awfully same characteristics of the Internet that the internet does.
Furthermore, we are seeing the rise of a new type of human experience pattern, titled the continuous client. A continuous client experience — as originally planned by Joshua Topolsky — lets a user seamlessly continue an experience across devices and contexts.
For example, if you are reading your Twitter stream on your computer and later seize your phone, you should be able to continue reading the stream from the same position. And when you get house, you should be competent to continue from the selfsame place again on your TV.
A good example of a continuous client in the wild is the Trillian instant-messaging application. It can store chats in the cloud, share chats between all of your devices within real instance, keep track of and synchronize your read and unread messages, and even make exercise of “presence technology” to know on which device you’re currently active so that it can send current notifications sole to that appliance.
Integer 9.10. Kelly Sommers has a pleasant sample app that showcases a continuous patron experience: smashed.by/multi. Users can start watching a video on their Windows Phone 7, maintain in a Trellis client, and then on their iPhones.
If you think about it, in the age of continuous client experiences, the internet becomes JAC (just another client). It may be the best case to use in certain contexts, but users have the choice of switching to native clients without worrying about synchronizing data. Presently, continuous clie nts will be a core expectation instead of a novelty, particularly as high-level technologies, e.g. iCloud, make it easier for developers to implement them.
Figure 9.11. The tick messaging app Trillian is a good example of a continuous case. (Image: Trillian Blog, smashed.by/trillian.)
The Future is Native
the internet today is basically another native platform and one that, going forward, has to compete on its own peerless virtues and not on the advantages bestowed upon it by the web , because other native platforms are also implementing those same advantages.
The tricky question to answer when deciding whether to use the Web platform or other platforms for your next application is whether the power lies in exposing the user interface of your application as a native app or in exposing it via a URL and serving it via HTTP.
As Web applications attain to native platforms with features like Local Storage and the means to jog while the device is offline, the file betwixt Network and native applications blurs even added. This is taken to its logical extreme within OS’s like Palm’s WebOS and Google Chrome, where the native technologies are Trellis technologies.
Regardless of which platforms and technologies win out in the close, the future is clearly native and the Web is JAC. Now, the billion-dollar question is not “Do we go Web Or native?” but rather “Which platform or platforms and which client technology or technologies should our new product support?”
To answer this, we need to comprehend the nature of our product and, specifically, where it falls on the documents-to-applications continuum.
The Documents-to-Applications Continuum
Against the Trellis, one way to classify products is according to whether they are content-centric or behavior-centric. We call a content-centric collection of documents a website. A behavior-centric product is called an application (or “app”). Instead of falling entirely in one camp or the other, your product faculty probably lie location between the two extremes on the documents-to-applications time.
Figure 9.12. The documents-to-applications continuum.
When a product falls closer to the documents side of the continuum, we can finish progressive enhancement to layer features and interactions on top of the content-based core while keeping that core accessible to the largest amount of citizens possible. These progressively enhanced features usually either layer advanced formatting or design on these documents or add fanciful interactions all for navigating within Or linking them. We can make the content adapt to various screen sizes and make the limited interactions that are wont to navigate the content adapt to assorted sign mechanisms. This isn’t an easy task, but nor is it impossible.
As products change from the documents sideways of the spectrum to the applications side, even so, implementing progressive enhancement gets harder. Within fact, it might go all meaningless or impossible. How would you gracefully degrade an on the internet image editor, all for example? However would an image editor work against feature handsets without graphical displays? What content would you actually dribble back to displaying?
Figure 9.13. The theory of universality, as composed by the creator of the World Wide Web, Tim Berners-Lee, was written within AN age once the Network was mostly a collection of interlinked documents. It doesn’t necessarily apply wholesale to applications, which hold very different logo constraints and requirements. See Lea Verou’s statement on John Allsopp’s retort to my one-version manifesto on .Net magazine: smashed.by/netmag
Applications are not content-based; they’re behavior-based. Gracefully noxious to a simpler representation of some content an application might person does not e`er make sense. Applications are often made up all of behaviors that FTO users create content. Consider the image editor again: it doesn’t have any content itself, but it enables users to create content.
In order to create model user experiences, we need to maintain focus. This focus has to be settled squarely against meeting the needs of our users in the best way possible. No product team on Earth has the supplies to make up applications that provide the best possible user experience all for every someone.
Given unlimited time and supplies, we could optimize the user experience of our apps on top of every device and platform known to humankind. However, given limited time and budget we’ve to drudgery with in the real world, we essential be selective with our listeners, problem domain, platforms and tendency. We carry out this not to exclude people unnecessarily but because we realize that including each one and giving each one a great user experience is impractical.
Mobile Logo Considerations all for Document-Centric Products (Websites)
If you have a website, the first point you should do is test it out in mobile contexts to see how it displays and performs. I’ve encountered far too heaps companies that overlook the importance of making their websites mobile-friendly and jump straight into creating a native application. Be careful of devising this mistake, especially provided your website is an important revenue apparatus. All for document-centric websites, use progressive enhancement whenever possible to certify the blissful and core interactions for navigating and intense that content remain accessible to as wide a platform of your users arsenic getable.
To do so, you can follow these broad steps:
Ensure your content is accessible to everyone, and mark it up with proper semantics. Separating delighted from presentation is important.
Progressively enhance your happy to supply a more optimized experience for people display it at different screen sizes (this is the focus of responsive design currently).
Progressively raise your content to bring a more optimized experience for families of tendency based on supported features and capabilities (all for example, touch). In other libretto, make the website responsive in behavior, not just within plan. At this component, you are optimizing for features, not for specific devices (say, for all mobile phones that support touch, not just the iPhone).
Progressively enhance your content to support the novel culture and capabilities of the various devices you privation to support. At this point, optimizing for special devices is all right. There’s nothing wrong with trying to make the user experience as beautiful as feasible, even if it is all for a particular subset of your users halogen a time.
Make sure to test your designs on actual devices
A simulator or emulator is great for testing the effects of code changes while you’re developing, but they cannot recreate the creative ergonomics of the device itself. Context is also a key factor that affects the usability of mobile experiences, and a design that plant perfectly well below the exact lighting conditions of an office might not work as well in bright sunlight, for example.
Also, remember that when you test with a simulator, it uses your computer’s powerful hardware to race the application. You may well see slower performance—and even slightly different behavior—when running on an actual device.
Of programme, each of these steps will take time and more resources, and you will want to plan and budget accordingly. But what if making your current website responsive does not run into your users’ needs in this particular instance? Perhaps you need to provide a much optimized and focused experience than progressive enhancement allows given your budget and schedule, or perhaps you need a level of apparatus integration that is simply not getable through a browser currently? Here case, you might want to start reasoning about whether to build an app, and if so, if it will support multiple shoe and which technologies you should use to build it.
Cross-Platform or Solitary Platform?
Can you best group your users’ requests with an application that runs on multiple platforms or — At least initially — on a single level?
When answering this question, keep within mind that creating associate application for a single platform does not mean that you cannot create a separate app for a contrary platform later on. It just means that you will metal focusing your designing and development efforts on a single level (Or perhaps even a lone device) to start next to.
It also doesn’t , past itself, suggest whether you will metal creating an application that runs as a native binary or whether your application will use the native components of the device or devices that it runs on. (Using cross-platform authoring technologies to create an application that you’ve optimized for a one-woman platform is perfectly possible.)
The answer to this enquiry will, however, determine however much optimization you must do on varied platforms. If you work astir the user experience, you must optimize your app on all and every platform that you post. It will also feeling how much testing you must do (because you will need to test on every platform that you go to), the size of your support department (because you will need to troubleshoot user issues on top of every platform that you crutch), and how so much time and fund you need to set aside for these various functions.
The Myth of Write Once, Run Anywhere
A common mistake I see many designers make is to imagine that past using cross-platform authoring technologies they will be able to write once, run anyplace. This is a myth. And temporary on the myth can lead to rather expensive underestimations. Your application might run on triple platforms, but this rarely—if ever—means that it will run recovered on sevenfold platforms.
The only way to receive associate application to run all right on multiple platforms is to optimize it for each one of those platform and tendency. As mentioned earlier, every platform has its own culture, language and norms that users expect apps to conform to. And most users dont care how many other devices your application runs on — they trouble single active however well your application runs connected their appliance.
Designers who do not take the unique cultures, customs, dialect and norms of their respective platforms into consideration risk making their applications look and wholesome out of place. The applications will appear noticeably outside, unnecessarily loud and usually rather arrogant, simply because they are culturally insensitive.
Because we don’t want our applications to exhibit as obnoxious behavior, we must optimize them all for each platform we support. Our aim is to create applications that are culturally sensitive to the language, norms and custom of the platforms they talk . Thing less and we would Be showing varying degrees of disrespect to abiding segments of our users.
Demise with a M Cuts
The last thing you could act upon, course , is disrespect every of your users by creating a lowest-common-denominator application that gives every user on every pulpit an unoptimized human experience. At that point, you would be at your most vulnerable. Although your cross-platform application might have the possible to reach a large cipher of users because it runs on top of a large digit of devices and platforms, it will be at a disadvantage in user experience on every ane of those platforms. To put it bluntly, who cares if it runs on a faultless platform if it runs badly?
More importantly, what happens when a competitor comes by on i of those platforms with a beautifully planned, precisely optimized, delightful user experience and blows your app out of the water?
And then again by a different platform by a varied competitor?
This is death with a 1000 cuts, whereby your application is abandoned one platform at once for superior alternatives. Supporting multiple platforms isn’t a feature unless you can strut them all well. You may have first-to-market advantage, but that volition last lonesome until you’re outdone by your best-in-market competitor.
Write Once, Optimize Everywhere
So, write once, run anywhere is a dangerous story. Cross-platform applications that compete successfully are write once, perfect everywhere. You must understand the implications this will have on your fund and schedule and tactic for optimizing, testing and supporting your application on every platform you choose to support.
Please do not be taken in by the “create a cross-platform application in five minutes” demos by many tool vendors. They are rubbish, unless you’re building the simplest of to-do list apps. The true test of a development technology is not however easily it enables you to create a five-minute demo or how quickly it gets you 70% of the track to your goal, but rather how easily it enables you to tackle the last 30% of your development, including the all-important person experience optimizations that could take up the ending 10%. These inventory could end up winning up the majority of your time and endeavour in developing the application.
Web and Other Cross-Platform Technologies
Broadly speaking, cross-platform technologies can be split into two groups: those that create native binaries and those that don’t. We can also further categorize them as those that use native frameworks and those that don’t. The combination gives us the binary-framework matrix shown below:
Figure 9.14. The binary-framework matrix.
A native binary is an application bundle that can be run directly by the OS of a given device. It is what we think of commonly when we refer to a “native app.”
Still, the far more key trial of nativeness is whether the application makes exhaust of native frameworks. These frameworks are what be the culture, language, gestures, symbols and norms of a platform.
External Apps Wrapped in Native Binaries (or Wolves in Sheep’s Garb)
Creating a native binary for iPhone that does not use any of the native components in the Drink Touch framework all for iOS is possible (and quite easy) by using a technology such as Adobe’s PhoneGap. PhoneGap wraps an existing Web application — that uses native Web components — and creates a native operating system application from it (in the example above, a native iOS application). While your app might look like a native app on the iPhone’s home surface and power launch like a native app, the UI of the app will be rendered using Web components.
Your binary application is just a shell that contains a WebKit component. This WebKit component is what renders your Web application using Web components. Because Web components can’t meet native expectations, I would not recommend using PhoneGap to create non-immersive applications such as productivity apps.
When grounds immersive applications such as eBooks and games, however, the demand of native framework support in similar technologies is not as capacious a problem. Adobe Shine and ActionScript, Unity and Ansca’s Corona are favorites among native game and eBook app makers, even though they do not utilize native frameworks whether components. This is because immersive apps rarely, if ever, use domestic components. Instead, their designers aim to create a completely different world — perhaps a skeuomorphic cardinal that looks and behaves like a real-world book — near its own rules, interactions and culture.
I do not recommend Clay Flex (or applications that use components from the Flash framework) for the same reason that I dont recommend using PhoneGap to fabricate non-immersive native applications: they do not adapt to the culture of the native dais and will do differently than native components on the system.
Creating unmet expectations is a highest faux pas of usability. Avoid it like the plague.
Immersive vs. Non-Immersive Applications
Understanding the distinction between immersive and non-immersive applications is important because the nativeness of an application is substantially less of an issue all for immersive applications.
Immersive applications usually arrogate the whole device and, by definition, create their personal culture and language. A good example is games. A game could have its own control system for moving, jumping and attack. Far from conforming to the culture of the platform, a good game transports the person to a world of its own creation. As such as, immersive applications usually employ few, if any, of the platform’s conventions. Per se , they are prime candidates for the use of non-native technologies.
This explains why Flash, time not native to the internet , is such a popular technology for delivering immersive experiences such as games connected the internet ; or why Unity, while not using the native components in Cocoa Touch, is used to make many of the top games on iOS and other chopines.
Non-immersive applications (such arsenic productivity apps) usually bring in heavy use of standard user-interface elements like buttons and table views. They use platform-specific interactions like full-screen “master-detail” transitions on top of iOS, whereas they might use a tree-view evenness on a Windows or OS X application. It is thus very important that non-immersive applications speak the native terms and conform to the native society and norms of the platforms they dash on.
All that being said, even for immersive applications, performance could still be an cause that influences your choice of whether to use native or non-native technologies. Certain games — such As first-person shooters — need to squeeze equally of performance out of a system in order to shine. In these situations, some non-native technologies might not be performant enough all for your wishes. The early versions of Adobe AIR-based Flash apps on iPhone, for example, were notoriously slow. Adobe has built performance in the latest versions of Adobe AIR on iOS, though.
Native Apps Translated From Non-Native Languages
If your goal is to provide an optimized user experience, a better cross-platform approach when creating non-immersive native applications would be to operation native frameworks and components. This does not necessarily mean that you have to use the native programming language for a given platform to author your application.
The disadvantage is that you have yet another layer of abstraction to drudgery with. Ultimately, the quality of your applications faculty depend by the quality of the code that Appcelerator writes within its abstraction frameworks. And you will be parasitic on top of how swiftly Appcelerator supports new features that are released to the native frameworks and SDKs. Though Appcelerator tries to generate the differences between platforms as transparent as thinkable in Titanium, there are differences — not least of all cultural ones — that you will still need to address and hone for (remember that our credo is write once, optimize everywhere).
Figure 9.15. Comparison of some joint domestic and cross-platform technologies.
Native isn’t necessarily better, but it is native.
Figure 9.16. Machinarium on iPad, an immersive native app created in Flash.
This is not to say that you should fear cross-platform technologies, but rather that you should do your research, measure the pros and cons and make an informed verdict of whether to add different layer of abstraction to your development process. All cross-platform technology has different advantages and disadvantages and fritter cases that make it a better fit for certain types of applications. Patch Halo might be the perfect choice for a 2-D physics-based game, Titanium Mobile might be better for building a cross-platform productivity application.
If you’re reading this book, you are probably either a Web engineer or a Web developer (or both), or you are learning to become one. Your role as a Web designer might involve anything from designing collections of documents (in which casing you would rely heavily on your graphic design skills) to designing behavior-rich applications (in which case you would glucinium exercising your interaction design skills).
Regardless of your choice of local or non-native Net technologies, what makes a Web application a Web application is that it is deployed to, and accessed from, the World Statewide Web platform. This means, at its simplest, that your website or application has a URL and is served via HTTP.
Single-Platform Native Applications
Having worked through the method above, you might decide that you would best serve the needs of your users by tackling a single platform or device for your application and investing your limited incident and budget into optimizing the user experience all for that platform.
Whether you do decide to support a single platform, you still have technology choices to make. If you’re making a game or opposite immersive application, you can choose a cross-platform technology that is specifically geared to making it easy to critic such applications, specified As Ansca’s Corona, Unity or Adobe Tasteless.
If you are building a non-immersive application, you still have the option of using a cross platform toolset like Titanium Mobile or Mono. The downside there is that your development process volition involve ane additional translation layer, and you shall mortal less control over optimizing the performance of the application because you will be reliant to some degree next to the native opinion that Titanium’s engineers mortal written. Even if you perform use Titanium (or a siamese framework like Mono), remember that you faculty unmoving soul to learn the native frameworks (or Apis) of the platform that you are developing for. Learning new frameworks is so much harder than learning new programming languages. Whereas a seasoned programmer could pick up a programming language like Objective-C in a matter of days, it could take weeks (except months or years) for a developer to full grok and become comfortable with the patterns, culture and intricacies of a bodywork like Cocoa Touch.
Finally, you could use the native toolset of your platform of choice. All for example, you can squander Xcode with Objective-C and Cocoa Contact to build a native iOS application, or Eclipse beside the Automaton SDK to build a homegrown Android application, or Visual Work beside C# and the .NET framework to build a Windows Phone application.
This could involve learning a topical programming language (Objective-C for iOS, Java all for Android and C# for Windows Phone) or hiring troop members who know the language and have experience with the native framework. As stated, picking up a new language is easy, but learning a trial framework is much harder. Keep that in mind when deciding whether to go this route if you or your team do not already possess the requisite skills.
The advantages of building native applications using native technologies are numerous. For one thing, you have complete flexibility in optimizing the application and user experience. When you use domestic components and adhere to the human interface guidelines for your chosen podium, your application will conform to the culture, language and norms of that platform. It volition be easier for users to memorize and use. Also, since you’re not reliant on a foreign abstraction or translation layer, you’ll always be working with the latest code and frameworks from the manufacturer, bounteous you additional flexibility to accommodate clean features and updates as they are released for the platform. Most importantly, concentrating your efforts on a single platform means that you can put the time that you would otherwise have spent optimizing, testing and supporting other platforms into refining and optimizing the user experience of your application first, and if necessary add support to variant platforms ulterior on.
Scheming for Group
The platforms and technologies that you decide to use for your next product will have a essential impact on how the goods is accessed, how it looks and feels, and whether it meets—and hopefully exceeds—the requests of your users. This isn’t a decision to be taken lightly or brushed over.
If your choice of platforms and technologies is based simply next to your perceived short-term business needs or on the current competencies of your team, then you’re making a decision that solves your own problems, not the user’s problems. This may have short-term advantages, simply you will not be able to compete within the long term next to those who solve the user’s problems first. Your choice of technologies and shoe should be based on how best you can meet the user’s wishes, not next to ideological bias or on obtaining short-term gain at the risk of long-term loss.
Remember that there are already too many things out there. We don’t need more property. We need things that work better. Make things that advise, empower and hearten. And implement the right tools and technologies for the errand.
 To learn more about working this way, read up on agile methodologies and user-centered product development. The merging of these two worlds &mdash that is, adding sufficient design and user testing to every iteration in an agile process &mdash is what I named user-centered active product development back in 2003: smashed.by/cfe
 These norms are usually expressed in interface guidelines for the platforms, as the human interface guidelines that exist for the Mac, iPhone, iPad and Android platforms. (Android is the odd one out here since it is not really a single platform but has many flavors, each customized by device manufactures and mobile carriers. This is why it is very difficult for Google to exercise control over the user experience of the Android platform. Good user experience is a operate of control — and Google has very little control over the user experience of phones based on the Android platform.
 Or, if you’re truly savvy and use a Git repository, you could expend a post-commit catch to automatically deploy your current commit to the waiter.
 Leastways where the URL isn’t blocked by an autocratic regime.
 Read au fait the “one version manifesto” and the versionless part of the Web in my opinion piece within .Lattice magazine titled “My Websites Will Only Sustain the Latest Browser Versions”: smashed.by/netsup
 PhoneGap does not dictate the use of any particular Web UI model (for example, jQuery Open). All it does is let you wrap a Object application in a native application. However, regardless of which UI framework you use (or even if you decide not to use a Web UI framework at all), the rendered components faculty be Web UI components, not the native UI components of the platform that your app runs on.
 The said can metal said for Web applications that are added to the residence screens of phones. Again, the Web application in probe looks like a native app, launches like a homegrown app, just does not act like a native app. A Net application running within the browser does not have these shortcomings because it does not create the expectations of a native OS app within the first place. A Web application moving in the spectator is a native Web application, and native Web applications — just similar native apps on other platforms — have their own culture, conventions, language, norms and expectations (even though these might not be as strongly defined as on some other native platforms).
 The biggest usability false pas you can commit is to style or skin non-native components to be like native components (as the jQTouch framework does). Whereas components in a native app that do not look like native components leastways offer a visual clue that they will probably not behave like endemic components, non-native components that act as if to be native components will confuse users even more by appearing a absolute way but behaving differently. The superior thing to do, logically , is to use homegrown components in your native apps. Failing that, at lowest make your components different enough visually truthful that you do not create behavioral expectations that you can not meet.
 Don’t confuse Ti Mobile with Titanium Desktop. The latter works just like PhoneGap. Appcelerator has lately open-sourced Titanium Desktop (now called Desktop) and is focusing its efforts on improving Titanium Mobile: smashed.by/tita.
 More precisely known as a URI, even though there are technical differences between the two that would make a W3C standards geek crust at the mouth provided they were to see as casual a dismissal of those differences as is being displayed present.
Download the stuffed variation of the chapter all for free!
You can download this section within various formats:
download the chapter in PDF (2.64 Mb),
download the chapter in ePUB (1.59 Mb),
download the section within Mobipocket (Kindle) (2.02 Mb) whether
download the chapter’s .zip with all formats (10.55 Mb).
We’d sincerely appreciate your advocate beside an occasional tweet, Facebook post—or just spread the word to your friends and colleagues. You can also learn more about the Smashing Book #3 prime. Once more, convey you for every your support!
© Aral Balkan for Smashing Mag, 2012.