App Design 101 - October 2014

Every smartphone platform has their strengths. For iOS, it’s speed and simplicity. For Android, it’s web syncing and customizability. For Windows Phone, it’s uniformity and at-a-glance information. I’d like to talk a little about the state of writing a “well designed” app from the perspective of someone who is thinking about writing something cross-platform.

All platforms have very different UI guidelines. The #1 mistake you could make is to design a new app that looks the same on every platform, and requires a learning curve. Users, whether they know it or not, are trained to look in certain places and expect certain behaviors depending on location of buttons, input fields, and other elements. Some examples:

iOS Apps

image

Apple’s iOS Design Language

iOS apps sometimes deviate into gesture-based and non-standard UIs, but as a general rule, they look like this. There is a back button in the top left and a tab bar at the bottom to get to different places in the app. Apple values simplicity and minimalism in their apps designed for iOS 7 and up. Thank goodness, too. Apps have turned from a gradient-filled mess to clean and beautiful.

Maps Before:

image

Maps After:

image

Apple is definitely moving in the right direction; One inspired by Windows Phone and Android. For more information on Apple’s new UI elements, watch this video:

Android Apps

I am admittedly more comfortable and familiar with the Android Design Language, as that is my platform of choice. Android apps are also in a state of transition right now, only much more early in the process.

Android 4.0 (Ice Cream Sandwich) introduced “Holo”, a clean and minimalist design that is easy to develop for. Most apps in the Google Play Store today are based on Holo. At Google I/O 2014, Matias Duarte introduced “Material Design”, the upcoming design for Google’s web services and apps.

Holo Android apps center around the use of the Action Bar, a consistent bar located at the top of the app. It contains commonly used tasks with an overflow menu.

image

image

image

For more information on Holo’s design guidelines, visit the Android Developer section on design. Holo is a set of UI elements that comes together to create this look:

image

However, Material Design is coming soon.

Material Design is the set of guidelines that Google will be using to revamp it’s web services and apps on both major platforms. It revolves around using clean, bold graphics to show depth and movement. There are examples of this today in many popular Android apps, including Google Chrome, Tumblr, Google+, Textra SMS, Wally, Google Docs/Sheets/Slides, and more. It will be very interesting to see how Google will continue to blend together Material Design with the iOS UI Guidelines in their iOS apps.

Conclusion

Put simply, ignoring each platform’s individual strengths means that you end up with an app that only panders to the lowest common denominator between the two platforms. It’s how you end up with abominations like these:

image

image

image

Don’t be like these. Develop for your platform’s native UI.

For more information, visit Sloppy UI or Holo Everywhere's Archive.

To The Moon

I just finished To The Moon last night. Beautiful story, amazing soundtrack… definitely worth your time, and on sale during the Steam Summer Sale.

Steam / GOG

Also, see Peter Sagal’s tribute, “‘Wait Wait’ Celebrates Carl Kasell, Our Official Judge and Scorekeeper”.

Carl unleashes his powers in the lobby of NPR's headquarters in Washington, D.C.

I’m gonna miss you, Carl.