mobile,-in-store-pickup-helped-drive-record-setting-black-friday-weekend,-but-will-profits-shine?

It’s been a record-breaking several days online, and the holiday season is tracking at 14.5% growth in online sales compared to last year, according to Adobe Analytics, which tracks transactions at 80 of the top 100 retailers in the U.S. Online revenue for November was up 16.5% year-over-year, reaching $68.2 billion, Adobe Analytics reported.

Online-to-offline drivers. Meanwhile, in-store sales were off 6.2% on Black Friday according to ShopperTrak. A bright spot is “buy online, pick up in-store” (BOPIS) and curbside pick-up services. Since November 1, these online-to-offline orders have grown 43.2% year-over-year, according to Adobe. “These services are breathing new life into physical stores, and we expect growth to climb as we get closer to Christmas,” the company predicts. 

Black Friday topped expectations. Retailers generated $7.49 billion in online sales on Black Friday, Adobe Analytics reported. That exceeds the company’s prediction of $7.4 billion for the day and is an increase of 19.6% over last year when consumers spent $6.22 online on Black Friday.

Looking at the impact on smaller e-commerce sites and direct-to-consumer (DTC) brands, Shopify reported the 1 million merchants on the platform generated more than $900 million on Black Friday, with sales-per-minute peaking at $1.5 million at 3:01 PM ET.

The mobile impact. Smartphone traffic has eclipsed desktop in traffic for a few years now and continues to make gains in conversion impact. Smartphones are also changing when consumers buy. “Digital buying on Black Friday was more evenly spread throughout the day, with shoppers less inclined to take a break in the mid-afternoon, thanks to the convenience of their phones,” Salesforce reported.

While Salesforce and Shopify both reported mobile sales surpassed desktop, Adobe Analytics reported desktop accounted for 60.4% or $40.3 billion in online sales in November while smartphones generated 34.5% of online sales.

Shopify merchants saw 69% of sales come from mobile and 31% from desktops on Black Friday. And Salesforce reported 60% of Thanksgiving Day online orders came from mobile. This perhaps highlights performance and consumer differences of DTC and merchants that have come up in the mobile-first era compared to more legacy retailers that have had to go through digital transformation.

Smartphones accounted for 41.2% of e-commerce revenue on Small Business Saturday, up 22.2% and higher than the overall seasonal trend, according to Adobe Analytics.

For the retailers captured by Adobe Analytics, desktop conversion rates continue to be significantly higher than on smartphones. On Black Friday, for example, desktop conversion rates were 6.9% compared to 2.9% for smartphones, Adobe Analytics reported.

Discounts and rising CPAs. The profit story may not look as rosy as the revenue picture painted in the latest reports from Adobe Analytics, Salesforce and Shopify, however. All those discounts come at a cost: Salesforce reported the average online discount was 28% on Black Friday and expects discounts to be even steeper on Cyber Monday. Salesforce data represents the activity of more than 500 million shoppers globally.

Over 45% of retailer marketing investments went to paid social over the holiday weekend, generating nearly 33% of all revenue, according to digital marketing agency PMG. That’s an increase from just 16% last year. Stiffer competition on digital advertising platforms, and social in particular, is driving up the cost-per-acquisition for many advertisers.

While many reported great revenue numbers from Facebook campaigns over the weekend, ROAS may look quite different. David Hermann, a paid social media buyer who works largely with direct-to-consumer (DTC) brands, said competition on Facebook has cut deeply into profits even as revenue appears to be growing.

Profits are way down, spends way up. FB is a competitive mess racing to the bottom.

— David Herrmann (@herrmanndigital) December 2, 2019

Cyber Monday predictions. Today is expected to be another record-breaker at $9.37 billion in online revenue, up 18.9%, according to Adobe Analytics. That would be an increase from $7.9 billion spent online last year.

Salesforce pegs U.S. sales for Cyber Monday at $8 billion, up a more modest 15%. Globally, online sales are expected to reach $30 billion, according to Salesforce, an increase of 12%.



About The Author

Ginny Marvin is Third Door Media’s Editor-in-Chief, running the day to day editorial operations across all publications and overseeing paid media coverage. Ginny Marvin writes about paid digital advertising and analytics news and trends for Search Engine Land, Marketing Land and MarTech Today. With more than 15 years of marketing experience, Ginny has held both in-house and agency management positions. She can be found on Twitter as @ginnymarvin.



20+-mobile-app-wireframe-templates:-iphone-+-android

If you want to create a mobile app with a great user experience, you should always start your project with a wireframe. In this post, we share a collection of modern mobile app wireframing templates to help you get started in your design process.

When using a wireframe template, you won’t have to spend hours crafting layouts, buttons, image placeholders, and all the other elements that take hours to create from scratch. All you need to do is edit the templates and rearrange the elements to make your own app wireframe design.

We’ve handpicked some of the best mobile app wireframes you can use to design both iPhone and Android app user interfaces, all in various file formats.

Top Pick

High Fidelity – Android & iOS Wireframe Kit

High Fidelity - Android & iOS Wireframe Kit

High Fidelity is a massive collection of wireframing templates that includes layouts for designing Android and iOS app user interfaces.

This bundle features mobile wireframe designs in 7 different categories. You can edit and fully customize the templates using Adobe XD, Sketch, and Figma as well.

Why This Is A Top Pick

This wireframing kit is quite special. Not just because it has lots of professional layouts. Mainly because it includes layouts for both iOS and Android apps. And it also comes in multiple file formats.

Baseframe – Wireframe UI KIT 200 Templates

Baseframe - Wireframe UI KIT 200  Templates

Baseframe is another huge bundle of wireframe templates. This pack comes with more than 200 unique layout templates. It supports both iOS and Android mobile app designs and the templates are available in Sketch file format.

iOS Wireframe Mobile UI KIT (PSD)

iOS Wireframe Mobile UIT KIT (PSD)

If you’re a fan of Photoshop, you can use this mobile wireframing kit to design unique app wireframes using your favorite app. It includes 150 unique templates you can easily customize using Photoshop. The UI kit is also available in Sketch and Adobe XD format as well.

Letur – Mobile App Wireframe Kit

Letur - Mobile App Wireframe Kit

Don’t let those bright pink colors confuse you. This is not a wireframe kit made just for designing feminine mobile app designs. It’s also suitable for many other app user interface designs. It includes 26 easily editable mobile layouts in Adobe XD and Photoshop formats.

Pride – Minimal Mobile Wireframe Kit

Pride - Minimal Mobile Wireframe Kit

Pride is a collection of minimal mobile wireframing templates featuring various user interface templates for crafting mobile app experiences. The bundle includes more than 30 unique interface designs in Photoshop PSD file format.

Collector – iOS Wireframe UI Kit

Collector - iOS Wireframe UI Kit

Another big collection of wireframe templates. This kit is designed for iOS mobile app layouts. It comes with more than 200 templates with layouts in 22 different categories. You can customize them using Adobe XD.

Free Creative iOS Wireframe Kit

Free Creative iOS Wireframe Kit

This is a bundle of free wireframe templates. It includes a set of simple mobile screen layouts with beautiful modern designs. The templates are easily customizable as well.

Free Mobile Wireframe Kit For Adobe XD

Free Mobile Wireframe Kit For Adobe XD

This free wireframing kit includes minimal and clean mobile user interface designs. You can easily customize the designs using Adobe XD to make them your own.

Minimal Mobile Wireframe Kit Templates

Minimal Mobile Wireframe Kit Templates

If you’re looking for a mobile wireframing kit with a simple design, this bundle of UI templates is for you. It includes more than 90 unique mobile app wireframe templates featuring simple and clean designs. The templates are also available in both Sketch and Illustrator file formats.

Sketchy – Creative iOS Wireframe Kit

Sketchy - Creative iOS Wireframe Kit

Sketchy is a bundle of creative wireframing templates for designing iOS app interfaces. It comes with 218 app interface templates that are made up of over 500 elements. The templates are available in 29 different categories.

Dashboards & Charts – iOS 13 Wireframe Kit

