quickbooks connect 2016 - designing for mobile

Presentation title for this sample deck

Joe PrestonDirector, Design System & Engineering, SBGDesigning for mobileWiFi: QBConnect Password: not required#QBConnect

#Joe PrestonDirector, Design System & Engineering, SBGTodays speaker#QBConnect | @IntuitDev | @peezarelli

#

2

Founder of Momentum Design LabUX design firm with enterprise focusOrganizer of Enterprise UX meet-up SF, NY, Austin - meetup.com/enterprise-ux/Dad with daughters@peezarelliAbout todays speakerJoe PrestonDirector, Design System & Engineering#QBConnect | @IntuitDev | @peezarelli

#

3

Why design for mobile?FundamentalsThe gridBest practicesDesign techniques3 Takeaways

Agenda

#

4

Mobile is everywhere#QBConnect | @IntuitDev | @peezarelli

#Mobile already happened.

According to Time last year http://time.com/4147614/smartphone-usage-us-2015/Americans checks their phones 8 billion times a day. The average (American) person looks at his or her phone 46 times every day.

That means during the course of this presentation, you all will check your mobile phone, on average, about 3 times. And thats just pulling your phone out and looking at the screen. You may not even need to remove it from your bag or pocket to check it.

5

In US, mobile equates to 30% of all e-commerce sales #QBConnect | @IntuitDev | @peezarelli

#As of 2015 mobile commerce is over 30% of all US ecommerce. In just 2016 US mobile ecommerce has grown 3 times faster than all of US ecommerce

https://www.internetretailer.com/2015/08/18/mobile-commerce-now-30-all-us-e-commerce6

In US, mobile equates to 30% of all e-commerce sales #QBConnect | @IntuitDev | @peezarelli

1.7 billion total active monthly users1.57 billion mobile active monthly users54% login from mobile only

#To give you another perspective Facebook now has 1.57 billion monthly mobile active users

The worlds total population is 7.4 billion. That means almost a quarter of the world is a monthly active user on Facebook, and of those, half exclusively use their mobile phone. So 1/8th of the world uses Facebook only from its phone.

http://money.cnn.com/2016/07/27/technology/facebook-earnings-high-expectations/

7

#QBConnect | @IntuitDev | @peezarelli And yet we still have

#Cmon Google. You should know better.8

And yet we still have#QBConnect | @IntuitDev | @peezarelli

#Alert! No your credit card hasnt been hacked you just need to look at us on your computer9

#QBConnect | @IntuitDev | @peezarelli And yet we still have

#Cmon VW. You can figure out how to hack your cars to trick our emissions tests, but you cant make your site work on my phone?10

#QBConnect | @IntuitDev | @peezarelli Were responsible too

#Even us in the heart of the Silicon Valley, Intuit, sometimes deliver less than optimal mobile experiences. This is our Intuit Payroll app11

Fundamentals

##QBConnect | @IntuitDev | @peezarelli

Desktop vs. Mobile firsthttp://blog.froont.com/9-basic-principles-of-responsive-web-design/

#Desktop first involves making use of the larger screen size and click interaction first, before thinking about how to reduce and modify the experience for mobile.

Mobile first on the other hand, is the opposite approach, whereby you first focus on the smaller screen size, touch or gesture interactions, making use of device capabilities, etc before thinking about how to expand the experience to desktop. Many companies, especially startups have opted for mobile only experiences (think Uber, Lyft, Snapchat, etc..)

http://blog.froont.com/9-basic-principles-of-responsive-web-design/13

#QBConnect | @IntuitDev | @peezarelli Progressive enhancement vs. graceful degradation

vs.

#To explain these concepts a different way

Progressive EnhancementThe other way around. Start by establishing a basic level of user experience that all browsers (including mobile) will be able to provide when rendering your web site, but you also build in more advanced functionality that will automatically be available to browsers that can use it.

Graceful DegradationThe practice of building your web functionality so that it provides a certain level of user experience in more modern browsers, but it will alsodegrade gracefullyto a lower level of user in experience in older browsers and mobile devices

14

#QBConnect | @IntuitDev | @peezarelli

Responsive vs. adaptivehttp://blog.froont.com/9-basic-principles-of-responsive-web-design/

#Responsive and adaptive are related concepts. Respnosive typically involves shrinking and resizing elements (or repositioning) to accommodate different screen sizes.

Adaptive (uses similar mechanics of responsive) but is not restricted to shrinking or moving elements only. Adaptive can add or remove new experiences all together at different screen sizes or devices.

Thinking about shrinking all of your house down to make your dog house. This would be the responsive approach. However dogs have very different needs than humans, so most likely you would need to add and remove a lot of the things in your house to make a comfy home for your dog.


#QBConnect | @IntuitDev | @peezarelli With vs. without breakpointshttp://blog.froont.com/9-basic-principles-of-responsive-web-design/

