Principles of ~Mobile App~ Design

In a crowded market, how does an app attract new customers, gain loyalty, and deliver value? With great design for a delightful app experience. Here, Google’s UX Research Lead Jenny Gove will take you through 25 principles to build an app that helps users achieve what they’re looking to do.

I really enjoyed this booklet (PDF, Web) on driving conversions through better mobile app design, but I was struck by one thought as I was reading: Isn’t this applicable to nearly all design work?

Mobile–as championed by the slightly-old-fashioned-but-still-relevant Mobile First dogma–forces the designer to focus their efforts to just those bits the user needs. Slow connection speeds and constrained system resources force us to consider the cost / benefit of each interaction.

But, while mobile is a hot term (and certainly well-deserving of our attention), it’s not alone in benefitting from this care. As the lines between all of our devices continue to blur, we’ll have to put this same thought towards new form factors and functionality.

Three big takeaways universal to good interface design:

  1. Guide users through task completion. I’m often struck by the number of calls for “simple” apps. Simple can rarely solve complex problems. Focus and guidance can make complex issues manageable.
  2. Speak the language of your user. Buttons and calls to action need to be clear (not clever). Information architecture must value user-centered categories over business unit silos.
  3. Frictionless environment. The article discusses this in terms of app-to-web interfaces, but we need to make sure the ability to move from device to device or different views on the same device remain clean and clear.

Publishing on the Web

Ev Williams of Twitter and Medium fame thinks individual article-based sites are a thing of the past.

So, what does that mean in real terms? To Williams it means that brands and people will continue to be valuable, but they will need to hop on a platform that can surround their work with other high-quality content and give it greater social reach.

Medium’s Ev Williams: ‘It’s Going to Make Less and Less Sense to Publish on the Web’

It’s a touch self-serving and more than a tad buzz-wordy, but Flipboard, Apple News and Facebook Paper make it clear that’s the direction the industry is pushing.

The Worrying Trend of “UI/UX”

It’s a shame the title of this article—Open Source is Ugly: Improving UI and UX—focused so heavily on the looks part of the user experience, because Garth Braithwaite makes some excellent points about actual UX.

The problem occurs when the open source project is being used by an outside demographic, including by developers of a lower experience level. In these cases, good user experience design contributions will help define the target audience—their needs, struggles, and experience—and the recommended solutions for assisting the users.

Open source is ugly: Improving UI and UX

The trend towards viewing UX as just visual design has taken a severe uptick in recent years. I won’t hazard a guess why, but it’s a worrying situation that undermines the value UX brings to the table.

None of this is to say graphic design lacks value. Color and contrast inform meaning. Attractive facades build trust and delight. The face of your application is owned by these artists; where they go, so does the perception of your app.

But … an experience has to be bigger than the final screens—it’s a combination of expectations and interactions, of how useful, usable, and delightful the overall package.

Automation Is a Job Engine

Interesting findings from James Bessen, a researcher at the Boston University School of Law. The more you automate your industry, the more jobs it creates.

Automated teller machines, Mr. Bessen writes, were widely adopted in banks starting in the 1990s and were pervasive by 2005. Yet since 2000, he notes, the number of bank tellers increased 2 percent a year, “substantially faster than the entire labor force.” What happened, he explains, is that ATM machines reduced the cost of operating bank branches. So banks greatly expanded their branch networks, with increased demand more than offsetting the jobs displaced by technology.

The “gotcha” of the study (if there is one) is that job growth requires change.

But something else occurred as well. Tellers were no longer handling cash, but engaged in offering personal advice and selling new services to customers. “The nature of the occupation is changing,” Mr. Bessen said.

Automation Is a Job Engine, New Research Says

As machines take on more and more of the rote, mundane tasks in our day-to-day lives, it’s good to know that our prospects for employment aren’t fading away.

Books for UX Managers

A colleague who found himself newly-appointed to a UX leadership role reached out to me recently to ask me if I had any book recommendations for him. “I’m skilled with the tools and the brain, but virtually inexperienced in managing and leading a UX team,” he wrote. “Do you have any book recommendations?”

Books for UX Managers

I’ve not read a (vast?) majority of these, but based on the recommendation of A Project Guide to UX Design alone I’m willing to give the list the benefit of the doubt.

Twitter’s Digits Tries Their Hand at Single Sign On for tvOS

Digits is a forward-thinking service for authentication. They’ve decided to tackle the tvOS sign-in problem.

There needed to be a better way for users to log into apps on TVs without a standard input method. Now, with Digits, your users can now seamlessly and safely log into your Apple TV apps. All it takes is a few lines of code.