Dashboards & Charts - iOS 13 Wireframe Kit

This collection of mobile wireframing templates are fully optimized for crafting iOS 13 app interfaces. In addition to dashboard and chart wireframes, this series also includes templates for walkthroughs, settings pages, and more. Be sure to download them all.

UIXO – iOS 12 Wireframe UI & UX Kit

UIXO - iOS 12 Wireframe UI & UX Kit

A unique wireframing kit for designing iOS apps with dark color themes. This bundle comes with more than 100 unique app screens in 16 categories. You can download the lite version of this wireframing kit here.

Liberty – Mobile Wireframe Kit Sketch & PSD

Liberty - Mobile Wireframe Kit Sketch & PSD

Liberty is a modern wireframing kit you can use to craft trendy and stylish app designs. The bundle includes 125 app screen layouts in 9 categories. The templates are also available in Sketch and Photoshop file formats.

Free Sketch Mobile Wireframe Kit

Free Sketch Mobile Wireframe Kit

Another free wireframing kit for designing various mobile app interfaces. This kit includes over 20 unique wireframe templates with easily editable layouts. The templates come in Sketch file format.

Free Music App Wireframe UX Kit 

Free Music App Wireframe UX Kit

This free wireframe kit features a complete design of a music app. It includes wireframes for all screens you’ll need to design an app, especially ones for streaming music.

Skeletal – Mobile Wireframe Kit PSD

Skeletal - Mobile Wireframe Kit PSD

Craft the perfect mobile app skeleton using this unique wireframing kit. It includes 22 unique screen layouts featuring easily customizable designs. You can edit the wireframes using Photoshop.

Mobnet – Mobile App Wireframe Kit

Mobnet - Mobile Wireframe Kit

Another wireframe kit for designing modern mobile user interfaces. This kit comes packed with 23 different app layouts with organized layers and free fonts. The templates are available in PSD file format.

iPhone – iOS App Wireframe Kit

iPhone - iOS Wireframe Kit

This kit if iOS app wireframes it most suitable for designing blogging and magazine app interfaces. It includes 90 screen designs that are compatible with iPhone X and iPhone 11. You can edit them using Sketch.

Turbo – iOS App Wireframe Kit

Turbo - iOS App Wireframe Kit

Turbo is a bundle of iOS wireframe templates that comes with layouts in 9 different categories. It includes a total of 100 mobile UI templates. You can easily edit and customize them to your preference using either Sketch, Illustrator, or Photoshop.

55 Printable Wireframe Templates

Printable Wireframe Templates

Being able to print your wireframe designs can be quite beneficial. It will allow you to show off your wireframe designs in meetings and to clients. This bundle includes 55 templates for both desktop and mobile interfaces with printable designs.

eBlocks – Free eCommerce Wireframe Kit

eBlocks - Free eCommerce Wireframe Kit

This free wireframing kit features multiple mobile screen layouts for designing eCommerce apps and stores. The templates are available in an easily editable Sketch file format.

Free Mobile Wireframe UI Kit (Sketch)

Free Mobile Wireframe Ui Kit (Sketch)

Another free mobile wireframing kit featuring simple user interface layouts. This kit comes with multiple screen designs you can use to craft unique apps for both iOS and Android.

Working on a website design? Then check out our best website wireframe templates collection.

top-5-mobile-application-design-tips-for-2020

Top 5 Mobile Application Design Tips for 2020

For several years, mobile applications have ceased to be the prerogative of large companies and brands. 

With the increase in mobile traffic, an application becomes almost the same indispensable attribute of a business as a personal website or online store. 

You can’t surprise anyone with your own application from the city roll delivery service, a regional taxi company, or a network of fitness centres. 

Therefore, the relevance of competent and modern design goes to a new level.

Mobile Application Design Tips 

Cost Of Mobile Apps

The mobile application design must be convenient, pleasing to the eye, and understandable. 

A competent design will help. 

We made a list of tips and rules that will help make the design practical. 

If you like our recommendation, you may also want to know more about the cost of app design

1 – Show the Main Value on the First Screen

Mobile App Design

It is essential to captivate the user and convince them to continue using your product from the first few seconds. 

Bring your main advantages to the main page and identify key features. 

There should be little text, and it should show maximum benefits.

2 – Simpler Means Better

Simple Mobile Application Design

Do not complicate the design of the interface with numerous details and elements, even if they seem beautiful to you. 

Mobile devices do not have such a large screen as personal computers and laptops. 

Such elements only distract users. 

The design should make a user perform a minimum of actions to achieve their goal. 

Creativity is okay as long as it does not interfere with the user experience.

The same applies to the functionality. 

There is no need to load the product with optional functions. 

Better do the necessary minimum, but ensure its uninterrupted operation.

3 – Use Proven Techniques

Mobile App Branding

It so happened that users are accustomed to specific rules in mobile application design.

It is essential for them that the familiar buttons are in the usual places so that the icons for standard functions are the same everywhere. 

This should be considered when designing. 

Why should you reinvent the wheel if proven tricks already work well?

If you make a super beautiful design, but it will not be understandable to the user, then it will be considered to be wrong. 

It happens since the primary criterion for quality is not visual attractiveness, but usability and positive user experience.

4 – Adjust to the Audience

Mobile Web Design

It is advisable to know who your target audience is to adjust the design to them. 

Take into account such parameters as age, gender, preferences, and interests. 

In this way, it will be easier for you to simulate the user’s path and determine their expectations and wishes. 

5 – Site Sync

Adaptive Web Design

If you cannot place all the content in the application, then you have to redirect a visitor to your leading site. 

But this transition should be comfortable for the user. 

This can be achieved by the similarity of design so that the person who got to the site is not afraid and does not think that this is a mistake. 

To prevent this, the mobile version of the site and the application should be similar.

mobile-microsessions

Have you ever briefly turned on your phone, glanced at it, found whatever needed to find, and then turned it back off? That’s an example of a microsession — a quick session with minimal interaction that completes a user goal.

Definition: Mobile microsessions are mobile sessions shorter than 15 seconds.

The word “microsession follows the terminology introduced by an article by Ferreira and his colleagues, who coined the term “microusage” to refer to mobile usage that is shorter than 15 seconds. They found that a little more than 40% of the mobile usage was microusage.

While the exact time threshold may be arguable (and may vary depending on the population — for example, another study, coauthored by researchers from Stanford University and Apple, found that for elderly adults, the microsession threshold moves up to 22 seconds), it does not really matter. What matters is how to design your apps so that you can allow users to complete certain tasks quickly.

Microsessions are good for the user experience. Generally, time on task is inversely proportional with usability. Time translates in interaction cost, and low interaction cost leads to good user experience. A microsession means that users were able to reach their goal very quickly — likely, because the mobile design supported them.

Supporting Microsessions Benefits Even Apps with Complex Tasks

There are many mobile tasks that we do every day and that are so simple that they can be easily completed in a few seconds. Setting an alarm, checking whether you have any new emails, looking up the calendar for the day usually involve just a quick glance at one screen and maybe 1–2 button presses. These are most likely to result in microsessions.

However, not all tasks can be completed in 15 seconds, even with the best possible design. Researching and buying an air purifier, watching a video, reading and following instructions, composing an email to your boss are all fairly complex activities and most users will take more than 15 seconds to complete them.

But even if your app involves several convoluted steps, reducing the time to complete the task will improve the user experience. A good design will often translate into a reduced interaction cost and thus low task time. Yet, it is not enough. You can do more.

To understand why, let’s think of a user who is trying to check in for a United Airlines flight on the phone. First, the user must find the app on her phone, launch it, wait for the splash screen to load, bypass a login wall or sign in if she does not notice the Continue as guest button, then find the Check in button on the United homepage, tap it, and eventually start the login process. In other words, she has to spend a lot of time to locate an entry point into the task.

United for Android: When checking in by launching the app, the user has to wait for the splash screen to load (top left), then skip the login wall (top right), then find the Check in button on the homepage (bottom left) and finally get to the Flight Check-in page (bottom right).

