Feng Shui Your App Design

Feng Shui

I have a saying: Feng Shui your app.  Organize your app in a way that opens up the content, the value of your app.  Your app should solve a problem; it should make the user’s life better.  The only way to do that is to get your UI and navigation out of the way.  Feng Shui your app to make the user's experience delightful.

1.  Remove any features that are unnecessary.  Function dictates form, but form determines usability.  Make it simple to derive the value.

2.  Remove any UI that is unnecessary.  Page curl transitions... get rid of them; all of them.  You should have a sense of what is unnecessary.  Listen to your design sensibility and don’t be afraid to cut things that only seem like they have value.

3.  Free up as much real estate for your content as possible.  Increase whitespace around your content.  If there is navigation that is rarely used, move it.  One good place for navigation is behind the main screen (i.e., pull out drawers, spring boards, pull downs, etc.).

Sensation Transference

Steve Jobs insisted that his projects look beautiful inside and out.  He knew that when something looked beautiful that it transferred to the users perception of utility.  Give users a reason to be excited about what they are using, especially if there is ANY learning curve.  This concept is called sensation transference and it’s a major reason for Apple’s popularity.

Mobile is Not Web

Although it’s obvious that mobile is not web, designers continue to push web paradigms and concepts to mobile apps.

1.  Do not create web forms.  You have numerous tools at your disposal to avoid web style forms.  Data entry is hard on mobile.  Let users enter data one or two pieces at a time.  Let users enter data as they need it and not all at once.  Avoid the keyboard if possible.

2.  Navigation items that are not used often should not go in the main navigation.  Consider how often a user will need to tap a particular item and move it to the appropriate place.  The top and bottom navigation is the most valuable space you have.  Top and bottom navigation should be reserved for action items and items that point to navigation.

3.  No need for logout.  Users do not need to logout of your app.  Move it to the settings page and do not put it in the top right or in main navigation.

4.  Users tap, they don’t click.  There is no hover state.  Users only see highlighted items while they are pressing the item.  Make it clear where users should tap.

5. Bright colors, shadows, or gradients often clue users into tapping.  In a flat design world color is even more important.  Use reds for destructive actions, use greens and blues for constructive actions.

Consider Gestures

Gestures are actions that people do naturally.  This is why children often have no problem using iPhone or Android.  It’s important to consider these while you’re creating a mobile design because it changes the user’s interaction with the app.  Gestures are great, but the caveat is that they need to be discoverable.

1.  Next items translate into swipes.

2.  Delete items can be swiped away in the opposite direction of your next item.

3.  Swiping up can lead to a menu or something that the user may want to “pull up.”

4.  Users rotate with two fingers and collapse or explode items with three fingers.

5.  Edge gestures give users a way to discover overlays or pull out menus.  Edge gestures are where a user swipes from the edge of the phone into the center.

6. Direction matters.  Swiping left is a destructive action and swiping right is a constructive action in the context of a list.  In other contexts they are next and back.

Consider Transitions in the Beginning

Wireframes are very valuable, but often transitions are left out.  Transitions like modal windows, animations, swiping, etc. need to be baked into the app in the beginning of the process.  Your developers will love you if you include the transitions in the wireframes between screens.

Your Icon is The Face of Your App

Your icon is the face of your app.  I said it again because it’s important even though it’s obvious.  Users determine if they trust your app based on your icon.  They won’t download it if they think an amateur designed it (they don’t have time).  Make sure your icon stands out.  Make it bold, make it bright, make it simple, or make it stand off the screen.  Just make sure it’s different and beautiful.

Use Standard or Discoverable Patterns

The OS determines the standard patterns of the functionality and the design.  For years skeuomorphic design was popular on Apple products.  iOS designers continued this trend in their apps.  Skeuomorphic is on it’s way out, so make sure you consider the OS when you’re designing your app.

iOS 7 is flat, bright, and uses parallax and other animations a lot.  Transitions are more subtle.  Whitespace is exaggerated.  Users can now adjust font sizes on the fly.  Typography is integrated into the operating system.  Yay for kerning!  Check out the iOS 7 transition guide and UI catalog for other ideas and considerations.

Design is increasingly important in our lives.  I no longer hire web designers to design mobile apps.  I look for designers with mobile experience and designers who want to create a delightful user experience.  Keep your apps simple and consider the entire mobile paradigm.

Matt Hudson is owner of VoteRockit in Charlotte, NC.  

Feel free to reach out!

@MattFWD

matt@voterockit.com