Introducing Digits for tvOS

Facebook has a similar product for tvOS. I bet Apple’s working on one too.

Standards

App Thinning

A few years back I accidentally bought my wife a 16GB iPhone and spent the rest of the year making sure she could snap a picture by removing and reinstalling apps and deleting old messages I hoped she wouldn’t want to read again.

It’s not a mistake I intend to make again.

Like a number of the more vocal members of the community, I wonder why Apple continues to sell a premium device with paltry storage. I’m not convinced it’s as simple as average selling price (I’d bet it has more to do with corporate sales) but my insight is about as an uninformed as they come.

The fact is they are selling these machines, and we have to believe Apple has a plan for dealing with it.

When iOS 9 was announced with “app thinning” I was interested in how much of an impact it would have. When the release of app thinning was delayed at launch, it gave me an opening to record my current app sizes and compare them a month down the road.

My Process

There was no method to how these apps were chosen. I eyeballed a good mix of genres / authors, ending with 63 apps I’m not embarrassed to say are on my phone.

I started the day I recevied my new phone (9/29) and stopped when I grew tired of recording numbers (11/15).

To check the size of the app, I visited the Storage & iCloud Usage page in Settings and then dove into each application to make sure the size I was reporting didn’t include any generated or downloaded content.

App Thinning Look Up Process

I ended up with 63 apps over all. Data was collected on an iPhone 6s Plus.

Bottom Line

From these 63 apps, I saw a net decrease of 8.5% for a savings of nearly 650MB.

Apple’s Pages was the big winner, shedding 66MB, followed by Numbers (60MB) and Facebook (56MB).

In terms of percentage lost, Overcast managed to lose the most of what little size it started with, shedding 42% of it’s original weight. Close behind was Facebook, losing 40%, and Scopa Pro down 39%.

Takeaways

  1. Checking for app sizes is a pain.

  2. Some full-featured apps were surprisingly small to begin with. Overcast–a favorite in the world of podcasting–at its heaviest was only 7.6MB. It shed 40% of it’s weight, coming in at only 4.4MB. I stopped using Overcast during this test, but kept it around because it is a testament to craftsmanship.

  3. I didn’t spread the genres around as well as I thought I did. It didn’t seem to matter much–there was little correlation between the category and the size reduction.

  4. I checked a few times over the past month and half and the app sizes were always fluctuating a bit. A few MB one way or the other doesn’t mean much.

  5. I spot-checked these sizes against an iPad Air 2. They were relatively close to what is reported below. I imagine other devices will see greater savings since they’ll be able to shed the bitmaps associated with these large screens.

The Breakdown

(Click on the headings to sort)

GenreCountSavingsAverage
Books1-31.5 MB72.6%
Social Networking5-103.6 MB76.9%
Travel2-41 MB77.3%
Entertainment2-13.8 MB83.2%
News4-13.1 MB84%
Games6-88.5 MB86%
Weather2-29.4 MB86.1%
Health & Fitness5-59.8 MB87.2%
Lifestyle8-57.6 MB89.2%
Photo & Video5-47.5 MB91.1%
Finance4-19.9 MB92.6%
Sports43.79 MB93%
Productivity9-163.8 MB93.3%
Business1-2.5 MB94%
Music10 MB100%
Food & Drink28.3 MB109.2%
Navigation18.3 MB118.5%
Reference17.8 MB138.2%

Fair warning: these are affiliate links!