Designers can provide users with quick, outside-the-app access to the tasks that they perform the most. Doing so can save users the need to locate the entry point by themselves, and if the task is significant enough, can substantially improve the overall user experience.

Designing for Microsessions

Of course, the first worry that you should have is to design your app so that the entry points to these tasks are easily discoverable within the app and the flows are simple and easy to understand. However, you can go one step further and allow people to start these tasks (and sometimes even complete them) without launching the app. Here are 4 common ways to design for microsessions and thus accommodate external task entry points:

1. Notifications

Notifications are the main way in which apps today support microsessions. About 60% of the microsessions in the Ferreira study involved reading or interacting with a notification.

Although notifications do provide at least one entry point to the app (tapping on the notification opens the app), in many cases their function is to update the user on a state of affairs. When a notification is well-designed, users can often get all the information they need from the text of the notification and may not need to launch the full app.

In order to design a successful, notification-based microsession, create notifications that are self-sufficient: that convey a fully formed idea and do not require the user to go elsewhere to understand what the notification is about. Text that is truncated or that does not include enough information forces people to gather additional context for the notification, and that action not only lengthens the session, but also degrades the user experience

A Lyft notification provides all the info that the user needs in order to act upon the notification, without having to launch the app.

If it’s not possible to create a notification that is entirely self-sufficient, at least give users enough context to decide if they are interested in the notification.

This YouTube notification is not self-sufficient: The title of the video is truncated requiring the user to tap on it to see what it’s about. However, the keyword Everleigh present in the notification at least allows users to decide if it’s worth getting additional information. (If they never heard of Everleigh, then the notification is probably irrelevant; if they are enthusiastic fans, then they will probably attend to it.)
Amazon’s notification is not self-sufficient — it does not tell the user what item was delivered, but only that it was delivered. (The photo shows the package, but not the item.)
The default view of a notification on Android truncates the notification to 2 lines. If users expand the notification by tapping the down arrow in the top-right corner, they can see an additional line of text However, even though this notification from Settings on Android is truncated (left), there is enough information scent to understand its content (right).

Make sure that tapping on the notification not only launches the corresponding app, but it takes users to the corresponding page in the app (for example, for a news story, that may be the article page). And, because most users are familiar with this functionality, it’s unnecessary to have an additional Open up in app action present in the notification.

MyShake for iPhone notifies the user that an earthquake has occurred (left), but tapping on the notification does not offer any supplemental information. At the very least, the app should take the user to the location of the earthquake. Instead it simply shows the homepage of the app, which contains a map centered at the user’s current location (right).
ESPN for Android: The option Open in App is not necessary, since the same result can be obtained by simply tapping the notification text (a behavior that is highly familiar to mobile users).

Consider supporting the main actions that apply to the notification item within the notification itself. Doing so presents the user with the opportunity to complete the task without launching the app. For example, for a news article, an appropriate action may be to save it for further reading, whereas for an email notification, deleting the message may be a good one to support.

The notifications from Calendar for iPhone (left) and NYTimes for iPhone (middle) allow users to directly act upon the content they present. The notification from Linkedin (right) is self-sufficient, but would have benefited from a Congratulate button that would take the user directly to the message page.

In some cases, consider providing entry points into typical flows that the user may take from that notification. For example, the Weather Channel’s Android app notification allows people to access weather info in different formats (Hourly, Daily, Radar).

Weather Channel’s Android notification provided entry points into the Hourly, Daily, and Radar views of the local weather.

2. Widgets

Widgets are compressed views of the app that usually present a single piece of data that represents the state of the app. They are ideal for tracking frequently changing information (such as weather) and are typically accessed from the phone’s homescreen (on iOS, from the Search screen), if the user chooses to add the respective widget to the screen.

In iOS, widgets can also be accessed through a long press or 3D touch gesture on the app icon, even if the user has not decided to install the widget.

iOS widgets: (Left) The Search screen contains several widgets from multiple apps. (Right) Some apps also display a widget when the user long presses the app icon on the phone’s homescreen. The Maps app shows a widget offering directions to a frequent destination.
Android widgets: Widgets can have different shapes and display different types of content. The Gmail widget is a collection widget, that shows several emails and the CNN widget is an information widget. Note that the user can resize the widgets, as noticed by the two sizes of the CNN widget in the two screenshots. (However, even when the CNN widget is enlarged, right, the text displayed is still truncated — forcing the user to launch the app in order to get the full title and gist of the story.)

Widgets are helpful because they allow users to quickly inspect data from the app and track if something has changed. Like notifications, widgets should be self-contained and preferably not truncated. For example, the CNN widget should not display a truncated title; instead, a full sentence should describe the story even at the smallest widget size.

Widgets are, however, more powerful than notifications. They allow simple interactions within the widget itself. For example, the user can scroll vertically within the Gmail widgets or can tap the lateral arrows to move through news stories in the CNN widget. And sometimes widgets simply offer a list of entry points to tasks in the app (similar to quick actions below).

The key issue for widget usability is whether you can indeed identify the one thing people will want to track, and if so, whether you can compress that information into a concise unit for display in the widget. If there are several items of potential interest, s, then a collection widget that shows them may be a solution, although the same general problems arise: can you reasonably focus on those few items that your users will want to see, and will they remain useful even after being seriously compressed to fit within the widget space?

Unlike notifications, widgets allow some limited interactions. In iOS, it’s possible to expand a widget(left) and see additional content (right).
In Android, it’s possible to tap the arrows in the CNN widget in order to see more stories (top) or you can scroll vertically in the Gmail widget to expose more emails (bottom).
The Yelp widget for iOS provides entry points to various content-categories available within the app.

3. Quick Actions

Recent versions of iOS and Android support accessing actions within an app directly from the homescreen, through a long press or a 3D Touch gesture — essentially an implementation of a contextual menu. (Note: the 3D Touch is no longer supported on iPhones XI and it was replaced by the long press.) In iOS, the gesture can also display a widget alongside the quick actions.

A long press on Amazon for iPhone (left) and United for Android (right) displays a list of actions that users can take directly, without having to open the app. Thus, using United’s Checkin quick action leads directly to the Flight Checkin page.

The quick actions save users from having to launch the app and find the within-app entry point for the task they want to accomplish. The quick actions don’t need to include only tasks that can be microsessioned — instead, they should link to tasks that are important to your users.

There is only a limited number of quick actions that can be displayed in the quick-action contextual menu, so don’t waste the space with actions that are likely irrelevant to your users. Instead, focus on the top tasks — the tasks that are performed often by many users. For example, inviting friends to Airbnb is likely a rarely performed action, as is contributing to Google Maps — none of these actions need to be included on a quick-action list.

Quick-action list should include actions that are important to your users and that they perform frequently. Neither Invite friends (Airbnb, left), nor Your contributions (Google Maps, right) qualify.

4. Through an Intelligent Assistant (Siri or Google Assistant)

Both iOS and Android apps can take advantage of intelligent assistants— Siri and, respectively, Google Assistant — to allow users to quickly interact with the app using voice.

In iOS, applications can provide shortcuts to Siri that enable users to perform certain frequent tasks or tasks that are appropriate at certain moments of time and in certain locations. For example, upon noticing frequent payments to a certain person, the PayPal app can suggest a shortcut that enables the user to do that action directly through Siri. While the user has to accept these shortcuts, it’s still important for the application to identify them and suggest them to the user (ideally, even within the app).

Application-suggested shortcuts enable the users to perform a specific action quickly. In this example, the PayPal app suggested a shortcut for a frequent payment, which is available both from the iPhone’s Shortcuts app (left) and, in this case, from the PayPal app itself (middle). After the user defines the shortcut (right), she can use the word Cheese to perform the action.

In the Android ecosystem, it’s also possible to define shortcuts, or, in Android parlance, routines. For example, one such routine can ask Google Assistant to report the Weather Channel forecast for San Francisco whenever it hears the word Weather.

A Google Assistant custom routine allows the user to get the weather in San Francisco whenever she says weather to Google Assistant.

Familiarity

