Responsive Design and Mobile Patterns

Transcription

1 Responsive Design and Mobile Patterns

2 Nina Zayakova Product Liliya Karakoleva UX Designer,

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

4 Device Sizes and Resolutions Desktop Tablet Laptop Smart Phone

5 Device Sizes and Resolutions Desktop Tablet Laptop Smart Phone

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

7 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

8 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?

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

10 Smartphone Posture In 2013, researcher Steven Hoober observe over 1300 people tapping away at their phones on the street.

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

12 Most Common Usage Portrait Orientation One-thumb Use Luke Wroblewski

13 Comfortable zones of interactions

14 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

15 Thumb Zone - Increasing Form Factor

16 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

17 Navigation Design Patterns

18 Tab bar (primary navigation)

19 Tab bar

20 Tab bar

21 Tab bar (secondary navigation)

22 List Menu (primary)

23 List Menu (secondary)

24 Navigation Drawer

25 Navigation Drawer

26 Springboard (dashboard)

27 Gallery

28 Gallery

29 Forms

30 Login and Sign Up

31 Login and Sign Up

32 Login and Sign Up

33 Lists

34 Lists

35 Lists

36 RadEditor Mobile Rendering

37 Word Microsoft Office

38 WYSIWUG

39 Smartphone Optimization

40

41 Tablet Optimization

42

43

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

45 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

46 Android ios Windows 48 dp 44 pt 9 mm ty.html#accessibility-style

47 Touchable Controls

48 Touchable Controls

49 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.

50 Device Resolutions non-retina

51 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

52 3D Touch Gestures Quick Actions Peek and Pop Pressure Sensitivity

53 Responsive Design Design for All Form Factors

54 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

55 Mobile First

56 Start designing for the largest target form factor

57 Start designing for the smallest target form factor

58 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.)

59 Responsive Design Patterns: Reveal

60 Responsive Design Patterns: Reveal

61 Responsive Design Patterns: Reveal

62 Responsive Design Patterns: Transform

63 Responsive Design Patterns: Transform

64 Responsive Design Patterns: Transform

65 Responsive Design Patterns: Divide

66 Responsive Design Patterns: Divide

67 Responsive Design Patterns: Reflow

68 Responsive Design Patterns: Reflow

69 Responsive Design Patterns: Reflow

70 Responsive Design Patterns: Expand

71 Responsive Design Patterns: Position

72 Responsive Design Patterns: Position

73 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.

74 Ingredients Fluid Layouts Flexible Media Media Queries

75 Fluid Grid

76

77

78 Responsive Images

79 One Image: Width = 100%

80 Different Images = srcset

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

82 Media Queries

83 1920px 768px 360px

84 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

85 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

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

87 Atomic Design

88 Atoms

89 Molecules

90 Organisms

91 Templates

92 Pages

93 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

94 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

95 Icon Fonts

96 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

97 Icon Pixel Grid System

98 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

99 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

100 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

101 Mobile in the future Luke Wroblewski - Conversions@Google Machine learning; Facial recognition; Microphones; Infrared sensors; Pressure and load sensors

102 Thank you!