9

Since the article that was published by Precious about Multiscreen Patterns or patterns for multiscreen strategies back in 2011, there has been an increase in the amount of IoT devices and other physical hardware that are being connected to online networks. For instance, the popular diagram used to illustrate the six different patterns doesn't include smart watches but the concept is still relevant.

enter image description here

I am interested to know if there are guidelines developed specifically for how to create a seamless experience across different screens and devices, or if these are incorporated as part of the responsive and adaptive design principles or patterns in popular design guidelines such as Google's Material Design.

Improve this question

3 Answers 3

Reset to default
3
+50

I do not know of any guidelines but here is a list of products where seamless sync is central to their UX:

  1. Whatsapp web vs. app, (good efficient use of QR code)
  2. Facebook Spaces, (example of mixing VR users with webcam users)
  3. Amazon Echo vs. alexa.amazon.com (controlling Echo with voice or via the web interface)
  4. Dropbox.com desktop webapp vs. phone app (example of policy on dealing with multiple conflicting versions of documents)
  5. Outlook desktop vs. app, (enterprise)
  6. Google calendar desktop vs. app (an unresolved example of how to deal with shared calendars across users in different timezones)
  7. Apple Notes (example of synchronization between mac and iPhone notes)
  8. gobattle.io / slither.io (Example of how to deal with client server latency so that it does not impact negatively the UX in Online Massive Multiplayer Casual Game)
Improve this answer
1
  • +1 Lots of good references, each with their own specific context and design rationale.
    – Michael Lai ♦
    May 17, 2017 at 5:34
1

Shopify provides good guidelines here, and emphasizes that your first priority should be usability on mobiles with phone-size screens. https://www.shopify.ca/enterprise/80431878-mobile-first-design-what-it-is-why-you-should-care. See Pete LePage's great guidelines on how to design so the page will be usable on any screen size at https://developers.google.com/web/fundamentals/design-and-ui/responsive/

Improve this answer
3
  • 2
    Links to external resources are encouraged, but please add context around the link so your fellow users will have some idea what it is and why it’s there. Always quote the most relevant part of an important link, in case the target site is unreachable or goes permanently offline. More info here: ux.stackexchange.com/help/how-to-answer
    – Joao Carvalho
    May 16, 2017 at 10:25
  • As Joao mentioned - an answer is not the same as set of links to answers! We're here to find information, so try and at least summarize other people's work in your answer!
    – Dirk v B
    May 17, 2017 at 2:31
  • I added some context. Thanks for prodding me, this is a pet peeve of mine too.
    – rleir
    May 21, 2017 at 5:14
1

I'm not aware of any "official" guidelines, but here's a list of methods I'd use to create a seamless experience:

1. Have a base design system that can be used across most screens & devices (E.g. Material Design) The goal here is to have our customers recognize and remember common UI components and interactions across devices. Those components should scale based on the arc minute for the device. Be familiar with how to calculate size based on arc minutes and device distance.

2. Minimize custom controls within that design system for specific screens & devices, but use when appropriate (E.g. off screen slide out menu's for mobile or utilizing the back button on Android vs slide right on iOS) The goal here is not to limit ourselves to the lowest common denominator UI components. We should be empowered to leverage each platform as necessary to delight our customers but not limit some because of the existence of others. (E.g. slide out menu's on desktop don't make sense if you have the screen real estate)

3. Consistent resource accessibility across platforms The goal here is to not make a customer feel like moving from one platform to another ever prevents them from accessing their data. Let them decide which tool is appropriate for the job, but don't remove the assets from the job. E.g. If the customer has access to some data on the desktop, they should be able to see the same data on Mobile. It may need to be displayed differently, but it should never not be accessible. Let me decide that working with a spreadsheet on my mobile phone is frustrating and I can move to the desktop when I have time, but don't stop me from looking up data I need.

4. Match feature locations across screens & devices where appropriate The goal is to leverage spacial awareness on one device across others. (E.g. If the menu system on mobile slides out from the left, it should be left aligned when visible on desktop. Items should be in the same order and if different, should at least start with the same first few words or the same icon.)

5. Optimize delivery of content based on device activity If you have video content, deliver it with a black background on a TV but you might not be able to make the same assumption for delivering the same content on a Desktop so including a white background with the comments alongside the video might be more appropriate. This would be because typing comments is going to be less likely on a TV, but more so on a Desktop.

I'm sure I'm missing a lot here, but this should be a good start?

Improve this answer
1
  • +1 That's a pretty good list of things to start with, so I am sure your designs behave quite well across different devices :)
    – Michael Lai ♦
    May 23, 2017 at 23:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.