NameGenreOriginalFinalMB Δ% Δ
Overcast: Podcast Player OvercastNews7.6 MB4.4 MB-3.2 MB57.8%
Reeder 2 Reeder 2News6.3 MB6.3 MB0 MB100%
Periscope PeriscopeSocial Networking18 MB12 MB-6 MB66.6%
Dark Sky - Hyperlocal Weather, Radar, and Storm Alerts Dark SkyWeather14 MB14 MB0 MB100%
Strategery StrategeryGames14.1 MB14.1 MB0 MB100%
WatchESPN WatchESPNSports19.1 MB15.2 MB-3.9 MB79.5%
ChefSteps ChefStepsFood & Drink15.6 MB16.1 MB0.5 MB103.2%
7 Minute Workout 7 Minute WorkoutHealth & Fitness17.6 MB17.6 MB0 MB100%
Automatic AutomaticLifestyle26.8 MB20.2 MB-6.6 MB75.3%
FOX Sports GO FOX Sports GOSports31.1 MB23.4 MB-7.7 MB75.2%
Netflix NetflixEntertainment41.1 MB27.3 MB-13.8 MB66.4%
WolframAlpha WolframAlphaReference20.4 MB28.2 MB7.8 MB138.2%
Scopa Pro Scopa ProGames48.4 MB29.4 MB-19 MB60.7%
Vimeo VimeoPhoto & Video46 MB29.5 MB-16.5 MB64.1%
Mint: Money Manager, Budget & Personal Finance MintFinance39.9 MB29.9 MB-10 MB74.9%
Amex Mobile Amex MobileFinance32 MB32 MB0 MB100%
Untappd - Discover Beer UntappdSocial Networking37.4 MB32.6 MB-4.8 MB87.1%
Things ThingsProductivity35.2 MB35.2 MB0 MB100%
Pocket: Save Articles and Videos to View Later PocketNews45.9 MB36 MB-9.9 MB78.4%
Slack - Team Communication SlackBusiness42.3 MB39.8 MB-2.5 MB94%
Alien Blue - reddit official client Alien BlueNews39.8 MB39.8 MB0 MB100%
Betterment - Smarter Investing BettermentFinance61.7 MB42.9 MB-18.8 MB69.5%
Capital One Wallet Capital One WalletFinance34 MB42.9 MB8.9 MB126.1%
Apple Store Apple StoreLifestyle49.7 MB49.7 MB0 MB100%
Yelp YelpTravel69.4 MB52.6 MB-16.8 MB75.7%
Google Maps Google MapsNavigation44.7 MB53 MB8.3 MB118.5%
ESPN ESPNSports50.4 MB53.8 MB3.4 MB106.7%
Starbucks StarbucksFood & Drink50.7 MB58.5 MB7.8 MB115.3%
Philips Hue Philips HueLifestyle65.8 MB58.6 MB-7.2 MB89%
Houzz Interior Design Ideas HouzzLifestyle69.9 MB59.1 MB-10.8 MB84.5%
WATCH ABC WATCH ABCEntertainment59.8 MB59.8 MB0 MB100%
YouTube YouTubePhoto & Video59.1 MB61 MB1.9 MB103.2%
Amazon App: shop, browse, scan, compare, and read reviews AmazonLifestyle93.9 MB62 MB-31.9 MB66%
Runkeeper - GPS Running, Walk, Cycling, Workout, Pace and Weight Tracker RunkeeperHealth & Fitness77 MB63.5 MB-13.5 MB82.4%
Workflow: Powerful Automation Made Simple WorkflowProductivity63.9 MB63.9 MB0 MB100%
Calorie Counter & Diet Tracker by MyFitnessPal MyFitnessPalHealth & Fitness97.8 MB64.1 MB-33.7 MB65.5%
Afterlight AfterlightPhoto & Video75 MB69.1 MB-5.9 MB92.1%
Camera+ Camera+Photo & Video71.7 MB71.7 MB0 MB100%
Walgreens - Pharmacy, Clinic, Print Photos, Coupons and Shopping WalgreensLifestyle71.4 MB73.4 MB2 MB102.8%
Yahoo Weather Yahoo WeatherWeather106 MB76.6 MB-29.4 MB72.2%
eBay eBayLifestyle80.1 MB77.2 MB-2.9 MB96.3%
Kindle – Read Books, eBooks, Magazines, Newspapers & Textbooks KindleBooks115 MB83.5 MB-31.5 MB72.6%
Facebook FacebookSocial Networking140 MB83.8 MB-56.2 MB59.8%
Alto's Adventure Alto’s AdventureGames120 MB84.5 MB-35.5 MB70.4%
Evernote EvernoteProductivity122 MB89.2 MB-32.8 MB73.1%
Twitter TwitterSocial Networking127 MB90.4 MB-36.6 MB71.1%
Airbnb AirbnbTravel115 MB90.8 MB-24.2 MB78.9%
Health Mate - Steps tracker & Life coach by Withings WithingsHealth & Fitness109 MB96.4 MB-12.6 MB88.4%
Nest app NestLifestyle99.1 MB98.9 MB-0.2 MB99.7%
LinkedIn LinkedInSocial Networking103 MB103 MB0 MB100%
Threes! Threes!Games108 MB108 MB0 MB100%
Yahoo Fantasy Football & more - Daily + Full Season Football, Baseball, Basketball, Hockey Yahoo Fantasy FootballSports115 MB127 MB12 MB110.4%
Two Dots Two DotsGames148 MB131 MB-17 MB88.5%
Google Docs Google DocsProductivity131 MB134 MB3 MB102.2%
Editorial EditorialProductivity142 MB142 MB0 MB100%
Google Sheets Google SheetsProductivity191 MB188 MB-3 MB98.4%
Numbers NumbersProductivity379 MB319 MB-60 MB84.1%
Pages PagesProductivity392 MB326 MB-66 MB83.1%
Bodyweight Training: You Are Your Own Gym You Are Your Own GymHealth & Fitness402 MB402 MB0 MB100%
Monument Valley Monument ValleyGames502 MB485 MB-17 MB96.6%
Keynote KeynoteProductivity542 MB537 MB-5 MB99%
iMovie iMoviePhoto & Video705 MB678 MB-27 MB96.1%
GarageBand GarageBandMusic728 MB728 MB0 MB100%