Most users are not familiar with the tools available for microsession support — widgets, quick actions, Siri shortcuts, and Google Assistant routines don’t yet get widespread usage (the only notable exception is notifications). Yet, these actions can offer significant speedups for those users who know about them, and are thus an example of usability heuristic # 7: flexibility and efficiency of use. And more and more users will discover them accidentally — for example, long pressing an app has long been the gesture for rearranging apps on the screen in both iOS and Android. Because now long press also shows quick actions, people will uncover them while trying to clean up their screens, and thus they will eventually get used to them. Or, if apps advertise their Siri suggestions inside the app, users will notice them sooner or later and may take advantage of them.

Normally, if a design change or innovation will take a lot of money to implement but will only benefit a few of your users, we don’t recommend it. Its ROI is likely too low. But unlike other fringe design innovations, support for microsessions is easy to implement. Take advantage of these features in order to improve the overall user experience.

Conclusion

If your mobile users can quickly finish what they want to do in your app, it means that you’ve done a good job of designing it. You can save users even more time and effort by allowing them to circumvent the launching of the app through self-sufficient notifications and widgets or by providing them with external task entry points through quick actions and voice-assistant shortcuts or routines.

References

D. Ferreira, J. Goncalves, V. Kostakos, L. Barkhuus, and A. K. Dey. 2014. Contextual experience sampling of mobile application micro-usage. MobileHCI ’14. DOI: https://doi.org/10.1145/2628363.2628367

M. L. Gordon, L. Gatys, C. Guestrin, J. P. Bigham, A. Trister, and K. Patel. 2019. App Usage Predicts Cognitive Ability in Older Adults. CHI ’19. DOI: https://doi.org/10.1145/3290605.3300398

iOS Human Interface Guidelines. https://developer.apple.com/design/human-interface-guidelines/ios

Android Developers Guide. https://developer.android.com/guide

re-designing-a-mobile-ar-experience-for-athletes

Athletes, sports teams and their coaches always look for ways to get better results and guarantee victory. New technologies are a great advantage for professional athletes to improve their techniques and estimate the pros and cons of the practice.

AR can become an indispensable tool that all athletes will handle to obtain real-time data on each hit, running distance, thrust, throw, jumps and more. With this information, athletes can correct their actions, change the technique and make the right decision.

AR Users Feedback

In the absence of user surveys, I took the initiative to study the various comments and views on existing users of the various store platforms to download applications from both Google Play and App Store, to identify the main pain points and challenges that users find in AR apps. The pain points that users exposed were:

  • Poor use of the user interface design because it caused confusion on how to use certain features
  • Poor reliability in measuring distances
  • GPS and location issues and failures
  • Problems to register for buttons that appear inactive
  • Excellent performance for one type of device and for other devices app does not work

The most recurrent pain point in all reviewed apps was confusion when using the user interface. Users felt that more instructions were needed one even had to contact support to figure out how to an app. That being said extensive research was put into user interface legibility and readability in an effort to avoid these challenges AR users have experienced in other apps

The applications which user reviews were taken into consideration for this evaluation were Strava, Jefit, Nike Run Club, Argus, Houzz Home Decor (ar), TapMeasure — AR utility, AR Civilizations, AR Fitness

User Interface Legibility for outdoor or bright lights

According to research on legibility, several factors including contrast polarity have an impact on legibility. They summarize the effect of the color-related factors as ‘Color difference was found to play a minor role in legibility under daylight ambient conditions.’ Edward F. Kelley in a study on Display Daylight Ambient Contrast Measurement Methods and Daylight Readability found

daylight readability assumes negative contrast polarity will degrade readability.

This information lays a crucial role in the development of the user interface hence users will be using the app in varying lighting. This is why UI efforts will focus on contrast. The more contrast the more visible in varying light. Earthy, pastel and desaturated colors are to be avoided. The color palette will focus on bold, saturated, complementary colors to maximize contrast.

Readability and typefaces in AR

Although no conclusive research can prove if san serif or serif fonts are more legible between each other recent studies have proven many sans font are legible but not readable. Much of it has to do with the letter shapes themselves. Monotype and MIT AgeLab conducted a study that found that the style of a sans-serif typeface can affect how long a driver’s eyes fixate on a dashboard screen and off the road while driving. The study tested humanist and grotesque typeface styles against each other and found that humanist typefaces were significantly quicker and easier for drivers to read.

“There was a 12% difference in average glance time, which represents approximately 50 feet in the distance when traveling at U.S. highway speed.”

The research has shown that the glance time difference between the two sans-serif typeface styles is too great to ignore. Hence the preferred font for increased readability in order to enhance the overall user experience within an Augmented Reality app is a humanist sans font.

UX Audit — App testing

Nchworm App

Since there is an existing app to test I like to conduct a UX audit. Where I create a document outlining a usability inspection and the recommendations from UX best practices. The existing design was not visually appealing and lacked the fundamentals of user experience design and user interface design for augmented experiences. There were many areas to improve from a visual standpoint as well as a usability point areas such as:

Realism

AR objects should engage with and reflect their environment. Using shadow planes, reflection, lighting, and textures help emphasize the objects in place making use of realism.

Depth

Identifying how far away a cone was difficult even though they included distance markers. In AR experience, it is best to create depth by properly using shadow planes, occlusion, and perspective. It would help to place larger objects closer to the user and smaller objects further away to define depth.

Content Manipulation

Just about all the controls in this app are buttons. Avoid on-screen control under all means in AR experiences. Content selection, scaling and rotation should all be done through gestures. Example multi-touch gestures:

Rotation — support both 1-finger and 2-finger gestures

Scaling — Pinch to scale

Not all was terrible focusing on usability the app did 2 aspects very well.

Movement

Nchworm encouraged movement which is a key element that is often overlooked when designing for AR the app clearly reminded users they can move around through guided steps. It also places objects cleverly encouraging them to move toward it.

Plane discovery

The app effectively shows users how to find a surface using their phones. It used illustrations to show users how to scan properly and gave instant feedback to show the surface was detected.

When designing for AR I like to check back at Google’s augmented reality design guidelines since its a very comprehensive guide for designing AR experiences.

from-idea-to-mvp-and-10k-users-–-mobile-app-lean-development-case-study

CASE STUDY – PERSONAL PROJECT 

CASE STUDY – PERSONAL PROJECT 

CASE STUDY – PERSONAL PROJECT 

Merkato is an app in Poland (for Android & iOS) that connects local people who want to sell or buy used stuff on the fly.

Merkato is an app in Poland (for Android & iOS) that connects local people who want to sell or buy used stuff on the fly.

MY ROLE: 

MY ROLE: 

MY ROLE: 

Wireframing,

UX,

UI Design, 

Branding,

Wireframing,

UX & product strategy,

UI Design, 

Branding,

From idea to MVP and 10 000 registered users.

The total valuation of products on Merkato’s marketplace exceeded 1 000 000 PLN.

From idea to MVP and 10 000 registered users.

The total valuation of products on Merkato’s

marketplace exceeded 1 000 000 PLN.

From creating MVP to more than 12 500 registered users.

From 0 to total valuation of products on Mercato’s marketplace exceeding 1 000 000 PLN.

Coverapp

The Idea was born.

You’ve probably experienced it before…

It’s quite uncommon for 3 people to come up with the same idea in the same week but that actually happened, and I’m going to tell you the story of how it started.

Few phone calls, few chats, we were pumped! You know how it goes, you probably experienced it before.

You think about an idea and you are really excited about it….you get the dopamine & endorfines flowing in your blood stream when you talk about it with your friends and they share the same vision….coincidence? I don’t think so! 😉

You are waking up the next day and the idea is still there and it still sounds reasonable. Ok, let’s do it!

“With Great Power Comes Great Responsibility…”

– Ben Parker, the Spiderman

Design_Business_Technology

Each of us have expertise in our field. The combination of our skills made us self-sufficient and the project sustainable in the long run.

Strategic decisions were made always together and each of us had freedom & their own responsibilities in their own area.

On the high level approach we had the same vision & drive for the project.

Research, do your homework first!

“Give me six hours to chop down a tree and I will spend the first four sharpening the axe”

