Digital Strategy for User Interface

Below is the flow possible, when Business is moving towards Digital from Web to Mobile (Above is Mind-Map for same)

A. Business comes with requirement that user would like to go digital on website and do the interactions themselves. The developer/technologist starts using Javascript (any flavor) and makes sure that it works fine with Chrome. The business communicates that it should be compatible for IE8 too, which is still used by many consumers. After providing the fallback option, IE8 Support is done. 

Web for Desktop

• Technology : Javascript/Jquery/Angular JS/ HTML5, CSS
• Testing : Vanilla JS, QUnit, Mocha, Selenium
• Care For - 

1. Different Browsers like IE 8, 9, 10, Chrome, FireFox
2. Different Monitor Sizes for Laptop, Desktop

• Advantages

1. Easy to develop

2. Multiple Tools available for speedy development

3. Single CodeBase - easy for changes as needed

4. Version compatibility

5. Can take advantage of new HTML5 features and speediness

• Disadvantages

1. Does not suit for Mobile/Tablet - Needs are different

2. Every browser is differently HTML5 compatible, so fallback option is needed especially for IE8

• Examples : rediff.com

B. Once the business informs that UI does not look good on Tablets/Phablets/Phones, the developer informs that website can be made compatible with ‘devices’ by tuning CSS. 

Web for Mobile/Tablet

• Technology : Javascript/Jquery/Angular JS/ HTML5, CSS, SASS, media queries
• Testing : Vanilla JS, QUnit, Mocha, Selenium
• Care For - 

1. Different devices like iPad, Android - multiple devices with Screen Sizes
2. Different OS like Android, iOS, BlackBerry and Windows

• Advantages

1. Changes in CSS needed with help of Business with what needs to be shown to user.

2. Multiple Tools available for speedy development

3. Single CodeBase - easy for changes as needed - Low Cost

4. Version compatibility

5. Can take advantage of new HTML5 features and speediness

6. No Cookies/Permission needed compared to Native app e.g. Location, WIFI signal etc.

• Disadvantages

1. No Support for Native features like Camera, Accelerometer, Location

2. Need to check the browser compatibility e.g. Safari lite, Chrome etc.

• Examples : m.rediff.com and Myntra. Myntra went for APP only and then it reverted its decision to go for Web for Mobile.

C. Business finds Web for Mobile/Tablet to be good. However, every time, the user needs to provide login credentials. Also, native features like Location, Camera are not accessible. Business comes with requirement to allow end users to click photo from mobile camera and upload it directly. This initiates the need for uploading to different App Store and using some Native features for each App Store. Team size needs to be increased to support.

Mobile - Hybrid App

• Technology : PhoneGap / Xamarin/ UIWebView
• Languages : Java, Swift, Objective-C, C#, Javascript/Jquery/Angular JS/ HTML5, CSS
• Testing : Vanilla JS, QUnit, Mocha, Selenium
• Care for - Regular new features/extensions and how can they be used
• Advantages

1. Looks little bit of native e.g. buttons for each Mobile Operating System

2. Users can use native features easily.

3. Single / Common code base runs across all Mobile Operating System

• Disadvantages

1. Medium cost - Need to have more developers/testers

2. Performance is slow as compared to full native app - scrolling

3. Key native features (e.g. 3D Touch) may not be available in Hybrid Apps

4. Cost may be introduced for deploying to different App Store.

• Examples : Most of Small and Medium Business use this. If the app is free (with no freemium model) or for internal/enterprise users, this is mostly available

D. Business comes back with requirement saying that newly introduced features (e.g. 3D Touch) are not available. The performance e.g Scrolling may not be good on Mobile-Hybrid app. Moreover, some revenue may be expected now by utilizing Freemium version on App. 

Mobile - Native App

• Technology : Android/IOS
• Languages : Java, Swift, Objective-C
• Testing : Appium, Android Studio
• Care For -  Support for regular releases including APIs that may be deprecated.
• Advantages

1. Looks perfectly like native including buttons, Split View etc.

2. Users can use native features e.g. 3D Touch easily and support iWatch.

3. Performance is high

• Disadvantages

1. High Cost - Need to have more developers/testers for each Operating System

2. Multiple Code Base - So time taken for development and syncing may be higher

3. Technical Feasibility - Few features may be available only in 1 Operating System and not in other systems.

4. Release dependent on APIs and response needs to be very high, in case a new Operating system is getting released.

• Examples : LinkedIn/FaceBook App on Apple Store.