January 25, 2011

Author’s personality

General guidelines for writing good posts.
try addressing a particular, narrow list of readers, not the whole world
in your post provide a real value, it could be a joke
be yourself, sound sincere and honest

January 24, 2011

How do I write a good post?

You try to achieve few things:
promote yourself by having something interesting to say
reference and make friends with others, they might be likely to promote you in the future e.g. (e.g. @UkiDLucas)
promote event, or review URL (e.g. bit.ly, goo.gl)
promote event #hashtag so people can find more posts about the topic
write posts in about 120 characters; leave about 20 characters so people can quote (re-tweet) your post without shortening it

January 23, 2011

What is Microblogging?

Micro-blogging is posting of status updates, or short commentaries, on social networking. The size of the post is usually limited, in case of Twitter it is 140 characters.
Some on many social networks:
Twitter
LinkedIn
Facebook
Google Buzz
Google, Facebook Places, FourSquare
MeetUp.com, EventBrite.com

Example Twitter post (tweet) 
"@UkiDLucas Thank you for organizing the great event on Mobile Technology Future! See full review at: http://bit.ly/fyhKUe #CyberWalkAbout" 

January 22, 2011

Aging population

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.

January 21, 2011

Keyboard Usage

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:

text
numbers only
Internet addresses

January 20, 2011

Multiple Navigational Menu Items

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.

January 19, 2011

Placement of Navigation

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.

January 18, 2011

Columns on display

In a similar fashion to limiting the content on mobile devices, the number of columns should adjusted:

*full site: 3 columns
extra large tablet: 2-3 columns
large tablet: 2 columns
*high resolution phone: 1 column
medium phone: 1 column, limited content
small phone: 1 column, very limited content

January 17, 2011

User-Customized Content

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.

Content Prioritization

For dynamically generated pages, it is a good practice to prioritize content in database in at least two* of the following:

*full site, 12 inch
extra large tablet, 10 inch (1200x800)
large tablet, 7 inch (1024x600)
*high resolution phone, 4 inch (960x600, 800x480)
medium phone (480x320)
small phone (320x240)

If the budget does not allow for it, all devices above 1024x600 should be considered as a full resolution screens.

January 16, 2011

Content and Navigation - General Principles

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.


January 15, 2011

Being lazy on tablets

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.

Text Size Setting

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):

small - mostly ignored
normal-mdpi
normal-hdpi
large
xlarge


What are my application options?

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:

  1. large-screen fully-featured website
  2. mobile-optimized website
  3. mobile-only website or mWeb
  4. mWeb wrapped in native app
  5. write once, deploy everywhere solutions
  6. 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.  

Download and post review at Barnes & Noble: http://bit.ly/op71Qj

 

January 14, 2011

High DPI take more pixels for the same Content

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.


January 13, 2011

Major device sizes

small: mostly ignored
normal-mdpi: older phones with about 3 inch screens, 480x320px resolution, e.g. MyTouch
normal-hdpi: most phones with 3 to 4.3 inch phones with 480 wide screens: Droids, Nexus, etc.
large: 5 and 7 inch tablets: Samsung Galaxy Tab 7
xlarge: 8 to 10 inch tablets, eg. Motorola Xoom, Samsung Galaxy 8.9 and 10.1

January 12, 2011

Who is responsible for providing creative assets?

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. 

January 11, 2011

Apple is not Android

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.

January 10, 2011

Design Deliveries

style guide per platform
UX - wireframe flow
UI - screenshots
graphical asset delivery

January 9, 2011

Design for Mobile Ain't that Simple

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.

January 8, 2011

Who should I hire to develop my project?

I often hear some version of the following: 
My friend’s nephew who is a student can do this for $3,500 “just to get experience”. Why should I hire company that charges premium hourly rates?
We analyzed a dozen mobile projects we did for various clients for where we provided the most value, and the breakdown might be very unexpected to most people:

Percentage per VALUE provided:
35% vision (thing user never think of) and project management (PM)
20% graphics design, User Interface (UI) and User Experience (UX) 
20% development, coding
5% Quality Assurance QA and Delivery to market
20% Promotion and Marketing (creating Facebook pages, tweeting, etc.)

As you can see the project that your friend’s nephew could attempt to do for $3,500 really should cost at least $17,500 and all the things that client underestimates usually leads to the failure.

January 6, 2011

Mobile-Optimized Websites (mWeb)

In USA at least 50% of websites in Q1 2011 were not Mobile optimized, for the rest of the world is is true for the most. 
Mobile Web is growing 8 times faster than Internet did at the same age which back then was called and "explosion for Websites". 
Mobile carrier Internet traffic increased several thousand percent in last couple of  years. 
Average mobile smartphone user visits couple dozen of Websites per day, mostly by news aggregation services.

January 5, 2011

Building a Product That Sells

the better mouse trap myth
basic rules to follow
build it for yourself

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.

Uki's Google Java Technology blog