You are seeing archived content. We are in the process of creating something new. Visit our new website!

Multiscreen Patterns

Patterns to help understand and define strategies for the multiscreen world.

Author: Christophe Stoll
Date: 26. May 2011

Patterns for Multiscreen Strategies

This post has originally been published as a guest post on the MobileBehaviour blog.

During the last years, our design studio has been involved in many different projects – from designing mainly websites and desktop software in our early days, to smartphone apps, prototypes for TV interfaces and more recently, applications for tablet devices.

Working for all those devices was interesting and challenging. Not just because of the diverse screen sizes and input methods, but because we learned in our user research how different the contexts are in which these gadgets are used.

Even more interesting, however, is the question how those devices relate to each other. What does it mean for the digital products and services we are designing, when PCs, smartphones, TVs and other electronic devices are connected? What implications does it have on the interfaces, if people are interacting in an ecosystem of screens?

We looked at many projects and studies that involved experiences across multiple screens – from biblical stories laid out on multiple cathedral windows and the first computer-based multiscreen installations, to current examples, which are popping up everywhere. We also closely observed ourselves and others using and shifting between different devices.

To make these scenarios more tangible for ourselves and to communicate them better to our clients, we started documenting patterns we noticed. These patterns and associated examples were the core of many workshops we did in various constellations: with brand managers, advertising professionals and design students.

Today we like to share this part of our research work: patterns for multiscreen strategies. It’s been a handy reference when discussing solutions for digital products and services. We hope you’ll find them useful too.

We would love to get your feedback – please tell us what you think. If you know more examples or spotted additional patterns, we’re very happy to hear from you.

You might also be interested in our precious paper devices and precious user templates.
What kind of designer are you?

Find your perfect #designposition!
→ Try it out

