IA Summit 11: Tapworthy Mobile Design by Josh Clark

For the first day of the summit this year I attended Josh Clark’s “Tapworthy Mobile Design and User Experience“. I really enjoyed this presentation for a few reasons. Firstly, it was just a good presentation. Josh did a great job moving through lots of content and providing practical tips. Secondly and more importantly to me, the content was perfectly matched to my skill level in mobile design. While I have done one ipad design, I haven’t really designed for mobile yet, and needed information to help me bridge the gap of usability on a mobile device. Finally, I really enjoyed his take on the culture of different devices and how that affects the expectations of the users of those devices.

My Workshop Notes:

Mobile Context / Culture

• A great app takes into consideration context. Mobile design is very different from web design in which the context is typically some sort of desktop.
• There are many differences associated with the multiple platforms, each having their own personalities.
  • Therefore your design shouldn’t be identical across platforms, because each platform requires subtle differences which will result in important changes.
  • Each platform has it’s on culture, which must be considered, and designed for.
• Currently, roughly 82% of adults have mobile phones, but only 35% of that figure is made up of smart phones.
• Worldwide Symbian is currently the most common platform, but Android is the fastest growing. The numbers on this are constantly changing, and changing quickly.  Source: Gartner Group – Percent of Worldwide Market Share
• In the U.S. the Blackberry & Android are on the top of the market, with the phone in 3^rd place. Android just recently moved into first place. All three are in the 30% usage range.
• iPhone users tend to be more mobile active on the web, and with apps, they are also the platform with the biggest buyers.
  • In 2010 a quarter of all mobile purchases were on eBay, and of those the majority came from iPhones.
  • Shoppers on the iPad spend roughly 50% more time on their purchases.
• When looking at platform cultures, just compare marketing ads:
  • iPhone commonly shows very human connections, social interaction, and family fun.
  • Android is often very mechanical, machine, techy and sci-fi.
  • These differences result in different markets and user bases:
    • iPhone users tend to be:
      • app and content centric
      • it’s about using the phone as a tool, a medium for content access
      • an older audience.
      • Family centric
      • Higher satisfaction, and repeat platform customers
      • Very regulated app development and standards
    • Android users tend to be:
      • customize their phones more, and tinker with it.
      • It’s about the phone itself.
      • tends to pull a younger teen / hipster audience.
      • Requires more tech savvy
      • Easier to “mess-up”
      • 40% are repeat platform buyers.
      • More mods and less standard.
    • Windows phone:
      • Is attempting to bridge the gap between the iPhone and Android.

• There is no single winner platform to develop for, phones are much more personal than desktop software, and their design needs to take into account the context of the users and their preferences based on their platform choice.
• App growth will be large over the next decade, as even with current app download rates, 65% of adults still don’t have a cell phone with app access.
  • Consider SMS apps that don’t require downloads.
• Texting is also a part of the culture of phones, and needs to be taken into consideration. This is by far highest amongst teen audiences.
• Don’t assume your user is always connected and has internet access.  Currently the wifi version of the iPad is largely outselling the subscription based version.
• When picking a development platform to start on, consider the differing governance styles:
  • iPhone
    • Monarchy
    • Consistency
    • Less freedom
    • Philosopher king
    • Design constraints
    • Less garbage
  • Android
    • Controlled, but by many
    • Lots of versions, not all are easily updated
    • Open for carriers, but less for developers
    • Less focus on experience, less constraints
    • Inconsistencies.
• While iPhone and Android are the two mainly considered in these notes, it’s important to remember there are many additional platforms.
• Can the web serves as a common non-platform base?
  • Web vs Native Apps:
    • It’s only been 3 years of apps, yet there is already a preference on apps over the web.
    • Great things can be done on the web, but it’s just not a cure-all yet. As more complexity is available natively like drag and drop, swipe, etc, attempts to user these features over the web end up heavy and require more work to attempt replicating native functionality than worth at this point in web development.
    • Native
      • Speed
      • Interactions
      • Polished
      • Access to hardware
    • Web
      • Performance hit
      • Higher connectivity reliance
      • Heavy libraries
      • Chunky graphics and tools
      • Minimal hardware access
      • (The constraints are getting better, but not there yet)
      • no platform bias
      • easier updates