― Abraham Lincoln

We conducted research to better understand and learn more about the filed. We collected a lot of data – extracted insights and benchmarks. We were taking deep dives into this subject from the angle of each field (business, technology, design)

From the high level perspective, during that stage we found answers for following questions:

  • For whom we are solving the problem? (Target audience)
  • How big is the problem we are trying to solve? (Market)
  • Are there other products that are already solving it? (Competition)
  •  if so…..how are they solving the problem? (Products)

Many findings from this stage were added to the presentation that was created months later.

Merkato_3

Few slides from the presentation

The bird’s-eye view of the solution – the backstory

Personally I’m a sci-fi fan. In the “Eva” (2011) movie, Daniel Brüh is playing a genius which was employed by his former university to design AI for robots. There is a scene when he is at home in his workshop.

He has this really cool tool to design AI. 

Think about it as a Lego bricks visual programming language fully interactive holograms gesture UI.

In an instant he is able to zoom out and see the bird’s eye perspective of his project.

And zoom in to see the smallest tiniest details…

He can see how different systems are working together. Everything is interactive & interconnected. He can change each module, he can play with it the way he likes.

I wrote this long introduction because user story mapping for me is what this design tool is for the main character from the “Eva” movie.

Sure it’s a little different, two-dimensional and not so interactive and high-tech. Instead of holograms there are sticky notes and instead of gesture UI there are pens and pencils 😉 but it’s just a great tool to envision new ideas and explore their dynamics.

PS. If you are working on an interactive hologram version, please contact me right away! I am your perfect early adopter 😉

Clarifying the idea – User story mapping

I always see value in doing user story mapping.

It’s build from the user perspective. Every feature, every interaction is built on top of the user journey.

It helps everybody get on the same page. It fosters discussions and helps to get the same understanding about high level features & every little detail.

It’s great for MVP & Lean development. Based on it you can craft your first release, first version of your idea. It’s a reference during every and each of your next iteration.

It’s great for most projects. Personally I believe it’s useful 90% of the time. It’s a design tool that you can use whether you are creating a new app or planning your 1 month of traveling through Indonesia.

Below you can see the user story map of our app.

Pierwszy_USM

All user stories – User story map of our app.

MVP – The way we crafted first release

“If You’re Not Embarrassed By The First Version Of Your Product, You’ve Launched Too Late”

― Reid Hoffman

We distilled the experience down to the core functionality – core value proposition.

If you think about Dave McClure‘s customer lifecycle we were able to get a grasp of the funnel from Acquisition to Retention.

Below you can see the first release.

Drugi_USM

Our first release – User story mapping 

Releasing something into the world (in the early stage) is always exciting and a little scary at the same time.

However it is the best way to test assumptions and get early feedback.

We got four 1-star reviews on Google Play. Below you can see one of them.

Merkato_9

Screenshot of the review from Google Play console

Those four reviews were a little painful but it was something we knew could have happened and it was fair. In MVP version you could add only one photo of your item (no ability to add title, description, category or more photos) so people had to send messages to each other and ask about everything – it’s understandable why they were upset.

There is no such thing as “bad feedback” and to be honest we were kind of happy that somebody cared enough to let us know what’s the most important for them.

Also, we had already prioritize the features that were mentioned in the review to be built in the next releases – those reviews were another thing that confirmed our roadmap.

During the first release we were able to get answers for many questions, here are just a few of them:

  • Cost of acquisition from Facebook & Google Adwords (CPC, CPI, CP added products)
  • Conversion rate on app install from Google Play & App Store
  • Conversion rate on registration in the app (Continue with Facebook)
  • Engagement inside the app (% of active users who visit item, add item, send message)
  • User retention

After the first release, we learned that this idea about the app can actually work.

Each new release – Lean development

“If you can’t measure it, you can’t manage it”

― Peter Drucker

We were crafting each release having in mind the value that we are bringing to our users.

Hypothesis – Assumptions – The way we are going to measure it. Learn – Build – Measure loop.

We weren’t able to conduct an A/B test at that stage but because we were doing it step by step we were able to double check each feature and make data informed decisions.

We were tracking our core KPI’s and with each new release we were adding events to track new features. After a while we started learning from the data we had been collecting.

First few releases were focused on the core functionality, mostly on the basic features with high value for users (add titles, prices, categories, visit other user profile etc) after that we were using RICE method to prioritize each release.

Below you can see what was shipped in the first six sprints.

Ostatni_USM

First six sprints of development

3 pillars of user experience

Based on a research, competitive analysis and our gut, we wanted to focus on those 3 core elements right from the get go:

  1. Flow of adding items for sale
  2. Fostering trust
  3. Product presentation

1st – Flow of adding items for sale

For users – adding products, something that takes a long time on other platforms we wanted to be as fast as taking a photo.

For the platform – it’s the answer to the question “what came first the chicken or the egg” in the case of building a marketplace from scratch.

Also on the Polish market there are many products solving that problem but none of them are mobile only. It’s not only about the platform – it’s about how we believe this problem will be solved 5 years from now.

Win – win.

For users & for the platform.

There was one major insight about adding/posting products for sale online. It was something that came up at interviews and was also seen in the reviews of our competitors online – Posting items for sale is time consuming.

Based on some interviews it takes about 10-40 minutes to post your item/items.

This is how it looks like:

  1. You have to find the item you would like to sell (often it’s at the bottom of your closet)
  2. Sometimes (depending on the item) you have to clean it first to make it look good on photos.
  3. You are ready to go online & create your listing. On most of the services in Poland it’s obligatory to fill in all fields, like: add Title, Description, Category (sometimes there are more things depending on the category) and at least one photo.

So as you can see it’s time consuming.

Also, based on our data 63% of people are adding 2 or more items to sell.

Merkato_11

If you have more than 1 item for sale – you have to block even more time from your day to post all those products.

That’s why most of the time selling your unused stuff is tagged in your mind as “I will do it this weekend”. We wanted to change that perception. Eliminate unnecessary steps & brake the flow into small chunks – You don’t have to do it all at once.

Don’t wait for a weekend – it’s so fast you can do it now!

There is a good piece of advice from James Clear “Atomic Habits” book that can be applied here. The author is writing about taking small and incremental steps towards building a habit. He advises “make it easy for yourself” – even though that sounds obvious it’s not used so often. If you want to build the habit of drinking water always after waking up, just put the bottle next to your bed. Boom!….you just hugely increased your conversion to drink water after you open your eyes.

The same goes with adding your products for sale.

The most important step (the one that is moving the needle) should be the easiest one. Just open the app and take a photo. You take the photo & and your listing is live for sale – your chances of selling the product hugely increases.

Want to increase your chances even more?

  • Share it with your friends (you just increased your chances by 20%)
  • Add more photos (15% increase)
  • Add the title & description (10% increase).

All those things can be done later.

The most important step is already made. Your listing is live for sale.

Add listing_02

Easy way to enter the flow

Add an item button. This is the most important action in the app. CTA is highly visible and easily accessible from every main screen in the app.

Number of steps in the flow

The balance between number of added listings & the number of high quality listings (many great photos, well described item) is the most important.

Add listing_wf

Add listing selected screens

Below you can see some of the selected screens from Add listing flow.

(awesome illustrations by icons 8)

Add listing_03

Add listing_06

2nd – Fostering trust between users

2nd – Fostering trust between users

If you think about it, trust has always been and still is the biggest currency in trade.

The most effective way to foster trust from the beginning was to use Facebook as a way to verify users. Facebook is the most popular social media platform in Poland and we were already using it to drive traffic to our app.

Main advantages:

  • Fast and easy registration (Continue with Facebook CTA)
  • Legit users & their profiles (real photos, real names)
  • Possible lower % of spam and abuses from the beginning

Cover_onboarding

Fosteringtrust05

Main elements to establish and foster trust:

  • Verified by Facebook sign in Profiles
  • Real names of the sellers and buyers
  • Large photos of sellers and buyers
  • Ability for instant contact

3rd – Product presentation