Google Analytics Revenue Attribution for Search Terms and Internal Promotions

Google Analytics is often a complete black box. Information comes in and reports pop out, but what those numbers mean is hidden.

After implementing a fairly thorough installation of Internal Promotions within the Enhanced Commerce tools, we were stuck with some important questions:

How are these promotions impacting sales? What does the revenue column on the internal promotions report mean? How is revenue attributed to a promotion?

Hours of searching and comments on Twitter lead us nowhere. Intentional or not, the GA team is not forthcoming with how these values are calculated.

The information is important, so we took the time to create a new profile and run some tests. The results are disappointingly simple: both search terms and internal promotions attribute revenue based on the last interaction.

What does this mean? Let’s look at a couple of scenarios:

Scenario One

John browses to your site and search for “bags”. He refines his search to “leather bags”, finds a product and purchases it for $100.

Search TermUnique SearchesRevenueTransactionsAoVConversion RatePer Search
bags10.0000.000%0.00
leather bags1100.001100.00100%100.00

The term “bags” gets no revenue attributed to it, while “leather bags” get the entire transaction amount.

Scenario Two

Anne visits your site and sees a gloves promotion on the homepage. She ignores it and browses around before seeing a boots promotion that she clicks on. She finds a great pair of shoes she adds to the cart. She continues to browse for a pair of jeans, finding a buy-one-get-one promotion that she clicks on. Nothing catches her fancy, so she buys the boots for $50.

PromotionsImpressionsClicksCTRTransactionsRevenue
Gloves100%00.00
Boots11100%00.00
Jeans11100%150.00

Promotions for gloves, boots, and jeans were seen, but only jeans gets any credit for the transaction.

This particular scenario was interesting. We used the add-to-cart action of the Enhanced Commerce tool directly after the click to the boots promotion. It was assumed that this would give Google Analytics an indication that the revenue from that purchase should be attributed to the boots promotion. Yet, Google Analytics funneled that spend to the jeans promotion.

Suggestions

Attribution Models

Google Analytics already has a concept of ‘attribution models’ for use in campaign tracking and referral traffic. This tool can perform adjustments to how revenue is allocated to transactions that occurred after several other interactions. A customer that received an email, then clicked a banner ad before ultimately purchasing could have their transaction apply only to the last interaction (the banner click), spread 50/50, or any other number of possibilities.

Google could potentially enable a similar tool here. In our second scenario above, I’d much prefer that the $50 transaction was spread evenly over all three promotions. While this gives two promotions ‘credit’ for a conversion they didn’t take part in, it at least attributes the boots promotion with something.

Long term, if the boots promotion is driving sales, it’ll bubble up to the top. Take an example of Peter, Paul, and Mary seeing these same three promotions:

PersonGloves PromoBoots PromoJeans PromoTransaction
PeterClickedSeenClicked$100.00
PaulSeenClickedClicked$200.00
MarySeenSeenSeen$50.00
Attributed$50.00$100.00$150.00 

The jeans promotion had to share it’s success with the other two running promotions, but over time the revenue it’d bring in would grow as a product of it’s success.

Even if this model isn’t applicable to your business, the ability to choose the right attribution model would have huge benefits.

Add to Cart

A better model would be to stick with last interaction attribution but take into account where the “add to cart” action took place. Looking back to scenario 2, we had the following actions:

  1. Glove Promotion Viewed
  2. Boot Promotion Viewed & Clicked
  3. Boots Added to Cart ($50)
  4. Jean Promotion Viewed & Clicked
  5. Checkout

The “Add to Cart” interaction took place directly after the Boot Promotion was clicked. Using that as our last interaction means all $50 of this transaction would be attributed to the Boot Promo.

This model isn’t perfect, but it’s much closer to the intent of the customer. Let’s take another quick scenario:

  1. Glove Promotion Clicked
  2. Boot Promotion Clicked
  3. Boots Added to Cart ($100)
  4. Jean Promotion Clicked
  5. Jeans Added to Cart ($150)

