Source:http://rack.0.mshcdn.com/media/

Agenda:

1. Differences between touch and non-touch screens
2. One device – thousands ways of using it
a) Holding a tablet
b) Context of using
3. Few words about Android
4. Cross-platform toolkits

1. Differences between touch android non-touch screens.

Is the design of the touch screen much different from the “traditional” devices? Yes! Unfortunately, not everyone remembers it giving quite inadequate and useless apps on devices with touchscreens. The difference is the key – instead of a precise mouse cursor, we use our finger tips. And their size may be significantly different depending on the user – from tiny 4-year-old hands to the huge and thick fingers of a factory worker.

MCSE Training – Resources (Intense)

The key difference is how you hold the device and the application usage. It’s hard to believe that these details could be critical, but in this section, I will attempt to eliminate all doubt.

2. One device – thousands ways of using it

a) Holding a tablet.

A seemingly simple thing; however, three factors may here of major importance: tablet position (horizontal or vertical), size (7, 8, or 10-inches), and the ratio (16:9,16:10,4:3)

  • Vertical Position

It is the most popular position of holding mobile phones. It works well for smaller tablets (7and 8-inch). In this case, the range of thumbs includes practically all width of the screen and interface design and it makes it a bit easier.
It happens that the device is held in one hand while the other hand is used for the navigation. It is also a popular arrangement in Reader Mode – used during e-book reading–as it has the size and feel of a regular book or magazine.

  • Horizontal Position

Using it in landscape form is popular among the larger tablets as the vertical position is uncomfortable or even impossible. It works especially well in multimedia mode, such as playing games, writing texts, and browsing the Internet.
The downside is the limited range of your thumbs. They will not get to the center of the screen, so the key elements of the Ui should be on the sides.


Example of horizontal vs. vertical screen position: IMDB service on iPad
source: http://media.smashingmagazine.com/wp-content/uploads/2012/07/imdb.jpg

Remember that the functionality for both positions should be the same – it’s better to avoid the situation where some features appears only when we rotate the tablet as it is primarily counter-intuitive. A classic example is Apple and their iPhone (I know this is an article about tablets -sorry for that): users were asked how to change the calculator mode for from ordinary to scientific and many users are did not have any idea that all it took was rotating the phone to landscape mode.

The situation is similar with many interactive eBooks. For each interactive text, the readers’ default mode is vertical. Unfortunately, in many cases, only the horizontal mode shows important interactive elements that do not appear in portrait mode – such as a way to return to main menu.

Portrait is the default orientation for the iPad, but you have to remember that for Android, Windows 8, and Blackberry’s Playbook, its landscape orientation. (To avoid confusion, remember that the main orientation should always provide default modes and functionality.)

 

b) Context of using

When you design applications for tablets, you should pay attention to the fact that there almost never is a situation in which a user is sitting comfortably in their room or in a comfortable chair at a desk. Depending on the type of app, the context of usage is very different.

If we want to distribute our bus schedule so that the user can use it, run through the streets on a sunny day. At this point, the obvious will present itself: the elements should be large enough to land a moving finger on the right item; contrasting colors should be used, so that the whole GUI is visible, even on a sunny day.

If you want to make ordinary eBook readers, you should consider display options for night mode so that the user eyes will not get tired.

Battery greed is something you should also pay particular attention to.We can be sure that when the user realizes that their application is the reason for their short battery life, they will just uninstall it.

Another example – a cookbook released for iPad: besides the application itself, the manufacturer also sells accessories such as washable stylus for use while cooking. Orientation also plays an important role: in portrait orientation, users can see the whole recipe and ingredients for each part of dinner. Turning the device switches the UI in “friendly cooking mode”, displaying big buttons and step by step instructions. Such modes would also automatically turn off the screen stalling, and you could scroll through the gestures of yourhands in front of the camera without touching the screen.

Children are a broad and increasingly popular group of customers that they are worth mentioning.They are curious and eager to explore – this feature makes them tap on everything they see on screen. They notice things that adults may miss. They do not experience “Banner blindness.” Banner advertising is a great opportunity for them to find out what happens if they touch it. The biggest problems are when they are forced to move after that and they do not want to, often resulting in an action that they didn’t plan.

Children learn UI by tapping almost aimlessly. Banners or the “like” button may work for some applications. When we’re designing for children, we must remember that for links on the page that lead them out of the application,there is a chance that they will have big problems to return to it (most often from the Internet browser).
If we’re designing for very young users, it is better to avoid plain text and replace it by pictures. A good idea is to hide all menus and giving access to it only to parent. A simple way to solve this problem is to develop a parent mode and child mode – when a parent gives a tablet to kid, they switch it to the appropriate mode, and in this way, the child “never” gets beyond the application.

Source: http://media.smashingmagazine.com/wp-content/uploads/2012/07/kitchen-ban-1.jpg

In fact, each of the three largest manufacturers (Apple, Google, and Microsoft) recommend this in their Design Guidelines. In this article,we will only be discussing it for Android.

4) Most important Guidelines

Source: http://developer.android.com/design/media/index_landing_page.png

With Android, unfortunately, the situation is much more complicated. A rash of tablets with the system led to a great variety of hardware configurations and operating system versions. There we have high variety resolution ratio, the size of the screen, without mentioning the processor and amount of memory. In such a situation, designing an application that is compatible with all devices and good looking at the same time is quite an art.