Right from the beginning we wanted to focus on an advantage that we had because we were creating a mobile platform.  I’m talking about product presentation and the difference between vertical and horizontal listing photos.

All platforms of our competitors in Poland are designed in a way that product is presented horizontally (on the feed & on the listing detail.)

When you think about it, back then in 2006 when they were designing the platforms it made perfect sense – there was only desktop traffic.

On January 9, 2007 the first Iphone was officially announced.

Since then mobile phones became more popular. Therefore mobile apps were created to take advantage of more and more traffic coming from mobile devices – but the framework stayed the same. They were designed having a horizontal photo presentation as a default. Once again it made perfect sense because their main traffic still was coming from desktop.

But the dynamic was changing, one mobile user at the time…Now in 2019 the mobile is huge and there is no going back.

Because we were creating a mobile platform we wanted to use that dynamic to our advantage.

Home screen – difference between horizontal and vertical.

Product-Feed

Product-Detail

Product detail – difference between horizontal and vertical.

📮 Contact me anytime

📮 Contact me anytime

📮 Contact me anytime

📮 Contact me anytime

📮 Contact me anytime

Made with 🧉 in the beautiful city of Krakow © 2019 Mateusz Tatara

Made with 🧉 in the beautiful city of Krakow © 2019 Mateusz Tatara

Made with 🧉 in the beautiful city of Krakow © 2019 Mateusz Tatara

Made with 🧉 in the beautiful city of Krakow © 2019 Mateusz Tatara

mobile-conversions-rising,-but-desktop-conversions-still-93%-more-valuable,-study-says

Despite the fact mobile devices are now the dominant way that consumers browse and search the internet, mobile ad clicks and conversions are less valuable than those on the desktop. That’s according to an analysis of 10 million ad clicks across 100 accounts by digital marketing agency AccuraCast.

Mobile conversions growing but less valuable. But while mobile conversions grew a significant 10 points from 2018 to 2019 (39% to 49%), the majority of conversions still come from the desktop. AccuraCast said, “overall, desktop visitors convert 60% more than mobile visitors, and conversions from a desktop device are worth 93% more than mobile conversions, on average. (For B2C companies, conversion value was calculated as the average order value, and for B2B it was calculated as the lead value and propensity to buy.)”

Historically AOV for desktop transactions has been higher than on mobile devices. This is backed up by multiple other studies and reports. As a generalization, consumers browse on mobile devices and tend to buy on the desktop — although that is changing.

A year’s worth of data analyzed. The firm looked at mobile and desktop ad clicks between August 2018 and and August 2019. Mobile impressions, clicks and conversions (e-commerce or lead capture) grew during the 12-month period.