#Well go more in depth about breakpoints. Essentially these are the underlying structures that allow responsive/adaptive changes to take place at certain intervals or thresholds. Those thresholds are typically ranges of screen dimension (or pixels). So without breakpoints, you are really limited to essentially shrinking elements on the page proportional to total screen size. With breakpoints, you have many different options of things you can do within sub-group of screen dimensions (also know as column groupings)


Fixed vs. fluid#QBConnect | @IntuitDev | @peezarelli

#This is not specific to mobile, but becomes especially important in designing for mobile.Fixed vs. fluid involves defining elements on your screen by either fluid percentages of the screen, or by fixed pixels. 17


Vectors vs. imageshttp://blog.froont.com/9-basic-principles-of-responsive-web-design/

#PNG, JPGs, BMPs, GIFs are all image types that are raster or pixel based. Therefore, when you scale them up or down you lose fidelity, depending upon their source pixel per inch ratio.

SVGs, EPSs files are types of image files that are described in mathematical equations or vectors rather than pixels. The browser DOM or the OS renders the display of these images. These types of vector images can be scaled up or down without losing fidelity. CSS and Canvas can also be used to render vector images.


Best practices

#

Clear and focused content#QBConnect | @IntuitDev | @peezarelli

#While designing for a mobile experience, minimalism rules. Keep clutter to a minimum. Each page including the homepage should have just one central focus

20

Brief and bold interactions#QBConnect | @IntuitDev | @peezarelli

#Mobile experiences are subject to more distractions due to the context or the environment. The average person looks at their phone 150 times a day. Most of these are brief interactions lasting a few minutes at best.

Example Use Case: GoPayment customers are typically small businesses taking payments while servicing customers. They need to finish task with speed and know the transaction status clearly.feel confident and professional.

21

Use motion with purpose#QBConnect | @IntuitDev | @peezarelli

#

22

Assume touch is everywhere#QBConnect | @IntuitDev | @peezarelli

#Touch isnt an interaction type only on phones and tablets. Its not propogated across desktop, laptops and other devices too.

23

Leverage device capabilities#QBConnect | @IntuitDev | @peezarelli

#Force Touch, GPS, Camera, Fingerprint ID and my personal favorite24

Like starting fires#QBConnect | @IntuitDev | @peezarelli

#Starting fires are just a few of the amazing device capabilities to make use of on the phone, so dont waste them. 25

Keep input simple and small. Utilize device capabilities. Pre-fill fields with defaults or app data. Always strive for one-touch, one-swipe or no interaction at all. Minimize data input#QBConnect | @IntuitDev | @peezarelli

#Along the lines of brief and bold interactions, data input should be minimal. If you can use the device capabilities to input data auto-magically then do it. This is our mileage tracker on QuickBooks Self-employed, that once you turn it on, tracks and categories your trips without doing anything. Think about how much data input on behalf of the user that eliminates.26

Think second screen (and third)#QBConnect | @IntuitDev | @peezarelli

#Many applications now are making use of multiple screens existing in the same environment, and how to complement the experience between devices. Youtube mobile app has deep integration with Youtube TV apps and allows realtime synchronized interactions across devices.27

Keep the experience cohesive across devices#QBConnect | @IntuitDev | @peezarelli

#Without consistent representation, a user will struggle to understand what they are looking at ("Is this a tweet, or a user and their bio?") and they won't know what to expect out of object-tied actions likeFavorite.

28

The ______ grid

#The grid rules


#The grid makes it possible to bring all the elements of design type characters, photography, shapes and color into a formal relationship to each other; that is to say, the grid system is a means to introducing order into a design

30

Atomic baseline grid

4px#QBConnect | @IntuitDev | @peezarelli

#Our atomic or baseline grid, which is the smallest unit of measure of your screen size is 4px. This is industry standard, and allows for more chances of crisp images, fonts and shapes across screen dimensions

31

The grid rules

#QBConnect | @IntuitDev | @peezarelli harmony.intuit.com/grid/

#The grid makes it possible to bring all the elements of design type characters, photography, drawing and color into a formal relationship to each other; that is to say, the grid system is a means to introducing order into a design

32

These are the breaks

Medium768px

Small480px

Large (Mobile)1024pxXLarge1200pxLarge (Desktop)1024pxXSmall0px

Breakpoints are pre-defined ranges of screen resolutions, where UI changes can be triggered once the browser window size crosses a certain threshold (min/max). #QBConnect | @IntuitDev | @peezarelli harmony.intuit.com/grid/

#Breakpoints are distinct ranges of screen dimensions that through media queries, can be used to determine and trigger changes occur the relationships between ui elements in regards to one another

33

Column groupingsharmony.intuit.com/grid/


#Columns are typically used in multi-column groups for alignment, rather than individually.

34

Grouping on the gridThe grid forces you to consider groupings of ui elements and how theyll behave across sizes