Although the guideline will help dispel many doubts, the rules vary greatly in dependence of Android versions. Between 2.X and 3.0, there is a gap, as between 3.0 and 4.X. The only sensible solution is to make a dedicated version for older and the latest systems – you can find in the market only versions adapted to your own devices. This way we do not have shy away from any group of users.

It is true that Android apps should look and act as if it was designed for Android,without detachment from specificity of system. That’s way it is important to pay attention to things such as tabs, which are always placed at the top of the screen, and that (for convenient one-handed operation of the device) is not only the switch by tapping on the item, but also by moving your finger horizontally in both directions following the location. It is worth remembering about Action Bar, which is great for quick access and contextual options or Dashboard, which gives easy access to the functionality within the application.

Support to applications

That which is quite a big advantage for Android is that applications installed in it are able to make use of peer functionality. When you want to open a URL, we have the ability to select an application, which will complete the request. Similarly, in the case of social networking sites, it makes it easy to share content that we do not need to design in which this operation is performed within our application.
It also gives a lot of opportunities for our application–we may be able to be equipped with a feature that will be used by other installed applications. So you do not die among many apps[B1] , and it maybe used for any cyclically repeated steps.

When designing an application for Android, we need to know the nature of the platform, because some of the listed solutions are now acting as standards and provide a user belonging to this system. The understanding of this system can be crucial to achieve the success of our application.

Here are some important rules contained in the official guideline and their interpretation. In the original version, everything sounded very general and “fabulous.”

  • Delight me in surprising ways

This principle applies primarily to the visual and audio experience. Things such as a gentle, subtle layout, carefully crafted animation and sound affects at the right time contribute to a sense of ease.

  • Real objects are more fun than buttons and menus

Visualization of controls such as buttons and switches refer to objects known to us from the real world. An ON to OFF switch gives people more fun than using a standard radio button.

  • Let me make it mine

So it’s about everything that has an impact on the adaptation of the application itself. The applicability of their backgrounds and styles makes the user feel more “in possession” of the product. But all options to adjust cannot hinder basic tasks.

  • Get to know me

Know your end users. Rather than asking them to make the same choices over and over, place previous choices within easy reach.

  • Keep it brief

Ease of communication is very important. Instead of complex sentences, you should use short sentences and simple statements. People tend to overlook statements if they are too long. There is no point to writing long descriptions, you can be sure that almost no one will read it.

  • Pictures are faster than words

In order to quicksand simple transmissions, and give it a lot of fun, it is better to use pictures rather than words. It is a much more effective and it should be borne in mind that the image is clearly associated with a given functionality.

  • Decide for me but let me have the final say

Suggest and show the best action, instead of asking many questions. Too many options can make people feel confused. In case something goes wrong, use the Undo function. A user has to make sure that in every bad situation, he can cancel and withdraw a taken action.

  • Only show what I need when I need it

When a task requires many decisions and shows a lot of information, break them down into smaller, more digestible pieces. Hide the options that are not relevant in this moment. It’s an incredible way to help people navigate through the application.

  • I should always know where I am

Give people confidence that they know where they are. Clearly show the relationship between the screens and make sure it is not difficult for them to pass through functions.

  • Never lose my stuff

There is nothing worse than their retrievable loss of many hours of work. A good solution is autosave, as well as frequently storing the choices that users make to make future use faster and more efficient.

  • If it looks the same, it should act the same

Help people to see the differences in functionality by using a separate visualization. Do not let some elements look the same and cause a completely different action.

  • Only interrupt me if it’s important

Give up the notification and any interruption or loss of attention of the user when it’s not necessary. Notifications and alerts should only be used whenit is really important.

  • Give me tricks that work everywhere

Gestures and all applications that work well in the system should also work well in your application. Make sure actions like zoom in/out will work properly. For example, the swipe gesture will be a great feature to use as a navigational shortcut.

  • It’s not my fault

Encourage people that correction is a sensitive matter. They want to be convinced that they have control over the application. If things go wrong, show them how to fix the problem, but do not give technical details. Nobody cares how it works – it’s important that it works. If possible, let the application fix a bug in the background. It will be a much better solution.

  • Do the heavy lifting for me

A sense of being professional, even when not, can be very uplifting and encouraging to a user. For example, the application adapts pictures from ordinary images to good-looking photography in just a few easy steps. Users will have the feeling that he did it himself, thanks to the wonderful tool that is your application.

  • Make important things fast

The most important tools should be most visible. Remember this crucial hierarchy: make the basic functionality is easily seen by the user (like a shutter button in a camera or a pause button in a music player).

4. Cross-platform toolkits

            Cross-platform toolkits are great for creating apps in easy way. Only one thing that developer has to know most often is HTML5, CSS and Java basics.

There are usually completely open source solutions to this. The biggest advantage is that you can create a software for all popular mobile OS’s such as iOS, Android, Windows, Blackberry, BadaOS, webOS and Symbian. It is enough to write a code once and it will be working wherever you want.

Here is the very interesting article about making popular social media apps, and the comparison to original Facebook app: http://www.sencha.com/blog/the-making-of-fastbook-an-html5-love-story/

Wonderful features of these toolkits are the possibility of using APIs. We can, in a very easy way, add handling accelerometers, cameras, compass, contacts lists, files, geo-locations, media, network, notifications, vibration, storage and so on…

The most popular cross-platform are listed below:

  • Sencha
  • PhoneGap
  • Kivy
  • Xamarin