Tablet Optimized Website

Tablet Optimized Website

Necessity for Tablet Optimized Website

Experience = Expectation : User is Satisfied

Experience > Expectation : User is Delighted

Experience < Expectation : User is Dissatisfied

Why Tablet Optimized Website?

User expectations for Tablet Web experience

1.A good Tablet User interface = A good informative details coming together

2.Application layouts are divided in two column. First is a broad column displaying main content of the page, other is a narrow column displaying other options/short links available in the application.

3.All frequently used links/shortcuts must be handy to user.

4.Good intentions/Recommendations:

> No Flash content

> Large (and distinct) touch-targets

> Advance the web by using HTML5, CSS3 and jQuery Mobile/Touch

> Minimal data entry

> Don't use dropdowns, even don’t try to style them using CSS either

> Make sure people can use the keyboard to get to the first letter : implementing text field type keyboard

     PC sites on Tablet - Poor user experience

> PC website renders very jazzy on tablets. Even though resolution of modern tablets are similar or larger then the PC, however physical screen size also matter when it comes to readability of a website.

> Flash based website failed due on many tablets due to absence of adobe plug-in or support

> On tablet user expects to perform action by touch/gesture events however on PC website user are friendly with Click events

> Form filling is a pain for user due to dropdowns, radio buttons, list items, Finding special characters on keyboard etc

> Text are too small to read articles

> Fat Finger issue

> Unnecessary Zooming issue on tablet due to absence of viewport handling

Taking PC websites to tablets

Basic  steps to convert PC website to Tablet Optimized Website:

Step 1: Analyze which feature are need to be implemented on tablet application.

Step 2: Following 80-20 rule, and find out which are the most frequently used modules in application.

Step 3: Design the app as per business requirements using UI design pattern like fly weight, form registration etc.

Step 4: While on home page of app provide links to 80% of module however provide summary or short links of the 20% most used modules like bill summary, usage summary, pay bill by LPM etc.

Step 5: Select the technology in which application would be developed.

Step 6: For application theme choose one primary and two secondary color.