Download as PDF, PPTX
Uploaded byRobert Stribley
Guidelines for Responsive UX Design 07/20/19
The document outlines a workshop on responsive UX design led by Robert Stribley, aimed at teaching participants the principles of responsive design, user journeys, and team collaboration to create web and mobile experiences. Key topics include mobile-first design, adaptive vs. responsive layouts, and the importance of maintaining content and hierarchies across devices. Participants will engage in exercises to develop a site map and design a responsive homepage and mobile app for a museum experience.
More Related Content
Similar to Guidelines for Responsive UX Design 07/20/19
![Responsive Design Studio [Mountain View 2013]](https://cdn.slidesharecdn.com/ss_thumbnails/responsivedesignstudiomountainview-131018101452-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
More from Robert Stribley
Guidelines for Responsive UX Design 07/20/19
- 1. Guidelines for ResponsiveUX Design School ofVisual Arts, 20 July, 2019 Robert Stribley
- 2. Today’s presentation willbe available on SlideShare: www.slideshare.net/stribs
- 3. Robert Stribley @stribs Introduction My clientshave included: • Bank of America, PNC,Wachovia, Citibank, JPMorgan, Morgan Stanley, Oppenheimer Funds, Prudential, Smith Barney,T. Rowe Price • Boston Scientific, Nasonex • AMResorts, Choice Hotels, RCI, Sotheby’s International Realty • Computer Associates, EMC • Ford, Lincoln, Mercedes-Benz, MBFS, Mercedes-BenzVans, smart • FreshDirect • AT&T, Nextel • Day One, Red Cross, Smithsonian National Air & Space Museum • Pearson,Travel Channel,Women’s Wear Daily
- 5. AboutYou • What’s yourname? • What do you do for work? • What do you do for fun? • If you could see one museum exhibit—real or imaginary— what would it be? Introduction
- 6. Goals of thisworkshop • Learn principles and guidelines for responsive design • Learn about user journeys and create a detailed user journey as a team • Develop a site map as a team • Brainstorm and design a responsive home page as a team • Brainstorm and design a website and mobile app experience as a team Introduction
- 7.
- 8. Morning • Responsive DesignPrinciples • Project • User Journeys • Lunch Agenda
- 9. Afternoon • Site Maps •Team Exercise: Responsive Home Page • Team Exercise: Mobile App • Review & Feedback • Q&A Agenda
- 10. 52.64%percentage of webtraffic via mobile globally in 3rd quarter of 2018 up from 35.1% in 2015 now half of all global pages served 65.7% of all traffic in Asia in 2017 59.5% in Africa
- 11.
- 12. Responsive web designis an approach to web design which makes web pages render well on a variety of devices and window or screen sizes. —Wikipedia Responsive Design
- 14. “Rather than tailoringdisconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience.We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design.” – Ethan Marcotte, Responsive Web Design,A List Apart Self Study Responsive Web Design by Ethan Marcotte Responsive Design
- 15. Responsive Design ResponsiveVersus AdaptiveDesign Responsive design is fluid and adapts to the size of the screen no matter what the target device Adaptive design uses static (or fixed) layouts based on breakpoints which don’t respond once they’re initially loaded Self Study Responsive vs.Adaptive Design:What’s the Best Choice for Designers? - Jerry Cao, Studio by UXPin
- 16.
- 17. Responsive Design Responsive WebDesign by Ethan Marcotte
- 18. Responsive Design The ResponsiveWeb Design Podcast is co-hosted by Karen McGrane and Ethan Marcotte. In each episode, they interview the people who make responsive redesigns happen.
- 19. Responsive Design Characteristics •Mobile first • Break points • Grids • Handling navigation • Handling tables • Maintain content and features • Maintain hierarchies • Images • Text Responsive Design
- 20.
- 21. Mobile First • Designfor “mobile first”—the smallest device first, then work up from there • The smallest device may no longer be a mobile phone • “Mobile first” may encourage simple design, but it need not be simplistic Responsive Design
- 22.
- 23.
- 24.
- 25. Break Points • Responsivedesigns adjust at different “break points” for various resolutions • These correspond to the dimensions of various devices, typically desktop, tablet and mobile • However, they’re intended to be content, not device-specific • Typically at least two: – e.g. 320px for mobile, 768px for tablet (portrait), desktop – e.g. 320px for mobile, 768px for tablet (portrait), 1280px for desktop • May also add “minor breakpoints” to address specific issues at various dimensions Responsive Design
- 26.
- 27. Responsive Design Responsive designdistributing the same modules across desktop, tablet and mobile Desktop Tablet Mobile
- 28.
- 29.
- 30. Grids • Grids arefluid within a responsive design—they change according to screen dimensions • For example, a desktop design might utilize a 12-column grid, tablet a 9-column grid, and mobile a 4-column grid • Depending on the screen, modules may shift both in size and in placement Responsive Design
- 31.
- 32.
- 33. Handling Navigation • Navigationmay be repositioned • Often repositioned at tablet, but especially on mobile • On desktop, navigation elements may be activated via hover instead of click, since users are utilizing a cursor; but in tablet and mobile, these main nav elements must be activated via touch • Design navigation to be touch friendly—e.g. large, tactile targets • Detailed dropdowns and filters could be presented in an overlay in mobile Responsive Design
- 34.
- 35. Responsive Design Heavy mobiledirection • Beware the “hamburger menu”
- 36. Handling Navigation –Tabs •Tabs may just reduced in size • They can also be replaced with – Accordions – Dropdowns – Carousel slides • Consider the content to determine, which of these solutions works best Responsive Design
- 37.
- 38.
- 39.
- 40. HandlingTables • Simplest solutionfor handling tables with multiples columns is to reduce the number of columns (to one if necessary) and stack them in mobile. • You can also allow horizontal scrolling • Or turn columns into individual slides users can swipe through Responsive Design
- 41. Responsive Design Desktop Mobile -Scrolling Mobile - Stacked
- 42.
- 43.
- 44.
- 45. Responsive Design Not idealfor mobile
- 46.
- 47. Maintain Content &Features • Goal:Wherever possible, maintain content and features across devices • Occasionally, content or features can be dropped to save screen real estate or if they’re not device appropriate • Establish a clear rationale and principles for dropping any content or features at the mobile level • Reducing content can reduce keywords, which can reduce your site’s ranking on Google Responsive Design
- 48.
- 50.
- 51. Maintain Hierarchies • Modulesmay be repositioned but hierarchies should be maintained • Cluster related content and features Responsive Design
- 52.
- 53.
- 54.
- 55. Images • Generally, imagesshould be “fluid” • They will scale down in size as the screen resolution changes • They may maintain their size, but be cropped if they’re primarily decorative • In this case, images must be selected carefully so important elements aren’t automatically cropped out • In some cases, if the image isn’t needed, it may be dropped entirely for mobile Responsive Design
- 56.
- 57.
- 58. Pay special attentionto images with text within them or in overlays
- 60. Text • Maintain textsize where possible, though headings and headlines may be reduced in size • Text blocks will change in width from desktop to mobile • However, keep lines of text to a maximum of 70 or 80 characters • Do not automatically hyphenate text • Use ellipsis or a “read more” CTA to shorten text if necessary • Provide character limits for titles, captions, etc, so they display gracefully in mobile Responsive Design
- 61.
- 62. Responsive Design Avoid justshrinking content
- 63.
- 64. Develop a museumexperience for MoMA which utilizes both a responsive desktop design and a mobile app experience, so users can engage with it both at home on their desktop computer to prepare for their trip and during their visit via mobile app. Our Project
- 65. Guidelines • Since theresponsive website will display on a mobile phone, the app must not simply repeat the website content • Give thought to how the app can help visitors during their onsite visit, but provide some value to users before and after their trip, too • Assume visitors have access to Wi-Fi throughout the entire museum space Our Project
- 66. Personas Our Project Plan anengaging and educational trip for her art class.
- 67.
- 72. Key Findings • Abilityto highlight multiple exhibits • Access to collections • Display of upcoming events • Focus on membership • Visitor information • Education and learning information • Ability to view different locations • Any key differentiators? • Anything else? Competitive Review
- 73.
- 74.
- 75. User Journeys “Design isall about entrances and exits.” —Rem Koolhaas
- 76. User Journeys Definition: “A userjourney, or journey map, visualizes a path or flow through a Web site, application, or service experience—from a starting point to an end objective—based on the user’s motivations and experiences. Journey mapping helps us to create a mental model of an experience that the user goes through to achieve a goal. This valuable information lets us document and visualize existing paths that the user takes and, in turn, analyze and improve upon them.” - Shean Malik, Mapping User Journeys UsingVisual Languages
- 77. User Journeys Methodology: • Keeppersonas in mind • Determine users’ primary needs • Consider their pain points as well • Brainstorm different ways to help their needs and address their pain points • Develop the journey according to a time-based progression • Consider the various moments within, which can be handled digitally • Create relevant hooks and calls to action (CTAs) • Strike a balance between freedom of movement and an ideal path Self Study “An introduction to user journeys” - Jason Hobbs, September 6, 2005, Boxes & Arrows
- 78.
- 82. Class Exercise: Develop auser journey, which incorporate features applicable to Andy’s persona • Divide into teams • Discuss what you expect a typical user to do – At home – At the museum – With a specific exhibit – Back home • Develop a high-level diagram, which depicts Andy’s journey – What are the touchpoints? What technology does he interact with? User Journeys 30mins
- 83. Features Identified Let’s discusssome of the features your team identified. User Journeys
- 84. Afternoon • Site Maps •Team Exercise: Responsive Home Page • Team Exercise: Mobile App • Review & Feedback • Q&A Agenda
- 85.
- 86.
- 87.
- 88. Class Exercise: Develop 2high-level site maps based on features you discovered in your user journey, plus any additional content needed to flesh out the experience. • One for the MoMA web site • One for the MoMA mobile app Site Map 20mins
- 89. Review Site Maps Let’sreview your site maps Site Map
- 90. Team Exercise: Design aResponsive Home Page
- 91. Design a ResponsiveHome Page In your teams, design a responsive home page for MoMA’s web site 1) Discuss features needed for a homepage 2) Sketch your ideas for a homepage individually 3) Share your sketches with your team mates 4) Collaborate on a single home page wireframe – for both mobile and desktop Team Exercise
- 92. 1) Discuss featuresneeded for a homepage Team Exercise 20mins
- 93. 2) Sketch yourideas for a homepage individually – Both desktop and mobile versions Team Exercise 10mins
- 94. 3) Share yoursketches with your team mates Team Exercise 10mins
- 95. 4) Collaborate ona single home page wireframe – for both mobile and desktop Team Exercise 20mins
- 96.
- 97. Team Exercise: Design aMobile App
- 98. Design a MobileApp In your teams, design a mobile app for MoMA 1) Discuss features needed for the app and determine 3 key screens you want to develop 2) Collaborate to design your key screens 3) Review your work as a team to determine what changes should be made 4) Make any necessary revisions Team Exercise
- 99. 1) Discuss featuresneeded for the app and determine the 3 key screens you want to develop No sketching yet Team Exercise 10mins
- 100. 2) Collaborate todesign your 3 key screens Team Exercise 20mins
- 101. 3) Review yourwork as a team to determine what changes should be made 4) Make any necessary revisions Team Exercise 20mins
- 102. GatherYour Materials If you’refinished, start collecting your app and responsive homepage wires so you can present them to the class as a team Team Exercise
- 103. Team Exercise: Review &Feedback
- 104.
- 106. My article onhow to find a UX job: UX:Your Guerilla Guide to Breaking In
- 107.
- 108. My next class staytuned
- 109.
- 110.