#Groupingor chunking is imagining the movement of content in parts. For example, rather than looking at each individual tabs on the page, all the tabs are grouped as one. When the tabs are aligned a certain way,they all travel as one. This cuts out having to figure out which column each tab falls on and how each individual element would wrap.35

Re-ordering on the gridThe responsive grid allows for different arrangements ui elements at different screen sizes#QBConnect | @IntuitDev | @peezarelli

#Re-ordering is a technique whereby you can change the hierarchical order of elements at different screen sizes. Here you see the aside, nav and main area being repositioned at the smaller screen size36

Vertical grid spacingAtomic grid units can be applied to vertical spacing in additional to horizontal

Spacing in multiples of4

6040208


#The atomic grid can also be applied vertically. While this technique may not be completely noticeable to the non-trained eye, it helps create that final fit and finish to your experience37

Design techniques

#Now were going to go into some specific design techniques to keep in mind when 38

Touch-friendly placement#QBConnect | @IntuitDev | @peezarelli

#http://www.lukew.com/

luke wroblewski, a product director at google, writes great articles on a wide variety of UX concepts39

Touch-friendly placement#QBConnect | @IntuitDev | @peezarelli

#Think about placing primary calls to action or important interactions near the bottom and sides of screens on mobile devices and tablets40

Re-positioning and re-sizing elements for for different screen sizes

Reflow#QBConnect | @IntuitDev | @peezarelli

#Reflow is the most a common technique of responsive design involving a combination of re-positioning and re-sizing of UI elements at different breakpoints41

Eliminating columns from multi-column layout as screen sizes get narrower. The overall size of elements in this technique tend to stay consistent. Adaption primarily relies on stacking columns.

Column drop#QBConnect | @IntuitDev | @peezarelli

#Related to Reflow, is column drop, whereby you remove or re-position horizontal columns in favor of vertical rows of UI elements42

Off Canvas pattern for multi-device layout takes advantage of space off the screen to keep content or navigation hidden until either a larger screen size allows it to be visible or a user takes action to expose it. This pattern is showing up in a few separate mobile Web site designs and native mobile applications.

Off canvas#QBConnect | @IntuitDev | @peezarelli

#Off canvas is one of my favorites. Have you ever swiped or scrolled because you can see a hint of an object thats positioned off the screen. This idea of extending the perceived viewport beyond the physical screen is called off-canvas. Great for types of navigation. Think of apps like Tinder, LinkedIn, and Yelp filters that make great use of this technique.43

Position#QBConnect | @IntuitDev | @peezarelli

#Another technique is to re-position the UI elements on the screen, and possibly present them differently. Here you see the navigation on the top left on desktop and it moves to bottom center on mobile to be touch friendly44

Transform#QBConnect | @IntuitDev | @peezarelli

#Transform is an adaptive technique of presenting a UI element completely different depending upon the screen size or device. Here you see a list of elements on smaller breakpoints and here you see a larger gallery grid on larger breakpoints.45

An implied third dimension (z) onto a two dimension experience through the use shadows and light that emulate physical materials

Layer#QBConnect | @IntuitDev | @peezarelli

#Layering is one of my favorites that involves the idea of a perceived third-dimension by using the visual elements of shadows and light. Motion is a great technique to pair with layering to help re-enforce the implied third dimension. Google material design is the thought leader of this concept.46

Harmony design system

#Harmony design System#QBConnect | @IntuitDev | @peezarelli

harmony.intuit.com

#~30 patterns are defined and ready to useOthers will be added by pilot projects and all of YOULightweight interaction specs and videos (ready now)PSD, Sketch visual assets (ready now)Harmony pattern writeups (coming soon)HUI components in progress

48

3 Takeaways

#

Mobile first = content first#QBConnect | @IntuitDev | @peezarelli

#Think about your content (text and imagery) just as much as you do your interaction and visual design, if not more. 50

#QBConnect | @IntuitDev | @peezarelli De-clutter and focus

#Its not about more things to do. Its about providing your customers only the things they need and want to do on their mobile devices. Think about the one-click Get a ride simplicity of car sharing services51

#QBConnect | @IntuitDev | @peezarelli Take advantage of device capabilities

#Mobile isnt a limitation, take advantage of the unique device capabilities: touch, fingerprint, camera, gps, the list goes on52

#QBConnect | @IntuitDev | @peezarelli Mobile first = Content firstDe-Clutter and FocusTake advantage of device capabilities3 Takeaways

#Mobile first is Content firstDe-clutter and FocusTake advantage of device capabilities (but not the fire starting one, especially on airplanes)53

Questions?

#How do I resource? I dont have any people that know mobileHow do I prioritize?54

Thanks for coming!

Wed love your feedback.Before you head out, take a minute to rate this session in the QuickBooks Connect mobile app.Keep the conversation goingdeveloper.intuit.com/hub/quickbooks-connect

Access Session SlidesEngage with Speakers and Fellow DevelopersGet Questions Answered

#

#

quickbooks connect 2016 - designing for mobile

Software