Design Better Mobile Application

Duy Nguyen  –    –  

If you're working on a product for both iOS & Android, and still have room to discover, this workshop is for you.

Speaker

  • Giang Vu: Visual Designer
  • Anh Tran: Visual Designer
  • Thanh Dao: UI Designer

This workshop wraps up the useful information on 2 types of operating system for UX/UI designers, based on the personal research on iOS and Android. The purpose is to create an application that brings comfortability and a great experience to the end user.

Table of Content

  1. Introduction to iOS & Android
  2. The platforms to build application
  3. Useful tips to create an effective mobile application

Introduction to iOS & Android - Thanh Dao

Adjustment & Privacy

  • iOS has better privacy protection since it belongs exclusively to iOS, but this leads to the limitation of function adjustment.
  • Android uses an open source code, so it can be adjusted and modified as needed. This is called AOSP (Android Open Source Project)

Hardware

  • iOS can optimize the hardware and stabilize its platform, and its application has great compatibility with the devices in the ecosystem
  • Android: Smartphones of Android usually get lagged during the using process. The home screen may get frozen and cannot respond to the request.

Performance

  • iOS manages RAM better, so the performance is fast and barely has any error
  • Android: The performance is slow easy to get config that causes errors

Application Upload on Appstore/ CH Play

  • iOS takes more time to upload: 7 days on average due to personal expert verification
  • Android takes less time to upload thanks to automated test

Version Updates

  • iOS: Update version can be instantly updated for every iOS model, which makes it convenient for every device of the iOS ecosystem (iPhone, iPad, Macbook): convenient in file synchronization, upload photos from iCloud to other devices; Airdrop between iOS & iOS, receive desktop notification for incoming calls, text messenger,…
  • Android: Updates on Android usually take more time (due to the diversity of hardware), not to mention some old models can be skipped for version update. This may refer to the strategy of up-sell, people feel the need to purchase the new model once the old one can't be updated.

Language

  • iOS: supports over 100 languages (due to the diversified nationality of users)
  • Android: 34 languages

Development Environment

  • iOS: Xcode
  • Android: Android studio

The invention of studio later that supports developer to code on cross platform, therefore the coding process no longer needs to be divided into 2 types of platform.

Programmed in

  • iOS: C, C++, Java
  • Android: Objective C, C++

Open Source

  • iOS: iOS Kernel isn't a source, so it must be based on Darwin OS as open source
  • Android: Kerner, UI and some other standard applications

Development Cost

  • iOS: affordable price
  • Android: cost will be double or triple compared to iOS, due to different types of model

The Platforms to build Application - Giang Vu

Based on the programming languages, mobile application can be categorized into 4 types

  • Native App: applications written to work on a specific device platform, using the suitable language for each platform, such as Java for Android, Objective C for iOS, C# for Windows Phone. For example, games written for iOS cannot be used in Android.
  • Web-based App: A computer program that utilizes web browsers and web technology to perform tasks over the Internet. This type of application is run on web platform, written by web languages like HTML5, CSS, Javascript of jQuery Mobile. Basically this is a website with application interface and data is loaded from browser.
  • Hybrid App: combines the elements of both native and Web applications. The basic parts of the application are still written in web language, but it will be placed on the native container.
  • Cross Platform (Multi-platform): one codebase is applied for all platforms. Developers only need to write the codebase once, then translate or transpile it into different Native App versions that for each different platform. This is known as the most cost-optimized one.

Still, there are some researches claim that Hybrid App and Cross Platform are the same. Some said these two are different, so I'll put these into 4 types, so the traits of each type can be described clearer.

Pros & Cons of each Platform

Type Pros Cons
Native App Performance is faster than any mobile app in most cases. Native app can exploit the core strength of the hardware more than any type of platform. In offline mode, Native app has more advantages than mobile web-app. It utilizes the latest cached data before the system went offline. Cant' apply on cross platform: A Native app can only run on one operating system. For each OS, developers must write different native code. This leads to the inconsistency between versions, requires high development cost and the expertise in many programming languages. The diversity in OS model blocks native apps from being updated.
Web-based App Cross platform: Can be run on every browser that supports HTML & Javascript. One version only, minimize cost and development time, maintenance and improvement. Written in HTML & Javascript, which is commonly used. No limitation in the development environment, almost every type of operating system. No need to rebuild through SDK or any development tool such as Xcode. Version update comes instantly right after the deployment, crosses out the part of approval regulation. Can be marked by Search engineer (good for SEO) → Easy for marketing & promote. Web-based app can't be as fast as native app, cant fully bring the experience that the platform provides. Always need to be online.
Hybrid App Make the most out of the platform experience. One codebase can be applied on many platforms. Slow responsive comparing to Native App, including interface difficulty, particularly is the CSS on each device
Cross Platform Optimize on time and cost management Limitation in technology

Useful tips to create effective Mobile Application - Anh Tran

Read the Human Interface Guidelines

Android:

Window:

iOS:

Talk with Dev

  • Understand the difficulties
  • Collect insight
  • Flexibility and effectiveness in App design

Component Structure between Android & iOS

  • Minimum Tap Target Size
  • Main App Navigation
  • Primary Navigation Destination
  • Secondary Navigation Destination
  • Primary Button/ Action
  • Secondary Action
  • Selection Control
  • 'Undo' Pattern on iOS & Android
  • App Icon Size
  • Top-of-Screen Navigation
  • Back Pattern
  • Search Bar
  • Action Menus
  • Date Picker
  • Tabs

Work with us

Drop us a message if you need any helps from the Dwarves

Let's build something