• • In conclusion, you need both the web, and native. You have to have a web presence, but also a awesome mobile app. Reward your top customer platform with a native specific application.
• Thematically, the content should be the same between platform apps, but the priority of content should be styled and shaped to fit the platform.
• Luke W’s mobile research is a good tool, he preaches starting with mobile web design to help focus and prioritize before moving onto the desktop design.
• The “big-boy” in the room is the API that all your various platforms will plug into. Building a smart backend should be the first step, that will serve all the interfaces based on priorities and expectations of your content. Design the cloud first.
• Ubiquitous computing will on continue to grow and with it the number of devices and cultures of those devices. So keep it about the customer, not the technology.

Tapworthy

• Is your app worth it? What makes it tapworthy?
  • iOS users download 10 apps a month on average, and open them less than 20 times.
  • Apps are only tapworthy if they can be used in a mobile context, this could be rushed, or leisurely.
  • Just because the device can do sophisticated computing, doesn’t mean it needs to.
  • Need to examine the intent – why, when, and how people will use it.
  • Mobile Mindsets:
    • Micro-tasking – minimizing lost time.
    • Regional information – what’s around me.
    • Entertainment – novelty, games, exploration
• What are the primary tasks, and are they easily accessible at all times? Optimize fot he primary task, not only does it make the app eaiser to use, but also helps highlight how the app should be used.
• Use smart phone sensors to think for people, create opportunities to explore
  • Examples:
    • the new live language app, that can translate text in real time using the phones camera.
    • Auto rearranging a shopping list to match the structure of the grocery store the user is in.
• Remember constraints like time and visual space.
• Make use-cases important, who, what, why, wen, where
• Engagement – what will make people continue to want to use the app? (assuming not just novelty app)
  • Tools and utilities
  • Content
  • Games
  • Social
• Think big, then build small –  do one thing and do it well.
• Identify your audience and the minimum that they need to know to simplify the app, but don’t patronize and dumb down, just simplify. Complexity and complicated are not the same, design to manage the complexity.
• Tap quality over tap quantity.
• Use sub-screens to sub features, and take advantage of affordances and animations to encourage exploration and highlight features. Ensure discoverability
• Clarity trumps density.

Mechanics

• The thumb hot zone.
  • The buttons at the bottom are important because of the nature of where our thumbs sit when holding the phone. The comfort area where the thumb naturally sits.
  • Having them at the bottom also reduces occlusion by the hand when trying to hit buttons at the top, and therefore covering view of the screen.
  • Especially important in landscape mode. The side of the screen that has controls makes a difference. There are more right handed people, and the buttons need to be near the primary hand for quick access.
• How big should button targets be? 44pts for apple (~1/4 inch)
• Pixel density is different on different devices.
  • Android: dp (density-independent pixel)
  • iOS: Point
  • CSS: Pixel
• Anti-aliasing information to consider
  • Apple:
    • 2 pixels = 1pt (retina display)
    • 1pixel – 1 point (rest of displays)
  • need 2 to 3 sets of images for the different resolutions. On the web using image@2.png and use css to set to 50% of size. iphone will render it full size on the retina display.
    • OR
  • 1 style sheet, with a media checker using webkit
  • Resources: Responsive web design by Ethan Marcotte.
• 44pts can be seen throughout iPhone designs as the height of targets with the width of the targets varying between 25 and 44.
• Gesture Jujitsu – Gestures that require enough precision to ensure human manipulation. Error prevention.
  • For example, unlocking the phone with a swipe, instead of a button press, or deleting something with a swipe and a button press, instead of just a button press.
  • Multiple taps can also be used. Such as double tapping to delete, then confirming the delete. However we have become somewhat immune to these confirmation message, and therefore they don’t work as well as they used to at stopping us to verify our decisions. Don’t rely to heavily on confirmation screens.
• Defensive design to protect miss-taps should be used.
  • Example: a reading app that would return to the top of the page if the user hit the status bar was confusing, so they added a 5 second set of buttons at the bottom if the user did this, allowing them to return to their previous position (incase of accidental tap), or continue.