Again, using the last-interaction model, we’d see Boot get credit for $100 of the sale and Jeans with credit for $150. The glove promotion, while clicked, doesn’t get any credit for the transaction.

Summary

These models are just frameworks to crunch large amounts of data into actionable insights. Without sitting with the customer, we’re never going to know if a promotion from the homepage made them think of something else, eventually leading to a purchase of something totally unrelated.

However, being smarter with the data at our disposal gets us closer to understanding the user flow at a high level and is definitely worth the time to instrument the data collection.

UX Intersections

I remember a years-old quote from Whitney Hess that shed some new light on my role as a User Experience Designer.

If all you want to do is protect the consumer, join the ACLU. A true user experience designer understands their company’s goals just as deeply as they understand their constituents. That allows you to determine which of the constituency’s needs should be addressed by the product, and make a case to the powers that be how doing so will positively impact the business in the long run.

It’s not even a revolutionary idea. If the business needs aren’t met, the business ceases to exist and that’s sure-fire way to fail the user.

Mind-blowing or not, it lead me to ask new questions, to understand business strategy in a new light and generally made the work I was doing better by understanding that UX is the balance of the business needs and user desire. It wasn’t long after that revelation I realized there was a third leg–What are we capable of doing?

Eileen Webb’s post Evaluating Ideas takes this idea a rational step (or two) further. She’s uses an enhanced version of this model to help brainstorming exercises stay within the realm of reality.

Brainstorming is fun! In the early days of a new project, there are tons of ideas flying around, and those ideas spark discussions that spark more ideas.

I’ve found that what works best for me in these whittling sessions is to have a framework to fall back on. An established framework means that no one is trying to justify their idea to me; all ideas are evaluated in a relatively emotion-free setting so we can decide which solutions are the best ones to pursue.

This framework shows the best ideas come at a four-way intersection of user wants, business needs, what’s appropriate for the website and what’s sustainable for the org.

Looking back at my my lightly-vetted model, the sustainability piece was a clear miss. A few tweaks later, a slight twist to the diagram (balance or not, the user should be on top!) and clear thanks to Eileen, we have my new model for thinking about user experience.

User Experience Intersections Venn Diagram

I’d love to hear your thoughts!

Battery Drain Blocking, Invasive Blocking, not Content Blocking

…most people just want to block garbage—privacy-invasive trackers, JavaScript that slows our devices and drains our batteries, obtrusive ads that cover the content we’re trying to read.

John Gruber—NYT: ‘Enabling of Ad Blocking in Apple’s iOS 9 Prompts Backlash’

I’m in complete agreement with Gruber here. Advertising is necessary for “free” content. It’s a touch more nuanced than garbage vs tasteful, though. It’s about how much each of us is willing to “pay” for the sites and content we enjoy.

I don’t mind some sort of profile tracking that presents me with more relevant ads, but I detest the auto-play videos and pop ups with timers to close. Others won’t tolerate anything more than a static image. Some won’t stand any ads at all (which you’d think would be a huge boon for Late to the Party).

Where this discussion has fallen off the track is that this should be a conversation with publishers (who in turn need to have quite a heart-to-heart with their ad networks). The truth is: publishers need revenue to sustain their ability to create content and their customers shouldn’t have to pay more than fair market value.

If a publisher has decided that they need the revenue that only loud, pop-up video ads provide, the consumer needs to make the decision that they’re either (A) willing to accept this ad or (B) ok with not consuming the content. There really shouldn’t be a middle ground where I consume the content and block the ad. The issue, of course, is that we don’t know if the site is going to match our vision of advertising fairness until we click, at which point the damage—battery drain, data usage—is already done.

Perhaps the answer is in subscription fees (what’s old is new again). Maybe we were on the right track with the “Do not follow” check box—a user-preference similar to content blocking that blocks types of advertising rather than entire networks or URLs. This could be built into our responsive designs so publishers could adjust.

“If you won’t accept video ads, we’ll have to show you three static ads instead.”

(As a UX guy I don’t really find the user-preference angle all that appealing—the paradox of the active user is a strong one and pretty much says we’d never customize those settings anyway.)

Instead we’re left with content blocking—a scorched-earth solution that’s already become a game of cat-and-mouse. It’s untenable.

We need publishers willing to push back on harmful advertising. Advertisers willing to take a tasteful approach and customers willing to meet them all halfway.

I’m not sure I can see it.

Twitter LinkedIn