Oh, there are 39 comments so far

  1. [...] we had a few hours to do things that been on our mind for quite some time. Like publishing our “Patterns for Multiscreen Strategies”. We wanted to do this for months. It wasn’t actually that much work to finish the slides and [...]

    Weeknote 287 | precious, strategic design & visual language on 28. May 2011
  2. [...] for multiple screens brings a wide range of design issues. Take a look at this collection of Multiscreen Patterns from the German design Studio Precious. The slideshare presents six different screen ecosystems. [...]

    Multiscreen Patterns | Inventing Interactive on 1. June 2011
  3. [...] transmedia, trends, usability, user experience, user interface design, by Daniel Christian Multiscreen Patterns — from Precious-Forever.com by Christophe Stolle Patterns to help understand and define [...]

    Multiscreen patterns [Stolle] on 1. June 2011
  4. [...] This is something we’ve been preaching to our clients for the last years – and our multiscreen patterns reflect this notion – but thanks to last night’s keynote, we have another weighty argument [...]

    Post PC and the disappearance of the GUI | precious, strategic design & visual language on 7. June 2011
  5. [...] RT Must Read: @preciousforever: precious presents: Patterns for Multiscreen Strategies [...]

    My most important Twitter Messages #10 | der hess on 9. June 2011
  6. Interesting Product Topics…

    MultiScreen Design…

    Confluence: Product Management @ XING on 5. August 2011
  7. [...] Multiscreen Patterns (A presentation by Studio Precious) Презентация немецкий компании Studio Precious, в которой они описывают различные подходы к адаптации интерфейса к экраном различного формата и разрешения. Авторы предлагают 6 основных паттернов — согласованность, синхронизация, расшаривание экрана, переход между устройствами, взаимодополняемость, одновременность. View more presentations from precious [...]

    Обзор свежих материалов, июнь 2011 « Юрий Ветров. Проектирование интерфейсов и управление проектами on 8. August 2011
  8. [...] to read the thinking that’s behind it and check out the resources they’re offering (our Multiscreen Patterns are part of this list and we feel downright flattered and honored about that – thank [...]

    Weeknote 304 | precious, strategic design & visual language on 25. September 2011
  9. [...] For those looking to get started, there are already emerging patterns. Precious Design recently published a report on multiscreen strategies, where they present thought-starters for understanding and designing within an ecosystem of [...]

    Smoke Signals « Tribal DDB on 29. September 2011
  10. [...] sometimes had a hidden track during our talks around Multiscreen Patterns. All six Multiscreen Patterns are about relationships between digital devices, but we always loved [...]

    Hybrid interactions | precious, strategic design & visual language on 1. October 2011
  11. A master thesis Multiscreen you can find under:
    http://www.multiscreen-experience.com/ (In german only)

    Rudolf von Geramb on 4. October 2011
  12. [...] [image from Precious article] [...]

    Comparing Products Part 4 – Important Problems | The Agile Radar on 7. December 2011
  13. Artikel / Wissen…

    Erfahrung rund um 2nd Screen und dem Superbowl: ht…

    Confluence: Knowledge Base on 20. February 2012
  14. [...] Multiscreen Patterns | precious, strategic design & visual language During the last years, our design studio has been involved in many different projects – from designing mainly websites and desktop software in our early days, to smartphone apps, prototypes for TV interfaces and more recently, applications for tablet devices. [...]

    Responsive (Web) Design | Pearltrees on 28. February 2012
  15. [...] Multiscreen Patterns [...]

    Web Watching Eustema » Strategie per un Web con tanti schermi differenti on 13. March 2012
  16. [...] Another question is strategic. Do you really want to serve the same content on all devices? Or do you have to acknowledge different user scenarios for mobile, tablet and desktop users? Christophe Stoll from German agency precious did a cool presentation about different strategic approaches to different device categories. [...]

    Is responsive web design the answer to digital publishing? · test.ical.ly on 4. April 2012
  17. [...] test – How well does your browser support HTML5?First, Understand Your Screen « James PearceMultiscreen Patterns | precious, strategic design & visual languageLet’s Get Physical (Units) | Boris Smus*this* is mobile, not just a 320px wide piece of glass [...]

    Mobilism May 2012 | Martin Wright.tv on 11. May 2012
  18. Einzelne Links und Beiträge…

    Erfahrung rund um 2nd Screen und dem Superbowl: ht…

    Confluence: Content Solutions on 29. May 2012
  19. [...] a studio based in Hamburg, Germany published a Multiscreen Patterns to help understand and define strategies for the multiscreen world as a handy reference for [...]

    Designing for Context: The Multiscreen Ecosystem › XG Media ‹ on 22. June 2012
  20. [...] a studio based in Hamburg, Germany, published a collection of additional multiscreen categories and scenarios to help understand and define strategies for the multiscreen world. [...]

    Designing for Context on Multiple Devices on 7. July 2012
  21. [...] a studio based in Hamburg, Germany, published a collection of additional multiscreen categories and scenarios to help understand and define strategies for the multiscreen world. It’s [...]

    Designs Templates Designs Templates on 8. July 2012
  22. [...] margine, sul tema, si consiglia la consultazione di questa presentazione: “Patterns for Multiscreen Strategies” e la lettura dell’articolo di corredo alla [...]

    A Tutto Schermo | Il Giornalaio on 30. August 2012
  23. [...] Google的报告将用户的跨屏幕使用行为分为两种模式:序列型与即时型。前者是用户在一个屏幕上开始使用某个服务后,转移到另一个屏幕继续同一任务的模式;后者是用户同时使用多个设备完成一个任务、或多个任务的配合。实质上,前者是跨屏幕的数据转移与用户一致性体验的问题,而后者是多屏幕协作的问题。Prcious Design曾经就这一问题进行了研究,将跨屏幕使用情景进行了更多维度的划分,但我们依然可以将其归结到上面两个分类中。不同的模式,它们分别有什么样的特点呢? [...]

    多屏幕使用环境下的产品模式 | 21广场 on 30. August 2012
  24. [...] margine, sul tema, si consiglia la consultazione di questa presentazione: “Patterns for Multiscreen Strategies” e la lettura dell’articolo di corredo alla [...]

    Il nuovo mondo è multischermo | LSDI on 30. August 2012
  25. [...] Design Studio describing patterns to support designing multiscreen scenarios.  It’s called Multiscreen Patterns: Patterns to help understand and define strategies for the multiscreen world.  The author provides [...]

    Multiscreen Mobility | Natalie Hanson, PhD on 5. September 2012
  26. [...] Slideshow presentation from Precious: [...]

    Multiscreen Context | XHIBITOR on 25. September 2012
  27. [...] via Multiscreen Patterns | precious, strategic design & visual language. [...]

    Think Multiscreen (vs. iPad-only) when developing an mLearning Strategy | The m-Learning Revolution Blog on 4. October 2012
  28. [...] detecting the device class you decide what to display and how. Here is a post about multiscreen strategies that covers that method [...]

    Design for user scenarios not device classes » test.ical.ly on 4. October 2012
  29. Projektowanie na wiele urządzeń | projektmobilny.pl on 16. October 2012
  30. [...] tablet, laptop/desktop, and HDTV…not to mention the car dashboard/Navi too!). Taking advantage of multiscreen interaction patterns will be valuable to enhance and not just merely replicate everywhere the software experience for a [...]

    Watching some technologies & trends - Ghost in the Pixel on 14. January 2013
  31. [...] devices so fluidly, and in patterns that we often can’t predict. Now apps are starting to connect to other devices to control, synchronize or extend an [...]

    What We Learned in 2012 | Underwaterpistol on 26. January 2013
  32. [...] Tanto o Safari quando o Google Chrome já sincronizam abas e favoritos entre dispositivos. O artigo Patterns for Multiscreen Strategies aponta ao menos 6 modelos de interação entre dispositivos: coesão, sincronização, [...]

    Mitos sobre dispositivos móveis - Tableless on 26. March 2013
  33. [...] between devices so fluidly, and in patterns that we often can’t predict. Now apps are starting to connect to other devices to control, synchronize or extend an [...]

    Gotolove a company that actualy has a director of user expeerience on 3. April 2013
  34. [...] between devices so fluidly, and in patterns that we often can’t predict. Now apps are starting to connect to other devices to control, synchronize or extend an [...]

    Gotolove a company that actualy has a director of user experience on 3. April 2013
  35. [...] Tanto o Safari quando o Google Chrome já sincronizam abas e favoritos entre dispositivos. O artigo Patterns for Multiscreen Strategies aponta ao menos 6 modelos de interação entre dispositivos: coesão, sincronização, [...]

    Mitos sobre dispositivos móveis | Velame Cursos on 18. April 2013
  36. [...] der Muster basieren teilweise auf der Einteilung und Definition von Precious Design Studio aus Hamburg. Wir haben diese Muster erweitert, aggregiert und [...]

    Muster, Prinzipien und Ansätze | Multiscreen Experience Design on 20. June 2013
  37. [...] Multiscreen Patterns (A presentation by Studio Precious) Презентация немецкий компании Studio Precious, в которой они описывают различные подходы к адаптации интерфейса к экраном различного формата и разрешения. Авторы предлагают 6 основных паттернов — согласованность, синхронизация, расшаривание экрана, переход между устройствами, взаимодополняемость, одновременность. [...]

    Обзор свежих материалов, июнь 2011 | Юрий Ветров об интерфейсах on 8. July 2013
  38. [...] Hamburg, entwickeln Interfaces für Web-, Smartphone-, iPad- und TV-Anwendungen und haben 2010 die »Patterns for Multi­screen Strategies« vorgestellt. Die beiden unterrichten Interface Design an der Good School in Hamburg und haben [...]

    Ideengeber und Experten | Multiscreen Experience Design on 11. July 2013
  39. [...] a studio based in Hamburg, Germany published a collection of additional multiscreen categories and scenarios to help understand and define strategies for the multiscreen world. [...]

    [번역] Designing for Context : The Multiscreen Ecosystem | Lovelyredsky on 5. August 2013

Write a comment