Dan GroverI'm a product designer, engineer, and entrepreneur living in Guangzhou, China.
http://dangrover.com/
Sat, 23 Sep 2017 23:49:47 -0400Sat, 23 Sep 2017 23:49:47 -0400Jekyll v3.4.0Bots won't replace apps. Better apps will replace apps.<p><img src="/img/content/conversational-ui/banner.png" alt="Conversational UIs" class="post-pic" /><br /></p>
<div class="post-languages">
<strong>TRANSLATIONS:</strong> <a href="http://www.pingwest.com/bots-wont-replace-apps/">中文 (品玩)</a>
</div>
<p>Lately, everyone’s talking about “conversational UI.” It’s the next big thing. But the more articles I read on the topic, the more annoyed I get. It’s taken me so long to figure out why!</p>
<p>Conversations, <a href="http://www.wired.com/2013/03/conversational-user-interface/">writes WIRED</a>, can do things traditional GUIs can’t. Matt Hartman equates the surge in text-driven apps as <a href="https://medium.com/@MattHartman/the-hidden-homescreen-70c794ff9ada#.spot6iech">a kind of “hidden homescreen”</a>. TechCrunch says <a href="http://techcrunch.com/2015/09/29/forget-apps-now-the-bots-take-over/">“forget apps, now bots take over”</a>. The creator of Fin <a href="https://www.fin.ventures/letters/on-bots-conversational-apps-and-fin">thinks it’s a new paradigm all apps will move to</a>. Dharmesh Shah wonders whether <a href="https://medium.com/@dharmesh/will-the-rise-of-conversational-uis-be-the-downfall-of-designers-5eb9b323cdc0#.18mwz2h0x">the rise of conversational UI will be the downfall of designers</a>. Design, <a href="https://blog.intercom.io/design-is-a-conversation/">says Emmet Connolly at Intercom</a> <em>is</em> a conversation.</p>
<p><a href="http://ben-evans.com/benedictevans/2015/3/24/the-state-of-messaging">Benedict Evans prophecized</a> that the new lay of the land is “all messaging expands until it includes software.”</p>
<p>“People don’t want apps for every single business that you interact with,” says <a href="http://uk.businessinsider.com/mark-zuckerberg-virtual-reality-big-regret-oculus-rift-messenger-2015-11">David Marcus, head of Facebook Messenger</a>, “…just have a message within a nicely designed bubble … [that’s a] much nicer experience than an app.” Under his charge, Facebook Messenger has tested this approach, building integrations with high profile partners as well as opening up a bot API.</p>
<p>We’ve even seen avant-garde attempts at taking this idea to its extreme, like <a href="http://qz.com/613700/its-here-quartzs-first-news-app-for-iphone/">Quartz’s latest app</a>, which presents the news as a conversation, or the game <a href="https://itunes.apple.com/us/app/lifeline.../id982354972?mt=8">Lifeline</a>. Apps like <a href="https://mailtime.com/">Mailtime</a> even promise to save us from our emails by turning them into chats.</p>
<p><em>Well!</em></p>
<p>I guess I might be partially to blame for this, with a few pieces <a href="http://www.dangrover.com/blog/2014/12/01/chinese-mobile-app-ui-trends.html#chatasui">citing a section in a 2014 piece of mine</a> that I literally titled “Chats as Universal UI.”</p>
<p>This recent “bot-mania” is at the confluence of two separate trends. One is agent AIs steadily getting better, as evidenced by Siri and Alexa being things people actually use rather than gimmicks. The other is that the the US somehow still hasn’t got a dominant messaging app and Silicon Valley is trying to learn from the success of Asian messenger apps. This involves a peculiar fixation on how these apps, particularly WeChat, incorporate all sorts of functionality seemingly unrelated to messaging. They come away surprised by just how many differently-shaped pegs fit into this seemingly oddly-shaped hole. The thesis, then, is that users will engage more frequently, deeply, and efficiently with third-party services if they’re presented in a conversational UI instead of a separate native app.</p>
<p>It’s that part which, having spent the past two years in my current job eating and breathing messaging, seems a major misattribution of what makes chat apps work and what problems they’re best at solving.</p>
<p>As I’ll explain, messenger apps’ apparent success in fulfilling such a surprising array of tasks does <em>not</em> owe to the triumph of “conversational UI.” <strong>What they’ve achieved can be much more instructively framed as an adept exploitation of Silicon Valley phone OS makers’ growing failure to fully serve users’ needs, particularly in other parts of the world.</strong> Chat apps have responded by evolving into “meta-platforms.” Many of the platform-like aspects they’ve taken on to plaster over gaps in the OS actually have little to do with the core chat functionality. Not only is “conversational UI” a red herring, but as we look more closely, we’ll even see places where conversational UI has breached its limits and broken down.</p>
<p>But first, let’s retrace how this state of affairs really came about in the first place.</p>
<p><small><b>Note:</b> The opinions expressed here are purely my own and do not reflect that of my employer.</small></p>
<p><br /></p>
<h5 id="a-brief-history-of-the-chat-bubble">A BRIEF HISTORY OF THE CHAT BUBBLE</h5>
<p>We’ll begin by taking a closer look at the apparent atomic unit of the “conversational UI”, our friend the message bubble. To do that, we’re going to go back in time a bit. Let’s take a stroll to, oh, about 2003.</p>
<p>In those days, sending a quick text meant dealing with a UI that looked like this:
<br /><br /><img src="/img/content/conversational-ui/Nokia1100SMS.png" alt="Old SMS UI" /><br /></p>
<p>In many phone’s UIs, SMSes were treated like mini-emails, often complete with an inbox, outbox, and drafts. So fussy!</p>
<p>Later, some time in the last decade, <a href="http://jens.mooseyard.com/2008/03/18/The-Origin-Of-The-iChat-UI/">perhaps owing to a prototype by Jens Alfke</a>, our IMs began taking on their familiar appearance as cartoon dialog bubbles. When smartphones took off later, it was a natural fit for the system SMS apps on the first versions of iOS and Android.</p>
<p><img src="/img/content/conversational-ui/ChatBubblesThroughHistory.png" alt="Old chat bubble UI" /><br /></p>
<p>Soon after smartphones launched, those default SMS apps were eclipsed instantly by third-party messaging apps emerging in Europe and Asia (in the US, we have somehow still clung to SMS). They had started as direct clones of the system SMS apps — the only difference being that messages were counted against one’s data quota instead of the stingy and arbitrary SMS allotment given by carriers.</p>
<p>These apps that came along initially to replace SMS have styled the message bubble every way imaginable: round and square, flat and puffy, green and blue. Free from the constraints of a 20-year-old protocol, these apps evolved, taking on more features. The bubbles displayed in these apps developed a number of affordances for new features like read receipts, names in group chats, and more. New kinds of bubbles emerged to accommodate new types of content these apps supported:</p>
<p><br />
<img src="/img/content/conversational-ui/TypesOfBubbles.png" alt="A sampling of the different bubbles available in different apps" /><br /><br /></p>
<p>The app I’ve been working on really takes the cake for this. WeChat’s got bubbles for text, voice messages, big videos, l’il “Sight” videos, full-width cards with hero shots for news headlines, bubbles for payments, files, links, locations, and contact cards. Mucking through some code once, I saw definitions for nearly 100 types of supported messages, most I’d never seen in actual use.</p>
<p>Aside from supporting so many different types of messages, another advance WeChat made was realizing a messaging app needed different types of accounts as well. They’d seen brands and celebrities registering personal accounts and making series of giant group chats to invite their fans into. There had to be a better way! Thus was born Official Accounts.</p>
<p>Here’s what one of the first accounts, China Southern Airlines, looked like when the feature launched in 2012:</p>
<p><img src="/img/content/conversational-ui/ChinaSouthern.png" alt="China Southern UI" /><br /></p>
<p>Yeah…this bot ain’t exactly HAL 9000.</p>
<p>Here’s what the account for my city’s subway system looked like:<br /></p>
<p><img src="/img/content/conversational-ui/GZMetroOA.png" alt="Guangzhou Metro OA" /><br /><br /></p>
<p>Why was the user asked to enter numbers, as if on an IVR system? Were the creators of these accounts so unimaginative to the possibilities of a new medium as to replicate their old-school hotline?</p>
<p>Actually, no! In fact, keywords could be defined, and messages could be even routed through the third party’s server to formulate a response using whatever method it pleases. Yet in this case, entering keywords or more complex queries in Chinese (or god forbid, formulating a complete sentence) would be <em>even worse</em>. At the time, typing in numbers <em>really was the best UI choice</em> given the constraints.</p>
<p>Critically, these experiences were still often preferable to downloading a separate app on a data plan or spotty WiFi connection, or having to call someone’s customer service hotline and wait on hold. The Official Account platform was a rousing success; there are over 8 million of these accounts today. As it took off, the APIs offered to third parties to build their accounts expanded to accommodate a growing array of use cases and demands.</p>
<p>Some of these new APIs deepened and enabled new possibilities within the “conversational” nature of these interactions. Voice messages were transcribed via speech recognition before being sent to the OA’s server. Objects could be recognized in pictures. <a href="http://mp.weixin.qq.com/wiki/static/assets/f48efdb46b4bca35caed4f01ca92e7da.zip">Advanced natural language processing</a> could even extract named entities and certain types of queries from text sent by users. Users could be patched in to agents at service centers to carry on a conversation exactly as they would with a friend in the app. There was even a special integration whereby I can select a message in a chat and <em>forward</em> it to Evernote’s Official Account (as I would to a friend) to save it to a note. Cute, right?</p>
<p>On the other hand, <em>far greater and more successful were the enhancements made running counter or orthogonal to the idea of conversational UI.</em></p>
<p>One affordance added right off the bat was the three-tabbed fixed menu. Now accounts could offer fast access to all their features without having to send a prompt or depend on state information. Here’s what the menu looks like today on the Guangzhou Metro’s main official account:</p>
<p><img src="/img/content/conversational-ui/GZSubwayMenu.png" alt="Guangzhou Metro OA's 3-tabbed menu" /><br /><br /></p>
<p>Not only can those tabs send keywords, but they can open up webpages as well. Web apps invoked in this way can identify the user (using OAuth). They even have <a href="http://mp.weixin.qq.com/wiki/11/74ad127cc054f6b80759c40f77ec03db.html">an extensive JavaScript API</a> at their disposal to integrate with all sorts of features elsewhere in the app, even reacting to Bluetooth beacons.</p>
<p>OAs gained the ability to send and recieve money. The accounts could have QR codes — both for the account itself, as well as parametric ones that can send along extra data (like what product I’ve picked up in a store or what table I’m sitting at). They gained the ability to authenticate me on their owners’ WiFi hotspots (a development that emerged, no doubt, from merchants who had written the welcome message in the OA they made for their shop to tell customers their router’s WiFi password). Official accounts could not only send out headline news to users, but, if they wish, host the linked articles on WeChat itself, letting users add comments and even send cash tips via the app. None of these things have anything at all to do with chat, but they’re darn nifty!</p>
<p>While this craziness was flying around out here, what sort of vision did those disruptors back on the west coast begin conjuring for our future bot overlords? Let’s ponder this example from <a href="https://dev.botframework.com/">the homepage of Microsoft’s recently-launched Bot Framework</a>. Here’s how they think we’ll be ordering pizzas in the future:</p>
<p><br />
<img src="/img/content/conversational-ui/MSPizzaBot.png" alt="Pizza Bot is operational. Beep boop" />
<br /><br />
Good gravy, that’s <b>over 73 taps</b><sup id="fnref:1"><a href="#fn:1" class="footnote">1</a></sup> to tell Pizza Bot what I want. And this is when he already knows me on a first-name basis! I’d hate to see him when he’s just warming up to someone.</p>
<p>Man, counting those taps sure has made me hungry! We haven’t quite got pizza here, but there’s Pizza <em>Hut</em>, which is almost the same. Let me open their official account… <br /><br /></p>
<p><a href="/img/content/conversational-ui/pizza-hut-ordering@2x.png"><img src="/img/content/conversational-ui/pizza-hut-ordering.png" alt="From chat to pizza in 16 taps." /></a>
<br /></p>
<p>I have, in 16 taps, ordered a pizza. That includes 1 for choosing ‘medium’, 1 for dismissing their coach marks, and 6 for entering my PIN. For some reason, it’s not set up to use my TouchID. Afterwards, Pizza Hut’s account even sent me a special transaction message with a link to let me track it:</p>
<p><br />
<img src="/img/content/conversational-ui/pizza-hut-tracking.png" alt="Tracking my pizza" />
<br /></p>
<p>Well, it isn’t exactly Ray’s, that’s for sure, but it’s pizza. And I didn’t have to leave my chat app to get it.</p>
<p>The key wins for WeChat in the above interaction (compared to a native app) largely came from steamlining away app installation, login, payment, and notifications, optimizations having nothing to do with the conversational metaphor in its UI.</p>
<p>It shouldn’t require any detailed analysis, then, to point out the patent inanity of these other recent examples of bots and conversational UI proffered by companies on the vanguard of the trend:
<br />
<img src="/img/content/conversational-ui/OtherStupidBots.png" alt="Some more bots" />
<br /><br /></p>
<p>This notion of a bot handling the above sorts of tasks is a curious kind of <a href="https://en.wikipedia.org/wiki/Skeuomorph">skeumorphism</a>. In the same way that a contact book app (before the flat UI fashion began) may have presented contacts as little cards with drop shadows and ring holes to suggest a Rolodex, conversational UI, too, has applied an analog metaphor to a digital task and brought along details that, in this form, no longer serve any purpose. Things like the small pleasantries in the above exchange like “please” and “thank you”, to asking for various pizza-related choices sequentially and separately (rather than all at once). These vestiges of human conversation no longer provide utility (if anything, they impede the task). I am no more <em>really</em> holding a conversation than my contact book app <em>really</em> is a l’il Rolodex. At the end, a single call to some ordering interface will be made.</p>
<p>Designing the UI for a given task around a purely conversational metaphor makes us surrender the full gamut of choices we’d otherwise have in representing each facet of the task in the UI and how they are arranged spatially and temporaly. Consider those made in Pizza Hut’s acccount: I can see exactly how many slices a medium is, how much corn is inexplicably sprinkled on top of a “Tianfu Beef” pizza, what address it thinks it’s delivering to, and exactly how much it will cost.</p>
<p>So let’s take these past few years in China as “The Great Conversational UI Experiment.” Here, you have a messaging platform that achieved such total saturation among both users <em>and</em> businesses (to an extent that Facebook, Kik, and Telegram would die for). It boldly and earnestly carried the “make every interaction a conversation” torch as far as it could. It added countless features to its APIs — and yet those that actually succeeded in bringing value to users were the ones that <em>peeled back</em> conventions of “conversational” UI. Most instructively, these successes were borne out of watching how users and brands <em>actually</em> used the app and seeking to optimize those cases.</p>
<p>You can see from Facebook and others’ early forays into bots that they’re already beginning to have the same hunch. Telegram’s take is true to its inspiration in IRC-style slash commands.</p>
<p><img src="/img/content/conversational-ui/BotAffordances.png" alt="Affordances in the bot UIs from Telegram and Facebook" /></p>
<p>To be fair, it’s still surprising the range of apps and services that <em>can</em> be shoehorned into a chat-style UI. No doubt it can be expanded with great AI and little UI affordances here and there.</p>
<p>I should concede, too, that performing certain tasks in a chat brings along some useful side-benefits. It can be, compared to apps, a low-bandwidth, snappy, and consistent way to get a task done. I’m even left with a handy, timestamped, offline-viewable record of everything that’s transpired. I can search it and quickly jump to media and links. I can clip parts of it and forward it to friends within the app, or save it to an archive.</p>
<p>By interacting with certain services via a messaging app instead of via independent apps, when things happen that might deserve my attention, the thread gets bumped up in my inbox instead the message getting lost in a sea of push notifications and emails.</p>
<p>And though it’s clear pure “conversational UI” is ultimately a failed conceit, that last piece may be more important than it first seems…</p>
<p><br /></p>
<h5 id="the-inbox-is-the-new-home-screen">THE INBOX IS THE NEW HOME SCREEN</h5>
<p>The inbox is where it’s <em>really</em> at. I am, of course, <em>heavily</em> biased, but I feel WeChat’s is the best in class. I’d even go as far as to say it’s an overlooked piece of genius in the app. Some key improvements (compared to the inboxes we’re used to in email and SMS apps) include:</p>
<ul>
<li>
<p><strong>Stickyability</strong>: If I want to stay on top of a particular thread in the inbox (whether it represents a person, a group, an official account, or another feature exposed here), I can “sticky” the thread to the top of the inbox.</p>
</li>
<li>
<p><strong>Mutability</strong>: I can mute notifications from any thread, but it will still pop up in the inbox as any thread does, only with an indeterminate red badge instead of a numbered one.</p>
</li>
<li>
<p><strong>Killablity</strong>: If I don’t want to receive messages from something anymore, it’s two taps to kill it.</p>
</li>
<li>
<p><strong>Hierarchy</strong>: News and promotions can be pushed to me through official accounts, but when they arrive, they just make the “Subscriptions” category pop up and show me the latest headline without interfering with other messages. When a service has a real reason to send me, personally, a message, it can pop out and appear in the main inbox. I find this approach superior to Gmail’s “sidelining” messages into separate inboxes. <sup id="fnref:2"><a href="#fn:2" class="footnote">2</a></sup></p>
</li>
<li>
<p><strong>Status Items</strong>: Persistent processes/statuses can be displayed in a special cell at the top. This includes things like being logged into a web/desktop client, using WeChat to authenticate on wifi, playing a song, or migrating data between phones.</p>
</li>
<li>
<p><strong>Searchability</strong>: The search bar on the main screen not only searches my contacts but my groups, chat history, favorited content, articles on the web, my newsfeed, and names of features in the app.</p>
</li>
</ul>
<p>It is telling, then, that in all localizations, the name of the first tab in the app is <em>not</em> “Chats” or “Inbox” (as in other messengers), but rather just the name of the app.</p>
<p>Indeed, the cornerstone of whole experience is effectively a common, semi-hierarchical stream of messages, notifications, and news with a consistent set of controls for handling them. It’s no stretch to see WeChat and its ilk not as SMS replacements but as nascent visions of a mobile OS whose UI paradigm is, rather than rigidly app-centric, <em>thread-centric</em> (and <em>not</em>, strictly speaking, conversation-centric).</p>
<p>When you think about it this way, the things listed there in my inbox don’t need to be conversations <em>per se</em>. But everything there, most abstractly, is something that can send me updates and notifications, will change in position when it does so, retains a read/unread status, and most essentially, allows me, the user, the aforementioned modes of control.</p>
<p>And if we really run with this idea to its extreme, <strong>what actually might appear when I tap on a cell in the inbox doesn’t matter</strong> — I could see a conversation, a song or video, news headlines, a map showing me my route, a timer, or a sub-group of other such threads. Anything, really. Though I guess it’d be best when it’s at least something dynamic or based on a service (I certainly wouldn’t want to access my calculator or camera this way).</p>
<h5 id="rise-of-the-tortilla-chip-app">RISE OF THE TORTILLA CHIP APP</h5>
<p>This term – “app” – is rather old, yet only entered common parlance with the proliferation of smartphones. This is no coincidence. The app paradigm introduced on smartphone OSes circa 2007 was a radical improvement over what we’d had on the desktop. For the first time, software was easy to install, even easier to delete, and was guaranteed to not totally screw with your system (due to sandboxing/permissions models).</p>
<p>At the time, smartphone apps were envisioned as baby brothers to desktop apps. On iOS, apps like Mail and Calendar were designed to evoke their Mac versions. Apple came out with pocket-sized editions of apps like Pages, GarageBand, and iMovie. For the first few years, setting up an iPhone even required plugging it into a desktop and syncing with that monstrosity known as iTunes.</p>
<p>Though some apps indeed are mini-desktop apps that make full use of the supercomputer I carry in my pocket, well over half fall into another category. These apps are just a vessel for a steady stream of news, notifications, messages, and other timely info ultimately residing in a backend service somewhere. They don’t really do much on their own. It’s much like how a tortilla chip’s main value is not so much in its appeal as a chip but as a cheese and chili delivery mechanism.</p>
<p>The smartphone OS we use are still largely based on the assumption of my phone being a mini-desktop, rather than, well, an information nacho, if you will. Consequently, if you’re making one of these apps, your app must give me something new <em>daily</em> (or more), or else it has no reason to live. Its information would be better shown to me via another app I <em>do</em> check often, like a social news feed or a messaging app. The only recourse the OS affords these apps in avoiding such a fate is the rather blunt instrument of push notifications (and things like Today widgets or Android home screen gadgets).<sup id="fnref:3"><a href="#fn:3" class="footnote">3</a></sup></p>
<h5 id="the-other-ways-smartphone-oses-are-failing-us">THE OTHER WAYS SMARTPHONE OSES ARE FAILING US</h5>
<p>After coming to rely on WeChat in China, it can seem a bit like its own separate environment. After all, within it are not only my chats, but my social news feed, my news and blog subscriptions (many only available via the app), my digital wallet, my reading list. It even directly reads my step count from the various Bluetooth devices my friends and I use. It can scan QR codes, something my OS should do, but doesn’t (more on this later). It can recognize songs being played, even books and other objects from photos. And you can pretty easily sling all types of data between these different areas of the app in ways you’d expect.</p>
<p>Sometimes it reminds me of those awkward transitional days in the early 90’s when one might launch Windows or other shell environments from DOS, then occasionally drop back out to do other stuff. That’s what switching out of WeChat, to my homescreen, and into other apps is slowly heading towards.</p>
<p><img src="/img/content/conversational-ui/dos-days.png" alt="DOS utilities" />
<br /><br /></p>
<p>It should be no surprise, then, that I say it feels like my OS just isn’t doing much for me lately. How is that? These days, a smartphone OS’s job, aside from the low-level drudgery we take for granted (managing memory and thread pools and the like), is to provide some common infrastructure and higher-level services that apps can rely on. So that apps can focus on doing what they do best. And, well, it seems like there are so many areas where the OS is just not making much of a difference.</p>
<p>Each item below seems like a petty, inconsequential annoyance — to the point where I feel like some kind of strange, cranky, millenial version of Andy Rooney for even writing it — but they quickly add up!</p>
<p><br />
<img src="/img/content/conversational-ui/andyrooney.jpg" alt="Have you ever noticed..." />
<br /><br /></p>
<p><strong><em>Notifications</em></strong> — When I glance at my homescreen, there’s red dots splattered everywhere. My eyes dart first towards a few I can interpret. WeChat, naturally, then Mail. My inboxes have 8,108 unread messages, but I surely would notice if it changed to 8,109.</p>
<p>My “Social” folder has 4, one from Facebook which I will check, and three from other stray apps displaying “1”s. I’m not sure what those apps are telling me, or what I’ll need to do after opening the app to clear the dot. I think one might be from when my friend checked me in on Foursquare at a bar a few weeks ago on a trip back to SF, a fact I was aware of because I was standing next to him when he did it, and because the notification already appeared on my phone then. Another might be Instagram, which just throws up a red badge from time to time when it feels lonely. But I mainly know that if my “Social” folder is displaying a 3, there’s probably nothing to see, and a 4 or a 5 may deserve checking.</p>
<p>The system Messages app, which I still keep on my home screen, is showing 39 unreads, mostly one-time-passwords, transaction notifications from my bank, and spam. Messages, for most here, serves no other purpose. My “News” folder displays the sum of a few apps that are trying to tell me something. <a href="http://www.airpocalypseapp.com/#home">Airpocalypse</a> is displaying the current AQI of 93 for Guangzhou in its badge.</p>
<p>Starbucks has a ‘1’. What’s that? Have I got a free coffee credit to redeem? Possibly a scone? Let’s see. No, it’s an unread message within the app’s own inbox saying “Welcome to the Starbucks App!” from 43 days ago. Christ on a crutch.</p>
<p>Even worse than those notifications gazing at me longingly from my homescreen are those that interrupt me. When I install a new app, I’m usually prompted right-off-the-bat to enable notifications for it. I’m taking a risk in doing so, not knowing how often or for what they’ll be sent. When I’m interrupted by a superflous notification on my iPhone (or worse, on my Apple Watch), there’s no quick way to tell it “Shut up, and never bother me with this sort of thing again.” I must fish through Settings, find the app, and tweak it there. It is often easier to delete the app entirely. MIUI and some other flavors of Android at least allow me to mute a given app’s notifications right after seeing one. Many apps offer settings to specifiy what sort of things merit notifications, but they’re often located in different places and not worth the trouble.</p>
<p>On iOS, if I miss a critical notification on the lock screen because I actually wanted to unlock my phone to make a call or look something up, until recently, there was no way to quickly go back and find what it was. iOS 9’s notifications drawer, like Android’s, now defaults to sorting notifications reverse-chronologically, instead of grouped by app — an advance five years in the making.</p>
<p>Lastly, things become even more clunky across multiple devices. When I get home from work and crack open my personal laptop, I am notified a second time of all the Facebook messages I recieved during the past couple days, all of the LinkedIn invitations I already saw (because they sent me an email <em>and</em> another push on my phone), and all of my friends’ birthdays.</p>
<p><strong><em>QR Codes</em></strong> — When I left the US, <a href="http://dangrover.com/blog/2014/12/01/chinese-mobile-app-ui-trends.html#input-qr">QR codes were a joke</a>. Putting them on things was a way to tell people you’re a douche, like using lots of hashtags or wearing a Bluetooth headset. They were once this way in China, too, until WeChat doubled-down on them. Now, they’re used for people, group chats, brands, payments, login, and more. They’re in plenty of other apps as well. In a place where everyone has adopted them and knows how to scan them, they’ve become a wonderful, fast way to link the offline and online worlds that saves untold amounts of time. But they have a few downsides. One is that they look like robot barf. The other is that, at least here, if you scan a code in the wrong app, you’ll get a webpage telling you to go install the right app, if not something totally inscrutable. Something that was once defined as an open standard is now non-inoperable. I predict great things for Facebook and Snapchat’s de-uglified take on QR codes. Still, I wish my phone’s OS could scan any such code (or detect them in photos) and do the right thing, but it seems the window of opportunity has passed for this.</p>
<p><strong><em>App Distribution</em></strong> — Aside from the obvious gripes — the app store’s poor discovery mechanisms and inconsistent approval process — I’d written an aside in my last piece about <a href="http://dangrover.com/blog/2016/01/31/more-chinese-mobile-ui-trends.html#the-ios-app-store-continues-missing-the-puck">the ways iOS’s App Store misses the mark in China</a>. In short, it’s dog slow and doesn’t support QR codes (which appear in every app advertisement here).</p>
<p><strong><em>Apps Are Too Big</em></strong> — Not to mention, apps are just too darn big these days. Twitter, an app that displays 140 character messages, weighs in at 72 MB. Bigger apps are less likely to be downloaded on data plans, or even on bad wifi connections. And much more likely to be deleted, forcing users to go through the setup process again every time they re-install them. Apple’s tried to solve this problem via <a href="https://developer.apple.com/library/tvos/documentation/IDEs/Conceptual/AppDistributionGuide/AppThinning/AppThinning.html">app thinning</a> and <a href="https://developer.apple.com/library/ios/documentation/FileManagement/Conceptual/On_Demand_Resources_Guide/">on-demand resources</a>, but it hasn’t seemed to make a difference yet. David Smith astutely summed up the issue in his post <a href="https://david-smith.org/blog/2015/09/10/16gb-is-a-bad-user-experience/">“16GB is a bad experience”</a>, and, I would add, this experience is one disproportionately had by mobile users in the developing world.</p>
<p><strong><em>Contacts &amp; Social Graph</em></strong> — The idea behind the Contacts app (beyond giving me a way to tag phone numbers with names) is to act as a central repository where a <em>single</em> entry for a person can be linked to every kind of phone number, address, or ID I know for them. iOS’s version has <a href="https://www.flickr.com/photos/skyzyx/53247909/in/album-72157600153808696/">roots in the Address Book in OS X and NeXTStep</a>. In theory, I should be able invoke it in an app to store or retrieve a person’s info for the task at hand, rather than maintaining the same contacts in a bunch of separate app-specific databases. In practice, well, it doesn’t really work that way. The concept of a person as they exist in Facebook or WeChat is rather disjointed from their profile elsewhere.</p>
<p>Not only this, but adding people could be far better. Something clicked in my mind the first time I met a cute girl and she asked to scan my QR code (rather than type in my phone number or search for me on Facebook). Once I got in the habit of adding just-met friends and colleagues via QR code (or Bluetooth) I never wanted to add someone any other way. Why can’t I pull out my phone and, with a swipe from the lock screen, add someone I’ve just met to my phone’s contacts, with whatever phone numbers, websites, or messaging app usernames they’ve chosen to expose to me?</p>
<p><strong><em>Connectivity</em></strong> — I wrote before about <a href="http://dangrover.com/blog/2016/01/31/more-chinese-mobile-ui-trends.html#data-usage-bean-counting--wifi-authentication-gets-easier">how apps here get around people’s reluctance to use their data plans</a>. I’d mentioned WeChat, Alipay, and Xiaomi’s attempts to make their WiFi-dependant users’ lives easier. This is as big a problem in China as it is in many other developing countries. It’s an issue the OS could address more directly, whether it’s improving the process for authenticating on public hotspots or giving me better ways to monitor my usage.</p>
<p><strong><em>Authentication</em></strong> — When I open most apps for the first time, they either make me sign up for a new account with my email, use Facebook or other third-party services to log in, or, as is increasingly common, use my phone number to send me a one-time password. These are super clunky. Apps should be already logged in the first time I open them. There should be some flexible concept of identity that the OS can provide to apps immediately without asking, and then, with permission, supplement with further details. If users must switch identities, maybe a <a href="https://developer.mozilla.org/en-US/Persona">Mozilla Persona</a>-like system could be adopted. Anything would be better than the mess that is app login now.</p>
<p><strong><em>Data Interop</em></strong> — My apps are terrible at sharing data. Lots of friends send me screenshots of articles, chats, tweets, even other apps as a way to share the underlying information. It’s particularly annoying when compression artifacts make the text illegible or I want to go read the rest of the article or engage with the thing in the screenshot somehow. If I open a page in Facebook and want to share it in Twitter, I have to choose “Open in Safari”, re-load the page, and do it from there (though Facebook clearly knows exactly what they’re doing in that instance.) I wish the data in my apps was more atomic and could be freely shared, persisted offline, and searched in a consistent way. But this sort of thing has been a pipe dream since <a href="https://en.wikipedia.org/wiki/OpenDoc">OpenDoc</a> and <a href="https://en.wikipedia.org/wiki/Object_Linking_and_Embedding">OLE</a>, so maybe it’s just <a href="https://www.youtube.com/watch?v=9mTlnrXFAXE">one of those things you should never do</a>.</p>
<p><strong><em>Offline Storage &amp; Storage Management</em></strong> — As a consequence of people being so reluctant to use their data plans, apps here are big on offline storage. All the music and movie apps do it, as do news apps and the third-party browsers popular here. Some give users detailed interfaces to manage their storage, even showing little pie graphs. I like this level of control, and I wish all my apps had it. I’d prefer not to think about storage, but if I have to clear data, I’d rather do it from a central UI rather than going into each individual app to manage the things it has saved (or deleting the app out of frustration).</p>
<p><strong><em>Payments</em></strong> — I wrote before <a href="http://dangrover.com/blog/2014/12/01/chinese-mobile-app-ui-trends.html#buying">about how nifty online payments are in China</a>. Any website or app that takes my money pretty much uses Alipay or WeChat Wallet. In the US, I have to type in and update credit card and address info for every new app I install. We have OS-provided solutions in Apple Pay and Android Pay, but these seem to be accepted in few places and strictly NFC-based, limiting potential network effects. The nice thing about the solutions here is just how many combinations of scenarios and hardware they’ve covered, whether it’s expensive POS equipment that just requires me to hold my phone up, to scanning a pre-generated QR code the merchant has printed on a vinyl mat, to web payments, to 3rd-party app payments, to peer to peer payments between normal users who aren’t connected. Whether you’re an app startup or a mom and pop convenience store, you have no excuse to <em>not</em> accept one of these solutions. And as a user, there’s no place where it’s more frictionless to part with your money. When will blowing my hard-earned dough in US apps be this easy?</p>
<h5 id="the-coming-meta-platform-war">THE COMING META-PLATFORM WAR</h5>
<p>So the meta-platforms — WeChat, Facebook, LINE, and the like — have come and addressed many of the pain points above. They’ve delivered solutions neither the open web nor those behind the closed app store model were coordinated enough, thoughtful enough, or perhaps incentivized enough to produce.</p>
<p>Originally, the whole tradeoff we were promised with locked-down devices and app stores was that things were much nicer inside the “<a href="https://en.wikipedia.org/wiki/Closed_platform">walled garden</a>.” But over the years, as so many weeds sprung there, others came and built another wall with another garden inside of it, with yet another gatekeeper to deal with.</p>
<p>In the 1990’s, <a href="http://www.wired.com/2015/01/90s-startup-terrified-microsoft-got-americans-go-online/">OS makers shook in their boots</a> over the prospect of web browsers disintermediating them, but somehow it’s taken more than another decade for the next challenger to emerge in the peculiar form of messaging apps. And though they’re still quite far from <em>wholly</em> replacing the high-level features OS offer to users and app developers, we can clearly see the beginning of this encroachment.</p>
<p>So here we are. What do we do?</p>
<p><br /></p>
<h5 id="a-little-less-conversation-a-little-more-action">A LITTLE LESS CONVERSATION, A LITTLE MORE ACTION</h5>
<p>I don’t know about you, but here’s what <em>I</em> want to see happen.</p>
<p>I want the first tab of my OS’s home screen to be a central inbox half as good as my chat app’s inbox. It want it to incorporate all my messengers, emails, news subscriptions, and notifications and give me as great a degree of control in managing it. No more red dots spattered everywhere, no swiping up to see missed notifications. Make them a bit richer and better-integrated with their originating apps. Make them expire and sync between my devices as appropriate. Just fan it all out in front of me and give me a few simple ways to tame them. I’ll spend most of my day on that page, and when I need to go launch Calculator or Infinity Blade, I’ll swipe over. Serve me a tasty info burrito as my main course instead of a series of nachos.</p>
<p>The next time I’m back stateside, I want my phone to support something like Chrome Apps, but retaining a few useful properties of apps instead of being big, weird icons that just link to websites. I want to sit down at T.G.I Friday’s<sup id="fnref:4"><a href="#fn:4" class="footnote">4</a></sup> and scan a QR code at my restaurant table and be able to connect to their WiFi, order, and pay. Without having to download <a href="https://itunes.apple.com/us/app/tgi-fridays/id506485378?mt=8">a big app over my data plan</a>, set up an account, and link a card when it is installed. Imagine if I could also register at the hospital or DMV in this fashion. Or buy a movie ticket. Or check in for a flight.</p>
<p>As a user, I want my apps — whether they’re native or web-based pseudo-apps — to have some consistent concept of identity, payments, offline storage, and data sharing. I want to be able to quickly add someone in person or from their website to my contacts. The next time I do a startup, I want to spend my time specializing in solving a specific problem for my users, not getting them over the above general hurdles.</p>
<p>I don’t actually care <em>how</em> it happens. Maybe the OS makers will up their game. Maybe Facebook, Telegram, or Snapchat can solve these problems for me by bolting solutions onto their messaging products. Hell, maybe Chrome or UC Browser will do it. Or maybe it’ll be delivered in some magic, blockchain-distributed, GNU-licensed, neckbeard-encrusted solution that the masses, in a sudden epiphany, repent to. As they say at Pizza Hut, there’s more than one way to skin a cat.</p>
<p>But more than anything, rather than screwing around with bots, I want the tech industry to focus on solving these major annoyances and handling some of the common use cases I described that my phone ought to do better with by now.</p>
<p><br /></p>
<h5 id="see-also">SEE ALSO</h5>
<p>If this is the first essay you’ve read that exposed you to the wacky and wonderful world of Chinese software, you may enjoy <a href="http://dangrover.com/blog/2014/12/01/chinese-mobile-app-ui-trends.html">my 2014 summary on the topic</a> and <a href="http://dangrover.com/blog/2016/01/31/more-chinese-mobile-ui-trends.html">its 2016 followup</a>.</p>
<p><br /></p>
<h5 id="acknowledgements">ACKNOWLEDGEMENTS</h5>
<p>Thanks to Kevin Shimota, Jeff Dlouhy, Andrew Badr, Jon Russel, Muzzammil Zaveri, Sonya Mann, Stephen Wang, Hank Horkoff, Mark Evans, Michael Belfrage, and Jake Rozin for reviewing drafts of this essay.</p>
<p><br /><br /></p>
<h5 id="footnotes">FOOTNOTES</h5>
<div class="footnotes">
<ol>
<li id="fn:1">
<p>One might object to the tap-counting approach above with “but what about speech recognition? Why can’t it be like Jarvis in <em>Iron Man</em>?” First, you are not Tony Stark. Second, speech recognition UIs are only economical for a given task when describing the task orally is faster than the equivalent tapping. I’ve only ever had one use-case for Siri: when I’m leaving the laundromat and tell her “Set a timer for 35 minutes” so that I can come back to put my clothes in the dryer. That is to say, it takes longer to set a timer than it takes to utter the words “set a timer.” Performing complex, multi-choice tasks like ordering a pizza with only a speech UI would take several multiples of the time it takes to do them using a well-optimized conventional UI as we’ve seen above (particularly if I’m waiting for a synthesized voice to rattle off the response each time). In conversations longer than a single commmand, using such UIs can feel less like being Iron Man and more like <a href="https://www.youtube.com/watch?v=k3A_pzCUwRA">speaking to the sloths in <em>Zootopia</em></a>. The only case I see them being useful is when I’m not able to use my hands. <a href="#fnref:1" class="reversefootnote">&#8617;</a></p>
</li>
<li id="fn:2">
<p>I’ve been wanting to pitch a feature that lets users to put any thread into folders. This would let users tame their growing number of group chats, decide which ones should have priority in their stream, as well as make it harder to lose track of them. I fear it would be too complex though. <a href="#fnref:2" class="reversefootnote">&#8617;</a></p>
</li>
<li id="fn:3">
<p>There are actually a few decent choices for presenting timely info snippets from disparate sources/apps. You could choose a conventional inbox, a modern chat app-style inbox as described here, dashboard widgets/tiles (as in Windows’ Metro-style UI), Facebook-style filtered newsfeeds, unfiltered Twitter-style feeds, or Google Now-style cards. But I think the chat-style inbox as detailed here is the most versatile. <a href="#fnref:3" class="reversefootnote">&#8617;</a></p>
</li>
<li id="fn:4">
<p>Shut up. It’s exactly the kind of food you want to eat when you’ve been gone for a year. <a href="#fnref:4" class="reversefootnote">&#8617;</a></p>
</li>
</ol>
</div>
Wed, 20 Apr 2016 06:57:40 -0400http://dangrover.com/blog/2016/04/20/bots-wont-replace-apps.html
http://dangrover.com/blog/2016/04/20/bots-wont-replace-apps.htmlblogMore Chinese Mobile UI Trends<p><img src="/img/content/chineseapps-2/Banner.jpg" alt="Crossing the Ling He in Jinzhou" class="post-pic" /><br /><br /></p>
<div class="post-languages">
<strong>TRANSLATIONS:</strong> <a href="http://36kr.com/p/5043571.html">中文 (36氪)</a> | <a href="http://www.huxiu.com/article/144180/1.html">中文 (虎嗅)</a></div>
<p>At the end of 2014, <a href="http://dangrover.com/blog/2014/12/01/chinese-mobile-app-ui-trends.html">I wrote about the trends I noticed in UI design in apps in China</a>. It was a surprising hit, receiving hundreds of thousands unique views the following week, and <a href="http://www.ui.cn/detail/33849.html">multiple</a> <a href="http://dangrover.com/blog/2014/12/01/chinese-mobile-app-ui-trends.html">translations</a> into Chinese as well as <a href="https://vc.ru/p/china-ux">Russian</a> and <a href="https://ringsterz.wordpress.com/2014/12/09/chinese-mobile-app-ui-trends/">Korean</a>.</p>
<p>I’m not sure why it struck a nerve. To my buddies back in SF who thought I was nuts for shipping out here, maybe it was interesting to see how software makers in China are far from being mere hawkers of pale, tasteless knockoffs forced onto the unsuspecting public living behind the Firewall. Rather, it’s a vibrant, thriving scene here, filled with talented people whose work reflects a different set of ideas, priorities, and sensibilities.</p>
<p>To others, perhaps another angle was trying to use a society’s software as window into its values and culture — something few other countries’ domestic software output is voluminous enough to enable.</p>
<p>As to the surprising number of people in the Chinese blogosphere that translated, reposted, and analyzed it, I guess the appeal was that no outsider had ever before really looked at the design of apps here as being that different at all.</p>
<p>This being 2016, the year of the Monkey, it’s about time for a new installment. I’ll start with some more tidbits on app design here that I hadn’t noticed when I wrote the last article, then move on to some new developments in the mobile world since then.</p>
<p><br /></p>
<h4 id="things-i-hadnt-noticed-before">Things I Hadn’t Noticed Before</h4>
<h5 id="user-ranks">USER RANKS</h5>
<p>Long a feature of the PhpBB-style forums of my youth, then promptly dispensed with once the “social web” properly took off in the mid-aughts, user ranks are quite common in Chinese apps. In social apps, they’re a 等级 (<cite>děngjí</cite>, grade) while in e-commerce apps, they’re points 积分 (<cite>jīfēn</cite>, points). They’re denoted next to one’s profile name as a series of badges, or as a special border on one’s avatar. Often starting a “VIP” membership in a premium app will add a special icon next to your name.</p>
<p><br /><a href="/img/content/chineseapps-2/Points@2x.png" class="magnify"><img src="/img/content/chineseapps-2/Points.png" alt="User ranks and points" /></a><br /></p>
<p>I’m told QQ was the first to do this, basing their rank system on hours connected. People once left their desktop PCs running to rack up the hours, until a daily cap was added.</p>
<p>I don’t really use QQ much, but my profile has more medals than a NATO general’s uniform. Weibo says I’m a level 9; maybe at 10, I can finally cast “magic missile.”</p>
<p><br /></p>
<h5 id="the-bullet-curtain">THE “BULLET CURTAIN”</h5>
<p>Originating from Japan, many Chinese video sites and apps have a button that displays users’ comments chaotically scrolling marquee-style over the video. This is called 弹幕 (<cite>dàn mù</cite>).</p>
<p><br /><a href="/img/content/chineseapps-2/BulletCurtain@2x.png" class="magnify"><img src="/img/content/chineseapps-2/BulletCurtain.png" alt="Bullet Curtain" /></a><br /><br /></p>
<h5 id="some-icons-ive-only-seen-here">SOME ICONS I’VE ONLY SEEN HERE</h5>
<p>I’d mentioned before that tons of apps offer theme options. I hadn’t noticed then that most had settled on the same, curious icon to represent this: a T-shirt. I guess it makes sense, it’s like new snazzy new threads for your UI. A few buck this trend by using a paintbrush icon instead.</p>
<p><br /><a href="/img/content/chineseapps-2/ThemeTshirts@2x.png" class="magnify"><img src="/img/content/chineseapps-2/ThemeTshirts.png" alt="Theme Tshirts" /></a><br /></p>
<p>Another funny one is the “happy shopping bag”, used for shopping features<sup id="fnref:2"><a href="#fn:2" class="footnote">1</a></sup>. Many apps have some kind of store — whether it’s jogging apps selling gear, music apps selling headphones, WeChat and QQ selling you top picks from JD.com, or, well, any product from Xiaomi trying to sell you more Xiaomi products.</p>
<p><br /><a href="/img/content/chineseapps-2/GrinningBags@2x.png" class="magnify"><img src="/img/content/chineseapps-2/GrinningBags.png" alt="Happy shopping bags" /></a><br /><br /></p>
<h5 id="keyboards--return-buttons">KEYBOARDS &amp; RETURN BUTTONS</h5>
<p>The iOS SDK allows developers to choose what the button in the lower right of a keyboard does. Is it a gray “return” button that inserts a line break, or is it a bright blue button with an action like “Search” or “Go” or “Send”?</p>
<p>Without looking, if you were designing a messaging app, which would you choose? Is it important to allow the user to insert line breaks for things like lists and multi-paragraph letters (in which case you need to add a custom “send” button somewhere in your UI outside the keyboard), or would you just pop a blue send button on the keyboard? It seems like a clear win for the latter. How often do you <em>really</em> need line breaks when typing an SMS on your <em>phone</em>, right? And wouldn’t users accidentally add a line break when they mean to send the message?</p>
<p>No! Wrong! It turns out when you make that your send button, it’s easy to accidentally hit it while typing a space and send an incomplete message or one with an incorrect autocompleted word. So easy, in fact, that the iOS system Messages app and every Western-produced chat app under the sun has unanimously elected for a custom “send” button outside the keyboard.</p>
<p>Users here do not have this problem, because one does not use the spacebar much when typing Chinese, even between sentences (Chinese punctuation is more prominent and has built-in whitespace). Furthermore, your fingers are often reaching above the keyboard to access Pinyin results, and they’ve got better things to use the screen real estate for. So here, in <em>every</em> chat app, the choice remains clear – just put it in the keyboard!</p>
<p><br /><a href="/img/content/chineseapps-2/KeyboardButtons@2x.png" class="magnify"><img src="/img/content/chineseapps-2/KeyboardButtons.png" alt="Where apps place their send buttons" /></a><br /><br /></p>
<h5 id="third-party-browsers">THIRD-PARTY BROWSERS</h5>
<p>Many people opt out of using the stock browsers on their smartphones, instead opting for a third-party browser like <a href="http://www.ucweb.com/ucbrowser/">UCBrowser</a>, <a href="http://browser.qq.com/">QQ Browser</a>, or Qihoo’s <a href="http://mse.360.cn/">360 Browser</a>. In fact, <a href="http://www.pcpop.com/doc/pic/003783175.html">according to QuestMobile</a>, QQ Browser is the 5th most popular app on Android, while iOS users prefer UC, which is the 12th most popular there.</p>
<p>These browsers boast plenty of features above the system browser. They have bandwidth-saving and acceleration features, ad-blocking, theming, “night mode”, scanning/creation of QR codes, downloading of pages and videos for offline use, and of course tight integration with Chinese search, news, and social media sites. Many browsers also offer nice UIs for e-books, usable offline.</p>
<p>Though <a href="http://liulanqi.baidu.com/">Baidu’s own browser</a> never took off, its widely-installed main app (mainly a fast way to get to their search engine and portal) holds its own as a third-party browser and includes many of the above features when browsing webpages, not to mention mini-versions of many of their other products (takeout ordering, cloud file storage, news, wallet). Often people reach for Baidu instead of the system browser when their impulse is to navigate to a known website.</p>
<p><br />
<a href="/img/content/chineseapps-2/Browsers@2x.png" class="magnify"><img src="/img/content/chineseapps-2/Browsers.png" alt="Browsers" /></a><br /><br /></p>
<h4 id="things-that-happened-in-2015">Things That Happened in 2015</h4>
<h5 id="data-usage-bean-counting--wifi-authentication-gets-easier">DATA USAGE BEAN-COUNTING + WIFI AUTHENTICATION GETS EASIER</h5>
<p>Folks here are conscious about using their mobile data plans. In fact, <a href="http://mobile.163.com/15/0713/15/AUDO7QCU0011179O.html">according to this report</a>, the average monthly data plan usage here is 210MB (compared to 1GB in the US.)</p>
<p>The popular “phone manager” utility apps <a href="http://m.qq.com/?ADTAG=media.innerenter.gj.top">offered by Tencent</a> and <a href="http://shouji.baidu.com/appsearch?from=as">Baidu</a> include features for monitoring and recording your data usage (流量, <cite>liúliàng</cite>). Many normal apps, too, offer clever ways to lower their data footprint, whether it’s “no picture mode” in news apps and browsers, special data plan offers, or employing special compression.</p>
<p><br /><a href="/img/content/chineseapps-2/DataUsage@2x.png" class="magnify"><img src="/img/content/chineseapps-2/DataUsage.png" alt="Data usage features" /></a><br /></p>
<p>I mentioned before, too, that most media apps allow downloading content for offline viewing. Thus if I want to binge-watch House of Cards on my next flight home, I can do it with iQIYI, but not Netflix.</p>
<p>Because people don’t want to waste data, when WiFi is available, they’ll quickly switch to it. All restaurants (except for the lowest-end) provide free wifi to their patrons.</p>
<p>Consequently, there are <a href="http://www.wifi.com/">popular apps</a> for unlocking different networks of hotspots, or for sharing passwords for password-protected hotspots. They even help you guess (hint: it’s usually 88888888). Xiaomi wisely turned Chinese users’ WiFi reliance into a selling point. Their OS’s WiFi connection UI includes badges to tell you which hotspots are known good, free ones, as well as a way to share credentials to a password-protected network with a friend via a QR code. They’ve even got deals with some hotspots to provide free WiFi to people with their hardware.</p>
<p><br /><a href="/img/content/chineseapps-2/WifiApps@2x.png" class="magnify"><img src="/img/content/chineseapps-2/WifiApps.png" alt="Some WiFi apps" /></a><br /></p>
<p>Open hotspots in public places like malls and coffee shops present the user with a captive portal page — you know, when the first page you access is redirected to some other site. In China, these gateway pages almost always require entering your phone number, solving a CAPTCHA, and finally entering the verification code they sent you via SMS. This is due to a law requiring users to provide some kind of “real identity” to all apps, ISPs, and hotspots. A verified cell phone number (which <a href="http://yn.yunnan.cn/html/2015-08/31/content_3889029.htm">now requires handing over one’s national ID card</a> to get) is thus the most convenient way to do this. I assume it’s so if the Stasi comes to your Starbucks, they can see who’s accessing which cat videos. For hotspot providers, this also lets them keep a handle on people casually leeching their bandwidth.</p>
<p>These pages are inconvenient enough, but when combined with the default behavior on iOS, it’s particularly infuriating. When connecting to a hotspot with a captive portal, iOS will automatically present a sheet with a mini-browser allowing you to complete whatever actions are required to get access. Switching to the Messages app to see the verification code they sent you dismisses the sheet<sup id="fnref:1"><a href="#fn:1" class="footnote">2</a></sup>, disconnecting you and requiring you to go back into Settings, re-connect, and finally enter the code. Finally, after verifying, the sheet’s “Done” button is only enabled via a navigation event, which Javascript-driven portal pages fail to trigger. This is endured daily by hundreds of millions of iPhone users in China who just want their darn WiFi.</p>
<p>This year, a much better solution has been invented and already widely adopted. Now WeChat offers an <a href="https://wifi.weixin.qq.com/">authentication API</a> for hotspots’ captive portal pages (<a href="https://wifi.alipay.com/wifi/index.htm">Alipay also has one</a>). At a restaurant, the customer can even bypass the portal page entirely by scanning a QR code that makes their phone auto-connect and authenticate.</p>
<p>For a typical use case, here’s the sticker they put on all the tables at a Korean BBQ place near me:<br />
<br /><img src="/img/content/chineseapps-2/RestaurantPlacard.jpg" alt="Placard in a restaurant" /><br /><br /></p>
<p>Adopting this method of authentication (instead of a plain vanilla router with a password) gives the merchant an opportunity to promote their official account, which is a richer, higher-traffic, and altogether less spammy way to reach users with discounts and news. This also has the advantage of limiting access to patrons physically in scanning distance of the code.</p>
<p>Most hotspots set up like this are WeChat-only, though McDonald’s gives you a choice of WeChat, Alipay, or the old-fashioned SMS method.</p>
<p><br /><a href="/img/content/chineseapps-2/WeChatWifiProcess@2x.png" class="magnify"><img src="/img/content/chineseapps-2/WeChatWifiProcess.png" alt="Logging into Wifi with WeChat and Alipay" /></a><br /><br /></p>
<h5 id="fun-with-captchas">FUN WITH CAPTCHAS</h5>
<p>Lots of things are protected with CAPTCHAs here, usually the normal sort with jumbled numbers, but sometimes they’re different. Occasionally you’ll be asked to enter Chinese characters or strokes.</p>
<p>A photo CAPTCHA on the official rail ticket booking site 12306.cn (think of it as Healthcare.gov for trains) <a href="http://business.sohu.com/20151207/n430131139.shtml">stumped many users</a> with its nonsensical photo-based challenges and became the subject of Photoshop memes.</p>
<p><br /><img src="/img/content/chineseapps-2/Captchas.png" alt="Captchas on Chinese sites" /><br /><br /></p>
<h5 id="the-great-takeout-wars">THE GREAT TAKEOUT WARS</h5>
<p>The grandaddy of restaurant-finding apps is Dazhong Dianping, occupying a place similar to Yelp. Yet it seems like every app, no matter its ostensible purpose, has added some sort of “nearby businesses” feature: QQ, Baidu Maps, Momo, Alipay, even Didi Dache. Some have their own take on this feature, others are white-labeled from other apps. Either way, they’ve all decided to present their categories in the exact same way, as two rows of colorful, round pucks with icons on them.</p>
<p><br /><a href="/img/content/chineseapps-2/TakeoutWars@2x.png" class="magnify"><img src="/img/content/chineseapps-2/TakeoutWars.png" alt="Restaurant Finding UIs" /></a><br /><br /></p>
<p>The next step after giving users a fast way to find nearby grub? Make ordering takeout easy!</p>
<p>Aside from Eleme, Meituan, and Dianping, Alibaba and Baidu have also been pushing their own takeout-ordering pretty aggressively. When I walk down the street, I am constantly being handed coupons for ordering takeout via different apps. Some restaurants have had their menus input into the app’s native UIs, while Pizza Hut seems to work in every ordering app using their own UI via a webview.</p>
<p>I like Baidu’s the best, because it has a dorky “status” view showing you updates on your order. I often use it to order from my favorite <cite>mala xiang guo</cite> hot pot place, or from the local knockoff KFC (which, unlike real KFC, still carries the Mexican Chicken Wrap).</p>
<p>My co-workers like using a service called <a href="http://www.lyancoffee.com/">连咖啡</a>, available via WeChat, which dispatches a guy to the nearest Starbucks to grab your coffee for you. When I go to Starbucks, I often get stuck behind that guy in line as he rattles off 30 coffee orders from his phone screen and swipes his member card to get the points.</p>
<p>If ordering food weren’t enough, every other kind of service is available via these apps. With one tap, you can summon <a href="http://www.ayibang.com">a maid</a>, <a href="http://www.chushi007.com/">a chef</a>, or <a href="https://itunes.apple.com/us/app/song-shui-gong-waterboy/id1020894738?mt=8">those big bottles of water for your cooler</a>. I chuckle when I see criticisms of Silicon Valley startups’s lack of ambition <a href="https://twitter.com/azizshamim/status/595285234880491521">tackling problems of sheltered 20-somethings</a>, because China totally has us beat here.</p>
<h5 id="alipay-shamelessly-clones-wechat">ALIPAY SHAMELESSLY CLONES WECHAT</h5>
<p>Here, when making a payment with your phone (on a website or in real life), one has the choice of two main competing “wallets”: Alipay or the Wallet feature in WeChat.</p>
<p>Alipay, strictly built around financial and commerce features, often seems the most straightforward to reach for if you’re buying something at the convenience store or paying the guy who did your drywall. But when it comes to “social” transactions like paying back friends for things and sending festive red envelopes of cash on the holidays, WeChat is the clear choice. Why use something else when they’re already right there?</p>
<p>This year, both apps have tried to bridge that gulf between their respective use-cases to increase their share of online payments. WeChat added a snappy way to send and receive funds via QR code from the front screen without having to first add the counter-party as a friend (or enter Wallet, in the convenience store scenario).</p>
<p>Alipay, for its move, tried something more ambitious. They copied many of WeChat’s chat features, sticking them in a newly-prominent “Friends” tab. It isn’t as if they decided to take inspiration from WeChat and make their product more social — they literally copied it over. The resemblance is beyond uncanny, <a href="http://tech.163.com/15/0708/20/AU1E9BQK000915BD.html">most screens being pixel-for-pixel identical</a>. The result is a head-scratching attempt at getting people to use a digital wallet app for chatting with their friends, lest they use a chat app to make their online payments.</p>
<p>Interestingly, amid this wholesale copying, they’ve included a unique take on WeChat’s news feed, here called “生活圈“ (<cite>shēnghuó quān</cite>, life…circle?). Aside from your friends’ posts, you can watch uninterrupted full-screen video snippets from people around you, which is strangely compelling. The first time I opened it, it was fun to see the insides of all the offices of other companies around me and what people there were doing. After that, interest subsided and nobody has posted anything on it ever.</p>
<p><br /></p>
<h5 id="everyone-starts-selling-financial-products">EVERYONE STARTS SELLING FINANCIAL PRODUCTS</h5>
<p>Tencent has been running lots of ads for the re-launch of its financial product marketplace, 理财通 (<cite>lǐcái tōng</cite>). It’s on the top row of icons in WeChat’s Wallet screen, even above movie tickets and taxi cabs.</p>
<p>One weekend, I just couldn’t escape it. I saw <a href="http://www.iqiyi.com/v_19rrl59548.html">commercials for it</a> before every online video I watched and on the screens in the back of every taxi I rode in. Lest the message not sink in, after the weekend ad blitz, on Monday, these girls posted in front of my office were more than happy to show us how to buy into a fund using the feature:</p>
<p><img src="/img/content/chineseapps-2/LiCaiTongBabes.jpg" alt="Licai Tong babes" class="post-pic" /><br /><br /></p>
<p>Indeed, many apps offer 1-click buying of financial products via their wallet features, as do Alipay and the official app from just about any bank. Even Xiaomi ships a “小米金融” app on every device. It’s just a few taps from the main screens of many apps to invest in a fund seemingly yielding upwards of 4% (not long ago, 8%). I see ads for these products everywhere, and they’re always flashy and cartoony rather than trying to seem stodgy and trustworthy like the funds that advertise in the <cite>Wall Street Journal</cite>.</p>
<p><br />
<a href="/img/content/chineseapps-2/FinancialProducts@2x.png" class="magnify"><img src="/img/content/chineseapps-2/FinancialProducts.png" alt="Financial products" /></a><br /><br /></p>
<h5 id="bots">BOTS</h5>
<p>This year, Microsoft China released <a href="http://www.msxiaoice.com/">an AI chatbot called 小冰</a> (xiǎobīng) that has been popular. She’s accessible via the web, via a standalone app, via WeChat, via Cortana, and through a dedicated button in Xiaomi’s own seldom-used messaging app. It’s fun to toss annoying questions at her and see how she responds. Some people even confide in her. She’s kind of the love child of Siri, ELIZA, and Cleverbot.</p>
<p>A few apps have added bots of their own. The Baidu app has one called 度秘 (dumi, from 秘书, meaning secretary), here represented as an androgynous robot that could be a cousin of Eva from WALL-E. Also available as <a href="https://itunes.apple.com/cn/app/du-mi-ren-ren-dou-neng-yong/id1048368565">a stand-alone app</a>, it can answer natural-language search queries, find stuff near you, and tell jokes. It speaks all responses aloud via text-to-speech. Every time you open it, it greets you, instead of just waiting for a query. Though you can type and speak as in a normal chat, they also have a bar at the bottom to expose features and possible responses/follow-ups to something Dumi says.</p>
<p>Inside the Taobao app is 阿里小蜜, (Ali Xiaomi, mi here meaning honey), represented as a cartoon bee. You can install a shortcut on your home screen to go to it directly. It can answer logistics questions about your orders, book travel, and find stuff for you on the site. It cannot tell jokes.</p>
<p>Though bots have been fashionable, I’m not sure there’s evidence that real users actually prefer interacting with apps this way.</p>
<p><br />
<a href="/img/content/chineseapps-2/Bots@2x.png" class="magnify"><img src="/img/content/chineseapps-2/Bots.png" alt="Chat bots" /></a><br /><br /></p>
<h5 id="the-ios-app-store-continues-missing-the-puck">THE IOS APP STORE CONTINUES MISSING THE PUCK</h5>
<p>This year, a piece of malware called <a href="http://www.macrumors.com/2015/09/20/xcodeghost-chinese-malware-faq/">Xcode Ghost</a> infected many popular Chinese apps that had passed Apple’s inspection and been posted on the App Store. It did so via an infected version of Xcode that had been modified to insert the offending malware in every binary it compiled. The infected Xcode had been distributed via Baidu Yunpan, their Dropbox clone.</p>
<p>The reason, of course, that most developers download Xcode from such places is that the official site is <em>really slow</em>. Apple responded by dumping the updates on some CDNs co-located here, but it’s not improved by much.</p>
<p>The App Store is pretty sub-par too, for a few reasons. Not the least of which is that it’s slow all-around, no matter whether you are logged into the US store or the China store. Somehow, it takes about five seconds from tapping the “Search” tab bar icon to the search field actually appearing and becoming usable, which seems like something that shouldn’t be network-bound. Not only is searching by typing keywords something people here do less, but WeChat’s official accounts have already obviated the need for many categories of apps. And when people do install third-party apps, it’s often via QR code, something not supported by the app store or on the OS level.</p>
<p>I’d <a href="http://dangrover.com/blog/2014/12/01/chinese-mobile-app-ui-trends.html#a-nameportals-appstoresamany-app-stores">mentioned in the last post</a> that developers here circumvent the app store on iOS by either having tons of cross-promotion in their own apps, or by actually making their own independent iOS app stores that use OTA certificates to allow installs of non-vetted third-party apps.</p>
<p>In recent iOS updates, Apple made it more complicated for the user to actually authorize these third-party applications. But because the official App Store is so poor, the circumvention has continued un-thwarted. I see lots of links to apps with instructions on how to install this way (like the <a href="http://www.yi-gather.com/">one for my co-working space</a>).</p>
<p>In fact, just the other day, I was walking down the street and someone handed me this flyer telling me how to enter Settings and trust this certificate so I can play the fish game and win fabulous prizes. What could go wrong?</p>
<p><br />
<img src="/img/content/chineseapps-2/OTACertFlyer.jpg" alt="Install this cert" /><br /><br /></p>
<h5 id="wechat-finally-beats-qq--the-mobile-fringe">WECHAT FINALLY BEATS QQ &amp; THE MOBILE FRINGE</h5>
<p>In <a href="http://tencent.com/en-us/content/ir/news/2015/attachments/20151110.pdf">Tencent’s last quarterly statement</a>, WeChat’s monthly active users reached 650 million, surpassing QQ’s 639 million mobile monthly actives. Their total users still beat us, and MAU is not always the most useful metric, but this inflection point happened sooner than anyone had predicted.</p>
<p>Although WeChat has been the darling of the media, it actually has formidable competition in QQ. When it launched as a mobile-only messaging app, it stood in stark contrast to the crusty, still-desktop-centric QQ. The QQ team quickly re-doubled its efforts and successfully pulled off several total redesigns of the app to boost its engagement on mobile devices.</p>
<p>This dynamic is remarkable for two reasons. One is that you’d normally think the younger users would overwhelmingly like the much newer product. But it’s also unusual that a single company could have successfully disrupted itself by creating two, competing, widely-used products in the same category.</p>
<p>As <a href="http://blog.wechat.com/2015/11/03/new-data-revealed-what-is-the-wechat-lifestyle/">mentioned in a talk by my colleague</a>, there are still hundreds of millions of people who don’t use WeChat. It’s largely younger users and those in more remote parts of the country. Then, of course, there are those who don’t use the Internet at all, or only use it on a desktop. In a country of 1.3 billion, there are only <a href="http://www.techweb.com.cn/world/2015-02-04/2121983.shtml">649 million Internet users</a>, and the actual ratio differs vastly between areas.</p>
<p><br />
<img src="/img/content/chineseapps-2/MobileFringe.jpg" alt="Jinzhou" /><br /><br /></p>
<p>I recently traveled to a third-tier city in China’s frigid northeast as part of a team with members responsible for both apps. We were there to conduct some focus groups where we talked to people about how they use their phone, as well as walk around and eat copious amounts of dumplings. I’ve been told there are places here where you buy apps by taking your phone to the village app store and having a guy install it. But going to these sorts of places is more interesting for us because they’re not <em>actually</em> so backwards or remote, yet still quite different from home.
<br /></p>
<h5 id="the-wacky-mobile-future">THE WACKY MOBILE FUTURE</h5>
<p>Thinking back to when I left San Francisco to move here, my own perspective has shifted. I was afraid that the Bay Area might be the only place I could be happy or do decent work. Aside from my intense longing for burritos, it ended up being a great move. It’s true, there are still some things Silicon Valley is doing well with no contest. Today, China is not yet making the operating systems, frameworks, programming languages, or open standards that the rest of the industry is using.</p>
<p>Yet when I think about it, <em>neither is most of Silicon Valley</em>. <a href="http://zedshaw.com/archive/why-i-algpl/">As has been ranted about by others</a>, much of the funding and hype back home is all going to people making the exact same sort of consumer apps, gluing together tech to make a buck. Churning out the exact same sort of apps that folks are doing a pretty good job with on this side of the world.</p>
<p>When I’d first moved out and taken a look at mobile design here to write that last piece, it was fun to dive in and chuckle “Hah, some of these apps sure are <em>weird</em>”. It was interesting to see how technology has evolved independently to serve the needs on the ground here.</p>
<p>But it’s about to get a lot weirder. While China is an interesting case, we’ve still got places like India and large parts of Africa that are still far behind. Global internet penetration is still low. And as more people come online in those places, the apps and OSes they use may in no way resemble what we use now. They will look to technology to solve much of the same problems as us while carrying little of the same assumptions.</p>
<p>I can’t wait to see what happens next!
<br /><br /></p>
<h5 id="acknowledgements">ACKNOWLEDGEMENTS</h5>
<p>Thanks to <a href="https://twitter.com/mikez">Michael Belfrage</a>, <a href="http://jeffd.org/">Jeff Dlouhy</a>, and Matt for reading drafts of this post!</p>
<p><br /></p>
<h5 id="footnotes">FOOTNOTES</h5>
<div class="footnotes">
<ol>
<li id="fn:2">
<p>I’ve only bought stuff this way a few times, but a given with this sort of feature is that buying an item won’t require yet another login or linking yet another credit card, it will use something like Alipay or WeChat Wallet. It is also worth (perhaps in another post) exploring difference in business models of apps here, to which we can attribute the existence of these features. <a href="#fnref:2" class="reversefootnote">&#8617;</a></p>
</li>
<li id="fn:1">
<p>If you’re quick, you can catch it in the push notification banner. But for me, I often mute the numbers that send the confirmation codes because they also send spam that I don’t need push notifications about. <a href="#fnref:1" class="reversefootnote">&#8617;</a></p>
</li>
</ol>
</div>
Sun, 31 Jan 2016 05:00:40 -0500http://dangrover.com/blog/2016/01/31/more-chinese-mobile-ui-trends.html
http://dangrover.com/blog/2016/01/31/more-chinese-mobile-ui-trends.htmlblogChinese Mobile App UI Trends<p><img src="/img/content/chineseapps/subway.jpg" alt="Guangzhou" class="post-pic" /></p>
<div class="post-languages">
<strong>TRANSLATIONS:</strong> <a href="http://www.ui.cn/project.php?id=33849">中文 (UI.cn)</a>
| <a href="http://www.csdn.net/article/2014-12-03/2822932-chinese-mobile-app-ui-trends">中文 (CSDN)</a>
| <a href="https://ringsterz.wordpress.com/2014/12/09/chinese-mobile-app-ui-trends/">한국어</a>
| <a href="http://siliconrus.com/2014/12/china-ux/">ру́сский язы́к</a></div>
<p>This summer, I packed up all my things and moved from San Francisco to Guangzhou, China for work. Through an unlikely chain of coincidences that I don’t entirely recall, I’ve become a product manager on WeChat, a popular messaging app in China.</p>
<p>Moving to a new country has meant learning how to do lots of things differently: speaking a new language, eating, shopping, getting around. In a few months, I’m surprised at how acclimated I’ve become to what, at first, seemed such an overwhelmingly alien place.</p>
<p>This has applied to my digital life too. I’ve replaced all my apps with those used here, owning both to my keen interest as someone in the tech industry, and to “go native” to the extent I can. Since then, I’ve similarly become blind to the adaptations required there, too.</p>
<p>One day, for the fun of it, I started writing a list in my notebook of all the things that are different between apps here and those I’m accustomed to using and creating back in the US. When I finished, I was surprised by how long the list was, so it seemed fitting to flesh it out into a post.</p>
<!--
<a class="small-link" href="http://www.ui.cn/project.php?id=33849" title="Read Chinese Translation"><img src="/img/content/chineseapps/monmon.png" alt="obligatory cartoon character"/> 中文版
<span class="xiaohongdian"></span>
</a>-->
<h4 id="table-of-contents">Table of Contents</h4>
<ol>
<li><a href="#input">Input is Hard</a></li>
<li><a href="#badges">Indeterminate Badges</a></li>
<li><a href="#portals">Walled Gardens, Portals, Platforms</a></li>
<li><a href="#accounts">Accounts and Login Screens</a></li>
<li><a href="#chatasui">Chat as Universal UI</a></li>
<li><a href="#buying">Buying Stuff</a></li>
<li><a href="#location">Location, Location, Location</a></li>
<li><a href="#downloads">Everything Can Be Downloaded</a></li>
<li><a href="#moments">A Word on Moments</a></li>
<li><a href="#misc">Miscellanea</a>
<ul>
<li><a href="#assistivetouch">Assistive Touch</a></li>
<li><a href="#mascots">Cutesy Mascots</a></li>
<li><a href="#pollution">Pollution Widgets</a></li>
<li><a href="#adsplashscreens">Ad Splash Screens</a></li>
<li><a href="#themes">Theming</a></li>
<li><a href="#roms">Android ROMs</a></li>
</ul>
</li>
<li><a href="#footnotes">Footnotes</a></li>
</ol>
<h4 id="a-nameinputainput-is-hard"><a name="input"></a>Input Is Hard</h4>
<h5 id="a-nameinput-pinyinapinyin-fuzzy-matching"><a name="input-pinyin"></a>PINYIN FUZZY MATCHING</h5>
<p>People here use myriad methods of typing Chinese characters: everything from <a href="http://en.wikipedia.org/wiki/Pinyin">Pinyin</a>, to tracing characters by hand, to a stroke-organized keypad, even one emulating older cell phones’ numeric keypads. The method one prefers seems to depend largely on the era and region one grew up in, though Pinyin seems the most popular.</p>
<p>Yet sites and apps here do not require using of any of these. They’ll happily <em>accept Latin characters</em> as search terms and resolve them to Chinese-language results — independent of your operating system. They even use heuristics to interpret typos and homophones. Once you’re used to it, it’s annoying that the OS and most other apps don’t work this way.</p>
<p><a href="/img/content/chineseapps/pinyin@2x.png" class="screenshot-embiggen"><img src="/img/content/chineseapps/pinyin.png" alt="pinyin fuzzy matching" /></a></p>
<p>While apps have gone to great lengths to handle all sorts of Chinese input, it’s no surprise that they seldom implement good fuzzy matching for English (<cite>e.g.</cite> <a href="http://en.wikipedia.org/wiki/Stemming">stemming</a>, <a href="http://en.wikipedia.org/wiki/Soundex">soundex</a>, gracefully handling diacritical marks, punctuation, and capitalization).</p>
<h5 id="a-nameinput-voiceavoice-messages-voice-search-voice-agents"><a name="input-voice"></a>VOICE MESSAGES, VOICE SEARCH, VOICE AGENTS</h5>
<p>Why make typing smoother when you can avoid it altogether?</p>
<p>Voice messages in chat apps (particularly WeChat) are popular here. They save the hassle of typing, and can be a godsend for for older generations who have little proficiency with computers, much less any muscle memory for the various methods of inputting Chinese characters.</p>
<p>Personally, I always feel slightly inconvenienced when I receive voice messages, as I must stop what I’m doing to listen (instead of skim over it). I also feel awkward about replying by voice, particularly in public (for fear of being <a href="http://vimeo.com/album/10213">“Bluetooth headset-guy”</a>).</p>
<p>But people here clearly don’t feel the same way, as it’s easy to witness many in public places sending voice messages. The typical pose is holding the phone microphone to the mouth at a slight angle while pressing down on the “record” button with the thumb.</p>
<p>Voice search is also widely supported across apps. <a href="http://blogs.wsj.com/digits/2014/11/21/baidus-andrew-ng-on-deep-learning-and-innovation-in-silicon-valley/">In a recent interview</a>, Baidu’s Andrew Ng noted that 10% of their searches were made by voice input.</p>
<p><a href="/img/content/chineseapps/voice@2x.png" class="screenshot-embiggen"><img src="/img/content/chineseapps/voice.png" alt="voice search" /></a></p>
<p><br /></p>
<h5 id="a-nameinput-qraqr-codes-for-everything"><a name="input-qr"></a>QR CODES FOR EVERYTHING</h5>
<p>Before I shipped out, I conducted user research interviews in San Francisco to gather insight on US users’ habits and preferences. At one point in each interview, I showed the subject a QR code and asked them what it was.</p>
<p>“Isn’t it, like, you take a picture and it brings you to a <em>mystery website</em>?”, scoffed one college girl. Another said they took a photo of one (using the Camera app), to no apparent effect, and never tried it again<sup id="fnref:4"><a href="#fn:4" class="footnote">1</a></sup>. “I think they’re for coupons or something”, a few surmised, often adding they were a bit afraid of what it might do to their phone. I taped these buffudled reactions to show to my coworkers to further underscore the point that QR codes never took off in the US.<sup id="fnref:7"><a href="#fn:7" class="footnote">2</a></sup></p>
<p>The Chinese, as you’d guess, are no stranger to them. QR codes are printed on most ads, brochures, restaurant menus, business cards, yes, coupons, and even on the backs of train seats and restroom stall doors:</p>
<p><img src="/img/content/chineseapps/qrcodes.jpg" alt="qr codes" /></p>
<p>Most apps have their own QR code reader feature built-in. The codes you find printed on things sometimes only work in one app, so often there will be a row of QR codes for WeChat, Weibo, and other apps. They contain URLs, as one would expect, but not always ones that can deep-link into the app if scanned in an external reader.</p>
<p>The term often used is “扫一扫” (sǎo yī sǎo), “sweep a little” (as with a broom). I prefer this operative verb to our “scan”, which conjures images of tricorders and medical equipment.</p>
<p>As I’ll describe later, these codes are used for everything from, yes, marketing websites, but also for useful things like adding people you meet in real life to your contacts, paying for things, and logging into sites.</p>
<p><br />
<a href="/img/content/chineseapps/qrcode-scanners@2x.png" class="screenshot-embiggen"><img src="/img/content/chineseapps/qrcode-scanners.png" alt="qr code scanners" /></a></p>
<p><br /><br /></p>
<h4 id="a-namebadgesaindeterminate-badges"><a name="badges"></a>Indeterminate Badges</h4>
<p>Apps in China liberally employ a UI element best described as the “indeterminate badge”. It’s not possible with native UI controls on iOS, and I’ve seen no US apps use them<sup id="fnref:1"><a href="#fn:1" class="footnote">3</a></sup>.</p>
<p>These are just the standard red badges you’re used to, but with no number. They’re used at every point in an app’s menu hierarchy, cascading, ending with the bottom tabs. If you haven’t opened an app in a little while, you’ll find more than a few screens sequined with these.</p>
<p><a href="/img/content/chineseapps/badges@2x.png" class="screenshot-embiggen"><img src="/img/content/chineseapps/badges.png" alt="badges everywhere!" /></a></p>
<p>Indeterminate badges indicate:</p>
<p><strong>A. New content has been loaded here</strong>, somewhere beneath the badged UI element. It indicates that the new items require no action from the user, or that the exact number doesn’t matter. This is used for social media news feeds as well as streams of new items on movie, music, or ecommerce apps</p>
<p><strong>B. A new feature is available.</strong> When you find it, it will have a red “NEW”/”新” next to it.</p>
<p><strong>C. The user has turned off or subdued notifications for part of an app.</strong> For instance, one can mute a chat in WeChat, which supplants its numbered badge with an indeterminate one when new messages have been sent to the chat. <sup id="fnref:2"><a href="#fn:2" class="footnote">4</a></sup></p>
<p>Apps employ both numbered and indeterminate badges. If a UI element has children displaying both types, the numbered one takes precedence and gets displayed on the parent.</p>
<p>It strikes me as an invention of necessity, as more complex menu hierarchies require thoughtful means of guiding the user to plunge their depths. It also heightens the addictiveness of many apps, in instances where so many numbered badges would just be <em>too</em> in-your-face.</p>
<p>Fun fact: In QQ, you can drag any numbered badge (but not indeterminate ones) and it’ll come unstuck from its parent UI element and disappear in a little puff of smoke.</p>
<p><br /></p>
<h4 id="a-nameportalsa-walled-gardens-portals-platforms"><a name="portals"></a> Walled Gardens, Portals, Platforms</h4>
<p>Richard Gabriel’s <a href="http://www.jwz.org/doc/worse-is-better.html"><cite>The Rise Of “Worse is Better”</cite></a>, now a classic essay, was the first to draw a distinction between two opposing views on software design:</p>
<p>There’s the “Worse is Better” approach exemplified by UNIX and C as developed at Bell Labs. It leans towards collections of small, somewhat crude, interoperable tools. Then there’s the “The Right Thing”/”Better is Better” approach, exemplified by Common Lisp, Scheme, and Emacs as developed at MIT. This approach produces larger, more comprehensive, monolithic solutions to problems.</p>
<p>The latest trend in US apps is <a href="http://avc.com/2014/05/app-constellations/">splitting apps into “constellations”</a> of ever-more-focused and minimalist task-driven apps, in a nod towards the “worse is better” school. But apps here have been tugged in the opposite direction.</p>
<p>Every app has accumulated more and more features seemingly unrelated to their ostensible purpose — sometimes cleverly integrated, sometimes strapped on arbitrarily — in what I can only imagine are bids to make each app retain eyeballs and work its way into more users’ daily habits.</p>
<p>A few examples that come to mind:</p>
<ul>
<li>
<p>WeChat is <a href="http://en.wikipedia.org/wiki/Editor_war">the emacs to WhatsApp’s vim</a>. Besides messaging, it does and video calls, has a news feed, a wallet with a payments service, a Favorites feature functioning more like Evernote, a game center (with a built-in game), a location-based people finder, a Shazaam-like song-matching service, and, in accordance with <a href="http://en.wikipedia.org/wiki/Jamie_Zawinski#Zawinski.27s_law_of_software_envelopment">Zawinski’s Law</a>, a mail client<sup id="fnref:3"><a href="#fn:3" class="footnote">5</a></sup>. Its official accounts platform (described later) goes as far as providing a layer to <a href="http://technode.com/2014/11/02/tencent-showcases-wechat-hardware/">allow hardware devices to use the app to communicate</a> with services, instead of requiring custom apps.</p>
</li>
<li>
<p>Baidu Maps has weather, an optional “Find My Friends” feature, travel guides, a full “wallet” mode for buying all kinds of things. Tencent Maps lets you send audio postcards. Both have QR code readers and obligatory Groupon-style local offers.</p>
</li>
<li>
<p>Weibo, once a Twitter analog, does much more. Its “post” button actually allows one to post up to 10 distinct types of content, from blog entry to restaurant review. It, too, has grown a wallet feature.</p>
</li>
<li>
<p>While all-encompassing, Yahoo-like “portal” homepages died in the US sometime in the early 2000’s, they’ve had a long life here in sites like <a href="http://www.sina.com.cn/">Sina</a>, <a href="http://163.com">163.com</a>, <a href="http:///hao123.com">hao123</a>, and <a href="http://www.qq.com">Tencent News</a>. Though “normal” apps have all sprouted portal-like features, the actual portal sites all have apps of their own which seem popular enough.</p>
</li>
</ul>
<p><br /></p>
<p>#####<a name="portals-discover"></a> “DISCOVER” IS THE NEW HAMBURGER MENU</p>
<p>US apps have standardized on a few ways to group their non-categorizable odds-and-ends (things like settings and help). Often they’re under a “More” tab on the far right (with an elipsis icon), under the dreaded <a href="http://gizmodo.com/who-designed-the-iconic-hamburger-icon-1555438787">hamburger menu</a>, or, in Facebook’s case, under a “More” tab with a hamburger menu icon.</p>
<p>Chinese apps sometimes do likewise, using “更多” (gèng duō, “even more”). But more often than not, they’re in a second or third bottom tab, emblazoned with “发现” (fāxiàn, “discover”). The Discover menu houses a changing menagerie of fun, not-quite-essential extras that augment the core function of the app. The icon of choice is typically a compass.</p>
<p><a href="/img/content/chineseapps/discover@2x.png" class="screenshot-embiggen"><img src="/img/content/chineseapps/discover.png" alt="discover" /></a></p>
<p><br /></p>
<p>#####<a name="portals-appstores"></a>MANY APP STORES</p>
<p>Lots of apps have a screen promoting other apps to download — typically games, but often other apps as well. Sometimes these screens link to the iOS app store, other times circumventing the app store with an <a href="http://developer.apple.com/library/ios/#featuredarticles/FA_Wireless_Enterprise_App_Distribution/Introduction/Introduction.html">OTA install</a>. Entire third-party app stores using this method are also promoted within some popular apps.</p>
<p>On Android, there are over 10 big app stores, and releasing an app requires listing and updating it on each. Even on iOS, there are alternative stores — I see ads for one called <a href="http://www.kuaiyong.com/">苹果助手</a> (Apple Helper), which requires installing a custom provisioning profile to use. Cydia is still popular, too, as jailbroken iPhones abound.
<br /></p>
<p><a href="/img/content/chineseapps/appstores@2x.png" class="screenshot-embiggen"><img src="/img/content/chineseapps/appstores.png" alt="lots of app stores" /></a></p>
<h4 id="a-nameaccountsaaccounts-and-login-screens"><a name="accounts"></a>Accounts and Login Screens</h4>
<h5 id="a-namephoneloginaphone-numbers-and-tokens-over-passwords"><a name="phonelogin"></a>PHONE NUMBERS AND TOKENS OVER PASSWORDS</h5>
<p>US sites and apps typically allow two methods of logging in 1) a traditional email and password or 2) third-party authentication through Facebook or Google.</p>
<p>These days, of course, we’re also used to confirming our phone number in messaging apps and in whatever spinoff social app <em>du jour</em> Facebook’s come out with. You key in your number and receive a confirmation code via SMS.</p>
<p>But here, all apps offer this type of phone number registration/login (if not prefer it). This <em>also applies to websites</em>, even those without apps.</p>
<h5 id="a-nameqrloginsaqr-code-logins"><a name="qrlogins"></a>QR CODE LOGINS</h5>
<p>Many sites also allow users to log in by scanning a QR code in the site’s own app. In the QR code is an expiring session identifier that, once read by the mobile app, associates that browser session with the logged-in account.</p>
<p>This is ideal for situations when you don’t want the user entering their password with an actual keyboard. I’ve been told that in the past, many people used online services on public computers in places like internet cafes which can be plagued with keyloggers and spyware.</p>
<p>#####<a name="3rdpartylogins"></a> THIRD PARTY LOGINS</p>
<p>Many apps do also offer third-party authentication through WeChat, QQ, Sina Weibo, or sometimes Renren. On a phone, it’ll switch to the respective app. On websites, you get a choice of either a traditional login or scanning a QR code with the third-party service’s mobile app.</p>
<p><a href="/img/content/chineseapps/logins@2x.png" class="screenshot-embiggen"><img src="/img/content/chineseapps/logins.png" alt="logins" /></a></p>
<h5 id="a-namemoreloginsamore-security-measures"><a name="morelogins"></a>MORE SECURITY MEASURES</h5>
<p>Bank sites (as well as Alipay) require a special browser plugin implementing their own password fields. My bank even gave me a USB thumbdrive containing some kind of crypto key. I’m not sure what to do with it, other than hide it.</p>
<p>Often, login screens require completing a <abbr><a href="http://en.wikipedia.org/wiki/CAPTCHA">CAPTCHA</a></abbr>, far more consistently than US apps and sites, which typically only use them on registration forms. Some mobile apps even have them.</p>
<p><br /></p>
<h4 id="a-namechatasuiachat-as-universal-ui"><a name="chatasui"></a>Chat as Universal UI</h4>
<h5 id="a-nameoasaofficial-accounts"><a name="oas"></a>OFFICIAL ACCOUNTS</h5>
<p>WeChat has popularized the concept of “official accounts” for brands and public figures. They’re kind of like the IRC and AIM bots of yore — think <a href="http://en.wikipedia.org/wiki/SmarterChild">SmarterChild</a> but for banks, phone companies, blogs, <a href="http://www.forbes.com/sites/jlim/2014/06/16/wechat-is-being-trialed-to-make-hospitals-more-efficient-in-china/">hospitals</a>, malls, and government agencies. Many institutions that otherwise would have native apps or mobile sites have opted instead for official accounts.</p>
<p>You can send any kind of message (text, image, voice, etc), and they’ll reply, either in an automated fashion or by routing it to a human somewhere. The interface is exactly the same as for chatting with your friends, save for one difference: it has menus at the bottom with shortcuts to the main features of the account (though it can be toggled away to reveal the normal text field).</p>
<p>Other than that, every feature you can use in a normal chat is available here. WeChat even <a href="http://technode.com/2013/12/03/wechat-launched-voice-open-platform-and-speech-recognition-sdk/">auto-transcribes the voice messages (mentioned before) into text</a> before passing them to the third-party server running the account.</p>
<p>Official accounts can also push news updates to their subscribers. Every media outlet operates one, making the screen where these accounts live much akin to an RSS reader for many users.</p>
<p><a href="/img/content/chineseapps/oas@2x.png" class="screenshot-embiggen"><img src="/img/content/chineseapps/oas.png" alt="official accounts" /></a></p>
<p>The success of this model has led to many apps appropriating chat-style UI in different ways. Sina Weibo naturally uses it in their own official accounts feature, and as does QQ. But it can also be found in the “customer support center” area of many other apps). A startup called <a href="http://grata.co">Grata</a> even sells a white-label version of this that can be dropped into any app.</p>
<p>App makers haven’t just seized upon some insight that a familiar chat-style UI would make sense. They’ve actually <em>copied the entire UI</em>, lock, stock, and barrel, down to the layout of the three-tabbed bottom menu and of the “rich media” news messages pushed to subscribers.</p>
<h5 id="a-nameemoticonsaemoticons-and-stickers"><a name="emoticons"></a>EMOTICONS AND STICKERS</h5>
<p>Before the mass-adoption of <a href="http://en.wikipedia.org/wiki/Emoji">emojis</a>, the smileys available in most Western apps were direct graphical equivalents of <a href="http://en.wikipedia.org/wiki/List_of_emoticons">traditional text emoticons</a>, with perhaps 15 or so in common use.</p>
<p>But here, QQ long ago set the standard for graphical emoticons. Its set of 80-someodd icons is wonderfully expressive and versatile, even compared to emojis. The icons in the set range from basic emotions to odder ones like <img src="/img/content/chineseapps/qq-creepy.png" alt="creepy face" />, <img src="/img/content/chineseapps/qq-commando.png" alt="commando" />, and <img src="/img/content/chineseapps/qq-hammer.png" alt="hammer" /> — each one with a fitting time and place!</p>
<p>Any app offering chat features here would be remiss to not copy them, and indeed QQ’s emoticons were carried forward to WeChat and “borrowed” by many, many other apps.</p>
<p>Including larger, animated stickers is also obligatory — though, contrary to my expectations, it doesn’t seem like people in Asia are <em>that</em> more sticker-crazy than people in the US.<sup id="fnref:6"><a href="#fn:6" class="footnote">6</a></sup></p>
<p><br /></p>
<h4 id="a-namebuyingabuying-stuff"><a name="buying"></a>Buying Stuff</h4>
<p>Online payments in China had a bit of a rocky start due to, well, the complexities of working with Chinese banks. Websites here, instead of just taking a credit card number, require the user to choose their bank from a list of thirty or so, and fill out a form to bind the account. Each bank apparently offers its own unique point of integration that each website must support. This was quickly abstracted into third-party payment solutions like Tenpay and Alipay that were adopted widely by websites here.</p>
<h5 id="single-sign-on-mobile-payments">SINGLE-SIGN-ON MOBILE PAYMENTS</h5>
<p>Now many mobile apps can link with your bank account and be used as an intermediary for other apps, freeing you of going through the onerous binding process in yet another app.</p>
<p>The only time I’ve seen this in a US app was once when I was able to use Venmo to pay for a hotel room on Hotel Tonight. I had been stranded in an airport and was so delighted to see it as an option that I booked the room right then, rather than peruse other options that might require me to enter my credit card information.</p>
<p>But here, this goes without saying. The key difference is that the user doesn’t have to download some weird extra wallet/payments app — the wallets are built into apps they already have.</p>
<h5 id="every-app-has-a-wallet">EVERY APP HAS A WALLET</h5>
<p>The management functionality around payments is organized into a central screen, usually called 钱包（qiánbāo， “Wallet”). In addition, these screens have buttons to:</p>
<ol>
<li><strong>Buy things elsewhere in the app</strong> that would naturally come up (e.g. buying an offer in a local offers app).</li>
<li><strong>Buy things in real life</strong> by scanning a QR code displayed at the point-of-sale. Or vice versa — you can also have your phone show a QR code which is then read by a camera at the point-of-sale (which is a tad faster).</li>
<li><strong>Send payments to friends</strong>, usually called 红包 (hóngbāo, the traditional red envelope used to give gifts of money in China).</li>
<li><strong>Buy things that have nothing to do with anything</strong>. For instance, most apps with this feature offer plane tickets, lottery tickets, movie tickets, an Uber-like service to hail cabs (e.g. Dididache), a way to recharge your pre-paid cell phone service, and a way to pay your utility bills. Tencent’s apps have a mini-version of JD.com (a partner e-commerce site), as well as a way to buy QQ币，their virtual currency.</li>
</ol>
<p>Most of the apps with wallets use very similar layouts with a 3-column grid of colorful icons, typically representing the same collection of functions. Even <em>my actual bank’s app</em> has a screen like this, allowing you to buy things with your balance.
<br /><br /></p>
<p><a href="/img/content/chineseapps/app-wallets@2x.png" class="screenshot-embiggen"><img src="/img/content/chineseapps/app-wallets.png" alt="so many wallets" /></a></p>
<h5 id="dude-trust-me-i-have-a-shield-okay">DUDE, TRUST ME, I HAVE A SHIELD, OKAY?</h5>
<p>Any app touching money makes enormous pains in promising the security of the transaction. They often have a “security center” screen, which uses a giant shield icon somewhere. US ecommerce sites, of course, did similar things until the early 2000’s (remember “Hacker Safe?”), and today make such promises more subtly.</p>
<p>There are also a few popular apps that are supposed to somehow make your phone run faster, free up memory, make it more secure, and perhaps rid it of snakes. They’re superficially reminiscent of those made for Windows XP at its nadir of malware issues. Of course, this kind of app is useless on your phone, but — just so you know it’s the real deal — they’ve got big shields.</p>
<p><a href="/img/content/chineseapps/shields@2x.png" class="screenshot-embiggen"><img src="/img/content/chineseapps/shields.png" alt="shields a plenty" /></a></p>
<h4 id="a-namelocationalocation-location-location"><a name="location"></a>Location, Location, Location</h4>
<p>Apps here are never shy about asking for permission to retrieve your location, and they usually find some way to use it when you look hard enough — whether it’s auto-filling a “choose your city” dropdown, showing the weather, or to populate a “local offers” screen.</p>
<p>Many apps also let you connect with strangers nearby, which, here, is not creepy at all. The idea’s been tried in the US with apps like Highlight and Skout, but they have never had the degree of mainstream success that the category has enjoyed here. This could be due to differing cultural attitudes, or a simple function of population density and urbanisation. But it’s a widely-used and widely-implemented idea here.</p>
<h5 id="a-namelocation-standaloneaas-a-standalone-category"><a name="location-standalone"></a>AS A STANDALONE CATEGORY</h5>
<p><a href="http://www.immomo.com/">Momo</a>, one app expressly built for this purpose, has over 60 million monthly active users and has already <a href="http://www.reuters.com/article/2014/11/07/us-momoinc-ipo-idUSKBN0IR2CV20141107">filed for IPO</a>. It lets you meet people near you, but also find events, discussions, games, and more. <a href="http://www.iweju.com/">Weiju</a> and <a href="https://itunes.apple.com/cn/app/bi-lin-zhi-da-gei-mo-sheng/id625009752?mt=8">Bilin</a> are other contenders in this category.</p>
<h5 id="a-namelocation-builtinabuilt-into-everyday-apps"><a name="location-builtin"></a>BUILT INTO EVERYDAY APPS</h5>
<p>Aside from the popularity of these standalone apps, more remarkable still is that every normal, seemingly more utilitarian app also includes such features.</p>
<p>WeChat and QQ, the two most popular messaging apps, have a “People Nearby” feature giving you a simple list of people near you, often also letting you browse the photos they have posted to their news feeds. It’s opt-in, of course — you appear on the list of people nearby and are contactable for a couple hours by virtue of looking at the list yourself.<sup id="fnref:5"><a href="#fn:5" class="footnote">7</a></sup></p>
<p>Weibo, unlike Twitter, lets you see posts near you, as well as popular accounts and groups. And the major music, movie, and TV apps even show you what media people near you are watching and listening to.</p>
<p>Also noteworthy is Baidu Maps’ “heatmap”, a live-updated, block-by-block population density map, created by aggregating all the user locations transmitted to the server.</p>
<p>I have the feeling that if mainstream US apps ever added these features — even with a careful and restrained implementation — it’d be instant fodder for scare stories on evening news broadcasts and angry diatribes in the blogosphere by some interest group or another.</p>
<p><a href="/img/content/chineseapps/location@2x.png" class="screenshot-embiggen"><img src="/img/content/chineseapps/location.png" alt="location" /></a></p>
<h4 id="a-namedownloadsaeverything-can-be-downloaded"><a name="downloads"></a>Everything Can Be Downloaded</h4>
<p>Every app centered around any kind of media allows you to download things for offline consumption. This includes the music apps (QQ Music, Duomi, Baidu Music, etc) and the TV/movie apps (iQIYI, PPTV, Tencent Video, Baidu Video). You’re guaranteed on any subway ride to see at least a dozen people zoned out, catching up on their shows during a commute, something I’d never seen in the US, likely because of users’ ability to download shows here.</p>
<p>Major news apps, too, let you suck down hundreds of articles for later perusal. And every major map app allows you to store offline copies of maps of your city, or even the entire country. The English to Chinese translation apps like Baidu Fanyi and Youdao follow suit, allowing users to download a set of training data for faster (but coarser) offline machine-translations.</p>
<p>Apps that include this functionality highly tout it in their marketing. And when you download a movie or song, you’re usually given a choice of quality setting, and are told exactly how much data and storage is used, down to the KB, in instances where US apps would reduce it to a progress bar or omit it entirely. Often times, they give you a graph of your total disk usage as well.</p>
<h4 id="a-namemomentsaa-word-on-moments"><a name="moments"></a>A Word on Moments</h4>
<p>It’s worth breaking from general trends to call special attention to the design of WeChat’s “Moments” or “Friend Circle” feature.</p>
<p>When I first saw it, it seemed as if someone hastily duct-taped an ersatz Facebook news feed to the app and slapped the Picassa icon on it. But as I’ve used it, I’ve found it a surprisingly original and subversive feature. In fact, it’s everything Facebook’s news feed isn’t:</p>
<p><strong>No filtering</strong> — Every one of your friends’ posts is here, with no filtering or re-ordering. If one of your friends is annoying, you can take them off the feed, but it’s an all-or-nothing deal.</p>
<p><strong>More intimate</strong> — When you like or comment on a friend’s post, only they and any <em>mutual</em> friends can see it – not <em>all</em> of both parties’ friends, as on Facebook. This means that only the author of a post has an accurate idea how many people liked or commented on their post. This lowers’ users inhibitions in engaging with their friends’ posts.</p>
<p><strong>No companies/news</strong> — When you follow a company or news site’s official account, they push their updates in a separate area, not on your news feed. Though a friend can re-post content from these accounts to Moments, it takes some deliberate action.</p>
<p><strong>No auto-posts</strong> — Third-party apps can post to Moments, but only if the user initiates it, gets switched into WeChat, and manually confirms the post, each time.</p>
<p><strong>No games</strong> — Tencent makes boatloads of money off of Zynga-style social media games. However, they’ve had the good sense to relegate this activity to a “Game Center” section of the app that can be safely ignored.</p>
<p><strong>No photo filters</strong> - Though many types of content can be posted to Moments, it’s biased towards photos. Moments also actively eschews Instagram-style filters, in an attempt to make posts fast, spontaneous, and raw.</p>
<p>As a result of these design decisions, and the way it’s sewn into the parent app, people here are addicted to checking this feed, more than any other. To switch between messaging to checking the feed, to commenting and engaging, and back is a swift and fluid movement that people perform countless times each day.</p>
<h4 id="a-namemiscamiscellanea"><a name="misc"></a>Miscellanea</h4>
<h5 id="a-nameassistivetouchaassistive-touch"><a name="assistivetouch"></a>ASSISTIVE TOUCH</h5>
<p>Probably half of all iPhone users I see have the <a href="http://support.apple.com/en-us/HT202658">“Assistive Touch” option</a> turned on,
which makes a floating button appear on your screen at all times. This button, besides being annoying, emulates the hardware “home” button, as well as multitouch gestures for users whose impairments prevent them from performing them.</p>
<p>Nobody can give me a straight answer on why they, a person with two functioning hands and a full complement of motor neurons, enabled this obscure accessibility setting. Answers range from protecting their investment on the phone by not wearing out the physical home button, to it just being fun to play with when you’re bored.
<br /><br /></p>
<h5 id="a-namemascotsacutesy-mascots"><a name="mascots"></a>CUTESY MASCOTS</h5>
<p>I see a lot of cutesy mascots, often shown in loading and error screens.</p>
<p><a href="/img/content/chineseapps/mascots@2x.png" class="screenshot-embiggen"><img src="/img/content/chineseapps/mascots.png" alt="mascots" /></a>
<br /><br /></p>
<h5 id="a-namepollutionapollution-widgets"><a name="pollution"></a>POLLUTION WIDGETS</h5>
<p>Some apps include quick ways of keeping tabs on local pollution levels.</p>
<p><a href="/img/content/chineseapps/pollution@2x.png" class="screenshot-embiggen"><img src="/img/content/chineseapps/pollution.png" alt="pollution" /></a>
<br /><br />
<br /></p>
<h5 id="a-nameadsplashscreensaad-splash-screens"><a name="adsplashscreens"></a>AD SPLASH SCREENS</h5>
<p>Quite a few apps show full-screen ads when you start them. You don’t have to wait for them to load — they’re typically pre-loaded in the background, or even baked into the app. Sometimes they’re for content/items available for purchase inside the app, or for a special event or promotion. Other times they’re unrelated, the same sort of ads you’d see on billboards or on the subway.</p>
<p><a href="/img/content/chineseapps/splash-ads@2x.png" class="screenshot-embiggen"><img src="/img/content/chineseapps/splash-ads.png" alt="ads" /></a></p>
<p><br /></p>
<h5 id="a-namethemesatheming"><a name="themes"></a>THEMING</h5>
<p>There’s clearly a trend of major apps offering ways to theme/skin them. I can’t seem to think of a single US app I use on iOS that has this.</p>
<p><a href="/img/content/chineseapps/theming@2x.png" class="screenshot-embiggen"><img src="/img/content/chineseapps/theming.png" alt="themes" /></a></p>
<p><br /></p>
<h5 id="a-nameromsa-android-roms"><a name="roms"></a> ANDROID ROMS</h5>
<p>In a place where Google is blocked anyway, people don’t get much value out of the lily-white, unadulterated Google experience that Nexus devices offer, and the stock OS distribution on phones are as terrible here as anywhere. To fill that void, a few alternative Android OS distributions have emerged, including Xiaomi’s <a href="en.miui.com">MiUI</a>, Alibaba’s <a href="www.yunos.com">YunOS</a>, and <a href="http://smartisan.com">Smartisan</a>.</p>
<p>They’re all quite polished and have their share of original UI ideas, but I haven’t had enough time with my Android device to make full notes (perhaps a topic for a future post). I do highly recommend watching <a href="https://www.youtube.com/watch?v=mRnMetkbE_A">Smartisan’s launch event</a> (English subtitles), if only for the entertainment value.</p>
<p><br /><br /></p>
<h5 id="acknowledgements">ACKNOWLEDGEMENTS</h5>
<p>Thanks to <a href="http://rayps.com/">Ray</a>, <a href="https://twitter.com/andrew_schorr">Andrew</a>, <a href="https://appsocial.ly/">Alex from AppSocial.ly</a>, Zach Xiong, and <a href="http://andrewbadr.com/">Andrew Badr</a> for revisions on this post.</p>
<h5 id="footnotes">FOOTNOTES</h5>
<div class="footnotes">
<ol>
<li id="fn:4">
<p>After seeing <a href="http://rooms.me/">Facebook Rooms’</a> implementation of QR Codes (wherein the app scans your photos/screenshots upon launch for any QR codes), I suspect they interviewed the same people in studies they conducted. Of course, they could have also asked “If a mobile user encounters a QR code on a page somewhere, what the heck are they supposed to do with it?” <a href="#fnref:4" class="reversefootnote">&#8617;</a></p>
</li>
<li id="fn:7">
<p>Several friends here have pointed out that QR codes were a joke in China, too, until around 2011. They credit WeChat with legitimizing the concept. <a href="#fnref:7" class="reversefootnote">&#8617;</a></p>
</li>
<li id="fn:1">
<p>The Twitter app is a notable exception. Showing much restraint, it uses but a single indeterminate badge for the main feed on the first tab. <a href="#fnref:1" class="reversefootnote">&#8617;</a></p>
</li>
<li id="fn:2">
<p>Many official accounts are restricted to <em>only</em> displaying this type of notification. <a href="#fnref:2" class="reversefootnote">&#8617;</a></p>
</li>
<li id="fn:3">
<p>QQ Mail users can view their mailbox in the app. <a href="#fnref:3" class="reversefootnote">&#8617;</a></p>
</li>
<li id="fn:6">
<p>One difference between stickers as realized by Facebook and Path and as by Asian apps like WeChat and LINE is that the latter have user-generated stickers. Stickers can be generated by third-party apps (and in LINE’s case, official accounts), then passed around. Many of the ones I see on WeChat are similar in character to the <a href="http://reddit.com/r/gifs">/r/gifs</a> section of Reddit. <a href="#fnref:6" class="reversefootnote">&#8617;</a></p>
</li>
<li id="fn:5">
<p>There is a bit of a spam problem, as many of the accounts on the feature are prostitutes and people selling stuff (usually weird cosmetics or vitamins). But it can indeed be used to meet people. And regular folks who wouldn’t install a standalone app for this <em>do</em> check the “nearby” list from time to time, especially when they’re bored. <a href="#fnref:5" class="reversefootnote">&#8617;</a></p>
</li>
</ol>
</div>
Mon, 01 Dec 2014 05:57:40 -0500http://dangrover.com/blog/2014/12/01/chinese-mobile-app-ui-trends.html
http://dangrover.com/blog/2014/12/01/chinese-mobile-app-ui-trends.htmlblogCode and Creative Destruction<p><em>“Abe said something interesting. He said that because everyone's so poor these days, the '90s will be a decade with no architectural legacy or style... He said that code is the architecture of the '90s.”</em><br />
- Doug Coupland, writing in <a href="https://web.archive.org/web/20140424033115/http://www.amazon.com/gp/product/0061624268/ref=as_li_ss_tl?ie=UTF8&amp;camp=1789&amp;creative=390957&amp;creativeASIN=0061624268&amp;linkCode=as2&amp;tag=dangroverdotc-20"><em>Microserfs</em></a></p>
<p><br /></p>
<p><em>”When it comes to software, nobody expects the code to last, and the time you invested in making it work perfectly and defect-free doesn't often have a lot of correlation with the value it has to its user.”</em><br />
- Esther Schindler, in <a href="https://web.archive.org/web/20140424033115/http://blog.smartbear.com/software-quality/bid/167046/The-100-Year-Software-Application">The 100-Year Software Application</a></p>
<p><br /></p>
<p>I was feeling miffed a few months ago because a product I was managing at a startup got cancelled just as it was ready to ship. The company made a big strategy change and ten months' hard work from my team went down the drain. I went from leading a high-profile project that was going to make a big difference to feeling like the red-headed stepchild.</p>
<p>Whenever something like this happens, it gets me thinking about how quickly most of the things I’ve worked on have become obsolete. Everything from one-off tools I worked on as an intern in college, to more successful pursuits like apps or businesses that I've sold. It's all gone down the drain eventually.</p>
<h5>THEN LEAF SUBSIDES TO LEAF, SO EDEN SANK TO GRIEF</h5>
<p>Rationally, I see how silly it is to feel so emotional about something so routine in our industry. And it's easy to see how many much-smarter people worked on far bigger projects than my team's that went nowhere for even dumber and more tragic reasons.</p>
<p>There's <a href="https://web.archive.org/web/20140424033115/http://graphics8.nytimes.com/images/2011/01/13/technology/bits-computerhistory/bits-computerhistory-custom2.jpg">a wonderful hallway towards the end of the Computer History Museum</a> in Mountain View filled with old buttons once given out at trade shows.</p>
<p><img src="/img/content/opendoc-button.png" alt="opendoc sticker" style="float:left;width:176px;height:126px;margin-right:10px;margin-top:10px;" />Almost all the products the buttons advertise are delightfully obsolete. I remember a lot of them from the computer magazines I read as a kid. HyperCard. eWorld. Newton. Aldus PageMaker. OpenDoc. Atari. IBM PCjr. Netscape Navigator. BeOS. Not to mention every manner of compiler and database tool. If you're curious, you can <a href="https://web.archive.org/web/20140424033115/http://www.computerhistory.org/collections/search/?s=button&amp;type=all&amp;t=objects">find them in the museum's catalog</a>.</p>
<p><img src="/img/content/hypercard-button.png" alt="hypercard button" style="float:right;width:146px;height:132px;margin-left:10px;" />Some of these technologies had a great run, others were stillborn. Some of them were ended because they deserved it, or because they became evolutionary dead ends. But some only met their bitter end due to time and chance --- larger macroeconomic events, running out of funding, bad marketing, unscrupulous competitors, who knows. Some of these failed products found spiritual successors in later efforts, while others truly did drop off the face of the earth.</p>
<p>But reminding myself of the storied history of my industry (or <a href="https://web.archive.org/web/20140424033115/http://biblehub.com/ecclesiastes/9-11.htm">that old passage from Ecclesiastes</a>) doesn't ever make me feel better or any more in control. It's still hard to reconcile the passion and obsession that creating new things requires with their inevitable destruction or obsolescence. If you take this line of thought too long, it's easy to slide into nihilism. When I catch myself there, it makes me feel like <a href="https://web.archive.org/web/20140424033115/https://www.youtube.com/watch?v=5U1-OmAICpU">Woody Allen's character in <em>Annie Hall</em> contemplating the expansion of the universe</a>.</p>
<h5>HOW SOFTWARE GETS MADE</h5>
<p>I think we set ourselves up for disappointment with the language we use around software. We think of ourselves as builders, engineers, architects, as if we expect each line of code to be as lasting as the beams supporting the Golden Gate Bridge. Never mind that the Golden Gate Bridge is constantly being repainted and having bolts replaced.</p>
<p>When software projects aren’t spoken of like civil engineering, it’s made far more academic than it needs to be, as we try to wring some sort of mathematical purity out of the most pedestrian tasks. There <em>are</em> those whose daily work brings them up against the limits of knowledge — people who invent new compilers, theorem provers, or machine learning algorithms. But work for 99% of engineers, however highly trained, consists of gluing together different APIs and juggling ever-changing piddling implementation details. Yet some, stuck with building some internal tool or CRUD app, find the only way to weather this drudgery is to elevate the task, at least in their own minds, into something more abstract, higher-order, and academic.</p>
<p>Either way, we're led to fetishize code, sometimes in the face of more important things. Often we suffer under the illusion that the valuable thing produced in shipping a product is the code, when it might actually be an understanding of the problem domain, progress on design conundrums, or even customer feedback.</p>
<p>The reason many engineers and designers develop this perspective is that their jobs lull them into over-specializing. Some jobs can take well-rounded people and make them less capable. In many organizations, people who straddle the line between technical and non-technical quickly find themselves having to take a side. The result is that after too long in the wrong company, you can find yourself being molded into what's useful for the organization and not necessarily for you (or for the world).</p>
<h5>WHY AND HOW TO CARE</h5>
<p>But as long as there is work to be done in software projects, someone will have to do it. So what's the right attitude?</p>
<p><img src="/img/content/woody.jpg" alt="woody allen" style="border:#333 1px solid;" /></p>
<p>Some I’ve worked with can’t ship something they’re not proud of or excited about. And others react to everything from a minor request to a show-stopping bug with the detachment of an emergency room triage nurse at the end of their shift. Sure, if you’re starting a company, the buck stops with you and you've got a lot of things to think and worry about. But if you’re just a working chump, what good is all this naval-gazing? Shouldn’t it be enough to get paid a bunch and get to go home at the end of the day?</p>
<p>For whatever reason, I've never been able take such a pragmatic tack. I'll always be that neurotic Woody Allen character, no matter how long I live on the west coast, whether I am independent or working for others. Detaching has never felt like an option. Many of us in this industry are wired to care too much about the thing they're making, whether it deserves it or not. The attachment and obsession that can create such heartbreak when projects fizzle is the very same that grants them any chance of transcendent success.</p>
<p>Some, of course, do choose to exit the industry entirely. I've had co-workers who fantasized about quitting their design or engineering jobs and becoming, say, carpenters, building bespoke cabinets and tables (and a couple that have actually done it.)
<p>But there's got to be a way to stay in the game, not get splinters, and still not feel like you're wasting time.</p>
<h5>PICKING THE RIGHT STAR TO HITCH YOUR WAGON TO</h5>
<p>One possible answer, then, might be to only work on really important, earth-shattering things. There are plenty of talks by famous people extolling this perspective.</p>
<p>Bret Victor has a famous talk called <a href="https://web.archive.org/web/20140424033115/http://vimeo.com/36579366">Inventing on Principle</a>, in which he argues that engineers and inventors ought to base their lifes' work around some crisply-defined "principle." I have to confess that, despite my admiration for Victor, I've never been terribly inspired by that talk. I know what kinds of ideas make me excited, but I couldn't, even at gunpoint, distill those into "principles."</p>
<p>A professor I had once encouraged us to read through the Richard Hamming talk on <a href="https://web.archive.org/web/20140424033115/http://www.cs.virginia.edu/~robins/YouAndYourResearch.html">"You and Your Research"</a>, where he asks the question "What is the most important problem in your field and why aren't you solving it?" But I've always found that message intimidatingly high-minded as well.</p>
<p>When you listen to these sort of people, you feel like you ought to live like some sort of Randian hero. But I don't think projects need to be that important or dignified to deserve time -- they just need to be defined broadly and liberally enough, such that some chance act of economics or politics can't spell their sudden death.</p>
<p>It seems like whether an individual product or company fails or succeeds, it ripples out for a couple of decades. You don't have to look far to see that some of the most admired and successful people in the software industry have spent their entire lives chasing the same few ideas (and in some cases literally building the same product ad infinitum). It's tempting to view shipping an individual product as a once-in-a-lifetime shot, but the best ideas have a way of coming back.</p>
<p>Consider Dennis Crowley. Before Foursquare, he started Dodgeball (which relied on text messages), and before that, his work at NYU explored bridging the physical and digital worlds.</p>
Or take Ray Ozzie. <a href="https://web.archive.org/web/20140424033115/http://www.wired.com/techbiz/people/magazine/16-12/ff_ozzie?currentPage=all">This profile in WIRED</a> traces his career all the way back to his work at the University of Illinois on a system called Plato, which begat Lotus Notes, which begat Groove, the real-time collaboration app that became part of Microsoft Office.</p>
<p>When I was building music software, I occasionally ran into Michael Good, the inventor of MusicXML, an open standard for digital sheet music. I was fascinated to learn that his work with music standards began in the late 1970's when he helped create the first version of cSound at MIT. He went on to work on all sorts of things in his career, but finally started a company to address once and for all the intractable data interchange problem that has caused endless frustration to anybody using computers for music. His company, Recordare, last year got acquired by a recently reorganized MakeMusic, the developers of Finale. While music software was only a brief flirtation for me, it was a lifelong obsession for him.</p>
<p>These people did not fight any holy crusade for their principles and, despite their accomplishments, may not be remembered by history (except perhaps to be immortalized by their old buttons and bumper stickers in a hallway in Mountain View).</p>
<p>But they all managed to encounter a couple good ideas that were intriguing enough to follow through the years, across countless platforms, codebases, products, and institutions. They found motifs that could not only bear continued repetition but <em>deserved</em> it.</p>
<p>If there's <em>any</em> way to last in this racket, this has got to be it. Otherwise, I might as well start looking at table saws.</p>
Fri, 12 Jul 2013 21:57:40 -0400http://dangrover.com/2013/07/12/code-and-creative-destruction.html
http://dangrover.com/2013/07/12/code-and-creative-destruction.htmlInequality & Mass Transit in the Bay AreaA friend of mine and I made a mashup over the weekend. It shows median incomes along different mass transit routes in the Bay Area (BART, MUNI, CalTrain). <a href="http://dangrover.github.io/sf-transit-inequality/">Check it out!</a>
<br/>
<br/>
<b>UPDATE:</b> Got some play on the <a href="https://twitter.com/nytimesbits/status/331868783436238848"><i>New York Times</i>' Bits Blog</a>, <a href="http://blogs.kqed.org/newsfix/2013/05/08/income-disparities-along-bay-area-public-transit-routes/">KQED</a>, <a href="http://www.metafilter.com/127847/Mapping-transit-inequality">Metafilter</a>, and <a href="http://www.munidiaries.com/2013/05/07/transit-and-income-inequality/">MUNI Diaries</a>.
<br/>
<br/>
<a href="http://dangrover.github.io/sf-transit-inequality/">
<img src="http://files.dangrover.com/inequality-screenshot.png" alt="screenshot"/>
</a>
Tue, 07 May 2013 04:13:55 -0400http://dangrover.com/2013/05/07/inequality-and-mass-transit-in-the-bay-area.html
http://dangrover.com/2013/05/07/inequality-and-mass-transit-in-the-bay-area.htmlWhistling into a Tape Recorder<p><!--<img src="/images/taperecorder.jpg" alt="tape recorder" class="fr"/>-->
A friend of mine once told me a rumor about a famous film composer. According to rumor, their process consists of watching the rough cuts of the film, whistling into a pocket tape recorder, handing the tape to a team of orchestrators, and waiting for them to compose the actual score.</p>
<p>It's probably not true, of course, but it made me think of a lot of the kind of people I've run into lately at events looking for a "technical co-founder."</p>
<p>This isn't another post repeating the hackneyed truisms about ideas and execution. Ideas are easy. Execution isn't so bad. It is the transitional stage that is so hard.</p><p>There are a lot of names for this. There's <a href="http://en.wikipedia.org/wiki/Hofstadter's_law">Hofstadter's Law</a>. Merlin Mann calls it "<a href="http://5by5.tv/b2w/18">Just-a-button guy</a>." Ze Frank calls it &quot;<a href="http://www.zefrank.com/theshow/archives/2006/07/071106.html">brain crack</a>.&quot; Steve Yegge calls it &quot;<a href="http://steve-yegge.blogspot.com/2009/04/have-you-ever-legalized-marijuana.html">Shit's Easy Syndrome</a>.&quot;
</p>
<p>But no matter how you stack it, shit isn't easy. Once you've committed to an idea, if you keep pushing, you eventually fall off the precipice of <strong>think mode</strong> and land in <strong>do mode</strong>. It's not always obvious once you've stopped falling. And it doesn't matter how deeply something has been specced or how experienced the team is, it never ends up going how you thought it would.</p>
<p>There's a precise moment when a product is more reality than idea. It's not always when someone actually starts coding it; sometimes it can come after months of work or even days before shipping. It's an emotional tipping point where you stop procrastinating little decisions, stop thinking about what could be, and focus on what's actually going to be done for 1.0. It can feel painful, like pulling off a bandage. But once that point is reached, it's all downhill.</p>
<p>Anybody who makes anything &mdash; writers, musicians, architects &mdash; seems to develop a gut feeling for this and gets better at bringing about the transition with a minimum of fuss.</p>
<h5>CODE IS WHERE THE RUBBER MEETS THE ROAD</h5><p>In software companies, engineers are often (but not always) in a good position to develop a knack for this simply because the last chance to find out if an idea has been fully thought through is when someone sits down to code it. All sorts of questions start popping up. Did you really figure out all the edge cases? Did you forget to design a screen or two? When you put that one feature in at the last minute, did you really think about how it interacts with the other ones? Did you really think about whether people <em>want</em> this?</p><p>You can spend months planning and specifying but these kinds of problems always come up at the worst time. Sometimes they can be avoided early-on by sharp product managers and designers. Or by setting shorter milestones and using agile practices. But more often than not, code is where the rubber meets the road.</p><h5>EVERYTHING IS TECHNICAL</h5><p>This is why it irks me when people try to sort others into "technical" and "non-technical". Being technical isn't about technology, it's about technique. <a href="http://en.wikipedia.org/wiki/Techne">Techne</a>. Skill in <em>something</em>.</p><p>Shipping a software product requires skill in quite a few fields. So many that, at an early stage, you couldn't possibly employ a full-time specialist to perform each unless you have a lot of funding and a lot of patience. There are many types of engineering, many non-overlapping kinds of design, business/partnership development, marketing, press, support, writing, finance, legal, the list goes on.</p><p>So it would seem that if you're going to form a team to take on all of this, you should have people that are good at some of these things, and willing to try the rest until they get it right. Anything else can fall on hired help or advisors.</p><p>The pervasive idea that a founding team must have one person dedicated solely to engineering and one person for "everything else" is completely arbitrary and possibly dangerous. It's one that's been made into an archetype by people like Jobs and Wozniack, but isn't all that typical in the grand scheme of things.</p><p>The only situation where this possibly makes sense is if the "technical" person on the team is the neckbeardiest of the neckbeardy &ndash; the kind of person who shuns anything except for pure code. And those people belong in cubicles anyway.</p><p>The problem with this archetype is that once you accept it as a given, it becomes not just a divide in skills, but can be conflated into a divide between ideation and execution, thinking and doing, executive and worker, alpha and beta. And once that happens, you risk introducing all the inefficiencies of large companies into your two or three person team.</p>
<h5>HOW TO REALLY FORM A TEAM</h5>
<p>If, like me, you're pondering what kind of people you want to work with and what role you want to have in a team, it's probably best to forget the archetypes and just find collaborators who:</p><ol><li>Can do &mdash; that is, have definable, testable skills. </li><li>Can think.</li><li>Can switch back and forth between the two, hopefully quickly.</li></ol><p>It's vague, but it's a start. I'll try it out for a while and see what happens.</p>
Tue, 29 May 2012 21:57:40 -0400http://dangrover.com/2012/05/29/whistling-into-a-tape-recorder.html
http://dangrover.com/2012/05/29/whistling-into-a-tape-recorder.htmlEtude in Apple Store Promo<p>Apple's Valentines Day promos show Etude running on a white iPad 2!</p>
<p>It's also linked prominently <a href="http://www.apple.com/ipad/from-the-app-store/music.html">on the iPad site</a> under "From the App Store."</p>
<p>(via <a href="https://path.com/p/IHqkV">benglert</a>)</p>
Sat, 04 Feb 2012 03:13:55 -0500http://dangrover.com/2012/02/04/etude-in-apple-store-promo.html
http://dangrover.com/2012/02/04/etude-in-apple-store-promo.htmlEtude Acquired by Steinway & Sons<p><a href="http://etudeapp.com"><img src="http://files.dangrover.com/steinwayaq.jpg" alt="Etude Acquired by Steinway" style="border:#000 1px solid; float:right; width:300px; margin-left:20px;margin-bottom:20px;"/></a></p>
<p>I'm happy to announce that my iPad music learning startup Etude has been <a href="http://steinway.com/news/press-releases/steinway-sons-debuts-etude-20-ipad-app-for-learning-and-playing-piano/">acquired by Steinway &amp; Sons</a>.</p>
<p>When they approached me about the idea of working together, it seemed like an odd idea. What would a piano company in New York want with an iPad app?</p>
<p>It's not the usual acquisition story for a software business, but Steinway is more of a tech company than one might expect. They practically invented the modern piano and <a href="http://steinway.com/about/">have been patenting improvements</a> to it ever since. They're pretty much the Apple of the musical instrument world.</p>
<p>The main reason for acquiring Etude is that Steinway is thinking about how people will learn, perform, and create music in the digital era. Etude is another step in that direction, and I couldn't have wished for a better group of people to work with to continue the app's development.</p>
<p>Which brings me to my next announcement...</p>
<h5>INTRODUCING ETUDE 2.0</h5>
<p>I'm also announcing the second major release of Etude. It's the first "Steinway-ified" version of the app, but it's way more than a re-branding.</p>
<p>The biggest request from users was for more music. This update brings a brand new <a href="http://etudeapp.com/music">music store</a> with thousands of songs to learn, with everything from J.S. Bach to Justin Bieber (yes, it actually has the beibz).</p>
<p>Etude 2 also features a new way for beginners to see music and not to mention tons of little UI improvements that make everything much smoother.</p>
<p>Oh, and it's a free app now! So <a href="http://etudeapp.com/download">go get it from the App Store</a> or <a href="http://etudeapp.com">check out the site</a> to learn more.</p>
<h5>SHOUT-OUTS</h5>
<p>Etude 1.0 was a long, solo slog, but since coming to Steinway, I've been lucky to be able to bring in and work with with several very talented engineers and designers to build version 2.</p>
<p><a href="http://miazmatic.com/">Ben Englert</a> and Jon Toohill tackled the technical challenge of sanitizing, converting, and engraving music originally created in other formats. They also helped build the backend for the new store. Kevin Murphy helped with app UI and with QA, noticing bugs that only a cellist would. The incomparable <a href="http://31three.com/">Jesse Benett-Chamberlain</a> designed the new user interface, icon, and site.</p>
Sun, 11 Sep 2011 04:14:31 -0400http://dangrover.com/2011/09/11/etude-acquired-by-steinway-sons.html
http://dangrover.com/2011/09/11/etude-acquired-by-steinway-sons.html