It is a fact in most of the developing countries that the population average age is increasing. This also means that you should consider designing your applications for this growing and affluent group. An example can be eBook reader such as Amazon Kindle that is vastly popular in USA among senior citizens because of the following characteristics:
✓ it is super light and thin
✓ many senior people are avid readers and have time to read
✓ you can carry a number of books with you at all times
✓ the fonts are adjustable, bigger than book and easy to read
✓ ePaper battery lasts for weeks
In comparison iPad has not made the same impact on the same group because of weight, price, glossy screen and complexity of multiple applications.
Most of the phones and tablets are using the virtual on-screen keyboards which make typing more difficult even with use of Swipe/SlideIt enhancements. When designing your application you should however consider phones that have the physical, or bluetooth paired keyboards and utilize the display accordingly.
Please keep in mind that the type of virtual keyboard should be adjusted depending on type of input:
On many websites it is common to see multiple buttons across the top of the screen that are easy to click with a mouse, on mobile this should be replaced with a drop-down, or selection list type of widget. Placing several small buttons next to each other is a big design mistake on the smaller displays.
The content should always be displayed towards the top, and the links to navigate to the other pages placed under the content. On iOS devices the placement is limited by the guidelines. On Android devices it is usually a mistake to place too many menu items on the screen as Android users have a dedicated button for that. This principle is however not followed even by Google who in Gmail place the annoying buttons right on the page.
Another way to display less content on the mobile device is to customize the content for the particular user more aggressively on smaller devices. So for examples on the Web page we might display article, several related products and advertisements, on tablet we may go to article without additional content, fewer related products and less advertisement and on the phone we may display just the article, one suggested product and one ad banner. In each case the viewing experience has to be smooth, fast and well designed.
Q: What are the best practices to display content and navigation on mobile?
✓ follow the operating system specific guidelines
✓ don't cover content with hand, or widgets
✓ use device physical size and orientation
✓ design for large tablets in landscape
✓ consider physical keyboards
✓ please, no Apple look - alikes on Android
✓ the content provided will define the design
It is important to follow the guidelines, especially from Apple, or your app may not be accepted. Consider if you want user to cover the content with their hand, if not don't put the selections on top. Consider the physical size of the device and orientation, if user holds the device usually in one hand and select with the other, you should make it easier to do so. Consider that user often use thumbs in landscape on tablets, place the selections lower within the reach. Consider that many users like to use physical or Bluetooth keyboards, don't force the virtual keyboard usage. Android user in most cases do not like Apple look-alike functionality, the menu works differently, navigational buttons should be utilized, the settings should make the app easy to use and flexible to customize.
It is a cardinal sin -- and most of us are guilty of it -- to make your apps stretch on tablets! If you go from HTC Evo to Galaxy Tab 7 it seems that you have only a small area increase between 4.3 and 7 inch screen, but indeed you leave about 60% of the screen unused! On 10 inch tablet you leave 4/5th of the screen unused, the difference could be upsetting vs outstanding user experience.
You should not use more than 3 fonts (size/color combinations). Text sizes should be set using SP units. They are fairly consistent between different devices (scale-independent) and take in consideration user settings. Text sizes such as large header (H1), sub-header (H2), and default should be set for each device combination (see above for explanation):
There are several distinct types of applications you may choose to develop, each with it's advantages and disadvantages. Here is a list in order of specialization:
large-screen fully-featured website
mobile-only website or mWeb
mWeb wrapped in native app
write once, deploy everywhere solutions
fully native application
In the subsequent chapters we will go over every approach and outline it's advantages and disadvantages.
For the impatient readers we provide a quick recommendation:
Tip: Do minimum mobile optimization to your existing website (#2) to remove excess materials and write fully native apps starting with Android phone at first, then iPhone. Follow up with formatting for tablets.
Explanation: Modern smart phones have really good browsers that allow reader to pinch, pan and double-tap to read the content very comfortably. Optimization for mobile should be limited to putting content in clear columns that will look nicely when zoomed-in. Don't forget to remove excess of advertisements and non-standard content like Flash, which will get its own chapter soon. Developing native application as a next step is the best way to provide your users the best experience possible.
To display the same amount of content on different size devices you do not have to use the same amount of pixels, in general on tablet you can show the same content using many less pixels than on the high density phones.
Think about a balloon that you blow to 50% capacity (phone size) and draw 1 inch square on it, than blow it to 70% capacity (7 inch tablet). At this point your original square is much bigger. You could draw another 1 inch square that would be as easy to see, but you would use much less of balloon rubber to do that (less pixels). Blow up the balloon to 100% of the holding capacity and again the squares got bigger. If you use the same size area of content you will use less pixels on tablets, so exactly same size line of text could be 320px on 3 inch phone, 480px on new phone, 385px on the 7 inch tablet, and only 330px on 10 inch tablet.
Image shows EXACTLY the same user experience: from the left 10 inch tablet, 7 inch tablet, 4 inch phone, 3 inch phone.
I am a very strong believer that the designers should provide the implementation of their art which might include the following assets: HTML & CSS, Flex/Flash, mobile layouts, stretchable images, etc. If the designer can come up only with wireframes, or with the static Photoshop images, then they are not doing much favor to the end product.
It is sometimes worthwhile to hire a design firm to provide an idea and creative direction, but each product development team will need an artist sitting together with developers and working together. The practice of throwing the design "over the fence" to technology department, as it is common in many companies will result in a terrible product. If the company considers the mobile product as a long term strategy then the artists should become the core part of the team.
Many companies say incorrectly: "We want a consistent look across all platforms." which is a very bad approach. First of all it is not possible unless most of your applications become really bad, Blackberry cannot support the richness of iPhone and iPhone is not Android. Users of each platform are used to different levels of experience and are used to different type of experience. Each platform should be considered separately.
Most companies, including design departments and agencies, underestimate the amount of work that goes into graphical design for mobile. Indeed it should be estimated much more time because where as for the web the developer can "chop-up" the design images once and use the pieces for any display size, for mobile applications the design has to be specific for several display resolutions and sizes and resizing of the original is a bad idea that ends up in a lower quality product. On top of that in Android you don't "chop up" the images, but you create a custom, single "9patch" stretchable image, which make life easier, but hardly any design artist I know knows what it is, and how to do it.
Let's start with the product because after all that is what your customers will want and what will define all of your future efforts, regardless how lofty your philosophy is.
We need to start with dispatching away of the widely quoted statement “Build a better mousetrap and people will beat a path to your door.” — On rare occasions it's true, especially for social networking apps like Facebook, or great stuff like Pandora, but most of the time engineers create technological marvels that fail to catch on public attention.
There is no single formula for success, but at least I wrote down a few characteristics of a successful application:
✓ performs the advertised function very well
✓ it's simple to use according to “Don’t make me think” rule
✓ it's an eye-candy, designed for a specific demographic group
✓ it's well designed for the platform it runs on (phone, tablets)
✓ induces people to share stuff via social networks
✓ it's easy to find in app store search
✓provides reasons to use it frequently
✓ reminds of itself via unoffensive notifications
First of all your product should be useful, does not matter if it is a game or a scientific calculator, but it should do what it is designed for very well. The product should be very easy to use; any complicated options, confusing messaging, wrong assumptions, functions that take too long to execute are a sure way to loose users. Product should be designed well taking in consideration your target demographic. Your product should be designed in such way as to encourage user to share the experience, quotes, images, likes and comments via your product. Product might remind user of the new content available via notifications. Social sharing is the fastest and easiest way to reach a larger audience. Product should be named well so people can find it, it should provide a good description, if possible in multiple languages.
Finally, it is always a good idea to build a product that carters to your own needs, knowledge and interests. People often fall into a trap of developing a product based on current fads and fashions, development of a good product is usually a long process and when you are not passionate about it, you probably will fall short of success.