• The majority of miss taps happen at the bottom of the screen due to where we rest our thumbs. Therefore targets at the bottom need plenty of space around them. Additionally, sub menu items should be moved to the top, and actions should be at the bottom, to avoid accidently moving out of context of your activity.
• The tap target can be much bigger than the visual target.
• Be a scroll skeptic – it reduces the working cognitive load which is important in mobile use where there is often distraction.
• Use the glance test for clarity, to see if you can get a general understanding of the app from arms length.
  • Simplify screens by organizing for drill-in content that reveals only the absolutely necessary amount at each step.
• Dot’s are often used to indicate pagination and current position.
• Animations are a great cue to functionality. i.e. Having the navigation slide into the frame, to imply that it is scrollable and repeating animations on load until the user has exhibited an understanding of learning the interaction by scrolling the nav.
• Secondary controls behind hidden doors help to maximize space and get out of the way.

Organization

• Don’t organize an app like a website. Use clear paths.
• 3 types of navigational designs on the iPhone.
  • Flat pages
    • (typically use the dot pagination, and a card deck like set of single pages that can be swiped through)
    • good for exploration, but limited in page number.
    • Inability to jump to different screens
    • Good for similar types of screens
    • Best not to vertically scroll, because already swiping horizontally
    • Doesn’t scale will to lots of content
    • Good for user generated content or “added” pages
  • Tab bar
    • Good for sub apps, or content that is different.
    • Good for filtering or faceting content by category
    • Limited to 5, and bad practice to use the “more” button for more tabs.
    • Limited to 4 on Android.
    • One tap access to all features
    • Provides a sort of advertising of options
    • Always visible
  • Tree Structure
    • Good for long lists, lists that are added to or adapted to.
    • Scalable
    • Customizable
    • Similar to desktop folder / file structure.
    • Direct interaction with content
    • Hard to jump from one branch to another
• iOS toolbar versus tab bar:
  • Toolbar:
    • Local, content on current screen
  • Tab bar:
    • Global, organizes whole app
• Tree structures can be combined with toolbars and tab bars based on need
• Think of content over controls – tapping content to drill down
• Keyboard shortcuts on mobile can be accomplished via gestures. Like sliding left to right on the nav to jump to the top Just ensure that the shortcut doesn’t replace an obvious path.
• Get to code quickly, to test how the result feels on an actual device, in hand, and in the proper resolution.

Design

• Never underestimate the power of following conventions. Even if only in the spirit, a familiar feel with a new style is a common way to create distinction.
• Graphics:
  • We attribute a higher value to things that appear prettier, or nicer. Graphics are important.
  • Customize the look and feel of controls, just be sure they don’t loose their affordances
  • Textures are a good way to set mood and tone, but need to be carefully crafted and true to life. Avoid generic patterns
  • Realism to invite touch, subtle lighting, filters and gradients, barely noticeable makes big impact on natural feel. Crisp borders and sharp lines for buttons and edges
• Design through emulation of real world items, especially effective when designing a real world interface
  • Can be to scale, or cloned to be an abstraction
  • Need to be cautious though with the touch and input that there isn’t miss direction with the real world interaction.
  • If something is done well enough, it can make up for not being as effective
  • Avoid being too clever and abstract, but do look at how far you can push it.

iPad

• Slower usage then on the smaller handhelds, typically used with two hands, and sitting down.
• Used more in the evening
• Just because there is a larger screen doesn’t mean there should be more stuff
  • Remain clean and uncluttered
  • Use big chunky elements
  • Clarity trumps desity
• Focus on the content and not the media
• Invite touch and encourage attachment
• Different isn’t good enough, it has to be better
• Embrace your interface metaphor.
• Buttons are a hack, they are a control for a object instead of direct object contact.
  • Seek alternatives to buttons
  • Embrace big gestures
• Put controls in the corners, because that’s the closest reach for the fingers.
  • Let controls drift to corners
  • Avoid controls at top middle

Slides:

The slides below are listed for SXSW, but are the same slides used at IA Summit.