Responsive Design and Mobile Patterns

Nina Zayakova Product Designer @myninka Liliya Karakoleva UX Designer, Principal @liliya_k

Mobile Devices Talking about mobile devices we are not talking about desktop and smartphone. We are talking about different form factors and device specifications.

Device Sizes and Resolutions Desktop Tablet Laptop Smart Phone

Device Sizes and Resolutions Tablet Smart Phone Small Smart Phones Medium Smart Phones Phablets Small Tablets Large Tablets

Steve Jobs introduced the first-generation iphone 9 January 2007 "An ipod, a phone, and an Internet communicator. Are you getting it? These are not three separate devices. This is one device. Steve Jobs http://time.com/4628515/steve-jobs-iphone-launch-keynote-2007/

Designing Mobile What is our target audience? What kind of device are they using? How do the user and the device interact with each other?

Global Smartphone Orientation ScientiaMobile s report on 5.2 billion web requests from the end of 2014

Smartphone Posture In 2013, researcher Steven Hoober observe over 1300 people tapping away at their phones on the street. http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php

Smartphone Posture 75% of the time people are using a thumb for interaction with a phone

Most Common Usage 4-5.5 Portrait Orientation One-thumb Use Luke Wroblewski

Comfortable zones of interactions

Thumb Zone - Phone Thumbs drive 75% of all phone interactions; Only a third of the screen is truly effortless territory; Comfort and accuracy don t perfectly align; Thumbs do the driving no matter how large the screen Combined left and right hand https://www.smashingmagazine.com/2016/09/the-thumb-zone-designing-for-mobile-users/

Thumb Zone - Increasing Form Factor https://alistapart.com/article/how-we-hold-our-gadgets

Design Patterns Design solutions which worked so well that designers began to use them repeatedly; Users began to expect them because of the familiarity; A common visual language that both designers and end users understand; Reusable solutions to usability problems; Time-savers if you have no time to come with something new

Navigation Design Patterns

Tab bar (primary navigation)

Tab bar

Tab bar (secondary navigation)

List Menu (primary)

List Menu (secondary)

Navigation Drawer

Springboard (dashboard)

Gallery

Forms

Lists

RadEditor Mobile Rendering

Word Microsoft Office

WYSIWUG

Smartphone Optimization

Tablet Optimization

We are designing for human beings, we are not designing for devices.

Touch Target Size Touch targets are the parts of the screen that respond to user input. Graphical User Interface (GUI) precise interaction with keyboard and mouse sense of sight; Touch User Interface (TUI) we are using our hands - sense of touch; Touch targets extend beyond the visual bounds of an element visual targets. Large enough target size adjustment of the touch zone and the size of the controls used in the interface http://www.uxmatters.com/mt/archives/2013/03/common-misconceptions-about-touch.php

Android ios Windows 48 dp 44 pt 9 mm https://material.io/guidelines/usability/accessibili ty.html#accessibility-style https://developer.apple.com/ios/human-interfaceguidelines/visual-design/layout/ https://docs.microsoft.com/en-us/windows/uwp/inputand-devices/guidelines-for-targeting

Touchable Controls

Device Form Factors and Resolutions The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baseline density assumed by the system for a "medium" density screen.

Device Resolutions non-retina retina @2x retina @3x

Gestures We communicate with users through gestures; Gestures enable us to engage with technology through our sense of touch; Gestures are invisible by default; Avoid using too complicated combinations multi-figures gestures; Be sure target size is large enough to avoid mistakes tap multi-figure tap drag pinch rotate

3D Touch Gestures Quick Actions Peek and Pop Pressure Sensitivity

Responsive Design Design for All Form Factors https://material.io/

Device Resolutions and Breakpoints xlarge screens are at least 960dp x 720dp large screens are at least 640dp x 480dp normal screens are at least 470dp x 320dp small screens are at least 426dp x 320dp

Mobile First

Start designing for the largest target form factor

Start designing for the smallest target form factor

Mobile First User-centered design; Filter the essential part and features of a project; Focus on vital elements of the content; We can use it for existing projects asking ourselves How is going to look this design on a small screen? ; Explore and innovate we have more information about the environment (location, sound, movement, etc.)

Responsive Design Patterns: Reveal

Responsive Design Patterns: Transform

Responsive Design Patterns: Divide

Responsive Design Patterns: Reflow

Responsive Design Patterns: Expand

Responsive Design Patterns: Position

Responsive Web Design Design and development are based on user experience, screen resolution, device orientation: It is all about user experience; Optimal use of screen property; Ensuring a flawless interaction; Design with performance in mind Content is like water: You put water into a cup, it becomes the cup. You put it into a bottle, it becomes the bottle, You put it in a teapot, it becomes the teapot.

Ingredients Fluid Layouts Flexible Media Media Queries

Fluid Grid

http://www.profoundgrid.com/examples/fluid.html

Responsive Images

One Image: Width = 100%

Different Images = srcset

Responsive Images Reduce page load; Optimized images; Load only images that user actually needs

Media Queries

1920px 768px 360px

Media Queries We define criteria for device properties e.g. resolution, orientation; We DON T care about the kind of device or screen type; We DO care about the content; We explore the behavior of the layout on different screen resolutions; Make it run on all different devices using breakpoints; We can use it for width, orientation, light level, etc.; Available in all modern browsers

RWD RWD is user-centered; Designers need to start with the priority of information rather than the layout. We create one design to cover all devices; We cover even the future viewports size; We have one code, one deployment and one URL; RWD should not cost more, it should save money for the client; RWD shows content on various devices, do not hide content form the user; It does not mean that the design should be simple, it should be fully adaptive

Design Systems We re not designing pages, we re designing systems of components. Stephen Hay

Atomic Design http://atomicdesign.bradfrost.com/

Atoms

Molecules

Organisms

Templates

Pages

Native vs Web Apps It is not needed to separate them. Both should follow best mobile design practices. Things in common for native and web apps are: user; web browser

Progressive Web Apps A Progressive Web App uses modern web capabilities to deliver an applike user experience. mobile web app; homescreen install support; background worker; faster load time

Icon Fonts

Icon Fonts SVG images; It is easy to change their size; It is easy to change their color - monochrome based; They are transparent; CSS styling capabilities; Avoid sprite images; Use icon font generator IconMoon

Icon Pixel Grid System

Scalable Vector Graphics (SVG) Small file sizes that compress well; Scales to any size without losing clarity; Looks great on retina displays; The path element data is animatable http://caniuse.com/#feat=svg

Do Prototype Go back to drawing; Make workflow model using flow chart of diagramming tool; Prepare interactive wireframes using prototyping tools: Axure, JustInMind, Framer, InVision, Adobe XD, Sketch (Mac OS X), etc.; Prepare HTML prototypes and test in browser; Divide your project in small steps and test

Test Before Launching Test your layout not only with clients and colleagues but with friends and family; Prepare list of steps to follow while testing; Be careful for questions like What does this button do? ; Be sure the workflow is easy to follow; Give the user little tasks to complete; Ask for feedback; Analyze your studies

Mobile in the future Luke Wroblewski - Conversions@Google 2017 - https://www.youtube.com/watch?v=xiyotcvhqhw Machine learning; Facial recognition; Microphones; Infrared sensors; Pressure and load sensors https://www.amazon.com/b?node=16008589011

Thank you!