Designing on the mobile era

We are once again facing a design challenge: creating applications for new platforms we are not fully familiar with yet. This is the same situation we experienced when we jumped from a text-based UI to a Windows UI, or from Windows to the Web. The new platform is, in this case, “smart devices” (phones and tablets).

From Unconsciously incompetent to Consciously incompetent

The main point we need to realize is that we need to move outside our comfort zone and accept we are, most likely, “unconsciously incompetent” in terms of Mobile design. Even if you are a Web design expert! But don’t feel bad about it, because almost everybody is.

Things we must know to move to a “consciously incompetent” state:

• Web Design is not Smart Devices Design
• In most cases “One Design Doesn't Fit All” (form factors, sizes, densities, orientations, modes, etc). You could try adaptive layouts but that won’t be enough in many cases.
• Platform Guidelines matter
• Win8 != Android != iOS
• UX Patterns are key on mobile design

From Consciously incompetent to Consciously competent

I'll write some essential point to move to a consciously competent state.

The basics:

• Always take into account User Centric design.
• Read Human Interface Design Principles
• Read Designing UX apps
• Read Android Design

Some more specific ones, but basics anyway:

• Data Entry

Users are not too keen on custom data entry controls, so try to use the standard ones. By the way, avoid data entry if you can ;)

• The main input today is touch. Controls on the screen should not only be touchable, but also have minimum dimensions for making it comfortable. See Touch Interaction Guidelines
• When designing layouts for iOs (it almost applies to Android too) consider using the 4px pattern
• Do not put many tabs on screen, remember that more is less.
• For grids, consider using the “empty dataset pattern”.
• Multiple layouts should be considered, normally one by size (small, medium, big).
• Avoid using the virtual keyboard whenever possible.
• The color scheme must be the same throughout the application.
• Windows 8 apps must use a “chrome-less” design, so no action buttons on layouts.
• For Android and iOS, consider using the application bar whenever possible; do not create your own way to handle actions.
• Read about patterns that already work in many applications:
• http://mobile-patterns.com
• http://pttrns.com/
• http://www.lovelyui.com/
• http://www.androiduipatterns.com/

• http://landingpad.org/page/3
• http://www.iospirations.com

And the last and most important thing: create your first application in each platform, it is the best way to become competent.

From Consciously competent to Unconsciously competent

We could reach this status as we do in any other activity: by exercising a lot! We simply need to create a lot of applications until the best practices become second nature to us.

By the way, if you find some useful sources for learning more about design, please drop me an e-mail or just comment on this post.

@gmilano