Low quality apps/sites that drive traffic but not conversions.
  • Poor performing landing pages that aren’t transaction friendly.
  • Ad formats that generate accidental clicks.
  • AccuraCast implies that latent conversions on different devices (mobile ad exposure with a later desktop conversion) may thwart tracking — and potentially distort the data to some degree. That issue isn’t really discussed in the report, except that AccuraCast recommends retargeting non-converting mobile users on the desktop, where they’re more likely to buy.

    Why we should care. For years consultants and industry experts have advised retailers and others to speed up and simplify the mobile user experience. Heeding that advice has clearly borne fruit in the form of conversion and revenue growth on mobile devices.

    What the AccuraCast report indicates is that there’s still some distance to go. However, retailers and other sellers should not see the desktop and mobile as mutually exclusive channels. Most shoppers are using multiple devices to make buying decisions, depending on the level of purchase consideration. One exception may be younger users who are less engaged with PCs and tend to favor mobile devices and physical stores over traditional e-commerce.



    About The Author

    Twitter or find him on LinkedIn.




    mobile-e-commerce-ux:-deemphasize-‘install-app’-ads-or-avoid-them-entirely

    “Install App” ads — which ask mobile website users to install the site’s application on their mobile device — are quite common on mobile e-commerce sites, with 53% of sites during testing displaying one.

    Indeed, it’s entirely understandable that e-commerce sites that have apps would want to promote them while users are on their website.

    Yet our newest round of large-scale mobile e-commerce usability testing reveals severe and disruptive issues caused by these “Install App” ads. These include:

    • “Install App” blocking the view for critical site content (e.g., blocking an “Add to Cart” button),
    • “Install App” appearing multiple times even after users have dismissed it, or
    • “Install App” narrowing the viewport when users choose to ignore it, leaving them with a reduced view of the main page content.

    These issues make it clear that having an ad for “Install App” has a high cost in terms of causing an often severe negative impact on users’ product-browsing and -purchasing experience on the mobile website. During our testing “Install App” banners were the direct and sole cause of several abandonments of some of the world’s largest e-commerce websites.

    In this article, we’ll discuss the test findings from our latest mobile usability study related to “Install App” ads. In particular, we’ll discuss:

    • Severe usability issues caused by “Install App” ads
    • 3 ways issues caused by “Install App” ads can be minimized
    • Carefully weigh the benefits vs. drawbacks to showing ‘Install App’ ads

    Observed Issues Caused by ‘Install App’

    It’s a bit of a disaster now, it’s not very straightforward. I can’t see where it says ‘Add to Cart’. A subject at Sephora, who had already decided that she wanted to add a lipstick to the cart, was unable to do so. She scrolled the product page multiple times, scanning for an “Add to Cart” button, then went to the cart and assumed she had to sign in to add the product to the cart. This was a stopping point for her, and only after the facilitator asked her to close the “Install App” ad did she see the “Add to Cart” button. Such a severe block to users’ ability to make a product-purchase decision will be a direct cause of site abandonments.

    In testing, the most severe outcome of having the “Install App” ad displayed was when it covered critical site elements — for example, the “Add to Cart” button. As one user said, “‘Add to Basket’ was underneath the little flash pop-up thing. Yeah, that’s stupid [laughs]. That annoyed me.”

    With the “Install App” ad displayed, some users won’t be able to add products to their cart without first dismissing the ad — which testing revealed not all users will think to do. Consequently, in some cases the “Install App” ad will be a direct cause of abandonments.

    “I don’t know how to get out of this…Oh there”. A user at Under Armour was viewing images of shoes in an image gallery overlay. When she was finished she wanted to return to the product page but couldn’t figure out how to exit the overlay. She first tried tapping the page behind the overlay but nothing happened (first image). Stumped, she wasn’t sure what to do, before she finally noticed and closed the “Install App” ad, which revealed a “Back” link to exit the overlay (second image).

    At Under Armour, the “Install App” ad blocks critical product filters (“Gender” and “Category”; first image) until another user dismisses the ad (second image).

    “Is there a way I can find it for “Men” and not “Youth”? None of them are clickable. It doesn’t seem like I’ve got size options. There should be something underneath “Size” that I can click…I don’t know what to do.” A different user at Under Armour never thinks to dismiss the “Install App” ad — consequently, he never discovers the filters for “Gender” and “Category”, which were required selections in order to see “Size” filters. He ended up with an overly broad product list that was difficult to navigate.

    At B&H Photo, the “Install App” ad covers the “Done” button to apply filters. This user initially exited the filter interface and was confused when his filter changes weren’t applied. He reentered the filter interface, dismissed the app ad, then noticed the “Done” button to apply his filtering choices.

    Covering the “Add to Cart” button is obviously a severe issue, but other instances of the “Install App” ad covering crucial content were uncovered as well during testing. For example, the “Install App” ad covering buttons or links needed to exit interfaces or apply selections (such as filters).

    These instances, while less severe than when the “Install App” ad covers the “Add to Cart” button, are also quite disruptive for users, as they begin to feel lost and no longer in control of the interface.

    Furthermore, some users will never think to dismiss the ad and, consequently, will never find whatever the ad is covering (e.g., crucial filter types). Other users may go back-and-forth between different interfaces as they try to figure out why their selections aren’t being applied (e.g., when the “Install App” ad is covering the “Done” button in filtering interfaces), before finally thinking to dismiss the ad.

    Indeed, the “Install App” ad is, for many users, an example of “banner blindness”, where despite its prominence it is ignored. Users missing banner ads for promoted products is one thing, but missing crucial site elements and features because an “Install App” ad is covering them is a much more harmful case of banner blindness.

    At Overstock a custom “Install App” ad, combined with a tracking privacy notice, severely limits the actual page content a user is able to see (despite using a tall iPhone XS). Even when “Install App” ads aren’t covering crucial site content they limit a user’s viewport — and therefore hinder the product-browsing experience.

    In addition to covering site content, “Install App” ads were also observed in testing to severely limit users’ ability to view main page content.

    On mobile, screen real estate is already at a premium, and small viewports are simply a fact of life.

    However, making the effective viewport even smaller by showing an “Install App” ad — which, again, not all users will actually dismiss right away — makes it even more difficult to browse and evaluate products. This is especially true when the app ads are combined with privacy notices and other nonproduct-related content, which combined may reduce a user’s ability to see actual page content by 50% or more.

    Additionally, it’s worth noting that issues were caused in testing both by the native “Smart App Banners” and custom-designed “Install App” banners.

    Now, an obvious solution to the issues caused by the “Install App” ad is not to display one at all to users. In fact, 47% of sites during testing didn’t show an “Install App” ad when users were browsing the sites.

    If opting not to display the “Install App” ad at all on the site due to potential usability issues, consider other, less-distracting ways the app can be promoted to users. For example, displaying the ad only on the order confirmation page (after users have placed an order) or including links in marketing emails and newsletters.

    Adopting a more subtle approach may allow sites to straddle the line between disrupting users and promoting their app: ensuring that users are allowed to browse free of issues caused by the “Install App” ad while satisfying business interests to promote the app to users.

    Three Ways to Minimize Issues Caused by ‘Install App’

    While we advise great caution before using “Install App” ads, if it’s deemed that the business case is sufficient for disrupting website users with “Install App” ads then consider the following 3 implementation details, which we observed can greatly impact the cost / benefit ratio.

    1) Incentivize users to install the app. While showing an overlay immediately on page load is disruptive, at least Amazon offers users an incentive to download their app.

    1) Incentivize users to install the app. If the business case is strong enough to accept losing some mobile website users due to the “Install App” ad, then consider at least incentivizing users to download the app from the site. Offering users “10% off your first order” or “Get $10 to use after installing the app” may get more users to actually install the app on their device, and therefore may offset to some extent the users lost due to usability issues caused by the “Install App” ad on the website.

    2) Don’t permanently display the ad. At Walmart an “Install App” ad persists despite this user having been on Walmart for several minutes. This is disruptive to the product-browsing experience. Additionally, it’s likely that few users will decide to download an app when they’re already minutes into their browsing on the mobile website.

    2) Don’t permanently display the ad. If an “Install App” ad must be displayed, it should be removed once users have navigated to a new page on the site or have been on the same page for a certain amount of time. Once users have been on the site awhile, or have navigated to new pages, the benefit of showing the “Install App” ad decreases, while the potential to distract users is constant or increases.

    As mentioned above, “Install App” ads were observed during testing to suffer from banner blindness, where some users simply ignored them. For these users, the end result will be that they’ll have a much more limited view of the main site content for the duration of their time on the site, if the ad is permanently displayed. Furthermore, these users will potentially never see some critical site elements that are hidden by the “Install App” ad.

    3) Show the ad only on certain pages. At Amazon, the “Install App” ad was automatically removed once this user moved from the homepage (first image) to viewing search results (second image) — greatly reducing how potentially distracting the ad is to users.

    3) Show the ad only on certain pages. Showing the ad only on certain pages — for example, only on the homepage — also will limit the damage to users’ browsing experience by removing the ad from potentially problematic areas (e.g., product lists, product pages, or search results).

    Additionally, limiting where the ad is shown will allow potential issues that the ad may be causing to be better monitored (e.g., overlaying important site elements or content). Conversely, displaying the ad universally throughout the site makes it nearly impossible to control adverse effects that are caused by the ad.

    Carefully Weigh the Benefits vs. Drawbacks to Showing ‘Install App’ Ads

    The “Install App” ad partially covers the “Added to Cart” overlay for another user at Under Armour.

    Sites that choose to display “Install App” ads are clearly hoping users will download the app and then use it on their mobile device to make purchases, rather than going to the mobile website. The reasoning likely is that users using the app are likely to be more frequent and loyal customers.

    However, as illustrated above, displaying an “Install App” ad to users isn’t a “freebie” and, depending on the implementation, will either directly or indirectly lead to mobile website abandonments (e.g., if users are unable to find the “Add to Cart” button or if it’s more difficult to find products using filters).

    Sites should weigh these costs carefully against the benefit of having a minority of users actually install the app on their device, and then also use it instead of the website.

    If “Install App” ads must be displayed to users, then be sure to minimize the disruption for users, by:

    1) users are incentivized to download the app,


    2) ads are temporary, and


    3) ads are only displayed on a select few pages

    This article presents the research findings from just 1 of the 690 UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” mobile e-commerce user experience.

    Authored by
    Edward Scott. Published on
    August 20, 2019.

    building-mobile-apps-with-ionic-and-react

    React developers can get the advantages of Ionic to build hybrid mobile apps and progressive web apps. In this tutorial, we’ll be using Ionic and React to build a mobile app from scratch.

    Ionic has recently added support for React; so now, React developers can get the advantages of Ionic to build hybrid mobile apps and progressive web apps (PWAs). In this post, we’ll show you how to get started using Ionic with React by building a simple demo app from scratch.

    Prerequisites

    In order to properly follow this tutorial, you’ll need the following prerequisites:

    • recent versions of Node.js and npm installed on your system,
    • working knowledge of TypeScript and React.

    You can check that you have the latest Node.js version (v10) installed by running the following command:

    $ node -v

    Introducing React And Ionic

    Let’s start with brief introductions to both React and Ionic.

    According to the official website:

    “React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called ‘components’.”

    React focuses on building UIs and doesn’t provide any built-in tools for the common tasks required in web development, such as fetching remote data and routing, so you’ll need to use some existing third-party libraries for these tasks.

    According to the Ionic website:

    “Ionic Framework is the free, open-source mobile UI toolkit for developing high-quality cross-platform apps for native iOS, Android, and the web — all from a single codebase.”

    Basically, it’s a set of UI components that you can use with plain JavaScript or any popular front-end framework or library, such as Angular, React or Vue, to build a hybrid mobile app and PWA.

    In this tutorial, we’ll see and use some Ionic UI components such as the following:

    • IonMenu: With this, a navigation drawer will slide in from the side of the current view.
    • IonToolbar: These top bars are positioned above or below the content.
    • IonHeader: This parent component holds the toolbar component.
    • IonContent: This component provides a content area, with methods to control the scrollable area and other things. You need only one content component inside a single view.
    • IonList: This component contains items with similar data content, such as images and text. It’s made up of IonItem objects.
    • IonItem: This component may contain text, icons, avatars, images, inputs and any other native or custom element.
    • IonButton: This component provides a clickable element, which can be used in a form or anywhere that needs simple, standard button functionality.

    Installing Ionic CLI v5

    Ionic’s command line interface (CLI), version 5, has support for creating Ionic projects based on React. So, let’s get started by installing the tool from npm.

    Open a CLI, and run the following command:

    $ npm install -g ionic

    At the time of writing, Ionic’s CLI v5.2.3 is the latest.

    Note: *According to how you installed Node.js in your system, you may need to add sudo before your command in macOS or Linux or run the command prompt as administrator in Windows if you get any permission errors. You can also simply fix your npm permissions or use a tool such as nvm.*

    Next, install Cordova Resources (which is used to generate Cordova resources locally) and Native Run (used to deploy app binaries to devices):

    $ npm install -g cordova-res native-run

    These are required only if you want to test your application on a real mobile device or emulator.

    Creating An Ionic And React Project

    Now, let’s create a project based on React. Go back to your terminal, make sure you are in your working directory, and run the following command:

    $ ionic start myApp --type=react

    We use --type=react to generate a project based on React. You’ll next need to choose a starter template from the available ones. Let’s pick sidemenu for a starter template with a side menu and navigation.

    After generating the project and installing the dependencies, you can serve your app locally using the following commands:

    $ cd ./myApp
    $ ionic serve

    Your app will be available from the http://localhost:8100 address, and you can actually use your web browser to start playing with it.

    Ionic is called a hybrid mobile framework because it makes use of web technologies that were originally designed to create web apps, along with a native container (Cordova or Capacitor), to build mobile apps without using native technologies for the target platforms, such as Java or Kotlin for Android or Swift for iOS.

    Because your mobile app is actually a web application, you can do most development by testing in a web browser without using an emulator or a real mobile device, except for testing native device features such as the camera or the SQLite storage, in case you’ve used them in your app. In fact, it’s even possible to use certain techniques to mimic the plugins that provide the native features and do the entire testing during development in your web browser.

    Cleaning Our Project

    We have the app’s basic structure, with two pages (home and list) and a menu. Let’s remove the list page since it’s just boilerplate code.

    First, remove the src/pages/List.tsx file, then open the src/App.tsx file, and remove the entry for the list page from the appPages array:

    const appPages: AppPage[] = [
      {
        title: 'Home',
        url: '/home',
        icon: home
      }
    ];

    Also, remove the import of the list page from the file:

    import  List  from  './pages/List';

    Next, remove from the App component:

    const App: React.FunctionComponent = () => (
      
        
          
            
            
              
                
                 } />
              
            
          
        
      
    );
    
    export default App;

    The App component is the root component that gets rendered by our application. If you open the src/index.tsx file, you’ll find the following code:

    import React from 'react';
    import ReactDOM from 'react-dom';
    import App from './App';
    
    ReactDOM.render(, document.getElementById('root'));

    The render() method is used to render a React element into the DOM in the supplied root element.

    Theming The App

    Having created, served and cleaned our Ionic project, let’s now see how we can change the colors of the UI so that it looks more professional.

    Let’s get started with the side menu. Open the src/components/Menu.tsx file, and add a color attribute with a primary value to the IonToolbar, IonContent, IonList and IonItem UI components:

    const Menu: React.FunctionComponent = ({ appPages }) => (
      
        
          
            Menu
          
        
        
          
            {appPages.map((appPage, index) => {
              return (
                
                  
                    
                    {appPage.title}
                  
                
              );
            })}
          
        
      
    );

    Ionic provides some default colors (primary, secondary, tertiary, success, warning, danger, light, medium and dark) that can be used to change the color of UI components. A color can be applied to an Ionic component in order to change the default colors using the color attribute. See “Colors” for more information.

    These colors have default values, but you can customize them via some predefined CSS variables. See “Modifying Colors“.

    This is a screenshot of our menu:

    Ionic menu
    Ionic menu. (Large preview)

    Next, let’s change the color of the Home page. Open the src/pages/Home.tsx file, and set the color attribute of the IonToolbar and IonContent components to primary:

    const HomePage: React.FunctionComponent = () => {
      return (
        <>
          
            
              
                
              
              Home
            
          
          
    
          
        
      );
    };

    This is a screenshot of the page:

    Ionic home
    Ionic home. (Large preview)

    Installing Axios And Consuming A REST API

    We’ll see how to install Axios and consume a third-party RESTful API in our application, and we’ll also see how to display the fetched data using Ionic card and list components.

    Having themed our application, let’s now see how to fetch data using Axios. We’ll use the third-party API available from NewsAPI.org.

    First, we need to grab an API key, so that we can communicate with the API. Go to the registration page, enter your information, and register an account. You’ll be given an API key; note it, and let’s continue.

    Head back to your terminal, and run the following command to install Axios:

    $ npm install axios --save

    Next, open the src/pages/Home.tsx file, and start by importing Axios and IonButton:

    import {
      IonButton
    } from '@ionic/react';
    
    import axios from 'axios';

    Next, define the API_KEY and URL constant variables:

    const  API_KEY  =  "";
    const  URL  =  `https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=${API_KEY}`;

    In the URL variable, we’ll add an endpoint to get the top headlines from our source, TechCrunch. You can use any source you want from the available sources.

    Note: Make sure to put your own API key in the API_KEY variable.

    Next, define the fetchArticles() method as follows:

    const fetchArticles = () => {
    
      return axios({
        url: URL,
        method: 'get'
      }).then(response => {
    
        console.log(response);
        return response.data;
      })
    };

    We simply call the axios() method to send a GET request to the news endpoint, and the result from the method is a promise that needs to be resolved in order to get the news data.

    Next, update the HomePage component as follows to call the fetchArticles() method and resolve the returned promise:

    const HomePage: React.FunctionComponent = () => {
    
      const [articles, setArticles] = React.useState([]);
      const items: any[] = [];
    
      React.useEffect(() => {
    
        fetchArticles().then(data => setArticles(data.articles));
    
      }, []);
    
      return (
        <>
          
            
              
                
              
              Home
            
          
          
            
    
              {
                articles.map(a => {
    
                  return (
                    
                      {a['title']}
                      Read
                    
                  );
                })
              }
    
            
          
        
      );
    };

    In our function component, we first call the useState() hook of React to create the articles state variable, which will hold the news articles after we fetch them from the API.

    useState() returns the state variable, which has the empty array as its initial value and a function that we can use to change the value of the variable. We use destructuring assignment to unpack the values from the returned pair into distinct variables (i.e. articles and setArticles()).

    Next, we call the useEffect() hook to perform a side effect in our component. In our case, the side effect is to fetch data from the news API using the fetchArticles() method, which returns a promise. Once the promise is resolved, we call the setArticles() method to assign the news data to the articles variable.

    Both useState() and useEffect() are built-in React hooks that were introduced in React 16.8; they simply let you use state and other React features without having to write a class. The useEffect() hook is equivalent to calling the componentDidMount, componentDidUpdate and componentWillUnmount lifecycle methods combined in class-based components.

    Finally, in the view template, we iterate over the articles array using the map() method, and we display the title of each news article inside an IonItem element of the IonList component, and also a button that takes us to the page of the full article.

    This is a screenshot of the page:

    Ionic news app
    Ionic news app (Large preview)

    You can find the source code in this GitHub repository.

    Conclusion

    In this tutorial, we have started using both Ionic and React and used them to build a simple mobile application that fetches and displays news data from a third-party API using the Axios client. We have also seen how to use hooks in React — namely, the useState() and useEffect() hooks — to create state and perform side effects inside React function components. With Ionic, we’ve seen how easy it is to generate a project based on React and how we can theme the application using the color attributes of components.

    Smashing Editorial(dm, al, yk, ra, il)

    pinterest’s-new-mobile-ad-tools-let-you-create,-manage-campaigns-from-your-phone
    introduced new Mobile Ads Tools that allow advertisers to create campaign on their mobile devices. Advertisers can choose a Pin from their business profile, and create a campaign for it by selecting automated or custom targeting options, daily budget rules and the duration of the campaign.

    Advertisers will also be able to complete billing information to run the ad without having to access their account from a desktop.

    Why we should care

    Being able to create ad campaigns from a mobile device makes it easier for smaller advertisers and SMBs to create ads — especially those who may not have the resources to support a full-on social media marketing team.

    It also provides an added level of flexibility for advertisers that want to create campaigns “on the go,” making it possible to seize a timely ad opportunity should it present itself.

    In addition to creating campaigns, the new mobile ad tools allow advertisers to adjust budgets and targeting, and pause campaigns. They can also edit the URL destination within the ad and campaign name.

    Fount, a leather goods company, reported a 4,430% increase in daily engagement with their Pins since using Mobile Ads Tools. “Pinterest is bringing more traffic to our site than Facebook and Instagram, where we also run ads,” said Fount CEO Phillip Wachter.

    More on the news

    • Mobile Ads Tools are available to all U.S. business accounts and currently rolling out globally.
    • Promoted Pins created with Mobile Ads Tools can include video, carousel and standard Pin formats.
    • Advertisers will be able to track ad spend, remaining campaign duration, impressions, clicks, CTRs and saves on mobile.


    About The Author