tag:blogger.com,1999:blog-65545158605340693012024-03-18T02:48:09.411-07:00The Mobile SpoonExploring product leadership, user experience, development, and entrepreneurship.Gil Bouhnickhttp://www.blogger.com/profile/04778382332134032974noreply@blogger.comBlogger23125tag:blogger.com,1999:blog-6554515860534069301.post-17881030247506103432023-01-24T15:42:00.009-08:002023-04-14T06:19:50.525-07:00How to summarize any webpage using Siri and ChatGPT<div style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCrGZO1_cgrd03wI_6CszIgpFAU1DRCW6q3Gkscn65g41LzF22gMVif5Oab1yDUIizoZ-FbHZ1wdgOLRn6TZLftosW8TDhi-vsOyrRZaESBoUjOVLWHFLQvlxVZ_7pRGEkBvcVCJqPfiugOjEuwSlLIMuyMXwEml1s18xOh1p_pV9-oRKWRfq-1L17/s1536/Web%20Summarizer%20.jpg"><img alt="Smart Summarizer tool using ChatGPT - the mobile spoon" border="0" data-original-height="1024" data-original-width="1536" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCrGZO1_cgrd03wI_6CszIgpFAU1DRCW6q3Gkscn65g41LzF22gMVif5Oab1yDUIizoZ-FbHZ1wdgOLRn6TZLftosW8TDhi-vsOyrRZaESBoUjOVLWHFLQvlxVZ_7pRGEkBvcVCJqPfiugOjEuwSlLIMuyMXwEml1s18xOh1p_pV9-oRKWRfq-1L17/s16000/Web%20Summarizer%20.jpg" title="Smart Summarizer tool using ChatGPT - the mobile spoon" /></a></div><div style="text-align: left;"><br /></div><div style="text-align: left;">[<b>UPDATE</b>: as of <b>April 2023</b>, using the ChatGPT API requires a paid subscription. See instructions below]</div><h3 style="text-align: left;">TL; DR:</h3><p>OK listen up! This little shortcut is a game-changer!</p><p>It takes anything you have: a link, clipboard text, or sharing of a website and uses ChatGPT to provide different types of summaries according to your need! </p><p>So if you're looking for a way to summarize long web pages (or long text blocks) into short summaries or bullet lists - there's finally a shortcut for that.</p><p>The shortcut is really flexible and can help you in various scenarios so keep reading for more information about how to use it. </p><p><a href="https://www.icloud.com/shortcuts/5421c906380545f6a9e2e3333e763ec6" target="_blank">Install Smart Summarizer</a></p><p><br /></p><p>(Don't forget to place your API key in the right place đ)</p><p><br /></p><h3 style="text-align: left;">The long version + how to configure</h3><p>The shortcut scans the content of any given website and summarizes it using an opening, a list of bullets, and a closing section. </p><p>This shortcut can be used from any web page (from your iPhone or Mac) through the Share menu (you'll have to add it to your sharing options) or by copying the webpage URL to the clipboard and running the shortcut manually (using voice through Siri or with the Shortcuts app). </p><p>Once activated, the shortcut uses ChatGPT to learn the content and summarize it for you using ChatGPT. </p><p>Once the summary is created - it will appear on the screen and you'll be prompted with a few options (save the summary to the clipboard, save the summary as a note, or exit). </p><p><br /></p><h3 style="text-align: left;">How to setup </h3><p>First, copy your ChatGPT API key from <a href="https://beta.openai.com/account/api-keys" target="_blank">here</a>. </p><p>Then <a href="https://www.icloud.com/shortcuts/5421c906380545f6a9e2e3333e763ec6" target="_blank">download the Smart Summarizer shortcut</a> and add it to your shortcuts app. </p><p>Last, enter your API key in the designated placeholder: look for this string: "<YOUR API KEY>" and replace it with your key (don't keep the brackets). </p><p>The shortcut should look like this: </p><p><br /></p><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio1e-Fm7encK--fwmoMSJoMKw74K2Hl98IUDrpodQ0HdchQrvCYcsT9AyXATkMEl6_NK-qVtXTgA8o5geOn5eL5sxFWAuCqTpFCx4FKaQnglG51Us2jEa9X_vxeEsdPB6srST_QTA_8yQBPPXnvthlLZFKC413Jntz95R4G2geBKA8cjhE7eG1tTxV/s1191/smart%20summarizer.jpg" style="margin-left: auto; margin-right: auto;"><img alt="Smart Summarizer - use ChatGPT to summarize any website content - the mobile spoon" border="0" data-original-height="774" data-original-width="1191" height="416" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio1e-Fm7encK--fwmoMSJoMKw74K2Hl98IUDrpodQ0HdchQrvCYcsT9AyXATkMEl6_NK-qVtXTgA8o5geOn5eL5sxFWAuCqTpFCx4FKaQnglG51Us2jEa9X_vxeEsdPB6srST_QTA_8yQBPPXnvthlLZFKC413Jntz95R4G2geBKA8cjhE7eG1tTxV/w640-h416/smart%20summarizer.jpg" title="Smart Summarizer - use ChatGPT to summarize any website content - the mobile spoon" width="640" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">A portion of the shortcut (don't worry, that's not my real API key)</td></tr></tbody></table><br /><h3 style="text-align: left;">How to use the Smart Summarizer</h3><div>Smart Summarizer is more than a simple shortcut - it's a productivity tool that includes a few useful options to support different use cases and needs: </div><div><br /></div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdmJTLq9h-H7jy08TdK2aoLHQfzTGgdAJajJU44IdLeYs-F1__uUTBT7tSs11-iVKkmnaTYvOpFPSfeC9R44RFVEmW6vhRcI69DQyKfmdMiT3GFBQ6BURgQo3cmhGT2DOjSTo4S6tmqZZBxLtZzXpoldguKU8hqk1peKiB8xbkQ5-QaRMXU4Oyolx5/s553/smart%20summarizer.jpg" style="margin-left: auto; margin-right: auto;"><img alt="Smart Summarizer - select a summary type - the mobile spoon" border="0" data-original-height="553" data-original-width="473" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdmJTLq9h-H7jy08TdK2aoLHQfzTGgdAJajJU44IdLeYs-F1__uUTBT7tSs11-iVKkmnaTYvOpFPSfeC9R44RFVEmW6vhRcI69DQyKfmdMiT3GFBQ6BURgQo3cmhGT2DOjSTo4S6tmqZZBxLtZzXpoldguKU8hqk1peKiB8xbkQ5-QaRMXU4Oyolx5/w343-h400/smart%20summarizer.jpg" title="Smart Summarizer - select a summary type - the mobile spoon" width="343" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Smart Summarizer - select a summary type</td></tr></tbody></table><br /><div><br /></div><p></p><ol style="text-align: left;"><li>The tool can be invoked from different places: </li><ol><li>Through the share button (you'll have to find it in the options and add it to your favorites) </li><li>By copying a webpage's URL and then launching the shortcut </li><li>By copying a chunk of text and then launching the shortcut</li></ol><li>After scanning the text/website - the tool will ask you to select a summary type</li><li>Select a summary type: </li><ol><li>Tweet - will give you 10 different tweets summarizing the text/website you selected</li><li>Short Summary - will generate a short summary with a few bullets </li><li>10 questions - will generate up to 10 questions and answers based on the article </li><li>Key stats - this one is for scanning a long report and getting the key insights</li><li>Blog post - turn any article into a full complete post </li><li>Explain a word - this is mostly for none native English speakers who may run into an unfamiliar term. </li></ol><li>After selecting the summary type - the tool will call ChatGPT to write the summary </li><li>A summary popup will appear </li><li>You can then select one of the following options: </li><ol><li>Save the summary to the clipboard (and paste it somewhere else) </li><li>Save the summary in a new note</li></ol></ol><p></p><p><br /></p><h3 style="text-align: left;">Accessing the ChatGPT API via Paid Subscription</h3><p>As of April 2023, you need to pay to use the API. Without it, you'll probably get an error saying you exceeded your quota. </p><p>To subscribe, head over to <a href="https://platform.openai.com/account/billing/overview" target="_blank">this page</a> and enter your payment details. This will unlock </p><p><br /></p><p>That's it. </p><p>Who needs reading when you can inject the key takeaways straight into your brain, right? </p><p><br /></p><p>Before you drop off, check out my recent posts on all the AI craze that's going on: </p><p></p><ul style="text-align: left;"><li><a href="https://www.mobilespoon.net/2023/01/5-power-tools-to-get-most-out-of-chatgpt.html" target="_blank">Five power tools to get the most out of ChatGPT</a></li><li><a href="https://www.mobilespoon.net/2023/01/midjourney-the-guide.html" target="_blank">Create mesmerizing images with Midjourney</a></li><li><a href="https://www.mobilespoon.net/2023/01/how-to-activate-chatgpt-with-siri-and-save-response.html" target="_blank">Activate ChatGPT with Siri and save the response</a></li><li><a href="https://www.mobilespoon.net/2022/12/innovators-dilemma-2023-google-vs-bots.html" target="_blank">Understanding the Innovator's Dilemma in 2023: Google vs. the Bots</a></li></ul><p></p><p><br /></p><p>Join my occasional <a href="https://www.mobilespoon.net/p/newsletter.html" target="_blank">newsletter</a> and become 27% more awesome than average!</p><div class="blogger-post-footer">Continue reading at the mobile spoon...</div>Gil Bouhnickhttp://www.blogger.com/profile/04778382332134032974noreply@blogger.com8tag:blogger.com,1999:blog-6554515860534069301.post-71464929826892267132023-01-10T00:31:00.010-08:002023-04-14T06:21:13.010-07:00How to activate ChatGPT with Siri and save the response<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtRr7P5VRJN_NIr3HRA7zxcFRn5sZT-FqxTYZbIdttZRN1ndR8CdqaWUd1GQlKAwBaaSjiKmW996NHBO9MyL8qXqUON58g9M6an75OxbsAUiYW8Ebynl05ejcoKi-N9ZMGwIAquIQcD_bI17J7rcmc1VVEYA7OsodNusDltC2CHxETTXjbLHBdBNFQ/s1024/Siri+ChatGPT.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Activate ChatGPT with Siri - The Mobile Spoon" border="0" data-original-height="961" data-original-width="1024" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtRr7P5VRJN_NIr3HRA7zxcFRn5sZT-FqxTYZbIdttZRN1ndR8CdqaWUd1GQlKAwBaaSjiKmW996NHBO9MyL8qXqUON58g9M6an75OxbsAUiYW8Ebynl05ejcoKi-N9ZMGwIAquIQcD_bI17J7rcmc1VVEYA7OsodNusDltC2CHxETTXjbLHBdBNFQ/s16000/Siri+ChatGPT.jpg" title="Activate ChatGPT with Siri - The Mobile Spoon" /></a></div><p><br /></p><p>[<b>UPDATE</b>: as of <b>April 2023</b>, using the ChatGPT API requires a paid subscription. See instructions below]</p><p><br /></p><p>TL; DR:</p><p>Looking for a way to activate ChatGPT with Siri using voice commands? There's a shortcut for that. </p><p>Just ask Siri to run ChatGPT, ask your question using voice, get an answer, and store it as a note. </p><p><a href="https://www.icloud.com/shortcuts/c036293cd635462bb361529b7e8165be" target="_blank">Install Smart Siri</a></p><p>(Don't forget to place your API key in the right place đ)</p><p><br /></p><p></p><blockquote style="text-align: center;">Looking for a <a href="https://www.mobilespoon.net/2023/01/how-to-summarize-any-webpage-using-siri-chatgpt.html" target="_blank">Smart Website Summarizer</a>? It's right <a href="https://www.mobilespoon.net/2023/01/how-to-summarize-any-webpage-using-siri-chatgpt.html" target="_blank">here</a>.</blockquote><p></p><p><br /></p><h3 style="text-align: left;">The long version + how to configure</h3><p>I created this little shortcut (inspired by Fabian Heuwieser's <a href="https://medium.com/@FabianMH/how-to-use-chatgpt-on-your-apple-watch-and-iphone-9b6c7f86d7ba" target="_blank">post</a>) to <b>connect Siri to ChatGPT</b> so I can use it on the move with voice commands. </p><p>The shortcut does the following: </p><p></p><ol style="text-align: left;"><li>Prompts you to ask a question </li><li>Sends it to <a href="https://chat.openai.com/chat" target="_blank">ChatGPT</a></li><li>Reads the answer </li><li>Allows you to save the answer into a new Apple Note</li></ol><div>Perfect for using ChatGPT while on the move. </div><div><br /></div><div><br /></div><h3 style="text-align: left;">How to setup </h3><div><ol style="text-align: left;"><li>First, copy your ChatGPT API key from <a href="https://beta.openai.com/account/api-keys" target="_blank">here</a>. </li><li>Then <a href="https://www.icloud.com/shortcuts/c036293cd635462bb361529b7e8165be" target="_blank">download the shortcut</a> and add it to your shortcuts app. </li><li>Last, enter your API key in the designated placeholder (don't keep the brackets)</li></ol><div><br /></div><div>The shortcut should look like this (with your key in the text placeholder):</div></div><div><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlZ_m1z5Np_2NcNh7GalqYIN9c-hmTNE8u5QXpFaPOHif16Sbb5No7MCCHnMyj9d4ATT9mcwkPUlgtTUpJgjpnP6QwHsg5EcUf49zBD2xxLhQaG1tB3DYgybiZO5CjOl6wEEzzjpJYyfIW0fAJ0XNCS-GO6U-2k0cKCKVxY838Tql8MTY91RO9_kBO/s1165/Siri%20shortcut%20to%20run%20ChatGPT.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="How to use ChatGPT with Siri - The Mobile Spoon" border="0" data-original-height="879" data-original-width="1165" height="482" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlZ_m1z5Np_2NcNh7GalqYIN9c-hmTNE8u5QXpFaPOHif16Sbb5No7MCCHnMyj9d4ATT9mcwkPUlgtTUpJgjpnP6QwHsg5EcUf49zBD2xxLhQaG1tB3DYgybiZO5CjOl6wEEzzjpJYyfIW0fAJ0XNCS-GO6U-2k0cKCKVxY838Tql8MTY91RO9_kBO/w640-h482/Siri%20shortcut%20to%20run%20ChatGPT.jpg" title="How to use ChatGPT with Siri - The Mobile Spoon" width="640" /></a></div><br /><div><br /></div><div>The first part of the script triggers the text dictation. Then it sends the dictated text to the API function and gets back the response. The response is then read by Siri, followed by a question: "Save answer?" </div><div><br /></div><div>If you choose to save, the whole text block will be added to a new note. </div><div><br /></div><div><h3>Accessing the ChatGPT API via Paid Subscription</h3><p>As of April 2023, you need to pay to use the API. Without it, you'll probably get an error saying you exceeded your quota. </p><p>To subscribe, head over to <a href="https://platform.openai.com/account/billing/overview" target="_blank">this page</a> and enter your payment details. This will unlock </p></div><div><br /></div><div>That's it! </div><div><br /></div><div>Now you can talk to ChatGPT with the help of Siri đ.</div><div><br /></div><h3 style="text-align: left;">Do more with AI: </h3><div><ol style="text-align: left;"><li><a href="tools will boost your ChatGPT productivity in 2023" target="_blank">Tools that will boost your ChatGPT productivity</a></li><li><a href="https://www.mobilespoon.net/2023/01/5-power-tools-to-get-most-out-of-chatgpt.html" target="_blank">Five power tools to get the most out of ChatGPT</a></li><li><a href="https://www.mobilespoon.net/2023/01/midjourney-the-guide.html" target="_blank">Create mesmerizing images with Midjourney</a></li><li><a href="https://www.mobilespoon.net/2023/01/how-to-summarize-any-webpage-using-siri-chatgpt.html" target="_blank">Summarize anything (from a paragraph to a website) in seconds</a></li></ol><div><br /></div></div><h3 style="text-align: left;">More productivity boosters: </h3><div><ol style="text-align: left;"><li><a href="https://www.mobilespoon.net/2022/06/5-apps-i-use-every-day.html" target="_blank">5 Apps I use every day (and cannot live without)</a></li><li><a href="https://www.mobilespoon.net/2020/09/use-stepwise-refinement-for-strategic-planning.html" target="_blank">How to use the Stepwise Refinement technique for strategic planning</a></li><li><a href="https://www.mobilespoon.net/2020/01/5-hacks-consume-quality-content.html" target="_blank">5 productivity hacks to boost your self-learning skills</a></li></ol><div><br /></div></div><div>That's it for this one! </div><div><br /></div><div>Follow me on <a href="https://mobile.twitter.com/gilbouhnick" target="_blank">Twitter</a> or subscribe to my <a href="https://www.mobilespoon.net/p/newsletter.html" target="_blank">occasional newsletter</a> (I'm too busy to spam) and become 27% more awesome than average.</div><div><br /></div><p></p><div class="blogger-post-footer">Continue reading at the mobile spoon...</div>Gil Bouhnickhttp://www.blogger.com/profile/04778382332134032974noreply@blogger.com23tag:blogger.com,1999:blog-6554515860534069301.post-6014974825511990072020-06-23T15:31:00.001-07:002020-06-23T22:20:54.053-07:00Onboarding is dead, here comes "Noboarding"<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-gj5DD1OI-70/XvKA5tLhr6I/AAAAAAAAQkY/Nks2j5Bmu8QlHcO4w3co2HHq4c2kfgwSQCLcBGAsYHQ/s1600/onboarding%2Bis%2Bdead.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="User onboarding is dead - here comes No-Boarding. The Mobile Spoon" border="0" data-original-height="1068" data-original-width="1574" height="434" src="https://1.bp.blogspot.com/-gj5DD1OI-70/XvKA5tLhr6I/AAAAAAAAQkY/Nks2j5Bmu8QlHcO4w3co2HHq4c2kfgwSQCLcBGAsYHQ/s640/onboarding%2Bis%2Bdead.png" title="User onboarding is dead - here comes No-Boarding. The Mobile Spoon" width="640" /></a></div>
<br />
<br />
Let's talk about <a href="https://www.youtube.com/watch?v=IqP_iojZXxQ" target="_blank">App Clips</a> for a minute, and forgive me Android readers, I know you had <a href="https://www.androidcentral.com/8-things-ios-14-copied-android" target="_blank">Instant Apps</a> since 2018, but as product experts, entrepreneurs, or designers, surely you have to agree that Apple simply does it better with marketing, technology, developers, and users - all fall into the right part of the story.<br />
<br />
So watching iOS14 keynotes (and App Clips) got me thinking about the future of mobile apps.<br />
<br />
It also reminded me of the early days of our startup <a href="https://www.mobilespoon.net/2018/10/missbeez-hottest-startup-in-tel-aviv.html" target="_blank">Missbeez</a>, and how we used to describe our product as a simple "<b>magic button</b>".<br />
<br />
Whenever people asked us what does the product do, we used to say:<br />
<br />
<blockquote class="tr_bq" style="text-align: center;">
"It's just a button. You click on it, and someone comes in and gives you a massage". </blockquote>
<br />
Unfortunately, the reality was not that simple: users had to download our button from the App Store (or Google Play), go through a long onboarding process, provide their name, email, address, enter their credit card, and only then could they click the magic button.<br />
<br />
So much effort for such a tiny button.<br />
<br />
Now, let's go back to <a href="https://www.youtube.com/watch?v=IqP_iojZXxQ" target="_blank">App Clips</a> and what they mean for mobile apps:<br />
<br />
<h3>
In a nutshell: </h3>
App Clips are small parts of an app that are so small and light, they can be used instantly (that is, download + install + launch) without going through the usual installation process.<br />
<br />
Here's why I think it's much bigger than what it seems:<br />
<ol>
<li><b>No installation</b> - you know the horror stories about how hard it is for <a href="https://www.mobilespoon.net/2019/04/lessons-learned-app-store-screenshots.html" target="_blank">mobile apps to stand out</a>, how bad are the installation numbers, and how fast are apps being uninstalled. There are too many apps out there, and users are getting tired and lazy. Installing an app is a commitment. It might even take a few minutes. <br />Skipping straight to the action will make users very happy.</li>
<li><b>No onboarding - </b>conversion rate is the name of the game for mobile apps, and when you talk about conversion - you talk about onboarding challenges: <a href="https://www.mobilespoon.net/2020/03/when-friction-in-ux-becomes-good-thing.html" target="_blank">eliminating friction</a>, <a href="https://www.mobilespoon.net/2020/05/full-name-vs-first-last-name-to-split-or-not.html" target="_blank">minimizing steps</a>, shortening time to value, preventing drops-offs, etc. <br />If fewer steps mean fewer drop-offs, what about no steps at all?</li>
<li><b>Designed for speed</b> - <a href="https://www.mobilespoon.net/2019/03/7-unique-ingredients-mobile-app.html" target="_blank">Mobile users love short interactions</a>: you grab your smartphone, find the app you need, launch it, do something, itâs smart, itâs context-based, it's quick, and boom, youâre done. What if you could do the same thing without having to launch the app at all? <br />App Clips allow performing the action instantly.</li>
<li><b>Discoverability</b> - Finally, an alternative to the traditional App Store installation process. Still goes through Apple, but the experience is totally different.<br />
Users will be able to engage with App Clips through all kinds of <a href="https://www.mobilespoon.net/2018/11/4-reasons-why-mobile-ad-attribution.html" target="_blank">channels</a>: digital (websites, blogs, messages, other apps) or physical (NFC, App Clip Codes), allowing some back-door installations, initial footprint, and tons of opportunities for app creators. Yummy. </li>
</ol>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-j4Mfls3fXbg/XvKCJ-MuCHI/AAAAAAAAQkk/D4drQiysCqMNyXRRG7snpoTFjauwUTz9gCLcBGAsYHQ/s1600/app-clips-ios-14.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Apple's iOS 14 App Clip - the mobile spoon" border="0" data-original-height="400" data-original-width="676" height="378" src="https://1.bp.blogspot.com/-j4Mfls3fXbg/XvKCJ-MuCHI/AAAAAAAAQkk/D4drQiysCqMNyXRRG7snpoTFjauwUTz9gCLcBGAsYHQ/s640/app-clips-ios-14.jpg" title="Apple's iOS 14 App Clip - the mobile spoon" width="640" /></a></div>
<br />
<br />
Simply put, App Clips act and feel exactly like native iPhone features.<br />
<br />
That's Apple's brilliant plan to enrich the iPhone experience with just-in-time actions that are all developed by the world.<br />
<blockquote class="tr_bq" style="text-align: center;">
Apple just turned all apps into iOS features (kind of). </blockquote>
That's brilliant...<br />
And sick...<br />
<br />
<br />
But now, let's talk about the bigger picture:<br />
<br />
<br />
<h3>
<b>From Onboarding to "Noboarding"</b></h3>
For the past 12 years, no matter how narrowed your mobile app functionality was - the rules of the game were that it must be <a href="https://www.mobilespoon.net/2019/04/lessons-learned-app-store-screenshots.html" target="_blank">discovered and installed through the App Store</a>, it must provide a decent onboarding experience, follow some sign-up best practices, manage users and <a href="https://www.mobilespoon.net/2019/09/10-lessons-learned-payment-through-our.html" target="_blank">payments</a>, etc.<br />
<br />
The onboarding part could make or break those products, forcing <span style="text-align: center;">developers to spend more effort on optimizing the onboarding than improving their core functionality. </span><br />
<br />
But what if there was a way to dump <b>onboarding</b>?<br />
What if there was a <b>noboarding</b> experience?<br />
<br />
An experience that would be completely frictionless, easy like clicking a link, but powerful like sophisticated native apps.<br />
<br />
When <b>noboarding</b> takes place, <b>users</b> are not committing to <b>anything</b>, and in return, they <b>instantly </b>get <b>everything </b>they needed.<br />
<br />
In a <b>noboarding</b> world, <b>developers</b> are liberated from the endless struggle to fix their onboarding, but in exchange, they have to pay commissions to the all-mighty ruler: the landlord that takes care of the seamless authentication, the context, the payments, etc.<br />
<div>
<br /></div>
<div>
And that's what just happened with App Clips.</div>
<div>
<br /></div>
<div>
<br /></div>
<h3>
What's next? </h3>
<div>
So now that apps are all small subsidiaries (or plugins) of the parent operating system, why not take it to the next level? </div>
<div>
<br /></div>
<div>
<b>Interconnectivity</b> between apps is currently being done by <b>sharing</b> content from one app to another. </div>
<div>
Shares are nice but are pretty limited, and they still require full app installation in advance. </div>
<div>
<br /></div>
<div>
Why not using App Clips to integrate apps into combined services?</div>
<div>
<br /></div>
<div>
User does something with App A, it activates an App Clip performed by App B, while the user stays within the context of App A.</div>
<div>
<br /></div>
<div>
In such a world, users will not have to install so many apps and still enjoy all the services they need using the noboarding approach. </div>
<div>
<br /></div>
<div>
Developers, on the other hand, will be able to develop "buttons" instead of apps, focusing on delivering core value, rather than struggling with funnels and discoverability challenges. </div>
<div>
<br /></div>
<div>
Of course, there are some open questions such as who owns the data, how to deal with data privacy, how to extend the app footprint, and how can Apple increase profit out of it.</div>
<div>
<br /></div>
<div>
I'm sure they already figured that one out... </div>
<br />
<br />
Let me know what you think, or if you're too lazy right now, sign up to my <a href="https://www.mobilespoon.net/p/newsletter.html" target="_blank">newsletter</a> (noboarding guaranteed) and receive my occasional blurbs <a href="https://www.mobilespoon.net/p/newsletter.html" target="_blank">directly to your inbox</a>. We can chat later...<br />
<br />
<br />
<br />
<br /><div class="blogger-post-footer">Continue reading at the mobile spoon...</div>Gil Bouhnickhttp://www.blogger.com/profile/04778382332134032974noreply@blogger.com2tag:blogger.com,1999:blog-6554515860534069301.post-7622969622887366842019-12-29T14:26:00.000-08:002019-12-29T14:26:52.163-08:00Mobile UX design trends to watch out for in 2020<div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-xVy63Wmj2RU/XgklefKq64I/AAAAAAAAQM0/dXlKOcp0pnwNlC2EcDXTva-gUMVStfMGgCLcBGAsYHQ/s1600/mobile%2Bdesign%2Btrends.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Mobile UX design trends to watch out for in 2020 - the mobile spoon" border="0" data-original-height="1097" data-original-width="1600" height="438" src="https://1.bp.blogspot.com/-xVy63Wmj2RU/XgklefKq64I/AAAAAAAAQM0/dXlKOcp0pnwNlC2EcDXTva-gUMVStfMGgCLcBGAsYHQ/s640/mobile%2Bdesign%2Btrends.png" title="Mobile UX design trends to watch out for in 2020 - the mobile spoon" width="640" /></a></div>
</div>
<div>
</div>
<div>
It has been over a year since my post about <a href="https://www.mobilespoon.net/2018/12/design-trends-2018-influence-mobile.html" target="_blank" title="mobile design trends to watch out for in 2019">mobile design trends to watch out for in 2019</a>. </div>
<div>
Reading back this post from December 2018, it seems that not much has changed, and many of the trends are still happening: chromeless designs, gestures, gradients, deep flat, big bold fonts, and more, they are still here and will remain dominant during 2020. </div>
<div>
<br />
<br /></div>
<div>
Hereâs a closer look at some new mobile trends that will continue to grow in 2020: </div>
<div>
</div>
<div>
</div>
<h2>
1. Dark mode </h2>
<div>
Yep, I know that's old news already, but you know what they say: "once apple decides to go black, no one can go back...". With the release of <a href="https://www.mobilespoon.net/2019/08/10-usability-enhancements-in-ios-13.html" target="_blank" title="10 usability improvements in iOS 13">iOS13</a>, dark mode has become built-in in every mobile app running on Apple devices.<br />
<br />
This is, of course, not just an Apple thing, as Android and Windows also support this mode, but Apple has its' way of pushing such initiatives really fast, with devices that are almost immediately up-to-date with the latest OS version and a developers community that is very disciplined and following Apple's guidelines.<br />
<br />
</div>
<div>
Personally speaking, Iâm not a huge fan of this mode, mainly because most apps are currently using <b>pure black and white</b> colors that are awful bad for the eyes and causing eye strain.</div>
<div>
<br />
The rule is simple:<br />
<blockquote class="tr_bq" style="text-align: center;">
Don't use pure black on a pure white background.</blockquote>
(Check out my guide: <a href="https://www.mobilespoon.net/2018/11/ux-writing-comprehensive-guide-for.html" target="_blank" title="UX writing and designing text in products">designing text in products</a>)<br />
Most designers know this (just check out most of the websites or apps and you will realize the black is usually a dark gray), but for some reason, too many app developers neglected the opposite rule, which applies for designing dark modes:<br />
<blockquote class="tr_bq" style="text-align: center;">
Don't use pure black as your dark mode background. </blockquote>
<br />
Unfortunately, many apps are using pure black as a background, causing overstimulation.<br />
<br />
</div>
<div>
Looking forward to 2020, I'm pretty sure this will be solved.<br />
I believe we will see app designers gradually optimizing their dark mode designs, adding some creativity to it, but also making it easier on the eyes.<br />
<br /></div>
<div>
Some companies (such as <a href="https://www.notion.so/" target="_blank" title="Notion productivity product">Notion</a> and <a href="https://slack.com/intl/en-il/" target="_blank" title="Slack">Slack</a>) are doing it already: </div>
<div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img alt="Vibrant colors on pure black are overstimulating for the eyes. Use dark gray instead. " height="681" src="https://lh6.googleusercontent.com/VSrkEiJUBKcuFcjQe-GaXddrf48XCLgiDi4qsojGFeN484TEAF1NNms6zeM" style="display: block; margin-left: auto; margin-right: auto;" title="Vibrant colors on pure black are overstimulating for the eyes. Use dark gray instead. " width="750" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Vibrant colors on pure black are overstimulating for the eyes. Use dark gray instead. </td></tr>
</tbody></table>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<h2>
2. Giant phones are the new standard</h2>
<div>
A year ago giant smartphones were still a â<a href="https://www.mobilespoon.net/2018/12/design-trends-2018-influence-mobile.html" target="_blank" title="Mobile design trends">trend</a>â, but now they're the standard:<br />
<br />
<ul>
<li>In October 2018, <a href="https://www.mobilespoon.net/2018/11/what-size-should-your-iphone-app-be.html" target="_blank" title="How many users are using large iPhone XS Max">only 16.3%</a> of Missbeez mobile <a href="https://www.mobilespoon.net/2018/10/missbeez-hottest-startup-in-tel-aviv.html" target="_blank" title="Hottest startup in Tel-Aviv">on-demand app</a> users were using large iPhone models (X/XS/XR, etc.). </li>
<li>Itâs now December 2019, and this number is 41%, and growing on a monthly basis.</li>
</ul>
</div>
<div>
This allows developers to double and triple the content of their apps without creating clutter or compromising on whitespaces.</div>
<div>
<br />
<br /></div>
<div>
</div>
<h2>
3. Diversifiable design</h2>
<div>
Big phones provide larger screens which make it possible to combine multiple view types in one screen without creating a mess: shortcuts, stories, photo carousels, tab-bars, thereâs room for a combination of them due to growing screen real-estate.</div>
<div>
</div>
<div>
Hereâs a perfect example by Yelp: </div>
<div>
</div>
<div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img alt="Mobile UI trends to watch out for in 2020 - the mobile spoon" height="501" src="https://lh4.googleusercontent.com/tOeFYakRDb_w0fFN55Zerp5DpmnFb4rX4ye4Mps1i3SbWhidVBFkdLL-C_I" style="display: block; margin-left: auto; margin-right: auto;" title="Mobile UI trends to watch out for in 2020 - the mobile spoon" width="750" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-size: small; text-align: start;">Larger phones make it possible to combine multiple view types in one screen without creating a mess</span></td></tr>
</tbody></table>
</div>
<div>
</div>
<div>
</div>
<h2>
4. The branding is gone, but the brand remains </h2>
<div>
I mentioned this one <a href="https://www.mobilespoon.net/2018/12/design-trends-2018-influence-mobile.html" target="_blank">last year</a> and the trend of hiding brand-related elements such as colors, icons and logos continued in 2019 and will probably continue in 2020.<br />
<br /></div>
<div>
The last app to go through a major facelift was <a href="https://sparkmailapp.com/" target="_blank">Spark</a>, which used to be all blueish and built out of frames and borders, and was just recently redesigned to be all white and clean, just like most of the leading apps. </div>
<div>
</div>
<div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img alt="No more brand colors and images - it's all about content." height="465" src="https://lh4.googleusercontent.com/U8-vvxK4lMhv76_XkIFZJIQ2oPt8crM34F7Kc1h3OQqzHG1HoHIZEpJR0cs" style="display: block; margin-left: auto; margin-right: auto;" title="No more brand colors and images - it's all about content." width="750" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;">No more brand colors and images - it's all about content.</td></tr>
</tbody></table>
</div>
<div>
</div>
<div>
<br />
So companies continue to get rid of unneeded colors and visuals, to free up space for more content, but more importantly - make it easier for the users to concentrate, and focus on whatâs really important. </div>
<div>
<br />
<br />
Before you continue - check out the following:<br />
<br />
<ul>
<li><a href="https://www.mobilespoon.net/2019/08/visually-distorted-when-ui-looks-all.html" target="_blank">Visually distorted - when symmetrical UI looks all wrong</a></li>
<li><a href="https://www.mobilespoon.net/2019/04/collection-cognitive-biases-how-to-use.html" target="_blank">84 cognitive biases that will help you design better-converting products - part 1</a></li>
<li><a href="https://www.mobilespoon.net/2019/10/cognitive-biases-design-better-products-part2.html" target="_blank">84 cognitive biases that will help you design better-converting products - part 2</a></li>
</ul>
</div>
<div>
<br />
<br /></div>
<div>
<h2>
5. Navigation controls go all the way to the bottom: </h2>
As devices are getting bigger, it's becoming impossible to reach the upper areas of smartphones.<br />
<br />
UI elements that were historically placed at the top of the screen, are no longer accessible, which leads to some new navigation alternatives.<br />
<br />
Here are a few examples of navigation elements that are located at the bottom:<br />
<ul>
<li>Pocket's hamburger menu is now located at the bottom left corner</li>
<li>Feedlyâs side menu comes up from the tabs bar </li>
<li><a href="https://www.mobilespoon.net/2018/11/how-i-became-superhuman-review-1-week.html" target="_blank" title="Superhuman email review - the mobile spoon">Superhuman</a>âs action sheet come up from the bottom area of the screen</li>
<li>Uberâs swipe-up cards are activated with a swipe gesture</li>
</ul>
<img alt="bottom-up navigation controls - the mobile spoon" height="405" src="https://lh6.googleusercontent.com/ImKNYcAVTwiB_6QA5mJYcDHMWKSZtPVCJ3sSMtTH5XpQQkgL9lIRaeA0FEU" style="display: block; margin-left: auto; margin-right: auto;" title="bottom-up navigation controls - the mobile spoon" width="750" /><br />
<div>
<br /></div>
<div>
Still not impressed? Check out some more examples below: </div>
<ul>
<li>IMDb now places the search bar at the bottom of the screen.</li>
<li>Microsoft To-Do has a rich entry taskbar, which is located on top of the keyboard and allows adding task details without stretching any finger.</li>
<li>Clash Royaleâs new info cards are designed bottom-up. Check out my beloved Bandit and Witch. </li>
</ul>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img alt="Search bar, quick entry bar, and information cards - are all placed in the bottom of the screen now" height="405" src="https://lh4.googleusercontent.com/2S6o02PUoVhCp5RV8Cs0Ga8hseKgtXBQn27YTTyG79rmM4bJQ7BUEqGHJZI" style="display: block; margin-left: auto; margin-right: auto;" title="Search bar, quick entry bar, and information cards - are all placed in the bottom of the screen now" width="750" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Where did that search bar go? </td></tr>
</tbody></table>
<br />
<br />
<h2>
6. Stories are becoming a design pattern </h2>
Stories have become so popular in social media, it was only a matter of time until we see other apps borrowing story-style UI concepts and implementing them in new creative ways.<br />
<br />
Here are 2 examples I really like, by <a href="https://zest.is/" target="_blank" title="zest.is">zest</a> and <a href="https://www.shazam.com/" target="_blank" title="Shazam">Shazam</a>;<br />
<br />
<img alt="Story-style UI in mobile apps - the mobile spoon" height="534" src="https://lh6.googleusercontent.com/cgAu7lIlZFZ28vtnpROJn-Ws9MsvZbKYb9Es-qYpG2iVcoPLTpscL8jXdbE" style="display: block; margin-left: auto; margin-right: auto;" title="Story-style UI in mobile apps - the mobile spoon" width="750" /><br />
<br />
The Zest app uses a paging indication placed on top, to improve clarity and orientation of the users while they contribute content (a few steps process).<br />
<br />
With Shazam, you can now view a collection of short clips by your favorite artists.<br />
This UI allows you to quickly jump between short video snippets by tapping on the left or right areas of the screen. No accuracy required while you concentrate on the songs.<br />
<br />
This is a good example of <a href="https://www.mobilespoon.net/2019/03/7-unique-ingredients-mobile-app.html" target="_blank" title="Designing a true mobile user experience - 7 rules for success">a great mobile experience</a>: the design makes good usage of the screen, the navigation indication is placed on top (out of reach, but very clear as it should be), and the navigation is done by tapping the sides of the screen and doesnât require any accuracy at all, not to mention the option to swipe left/right, up/down for more options.<br />
<br />
Itâs perfect.<br />
<br />
Hereâs a more generic example of this approach:<br />
<br />
<img height="497" src="https://lh5.googleusercontent.com/KD0glwqQrly0cDIKVVus2bGrcE6WxpAwlTjLdqMHIEVxMZ43jFMvIRSoTvY" style="display: block; margin-left: auto; margin-right: auto;" width="750" /><br />
<br />
<br />
<h2>
7. Is that skeuomorphism in your pocket or are you just happy to see me? </h2>
It used to be a big one until 2012/2013, but when the world got flat we lost any signs of depth or shadows.<br />
<br />
Last year I wrote about the comeback of the gradients and shadows - also known as <a href="https://www.mobilespoon.net/2018/12/design-trends-2018-influence-mobile.html" target="_blank" title="Flat UI 2.0, or: Deep Flat">Flat UI 2.0, or: Deep Flat</a>.<br />
<br />
In 2020 we will see some more of this trend: more shadows, more 3D, more depth and even a bit of... (drums...) ... skeuomorphism. đł<br />
<br />
Donât believe me?<br />
Check out <a href="https://www.mobilespoon.net/2019/08/10-usability-enhancements-in-ios-13.html" target="_blank" title="these examples taken from iOS 13">these examples taken from iOS 13</a>:<br />
<br />
<img height="550" src="https://lh5.googleusercontent.com/YuZq6icPj9VskQUMnUQskICWgS6v-X7I11x6-XBfbr-K0J7GyFYouWuJqkY" style="display: block; margin-left: auto; margin-right: auto;" width="638" /><br />
<br />
<br />
<br />
Thatâs it for this round, 2020 is here and mobile will continue to lead the design world with more innovation, amazing usability, and great experience.<br />
<br />
Before you leave, check out the following roundups summarizing some of the best posts by the mobile spoon:<br />
<br />
<ul>
<li><a href="https://www.mobilespoon.net/2019/12/design-great-products-best.html" target="_blank" title="How to design great products - the best of the mobile spoon">How to design great products - the best of the mobile spoon</a></li>
<li><a href="https://www.mobilespoon.net/2019/12/be-better-product-manager.html" target="_blank" title="How to become a better product manager - the best of the mobile spoon">How to become a better product manager - the best of the mobile spoon</a></li>
<li><a href="https://www.mobilespoon.net/2019/12/successful-entrepreneurs-share-their.html" target="_blank" title="10 successful product leaders share their tips for creating successful products in 2020">10 successful product leaders share their tips for creating successful products in 2020</a></li>
</ul>
<br />
<br />
Don't forget to subscribe to the <a href="https://www.mobilespoon.net/p/newsletter.html" target="_blank">newsletter</a> and become 23% more awesome than average!<br />
<br />
<div>
</div>
</div>
<div class="blogger-post-footer">Continue reading at the mobile spoon...</div>Gil Bouhnickhttp://www.blogger.com/profile/04778382332134032974noreply@blogger.com0tag:blogger.com,1999:blog-6554515860534069301.post-18391646021090042882019-03-10T15:51:00.002-07:002020-08-15T06:07:03.230-07:00Designing a true mobile user experience - 7 rules for success<div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-oPkek0ytaeo/XepObIHMxYI/AAAAAAAAQHU/qYWo9FlOPuwAgRp0sY471bVGELs8p1RpACLcBGAsYHQ/s1600/mobile%2Buser%2Bexperience%2B.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Designing a true mobile user experience - 7 rules for success" border="0" data-original-height="1084" data-original-width="1558" height="444" src="https://1.bp.blogspot.com/-oPkek0ytaeo/XepObIHMxYI/AAAAAAAAQHU/qYWo9FlOPuwAgRp0sY471bVGELs8p1RpACLcBGAsYHQ/s640/mobile%2Buser%2Bexperience%2B.png" title="Designing a true mobile user experience - 7 rules for success" width="640" /></a></div>
</div>
<div>
</div>
<div>
<br />
<br />
Mobile apps have been around for over a decade and even though it feels they are becoming a commodity - mobile products are still different than web or desktop products in many aspects. </div>
<div>
</div>
<div>
<br />
In this post, I would like to share my thoughts about mobile design and development, based on over 15 years of experience in this field.<br />
<br />
This post will discuss the essence of designing a mobile user experience: UI, UX, and user scenes, which are all different for mobile when compared to desktop applications.<br />
<br />
Let's dive in: </div>
<div>
<br /></div>
<div>
</div>
<h2>
1. Make graphic design a priority</h2>
<div>
</div>
<div>
Itâs a war zone out there, with millions of apps competing with each other for the attention of users.<br />
People have higher standards nowadays, especially iPhone and high-end Android owners.<br />
<br />
Your users treat their smartphones as a piece of jewelry with that gorgeous <a href="http://www.mobilespoon.net/2018/11/what-size-should-your-iphone-app-be.html" target="_blank" title="giant screen and slick edges">giant screen and slick edges</a>, and they wonât let any app come-in and ruin that perfect look.<br />
<br />
<blockquote class="tr_bq">
Nobody cares about your tech. Make it look gorgeous.</blockquote>
<br />
If an app doesnât deliver a slick, beautiful, VIP experience - the users will quickly find other alternatives pretty easily.<br />
<br /></div>
<blockquote>
<div>
Smartphones are the most personal and precious jewel we own, and apps must play along.</div>
</blockquote>
<div>
<br />
In fact, without an amazing design, your app might not pass the first gateway, which is the AppStore âInstallâ button, as most people briefly scan the first <a href="https://medium.freecodecamp.org/ux-best-practices-how-to-design-scannable-app-screenshots-89e370bf433e" target="_blank" title="Users scan App Store screenshots before they download">2-3 screenshots before they make a decision whether to install the app</a> or not.<br />
<br />
In such a short and shallow attention span - apps must look attractive in order to survive. This also means that the <a href="https://www.blog.udonis.co/complete-guide-to-app-store-optimization" target="_blank">AppStore page optimization</a> must be a priority from day one. Here's a short post I wrote about <a href="https://www.mobilespoon.net/2019/09/10-lessons-learned-payment-through-our.html" target="_blank">how we redesigned our app store product page and improved our insall rate</a>. </div>
<div>
<br />
If youâre working on a new app and think you can begin with a basic design and improve the UI on a later stage - I would advise you to try the other way around: </div>
<ul>
<li>Work with a professional designer whenever possible.</li>
<li>Create an engaging and consistent look and feel.</li>
<li>Make sure your developers are able to deliver a pixel perfect UI (no extra borders, no color inaccuracies, no size changes).</li>
<li>Every UI element can break your design, including text elements.</li>
<li>Make sure to follow these <a href="http://www.mobilespoon.net/2018/11/ux-writing-comprehensive-guide-for.html" target="_blank" title="The most comprehensive guide for UX writing and text design in mobile apps">40 rules for writing and designing text in your mobile apps</a>.</li>
</ul>
<div>
<br /></div>
<div>
</div>
<div>
</div>
<div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img alt="Cosmetic changes such as light shadows, fewer borders and rounded edges can completely change your app design" height="462" src="https://lh3.googleusercontent.com/-BEUQoUMUR7U/XIb1slt_XgI/AAAAAAAAPk4/e1k47578F2c9LdWOHcJElu5xHjom8mh2wCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="Cosmetic changes such as light shadows, fewer borders and rounded edges can completely change your app design" width="700" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The power of some cosmetic changes: rounded edges, light shadows, fewer borders, and the result feels completely different</td></tr>
</tbody></table>
</div>
<div style="text-align: left;">
</div>
<div style="text-align: left;">
</div>
<br />
<br />
<h2>
2. Forget everything you know about desktop apps </h2>
<div>
You're on an island now, all alone with your smartphone.<br />
<br />
Thereâs no keyboard around, no table, no mouse, no trackpad, no large screens, only your smartphone, your thumb, and a shitty network.<br />
<br />
Forget about writing personas and instead, focus on the <b>scenes</b>.<br />
Where will your app be used? When? What would distract the users and what would their expectations be?<br />
<br />
Forget about menus, mouse hovering, keyboard shortcuts, tutorials, and instead - focus on creating simple navigation models, minimizing steps, and creating truly brilliant workflows.<br />
<br />
Oh, and a friendly tip if I may: donât let anyone (and I mean: anyone) in your team use an emulator, simply because none of your users will ever run your app on one.<br />
<br /></div>
<div>
</div>
<div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img alt="Do yourself a big favor. Don't ever use emulators." height="469" src="https://lh3.googleusercontent.com/-2RM9n94M4k8/XIeTjHWkIrI/AAAAAAAAPlQ/BdCVbW_yQeUYKYxcCtJnGi4oLUDl2278QCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="Do yourself a big favor. Don't ever use emulators." width="700" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;">None of your users will ever use your app on an emulator, so why should you?</td></tr>
</tbody></table>
<br /></div>
<div>
<br />
[<a href="http://www.mobilespoon.net/2019/02/10-product-principles-give-full.html" target="_blank" title="Read: 10 product and development tips for creating a flexible and configurable mobile app">Read: 10 product and development tips for creating a flexible and configurable mobile app</a>]<br />
<br />
<br /></div>
<div>
</div>
<h2>
3. Demonstrate the value of your product instantly </h2>
Meet your new users: they are impatient, suspicious, shameless and emotionless bastards; they don't have time for you, they are <a href="https://www.webmarketingpros.com/95-of-consumers-have-mobile-devices-in-hand-while-watching-tv/" target="_blank">watching TV while exploring your app</a>, they don't trust you, they probably don't like you.<br />
<div>
<br />
Assuming you passed the <b>design</b> test, your next challenge is to convey a strong message and demonstrate the value of your product before the users lose their patience or get distracted. You probably have a <a href="https://asostack.com/why-7-seconds-could-make-or-break-your-mobile-app-f41000fb2a17" target="_blank" title="7 seconds will make or break you mobile app">few seconds</a> to attract those new users until they kill your app (in disgust) and uninstall it. </div>
<blockquote>
<div>
In the past, the goal was to tell the users how valuable the product is. Now, users want to see and feel it first. </div>
</blockquote>
It's a term known as <a href="https://www.mobilespoon.net/2020/07/product-led-growth-guide-product-managers.html" target="_blank">TTV</a> (time to value) and you can read more about it in my <a href="https://www.mobilespoon.net/2020/07/product-led-growth-guide-product-managers.html" target="_blank">pocket guide for product-led growth</a>. <div><br />
<div>
</div>
Here's what I think you should do:<br />
<ul>
<li>Spend the first 7 seconds on creating interest with a <b>compelling message</b> and a <b>strong opening</b>.</li>
<li>Spend the next 30-40 seconds on bringing the users to a point where they actually feel the value of the product (with real content and real actions). </li>
<li><a href="https://www.mobilespoon.net/2019/04/collection-cognitive-biases-how-to-use.html" target="_blank">Build trust by exploiting cognitive biases</a> (but don't do it in an <a href="https://www.mobilespoon.net/2019/06/20-dark-patterns-to-avoid-in-products.html" target="_blank">evil way</a>)</li>
<li>Avoid empty states (no one sticks around with an empty feedâŚ).</li>
<li>Turn empty states into fun experiences.</li>
<li>Use <a href="https://www.mobilespoon.net/2019/04/collection-cognitive-biases-how-to-use.html" target="_blank">social proof techniques</a> to eliminate <a href="https://www.mobilespoon.net/2020/03/when-friction-in-ux-becomes-good-thing.html" target="_blank">friction</a>.</li>
<li>If your onboarding process is long, consider a trial mode before asking the users to register.</li>
<li>Eliminate user anxiety by sharpening your microcopy.</li>
</ul>
<div>
At the end of the first session, you need to make sure your first-time users are exactly where you need them to be. Check out <a href="https://www.mobilespoon.net/2019/04/collection-cognitive-biases-how-to-use.html" target="_blank">these tips for using cognitive biases to improve conversion rates</a> for more help on this topic.</div>
<div>
<br />
<br /></div>
<div>
</div>
<div>
</div>
<div>
<h2>
4. Design for short interactions: </h2>
Mobile users expect to get things done in just a few taps (except when <a href="https://www.pcmag.com/news/364244/who-uses-their-phone-on-the-toilet-most-of-us" target="_blank" title="mobile users are using smartphones in the toilets">theyâre in the toilets</a>, maybeâŚ).<br />
In order to support short interactions, your mobile app has to be smarter than any web or desktop app youâve ever developed.<br />
<ol>
<li>Make it unbelievably fast. <a href="https://uxplanet.org/what-users-hate-most-about-your-app-according-to-google-c4a089ddfafa" target="_blank" title="The biggest thing mobile users hate is slow loading time">The biggest thing mobile users hate is the slow loading time</a>.</li>
<li>Keep it short: <a href="http://www.mobilespoon.net/2018/11/ux-writing-comprehensive-guide-for.html" target="_blank" title="cut your sentences in half - mobile ux writing">cut your sentences in half</a>, and then remove all the redundant words. </li>
<li>Make sure to get rid of redundant clicks (taps).</li>
<li>Pop-ups are almost unforgivable in mobile. Clean them up as much as possible. </li>
<li>Remove unneeded UI decorators (borders, separators) and keep the UI clean and clear.</li>
<li>Limit the number of action buttons per screen to 1 (no more than 3 if you have to). </li>
<li>Keep the main CTA button big and easy to access even when on the move. </li>
<li>Smartphones are <a href="http://www.mobilespoon.net/2018/11/what-size-should-your-iphone-app-be.html" target="_blank" title="iPhones are now big">giants</a>. Place key UI elements at the <a href="http://www.mobilespoon.net/2018/12/design-trends-2018-influence-mobile.html" target="_blank" title="Mobile trends to watch out for in 2019">bottom of the screen</a> so they are accessible even with one hand.</li>
<li>Use hardware and device APIâs to retrieve the context automatically (location, heading direction, time, activity) and save user taps. </li>
<li>Load the data efficiently (consider background loading, paging, batch calls) to prevent delays.</li>
<li>Minimize typing by using <a href="http://www.mobilespoon.net/2018/12/10-usability-rules-keyboard-mobile-app.html" target="_blank" title="smart defaults and historical data">smart defaults and historical data</a> auto-fill.</li>
<li>If typing is required - <a href="http://www.mobilespoon.net/2018/12/10-usability-rules-keyboard-mobile-app.html" target="_blank" title="how to use keyboard in your mobile app">do it in a friendly way</a>âŚ</li>
<li>Make navigating from one place to another simple and quick</li>
<li>Store user preferences and frequent selections to make it easy for them to repeat their habits in 1-2 taps.</li>
<li>Use <a href="https://firstround.com/review/the-new-must-haves-for-mobile-apps-to-succeed-today/" target="_blank" title="mobile apps design - shortcuts">smart shortcuts</a> to help users achieve more with your app while pushing then towards better conversion rates.</li>
</ol>
</div>
<div>
</div>
<div>
</div>
<div>
At the end of the day, when your users pull their phones out of their pockets and launch your app while they are rushing to the bus stop, it needs to load instantly, present the right context, and allow them to get things done efficiently with one hand and 20% attention.<br />
<br /></div>
<div>
</div>
<div>
</div>
<div>
</div>
<div style="text-align: center;">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img alt="When you park your car, grab your stuff and start walking - you need that parking app to instantly detect your location and save the manual typing." height="473" src="https://lh3.googleusercontent.com/-0NZBYiunXUE/XIeTkBvN5aI/AAAAAAAAPlU/7ylb7Ieiv_kPMaFQB3Va8FTi_fzohh-KwCHMYCw/s5000/%255BUNSET%255D" style="margin-left: auto; margin-right: auto;" title="When you park your car, grab your stuff and start walking - you need that parking app to instantly detect your location and save the manual typing." width="700" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;">When you park your car, grab your stuff, and start walking - you need that parking app to instantly detect your location and save the manual typing. </td></tr>
</tbody></table>
<div style="text-align: left;">
<br /></div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
[<a href="http://www.mobilespoon.net/2018/12/10-usability-rules-keyboard-mobile-app.html" target="_blank" title="Read: 10 design tips to handle the on-screen keyboard without messing up your mobile app usability">Read: 10 design tips to handle the on-screen keyboard without messing up your mobile app usability</a>]<br />
<br />
<br /></div>
<div>
</div>
<div>
</div>
<div>
<h2>
5. Provide a multi-sensory experience</h2>
In mobile, unlike laptops and desktops, every app is a small kingdom. It has a character, a voice, a color.<br />
It needs to create a unique atmosphere - the kind of atmosphere you feel when you enter a boutique.<br />
To achieve it, the software should unite with the hardware to create a perfect synergy. Every action is an opportunity to create a delightful moment.<br />
<blockquote>
Amazing design, presented on a marvelous screen, combined with swipes, motion and animations, short sounds and haptic pulses. </blockquote>
This is my idea of a perfect mobile experience. It involves great attention to details, and thatâs why mobile apps are leading the software industry in terms of user experience and usability.<br />
Think Iâm exaggerating? Explore some of the most popular apps and experience how great micro-interactions should feel like: notice those delightful sounds, haptic feedback, and elegant animations.<br />
BTW, my favorite example is this: compose your tweet on twitter app and notice that as you get closer to the text limit - a short haptic signal is invoked and draws your attention in a fun and clever way.<br />
<br /></div>
<div>
[<a href="http://www.mobilespoon.net/2018/12/design-trends-2018-influence-mobile.html" target="_blank" title="Read: Mobile design trends to watch out for in 2019">Read: Mobile design trends to watch out for in 2019</a>]</div>
<div>
<br />
<br /></div>
<div>
<h2>
6. Design for interruptions: </h2>
We all suffer from too many interruptions. Mobile apps, in this respect, are running at the core of our most chaotic environments - smartphones.<br />
Incoming phone calls, push notifications, text messages and emails can easily distract the users in the middle of important workflows (i.e. a second before they hit the âcheck-outâ button). It happens a lot, and when it does, the operating system often terminates some of the apps running in the background, in order to save resources.<br />
Mobile apps should deal with interruptions by saving important states. This will make it easy for the users to pick up from where they left off.<br />
Interruptions are also caused by the nature of being âmobileâ; apps should function properly in poor network areas (tubes, elevators, parking lots) and endure occasional disconnections. The secret is to actively manage these situations: do not pass the responsibility to the user (i.e. show an error message saying: âYou are offline! Your draft is gone!â), and instead, save whatever you can, locally on the device, place a gentle warning toast, allow certain actions to be made offline, and prevent the user from making an Irreversible mistake.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img alt="Design your app for interruptions: incoming calls, push notifications, occasional disconnections." height="432" src="https://lh3.googleusercontent.com/-J6UsHnkOV30/XIeTla4sYlI/AAAAAAAAPlY/XA0D42Eb9EkrZmB5MSS3cOYTcNMUwVyjgCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="Design your app for interruptions: incoming calls, push notifications, occasional disconnections." width="700" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Oh no! you just walked into an elevator!</td></tr>
</tbody></table>
</div>
<div>
</div>
<div>
</div>
<div>
<br />
[<a href="http://www.mobilespoon.net/2019/01/product-shipping-why-i-love-shipping-so.html" target="_blank" title="Read:Â Here's why Shipping is so important to me">Read: Here's why Shipping is so important to me</a>]<br />
<br />
<br /></div>
<div>
</div>
<div>
</div>
<div>
<h2>
7. Get personal without invading the users' privacy</h2>
<blockquote>
Smartphones are the most personal wearables we donât wear</blockquote>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img alt="Smartphones are our most personal wearable we don't wear" height="347" src="https://lh3.googleusercontent.com/-tQ43F1aMmb0/XIeTpYlF-TI/AAAAAAAAPlc/N_oevBw86QkjgUtQhuuXuubP7slDB4pqwCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="Smartphones are our most personal wearable we don't wear" width="600" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;">It's probably the beer, but I think this one deserves a tweet!</td></tr>
</tbody></table>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
Smartphones know everything about us; our habits, friends, photos, health, and physical condition.<br />
Mobile apps can access most of this information but itâs important to use only whatâs really needed and relevant for the product.<br />
<br />
Permissions are often treated as a side-issue but reality shows this is a serious topic that should be planned carefully as part of the onboarding process, especially with <a href="https://www.mobilespoon.net/2018/05/gdpr-practical-no-fluff-actionable-todo.html" target="_blank">GDPR</a> and <a href="https://en.wikipedia.org/wiki/California_Consumer_Privacy_Act" target="_blank">CCPA</a>.<br />
<br />
Build a strategy for every permission you need: is it a must? Is it needed from the very beginning? Can the app work without it for a while? Whatâs the best timing to ask for it? What to do if the user rejects it?<br />
<br />
There are many ways to get personal with users without invading their privacy:<br />
<ol>
<li>Build your trust before anything else.</li>
<li>Start asking for permissions only after a certain trust was built. </li>
<li>Ask only for the relevant permissions. </li>
<li>And only when needed (i.e access the camera only before uploading a photo), to minimize the chances of refusals.</li>
<li>Respect the privacy of the users.</li>
<li>Follow the <a href="http://www.mobilespoon.net/2018/05/gdpr-practical-no-fluff-actionable-todo.html" target="_blank" title="GDPR guide - the mobile spoon">GDPR guidelines</a>.</li>
<li>Never spam or abuse these privileges. </li>
</ol>
<br />
And remember:<br />
<blockquote>
With great permissions comes great responsibility.</blockquote>
<br />
<br />
<h2>
Summary: </h2>
Design, value, short interactions, small screens with big actions.<br />
Mobile apps are still unique and require a special level of sensitivity to details and usability.<br />
Over the past 5-6 years, weâve seen web and desktop apps borrowing many mobile elements and the boundaries are slowly blurring, and thatâs a good thing for all of us, the users.<br />
<br />
If you enjoyed reading, follow me on twitter <a href="https://twitter.com/GilBouhnick" target="_blank" title="Gil Bouhnick on twitter">@gilbouhnick</a> or <a href="https://mailchi.mp/b9c664dfafa3/mobilespoon" target="_blank" title="The mobile spoon - mailing list">subscribe to the Mobile Spoon newsletter</a> to get my occasional blogs directly to your inbox.<br />
<br />
<br /></div>
<div>
</div>
<div>
</div>
<div>
</div>
</div><div class="blogger-post-footer">Continue reading at the mobile spoon...</div>Gil Bouhnickhttp://www.blogger.com/profile/04778382332134032974noreply@blogger.com0tag:blogger.com,1999:blog-6554515860534069301.post-89097947207042662352019-02-16T12:31:00.001-08:002019-12-03T04:56:57.150-08:0010 product development practices that will give you full flexibility and control on your mobile app<div>
</div>
<div>
<img alt="10 mobile development practices to gain flexibility and control over your mobile apps" height="422" src="https://lh3.googleusercontent.com/-k8bsOLaz4yY/XGn05KwRPlI/AAAAAAAAPfI/37GAAmqMPug1WDzG-jnJhzy3KBKyTyekgCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="10 mobile development practices to gain flexibility and control over your mobile apps" width="750" /></div>
<div>
</div>
<div>
</div>
<div>
<br />
<br />
Product managers, startup founders and even software developers want to have maximum control on the products they build. Agile companies need to constantly change things and measure their impact, it's a pre-requisite to almost everything they build. </div>
<div>
</div>
<div>
<br />
<h2>
The problem with mobile apps</h2>
Native mobile apps are quite different than web apps: while web apps are refreshing themselves automatically whenever thereâs a new version of the product, mobile apps are installed locally on each device. Upgrades require new versions to be submitted to the different app stores for review. This process can take a few days and even when the app is approved - the upgrades are not performed immediately (and in some devices they never happen because the auto-upgrade is disabled).</div>
<div>
<br />
This is a cumbersome process and it makes it hard for companies to move fast and break things freely.<br />
<br />
As a B2C startup, aiming to move fast and make frequent changes, we suffer from this problem a lot. Releasing a <a href="http://www.mobilespoon.net/2019/01/product-shipping-why-i-love-shipping-so.html" target="_blank" title="about the importance of product shipping ">new version every few weeks</a> is part of our <a href="https://www.mobilespoon.net/2019/01/product-shipping-why-i-love-shipping-so.html" target="_blank">frequent shipping </a><a class="" href="https://www.mobilespoon.net/2019/01/product-shipping-why-i-love-shipping-so.html" target="_blank">culture</a>, but itâs not always enough. Changes and fine-tunes to the business logic are required on a weekly basis and the fact that some users just donât upgrade their apps makes it even more complex.</div>
<div>
<br />
<h2>
10 product design principles to tackle this problem: </h2>
Here are 10 design principles that helped us get maximum control over our apps after they are released and installed. Using those techniques help to maintain a flexible product that can change dynamically without having to create a new product release for every change.<br />
<br /></div>
<div>
</div>
<div>
</div>
<h2>
1. Load the app strings from the server</h2>
<div>
Loading the app strings form the server means you can modify the strings after the app is already released. As a PM this is a priceless capability as UX Writing is a very hard process that never really ends. </div>
<div>
This capability becomes very handy in various scenarios:</div>
<ol>
<li>Whenever you find a <strong>typo</strong> in production and want to fix it ASAP</li>
<li>Whenever thereâs a need to <strong>change</strong> some explanations due to changes in the business logic</li>
<li>Whenever a certain UI component is not clear enough and thereâs a need to <strong>improve</strong> the <a href="http://www.mobilespoon.net/2018/11/ux-writing-comprehensive-guide-for.html" target="_blank" title="ux writing and microcopy in mobile apps ">microcopy</a></li>
</ol>
<div>
If you are worried about performance implications, itâs recommended to develop a âsmartâ download mechanism that will only fetch the strings when something has changed.</div>
<div>
</div>
<div>
</div>
<div>
<h2>
2. Load the photos and icons from the server too</h2>
</div>
<div>
Having this capability ensures that the look and feel of the app can be changed (to some extent) without releasing a new version to the stores. </div>
<div>
Have your resources stored remotely and gain maximum control without involving any development at all.<br />
<br /></div>
<div>
</div>
<div>
</div>
<h2>
3. Store dictionary objects in the database </h2>
<div>
This one is a bit more technical: when writing code, enums are often used to represent a set of restricted options (colors, cities, gender, cancellation reasons).<br />
Instead of holding simple enums in your client code - store dictionary objects in the database. The app should load those dictionary objects upon launch, and use them like enums.<br />
The big difference here is that changes to the enums can be done remotely (and on-the-fly) in one centralized location that immediately impacts the whole system without involving additional development on the apps.<br />
<br />
<br /></div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
<img alt="10 mobile development practices to gain flexibility and control over your mobile apps" height="422" src="https://lh3.googleusercontent.com/-JTpxqS0V87U/XGn07UbzZoI/AAAAAAAAPfM/9JHGsXtC79INQQQr0ck5tDmCvJa-j58SwCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="10 mobile development practices to gain flexibility and control over your mobile apps" width="750" /><br />
<br /></div>
<div>
</div>
<div>
</div>
<h2>
4. On/off switches: </h2>
<div>
On/off switches allow turning off features remotely and instantly.</div>
<div>
You develop something, you give it a try, and if it doesnât work as planned - you rollback immediately without asking for permission. </div>
<div>
</div>
<div>
On/off switches become very handy in the following scenarios: </div>
<ol>
<li>A new feature is relying on some business assumptions that don't come true</li>
<li>A new feature is released with a bug (have mercy!) or with a limitation and makes more harm than good</li>
<li>A new feature is set to work in a period of time (i.e. holidays) and after a while, it should be turned off.</li>
</ol>
<div>
In a dynamic environment where uncertainties are a part of the game - developing important features with on/off switches will provide some level of assurance to the product.<br />
<br /></div>
<div>
</div>
<div>
<table cellpadding="2" cellspacing="2" style="border-color: #eeeeee; margin-left: auto; margin-right: auto; width: 100%;">
<tbody>
<tr style="height: 308.5px;">
<td style="height: 308.5px; text-align: center; width: 48%;"><div>
<img height="250" src="https://lh3.googleusercontent.com/-E9TzHR7c3u4/XGqH2T_UJxI/AAAAAAAAPgY/P6g2NqNahGQjuuJw8XT6WEyhGvE2l12lgCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" width="337" /></div>
<div>
<a href="http://www.mobilespoon.net/2019/01/product-shipping-why-i-love-shipping-so.html" target="_blank" title="The importance of shipping - the mobile spoon">Why shipping is so important for startup companies</a></div>
</td>
<td style="height: 308.5px; text-align: center; width: 48%;"><div>
<img style="display: block; margin-left: auto; margin-right: auto;" /></div>
<div>
<img height="250" src="https://lh3.googleusercontent.com/-eXaMFYCZws4/XGqH204CduI/AAAAAAAAPgc/pvRSqZ0ayGsHLR5XXTBDwcGDeJngbkwzgCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" width="338" /></div>
<div>
<a href="http://www.mobilespoon.net/2018/11/ux-writing-comprehensive-guide-for.html" target="_blank" title="The ultimate guide for designing and writing text in mobile apps">The ultimate guide for designing text in mobile apps</a> </div>
</td>
</tr>
</tbody>
</table>
</div>
<div>
</div>
<div style="text-align: center;">
</div>
<h2>
5. Move logic to the server</h2>
<div>
This one is a killer and my favorite item in this list. </div>
<div>
Letâs say you develop a delivery app where customers place their orders, receive the delivery and pay through the app. </div>
<div>
Now, letâs say you need to develop a cancellation policy for customers who are canceling their orders in the last minute. Developing a simple solution such as a fixed cancellation fee is not hard, but the troubles begin when new policies are added. What may begin as a simple, fixed cancellation fee, may certainly evolve into different levels of fees, percentages based on the order size, first-time warnings etc.</div>
<div>
</div>
<div>
While all of those scenarios can be developed in the client side - there is a much better solution: move the business logic to the server side and have the apps present the results in a generic way. </div>
<div>
</div>
<div>
This architecture allows frequent logic changes to be made in one centralized location (in the server side) and each change impacts all the customers, including the ones who havenât upgraded their app for a while - instantly. No need to release new apps, no need to deal with old functionality vs. new, etc. </div>
<div>
</div>
<blockquote>
<div style="text-align: center;">
Changes are made only once, thereâs no need to submit new app releases to the app stores, and the new logic is enforced to all the users, including the ones with older versions of the app. </div>
</blockquote>
<br />
<div>
</div>
<div>
</div>
<h2>
6. Server-side UI rendering</h2>
<div>
This one is not a common pattern in mobile apps, but in extreme cases, it can be a good solution to some business needs:<br />
Instead of coding the UI logic in the app itself, let the server do the hard work: analyze whatâs required (based on the user, the process, the stage in the process) and create the UI logic behind the scenes.<br />
The results are sent back to the clients (as <strong>instruction capsules</strong> defining what to show in the UI) and the app uses those instructions to draw the UI in a pretty âdumbâ way.</div>
<div>
</div>
<div>
Yes, it feels like moving back from the modern "fat-clientâ approach to a shallow thin client that acts almost as a website, but it sometimes makes sense in mobile, because unlike web applications, native apps cannot be refreshed without involving app upgrades through the stores.</div>
<div>
Server-side rendering bypasses this problem and gives your product an extra layer of flexibility.<br />
<br /></div>
<div>
</div>
<div>
</div>
<h2>
7. Create generic components to be used on various occasions</h2>
<div>
Instead of creating a special Christmas version of the app and submit it to the stores in the last minute (together with 2 million other apps that are doing exactly the same thing) - how about having a few generic UI components that can act as promotional popups and themed decorations? </div>
<div>
</div>
<div>
Such components can have:</div>
<ol>
<li>Specific conditions when to be shown (dates, user segmentation, geographic audiences)</li>
<li>UI definitions (size, layout, colors, title and body, images if relevant, actions and more)</li>
<li>Behavioral specifications (stage in the workflow, how many times to be shown, etc.) </li>
</ol>
<div>
Weâve created a bunch of generic components and have been using them widely ever since.<br />
<br /></div>
<div>
</div>
<div>
</div>
<h2>
8. Add backward compatibility to your server API</h2>
<div>
This one is a must:</div>
<div>
As you release new versions of your mobile app, thereâs always going to be a group of users that do not upgrade. </div>
<div>
Those are usually the âless technicalâ users or the ones that ran out of space and turned off the auto-update option.</div>
<div>
Those users are harming your business: not only they do not enjoy the latest of greatest of your product, but they also require that your server will support multiple versions (and multiple logics) simultaneously. </div>
<div>
In cases where you need to enhance some API functions but still want to support older versions of the app - add the following meta-data to all of your API methods: </div>
<ol>
<li>OS type (iOS, Android, Windows, etc.) </li>
<li>User ID</li>
<li>App version</li>
</ol>
<div>
The above 3 will allow you to implement different variants of your services logic based on different versions of the app, different OS (i.e. Android vs. iOS) and even based on user segments.<br />
<br /></div>
<div>
</div>
<div>
</div>
<div>
</div>
<h2>
9. Invest in A/B testing</h2>
<div>
You can try to avoid A/B testing and conduct periodic product experiments instead (using flags and on/off switches), but eventually, the time will come and you will have to add this important capability in order to <strong>isolate</strong> your experiments from market ânoiseâ. </div>
<div>
<br />
How else would you be able to tell what caused those metrics to change?</div>
<ul>
<li>Was it the new welcome tour that improved the conversion rate? Or maybe that new marketing campaign is bringing better cohorts? </li>
<li>Was that the new feature that increased the GMV? Or maybe itâs because of the holidays? </li>
<li>Was it a bug fix that boosted registrations rate or maybe itâs the summer that has finally arrived?</li>
</ul>
<div>
Market trends are probably stronger than any feature you create, especially if your product has a seasonality effect. To be able to nail down the impact of each change - the product must have A/B test capabilities. </div>
<div>
</div>
<blockquote>
<div style="text-align: center;">
Market trends are probably stronger than any feature you create, especially if your product has a seasonality effect. To be able to nail down the impact of each change - the product must have A/B test capabilities. </div>
</blockquote>
<h2>
</h2>
<h2>
10. Force upgrade</h2>
<div>
In the rare cases where the product is going through a major change, it may become too costly to keep old versions alive with backward compatibility.</div>
<div>
In such cases, you may need to use the deadliest weapon in the world, also known as: <strong>The Force</strong>. <strong>Upgrade</strong>.<br />
<br /></div>
<div>
</div>
<div>
<img alt="Use force upgrade as the last resort" height="422" src="https://lh3.googleusercontent.com/-7Z3C-YmTIbk/XGnbvYchmJI/AAAAAAAAPe8/BvuuEAKLABYhcc16M2LrRwL9kWUv09lXwCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="Use force upgrade as the last resort " width="750" /></div>
<div>
</div>
<div>
</div>
<div>
<br />
A <strong>force upgrade</strong> is a blocker that blocks the users from using the app until they upgrade to the latest version.</div>
<div>
It pops up as an alert and forces the users to upgrade by taking them straight to the app store. </div>
<div>
This is, of course, not a great user experience (to say the least), and may cause some users to get lazy or upset, and simply uninstall the app, so this option should be the last resort and only be used when thereâs absolutely no other way.<br />
<br /></div>
<div>
</div>
<div>
A slightly lighter version of this technique is to block specific functions instead of the whole app. </div>
<div>
The user can still use the old version of the app, but once he tries to activate a feature that is no longer supported - he gets a generic error message saying the app should be upgraded. </div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
So there you have it, 10 techniques to design a mobile app that is highly flexible and can change based on the changes in the business needs.<br />
<br />
Liked this article? There's more:<br />
<br />
<ul>
<li><a href="https://www.mobilespoon.net/2019/02/beware-of-early-adopters.html" target="_blank">Your product's early adopters - the good, the bad and the ugly</a></li>
<li><a href="https://www.mobilespoon.net/2018/12/product-decisions-tradeoffs-game.html" target="_blank">Here's to trade-offs and compromises. Your product's best friends</a></li>
<li><a href="https://www.mobilespoon.net/2018/12/what-to-do-when-you-cant-trust-your.html" target="_blank">What to do when you can't believe your customers, friends, and even your mom...</a></li>
</ul>
<br />
This post has been published on <a href="http://www.productschool.com/">www.productschool.com</a> communities.<br />
<br />
Follow me on twitter <a href="https://twitter.com/GilBouhnick" target="_blank" title="Gil Bouhnick on twitter">@gilbouhnick</a> or <a href="https://mailchi.mp/b9c664dfafa3/mobilespoon" target="_blank" title="The mobile spoon - mailing list">subscribe to the Mobile Spoon newsletter</a> and get my occasional blogs directly to your inbox.<br />
<br />
<br />
<span style="background-color: #f1f0f0; font-family: , , , ".sfnstext-regular" , sans-serif; font-size: 14px; white-space: pre-wrap;"><br /></span> <span style="background-color: #f1f0f0; font-family: , , , ".sfnstext-regular" , sans-serif; font-size: 14px; white-space: pre-wrap;"><br /></span></div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<style type="text/css">
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'Helvetica Neue'}
span.s1 {text-decoration: underline ; color: #dca10d}
</style><div class="blogger-post-footer">Continue reading at the mobile spoon...</div>Gil Bouhnickhttp://www.blogger.com/profile/04778382332134032974noreply@blogger.com1tag:blogger.com,1999:blog-6554515860534069301.post-67266329622677248732019-02-13T15:31:00.001-08:002019-12-05T14:24:40.082-08:00Apple Watch - Trying to improve the Control Center UI in 15 minutes <div>
</div>
<div>
<img alt="Apple Watch Control Center - current design" height="587" src="https://lh3.googleusercontent.com/-9TphdQQtFdU/XGSo1ZwIb0I/AAAAAAAAPeU/GVYLJY8LdgQKOeODKL3zQUXJBdV-QxlwgCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="Apple Watch Control Center - current design" width="750" /></div>
<div>
<br />
If thereâs one thing I really donât like about the UI of the Apple Watch, itâs the Control Center. </div>
<div>
Unlike most of the Watch user interface, the Control Center looks unpolished: the buttons are too big, thereâs too little whitespace, and the status icons on the top seem out of place. </div>
<div>
</div>
<div>
I decided to try my luck and improve the UI a bit. </div>
<div>
</div>
<div>
<br />
Knowing how long simple design tasks might take - I decided to challenge myself: </div>
<div>
1. Only simple changes (no redesign) </div>
<div>
2. Limit my time to 15 minutes max.<br />
<br />
<br />
Related: <a href="https://www.mobilespoon.net/2016/10/heres-why-you-dont-use-iphones-3d-touch.html" target="_blank">This is why 3D Touch failed</a>.</div>
<div>
</div>
<h2>
The issues: </h2>
<div>
1. Status icons seem misplaced and feel a bit unrelated to the rest of the design. </div>
<div>
2. The phone icon looks much bigger than the location service icon because itâs a long icon. </div>
<div>
3. Toggles are too close to each other - there arenât enough whitespaces.<br />
<br /></div>
<div>
</div>
<div>
<img alt="Apple Watch Control Center - current design issues" height="585" src="https://lh3.googleusercontent.com/-6JerxTD-NG8/XGSo22-WSnI/AAAAAAAAPeY/IMd5-TabxWccGXHTVe-JZbOHSKNXQa5yQCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="Apple Watch Control Center - current design issues" width="750" /></div>
<div>
</div>
<h2>
</h2>
<h2>
The changes: </h2>
<div>
As my goal was to finish the changes within 15 minutes.</div>
<div>
I took some screenshots and used <a href="http://www.mobilespoon.net/2017/01/how-microsoft-powerpoint-can-be-your.html" target="_blank" title="Turn PowerPoint into a Mockup editor ">PowerPoint</a> to modify some of the elements (without having to draw anything from scratch).</div>
<div>
This is a very <a href="http://www.mobilespoon.net/2017/01/how-microsoft-powerpoint-can-be-your.html" target="_blank" title="use Microsoft powerpoint to create mockups">simple technique</a> and I use whenever I need to modify some existing designs or add simple additions that do not require Photoshop.<br />
<br />
Related: <a href="https://www.mobilespoon.net/2015/03/a-list-of-all-operating-systems-running.html" target="_blank">A list of all the operating systems running on smartwatches</a>.<br />
<br /></div>
<div>
</div>
<div>
<br />
<b>Hereâs what I did: </b></div>
<div>
1. I changed the status icons to be all white (when active). </div>
<div>
2. Cropped the iPhone icon (Iâm not 100% sure about this change but didnât have time to think of anything better) </div>
<div>
3. Moved the phone icon next to the location services icon to create a âstatus area"</div>
<div>
4. Made the toggle buttons slightly smaller and increased the distances between them</div>
<div>
</div>
<div>
</div>
<div>
Of course, if I had more time, I might have changed the look and feel of the toggles to look similar to iPhoneâs rounded toggle buttons. </div>
<div>
</div>
<div>
<br />
Hereâs the result:<br />
<br /></div>
<div>
</div>
<div>
<img alt="Apple Watch Control Center - existing vs. fine tuned version" height="585" src="https://lh3.googleusercontent.com/-IvtRSng2iqk/XGSo4UcyYSI/AAAAAAAAPec/Qgi9W7aS1zMDfKZWpmbOn2_GoKQ2AVdyQCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="Apple Watch Control Center - existing vs. fine tuned version" width="750" /></div>
<div>
</div>
<div>
Thoughts? Better? Worse?<br />
<br /></div>
<div>
</div>
<div>
Related: <a href="https://www.mobilespoon.net/2019/12/design-great-products-best.html" target="_blank">Over 100 UI design tips - the best of the mobile spoon</a></div>
<div>
</div>
<div>
</div>
<div>
<br />
Follow me on twitter <a href="https://twitter.com/GilBouhnick" target="_blank" title="Gil Bouhnick on twitter">@gilbouhnick</a> - or - <a href="https://mailchi.mp/b9c664dfafa3/mobilespoon" target="_blank" title="The mobile spoon - mailing list">subscribe to the Mobile Spoon newsletter</a> to get my occasional blogs directly to your inbox.</div>
<div>
</div>
<div>
</div>
<div class="blogger-post-footer">Continue reading at the mobile spoon...</div>Gil Bouhnickhttp://www.blogger.com/profile/04778382332134032974noreply@blogger.com0tag:blogger.com,1999:blog-6554515860534069301.post-58477124612335899582019-02-11T16:34:00.001-08:002019-12-03T04:56:57.143-08:00Here's what we did today - a retrospect to Appleâs screen recording incident <div>
<img height="502" src="https://lh3.googleusercontent.com/-_mgv-yZU_r4/XGIUeZFlSPI/AAAAAAAAPd0/mzc04iBqzGQt9NUNxW4bqFVuy5HTnpEnQCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" width="790" /></div>
<div>
</div>
<div>
Ahhh, the marvelous world of tech is so frenzied lately.<br />Everything moves fast, so easy and so⌠unexpected.<br />Todayâs rising star is tomorrowâs abomination.<br />Whatâs working well this week, might get you in trouble next week. </div>
<div>
Thereâs no better way to begin the day than this:<br />
<br />
<img height="355" src="https://lh3.googleusercontent.com/-U89D3olU9Qc/XGIUe_lf6aI/AAAAAAAAPd4/ClLHYVedt5QS_LWGkBubd07RxzRVEelCACHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" width="600" /><br />
<br />
So much bold text and so many asterisks in one email - that canât be goodâŚ<br />
Well...<br />
Especially when later that day <strong>this</strong> comes in:<br />
<br />
<img height="501" src="https://lh3.googleusercontent.com/-KqtQgYpM2_8/XGIUf3jwlfI/AAAAAAAAPd8/O5dwikOjx0Q-g_YedYxOBaDgLnxup5FxgCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" width="600" /><br />
<h2>
The crime: screen recording</h2>
Here's the <a href="https://www.reddit.com/r/iOSProgramming/comments/aot5p0/24_hours_to_remove_user_data_tracking_code/" target="_blank" title="Warning from Apple">original email coming from Apple</a>, but believe me, itâs not very different than my interpretation above.<br />
The trigger was set a few days earlier with this <a href="https://techcrunch.com/2019/02/06/iphone-session-replay-screenshots/" target="_blank" title="TechCrunch mobile investigation">TechCrunch investigation</a> that found that many popular iPhone apps secretly record the phone screens without asking for permission.<br />
It didnât take long for <a href="https://www.macrumors.com/2019/02/07/apple-makes-devs-remove-screen-recording-code/" target="_blank" title="Apple forces app developers to remove screen recording SDKs">Apple to react</a>.<br />
Which means we now had 24 hours to fix our app, get rid of any SDK that is in âegregious violationâ of the guidelines, resubmit to the store and hope for a fast review and approval of our apps.<br />
<br />
<h2>
Bummer</h2>
</div>
<div>
To be honest, we saw this coming: when you use so many SDKs itâs only a matter of time until things start to break unexpectedly. It can be a technical problem, a security glitch, or a privacy problem like this one.<br />
Since we started Missbeez, we faced more than one crisis over the tools weâve been using.<br />The biggest one was when <a href="https://www.facebook.com/" target="_blank" title="facebook">Facebook</a> decided to <a href="https://venturebeat.com/2016/02/03/facebook-never-wanted-to-host-your-app-the-real-reasons-it-shut-down-parse/" target="_blank" title="Facebook shuts down parse.com">shut down Parse</a>, leaving thousands of startups to look for alternatives for this amazing backend as a service.<br />
We got the picture back then and it hasnât changed since: SDKâs are unstable, they change, the companies shut down, they get acquired, they merge into new products.<br />
<a href="https://parseplatform.org/" target="_blank" title="parse.com">Parse</a>, <a href="https://9to5google.com/2018/09/14/fabric-shutting-down-next-year/" target="_blank" title="Crashlytics for mobile">Crashlytics</a>, <a href="https://medium.com/hoopeez/angularjs-migration-hard-reset-and-rebooting-from-angular-2-4-5-6-5fccb392309" target="_blank" title="Angular upgrade">Angular</a>, Swift, <a href="https://www.e-nor.com/blog/google-analytics/google-to-sunset-support-for-google-analytics-services-sdk-transitions-mobile-analytics-to-firebase" target="_blank" title="Google analytics sunset">Google Analytics</a>, <a href="https://venturebeat.com/2018/10/10/mongodb-to-acquire-cloud-database-provider-mlab-for-68-million/" target="_blank" title="mLab MongoDB">mLab</a>⌠where did backward compatibility go???<br />
<br />
<blockquote>
<div style="text-align: center;">
What used to be a controllable technology debt, turned into technology taxes and every SDK you add is subject to tax. </div>
</blockquote>
<br />
<br />
<h2>
Back to screen recording </h2>
To be honest, <a href="https://www.appsee.com/features/user-recordings" target="_blank" title="AppSee Screen Recording">screen recording</a> were never really my thing. Itâs supposed to show you the behavior of your users, provide an accurate and visual documentation of what they are doing with your product UI, without having to guess.<br />
We gave screen recording a try few months ago, and ended up feeling screen recordings have a few problems:<br />
First of all: what if the users donât want us to know what theyâre doing? Itâs their phone, right?<br />
Second, we encountered some real challenges with the output: <br />
<ol>
<li>It too addictive - you can spend hours watching video recordings</li>
<li>Itâs not quantitative - and in a B2C I always look for the <a href="http://www.mobilespoon.net/2018/04/5-things-i-learned-in-transition-from.html" target="_blank" title="5 things I learned in the transition from B2B to B2C">volumes and trends</a> rather than the <a href="http://www.mobilespoon.net/2018/12/what-to-do-when-you-cant-trust-your.html" target="_blank" title="What to do when you canât trust your customer feedback">specific cases</a></li>
<li>Driven by the above - It was almost impossible to find meaningful insights in a reasonable time</li>
</ol>
At the end of the day, we stopped using it and went back to our traditional methods of measuring events and clicks with the likes of <a href="https://mixpanel.com/" target="_blank" title="MixPanel Mobile Analytics">MixPanel</a> and <a href="https://marketingplatform.google.com/about/analytics/" target="_blank" title="Google Analytics">Google Analytics</a> combined with our own reporting system.<br />
<br />
Oh, right⌠I forgot to mention we kept that SDK in our project⌠which was the reason for this whole mess...<br />
<br />
<h2>
Takeaways</h2>
<div>
</div>
<h3>
1. Never put all your eggs in one SDK basket</h3>
Things are too shaky and for mission-critical operations I would recommend having 2 alternatives or at least a backup plan. Examples: payment services, registration service, etc. If you canât imagine your business running without your payment service, create a backup plan. </div>
<div>
</div>
<h3>
2. Wrap your SDKs with your own wrappers </h3>
<div>
This is a small technical design item: instead of embedding all kinds of APIâs in your code, create wrappers that wrap those APIâs in such way that will allow you to replace specific SDKâs without involving your core product code.</div>
<div>
</div>
<h3>
3. Get rid of unused SDKs</h3>
<div>
Clean your projects and get rid of SDKs you no longer use. This is something we didnât do which led us to receive that warning from Apple even tough we havenât used screen recording for many months. </div>
<div>
</div>
<h3>
4. Analytics data should stay in-house</h3>
<div>
Screen recording, UI events, funnels, mobile analytics, <a href="http://www.mobilespoon.net/2018/11/4-reasons-why-mobile-ad-attribution.html" target="_blank" title="mobile ad attribution">ad attribution</a> - at the end of the day, all of those tools have their dedicated dashboards.<br />
My best advice is to pull important details from these systems - and push it back to the main system of records of the product.<br />
External tools (and SDKs) come and go, and you will want this priceless data to be stored in-house and be kept safe forever.</div>
<div>
</div>
<div>
</div>
<div>
While youâre here - give some other posts a try:<br />
<ul>
<li><a href="http://www.mobilespoon.net/2018/12/product-decisions-tradeoffs-game.html">Hereâs to trade-offs and compromises. Your productâs best friends.</a></li>
<li><a href="http://www.mobilespoon.net/2018/12/what-to-do-when-you-cant-trust-your.html">What to do when you canât trust your customer, friends and even your mom</a></li>
<li><a href="http://www.mobilespoon.net/2018/11/ux-writing-comprehensive-guide-for.html">UX writing: a comprehensive guide for designing text in mobile apps</a></li>
<li><a href="http://www.mobilespoon.net/2018/12/10-usability-rules-keyboard-mobile-app.html">How to handle the on-screen keyboard without messing up your app usability</a></li>
</ul>
</div>
<div>
</div>
<div>
</div>
<div>
Follow me on twitter <a href="https://twitter.com/GilBouhnick" target="_blank" title="Gil Bouhnick on twitter">@gilbouhnick</a> or <a href="https://mailchi.mp/b9c664dfafa3/mobilespoon" target="_blank" title="The mobile spoon - mailing list">subscribe to the Mobile Spoon newsletter</a> to get my occasional blogs directly to your inbox.</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div class="blogger-post-footer">Continue reading at the mobile spoon...</div>Gil Bouhnickhttp://www.blogger.com/profile/04778382332134032974noreply@blogger.com0tag:blogger.com,1999:blog-6554515860534069301.post-34910885407353243492019-01-13T00:36:00.000-08:002019-12-05T14:24:16.507-08:00This is why 3D Touch failed<div style="text-align: center;">
</div>
<div style="text-align: center;">
</div>
<div style="text-align: center;">
</div>
<div style="text-align: center;">
<img alt="Here's why 3D Touch failed - the mobile spoon" height="533" src="https://lh3.googleusercontent.com/-XY-5uYiuSVU/XDuyPjR3JsI/AAAAAAAAPbg/Y7X4JngmTEk2bvwNewxNqqibj3cpf1qowCHMYCw/s5000/%255BUNSET%255D" title="Here's why 3D Touch failed - the mobile spoon" width="400" /></div>
<div style="text-align: center;">
<br />
<br /></div>
<div style="text-align: center;">
</div>
<div style="text-align: left;">
<br />
Hey iPhone users, how many times have you used 3D Touch this week?</div>
<div>
I use it every now and then, but most users I talk to rarely use it (or "never knew it existedâ to quote some of them). </div>
<div>
<br />
<br />
It has been a few years since Apple introduced ForceTouch with the Apple Watch (later called: 3D Touch for iPhones) and it seems like it has not been successfully adopted. With iPhone XR missing this capability, there are now solid rumors that Apple is going to phase it out soon.</div>
<div>
<br />
Itâs easy to tell when a new OS feature is a big hit:</div>
<div>
- It quickly becomes popular </div>
<div>
- Apps developers embrace it and implement incredible features with it</div>
<div>
- All other players copy it</div>
<div>
</div>
<div>
None of those things happened with 3D Touch. </div>
<div>
</div>
<div>
Hereâs why I think it failed: </div>
<h2>
<br /><strong>It doesnât feel natural</strong></h2>
<div>
The original iPhones were all about making things simple, elegant and delightful. </div>
<div>
3D touch is exactly the opposite: thereâs nothing elegant in pressing your finger hard on a piece of glass. You need to prepare your grip in advance (especially if the press is done on the upper area of the screen) and hold it tight while trying to control the level of press. Itâs hard to determine the level of pressure required and the whole experience creates an ergonomic nightmare.<br />
<br /></div>
<div>
</div>
<h2>
<strong>It lacks clarity and discoverability</strong></h2>
<div>
Clarity is one of the most important things in a user interface. Every UI element should create a clear picture of what it does and how it works, or as Apple calls it in the iOS human interface guidelines document: âconvey interactivityâ.</div>
<div>
Labels, buttons, vertical scrollable lists, horizontal collections, they all give hints about what will happen when you tap or swipe them.<br />
<br />
Clarity was one of the reasons why iOS became so popular by non-technical people; there were no hidden tricks, no right-click menus, no SHIFT+SELECT functionality, so even technophobic users (like my mom) could easily use and enjoy it (and even become an admin in various Facebook groups⌠but thatâs a different story).<br />
<br />
The problem with 3D touch is that it contradicts all of those things and doesnât provide discoverability: there is no visual sign that an element is 3D touchable, so you need to guess what happens. I often find myself randomly force-touch elements on the screen without knowing what will happen.</div>
<div>
<br />
If thatâs not enough, there's no clear standard in regards to WHAT happens when you force-touch an element: will it open a preview? Will it zoom in? What would be the optional buttons? Will it stay popped up when you lift your finger up or go back to the previous state? Sometimes it does, sometimes it doesnât.</div>
<div>
</div>
<div>
So basically we are talking about power features that no one knows WHERE they are or WHAT they do⌠</div>
<div>
</div>
<div>
</div>
<div>
If only there were visual <a href="https://medium.com/@eliz_kilic/how-apple-can-fix-3d-touch-2f0ca5ea589e" target="_blank" title="3D Touch UI decorators - mobile spoon">force decorators</a> indicating a 3D Touch is available for certain elements - that would probably make things a bit easier to understand and remember.<br />
<br />
Related: <a href="https://www.mobilespoon.net/2019/03/7-unique-ingredients-mobile-app.html" target="_blank">how to design a true mobile experience - the guide</a>,<br />
<br /></div>
<div>
</div>
<div>
</div>
<h2>
Too few meaningful use cases</h2>
<div>
Yes, I do know <a href="https://www.youtube.com/watch?reload=9&v=kfIiN5ATvHc" target="_blank">that keyboard trick</a>, and I sometimes force-touch a photo or two, but besides those 2 gestures, there arenât enough use cases to turn 3D Touch into a winning technology.<br />
<br /></div>
<div>
</div>
<div>
</div>
<h2>
Itâs not that effective either</h2>
<div>
Letâs take the appâs shortcut menu as an example. Letâs say you want to compose a new email: </div>
<div>
In the good old way you need to: 1) open the app, 2) tap the compose button, 3) start composing your email. </div>
<div>
With 3D Touch you can: 1) Force-touch the app icon, 2) tap the quick compose shortcut, 3) start composing your email.<br />
Well, that didnât make a big difference, did it? 3 steps each.<br />
<br />
In some cases, the shortcut menu might save you 1â2 taps, but the tradeoff is that you now need to remember what shortcuts each app provides and when.<br />
<br /></div>
<div>
</div>
<h2>
An old post but still relevant</h2>
<div>
I wrote this post 3 years ago and decided to re-post it because I think itâs still relevant.</div>
<div>
</div>
<div>
Some rules never change: a technology seeking for a problem to solve often fails.</div>
<div>
Great features with poor usability fail. </div>
<div>
Even if they were invented by Apple.<br />
<br />
<br />
Related: <a href="http://a%20list%20of%20all%20operating%20systems%20running%20on%20smartwatches%20[wearables]/" target="_blank">a list of all the operating systems running on smartwatches</a>.<br />
<br />
<br /></div>
<div>
</div>
<div>
</div>
<div class="blogger-post-footer">Continue reading at the mobile spoon...</div>Gil Bouhnickhttp://www.blogger.com/profile/04778382332134032974noreply@blogger.com0tag:blogger.com,1999:blog-6554515860534069301.post-89544650464230540072019-01-12T15:02:00.001-08:002019-12-05T14:29:49.863-08:00I still miss these 2 gadgets because of their unique design<br />
<img height="566" src="https://lh3.googleusercontent.com/-1gkV2dKqmZ0/XDpx489D4sI/AAAAAAAAPas/VFZyJ6_EBkUExoVE-c_9IpJrQn-Rj8RJQCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" width="750" /><br />
<br />
There are products that stay with you long after you stop using them.<br />
I recently found my old Microsoft Band lying between my socks and my underwear, and it gave me the idea to write about 2 of my all-time favorite gadgets and why I still find them interesting and unique.<br />
<br />
Itâs because of their designâŚ<br />
<br />
<h2>
Microsoft Band: </h2>
The Microsoft Band was released in 2014 and was Microsoftâs first move in the <a href="http://www.mobilespoon.net/2015/03/a-list-of-all-operating-systems-running.html" target="_blank" title="Wearable technology">wearable space</a>. It was a fitness tracker with a unique design and a crazy number of sensors (over 10). I used it for a year or so, before switching to the <a href="http://www.mobilespoon.net/2018/10/would-you-tell-difference-between-apple.html" target="_blank" title="Apple Watch - The Mobile Spoon">Apple Watch</a>.<br />
<img height="488" src="https://lh3.googleusercontent.com/-5-zcCBgvy5I/XDpx9RFId2I/AAAAAAAAPaw/2_3dtf4HujA7q1-Co0RiebklR6og5UOngCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" width="750" /><br />
<br />
The Band had a few design innovations I still appreciate:<br />
<br />
<h3>
1 - The screen was located at the bottom of the device</h3>
If you are wearing a watch, try to lift your hand and look at it.<br />Feel that extra effort? You need to <strong>lift</strong> your elbow in order to enable the rotation of your wrist.<br />Now, imagine you are wearing a Microsoft Band, where the screen is placed on the <strong>inside</strong> of your wrist.<br />
Lift your hand and notice how easy it is to rotate your wrist to see the screen. This is what Iâm talking about.<br />
To my knowledge thereâs no other wearable who adopted this approach, which, after using the Band for over a year, was simply incredible.<br />
<br />
<h3>
2 - Landscape UI running on a landscape screen</h3>
The Band carried a pretty small screen, but it was a cool one: it was very wide and was designed for landscape mode only. Everything scrolled horizontally, even the text. Whenever you wanted to read something long, the text would scroll horizontally. Tiles scrolled horizontally as well, and it actually made a lot of sense.<br />
<img height="223" src="https://lh3.googleusercontent.com/-5AuSQ1J23p8/XDpx-3QSulI/AAAAAAAAPa0/Vl5uuaJqaZcC3AiVnTOsBSESUcUpD4OxACHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" width="600" /><br />
Related: <a href="http://a%20list%20of%20all%20operating%20systems%20running%20on%20smartwatches%20[wearables]/" target="_blank">a list of all operating systems running on smartwatches</a>.<br />
<br />
<h3>
3 - Freaking keyboard </h3>
Seriously. It had an <a href="http://www.mobilespoon.net/2015/02/this-is-probably-worlds-tiniest.html" target="_blank" title="on-screen keyboard">on-screen keyboard</a>. I didnât use it frequently but whenever I needed it - it worked pretty well. There are times I wish I had an on-screen keyboard for the Apple Watch, as an alternative to voice dictation.<br />
BTW (shameless promotion ahead), on-screen keyboards can drive users crazy when they donât work well with the UI. Here are <a href="http://www.mobilespoon.net/2018/12/10-usability-rules-keyboard-mobile-app.html" target="_blank" title="10 tips for handling virtual keyboards without messing your mobile app usability">10 tips for handling virtual keyboards without messing your mobile app usability</a>.<br />
<br />
<br />
Recommended: <a href="https://www.mobilespoon.net/2019/12/design-great-products-best.html" target="_blank">over 100 UI design tips - the best of the mobile spoon</a>.<br />
<h3>
4 - Live tiles </h3>
Iâm a live tiles fan. I liked them from the early days of Windows Phone (RIP) and I still find them extremely useful. To me, live tiles are a nice combination of home screens with app shortcuts, widgets, and notification centers. Their biggest disadvantage is that you cannot have a tile for every app you use.<br />
The band held a nice collection of widgets giving quick access to the main apps and a visual snapshot of all the updates that require your attention.<br />
<br />
<br />
<h2>
Palm Treo 750 </h2>
The second gadget I miss is my first true smartphone: the Palm Treo 750. It was released back in 2006 and unlike most of Palmâs devices, it ran an operating system developed by another company: Microsoftâs Windows Mobile.<br />
<img alt="Palm Treo 750 - an iconic piece of history in the mobile world" height="378" src="https://lh3.googleusercontent.com/-NWtT1QgVcjo/XDpyBhyv9FI/AAAAAAAAPa4/xTLDMLKk7P4PHfkxZrdDPvSHAIitRHfEgCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="Palm Treo 750 - an iconic piece of history in the mobile world" width="600" /><br />
<br />
The Treo had a lot of unique advantages:<br />
<h3>
1 - Perfect grip</h3>
The chubby design of the Treo, along with the rubbery texture of the back cover made it feel like it was part of your hand. I never enjoyed holding a phone like I did with the Treo and it never slipped.<br />
When designers talk about delightful moments - this is what they mean.<br />
<br />
<h3>
2 - Single hand navigation despite having a touchscreen </h3>
Back in the days, you could either use a touchscreen (with a stylus of course, because there were no capacitive screens before the iPhoneâŚ) or skip the touch and use a keyboard with navigation buttons or trackpads (like Blackberry had).<br />
<blockquote>
<div style="text-align: center;">
Design wise, blending contradicting approaches is a risky move, but Palm managed to make it work</div>
</blockquote>
The Palm Treo was the first device to properly combine the best of both worlds: it had a touchscreen with a stylus, but you didnât have to use them because the navigation buttons worked so well with the OS. As a result, you could use the smartphone with a single hand, and fully operate an operating system in a whole new way. It was a big win for Palm in terms of usability.<br />
<br />
There were other advantages to the Palm Treo, probably not unique for this device only: the keyboard was pretty awesome (10 years ago most people believed physical keyboard is better than virtual one⌠technology proved they were wrong) and there were so many shortcut buttons you could operate all your favorite apps without unlocking /swiping / face-recognizing / launching anything. A long press on one of the keys you mapped and you could activate stuff.<br />
<br />
<img height="484" src="https://lh3.googleusercontent.com/-DA0L3Zs0LSs/XDpyGeq-w5I/AAAAAAAAPa8/t2ZEJo4b3ekmLWhh_sk-0bzxUmPKI7IMwCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" width="650" /><br />
<br />
<br />
Despite being my all-time favorite gadgets, both the Band and the Treo didnât stick around for long.<br />
The Band was discontinued after 2 years and 2 product versions. The Treo remained popular for a while (with a few successors) but like most smartphones of that time, it didnât survive the iPhone/Android revolution.<br />
<div class="blogger-post-footer">Continue reading at the mobile spoon...</div>Gil Bouhnickhttp://www.blogger.com/profile/04778382332134032974noreply@blogger.com0tag:blogger.com,1999:blog-6554515860534069301.post-51277516598250571562018-12-07T13:45:00.001-08:002019-12-03T04:56:57.134-08:00Mobile design trends to watch out for in 2019<div>
<img alt="Mobile design trends to watch out for in 2019 - the mobile spoon" height="499" src="https://lh3.googleusercontent.com/-QVli1-h784Q/XA177_YeRtI/AAAAAAAAPSM/U4aRD9vZyAYw9OQlQjuVe9i7GuNhGY0vwCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="Mobile design trends to watch out for in 2019 - the mobile spoon" width="750" /></div>
<div>
</div>
<div>
</div>
<div>
<br />
<br />
Itâs that time of year when design predictions are being made. </div>
<div>
Iâve read a few great ones, added my own ideas and would like to share some of my predictions for the upcoming year, focusing, as usual, on mobile.<br />
<br /></div>
<div>
</div>
<div>
</div>
<div>
Three design trends that started in 2018 will shape the evolution of mobile apps in 2019: </div>
<div>
1. There are <a href="http://www.mobilespoon.net/2018/11/what-size-should-your-iphone-app-be.html" target="_blank" title="no more small iPhones - the mobile spoon">no more small smartphones</a>. What used to be called phablets (giant phones) are now mainstream. </div>
<div>
2. Smart devices no longer have buttons (nor bezels) - they are all-screen.</div>
<div>
3. Digital design is getting bolder, more colorful, spectacular and extravagant.</div>
<div>
</div>
<div>
</div>
<div>
I believe that the above 3 will play significant roles in shaping up the look and feel of mobile apps in 2019.<br />
<br /></div>
<h2>
Hereâs what Iâm expecting to see in 2019 in mobile apps design:</h2>
<div>
</div>
<br />
<h2>
Less chrome, more content:</h2>
<div>
</div>
<h3>
1. Bigger screens = more + bigger + richer content</h3>
<div>
Itâs a marvelous formula. App developers can double and triple the content they show without compromising on clean design principles such as using lots of whitespaces, proper hierarchies, and grouping.<br />
<br /></div>
<div>
Itâs OK to combine multiple view types in one screen without creating too much clutter: shortcuts, stories, photo carousels, tab-bars, thereâs room for a combination of them due to growing screen real-estate. </div>
<div>
</div>
<div>
</div>
<div>
<img alt="Bigger screens = more + bigger + richer content" height="527" src="https://lh3.googleusercontent.com/-BiWUBn8TU0w/XA17tvhGklI/AAAAAAAAPRw/zxRdxk7-7Jgwa5-hXFnykuiyYb98LRs_QCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="Bigger screens = more + bigger + richer content" width="790" /></div>
<div>
</div>
<div>
</div>
<div>
<img alt="Bigger screens = more + bigger + richer content" height="527" src="https://lh3.googleusercontent.com/-gq0hqlypkgI/XA17wrTBqlI/AAAAAAAAPR0/y1ZK-dEgCLsMtsKuundCHkYn-fgR5Sz5QCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="Bigger screens = more + bigger + richer content" width="790" /></div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<h3>
<strong>2. Horizontal collections inside table views </strong></h3>
<div>
This âcriss-crossâ pattern where some of the vertical rows are actually containers to horizontal collections is not new but it got much more popular since Appleâs latest AppStore redesign in iOS 11.</div>
<div>
Iâm sure many app developers have tried to avoid it in the past, but this pattern is becoming a best practice when thereâs a need to present more content without having to tap and navigate away from the main view.<br />
<br /></div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
<img alt="Horizontal collections inside table views - mobile UI design trends " height="583" src="https://lh3.googleusercontent.com/-EJZ0e5DaiqI/XA17zFCRDkI/AAAAAAAAPR4/ZFu5ZtseFJcV9AhkcmSRbgI-IVzQR_BowCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="Horizontal collections inside table views - mobile UI design trends " width="700" /><br />
<br />
<br /></div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
<img alt="Horizontal collections inside table views - mobile UI design trends " height="435" src="https://lh3.googleusercontent.com/-FmVf5F1W8DI/XBDNZMgcAhI/AAAAAAAAPUk/_FaQYk1rXBMa2obH4iOwNpAntcTitsCjgCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="Horizontal collections inside table views - mobile UI design trends " width="750" /><br />
<br />
<br /></div>
<div>
</div>
<div>
</div>
<div>
</div>
<h3>
<strong>3. The brand goes behind the scenes </strong></h3>
<div>
Medium, Airbnb, Evernote, Instagram - they all went through a similar process of gradually emphasizing the content while getting rid of their brand colors, logos, and practically the app personality⌠(similar to Appleâs getting rid of the iPhoneâs home buttonâŚ).</div>
<div>
When youâre big and famous - it probably makes sense and improves app usability. However, if youâre a smaller brand you may not feel comfortable doing so.<br />
Itâs important to know where to place your brand visuals.</div>
<div>
A good rule of thumb is to decorate <a href="https://material.io/design/communication/empty-states.html#content" target="_blank" title="empty states design ui">empty states</a> with visuals consistent with your brand.<br />
<br />
<br /></div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
<img alt="The brand goes behind the scenes - mobile design trends" height="498" src="https://lh3.googleusercontent.com/-H1yV9yxmRww/XA171fgpC2I/AAAAAAAAPR8/7hQBORRTymgc0nBPPMIgongwMwk97V0OACHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="The brand goes behind the scenes - mobile design trends" width="790" /> <br />
<br /></div>
<div>
</div>
<div>
</div>
<div>
<h3>
Bouhnickâs Takeaways:</h3>
<ol>
<li>Aim for large screens.</li>
<li>Donât waste your energy on <a href="http://www.mobilespoon.net/2018/11/what-size-should-your-iphone-app-be.html" target="_blank" title="mobile app designs - designing small and scaling up">designing small and scaling up</a> your designs. </li>
<li>Make content bigger, even if it expands beyond screen boundaries and requires scrolling.</li>
<li>Get rid of the chrome and minimize background noise. </li>
<li>Show your brand wisely without pushing content aside.</li>
</ol>
<div>
<br />
[<a href="https://www.mobilespoon.net/2019/03/7-unique-ingredients-mobile-app.html" target="_blank">Read: 7 must-have product ingredients for creating a true mobile experience</a>]<br />
<br /></div>
<div>
<div>
</div>
<div>
</div>
</div>
<div>
<h2>
Flat UI is dead, long live Flat UI 2.0! </h2>
</div>
<div>
Flat UI was great but after 6 years itâs time to spice things up a bit and fix some of itsâ problems.</div>
<div>
</div>
<div>
Flat 1.0 suffered from some usability and discoverability problems. Flat 2.0 addresses some of those problems by adding metaphors and principles borrowed from physics (such as <a href="https://material.io/design/" target="_blank" title="material design - the mobile spoon - mobile apps">Material Designâs</a> shadows and motions) while spicing up monotonic colors with the likes of vibrant gradients, duotones, layers, colorful illustrations and more.</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
<img alt="Flat UI is dead, long live Flat UI 2.0! " height="328" src="https://lh3.googleusercontent.com/-Tx8AV5xzSVA/XBBCddTkJ4I/AAAAAAAAPTs/r4oA__7FRuUk6KGUJ9BsQ2Ng2LmXcSQbwCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="Flat UI is dead, long live Flat UI 2.0! " width="750" /></div>
<div>
</div>
<div>
</div>
<div>
<br />
Flat UI 2.0 helps users interpret visual hierarchies and clickable content while making UI more sophisticated. </div>
<div>
While flat 2.0 isnât new - itâs not yet widely adopted by mainstream mobile apps (definitely not yet in iOS apps).</div>
<div>
</div>
<div>
I believe this will change in 2019. </div>
<div>
<br /></div>
<div>
Hereâs how to prepare your mobile app to flat 2.0:<br />
<br /></div>
<div>
</div>
<div>
</div>
<div>
<img alt="From Flat UI to Flat UI 2.0 - mobile UI design trends " height="461" src="https://lh3.googleusercontent.com/-denNklRIB0A/XA173OJkk_I/AAAAAAAAPSA/WqCBiFJOwDAg6dPryQR07DQksk7YB7K4QCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="From Flat UI to Flat UI 2.0 - mobile UI design trends " width="750" /></div>
<div style="text-align: center;">
Evolution of mobile apps: from skeuomorphism to flat 1.0 and flat 2.0<br />
<br />
<br /></div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<h3>
<strong>1. Vibrant colors</strong></h3>
<div>
It wouldnât be a 2019 design trends post without mentioning vibrant colors or without showing some Apple designs, right? </div>
<div>
So here you go:<br />
<br />
<br /></div>
<div>
</div>
<div>
</div>
<div>
<img alt="Vibrant colors are here to stay - mobile design trends" height="600" src="https://lh3.googleusercontent.com/-oVrE6QV7OLQ/XBBCeQSe7qI/AAAAAAAAPTw/3l1Wt_6e7K8bwfT5cx8Cz9yxwCxQYOauACHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="Vibrant colors are here to stay - mobile design trends" width="600" /><br />
<br />
[<a href="https://www.mobilespoon.net/2018/12/10-usability-rules-keyboard-mobile-app.html" target="_blank">Read: How to use the on-screen keyboard in your app without messing up the usability</a>]<br />
<br />
<br /></div>
<div>
</div>
<div>
</div>
<div>
</div>
<h3>
2. The gradients are back!</h3>
<div>
Monotone colors are out - gradients are back and they are more sophisticated than before. </div>
<div>
The new gradients (also called: gradients 2.0) are vivid, they consist of multiple vibrant colors and create a warm effect. </div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
<img alt="From flat UI colors to flat 2.0 gradients - design trends" height="298" src="https://lh3.googleusercontent.com/-wLkRbPAhFBs/XBBCfY0sckI/AAAAAAAAPT0/uKqs2d7rIq8yQxEgS0ty_7Hlawko2eFYACHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="From flat UI colors to flat 2.0 gradients - design trends" width="780" /></div>
<div>
</div>
<div>
</div>
<div>
<br />
If youâre looking to refresh your completely flat mobile app, gradients are a great way to do it but pay attention to the colors you pick and beware of the unwanted 3D effect that will make your app look like it's the 90âs...<br />
<br /></div>
<div>
</div>
<div>
<img alt="How to use a warm gradient effect without creating a 3D effect" height="149" src="https://lh3.googleusercontent.com/-wOWHbbYxd8o/XA2il_qad-I/AAAAAAAAPS0/ARVi76s_LnYPHRa1yCGExAJOnHCWaErDQCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="How to use a warm gradient effect without creating a 3D effect" width="500" /></div>
<div>
<br />
<br />
<br />
If you feel insecure about gradients - hereâs a useful guide explaining <a href="https://uxplanet.org/why-gradients-are-back-to-rule-in-2018-8b36711c335f" target="_blank" title="how to create good looking gradients">how to create good looking gradients</a> and how to select the right colors.<br />
You can also use tools such as <a href="https://uigradients.com/#PureLust" target="_blank" title="UIGradient">UIGradient</a> and <a href="https://webkul.github.io/coolhue/" target="_blank" title="Coolhue for CSS">Coolhue for CSS</a> to create great looking gradients very easily.<br />
<br />
<br />
<img alt="How to create good looking gradients" height="278" src="https://lh3.googleusercontent.com/-136MKyjkvvk/XBBCgYi936I/AAAAAAAAPT4/ufjG_F0-ZXsVPS_F-5gRIps5vZPFCuIbwCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="How to create good looking gradients" width="500" /><br />
<br />
<br />
<h3>
3. Duotones</h3>
It wouldnât be a serious guide without mentioning duotones.<br />
So⌠duotones.<br />
<br />
Duotones work well with bright gradient colors. They became extremely popular in web designs this year and I think itâs just a matter of time until they will become part of mainstream mobile app designs.<br />
<div>
Hereâs my first attempt to create a <a href="https://speckyboy.com/create-gorgeous-duotones-three-easy-steps/" target="_blank" title="how to create a duotone">Duotone</a> (what do you think?):<br />
<br /></div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
<img alt="My first Duotone - what do you think?" height="499" src="https://lh3.googleusercontent.com/-QVli1-h784Q/XA177_YeRtI/AAAAAAAAPSM/U4aRD9vZyAYw9OQlQjuVe9i7GuNhGY0vwCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="My first Duotone - what do you think?" width="750" /><br />
<br />
<br /></div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
<h3>
<strong>4. Depth and multiple layers</strong></h3>
<div>
Multiple layers, sophisticated backgrounds, illustrations, and duotones - they all turn flat design into <strong>deep flat design</strong>.<br />
<br />
<br /></div>
<div>
</div>
<div>
</div>
<div>
<img alt="Gradients with depth - UI design trends in mobile " height="389" src="https://lh3.googleusercontent.com/-hhSpO-9EhbU/XA175waC5KI/AAAAAAAAPSI/pFvWb6ot8CgfWhnzxxqxECdTYkRZ-SIrgCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="Gradients with depth - UI design trends in mobile " width="770" /><br />
<br />
<br /></div>
<div>
</div>
<div>
<img alt="Gradients with depth - UI design trends in mobile " height="293" src="https://lh3.googleusercontent.com/-8hyY87f0188/XA2inSCZKiI/AAAAAAAAPS4/rOO1KKX7uWAydG62XvmxuCrVah0D4k4xwCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="Gradients with depth - UI design trends in mobile " width="750" /></div>
<div style="text-align: center;">
(source: unknown)<br />
<br />
<br /></div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<h3>
5. Material design shadows are taking over</h3>
</div>
<div>
Did Google win the design battle?</div>
<div>
Did Apple lose again?</div>
<div>
Am I crazy to include shadows so late in my post?</div>
<div>
Isnât this a trend that started 5 years ago? </div>
<div>
</div>
<div>
Donât waste your time trying to answer these questions. Instead, check out this little example below to see how shadows should look like in your mobile app.<br />
<br />
</div>
<div>
</div>
<div>
<img style="display: block; margin-left: auto; margin-right: auto;" /> <img alt="Material design style drop shadow in mobile apps - the mobile spoon" height="235" src="https://lh3.googleusercontent.com/-hQjk8l1uBjM/XA2ioEpNtXI/AAAAAAAAPS8/oUvBBB5BurM08HTbLp1FUniBrDx_2E0-wCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="Material design style drop shadow in mobile apps - the mobile spoon" width="500" />
<br />
<br />
<br />
<h3>
6. Watch out for those big, fat, bold fonts</h3>
Big bold headers were introduced in iOS 11, replacing the extra thin font that was used beforehand. </div>
<div>
</div>
<div>
If you are developing your apps using standard view controllers -you get this new title style automatically, but bold fonts can and should be used in sub-headers as well.</div>
<div>
Just make sure not to use bold fonts in normal text blocks. </div>
<div>
<br />
<br />
<img alt="Bold fonts are back - mobile design trends" height="473" src="https://lh3.googleusercontent.com/-Vcv8bJY8tLE/XA2ip-ingrI/AAAAAAAAPTA/Es5vRPJQ9001DRqdKb_1eeP0ICUYyaILwCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="Bold fonts are back - mobile design trends" width="750" /><br />
<br />
<br />
<br />
<h3>
7. Line icons are getting a chubbier look </h3>
</div>
<div>
Still flat, still minimalistic, but icons are slowly getting some of their weight back.</div>
<div>
If you are looking to renew your appâs icons - pay attention to this trend.<br />
<br /></div>
<div>
</div>
<img alt="Chubbier icons - mobile trends" height="268" src="https://lh3.googleusercontent.com/-QxWZgcRU2w8/XBBChhAnTRI/AAAAAAAAPT8/UNF3msBRg8sCamxoUOx01_Bki_zQAuC-gCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="Chubbier icons - mobile trends" width="770" /><br />
<br />
<br />
<h3>
8. Rounded corners. Everywhere. </h3>
<div>
All smart devices have rounded corners these days: iPhones, Android phones, Apple Watch. </div>
<div>
When every device has curved corners - itâs only natural that the UI will get the same rounded look and feel.</div>
<div>
Twitter, Google search, Gmail - all started using rounded corners more frequently. </div>
<div>
According to researches, <a href="http://uxmovement.com/thinking/why-rounded-corners-are-easier-on-the-eyes/" target="_blank" title="UI rounded corners are easier for the eyes - mobilespoon">rounded corners are easier for the eyes</a>, improve readability and <strong>increase conversion rates of CTA buttons</strong>.</div>
<div>
</div>
<div>
If you want to give your app an up-to-date look & feel - round some of those corners.<br />
<br />
<br />
<br /></div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
<img alt="Mobile UI design trends - rounded corners are everywhere!" height="263" src="https://lh3.googleusercontent.com/-nET4EGSqS7g/XBBCi7h1HuI/AAAAAAAAPUA/A1LBCiQL6_Ul0n1hXDUSl4hPWb5DIFVdQCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="Mobile UI design trends - rounded corners are everywhere!" width="750" /><br />
<br />
<br /></div>
<div>
</div>
<div>
</div>
<div>
</div>
<h3>
9. Cards </h3>
<div>
Cards play a crucial role organizing information in mobile apps.</div>
<div>
You can group different data types (such as photos, icons, buttons, text) inside a card to make them look part of one object.</div>
<div>
Going back to the beginning of this post, adding content to your app to better utilize the screen, will often require shifting from simple table view rows to cards.<br />
<br />
<br />
<br /></div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
<div>
<img alt="Mobile cards are everywhere - mobile design trends" height="497" src="https://lh3.googleusercontent.com/-C3kV8k5_XnA/XBBCkbwQATI/AAAAAAAAPUE/-yQLI7AWLqMx2H0XhJqh3vHbs6I0FOpNQCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="Mobile cards are everywhere - mobile design trends" width="750" /></div>
<div style="text-align: center;">
(<a href="https://dribbble.com/shots/4625075-Beast-Barz-workout-generator-interaction-concept" target="_blank">source</a>)</div>
<div>
</div>
<br />
<br />
<img alt="Mobile cards are everywhere - mobile design trends" height="572" src="https://lh3.googleusercontent.com/-1qBRfoDi4l0/XA2irf9_mII/AAAAAAAAPTE/rUXq5bxsc8oatlJSMljuMczJHrrbmQRawCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="Mobile cards are everywhere - mobile design trends" width="750" /><br />
<br />
<br />
<h3>
10. Meaningful motion </h3>
Meaningful motion can boost your mobile app: meaningful animations improve overall experience, they turn micro interactions into delightful and understandable interactions and above all - spice things up for the users. </div>
<div>
Good UI motions can help users understand the workflow, emphasize navigation movements, confirm actions and add rhythm to the app workflow. </div>
<div>
</div>
<div>
Iâm a huge fan of UI motions but unfortunately many app developers are unaware of how important motions are. </div>
<div>
</div>
<div>
Itâs very important to invest time adding meaningful (and not <a href="http://www.mobilespoon.net/2018/05/how-to-create-perfect-animations-with.html" target="_blank" title="how to create perfect UI Mobile in mobile apps - the mobile spoon">stupid</a>) animation to any mobile app. Itâs a relatively low effort, it doesnât have to be over sophisticated, and it turns any mobile app into a more professional one. </div>
<div>
</div>
<div>
<br />
<br />
<h3>
Takeaways: </h3>
<ol>
<li>Flat 2.0 is more sophisticated than flat 1.0</li>
<li>Gradients, shadows, bolder fonts and icons, will continue to change the look & feel of mobile apps. </li>
<li>Investment in mobile UI will have to increase in order to stay up-to-date. </li>
<li>Besides the big changes, you can achieve small wins with small tweaks like curved corners, light shadows </li>
</ol>
</div>
<div>
<div class="graf graf--p graf-after--h3">
<br />
[<a href="https://www.mobilespoon.net/2018/11/ux-writing-comprehensive-guide-for.html" target="_blank">Read: The most comprehensive guide for designing and writing text in mobile apps</a>]<br />
<br />
<br /></div>
<h2 class="graf graf--h3 graf-after--p">
New navigation alternatives: </h2>
<h3 class="graf graf--h3 graf-after--p" id="b531">
</h3>
<h3 class="graf graf--h3 graf-after--p">
1. Hamburger menu is looking for a new home </h3>
</div>
<div>
There has been a lot of criticism about the <a href="http://www.mobilespoon.net/2015/04/who-invented-mobile-side-menu-concept.html" target="_blank" title="who invented the hamburger menu - mobilespoon">hamburger menu</a>.</div>
<div>
While it certainly provides an easy and aesthetic solution for many design needs - it <a href="https://medium.muz.li/3-good-reason-why-you-might-want-to-remove-that-hamburger-menu-from-your-product-69b9499ba7e2" target="_blank" title="why hamburger menus are bad for mobile apps">doesnât provide a proper information architecture</a> and therefore considered to be a lazy solution. </div>
<div>
As devices grow bigger, the top left location of the hamburger menu is getting harder to reach, forcing app developers to find alternatives. </div>
<div>
</div>
<div>
One of the alternatives is to use a traditional tabs bar (located at the bottom of the screen) with a twist: important views are easily accessible through the tabs and the less important ones are located in the âall the restâ tab that behaves more like a side menu. </div>
<div>
</div>
<div>
I see a growing number of apps adopting this approach, here are 2 examples:<br />
<br /></div>
<div>
</div>
<div>
</div>
<div style="text-align: center;">
<img alt="Mobile UI design - Hamburger menu is looking for a new home " height="480" src="https://lh3.googleusercontent.com/-xKfEvnAluLI/XBDNbJXsHmI/AAAAAAAAPUo/Yqi3Mh1uKUwvVeOkdzv2QQbnVS1VjBT2QCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="Mobile UI design - Hamburger menu is looking for a new home " width="750" />Hamburger menu alternatives: tabs bar combined with a âmoreâ button<br />
<br />
<br /></div>
<div>
</div>
<div>
</div>
<div>
<div>
</div>
<div>
</div>
<div>
<h3>
<strong>2. Full-screen menu </strong></h3>
<div>
This one exists for quite a while on <a href="https://uxdesign.cc/rethinking-the-full-screen-menu-59c9c514e43b" target="_blank" title="full screen menus">websites</a>.</div>
<div>
Iâm not a huge fan of it, but if youâre looking for ways to emphasize your menu items and even add some rich content to some of them - it might be a nice solution. </div>
</div>
</div>
<div>
<div>
</div>
<div>
</div>
<div>
<img alt="Full screen menues - mobile design trends" height="458" src="https://lh3.googleusercontent.com/-OY0f8ceZf8w/XBDNd-sRbiI/AAAAAAAAPUs/De7Fw4DPnFk4VwxSRqgjLSF0UFiEP4cJgCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="Full screen menues - mobile design trends" width="750" /><br />
<br /></div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<h3>
3. Swipe-up gestures for more options </h3>
<div>
This is becoming a big one. </div>
<div>
</div>
<div>
As it gets harder to reach the upper area of the screen, more apps are placing key navigation elements at the bottom of the screen. </div>
<div>
Swiping up your thumb is without a doubt the easiest gesture for mobile. iOS and Android already use this swipe-up gesture to go back to the home screen, but apps can still place buttons or UI hints at the bottom of the screen. </div>
<div>
</div>
<div>
See some examples below - the idea is to have the common actions as easiest as possible to access.<br />
<br />
<br /></div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
<img alt="Mobile design trends - Swipe-up gestures for more options" height="298" src="https://lh3.googleusercontent.com/-PwCgj7uOxG0/XBDNiEDa8pI/AAAAAAAAPUw/wvijL4zn4gUptiYDlPnfwWy5fXEvnSvtQCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="Mobile design trends - Swipe-up gestures for more options" width="750" /></div>
<div style="text-align: center;">
Some great examples of how a swipe-up menus/views work on mobile apps</div>
<div>
</div>
<div>
</div>
<div>
<div>
<br />
<br />
<br />
Placing your main actions as swipe-up container has few advantages: </div>
<ol>
<li>Itâs easily open (most accessible, easiest gesture).</li>
<li>Easily closed (using the opposite gesture).</li>
<li>It overlays the contextual content, increasing clarity.</li>
<li>Itâs clean, no need to place a lot of buttons on the main view.</li>
<li>It doesnât force you to navigate away from the main view. </li>
<li>It makes good use of the screen real-estate (much bigger and nicer than using a popup). </li>
</ol>
<div>
<br /></div>
<div>
</div>
</div>
<div>
</div>
<div>
<h2 class="graf graf--h3 graf-after--p">
</h2>
<h2 class="graf graf--h3 graf-after--p">
Miscellaneous </h2>
<div class="graf graf--h3 graf-after--p">
<br /></div>
<h3 class="graf graf--h3 graf-after--p">
1. Haptic feedback: </h3>
</div>
<div>
Haptic feedback provides a tactile response, such as a tap, that draws attention and reinforces both actions and events. Most mobile apps are not yet using haptic feedback enough, the ones that do it well, provide a <strong>superior</strong> user experience.<br />
I can think of a few apps that managed to upgrade their overall experience using smart haptic feedbacks (<a href="http://www.mobilespoon.net/2018/10/whatsapp-new-popup-menu-shows-how-bad.html" target="_blank" title="WhatsApp new popup menu mobilespoon - design UI">check out the new WhatsApp popup menu</a>).<br />
Once again, if you are looking for ways to achieve quick and easy wins - you should consider using it, but don't overuse.<br />
<br />
<br />
<h3>
2. Smart push notifications </h3>
Most people think that adding a personal name to a push message makes it smart. I disagree. To me, a smart notification is one that either works for the user (i.e. he taps it) or never appears again.<br />
Apps should focus on analyzing the behavior of their users. If a certain user never taps a certain push notification - the app should stop sending it.<br />
A new user should receive different notifications than an experienced one: when I just started my <a href="https://twitter.com/GilBouhnick" target="_blank" title="gil bouhnick on twitter">Twitter account</a> I received a push for every new follower. After a while (I think it happened after reaching my first 1K follows) - I stopped receiving notifications for nw followers which made a lot of sense.<br />
<ol>
<li>Group messages into <strong>topics</strong> (Android channels or iOS groups)</li>
<li>Analyze user behavior around each topic </li>
<li>If a user doesnât react to a certain topic - stop sending it. </li>
<li>Focus on the value your notifications can bring to the users. </li>
</ol>
</div>
<div>
</div>
<div>
</div>
<div>
<br />
Thatâs it for this one, happy to hear your thoughts and own prediction to the upcoming year in mobile app design. </div>
<div>
</div>
<div>
<br />
<br />
Join my <a href="https://mailchi.mp/b9c664dfafa3/mobilespoon" target="_blank" title="Gil Bouhnick Mailing List - The Mobile Spoon">mailing list</a> to get more of these directly to your inbox and become 23% more awesome than average or follow me on <a href="https://twitter.com/GilBouhnick" target="_blank" title="Gil Bouhnick">Twitter</a> and never get lonely again.<br />
<br />
<br /></div>
<div>
</div>
<div>
</div>
<div>
</div>
<div class="blogger-post-footer">Continue reading at the mobile spoon...</div>Gil Bouhnickhttp://www.blogger.com/profile/04778382332134032974noreply@blogger.com4tag:blogger.com,1999:blog-6554515860534069301.post-84876353854561001342018-11-15T15:01:00.001-08:002019-12-03T04:56:57.146-08:004 Reasons why mobile ad attribution numbers never match up<div>
</div>
<div>
<img alt="4 reasons why mobile ad attribution numbers never match up - the mobile spoon" height="480" src="https://lh3.googleusercontent.com/-tX1yED_xYuY/W-7QnOAdCPI/AAAAAAAAPLM/c4AE6m8X79c4vIio1vacawphetDNe5NbQCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="4 reasons why mobile ad attribution numbers never match up - the mobile spoon" width="750" /><br />
<br />
<br />
[This post has been modified on September 2019 and now includes a 5th reason]<br />
<br />
<br />
So your amazing mobile app is out there, <a href="https://www.mobilespoon.net/2019/03/7-unique-ingredients-mobile-app.html" target="_blank">beautifully designed</a>, <a href="https://www.mobilespoon.net/2019/02/10-product-principles-give-full.html" target="_blank">well developed</a>, except nobody knows about it.<br />
<br />
Rest assured <a href="https://www.mobilespoon.net/2018/05/the-zombies-are-not-coming.html" target="_blank">the zombies are not coming</a>, so you need to bring them through different marketing channels: ASO, social networks, user acquisition, viral campaigns, events, whatever works well for your product.<br />
<br />
In order to know what channel works well, you need <a href="https://www.mobilespoon.net/2019/06/11-data-related-lessons-we-learned-hard.html" target="_blank">data</a>, but the data you need doesn't reside in one place.<br />
<br />
Facebook, Instagram, Twitter, Google, they all have their own dashboards with different measurement policies, while you, as the <strong>owner</strong> of one app, struggle to understand <strong>your</strong> overall return on ad spend, searching for a reliable, accurate and consistent source of attribution numbers.<br />
<br />
<h2>
Our approach: having a single point of truth </h2>
For us at <a href="http://www.mobilespoon.net/2018/10/missbeez-hottest-startup-in-tel-aviv.html" target="_blank">Missbeez</a>, the strategic decision was to bring back the attribution data from the different marketing channels we use to our own system of records.<br />
We have implemented it by using <a href="https://www.appsflyer.com/" target="_blank" title="AppsFlyer">AppsFlyer</a>, a leading SaaS mobile marketing analytics, and attribution platform.<br />
<br />
Doing so allows us to:<br />
<ol>
<li>Reduce our dependencies on multiple external tools and dashboards </li>
<li>Track installs from all marketing channels (paid/organic, digital/non-digital) in our own consolidated dashboard </li>
<li>Have the attribution data embedded within our core data model, ready to be used by our core business logic.</li>
<li>Analyze the behavior of our marketing channels in the long run (weeks, months, years), in terms of <a href="https://www.mobilespoon.net/2019/07/cohort-analysis-retention-rate.html" target="_blank">retention rates</a>, frequency of use, virality effect, and other metrics that are at the core of our business models. </li>
</ol>
<br />
<h2>
<strong>Running into discrepancies</strong> </h2>
This process revealed what many mobile marketers already know: <strong>the numbers do not match</strong>. As written in <a href="https://www.adjust.com/blog/discrepancies-and-why-data-does-not-always-match-up/" target="_blank" title="Mobile Attribution Data Discrepancies - mobilespoon">this blog post</a> by <a href="https://www.adjust.com/blog" target="_blank" title="Adjust mobile attribution">Adjust</a>:<br />
<br />
<blockquote>
<strong>Itâs an issue that arises on every single analytics platform - in one dashboard you have 5005 installs, on another, 7246. Whatâs the deal?</strong></blockquote>
<br />
After doing some digging, talking to experts and exploring our <strong>Facebook ads</strong>, I would like to try and explain (also as a self-persuasion), why install numbers as shown by Facebook (and others) will probably never match the ones companies see in their own systems.<br />
<br />
<br />
So there it is:<br />
<h3>
4 Reasons why mobile ad attribution numbers never match up</h3>
<br />
<h2>
Reason #1: Facebook counts installations while you count users</h2>
If like us, your system keeps track of new <strong>users </strong>then I guess each user needs to <strong>do something</strong> before he becomes one.<br />
Whether itâs adding an email, entering a nickname, or even just skipping the welcome tour - users might drop along the process, causing discrepancies between your data and other systems: <br />
Some systems count the number of installations regardless of opening the app (Apple and Google). According to AppsFlyer, <a href="https://support.appsflyer.com/hc/en-us/articles/207040726-Discrepancies-How-Does-AppsFlyer-Count-Installs-Compared-To-App-Store-and-Google-Play-" target="_blank" title="10% of apps are installed but never opened - the mobile spoon">10% of apps are installed but never opened</a>.<br />
<br />
Some systems count <b>installations</b> only once the <b>app launches</b>, regardless of what the user actually does when opening the app (i.e. Facebook).<br />
Some systems (like our own) only count a user as an actual user once he completes a <b>short verification</b> step.<br />
<br />
So continuing with our own system as an example, in the case of low engaged users that didnât convert to fully active ones - the numbers might be completely different in each system:<br />
<ul>
<li>Users that installed the app but never opened it will still be counted by Apple and Google as an install (but not Facebook and our own system).</li>
<li>Users that opened the app but didnât go through the verification step will still be counted by Facebook (but not our own system)</li>
<li>Only users that opened the app and finished the verification step would potentially be numbered correctly by all systems. </li>
</ul>
<br />
<strong>Now that we understand that, what differences should we expect to see? </strong><br />
<strong><br /></strong>
It depends on the <strong>drop rate</strong> during the validation/registration step, which depends on the level of complexity of this step.<br />
Accurate benchmarks are hard to find but I did find the following:<br />
<ul>
<li>54% install-to-register conversion rate in games (according to LiftOff)</li>
<li>35%-47% install-to-engaged conversion rate (iOS, non-organic users, according to <a href="https://cdn2.hubspot.net/hubfs/597489/Data%20Study%202017/AppsFlyer_The%20State%20of%20App%20Engagement%202017.pdf" target="_blank" title="AppsFlyer drop rate report ">AppsFlyer</a> )</li>
</ul>
Looking at our own numbers (using <a href="https://www.google.co.il/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=2ahUKEwjPlLjDh9neAhVFUhoKHdedDFEQFjAAegQIBBAC&url=https%3A%2F%2Fmixpanel.com%2F&usg=AOvVaw2lJfYkv1xQYNErkh2WKZsz" target="_blank" title="MixPanel">MixPanel</a>) it seems like 85%-90% of our new users convert from install to register.<br />
<ul>
<li>5%-7% drop during the tutorial (indicating some users didnât fully understand what the app was about prior to installation) </li>
<li>5%-7% drop during SMS activation process (which makes sense as some users may not feel comfortable with this validation method but we do need it at this point). </li>
</ul>
<br />
<br />
<br />
<h2>
Reason #2: Facebook shows inflated numbers because some installs are counted more than once </h2>
Ignoring the low engaged users who donât even finish the verification step - what else can Facebook count that we do not?<br />
Well, since our system counts âusersâ and Facebook counts install - there may be more weird scenarios resulting in Facebook showing inflated numbers:<br />
<ol>
<li>Users upgrading their devices (<a href="https://www.counterpointresearch.com/smartphone-users-replace-their-device-every-twenty-one-months/" target="_blank" title="Users upgrade their smartphones every 21 months - the-mobile-spoon">every 21 months</a>) will create additional âinstallâ events (counted by Facebook) without increasing the total âusersâ count.</li>
<li>Users installing the app on multiple devices will create additional âinstallâ events</li>
<li>Users re-installing the app will trigger extra installation events without increasing the âusersâ count. </li>
</ol>
<br />
<strong>Note</strong>: according to <a href="https://ddof8wj1m41ni.cloudfront.net/beta-tune-com-content/uploads/2016/08/tune-logo.png" target="_blank" title="Tune - Mobiel app attribution - mobilespoon">Tune</a> - <a href="https://www.tune.com/blog/install-or-reinstall-42-of-mobile-app-installs-are-actually-reinstalls-and-in-some-categories-its-75/" target="_blank" title="mobile apps re-installs account for 40% of all installs">re-installs account for 40% of all installs</a>.<br />
<ul>
<li>18% say they deleted an app because it was buggy, and they reinstalled to force a reset to a better-functioning app</li>
<li>13% say they deleted an app that they later found out they needed ⌠and therefore re-downloaded it.</li>
<li>6% say they deleted an app by mistake and had to reinstall it.</li>
</ul>
<br />
It might be an exaggerated number (for marketing purposes), but even if we take 10%-20% re-installs itâs still a lot!<br />
<br />
So to summarize: we have device upgrades, multiple devices, re-installs, all increasing the number of <strong>installs</strong> as reported by Facebook and the likes, without bringing a single user in. How unfortunateâŚ<br />
<br />
<br />
<br />
<h2>
Reason #3: Facebookâs attribution time window is much longer than you would expect </h2>
Facebook app installs are logged when one of the following occurs:<br />
<ul>
<li>A person clicks on an ad or link and installs the app within <strong>28 days</strong></li>
<li>A person views an ad or link and installs the app within <strong>24 hours</strong></li>
</ul>
(<a href="https://www.facebook.com/help/analytics/1501026310203238?helpref=faq_content" target="_blank" title="Facebook ads attribution model - mobilespoon.net">source</a>)<br />
Since smartphones are basically a wild playground for interruptions, users may see your ad, and immediately get diverted by the next item on their feed or by any other incoming thread on their smartphone. Such users might later go back to the AppStore (few hours or few days later) and install your app.<br />
<br />
Such scenarios will be counted by Facebook as installs but depending on your implementation (there are few ways to address this issue) they may not get attributed in your own system.<br />
The date reported as the '<strong>app install time</strong>â can also be deceiving because (according to Facebook): âThe date used for reporting app installs is either the day the ad was last clicked or viewedâ which can happen up to 28 days before the app was actually opened.<br />
<br />
If you are measuring your ad performance on a weekly basis - remember that time differences can cause a lot of discrepancies. <br />
<br />
<br />
<br />
<h2>
<strong>Reason #4: Technical glitches </strong></h2>
Passing back attribution data to your own system is a bit tricky. We do this using AppsFlyer, as AppsFlyer manages the integration with thousands of different ad networks.<br />
From a technical standpoint, this is not a 100% bulletproof since the APIâs are based on remote events (coming from AppsFlyer servers), and by the nature of mobile apps events might get interrupted by real-world scenarios (disconnections, app termination).<br />
<br />
Without getting too technical, I will just say that despite all attempts to solve those challenges, Iâm 100% sure there are rare scenarios where the attribution data will not be accepted, resulting in mismatches and inconsistent numbers.<br />
<br />
<br />
<h2>
[NEW]: Reason #5: Apple LAT</h2>
Apple's Limited Ad Tracking (LAT) allows users to opt-out of having an ID for advertisers. It's a feature Apple added to improve users' privacy and gained a lot of popularity in the past 2 years (following the likes of the FacebookâCambridge Analytica data scandal, which raised public awareness on the importance of data protection and privacy) and is now being used by 15%-34% of iOS users (15% according to <a href="https://support.appsflyer.com/hc/en-us/articles/115003734626-FAQ-Impact-of-Apple-Limit-Ad-Tracking-on-attribution" target="_blank">AppsFlyer</a>, 34% in the US according to <a href="https://asostack.com/how-to-crack-limit-ad-trackings-secrets-for-effective-apple-search-ads-advertising-c0aaada8ec24" target="_blank">SearchAdsHQ</a>).<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-bqKE7H0rVPk/Xc_ciVE36rI/AAAAAAAAQEI/PtltEjZnawUKD2NGOTIONV3gE36gLh79wCLcBGAsYHQ/s1600/mobile%2BLAT%2BiOS.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="906" data-original-width="1536" height="376" src="https://1.bp.blogspot.com/-bqKE7H0rVPk/Xc_ciVE36rI/AAAAAAAAQEI/PtltEjZnawUKD2NGOTIONV3gE36gLh79wCLcBGAsYHQ/s640/mobile%2BLAT%2BiOS.png" width="640" /></a></div>
<br />
<br />
Once users are using LAT, it's impossible to track their source, which means that if they came from Instagram or Facebook through paid ads, they are still counted as organic installs.<br />
<br />
Now that those numbers can reach 20%-30% of the users - it's meaningful.<br />
<br />
<br />
<h2>
Conclusion</h2>
There are at least 5 reasons why your attribution numbers don't match up, and still, I believe it's a good practice to integrate back all the attribution numbers into one system of truth.<br />
<br />
Keep in mind that the truth, in the case of mobile attribution, might not be 100% accurate, and instead of locking down on the actual numbers - focus on the trends.<br />
<br />
<br />
<h2>
<b>More on mobile: </b></h2>
<br />
<ul>
<li><a href="https://www.mobilespoon.net/2018/12/10-usability-rules-keyboard-mobile-app.html" target="_blank">How to handle the on-screen keyboard without messing up your app usability</a></li>
<li><a href="https://www.mobilespoon.net/2019/04/lessons-learned-app-store-screenshots.html" target="_blank">Lessons learned from our App Store screenshots redesign</a></li>
<li><a href="https://www.mobilespoon.net/2019/03/7-unique-ingredients-mobile-app.html" target="_blank">7 unique ingredients for creating a true mobile experience</a></li>
<li><a href="https://www.mobilespoon.net/2018/11/ux-writing-comprehensive-guide-for.html" target="_blank">40 UI rules for designing and writing better text in mobile apps</a></li>
</ul>
<br />
<div>
<br /></div>
<div>
And before you leave, if you haven't <a href="https://www.mobilespoon.net/p/newsletter.html" target="_blank">subscribed to my occasional newsletter yet</a> - <b>you don't know what you're missing!!!</b> (Not to mention you are probably not <a href="https://www.mobilespoon.net/p/newsletter.html" target="_blank">23% more awesome</a> than average...)</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<br />
<br />
<br /></div>
<div>
</div>
<div class="blogger-post-footer">Continue reading at the mobile spoon...</div>Gil Bouhnickhttp://www.blogger.com/profile/04778382332134032974noreply@blogger.com1tag:blogger.com,1999:blog-6554515860534069301.post-53506324192431572292018-11-04T16:31:00.001-08:002019-12-03T04:56:57.139-08:00What Size Should Your iPhone App Be Optimized For? [Design]<img alt="Mobile UI Design Dilemma: What size should your iPhone app be optimized for? " height="413" src="https://lh3.googleusercontent.com/-bGIA79AaQYg/W9-PWqSs1HI/AAAAAAAAPFM/bCDA6lQSZ3UWB9LuHx2MIGIpWt2u6Qu-wCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="Mobile UI Design Dilemma: What size should your iPhone app be optimized for? " width="750" /><br />
<br />
<br />
Itâs been almost 2 years since Apple introduced the all mighty nothing-but-screen (and notchâŚ) iPhone X.<br />
One year later, with 3 new X-style iPhones, and given that most companies <strong>design</strong> and <strong>showcase</strong> their apps on <strong>iPhone first</strong> - Iâm asking myself a few questions:<br />
<br />
<h3>
1. Which iPhone model (and size) should we optimize our UI for? </h3>
<div>
I know the theoretical answer is âall of themâ, but assuming I need to select only one - which one should it be? </div>
<h3>
2. Should we start small and scale-up or maybe the other way around? </h3>
<div>
<div>
Assuming the answer to Q1 is iPhone X/XS - should the design process start small and scale up to fit the more important models or maybe itâs time to change this design practice and start big? </div>
</div>
<h3>
3. In the case of a conflict - who wins? The big guys or the small ones? </h3>
<div>
When a UI design cannot scale up/down naturally, who gets the priority: the big phones or the smaller ones? </div>
<h3>
4. Now that iPhones are all giants, whatâs the smallest model we still need to support?</h3>
<div>
Is it still the <strong>ridiculously tiny</strong> iPhone 5S/SE (320x568)? Or maybe itâs time to move on and define the iPhone 6/7/8 as the smallest supported models? </div>
<br />
<br />
In this post, I will try to answer these questions.<br />
(BTW, if you are still uncertain about the resolution each iPhone model has - check out this <a href="http://www.mobilespoon.net/2018/10/mapping-new-iphone-xs-max-and-xr-screen.html" target="_blank" title="guide for iPhone resolutions on Google Analytics">guide for iPhone resolutions on Google Analytics</a>).<br />
<br />
<br />
<h2>
The common practice: </h2>
For many years, the common design practice was (and still is) to start with the smallest device and scale up.<br />
There are a few logical reasons for this:<br />
<ol>
<li>The smallest device presents the biggest challenges (screen real-estate, layout, microcopy)</li>
<li>Thereâs always a screen out there which is smaller than we assume (take even the biggest phone, increase the zoom level and the font size, and youâll end up with an extra cluttered UI and lots of layout issues)</li>
<li>In a world of â<a href="https://medium.com/wayfair-design/more-padding-please-b95e19422acc" target="_blank" title="white spaces in UI design">white spaces</a>â, scaling up while adding white spaces comes almost for free, and creates a great looking design</li>
</ol>
<div>
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://1.bp.blogspot.com/-FBcas8JG-Vc/XI1EQcrwbCI/AAAAAAAAPmU/EwpVtfVQqY4IrfsS3zxY-LA9Acxl8kD7wCLcBGAs/s1600/start%2Bsmall%2Band%2Bscale%2Bup%2B-%2Bmobile%2Bdesign.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Mobile UI design - start small and scale up" border="0" data-original-height="805" data-original-width="1600" height="322" src="https://1.bp.blogspot.com/-FBcas8JG-Vc/XI1EQcrwbCI/AAAAAAAAPmU/EwpVtfVQqY4IrfsS3zxY-LA9Acxl8kD7wCLcBGAs/s640/start%2Bsmall%2Band%2Bscale%2Bup%2B-%2Bmobile%2Bdesign.png" title="Mobile UI design - start small and scale up" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">In mobile UI design, scaling down is much harder than scaling up</td></tr>
</tbody></table>
<br />
<br />
<br />
This approach works well when the size differences between models are relatively minor.<br />
However, scaling up from very small models (such as iPhone 5S/SE) to phablets (such as iPhone XS Max) might involve unplanned design decisions, reorganization of content and layout reshuffles, similarly to what <a href="http://www.mobilespoon.net/2015/01/3-serious-reasons-why-responsive-ui-is.html" target="_blank" title="Responsive UI">responsive UI in web design</a> used to be 9-10 years ago.<br />
<blockquote>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<blockquote class="tr_bq">
What used to work well when scaling up from 4 inch to 4.7 inch (+18%), might not work when scaling up from 4.7 inch to 6.5 inch (+40%). </blockquote>
</div>
</blockquote>
<br />
<br />
<h2>
Appleâs backward compatibility: </h2>
Another reason to begin small is the fact that Apple itself, still continues to support the tiny iPhones:<br />
<ol>
<li>iOS 12 is still compatible with iPhone 5S and SE</li>
<li>The Media Manager in AppStore Connect still holds dedicated media files for iPhone 4S (3.5 inches) and iPhone 5/5S/SE (4 inches).</li>
</ol>
<br />
<br />
<h2>
The challenge: </h2>
iPhones models are changing in 2 areas:<br />
<ol>
<li>The size is changing dramatically (form being ridiculously small to being pretty giant) </li>
<li>The design is changing a lot (the new X-style models have much longer proportions and includes âunsafeâ areas that require special attention)</li>
</ol>
These transitions call for design and development actions, and while Apple is (still) committed to supporting smaller historical models, Iâm not sure developers should do the sameâŚ<br />
<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img alt="iPhone x was released almost 2 years ago and it's still easy to find apps design hiccups " height="416" src="https://lh3.googleusercontent.com/-6bczpbW3th4/W-AVf4KzU7I/AAAAAAAAPF0/DUWSVECUQHcUGPotEA03i4qv9UomkvVfwCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="iPhone x was released almost 2 years ago and it's still easy to find apps design hiccups " width="750" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;">iPhone X UI design pitfalls</td></tr>
</tbody></table>
<br />
<br />
<br />
To make a <strong>data-driven decision</strong> - I decided to check our <a href="http://www.mobilespoon.net/2018/10/mapping-new-iphone-xs-max-and-xr-screen.html" target="_blank" title="Google Analytics stats">Google Analytics stats</a> and see what our customers data shows.<br />
Keep in mind that the below numbers represent <a href="http://www.missbeez.com/" target="_blank" title="Missbeez">Missbeez</a> users only. Different apps with different <strong>target audience</strong> might experience different numbers.<br />
<br />
<br />
<h2>
Checking our own data:</h2>
I checked our device resolution stats filtered by geography (UK only) and time (2018 only).<br />
<strong>The result</strong>: iPhone 4/4S and 5/5S/SE were responsible for 0.25% of the activity, which is less than 1% of our active users. I think it's safe to say that iPhone 4 and his friends are all (finally) dead.<br />
<br />
<br />
<img height="448" src="https://lh3.googleusercontent.com/-859PhnBPjoM/W9-PZR3GQtI/AAAAAAAAPFU/Eu5Y3U8StMIG1O6zPm1YGFG0NvGLgYcHACHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" width="740" /><br />
<br />
<br />
Once again, this is only relevant to our own product: <a href="https://www.missbeez.com/" target="_blank" title="Missbeez - lifestyle services on demand">Missbeez</a>, which is a marketplace for lifestyle services on-demand. Our users are NOT kids using old phones their parents gave them, nor people who use the cheapest models, but nevertheless, I believe many companies can learn from our numbers.<br />
<br />
Next, I wanted to check how iPhone X (or the later models) were doing.<br />
After all, we all know app developers were reluctant to adopt the new UI guidelines until <a href="https://arstechnica.com/gadgets/2018/05/apple-all-app-updates-must-support-the-iphone-x-and-ios-11-come-july/" target="_blank" title="Apple gave them a deadline">Apple gave them a deadline</a>.<br />
I wanted to check how many of our active customers were using the iPhone X.<br />
I filtered our data to show active users during the second half of October 2018.<br />
<strong>The result</strong>: a year after the X debut, 16.3% of our active users are using iPhone X or XS.<br />
<br />
<br />
<img height="452" src="https://lh3.googleusercontent.com/-Wt6PH5d1L0E/W9-PbuR6CgI/AAAAAAAAPFY/aozp1hqYwu8wMc98kW-nzg4UaNCQ1P0yACHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" width="750" /><br />
<br />
Just as a comparison, thatâs 16.3% vs. 50% using the iPhone 6/6S/7/8 and additional 25% using the different âplusâ models.<br />
<br />
<br />
<h2>
Takeaways:</h2>
So to answer my original questions (and this might completely change in 6 months):<br />
<ol>
<li><strong>Do we still need to support iPhone 4/4S or iPhone 5S/SE? </strong></li>
<ol>
<li>No. </li>
<li>Having less than 1% of our customers using these ancient devices is a good reason to stop supporting them. </li>
</ol>
<li><strong>What iPhone should we optimize our user interface for? </strong></li>
<ol>
<li>I was hoping to say: iPhone X but I donât think that the adoption rate is fast enough.</li>
<li>So instead, Iâm suggesting the following: </li>
<li>Design using iPhone 6/7/8 (50% of our customers).</li>
<li>Modify (upon need), demonstrate (app store and ads) and promote using iPhone X/XS</li>
</ol>
<li><strong>Should we start small and scale-up or maybe do it the other way around? </strong></li>
<ol>
<li>We should continue with the âstart smallâ approach but the initial âsmallâ should be much bigger now. </li>
<li>The smallest device and the baseline to begin our work with is iPhone 6/7/8. </li>
</ol>
<li>What timeline are we talking about? </li>
<ol>
<li>Seems like this decision should be valid for the next 6 months. My assumption is that the X models will generate more traction in the upcming months with the introduction of reduces prices.</li>
</ol>
</ol>
<br />
Happy to hear your opinion about my conclusions and takeaways.<br />
<br />
<br /><div class="blogger-post-footer">Continue reading at the mobile spoon...</div>Gil Bouhnickhttp://www.blogger.com/profile/04778382332134032974noreply@blogger.com0tag:blogger.com,1999:blog-6554515860534069301.post-11004707105423743392018-11-02T08:57:00.001-07:002019-12-03T04:56:57.100-08:004 Mobile App Development Lessons For This Week<div> </div>
<div><img style="display: block; margin-left: auto; margin-right: auto;" src="https://lh3.googleusercontent.com/-1bd7t1ia0VI/W9xz8N9i8pI/AAAAAAAAPEk/RZntH8a_BB8aAzeIjTTO-MmF_5CxJAESACHMYCw/s5000/%255BUNSET%255D" alt="Mobile Development Tips" width="790" height="525" /></div>
<div> </div>
<div>Here’s a great collection of best practices when developing apps (mobile apps and general ones). </div>
<div>Extremely useful and educational! </div>
<div> </div>
<div> </div>
<div> </div>
<div><strong><span style="font-size: large;">1. <a title="The unpopular product development todo list " href="https://medium.com/ux-power-tools/50-things-you-probably-forgot-to-design-7a288b0ef914" target="_blank">The unpopular product development todo list</a></span></strong></div>
<div>A perfect list of small “todo” items we often forget about. </div>
<div>Browser favicon, logout option, default user image, empty states, terms & conditions, tab order, empty auto-complete state and many more. </div>
<div>I recommend reading it all and saving this for a rainy day. </div>
<div> </div>
<div><a title="Check list for mobile development " href="https://medium.com/ux-power-tools/50-things-you-probably-forgot-to-design-7a288b0ef914" target="_blank">Continue reading...</a></div>
<div> </div>
<div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div><strong><span style="font-size: large;">2. <a title="The new “Must Haves” for mobile apps to succeed in 2018" href="https://firstround.com/review/the-new-must-haves-for-mobile-apps-to-succeed-today/" target="_blank">The new “Must Haves” for mobile apps to succeed in 2018</a></span></strong></div>
<div>A brilliant article talking about Shortcuts and Hooks. </div>
<div><strong>Shortcuts: </strong></div>
<div>Effectively, shortcuts make your funnel less deep, by cutting out some steps. Take <strong class="Annotation -strong">Amazon</strong> for instance. When you buy a book, it immediately shows you other books people who bought that book purchased. You don’t need to go back and search for other books by the same author, or other books on the same topic. The list is right there in front of you. That’s an example of a shortcut.</div>
<div><strong>Hooks: </strong></div>
<div>Hooks broaden the top of your funnel. <strong class="Annotation -strong"><a class="Annotation -link" href="http://www.zillow.com/" target="_blank" data-external="true">Zillow</a></strong> is the perfect case study here. On average, people buy or sell a home every five years. Given that rate, it wouldn’t make sense to only market to people who have identified as home buyers or sellers. That audience would be a tiny moving target. Instead, Zillow redefined its addressable market with its “<strong class="Annotation -strong">Zestimates</strong>,” an estimated value of a home, which is a general curiosity for most people — who doesn’t want to know the value of the home they live in, or the one their boss lives in? It was the hook that got millions to engage with Zillow repeatedly.</div>
<div> </div>
<div><a title="Must haves in mobile apps development " href="https://firstround.com/review/the-new-must-haves-for-mobile-apps-to-succeed-today/" target="_blank">Continue reading...</a></div>
<div> </div>
<div> </div>
<div> </div>
<div><strong><span style="font-size: large;">3. <a title="What users hate the most about your app (according to Google)" href="https://uxplanet.org/what-users-hate-most-about-your-app-according-to-google-c4a089ddfafa" target="_blank">What users hate the most about your app (according to Google)</a></span></strong></div>
<div>A poll by Google found the main 4 reasons why users hate the apps they hate. <br />The main culprits when it came to users hating your mobile app or website were:</div>
<div>
<ul class="postList">
<li id="5471" class="graf graf--li graf-after--p">Waiting for slow pages to load</li>
<li id="270b" class="graf graf--li graf-after--li">Being shown ads</li>
<li id="98fc" class="graf graf--li graf-after--li">Unplayable videos</li>
<li id="ad8e" class="graf graf--li graf-after--li">Getting redirected to the homepage</li>
</ul>
</div>
<div>This article goes over all of them and suggests solutions: </div>
</div>
<div>
<div> </div>
<div><a title="What users hate the most about your app (according to Google)" href="https://uxplanet.org/what-users-hate-most-about-your-app-according-to-google-c4a089ddfafa" target="_blank">Continue reading...</a></div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div><strong><span style="font-size: large;">4. <a title="7 best practices for developing mobile apps" href="http://www.mobilespoon.net/2018/05/the-long-tail-of-mobile-apps.html" target="_blank">7 best practices for developing mobile apps</a></span></strong></div>
<div>This is article goes over 7 patterns that will give you a bigger control over your apps, allow you to easily support old versions of your apps when the users are reluctant to upgrade, and will help you create a healthy client/server architecture with solid backward compatibility. </div>
<div> </div>
<div><a title="The long tail of mobile apps - apps development " href="http://www.mobilespoon.net/2018/05/the-long-tail-of-mobile-apps.html" target="_blank">Continue reading...</a></div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div><span style="font-size: large;">More like this: </span></div>
<ul>
<li><a title="5 Brilliant UI/UX lessons for this week" href="http://www.mobilespoon.net/2018/10/5-uiux-tips-for-week-visual-hierarchy.html" target="_blank">5 Brilliant UI/UX lessons for this week</a></li>
<li><a title="5 great UI/UX lessons for this week" href="http://www.mobilespoon.net/2018/06/5-great-uiux-lessons-for-this-week.html" target="_blank">5 Great UI/UX lessons for this week</a></li>
</ul>
</div>
<div class="blogger-post-footer">Continue reading at the mobile spoon...</div>Gil Bouhnickhttp://www.blogger.com/profile/04778382332134032974noreply@blogger.com0tag:blogger.com,1999:blog-6554515860534069301.post-30075802266201943202018-10-26T14:32:00.001-07:002019-05-06T23:18:07.347-07:00Exploring WhatsApp's new popup menu as a UI case study<div>
</div>
<div>
<img alt="iOS standard popup menu vs. WhatsApp new popup menu. Which one is more convenient? " height="408" src="https://lh3.googleusercontent.com/-3EPgTLSg3V4/W9OH10fdfJI/AAAAAAAAPBQ/sG2bsPfcNiw3ao6jeY39p91zwExjoKTagCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="iOS standard popup menu vs. WhatsApp new popup menu. Which one is more convenient? " width="690" /></div>
<div>
<strong><span style="font-size: medium;"><br /></span></strong>
<br />
<br />
WhatsApp's new popup menu is a good example of how a mobile popup menu should look and behave. Let's tear it down to see why it's so much better than the default iOS popup menu:<br />
<br />
In one of its' latest updates, WhatsApp introduced a new popup menu that replaced the regular horizontal iOS-style menu with a vertical one.<br />
Itâs noticeably different and much more convenient, and although itâs a small UI component I believe that the change was made because users actually used the popup menu a lot and it was not comfortable enough.<br />
<br />
<br />
<img alt="iOS standard popup menu vs. WhatsApp new popup menu. Which one is more convenient? " height="383" src="https://lh3.googleusercontent.com/-hONUYZifaVI/W9OH5oOA0rI/AAAAAAAAPBU/Z7VLOB_iGIc_zQJrOa2sDqVOvmxTzhVWACHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="iOS standard popup menu vs. WhatsApp new popup menu. Which one is more convenient? " width="690" /><br />
<br />
<br />
So why do I get all excited about it?<br />
<ol>
<li>Moving away from standard UI components to custom UI components is interesting</li>
<li>The new popup menu is quite better than the iOS default one</li>
<li>Using the new one made me realize how much I <strong>hate</strong> using the standard iOS popup menu</li>
</ol>
<br />
Yep, the new popup menu is much better.<br />
Here are the advantages:<br />
<ul>
<li>The verticalized list is easier to scan</li>
<li>Each menu item includes an icon and a text which is great</li>
<li>Instead of the tiny âśď¸ button (indicating there are more items) that is not finger friendly, thereâs a new âMoreâ menu item and guess what - this one actually works well!<br />(admit it: how many times have you tried to hit the small âśď¸ button and accidentally closed the whole popup menu?)</li>
<li>The menu provides a super short and super elegant haptic feedback which improves the user experience and turns using the menu into an extremely delightful experience. </li>
</ul>
<br />
So yes, Iâm practically in love with this new popup menu. I think Iâm gonna use it much more now. In fact, I might go play with it some more⌠(or... something like thatâŚ)<br />
It emphasizes how bad the standard iOS popup menu is and I really hope someone at Apple decides to adopt it and turn it into an iOS standard.<br />
<br />
[<a href="https://www.mobilespoon.net/2016/10/heres-why-you-dont-use-iphones-3d-touch.html" target="_blank">Read: Here's why Apple's 3D Touch failed</a>]<br />
<br />
Oh, wait a minuteâŚ<br />
Come to think of it - Apple already some other popup menus, which is now even more weird, given that consistency is supposed to be so important to Apple's iOS user interface.<br />
<br />
<img alt="iOS springboardâs popup menus" height="417" src="https://lh3.googleusercontent.com/-m6YzftXrAhU/W9OH-jbmw-I/AAAAAAAAPBY/DEvBHfguJ24XaMWokVcVs4pKld1immukwCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="iOS springboardâs popup menus" width="690" /><br />
<br />
What do you think of the new popup menu?<br />
<br />
[<a href="https://www.mobilespoon.net/2019/03/7-unique-ingredients-mobile-app.html" target="_blank">Read: My 7 must-have ingredients for creating a true mobile experience</a>]<br />
<br />
<span style="font-weight: normal;"><span style="background-color: white; color: #5f5f5f; font-family: Roboto, sans-serif; font-size: 18px;">Follow me on twitter </span><a href="https://twitter.com/GilBouhnick" style="background: rgb(255, 255, 255); color: #2196f3; font-family: Roboto, sans-serif; font-size: 18px; text-decoration-line: none;" target="_blank" title="Gil Bouhnick on twitter">@gilbouhnick</a><span style="background-color: white; color: #5f5f5f; font-family: Roboto, sans-serif; font-size: 18px;"> or </span><a href="https://mailchi.mp/b9c664dfafa3/mobilespoon" style="background: rgb(255, 255, 255); color: #2196f3; font-family: Roboto, sans-serif; font-size: 18px; text-decoration-line: none;" target="_blank" title="The mobile spoon - mailing list">subscribe to the Mobile Spoon newsletter</a><span style="background-color: white; color: #5f5f5f; font-family: Roboto, sans-serif; font-size: 18px;"> to get my occasional blogs directly to your inbox.</span></span><br />
<br />
<br /></div>
<div class="blogger-post-footer">Continue reading at the mobile spoon...</div>Gil Bouhnickhttp://www.blogger.com/profile/04778382332134032974noreply@blogger.com0tag:blogger.com,1999:blog-6554515860534069301.post-58844494332950119682018-05-21T15:16:00.004-07:002021-01-21T15:54:59.117-08:00The zombies are not coming<img alt="The zombies are coming to destroy your mobile app - the mobile spoon" height="353" src="https://lh3.googleusercontent.com/-RfKOVtnyk6Q/WwNE4YxbUPI/AAAAAAAAOz8/f8yjyJOg6Qo5S2NamsGEJHgO9Mo-tJZKgCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="The zombies are coming to destroy your mobile app - the mobile spoon" width="601" /><br />
<br />
<h2>
<span style="font-size: large; font-weight: normal;">Or: How we totally screwed up our product launch thinking that they areâŚ</span></h2>
Two years ago we launched <a href="https://www.mobilespoon.net/2018/10/missbeez-hottest-startup-in-tel-aviv.html" target="_blank" title="Missbeez - marketplace for lifestyle services on demand">Missbeez, a marketplace for lifestyle services on-demand</a>.<br /><br /><div>
The first version of the app was available for iPhone only and included 2 apps: one for the customers (busy women ordering beauty services straight to their homes 24/7), and one for the service providers (self-employed professionals looking for ways to expand their customer reach and grow their business).<br />
<br />
Two days before our app submission due date, we started to feel nervous about our ability to deliver.<br />
<br />
We got closer to the <a href="http://www.mobilespoon.net/2019/01/product-shipping-why-i-love-shipping-so.html" target="_blank">Shipping</a> date and doubts started to grow: are we ready? Is it too early to ship? Should we make another round of improvements? </div><div><br /></div><div style="text-align: center;"></div><blockquote><div style="text-align: center;">Classic mistake #1: founders always fear that their product is not ready for release, but guess what? Your product will never be completely ready, and the cost delay is always higher than the risk of having problems in production. </div><div style="text-align: center;"></div></blockquote><div style="text-align: center;"><br /></div><div><br /></div><div>
Back to the story: </div><div><br />So back in those days, weâve been testing our apps but didnât have the capacity (or tools) to do proper load testing, and suddenly those 500 early adopters who registered upfront (through our early-adopters landing page) seemed like a risky volume.<br />
<br />
- âWho knows what will happen when those hundreds of users will download the app and start messing around with it <b>simultaneously</b>!â.
</div><div><br /></div><div>Thatâs me BTW, scaring the hell out of my co-founder 2 days before launch...<br />
<br />- âIt will be like one of those zombie scenes where the heroes hide inside an abandoned warehouse surrounded by dozens of raging zombies!â </div><div><br /></div><div><br /></div><div>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><img alt="The zombies are coming to destroy your mobile app - the mobile spoon" height="338" src="https://lh3.googleusercontent.com/-t8I0xpxT7f0/WwNE-AP9tgI/AAAAAAAAO0A/kxAq_RHTK7s8wmif9b5K6-f6TXtCGhzJQCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto; text-align: center;" title="The zombies are coming to destroy your mobile app - the mobile spoon" width="601" /></td></tr><tr><td class="tr-caption" style="text-align: center;">You release an app and a minute after, thousands of zombies are killing it, right?</td></tr></tbody></table></div><div><br /></div><div><br /></div><div><br /></div><div><br />
We agreed on a few things that seemed very reasonable that evening:<br />
<ol>
<li>Zombies exist.</li>
<li>They will attack us and crash our servers the minute the app will become available in the App Store</li>
<li>We can stop the zombies if we create an â<strong>invitations only</strong>â mechanism that will help us filter in small groups of users gradually.</li></ol><div><br /></div><div><br /></div><div><span style="text-align: center;"><blockquote>Classic mistake #2: thinking that customers will just come, create viral loops and network effect (after all, we did mention it in our pitch deck, right?) that will make the founders rich and famous. </blockquote></span></div><div><br /></div><div>The story continues: </div><div><br /></div>So following that horrifying evening, we developed a beautiful full-screen popup that showed up right after the sign-up form. and asked users to enter their invitation codes. </div><div><br /></div><div>We sent various invitation codes to our early adopters and submitted the app for review.</div><div><br /></div><div>Please Apple, please approve us and let our conquest begin!<br />
<br />
We were ready for the zombies!</div><div><br />
<br />
<img alt="The zombies are not coming - the mobile spoon" height="341" src="https://lh3.googleusercontent.com/-iebt7QQ5gg8/WwNFELnoXTI/AAAAAAAAO0E/Pj25kBXTpUo5lCCgLGsbmtzJEThbpKJIwCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="The zombies are not coming - the mobile spoon" width="601" /><br />
<br />
<br />
[Read: <a href="https://www.mobilespoon.net/2019/04/lessons-learned-app-store-screenshots.html" target="_blank">Lessons learned from our App Store screenshots redesign</a>]<br />
<br />
<h2>
<span style="font-size: large; font-weight: normal;">A few days later our app was available on the App Store.</span></h2>
We waited...</div><div><br />
Few days... <br />
<br />
The zombies didn't come...</div><div><br /></div><div>Oh, except for this one: <br />
<br />
<br />
<img alt="The zombies are coming to download your app!" height="338" src="https://lh3.googleusercontent.com/-pWWGU3WX3uI/WwNFH25l8dI/AAAAAAAAO0I/7dLEiVKmdrgiIDt53KEEnoKtzyclwiHdQCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" title="The zombies are coming to download your app!" width="601" /><br /></div><div><br /><br />Which leads me to mistake number 3: </div><div><br /></div><div style="text-align: center;"><blockquote>Classic mistake #3: Thinking that the <a href="https://www.mobilespoon.net/2019/02/beware-of-early-adopters.html" target="_blank">early adopters</a> that signed-up on your landing page are already your raging fans and will immediatly use your app once it's published.</blockquote></div><div><br />Guess what? Nobody cares, and even your early adopters are not waiting in-line to give your product a try. They will do it whenever they see fit, and it might take a while. </div><div><br /></div><div>We started to feel the disappointment, and wanted to push things forward: </div><div>
<ul>
<li>We called our early adopters who made an effort and signed up in advance, but for some reason didnât even download the app. Most of them said they were just â<i>too busy</i>â. </li>
<li>We explored our <a href="https://mixpanel.com/" target="_blank">MixPanel</a> and <a href="https://firebase.google.com/" target="_blank">crashlytics</a> logs to see if there was any problem with the app.</li>
<li>We checked our server's internal logs </li>
</ul>
<br />
Weâve discovered a few interesting things that week:
<ol>
<li>Our early adopters were very <b>anxious</b> to register through our website, but somehow, when it came to downloading the app itself and using it - they were much more <b>hesitant</b>.</li>
<li>The first organic downloads were mostly bots scanning the App Store. </li>
<li>Our âinvitation-onlyâ popup (the one we added 2 days before the launch date) sucked. Seriously sucked... </li>
</ol>
<br />
It took a bit of an investigation in our internal logs to realize our genius iOS developer (that was me đđťââď¸) really messed up with the early adopter's module.</div><div><br />
In fact, the result was so bad, it felt like a riddle⌠something like: âletâs see if you could pass the test and get access to the app":<br />
<ul>
<li>The labels sucked</li>
<li>It popped up immediately after the SMS verification code, as a result, many users thought they needed to re-enter the verification code (instead of the invitation code). </li>
<li>It was case sensitive (who does that!?).</li>
<li>The text field had âauto-completeâ and âauto-capitalizationâ attributes turned-on (Someone forgot to turn them off (Yep. Me again))</li>
<li>As a result - entering an invitation code such as â<strong>friend</strong>â would automatically change to â<strong>Friend </strong>â (notice the capital F and extra space at the end?) resulting in accidental mismatches. </li>
<li>Comparing strings - "Friend " is not equal to "friend" which caused the invitation code to fail... </li>
<li>We could easily solve that problem by âtrimmingâ the text and lowering the case⌠(a basic thing in UI development) but guess what... </li>
<li>Unfortunately, we (đđťââď¸me again!) chose not to do that for some bad reasonâŚ</li>
</ul>
<br />
The result was that the very few users that actually <b>did</b> try to install and try out the app - failed to do so quite miserably due to our silly "invitations-only" popup. <br />
<br />By checking the logs, we've found <b>typos</b>, extra <b>spaces</b>, verification codes instead of invitation codes, and other goodies that simply prevented our users from onboarding the app. </div><div><br /></div><div>Talk about optimizing for conversion rates... <br />
<br />
We had to roll back the early adopters module.<br />
<br />
Luckily for us, we had an <a href="https://www.mobilespoon.net/2019/02/10-product-principles-give-full.html" target="_blank" title="on/off switch for new mobile features">on/off switch</a> for this module, which is a great way to <a href="https://www.mobilespoon.net/2019/02/10-product-principles-give-full.html" target="_blank">control your mobile apps once they are released</a>.<br />
<br /><br />
It didnât bring in thousands of zombies, of course, but at least it helped the few that did show up get started easily without any <a href="https://www.mobilespoon.net/2020/03/when-friction-in-ux-becomes-good-thing.html" target="_blank">friction</a>.<br /><br /></div><div>And that leads me to one of the most important lessons we've learned: </div><div>In the early days of your product - thereâs practically nothing you can do that will tear your product apart.<br /> You can send thousands of invites, cut your prices in half, give out free coupons and nothing bad will happen, simply because the volumes are very low and you're just trying to build some initial traction. </div><div><br />
<blockquote>
<blockquote class="tr_bq" style="text-align: center;">
Gaining traction takes time. </blockquote></blockquote>
<br />
<h2>
<span style="font-size: large;">The moral of the story: </span></h2><div><span style="font-size: large;"><br /></span></div>
<div>
<h3>
<span style="font-size: medium;"><strong>1. Be bold</strong></span></h3>
</div>
<div>
Whether you are launching a new product, new feature, or exploring a new idea - do it with full confidence and full power.</div>
<div>
Release it before itâs ready, tease the world with it, invite the zombies in, let it break! </div><div><br /></div>
<blockquote>
<blockquote class="tr_bq" style="text-align: center;">
In the rare scenario that your product will collapse under a zombies attack you will know that you're on to something, and that have plenty of time (and money) to fix your product. </blockquote>
</blockquote>
<br />
<div>
</div>
<div>
<h3>
<strong><span style="font-size: medium;">2. Always have a backup plan</span></strong></h3>
</div>
<div>
Being bold is cool, but always include an on/off switch as part of your new features so you can easily rollback whenever bad things are happening in production.</div><div><a href="https://www.mobilespoon.net/2019/02/10-product-principles-give-full.html" target="_blank">10 product development practices that will give you full flexibility and control on your mobile app</a></div>
<div>
</div>
<div>
<h3><strong><span style="font-size: medium;"><br /></span></strong></h3><h3>
<strong><span style="font-size: medium;">3. Invest in your logs</span></strong></h3>
</div>
<div>
Donât settle with the standard tools. Add your own, based on your specific needs. </div>
<div>
Weâve created a useful logging mechanism that sent us a user-friendly description of everything that happened in the system via emails. </div><div><br /></div>
<div>
It acted as a log for our non-developers employees, it had a great push functionality (since it used emails) and it created full visibility of whatâs going on in the field - to everyone, not just the developers. The benefits of having such a system (on top of the technical logs) are that it helps field managers see what's going on or go back to events that already passed. <br />
<br />
<br /></div>
<div>
</div>
<div>
<h3>
<strong><span style="font-size: medium;">4. Donât get stuck on theoretical technical glitches</span></strong></h3>
</div>
<div>
Technical glitches are usually easier to solve compared to creating initial traction, achieving product/market fit, or <a href="https://www.mobilespoon.net/2019/07/cohort-analysis-retention-rate.html" target="_blank">retaining your users</a>. </div><div><br /></div>
<div>
Donât let technical challenges stop you from making your bold moves. </div><div>You can always fix stuff along the way through <a href="https://www.mobilespoon.net/2020/12/the-advantages-of-frequent-shipping.html" target="_blank">frequent shipping</a>.</div><div><br /></div><div>Startups need to move fast, sometimes at the cost of sacrificing code quality, architecture, etc. </div><div><br /></div><div>That's OK.</div><div><br /></div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
Even today, with thousands of highly engaged customers, we are still using the phrase â<strong>the zombies are not coming</strong>â to remind ourselves that itâs OK to make frequent changes to the product and try new things, even if most of them fail.</div><div><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-YDv5Mgvyqy8/YAoRYK5sJrI/AAAAAAAARNM/fW_KNxjoOb0MSIGPFpjhVRhmyIGCY6gxwCLcBGAsYHQ/s1848/Frequent%2Bshipping.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Run short, iterative experiments - even if most of them fail" border="0" data-original-height="708" data-original-width="1848" height="246" src="https://1.bp.blogspot.com/-YDv5Mgvyqy8/YAoRYK5sJrI/AAAAAAAARNM/fW_KNxjoOb0MSIGPFpjhVRhmyIGCY6gxwCLcBGAsYHQ/w640-h246/Frequent%2Bshipping.png" title="Run short, iterative experiments - even if most of them fail" width="640" /></a></div><br /><div>That's it for this one. </div><div><br /></div><div>Before you drop off, don't forget to <a href="https://www.mobilespoon.net/p/newsletter.html" target="_blank">subscribe</a> to my newsletter and become 23% more awesome than average. </div><div><br /></div><div> </div><div><br /></div><div>
<h3>
<br /></h3>
<br /></div><div class="blogger-post-footer">Continue reading at the mobile spoon...</div>Gil Bouhnickhttp://www.blogger.com/profile/04778382332134032974noreply@blogger.com0tag:blogger.com,1999:blog-6554515860534069301.post-47685047230985241052018-05-15T16:27:00.001-07:002018-11-15T01:13:19.713-08:00Would You Get So Excited if Google Duplex Called a Taxi Station to Book a Cab? <img height="327" src="https://lh3.googleusercontent.com/-EiM_R21Abg0/Wvts3HbPbZI/AAAAAAAAOy4/pUOUpecmp_scMBFTTiLHSn7UFWmB17z8gCHMYCw/s5000/%255BUNSET%255D" width="534" /><br />
<br />
Googleâs <a href="https://ai.googleblog.com/2018/05/duplex-ai-system-for-natural-conversation.html?m=1" target="_blank">Duplex</a> demo was breathtaking.<br />
A computer that talked like a human, said âummâ and âmm-hmmâ, and booked a hair appointment over the phone.<br />
But for the sake of the discussion:<br />
<br />
<blockquote>
<span style="color: #003366; font-size: medium;"><strong>Would you get so excited to see Googleâs Assistant pick up the phone and call a local taxi station to book a cab? </strong></span></blockquote>
<br />
Donât think soâŚ<br />
I assume your first reaction would be: <br />
<br />
<blockquote>
<div>
<span style="color: #003366;"><strong><span style="font-size: medium;">âThatâs nice, but didnât we solve that already with Uber?â </span></strong></span></div>
</blockquote>
<br />
And indeed it seems like Googleâs Duplex can be a fine solution for <strong>yesterdayâs problem</strong>. <br />Today you reserve a table in a restaurant, order a taxi or a food delivery, without involving humans: using dedicated apps.<br />
These apps are optimized for the tasks they do best:<br />
<ol>
<li>They eliminate the need to make phone calls, wait in line, call againâŚ</li>
<li>They can be work in the background (during meetings, other activities, etc.) </li>
<li>They maximize the probability to succeed with the booking (by checking availability, finding alternatives)</li>
<li>They provide a unique set of features each domain needs in order to maximize our satisfaction</li>
</ol>
<br />
<span style="font-size: medium;"><strong>Letâs talk about booking a hair appointment for a minute. </strong></span><br />
<strong><em>Disclaimer</em></strong>: Iâm the Co-Founder and CTO at <a href="http://www.missbeez.com/" target="_blank">Missbeez</a>, a brilliant mobile app that lets busy people easily order beauty and lifestyle services to their home or office.<br />
Dealing with the business of ordering beauty & lifestyle services for over 2 years now, Iâve learned that many of the treatments have specific preferences and complexities that need to be addressed during the booking process: personal preferences, favorite beauticians, special needs (specific material, color, brand), special limitations (certain availability, sensitivity for a certain material), etc.<br />
Itâs hard to imagine a complex booking process made by a digital assistant without having to either provide cumbersome instructions in advance, or interfere in the middle of the process manually. Both options donât sound very elegant, but hey, both of them are already <strong>solved</strong> by products that specialize in this domain, such as <a href="https://www.google.co.il/url?sa=t&rct=j&q=&esrc=s&source=web&cd=12&cad=rja&uact=8&ved=2ahUKEwiAq9Ck6IjbAhWH66QKHXYgBF0QFjALegQIARB-&url=https%3A%2F%2Fitunes.apple.com%2Fil%2Fapp%2Fmissbeez-book-beauty-services%2Fid1010785927%3Fmt%3D8&usg=AOvVaw3WdB0ZEOhQdctI3-Wj_GAt" target="_blank" title="Missbeez">Missbeez</a>.<br />
<br />
Instead of re-inventing the<strong> old way</strong> of performing such tasks over the phone, Google Assistant should <strong>connect</strong> with the best apps (or services) for the job.<br />
It needs to act as the <strong>pivot</strong> for all of those activities, just like <strong>Googleâs Search</strong> already does:<br />
<ul>
<li>Search for âMachine Learningâ and google will show you a small summary box taken from Wikipedia. </li>
<li>Search for a certain hotel in London and you will get a quick booking box linked to hotel booking apps. </li>
</ul>
Those small boxes (Knowledge Graphs) are based on existing tools and Google connects with the best tools to get the data or perform your task.<br />
<br />
Similarly, a <strong>truly advanced personal assistant</strong> would find the most efficient path to perform a task, and in the case of the hair appointment - use an dedicated service such as Missbeez to perform the booking (in one simple transaction), and avoid the tedious process of calling salons to check availabilities and ask for an appointment.<br />
In the real world, this is what makes personal assistants useful: they <strong>know</strong> how to <strong>get things done</strong>, they have their own ways, and they usually do it more efficiently than the rest of us do. This is what I would expect to see form a truly useful digital PA.<br />
<br />
<img height="370" src="https://lh3.googleusercontent.com/-LOeAW3urcGQ/Wvts3qeL_9I/AAAAAAAAOy8/T5ciFsKSHX0nBwmSPPbO1v0eadx-p0LngCHMYCw/s5000/%255BUNSET%255D" width="464" /><br />
<br />
<span style="font-size: medium;"><strong>But that's hardly the beginningâŚ</strong></span><br />
Launching an app in order to do âsomethingâ is easy. Even Siri can do that.<br />
The main challenge is <strong>maintaining</strong> the conversation <strong>active</strong> while performing the task, because when it comes to real-word scenarios - the tasks are not really done in one action. <br />Many tasks require a sequence of actions to be made and we want our PA to handle them altogether.<br />
This is where things fall short:<br />
Today, the minute your digital Personal Assistant launches an app to perform the first action of a sequence, it basically âdiesâ and passes the context to that app.<br />
The app takes over, while the history of your conversation with your PA is forgotten. It loses the context and any attempt to continue the conversation from where you left off - will probably fail. <br />
<br />
What <a href="https://ai.googleblog.com/2018/05/duplex-ai-system-for-natural-conversation.html?m=1" target="_blank">Google demonstrated with Duplex</a> was a personal assistant that is presumably capable of <strong>maintaining</strong> a very long conversation <strong>without losing the context</strong>.<br />
Embedding this capability with the ability to activate different apps and services without losing the conversation context will be a breakthrough!<br />
Weâll be able to maintain long (even parallel?) conversations with our PAs and continue each conversation without recreating the whole context all over again.<br />
We will throw follow-up requests such as:<br />
<ul>
<li>âHey Siri, can you <strong>recheck</strong> the availability in <strong>that</strong> restaurant?â </li>
<li>âOK Google, please notify me when <strong>he is</strong> 2 minutes awayâ </li>
<li>âCan you <strong>change</strong> the due date from tomorrow to Wednesday?â </li>
<li>âPlease check the last response weâve got from <strong>him</strong>â</li>
</ul>
<br />
Keeping the context active and jumping from one thread to another will lead the way to a personal assistant that not only acts as a pivot to âkick offâ a task, but also a pivot for managing the whole sequence of actions, required to complete the task.<br />
<br />
Canât wait to hire one of those assistantsâŚ<br />
<div class="blogger-post-footer">Continue reading at the mobile spoon...</div>Gil Bouhnickhttp://www.blogger.com/profile/04778382332134032974noreply@blogger.com0tag:blogger.com,1999:blog-6554515860534069301.post-57147176230272275492018-05-14T09:39:00.001-07:002019-05-23T06:23:17.468-07:00GDPR - The Practical, No-Fluff, Actionable Todo List<br />
<div style="text-align: center;">
<img alt="GDPR - The Practical, No-Fluff, Actionable Todo List" height="360" src="https://lh3.googleusercontent.com/-xCecREkV1Do/Wvn343ZPS8I/AAAAAAAAOyk/449ylywUgzE5Q5uvu5BFlU0KOQnuGTHmQCHMYCw/s640/%255BUNSET%255D" title="GDPR - The Practical, No-Fluff, Actionable Todo List" width="640" /></div>
<br />
<br />
GDPR hell is here.<br />
After reading too many GDPR articles, Iâve decided to summarize the important stuff in a short, clear, no-fluff actionable list.<br />
A list I can use to prioritize our work internally, and hopefully a list that can help other developers or product managers understand what needs to be done.<br />
<strong style="font-size: large;"><br /></strong>
<h2>
<strong style="font-size: large;">General Guidelines: </strong></h2>
<ol>
<li>Save as little personal data as possible. </li>
<li>Avoid making fields mandatory unless absolutely required by the business. (please note that Apple is already rejecting apps for excessive use of mandatory fields).</li>
<li>Allow users to edit their data at any given time (make sure you have an âeditâ functionality).</li>
<li>Donât track user activity to learn their taste and interests (probably relevant for marketing and giant companies) - I wouldnât get excited about this one. </li>
<li>Security questions should not use personal data (like your kidâs name).</li>
</ol>
<strong style="font-size: large;"><br /></strong>
<h2>
<strong style="font-size: large;">Encryption: </strong></h2>
<ol>
<li>Use HTTPS</li>
<li>Encrypt all personal data (email, phone, address) with strong encryption algorithms including hashing. If you have not idea how to do it without messing up you product - you are probably not alone. </li>
<li>Store logs in a safe place, preferably encrypted.</li>
<li>Delete old logs automatically.</li>
</ol>
<strong style="font-size: large;"><br /></strong>
<h2>
<strong style="font-size: large;">General security measures:</strong></h2>
<ol>
<li>Be committed to notifying the national supervisory authority of any serious data breaches as soon as possible. (are you committed? Be committed!). </li>
<li>Make sure sessions and cookies expire when the user logs out (relevant for websites). </li>
<li>Use OAUTH to connect with other systems.</li>
<li>While you go over your connected systems (all the integrations you ever developedâŚ) - make sure you also use HTTPS.</li>
</ol>
<strong style="font-size: large;"><br /></strong>
<h2>
<strong style="font-size: large;">Terms of use:</strong></h2>
<ol>
<li>Create clear and readable âterms of use' text - make it available from the main page. </li>
<li>Explain why you are storing some data about the user (i.e. we need your address to determine who is available near you).</li>
<li>Tell the users that their data is stored encrypted (unless, of course, you still havenât figured out how to do thatâŚ).</li>
<li>Inform users about any data sharing with any 3rd party tool, plugin or app.</li>
<li>Tell the users about logs that are using their location. Explain that the data is all encrypted. </li>
<li>Websites using cookies should notify their readers about it even without having to look for the terms of use. </li>
</ol>
<div>
</div>
<strong style="font-size: large;"><br /></strong>
<h2>
<strong style="font-size: large;">Double opt-in:</strong></h2>
<ol>
<li>Have a dedicated opt-in checkbox (<span style="text-decoration: underline;">unchecked</span> by default) for receiving marketing materials from your company.</li>
<li>Best practice talks about double opt-in (sending an approval email) but I think this is only a recommendation for now. </li>
<li>Have a simple way to opt-out via each email you send (unsubscribe functionality). </li>
<li>Store the âdateâ when the consent was given by the user (donât store it as a boolean - store the actual date!).</li>
<li>Old users should get an email asking them to opt-in again in order to ensure their consent. This practically means you will lose 90% of your current mailing list because most users will not do it, so itâs important to tie this with a small gift for the ones who will opt-in againâŚ).</li>
<li>Beware not to send your special GDPR out-in/out emails to the old users who already unsubscribed from your mailing lists. </li>
</ol>
<strong style="font-size: large;"><br /></strong>
<h2>
<strong style="font-size: large;">The right to be forgotten:</strong></h2>
<ol>
<li>Add a âDelete Accountâ button to your account/settings page. </li>
<li>Deleting the account should theoretically remove the user from the production database, but the problem is that you probably cannot do that (technically and business wise). </li>
<li>What you can do is: obfuscate this user information so no one can never know itâs him (name, phone, email, address, twitter account, website link) while keeping his record just for the sake of referential integrity.</li>
<li>Take those details and place them inside another database that has nothing to do with your production system or marketing tools, just to be covered in case this user will ever attempt to sue you or something⌠You need to be covered!</li>
<li>Make sure all marketing related fields are completely removed: emails, phone numbers, push notifications tokens, facebook, twitter - you need to completely forget about this guy.</li>
<li>Do not break your database references⌠</li>
<li>Notify your integrated tools that this user needs to be deleted. They should support this functionality as well. </li>
</ol>
<strong><span style="font-size: medium;"><br /></span></strong>
<h2>
<strong><span style="font-size: medium;">The right to know what you know (or think you know):</span></strong></h2>
<ol>
<li>Add an âexportâ button to your account/settings page so users can ask for their data. </li>
<li>Create a dedicated function that collects all the personal data of a given user and creates a human-friendly text report.</li>
<li>Send this report via email or as a file. </li>
</ol>
<br />
<strong style="font-size: large;"><br /></strong>
<h2>
<strong style="font-size: large;">General tips</strong></h2>
GDPR will change over time, itâs too early to spend all your development efforts implementing things that may soon be changed.<br />
Prioritize accordingly.<br />
<ol>
<li>Build a plan, write down all the tasks, and prioritize them. </li>
<li>Make sure your software complies with at least 50% of the items above. </li>
<li>The rest should be included in your plan. Be serious about the plan. </li>
<li>Some of the items can be supported manually when needed (for example, you can send the personal details-on-demand). </li>
<li>Itâs important to have a document describing everything that exists and everything that is still âin-progressâ so in case of an audit you will be able to present it to the auditor. </li>
<li>Demonstrate awareness, alignment, a plan, and enough achievements with GDPR, you can probably get away even if you have some âhiccupsâ here and there. </li>
</ol>
<br />
Enjoy!<br />
GDPR is fun actually.<br />
No, seriously. It's fun, we just donât know it yet.<br />
<br /><div class="blogger-post-footer">Continue reading at the mobile spoon...</div>Gil Bouhnickhttp://www.blogger.com/profile/04778382332134032974noreply@blogger.com0tag:blogger.com,1999:blog-6554515860534069301.post-87291661163342188552018-05-01T16:39:00.001-07:002018-10-26T03:55:17.058-07:00How To Properly Support Older Versions Of Your Mobile App [Development Best Practices]<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-7eJhz9xTkZM/W8z6c4-GJaI/AAAAAAAAO_k/nJhiPA3lOhYC0LtT4cPXWdHirVGfAj6AQCLcBGAs/s1600/long%2Btail%2Bof%2Bmobile%2Bapps.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" data-original-height="778" data-original-width="1600" height="308" src="https://2.bp.blogspot.com/-7eJhz9xTkZM/W8z6c4-GJaI/AAAAAAAAO_k/nJhiPA3lOhYC0LtT4cPXWdHirVGfAj6AQCLcBGAs/s640/long%2Btail%2Bof%2Bmobile%2Bapps.png" title="Development best practices when supporting the long tail of mobile apps" width="640" /></a></div>
<br />
<br />
<div style="text-align: center;">
<strong>On one hand - you work fast, release frequent updates and push your product forward. </strong></div>
<div style="text-align: center;">
<strong>On the other hand - your customers are running behind; they are not automatically upgrading their apps, forcing you to continue and support old versions of your own product. </strong></div>
<br />
<br />
I assume most of you, tech readers, either use the automatic app update option or review your apps in the AppStore every once in a while. <br />
This is not the case for many of your less-technical (or should I say: less excited) users. <br />
For example, I recently discovered my wife has 45 updates waiting for her, and Iâm not even sure she has 45 apps installed on her phoneâŚ<br />
<br />
<img height="411" src="https://lh3.googleusercontent.com/-uW3ONeU10eY/Wuj8FzwdXxI/AAAAAAAAOxY/vSjGV6CROO80j4PMeuVxqEMdeqKCUJkGgCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" width="232" /><br />
<br />
<br />
<blockquote>
<strong><span style="font-size: large;">Too many users have the âautomatic updateâ turned off</span></strong></blockquote>
For us at <a href="http://www.missbeez.com/" target="_blank" title="Missbeez">Missbeez</a>, this is already known and given. <br />
Monitoring our <u>active</u> customer sessions shows that 2 weeks AFTER the release of a new version of our app - over 80% of the actions made in our marketplace are made using OLDER versions of our mobile app. Both Android and iOS.<br />
<br />
<img height="384" src="https://lh3.googleusercontent.com/-Ji3bo0wINFo/Wuj6km45CoI/AAAAAAAAOxA/h9kipc1zRTUG-bYwgMN_vAvmfzNNdwxeQCHMYCw/s5000/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" width="379" /><br />
<br />
<br />
<strong>Thatâs more than 80% not taking advantage of our new features that we just released, and more importantly: 80% that are not aligned with our latest business logic and recent changes.</strong><br />
<strong><br />
</strong> I call this phenomena <strong>the long tail of mobile apps</strong>, and itâs quite unique to native apps because web apps are usually getting their latest sources automatically when the web page is refreshed.<br />
<br />
The long tail of mobile apps causes a headache both to the product and the development teams because every new feature needs to be designed in a way that will not break old functionality of older apps. In many workflows of your app this might work without doing anything special, but the challenge lies within sensitive workflows such as check outs, special deals, payments, summaries, etc. where the "correct" behavior must apply to all the users, regardless to their version number.<br />
<br />
There are few design principles to better control your old versions and maintain a consistent business logic without forcing your users to upgrade:<br />
<br />
<br />
<span style="font-size: large;"><strong>1. Load all you app resources from the server</strong></span><br />
Store your app resources (strings, images, sounds, etc.) on your server and download them to your app when needed.<br />
This will allow you to modify much of your product UI without having to release a new version for every change.<br />
It will also give you an immediate control on the look and feel of your older apps and a pretty nice way to A/B test visuals and micro copy changes.<br />
You can minimize the impact on performance by developing a âsmartâ download mechanism that will only run when something has changed.<br />
<br />
<br />
<span style="font-size: large;"><strong>2. Use dictionary objects</strong></span><br />
This is a common pattern in B2B products where configurability is key: replace your code enums with a dictionary collection stored in your database.<br />
This will allow you to change your enums on-the-fly without having to change the code.<br />
For example, if a certain action requires selecting a âreason-codeâ - itâs better to store all reason codes in a table.<br />
Doing so will ensure all the components of your product can access those enums, and as your product evolves, you will be able to change that list without worrying about the users using your older releases not being able to see those changes. <br />
<br />
<br />
<div style="text-align: left;">
</div>
<div style="text-align: center;">
<table align="center" cellpadding="14" style="background-color: #f7f7f7; height: 154px; width: 612px;"><tbody>
<tr> <td style="width: 602px;"><div style="text-align: center;">
Might also interest you:</div>
<div style="text-align: left;">
<div style="text-align: center;">
<span style="font-size: medium;">- <a data-blogger-escaped-target="_blank" href="http://the%20zombies%20are%20not%20coming/">The zombies are NOT Coming</a></span></div>
</div>
<div style="text-align: left;">
<div style="text-align: center;">
<span style="font-size: medium;">- <a data-blogger-escaped-target="_blank" href="http://www.mobilespoon.net/2018/04/5-things-i-learned-in-transition-from.html">5 Things I learned in the transition from B2B to B2C</a></span></div>
</div>
<div style="text-align: left;">
<div style="text-align: center;">
<span style="font-size: medium;">- <a data-blogger-escaped-target="_blank" href="http://www.mobilespoon.net/2017/01/how-microsoft-powerpoint-can-be-your.html">How to turn PowerPoint into a rapid visual UI editor</a></span></div>
</div>
</td> </tr>
</tbody> </table>
</div>
<br />
<br />
<br />
<span style="font-size: large;"><strong>3. On/Off switches</strong></span><br />
When you develop a B2C app you cannot always predict the impact of new features on your customers behavior.<br />
As a backup, you should always include on/off switches for your features to allow an easy rollback if needed.<br />
Having a switch allows you to safely try new stuff and quickly revert back if the results are not what youâve expected.<br />
<br />
<br />
<span style="font-size: large;"><strong>4. Move logic to the server</strong></span><br />
As a rule of thumb, I recommend moving all of your business logic to the server.<br />
In fact, any piece of logic that might change in the future should reside on the server side to allow maximum flexibility, even if it is a client side feature.<br />
It sounds weird at first, especially since native apps are often developed as âfatâ clients, but believe me - stay away from client side logic that will eliminate your flexibility and complicate your backward compatibility support.<br />
Do it all on the server and when the day comes to change something (and it will come), you will be able to change it in one centralized location and it will immediately change the behavior of all your installed apps, regardless to how old they are.<br />
<br />
<strong>Example: </strong><br />
Letâs say you are selling services through your app with coupons, discounts and all the usual goodies.<br />
Now, letâs assume that at first you only have one simple type of coupons with fixed price. Thatâs probably a very simple calculation to do and you will probably develop it in the client side: if a customer needs to pay $100 and uses a $20 coupon than the total amount to pay would be $80. The cart should show the total items, the discount and the total sum to pay. Doesnât sound like something that needs to be calculated on the server, right?<br />
<br />
But now, letâs assume that you start distributing a new type of coupons with % discount.<br />
Assuming many of your customers are still using old versions - they wonât be able to use those new coupons since their app will not know how to translate those new coupons into discounts.<br />
<br />
Because these things are hard to control remotely, it's likely that once you start distributing the new % coupons - they will eventually reach the hands of users with the older versions of your app (the one that doesn't know how to properly handle % discount).<br />
Those users with the old versions might see a fixed price of the discount while the actual one will be calculated as a percentage of the total deal.<br />
<br />
The solution, therefore, is to manage the whole payment logic in the server side (including even the code that builds the cart summary!). This way you have one centralized place to modify your logic and older apps will still be aligned with the new functionality. And keep in mind this is a very basic example and the real-world examples are usually far more complicated than that.<br />
<br />
<br />
<span style="font-size: large;"><b>5. Backward compatibility</b></span><br />
Moving your logic to the servers makes sense, but you still need a structured way to support your old apps.<br />
The server needs to know how to handle each request, because sometimes the version of the app dictates slightly different response.<br />
<br />
A good practice would be to include some meta data in every API call; something like the OS type, the app version and the user ID (and whatever makes sense for your product).<br />
The server gets the request with the meta data and if needed - can split the function logic into relevant chunks as required by the business, or as required to support older versions of the app.<br />
<br />
<br />
<span style="font-size: large;"><strong>6. Force upgrade </strong></span><br />
There are times when the above techniques will not work or will not make sense (effort wise).<br />
In such cases you better have an option to force your users to upgrade the app.<br />
The easiest way is to have a simple API method that is being called every time the app starts. The client reports his version number to the server and if itâs below a certain number (meaning itâs too old) - the server returns an âupgrade requiredâ error which is presented to the user blocking him from continuing until he clicks on the âupgrade nowâ button.<br />
<br />
<img height="196" src="https://lh3.googleusercontent.com/-IebPqxDUT0s/Wuj6lBvaK4I/AAAAAAAAOxE/xyvj3jl_S-s6RtYuDoXf1Bl83YAhSi_TgCHMYCw/s320/%255BUNSET%255D" style="display: block; margin-left: auto; margin-right: auto;" width="320" /><br />
<br />
This option will make your developers very happy because it eliminates the need for backward compatibility, but on the flip side - it might frustrate your users and cause a certain churn (some users will probably not follow your upgrade request and simply quit).<br />
Itâs important to have this capability in your app from an early stage (because in early stages you make drastic changes and definitely donât want to waste time on backward compatibility), but you should minimize the use of it because of the bad user experience.<br />
<br />
<br />
<span style="font-size: large;"><strong>7. Generic error codes </strong></span><br />
I havenât seen this option being used a lot, but I think itâs a nice one: whenever you make a change to one of your workflows - you can use your server to block users with old versions from performing certain actions.<br />
Letâs say that your app supports 3 main workflows and one of them was completely modified in the latest versions. You can then use the API meta data to block users with old versions from performing this action by returning a generic error code to the client code.<br />
It means that key workflows in your client side code should have a proper error handling that knows how to parse this generic error code and tell something like: âthis action cannot be done because you are using an old version of the app⌠please upgrade to get the most out ofâŚâ, and include an âupgrade nowâ button below the message.<br />
<br />
<br />
Having the above alternatives mean your product managers and developers have enough tools to tackle the long tail of mobile apps by deploying the right solution for each case.<br />
<br />
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
Be a virtual friend and <a href="https://twitter.com/GilBouhnick" target="_blank">follow me on twitter</a></div>
<br />
<br /><div class="blogger-post-footer">Continue reading at the mobile spoon...</div>Gil Bouhnickhttp://www.blogger.com/profile/04778382332134032974noreply@blogger.com2tag:blogger.com,1999:blog-6554515860534069301.post-63749238093480589142015-05-07T15:55:00.001-07:002015-05-07T15:55:05.540-07:00Asana vs. Trello â The Practical Comparison<p><a href="http://lh3.googleusercontent.com/-Ta85MOFdQis/VUvtCWaUvCI/AAAAAAAAMxY/ZP4iIE1ueJs/s1600-h/JiszgZdZ%25255B7%25255D.png"><img title="JiszgZdZ" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px 0px 5px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="JiszgZdZ" src="http://lh3.googleusercontent.com/-ysdhwP_iBpw/VUvtDWVCsyI/AAAAAAAAMxg/OJsqW4-y-Pk/JiszgZdZ_thumb%25255B5%25255D.png?imgmax=800" width="179" height="199" /></a>   <a href="http://lh3.googleusercontent.com/-XbAU5I4jVAM/VUvtEACjAKI/AAAAAAAAMxo/t78s_OF0_XI/s1600-h/ee469ded541d51cda4da9a51d5f774b3%25255B4%25255D.png"><img title="ee469ded541d51cda4da9a51d5f774b3" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px 0px 5px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="ee469ded541d51cda4da9a51d5f774b3" src="http://lh3.googleusercontent.com/-tJniNQ4ouVs/VUvtE6uJ7uI/AAAAAAAAMxw/vCCrx1iUgx8/ee469ded541d51cda4da9a51d5f774b3_thumb%25255B6%25255D.png?imgmax=800" width="240" height="195" /></a></p> <p>Comparing great products is a process that can easily end up with a long, exhausting report. I recently gave 2 strong work collaboration tools a try and ended up with only one as my clear winner. </p> <p>Asana vs. Trello. Which one worked better for me? Read this short comparison to find out.  </p> <h3>Functionality:</h3> <p>Both Asana and Trello are designed to help you manage your work items and to-do list either as an individual or as a small/medium team. Both tools are modern and are relatively easy to get on-board and use. They turn the team work into a collaborative and communicative process â done in one place (reducing but not eliminating the need for excels, emails, phone calls, IMâs, etc.).</p> <p><font size="3"><strong>Asana</strong> </font>provides an all-in-one environment where you get to see your team members, projects, tasks and details. The application is very crowded and a bit hard to get used to â but once you do â you have the entire project details in front of you. The advantage of Asana is that it doesnât dictate a certain way to plan and execute your work â there are many templates to select from and each team can use the one that fits best. This advantage can be easily turn into a disadvantage because the Asana playground is often too messy and overloaded with data. </p> <p><a href="http://lh3.googleusercontent.com/-oBJZ2LKmVsM/VUvtF3-3aLI/AAAAAAAAMx4/jEu6tg0hJ2w/s1600-h/Asana%25255B8%25255D.png"><img title="Asana" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px 0px 5px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="Asana" src="http://lh3.googleusercontent.com/-hI3apr7oRCI/VUvtHVBWVbI/AAAAAAAAMyA/lhifN44od7M/Asana_thumb%25255B3%25255D.png?imgmax=800" width="550" height="403" /></a></p> <p> </p> <p><font size="3"><strong>Trello</strong></font> is build as a Kanban board where each task is a card that can be edited or moved across categories (for instance: backlog, in progress, done). </p> <p><a href="http://lh3.googleusercontent.com/-D9_lMp9zQWw/VUvtIe0g6nI/AAAAAAAAMyI/HqL3W7ifMAM/s1600-h/trello-outlook-01%25255B9%25255D.gif"><img title="trello-outlook-01" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px 0px 5px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="trello-outlook-01" src="http://lh3.googleusercontent.com/-AkK19mOUcuw/VUvtJIv_NmI/AAAAAAAAMyQ/1rF2WZEixTA/trello-outlook-01_thumb%25255B4%25255D.gif?imgmax=800" width="550" height="362" /></a></p> <p><strong><font size="3">Functionality wise Asana wins over Trello</font></strong>. It has more features, and it can be used for a wide range of needs. Trello is designed as an extra simple tool and as such there are some minor capabilities missing (such as searching inside details text of each task). </p> <p> </p> <h3>Usability: </h3> <p>In my opinion, this is the most important category of this comparison and where it becomes more interesting. <br />The UI for such kind of tools is critical in order for users to keep using the system and do it often.</p> <p><font size="3"><strong>Asanaâs</strong></font> user interface has issues; itâs way too complicated and simply puts everything inside frames, all on one screen. To me itâs just overwhelming and too difficult to work with. Especially when dealing with medium/large sized projects </p> <p><font size="3"><strong>Trello</strong></font> truly shines when it comes to usability and design: both the web app and the mobile apps are slick, the kanban board is simple and a lot of fun to use. </p> <p> </p> <h3>Mobile Support</h3> <p>Mobile support is a critical part of any modern productivity product. We need our productivity tools to be available from everywhere, while on the move, beyond working hours. Mobility, in this respect, is much more than a nice-to-have capability. </p> <p><font size="3"><strong>Trelloâs</strong></font> mobile app for iOS (I checked it on both iPhone and iPad) is very impressive and provides a similar experience to the web version of the app: boards, drag & drop, colorful UI, etc. Itâs very slick. The iPad version enjoys a few extra capabilities thanks to the wide screen. </p> <p>       <a href="http://lh3.googleusercontent.com/-QZJAOsy4CoA/VUvtKKe7K7I/AAAAAAAAMyY/sdEg4sUdGzs/s1600-h/Photo-15-01-2015-16-28-38%25255B4%25255D.png"><img title="Photo-15-01-2015-16-28-38" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px 0px 5px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="Photo-15-01-2015-16-28-38" src="http://lh3.googleusercontent.com/-jMWLMIkycIw/VUvtP7Yc9qI/AAAAAAAAMyg/wd9uQFzKAZo/Photo-15-01-2015-16-28-38_thumb%25255B2%25255D.png?imgmax=800" width="193" height="352" /></a></p> <p><strong><font size="3">Asana</font></strong> on the other hand, has a very unfriendly mobile app. Every item you select takes a noticeable amount of time to open. For some reason everything is too slow, beyond the normal performance you would expect from a professional product. The mobile app, like the web version, is a bit too detailed, again⌠</p> <p><a href="http://lh3.googleusercontent.com/-c3_0y6YTdYo/VUvtQvOk_QI/AAAAAAAAMyo/l72xUby23qw/s1600-h/Asana%252520for%252520ipad%25255B9%25255D.jpg"><img title="Asana for ipad" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px 0px 5px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="Asana for ipad" src="http://lh3.googleusercontent.com/-YuEphCYzJ0U/VUvtRp1N2jI/AAAAAAAAMyw/vajHZ7pvqgY/Asana%252520for%252520ipad_thumb%25255B5%25255D.jpg?imgmax=800" width="550" height="307" /></a></p> <p>The iPad version of Asana misses the traditional split view. As a result, the main lists are simply stretched to fit the wider screen but you do not get any advantage from using a tablet over a phone. </p> <p><strong><font size="3">Sharing options:</font></strong> </p> <p><strong>Trello</strong> allows you to take a picture (screenshot or photo) and create a card out of it. The card will then include the picture(s) as attachments. This is actually a very important feature if you plan on storing your bugs or issues in your collaboration tool. </p> <p><font size="4">Asana</font> has a limited version of this capability; it doesnât let you select the target project or task â which means that there are a few more manual steps to make inside the app to complete this scenario. </p> <p>Summarizing the mobile part â Trello wins big time due to a much nicer user experience, better design, and better mobile functionality. </p> <p> </p> <h3>Ecosystem & Plug-ins</h3> <p>Both Asana and Trello are extremely popular with large communities. And yet, it seems like Asana has a variety of apps & plug-ins (both free and paid) while Trello simply doesnât. With Asana you can add charts, reports, a Gantt, and all sorts of additions while Trello has very little to offer in this category. </p> <p>In the plug-ins section Asana wins with a knock out.</p> <p> </p> <h3>Summary</h3> <p>While Asana has more functionality to offer, bigger flexibility (in project structure), and many plug-ins â it is simply not much fun to use; the user interface gets too busy and detailed, and the mobile experience is not good enough. I gave Asana a decent try and I understood that I simply donât like it that much even though I can see how powerful it is. </p> <p><strong>Trello</strong> keeps things simple, but it seems to be doing the things it does in a brilliant way. The user interface is incredible in all platforms (web, mobile, even as a Windows 8 app) and the board concept is visual, colorful and simply fun to use. </p> <p>My subjective preference after trying out both <strong>Asana</strong> and <strong>Trello</strong> is to go with <strong>Trello</strong>, hoping that more plug-ins will become available pretty soon, as I do want to see some reports and charts available on top of the core product. </p> <div class="blogger-post-footer">Continue reading at the mobile spoon...</div>Gil Bouhnickhttp://www.blogger.com/profile/04778382332134032974noreply@blogger.com0tag:blogger.com,1999:blog-6554515860534069301.post-14521194601538998312015-04-16T04:52:00.001-07:002020-09-02T14:46:38.497-07:00Who invented the mobile side menu concept? [UI]<p style="text-align: center;"><a href="http://lh6.ggpht.com/-6_tRa271m1k/VS-iawnf8yI/AAAAAAAAMjk/qTczHX-MLfY/s1600-h/burger%25255B3%25255D.jpg"><img alt="burger" border="0" height="230" src="http://lh6.ggpht.com/-526N9JnuXac/VS-ibousLqI/AAAAAAAAMjs/oZWGv4ctSgs/w300-h230/burger_thumb%25255B1%25255D.jpg?imgmax=800" style="background-image: none; border-color: initial; border-style: initial; border-width: 0px; display: inline; margin: 0px 0px 5px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="burger" width="300" /></a></p> <p>There are many articles addressing the question: â<a href="http://gizmodo.com/who-designed-the-iconic-hamburger-icon-1555438787" target="_blank">who invented the burger menu icon</a>â (that 3 stripes icon we all use to open a side menu in our mobile apps). But not many people know the origins of the side menu concept. </p> <p>Being an old man, I recently came across a very old blog post I wrote years ago (back in 2008 when my smartphone ran Windows MobileâŚ) that talks about Mozilla Fennec â Mozillaâs first attempt to create a mobile web browser. </p> <p>It was designed to run on Windows Mobile and as you can see from the design documents below â it included 2 innovative gestures to bring in and out additional side panels from the left and right sides. Wow. </p> <p><a href="http://lh4.ggpht.com/-7MigkvTnvww/VS-icIYYC3I/AAAAAAAAMjw/bXT1WQtuw88/s1600-h/fennec%25255B4%25255D.jpg"><img alt="fennec" border="0" height="263" src="http://lh5.ggpht.com/-dSxtatfMqVs/VS-ic2pGrAI/AAAAAAAAMj8/ms6jMLBw-WU/fennec_thumb%25255B2%25255D.jpg?imgmax=800" style="background-image: none; border-color: initial; border-style: initial; border-width: 0px; display: inline; margin: 0px 0px 5px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="fennec" width="478" /></a></p> <p>The design document included the following: </p> <p><b>Problem:</b> Add functionality to the reader mode while still maintaining a chromeless, reading focused layout. <br /><b>Solution:</b> Introduce off screen menus rendered visible with swiping gestures.</p> <p>And this was in 2008, short after <a href="http://www.mobilespoon.net/2014/07/15-innovations-first-iphone-brought-to.html" target="_blank">the first iPhone was introduced</a> and just to remind you â the iPhone did have side menus included in the design guidelines. </p> <p>To my knowledge, this was the first time in the history of mobile software that a side menu was pushed-in and out of the screen to expose additional capabilities beyond the screen real-estate. It was the first side menu ever. </p> <div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-HR3TXw4sTHQ/X1ASkDhUsjI/AAAAAAAAQ5k/wrk3CR8YxwMpvkCtERZv4l3fZhE00MR8QCLcBGAsYHQ/s800/mobile%2Bside%2Bmenu.webp" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Who invented the mobile side menu? The Mobile Spoon" border="0" data-original-height="600" data-original-width="800" height="480" src="https://1.bp.blogspot.com/-HR3TXw4sTHQ/X1ASkDhUsjI/AAAAAAAAQ5k/wrk3CR8YxwMpvkCtERZv4l3fZhE00MR8QCLcBGAsYHQ/w640-h480/mobile%2Bside%2Bmenu.webp" title="Who invented the mobile side menu? The Mobile Spoon" width="640" /></a></div><br /><p><br /></p> <p>Then came the burger icon and the rest is history; the side menu became a mobile standard and a perfect way for popular apps to create a unified experience across operating systems and device types (even beyond mobile). </p><h3>User interface guides and best practices:</h3><p></p><p></p><p></p><p></p><ul style="-webkit-text-stroke-width: 0px; color: black; font-family: Times; font-size: medium; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><li><a href="https://www.mobilespoon.net/2018/11/ux-writing-comprehensive-guide-for.html" target="_blank">40 UI rules for designing and writing better text in mobile apps</a></li><li><a href="https://www.mobilespoon.net/2019/04/collection-cognitive-biases-how-to-use.html" target="_blank">84 cognitive biases you should use to design better products (part I)</a></li><li><a href="https://www.mobilespoon.net/2019/10/cognitive-biases-design-better-products-part2.html" target="_blank">84 cognitive biases to help you design better-converting products (part II)</a></li><li><a href="https://www.mobilespoon.net/2019/06/20-dark-patterns-to-avoid-in-products.html" target="_blank">20 Dark Patterns to avoid when designing products</a></li><li><a href="https://www.mobilespoon.net/2019/11/design-ui-tables-20-rules-guide.html" target="_blank">20 UI rules for designing data tables that don't suck</a></li><li><a href="https://www.mobilespoon.net/2019/09/10-lessons-learned-payment-through-our.html" target="_blank">10 lessons learned from asking our users to pay</a></li><li><a href="https://www.mobilespoon.net/2019/05/fold-still-thing-in-todays-scrolling.html">Is 'the fold' still a thing in todayâs scrolling and skimming culture?</a></li><li><a href="https://www.mobilespoon.net/2019/04/lessons-learned-app-store-screenshots.html">Lessons learned from our App Store screenshots redesign</a></li></ul> <p>Of course, after few years in which all the leading apps used a side menu â there is now a new trend to switch back to traditional tabs replacing the side menu: the best example is facebook that adopted the side menu few years ago and now switched back to iOS style tabs. Apple never included the side menu as a âbest practiceâ for itsâ iOS UX guidelines so who knows, maybe we are witnessing the end of the side menu era. </p> <div class="blogger-post-footer">Continue reading at the mobile spoon...</div>Gil Bouhnickhttp://www.blogger.com/profile/04778382332134032974noreply@blogger.com1tag:blogger.com,1999:blog-6554515860534069301.post-59996730826392021572015-03-10T17:58:00.002-07:002022-08-06T08:14:56.219-07:00A List of All Operating Systems Running on Smartwatches [Wearables]<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-nTQoAyZ3a10/W9sXfrEH3vI/AAAAAAAAPEM/8gSY00UHQM8CCyeH4agipG078HXhn5TzACLcBGAs/s1600/best%2Bsmartwatch%2Boperating%2Bsystems.png" style="margin-left: 1em; margin-right: 1em;"><img alt="All operating systems running on wearable devices and smartwatches - the mobile spoon" border="0" data-original-height="576" data-original-width="1230" height="298" src="https://4.bp.blogspot.com/-nTQoAyZ3a10/W9sXfrEH3vI/AAAAAAAAPEM/8gSY00UHQM8CCyeH4agipG078HXhn5TzACLcBGAs/s640/best%2Bsmartwatch%2Boperating%2Bsystems.png" title="All operating systems running on wearable devices and smartwatches - the mobile spoon" width="640" /></a></div>
<br />
<h3 style="text-align: center;">
<span style="color: orange;"><br /></span></h3>
<h3 style="text-align: center;">
<span style="color: orange;">Note: This post has been updated and is now up to date [November 2019]</span></h3>
<h2 style="text-align: center;">
A list of all operating systems running on wearable devices</h2>
<div style="background-color: white; font-stretch: normal; line-height: normal; margin: 0px 0px 8px; text-align: center;">
<div style="border: 0px; box-sizing: content-box; font-size: 16px; font-stretch: inherit; font-variant-numeric: inherit; letter-spacing: initial; line-height: inherit; margin: 0px; padding: 0px; text-align: start; vertical-align: baseline;">
<span style="font-family: inherit;"><br /></span> <span style="font-family: inherit;"><br /></span> <span style="font-family: inherit;">Seeing that this relatively old post is still getting a lot of traffic, I decided to update it to the current state of wearables. Enjoy!</span></div>
<div style="color: #212121; font-family: roboto, sans-serif;">
<br />
<br />
<a href="https://2.bp.blogspot.com/-gAk-nwR2il4/W9sbJ4RYE3I/AAAAAAAAPEY/RX5KT91nYmchahB_Fi9HBkQTNI_zIXAQgCLcBGAs/s1600/idc-wearable-shipments-q2-1536139224-yMWy-column-width-inline.jpg" style="font-family: Times; margin-left: 1em; margin-right: 1em;"><img alt="Wearables and smartwatch market" border="0" data-original-height="405" data-original-width="720" height="360" src="https://2.bp.blogspot.com/-gAk-nwR2il4/W9sbJ4RYE3I/AAAAAAAAPEY/RX5KT91nYmchahB_Fi9HBkQTNI_zIXAQgCLcBGAs/s640/idc-wearable-shipments-q2-1536139224-yMWy-column-width-inline.jpg" title="Wearables and smartwatch market" width="640" /></a><br />
<br />
<br /></div>
</div>
<h3>
Apple WatchOS</h3>
<div>
The world's most successful wearable operating system is responsible for making the Apple Watch a great watch and a pretty powerful fitness wearable. </div>
<div>
The Apple Watch accounts for 41% share of the smartwatch market and 17% share of all wearables (including simple sport bands etc.).<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-DIru7Lt_TpQ/W9sVCrC_GUI/AAAAAAAAPD0/XlMIJIlJJyYWkHld78z8mM1maMiMc-1mQCLcBGAs/s1600/apple%2Bwatch.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="All operating systems running on wearable devices and smartwatches - the mobile spoon" border="0" data-original-height="432" data-original-width="768" height="360" src="https://3.bp.blogspot.com/-DIru7Lt_TpQ/W9sVCrC_GUI/AAAAAAAAPD0/XlMIJIlJJyYWkHld78z8mM1maMiMc-1mQCLcBGAs/s640/apple%2Bwatch.jpg" title="All operating systems running on wearable devices and smartwatches - the mobile spoon" width="640" /></a></div>
<br />
<br /></div>
<div>
<a href="https://www.apple.com/il/watchos/watchos-6/" target="_blank">WatchOS</a> allows running apps, including background threads and local push notifications. </div>
<div>
Despite being opened for apps for a long time - the number of amazing apps that can be downloaded from the AppStore is pretty limited compared to iPhone or Android apps. </div>
<div>
<br />
<br />
Related:<br />
<ul>
<li><a href="https://www.mobilespoon.net/2018/10/would-you-tell-difference-between-apple.html" target="_blank">Can you tell the difference between Apple Watch Series 4 (44mm) and Series 3 (42mm)?</a></li>
<li><a href="https://www.mobilespoon.net/2019/02/improve-apple-watch-control-center-ui.html" target="_blank">Apple Watch - Trying to improve the Control Center UI in 15 minutes</a></li>
<li><a href="https://www.mobilespoon.net/2016/10/heres-why-you-dont-use-iphones-3d-touch.html" target="_blank">Here's why Apple's 3D Touch failed</a></li></ul><div><br /></div><div><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://apps.apple.com/us/app/quant-your-fitness-dashboard/id1406705309" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" data-original-height="896" data-original-width="1000" height="287" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvTlNitUGtXQ8GSV5bxvkZY4r5Kw-atF7um8YNUndry2SNpXjZ_9oQfWjJL-2d5plXobV4mXzTvvw8t_YLDgFD1zE7caixBBdf1sdQZUDNnQy4qwjcpakgUD0Phs_FaOC5FtNlQvsGdY4aGTB3oscXQjNNaaDjvcM0FFxz0mlpj9vdQxRWptYPKNDT/s320/Quant%20with%20Watch.png" width="320" /></a></div><div style="text-align: center;">Download <a href="https://apps.apple.com/us/app/quant-your-fitness-dashboard/id1406705309" target="_blank">Quant - a fitness dashboard for Apple Watch</a></div><br />
<br /></div><div><br /></div>
<h3>
Xiaomi</h3>
Xiaomi wearables account for 15.1% of the market (second only to Apple), however, those are mostly <a href="https://www.mi.com/global/miband" target="_blank">sport bands</a> (such as Mi Band 3 and <a href="https://www.mi.com/global/miband" target="_blank">Mi Smart Band 4</a>) that don't have a full OS, therefore not included in this list of operating systems.<br />
<div>
<br />
<br /></div>
<h3>
Wear OS (Previously: Android Wear)</h3>
You can find the Wear OS on many smartwatch models, but the market share of Wear OS is still relatively low (comparing to Android at least): 10.5%.<br />
<br />
<a href="https://2.bp.blogspot.com/-X0G3ABpJKB4/W9sUOw9_pjI/AAAAAAAAPDo/vMzBRDe15PUUBfMAnxh-FcOvokugAnn-gCLcBGAs/s1600/fossil-q-gen-4.png" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="All operating systems running on wearable devices and smartwatches - the mobile spoon" border="0" data-original-height="400" data-original-width="728" height="348" src="https://2.bp.blogspot.com/-X0G3ABpJKB4/W9sUOw9_pjI/AAAAAAAAPDo/vMzBRDe15PUUBfMAnxh-FcOvokugAnn-gCLcBGAs/s640/fossil-q-gen-4.png" title="All operating systems running on wearable devices and smartwatches - the mobile spoon" width="640" /></a><br />
<br />
Google's Android Wear (now called <a href="https://wearos.google.com/#hands-free-help" target="_blank">Wear OS</a>) is designed to be paired with Android smartphones. It's available mostly as an open-source, but just like with Android â Google is protecting itsâ IP by adding a closed layer of services such as Google Assistant on top of the basic layers.<br />
Android Wear supports both rectangle and rounded screens.<br />
<br />
Despite running on some strong brands like Fossil and LG, Wear OS is considered to be performing badly, as more and more wearable players prefer to develop their own proprietary operating systems than to go with Wearable OS.<br />
<div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<br /></div>
<h3>
Fitbit OS</h3>
<div>
Note: <a href="https://techcrunch.com/2019/11/01/google-is-acquiring-fitbit/" target="_blank">Fitbit is now a Google company</a>.<br />
After leading the market for years with simple fitness trackers, Fitbit is now a significant player in the smartwatch market as well.<br />
<br /></div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-J1679pvgs7M/W9sV0y40kVI/AAAAAAAAPEA/6VlhDAvTeMkb55g6-jvqJjpCOAXATLbOACLcBGAs/s1600/fitbit%2Bversa.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Fitbit - All operating systems running on wearable devices and smartwatches - the mobile spoon" border="0" data-original-height="558" data-original-width="992" height="360" src="https://2.bp.blogspot.com/-J1679pvgs7M/W9sV0y40kVI/AAAAAAAAPEA/6VlhDAvTeMkb55g6-jvqJjpCOAXATLbOACLcBGAs/s640/fitbit%2Bversa.jpg" title="Fitbit - All operating systems running on wearable devices and smartwatches - the mobile spoon" width="640" /></a></div>
</div>
<div>
<br /></div>
<div>
The company's latest smartwatches (such as the Versa) can connect with any device (iOS/Android/Windows), accept calls, make payments, run apps, and more. </div>
<div>
The apps marketplace is still pretty limited to fitness which remains the strongest side of Fitbit. </div>
<div>
<br />
With the Google acquisition, you should expect to see some new Fitbit models running WearOS pretty soon... </div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<h3>
Garmin OS</h3>
Garmin, like Fitbit, is focusing on the fitness side of wearables.<br />
The <b><a href="https://buy.garmin.com/en-US/US/c10002-p1.html" target="_blank">Garmin Watch OS</a></b> was developed to run on smartwatches and allow users to access some power features like answering calls, listening to music and run apps.<br />
<br />
But the real strength of Garmin's smartwatches lies in the sport-related features they have: Garmin Coach, Group Track, and many more.<br />
<br /></div>
<div>
<a href="https://2.bp.blogspot.com/-rrO9TLi-tUQ/W9sSdn7lbmI/AAAAAAAAPDc/AGGFFb41ZJUSJZVRig5lyb-zcpgeV-LOQCLcBGAs/s1600/31569-posts.main_image.jpg" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="Garmin watch OS - the mobile spoon" border="0" data-original-height="660" data-original-width="1180" height="355" src="https://2.bp.blogspot.com/-rrO9TLi-tUQ/W9sSdn7lbmI/AAAAAAAAPDc/AGGFFb41ZJUSJZVRig5lyb-zcpgeV-LOQCLcBGAs/s640/31569-posts.main_image.jpg" title="Garmin watch OS - the mobile spoon" width="640" /></a></div>
<div>
<br />
<br /></div>
<h3>
Tizen for Wearables</h3>
Tizen OS is developed by Intel, Vodafone, Orange, and Samsung. The lightweight version of this operating system is called: <strong>Tizen for Wearables</strong> and is led by Samsung.<br />
<br />
<a href="http://lh4.ggpht.com/-QTjgu9URNYM/VP-S7be3FOI/AAAAAAAAMXQ/n55SknAkolQ/s1600-h/Samsung%252520Tizen%25255B8%25255D.jpg"><img alt="Samsung Tizen - All operating systems running on wearable devices and smartwatches - the mobile spoon" border="0" height="195" src="https://lh4.ggpht.com/-ips1p7vhpWc/VP-S8EE4gGI/AAAAAAAAMXY/lk18Zq4XDKs/Samsung%252520Tizen_thumb%25255B3%25255D.jpg?imgmax=800" style="background-image: none; border-width: 0px; display: inline; margin: 0px 0px 5px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Samsung Tizen - All operating systems running on wearable devices and smartwatches - the mobile spoon" width="300" /></a> <a href="http://lh6.ggpht.com/-RJtIpY_uwZo/VP-S9PVWV_I/AAAAAAAAMXg/Fx-gqxsfMrU/s1600-h/Tizen%252520based%252520samsung%252520watch%25255B5%25255D.png"><img alt="Tizen based samsung watch - All operating systems running on wearable devices and smartwatches - the mobile spoon" border="0" height="200" src="https://lh4.ggpht.com/-A9szZCoBTNM/VP-S9wRBA-I/AAAAAAAAMXo/u0gA1oSfKuY/Tizen%252520based%252520samsung%252520watch_thumb%25255B3%25255D.png?imgmax=800" style="background-image: none; border-width: 0px; display: inline; margin: 0px 0px 5px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Tizen based samsung watch- All operating systems running on wearable devices and smartwatches - the mobile spoon" width="210" /></a><br />
<br />
Tizen for Wearables is an open-source OS and can run <strong>standalone </strong>apps (without any connection to a host app on a smartphone) which is quite unique for wearable operating systems, it can also run <strong>integrated</strong> apps and <strong>linked </strong>apps.<br />
<br />
Apps are written in HTML5 (HTML, CSS, and javascript) and there are thousands of apps available in the Tizen store. The problem with current versions of Tizen for Wearables is that it can only be paired with a relatively small number of Samsung smartphones. On the other hand, Tizenâs low footprint is great for wearables and ensures a long battery life.<br />
<br />
Read also: <a href="http://www.mobilespoon.net/2015/03/skeptical-about-wearables-here-are-5.html" target="_blank">Skeptical about wearables? Here are 5 ways wearables will change your life for good</a><br />
<br />
<br />
<br />
<h3>
<b>Gone, dead, cease to exist: </b></h3>
The following wearable operating systems existed when I wrote my original post few years back. Unfortunately, they no longer exist...<br />
<br />
If you like history - continue reading:<br />
<br />
<br />
<h3>
Pebble OS</h3>
Developed by Pebble Technology Corp, Pebble OS is a custom version of FreeRTOS â a real-time OS for embedded devices. Pebble OS can be paired with iOS and Android smartphones and provides integrated notifications as well as activity tracking. Pebbleâs low footprint allows very long battery life.<br />
<br />
<a href="http://lh3.ggpht.com/-4y2EAASOGoY/VP-S-i5N7aI/AAAAAAAAMXw/LQxEGGYu5FM/s1600-h/Pebble%252520Smartwatch%25255B4%25255D.png"><img alt="Pebble Smartwatch - All operating systems running on wearable devices and smartwatches - the mobile spoon" border="0" height="239" src="https://lh5.ggpht.com/-e6hIYU8SM_M/VP-S_qHnJRI/AAAAAAAAMX4/lGbNwLxl6ck/Pebble%252520Smartwatch_thumb%25255B2%25255D.png?imgmax=800" style="background-image: none; border-width: 0px; display: inline; margin: 0px 0px 5px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Pebble Smartwatch - All operating systems running on wearable devices and smartwatches - the mobile spoon" width="138" /></a><br />
<br />
Pebbleâs first smartwatch model was the first smartwatch in the world to shift 1 Million units. There are over 6,000 apps and watch faces and the popularity of this platform is considered to be surprisingly high.<br />
Recently, the OS added support for Android Wear notifications which means Android Wear apps with integrated push notification capabilities will also work with Pebble smartwatches.<br />
<br />
<h3>
WebOS</h3>
If you are not familiar with webOS â hereâs a <a href="http://www.mobilespoon.net/2015/03/the-curious-case-of-webos.html" target="_blank" title="webOS amazing story - the mobile spoon">story you simply must read</a>.<br />
The platform that was originally created by Palm, was targeted to run on phones, switched hands several times, and found itself inside wearables by LG, whoâs also using it on other smart devices such as smart TVs and washing machines. Needless to say that like Samsung, LG is also creating Android Wear-based smartwatches.<br />
Did I mention wearables fragmentation already?<br />
<br />
<a href="http://lh5.ggpht.com/-bPeSDrijkB8/VP-TAWxEPvI/AAAAAAAAMYA/u9h6m8cx61M/s1600-h/LG%252520Watch%252520Urbane%252520LTE%252520running%252520webOS%252520-%252520the%252520mobile%252520spoon%25255B8%25255D.jpg"><img alt="LG Watch Urbane LTE running webOS - the mobile spoon" border="0" height="169" src="https://lh5.ggpht.com/-78FRiMxSB5Q/VP-TBA-hEaI/AAAAAAAAMYI/upYrpBY3mZQ/LG%252520Watch%252520Urbane%252520LTE%252520running%252520webOS%252520-%252520the%252520mobile%252520spoon_thumb%25255B3%25255D.jpg?imgmax=800" style="background-image: none; border-width: 0px; display: inline; margin: 0px 0px 5px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="LG Watch Urbane LTE running webOS - the mobile spoon" width="300" /></a><br />
<br />
WebOS is fully based on web technologies and has some powerful features, such as being able to run completely standalone (which means the smartwatch can operate as a phone using SIM card).<br />
LG recently released the LG Watch Urbane LTE which is the first watch running WebOS.<br />
Read also: <a href="http://www.mobilespoon.net/2015/03/the-curious-case-of-webos.html" target="_blank">The amazing story of webOS</a><br />
<br />
<h3>
</h3>
<h3>
Band</h3>
Developed by Microsoft, the Microsoft Band is mostly a fitness tracker and doesnât run an operating system.<br />
However, the Band does have a built-in software which is kind of OS-agnostic, and can run apps using <strong>Microsoftâs Wearable Architecture </strong>paired with iOS, Android, Windows and Windows Phone.<br />
The Band's uniqueness is with the set of 10 sensors, supported by the Band software and as of early February 2015 â available for developers via an SDK.<br />
<br />
<a href="http://lh5.ggpht.com/-_RdvoT6mWr0/VP-TDe6osgI/AAAAAAAAMYc/RAl_TklRNzU/s1600-h/Microsoft%252520Band%252520mobilespoon%25255B5%25255D.jpg"><img alt="Microsoft Band All operating systems running on wearable devices and smartwatches - the mobile spoon" border="0" height="165" src="https://lh5.ggpht.com/-LJpDtNTHg0w/VP-TECW93tI/AAAAAAAAMYk/ot8T3xiNqxc/Microsoft%252520Band%252520mobilespoon_thumb%25255B6%25255D.jpg?imgmax=800" style="background-image: none; border-color: initial; border-style: initial; border-width: 0px; display: inline; margin: 0px 0px 5px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Microsoft Band - All operating systems running on wearable devices and smartwatches - the mobile spoon" width="415" /></a><br />
<br />
Related: <a href="https://www.mobilespoon.net/2019/01/i-miss-2-gadgets-design-unique.html" target="_blank">I still miss these 2 gadgets because of their unique design</a>.<br />
<br />
<br />
<h3>
Firefox OS for Wearables</h3>
Firefox OS is a Linux kernel-based open-source operating system designed to provide a complete community-based alternative for mobile devices. Firefox OS for wearables is a subset of Firefox OS and is designed to run on low-cost wearables and âthingsâ (smart devices). The OS has not been released yet.<br />
Firefox OS for Wearables is planned to be paired with all mobile platforms: Android, iOS, Windows Phone and FireFox OS. Similar to Tizen, and WebOS, Firefox apps are developed using pure web-based technologies such as HTML5, CSS, and JavaScript.<br />
<br />
Related: <a href="https://www.mobilespoon.net/2019/10/simple-hack-reduce-smartphone-addiction.html" target="_blank">This hack helped me reduce my smartphone addiction and win some free time</a>.<br />
<br />
<h3>
</h3>
<h3>
</h3>
<h3>
Smartwatch Market Landscape</h3>
Itâs hard to find a report that shows the market shares of each of the wearable operating systems. The current reports talk about specific models and devices. Itâs known that Android Wear is responsible for 15% of 2014 smartwatch sales (700,000 units) which is not a lot. Pebble sold 1 million Pebble smartwatches but Samsung was the leader overall with a long list of different models.<br />
Here are the top 10 smartwatch companies for 2014:<br />
<br />
<a href="http://lh6.ggpht.com/-1DoDf254nXA/VP-TIREJuPI/AAAAAAAAMZQ/BI5kKDCF4vs/s1600-h/Smartwatch%252520leading%252520companies%252520-%252520statista%25255B4%25255D.png"><img alt="Smartwatch leading companies - statista" border="0" height="375" src="https://lh6.ggpht.com/-8hFf31ZKQtA/VP-TJN6ibVI/AAAAAAAAMZY/9-aeZVnh1yI/Smartwatch%252520leading%252520companies%252520-%252520statista_thumb%25255B2%25255D.png?imgmax=800" style="background-image: none; border-width: 0px; display: inline; margin: 0px 0px 5px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Smartwatch leading companies - statista" width="600" /></a><br />
<br />
<br />
To recap this blog post, hereâs an overview of the leading operating systems for smartwatches, in a presentation format for your convenience.<br />
<h3>
</h3>
<h3>
Presentation: The Fragmented World of Wearable Operating Systems</h3>
<iframe allowfullscreen="allowfullscreen" frameborder="0" height="400" marginheight="0" marginwidth="0" scrolling="no" src="//www.slideshare.net/slideshow/embed_code/45681076" style="border-bottom: #ccc 1px solid; border-left: #ccc 1px solid; border-right: #ccc 1px solid; border-top: #ccc 1px solid; margin-bottom: 5px; max-width: 100%;" width="670"> </iframe><br />
<div style="margin-bottom: 5px;">
<strong><a href="https://www.slideshare.net/MobileSpoon/wearables-the-comprehensive-list-of-smartwatch-operating-systems" target="_blank" title="Wearables: The Comprehensive List of Smartwatch Operating Systems">Wearables: The Comprehensive List of Smartwatch Operating Systems</a> </strong>from <strong><a href="https://www.slideshare.net/MobileSpoon" target="_blank">MobileSpoon</a></strong> </div>
<br />
<br />
<br />
<span face=""roboto" , sans-serif" style="background-color: white; color: #5f5f5f; font-size: 18px;">Follow me on twitter </span><a href="https://twitter.com/GilBouhnick" style="background: rgb(255, 255, 255); color: #2196f3; font-family: Roboto, sans-serif; font-size: 18px; text-decoration-line: none;"><span class="s1" style="color: #dca10d; text-decoration-line: underline;">@gilbouhnick</span></a><span face=""roboto" , sans-serif" style="background-color: white; color: #5f5f5f; font-size: 18px;"> - or - </span><a href="https://mailchi.mp/b9c664dfafa3/mobilespoon" style="background: rgb(255, 255, 255); color: #2196f3; font-family: Roboto, sans-serif; font-size: 18px; text-decoration-line: none;"><span class="s1" style="color: #dca10d; text-decoration-line: underline;">subscribe to the Mobile Spoon newsletter</span></a><span face=""roboto" , sans-serif" style="background-color: white; color: #5f5f5f; font-size: 18px;"> to get my occasional blogs directly to your inbox.</span><br />
<span face=""roboto" , sans-serif" style="background-color: white; color: #5f5f5f; font-size: 18px;"><br /></span>
<span face=""roboto" , sans-serif" style="background-color: white; color: #5f5f5f; font-size: 18px;"><br /></span><div class="blogger-post-footer">Continue reading at the mobile spoon...</div>Gil Bouhnickhttp://www.blogger.com/profile/04778382332134032974noreply@blogger.com3tag:blogger.com,1999:blog-6554515860534069301.post-52345221743268806732014-07-01T05:40:00.001-07:002014-07-01T05:40:05.226-07:0015 Innovations The First iPhone Brought To The World<p><a href="http://lh5.ggpht.com/-6hRwHR6u4N0/U7KsH4jTNzI/AAAAAAAALbQ/-Mtxgfpkr9w/s1600-h/first%252520iphone%25255B2%25255D.jpg"><img title="first iphone" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; margin: 0px 0px 5px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="first iphone" src="http://lh5.ggpht.com/-YHygTUFwaeQ/U7KsI6WTfUI/AAAAAAAALbY/4uLPjNq9qi0/first%252520iphone_thumb.jpg?imgmax=800" width="244" height="174" /></a></p> <p>This week, 7 years ago, the iPhone was announced. </p> <p>My first days with the iPhone came as a complete shock to an old school WinMo/Palm/BlackBerry user like myself. I remember playing with the new gadget all day long, discovering new features and things I didnât even imagine would exist on a mobile phone. Especially after spending years with cranky Windows Mobile devices, Palm and limited BlackBerry smartphones. </p> <p>Today most of those innovative features seem obvious, but it was not the case back in 2007. Even though the original iPhone missed way too many basic capabilities â it started the mobile revolution and led the way to an even bigger revolution in the entire software industry. </p> <p>iPhone was focused on getting the core experience right (today we call is UX, but 7 years ago it was still that topic most companies didnât want to spend a lot of budget on). The operating system had good speed, consistency between apps, and was loaded with innovative ideas. </p> <p>Hereâs a list of my favorite innovative features of the first iPhone, Iâm sure there are plenty of others⌠</p> <ol> <li><font color="#4f81bd" size="4">Overall design</font>: a phone with (almost) no buttons and definitely without a âSendâ and âEndâ buttons⌠How on earth would you make a call? <br />The original design was bigger than the average phone size, but mostly made out of screen. Today it is considered to be tiny. </li> <li><font color="#4f81bd" size="4">Capacitive screen</font>: Back in 2007 we had to use a stylus (or a trackball) to get things done. <br />Resistive screens were the standard and we didnât know capacitive even existed until the iPhone came out⌠</li> <li><font color="#4f81bd" size="4">Everything is Touch</font>: Apple made touch the primary interaction model. <br />It was almost as perfect as it is today from the very beginning! <br />Quick, responsive, accurate, it was as if the technology was brought from outer space. </li> <li><font color="#4f81bd" size="4">Inertial scrolling</font>: today it seems trivial to slide your finger up and get that fun scrolling experience. Elasticity was also part of it, creating what is called today: âdelightâ in UX. Back then it was just⌠cool! <br />And it worked well too. Years later, inertial scrolling is part of any mobile software or OS. </li> <li><font color="#4f81bd" size="4">Internet</font> â created as an innovative internet communication device, the iPhone had a completely new browser experience allowing sites to be fully presented, with perfect rendering, running JavaScript and overcoming real-estate challenges. <br />Before the iPhone we had to settle with limited BlackBerry browsers or horrible distorted alignment of web site elements (in Windows Mobile). <br />We were made to believe thatâs the best we could get. Apple proved differently. </li> <li><font color="#4f81bd" size="4">Multi-touch</font>: although Apple did not invent the technology, it was the first one to incorporate it with such elegance into a simple consumer device.Pinch-to-zoom was one usage of it.  </li> <li><font color="#4f81bd" size="4">Virtual keyboard</font>: I mean, a virtual keyboard that actually works. <br />Before the iPhone we had physical keyboards or tiny QWERTY keyboard used with that stylus again⌠brrr. <br />After a month with the iPhone I was able to type much faster on that touch-based keyboard than with any other BlackBerry device I previously owned.  </li> <li><font color="#4f81bd" size="4">Visual voicemail</font>: remember we used to call a number, then wait for instructions, click some numbers and so on? with the iPhone you had a shortcut that allowed users to jump directly to any voicemail. </li> <li><font color="#4f81bd" size="4">Proximity Sensor</font>: quote from Appleâs first iPhone press release: âiPhoneâs built-in proximity sensor detects when you lift iPhone to your ear and immediately turns off the display to save power and prevent inadvertent touches until iPhone is moved awayâ. what a geeky description for one of the coolest features ever! So simple! So great. So âhow come no one did it before!?â </li> <li><font color="#4f81bd" size="4">Accelerometer</font>: iPhoneâs built-in accelerometer detected when the device would change orientation and immediately reacted to it. </li> <li><font color="#4f81bd" size="4">Responsive UI</font> â Today a hot trend in the entire software industry, back in 2007 â still unknown. <br />The calculator app was one of the first mobile apps to automatically change the behavior when switching from portrait to landscape mode. </li> <li><font color="#4f81bd" size="4">Mobile OS as a Platform</font>: Although the AppStore came only in the second version of the iPhone â it was obvious from the very beginning that iPhone is more than a phone. It was a computer. A platform. </li> <li><font color="#4f81bd" size="4">Gestures</font> (as a substitute for buttons): Appleâs design philosophy was to limit the number of buttons on each screen. As such, some actions were performed using gestures, which over time became the standard in the mobile industry and in software in general. (swipe to delete, slide to unlock) </li> <li><font color="#4f81bd" size="4">Magnifying glass</font>: before the iPhone we had buttons with arrows, home, end, and other ways to navigate through text. With the introduction of the buttons-less iPhone Apple invented the magnifying glass concept that was a very creative way to place your cursor on an accurate location. Todayâs Android implementation is actually better to be honest. But the original idea belongs to Apple. </li> <li><font color="#4f81bd" size="4">A lesson to all product managers out there</font>: The first iPhone had a lot of limitations and yet it sold 1M units after 7 days. It was another proof that a product can be very successful without being perfect. Users act based on subjective reasons and emotions. Making a great product doesnât always mean you need to have everything available on first release. Battery that cannot be replaced, no memory extension, no copy paste, years later we have seen companies mimic even those limitations (Microsoft, HTC, and others). </li> </ol> <p>Letâs finish this birthday celebration with the key notes from the first iPhone event: </p> <object width="560" height="315"><param name="movie" value="//www.youtube.com/v/t4OEsI0Sc_s?version=3&hl=en_GB"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/t4OEsI0Sc_s?version=3&hl=en_GB" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object> <div class="blogger-post-footer">Continue reading at the mobile spoon...</div>Gil Bouhnickhttp://www.blogger.com/profile/04778382332134032974noreply@blogger.com1