12 Standard Screen Patterns

By Theresa Neil

As Bill mentioned in an earlier post, we don’t want to limit this blog to just the principles and patterns found in the book. For that you can check out our Explore the Book section. In the spirit of that, I want to share an additional set of principles and patterns I have been using for RIA design. While the book takes a much more consumer web site orientation, these concepts are central to enterprise application and web productivity application design and more broad than those discussed in the book.

This is the first article in a three part series.

      Standard Screen Patterns: 12 patterns w/100 examples
      Essential Controls: 30 controls for RIA design and development
      Components for Commonly Requested Features: 15 patterns and examples
standard_screen_patterns

With more companies turning to RIA frameworks for enterprise software development, these screen patterns are indispensable for product managers, UX designers, information architects, interaction designers and developers. The patterns rely heavily upon desktop design principles, subtly blended with many of the better RIA components and principles. I’ve included 100 examples to illustrate these patterns, pulled from desktop, Flex/AIR, Ajax, Laszlo, and Silverlight applications.

01. Master/Detail

Master/Detail screen pattern can be vertical or horizontal. Ideal for creating an efficient user experience by allowing the user to stay in the same screen while navigating between items. Horizontal layout is a good choice when the user needs to see more information in the master list than just a few identifiers- or when the master view is comprised of a set of items that each have additional details. Click on thumbnail for larger image OR download the PDF.

02. Column Browse

The Browse screen pattern can be vertical or horizontal. Ideal for creating an custom user experience by allowing the user to start from various entry points for navigating to the item(s) they are interested in.

03. Search/ Results

The Search screen pattern can range from very simple to quite advanced. Ideal for creating an efficient user experience by allowing the user to navigate directly to an item or set of items meeting specific criteria.

04. Filter Dataset

The Filter Dataset screen pattern can be vertical or horizontal. Ideal for creating an efficient user experience by allowing the user to refine a set of known data, or further refine search results.

05. Forms

All Form screens should be approached with a solid understanding of usability and design best practices. Refer to “Web Form Design: Filling in the Blanks” by Luke Wroblewski for reference.

06. Palette/ Canvas

The Palette/ Canvas screen pattern is seldom the right pattern to apply, but it is the only pattern for documenting or creating: linear or non-liner processes; flow diagrams; screen layouts; design/diagram with physical size or layout constraints.

07. Dashboard

A well designed Dashboard will provide: key information at a glance, real time data, easy to read graphics, clear entry points for exploration This is typically not achieved by displaying a single screen of metrics (either in a big table, or just a bunch of graphs). Providing a high degree of customization is no substitute for user research and testing. Stephen Few has a nice book on this topic Information Dashboard Design: The Effective Visual Communication of Data .

08. Spreadsheet

The Spreadsheet screen pattern is ideal for creating an efficient user experience by allowing the user to easily scan, edit and enter information (in bulk). The Spreadsheet should provide the following functionality: standard table features like sort, hide/show columns, rearrange columns, group by (if applicable), global level undo/redo, add/insert/delete row, keyboard navigation, import and export.

09. Wizard

The Wizard/Quick Start screen pattern is ideal for creating an efficient user experience by guiding the user through a complex or infrequent workflow.

10. Question & Answer

The Q&A screen pattern is ideal for creating an efficient user experience by allowing the user to enter known information and receive a solution. Q & A differs from Search in that this pattern should be used to assist users in identifying possible options or a single recommendation in an arena they are lacking expertise (health insurance, mortgages, planning, purchases).

11. Parallel Panels

The Parallel Panels screen pattern can be stacked (showing one at a time) or unstacked (showing all at once). This pattern is ideal for organizing chunks of information that are similar or have interdependent tendencies. Efficiency is gained by keeping the user in one screen. Ideal candidates for the stacked variation of this pattern are simple work-flows with: a high level, visible goal that is fed by multiple inputs, multiple non-sequential steps. This combines a number of the web site patterns outlined in “Designing Interfaces” by Jennifer Tidwell for a single pattern for chunking and displaying data.

pp_ex4

12. Interactive Model

The Interactive Model screen pattern is characterized by many interactive elements associated with the key object (a calendar, map, graph, chart, canvas). It is ideal for creating a user experience that is closely aligned with the user’s mental model (a natural fit). Excellent candidates for this pattern are: calendars, maps, gantt charts, what-if scenarios (including calculators), WYSIWYG editors (including photo editing).

Bonus. Blank State

This is the natural state of the application, before any data has been entered or accessed. The book, “Getting Real” by 37signals”explains that a blank state screen is an excellent place to set users expectations. By giving them a preview this can lower anxiety and reduce frustration and confusion. Items to include in a blank state screen include: videos, quick tutorials, help tips, a screenshot of what a fully loaded screen will look like.

Missing Patterns?

Noticeably absent are two patterns that are grossly overused and misused in enterprise software- portals and tabs.

  1. Portals- If your market research, business requirements and user feedback lead you to design a portal, follow the same design principles and best practices as the Dashboard pattern.
  2. Tabs- Tabs are a component, and ultimately not a screen pattern. They are to alternate between views of data in the same context. If the data structure is leading you to a tab heavy UI design, I have two suggestions. First, reconsider the IA. Use card sorting and/or hire a professional Information Architect to help you for a few days. Second, follow the same design principles and best practices as the Parallel Panels pattern.

You can download a PDF of this post which includes full descriptions of each pattern, as well as best practices .

References

If you are looking for web site design patterns, here are a number of excellent books:

January 17, 2009 · Tagged with , , , , · By Theresa Neil

124 Comments »

  1. Timothy Said,

    January 20, 2009 @ 12:19 pm

    Excellent post! Very informative. thanks.

  2. ScreenShots Said,

    January 20, 2009 @ 3:46 pm

    Great Post, but please replace the enlarged screenshots with the full size versions.

  3. ThemeLib Said,

    January 20, 2009 @ 8:05 pm

    The screenshot is too small :(

  4. theresaneil Said,

    January 20, 2009 @ 8:16 pm

    I am sorry, they are very small. But…
    I have a very nice PDF you can download and share with your friends. It also includes the best practices for each pattern, and bigger screen shots in full resolution (so you can zoom in and see every detail).

    I will link this too the post too.

    http://www.theresaneil.com/files/standard_screen_patterns.pdf

  5. admin Said,

    January 20, 2009 @ 9:52 pm

    I also plan on getting the screenshots from Theresa and putting them on the companion Flickr site.

  6. akie.nl » 12 screen patterns for web interfaces Said,

    January 21, 2009 @ 6:30 am

    [...] these 12 standard screen patterns for inspiration when designing web [...]

  7. Ricardo Bánffy Said,

    January 21, 2009 @ 7:57 am

    Allow me to suggest a couple older examples of the column browser that predates the web by a couple decades:

    http://media.arstechnica.com/images/gui/7-AltoST.jpg

    http://www.sra.co.jp/people/aoki/SmalltalkWorkbookJ/BrowserOld.gif

  8. Josh Peters Said,

    January 21, 2009 @ 3:10 pm

    You end with a knock against tabs, yet in the screen shots for “Parallel Panels” you have a screen shot of iTunes using tabs. Isn’t a tab really the same thing as a “Parallel Panel” just represented slightly differently visually speaking?

  9. links for 2009-01-21 « Mandarine Said,

    January 21, 2009 @ 8:07 pm

    [...] Designing Web Interfaces: 12 Standard Screen Patterns (tags: layout webdesign inspiration) [...]

  10. links for 2009-01-21 | hxf148 Said,

    January 21, 2009 @ 10:01 pm

    [...] Designing Web Interfaces: 12 Standard Screen Patterns [...]

  11. Standard Screen Patterns « la vanguardia Said,

    January 21, 2009 @ 11:40 pm

    [...] See More   [...]

  12. 12 Pattern per Interfacce Web / Melodycode.com - Life is a flash Said,

    January 22, 2009 @ 12:36 am

    [...] comuni relativi ad una certa tipologia di interfaccia/operazione. Nel articolo intitolato “Designing Web Interfaces: 12 Standard Screen Patterns” possiamo trovare dei pattern molto utili (per interfaccia di ricerca, browsing, filtraggio, [...]

  13. fm Said,

    January 22, 2009 @ 1:06 am

    good interesting post

    well at least for us coders

  14. Designing Web Interfaces: 12 Standard Screen Patterns | Konigi Said,

    January 22, 2009 @ 3:44 am

    [...] design patterns for building web interfaces that provide rich interaction. They’ve shared the full set of principles and patterns they use for RIA design in this article. URL designingwebinterfaces.com/des… [...]

  15. 12 tipos de maquetación estándar en diseños web « El bit campeador Said,

    January 22, 2009 @ 4:34 am

    [...] 12 Standard Screen Patterns + Bonus Pattern. Designing Web Interfaces: 12 Standard Screen Patterns [...]

  16. links for 2009-01-22 | Ip's. Said,

    January 22, 2009 @ 5:03 am

    [...] Designing Web Interfaces: 12 Standard Screen Patterns "Standard Screen Patterns: 12 patterns w/100 examples Essential Controls: 30 controls for RIA design and development Components for Commonly Requested Features: 15 patterns and examples Interaction Principles: 6 principles w/70 patterns" (tags: interfaces template designpatterns designpattern webdesign webdev reference) [...]

  17. links for 2009-01-22 « copula’s weblog Said,

    January 22, 2009 @ 5:03 am

    [...] Designing Web Interfaces: 12 Standard Screen Patterns (tags: 01 2009 webdesign screen interface templates) [...]

  18. links for 2009-01-22 « Brent Sordyl’s Blog Said,

    January 22, 2009 @ 6:02 am

    [...] 12 Standard Web Interface Wireframes To celebrate the release of our new O’Reilly book, “Designing Web Interfaces: Principles and Patterns for Rich Interactions”, I wanted to share the full set of principles and patterns I use for RIA design. These concepts are central to enterprise application and web productivity application design. (tags: tweet webdesign wireframes) Possibly related posts: (automatically generated)links for 2008-05-21It’s a little more cleaner than Twitte …Found on the Web Today 01/03/2009What Shape is Your Mission Statement? Tag Clouds for Marketing and Meaning… [...]

  19. links for 2009-01-22 | IndianGeek Said,

    January 22, 2009 @ 7:06 am

    [...] Designing Web Interfaces: 12 Standard Screen Patterns (tags: wireframes pattern interfaces webdev) Share and Enjoy: [...]

  20. theresaneil Said,

    January 22, 2009 @ 7:07 am

    Fixed in IE 7.

    Sorry for the inconvenience IE folks & thanks for letting me know :o )

  21. SEF Said,

    January 22, 2009 @ 8:49 am

    You’ve put the filter_vertical.png in twice instead of having the filter_horizontal.png next to it. (NB I checked that other one did exist already, so it’s only a matter of editing the page correctly to include it rather than having to create and upload it.)

  22. slabounty Said,

    January 22, 2009 @ 12:53 pm

    Nice article. It covers most everything I would have thought of.

  23. Standard web interface screen patterns at iainclaridge.net Said,

    January 23, 2009 @ 6:13 am

    [...] 12 Standard Screen Patterns, by Theresa Neil. [...]

  24. Tipare de design web, RIA’s si desktop - Web Design Arad Said,

    January 23, 2009 @ 2:18 pm

    [...] 12 Standard Screen Patterns [...]

  25. The Abarentos Narrative » links for 2009-01-23 Said,

    January 23, 2009 @ 3:01 pm

    [...] 12 Standard Screen Patterns (tags: interface gui interfaces designpattern ia ui ux) [...]

  26. NICCAI Said,

    January 23, 2009 @ 3:04 pm

    The palette/canvas pattern is useful and commonly used in 3rd party web applications that interact with other webpages – as in those that may be loaded via a bookmarklet.

  27. Standard Screen Patterns | Jeff Siarto Said,

    January 23, 2009 @ 3:11 pm

    [...] 12 stan­dard screen pat­terns for user inter­face design An in-​depth arti­cle on stan­dard screen pat­terns for user inter­faces writ­ten by fellow O’Reilly authors Bill Scott and Theresa Neil. This is the first of a three part series on the topic based off their new book Design­ing Web Interfaces. [...]

  28. Peter Svensson Said,

    January 24, 2009 @ 12:12 am

    Hi, I’ve written a new post that tries to use existing Dojo Ajax Toolkit unit tests and demos to show how to practically implement these patterns.

    http://unclescript.blogspot.com/2009/01/using-dojo-to-implement-12-standard.html

    Cheers,
    PS

  29. » OLDaily por Stephen Downes, enero 23, 2009 El Blog Boyacense: El sitio de referencia de tod@s l@s boyacenses Said,

    January 24, 2009 @ 2:40 am

    [...] también una versión PDF. Theresa Neil, Designing Web Interfaces (intefaces de diseño de web). [Liga] [etiquetas: páginas web, [...]

  30. Connected: Data Visualisation, Userfly, Screen Patterns | Pocket Noodle Said,

    January 24, 2009 @ 8:57 am

    [...] 12 Standard Screen Patterns, the first of a four part series from Bill Scott and Theresa Neil’s forthcoming book ‘Designing Web Interfaces‘. A must have for interaction designer. [...]

  31. 12 Standard Screen Patterns | exhero Said,

    January 24, 2009 @ 9:08 am

    [...] Web Interfaces zeigt anhand von über 100 Beispielen 12 Standard Screen Patterns. [...]

  32. 12 Padrões de Tela em Webdesign | Si14 Said,

    January 24, 2009 @ 4:16 pm

    [...] 12 padrões de tela, por Theresa Neil. Via Swissmiss. [...]

  33. UI Screen Patterns | Candes | Cristian Neagu - UI Designer, Developer, Consultant Said,

    January 25, 2009 @ 4:19 am

    [...] Principles and Patterns for Rich Interactions. The first article of tree sets consists of 12 Standard Screen Patterns and 100 examples of them in action. Next will be “Essential Controls: 30 controls for RIA design and [...]

  34. RIA patterns Said,

    January 25, 2009 @ 5:21 am

    [...] interfaces utilisateurs évoluent sans cesse, le web prend le look des applications dans le cas des RIA et les applications [...]

  35. Wzorce projektowe « Everyday things in use Said,

    January 25, 2009 @ 7:15 am

    [...] design, user interface design by Marcin Szuba w dniu styczeń 25th, 2009 Doskonały wpis o screen patterns dla RIA pochodzące z “Designing Web Interfaces Principles and Patterns for Rich Interaction“ [...]

  36. Linkdump for January 25th at found_drama Said,

    January 25, 2009 @ 1:01 pm

    [...] 12 Standard Screen Patterns (tagged: ui usability design webdev work ) [...]

  37. Mine seneste bookmarks (19.01.09 - 25.01.09) | Morten Gade Said,

    January 25, 2009 @ 4:03 pm

    [...] Designing Web Interfaces: 12 Standard Screen Patterns: (bysted ux patterns ) [...]

  38. Paper Bits – links for 2009-01-25 Said,

    January 25, 2009 @ 4:15 pm

    [...] while not going anywhere. And that would have been fine." (tags: papernet paper design lofi) 12 Standard Screen Patterns High level patterns for desktop and web interaction, explained in detail, with examples. (tags: [...]

  39. Interesting Links (2009-01-25) | Stock Wordpress Said,

    January 25, 2009 @ 10:48 pm

    [...] 12 Standard Screen Patterns [...]

  40. dolzenko Said,

    January 26, 2009 @ 12:44 am

    Blank State vs. Blank Slate always confuses me :)

    (37signals use the latter)

  41. links for 2009-01-26 at dekay.org Said,

    January 26, 2009 @ 3:02 am

    [...] each with 200 passengers aboard." (tags: car crash death accident statistics via:mento.info) 12 Standard Screen Patterns "As Bill mentioned in an earlier post, we don’t want to limit this blog to just the [...]

  42. Tanjadebie.nl » Blog Archive » 12 Standard Screen Patterns Said,

    January 26, 2009 @ 3:51 am

    [...] Standard Screen Patterns: 12 patterns w/100 examples [...]

  43. Search Design Patterns for Ideas and Inspiration - Things On Top Said,

    January 26, 2009 @ 7:35 am

    [...] Web Interfaces brings us 12 standard screen patterns for Rich Internet Application (RIA) design. Both “03. Search/Results” and “04. [...]

  44. Ramenos Said,

    January 26, 2009 @ 7:51 am

    Great Article. Thanks for this good and efficient summary :)

  45. Weekly Points of Interest at Experience Matters Said,

    January 26, 2009 @ 11:22 am

    [...] 12 Standard Screen Patterns [...]

  46. Interesting Links (2009-01-26) | Stock Wordpress Said,

    January 26, 2009 @ 9:40 pm

    [...] 12 Standard Screen Patterns [...]

  47. Chiang Mai Web Design Said,

    January 26, 2009 @ 10:24 pm

    Nice article.

  48. Useful Links for Web Designer « Chiang Mai Web Design Said,

    January 26, 2009 @ 11:19 pm

    [...] 12 Standard Screen Patterns [...]

  49. VocabControl » Designing Web Interfaces Said,

    January 27, 2009 @ 2:24 am

    [...] haven’t read the book yet, but this blog post on screen templates presents 12 basic layouts and the sort of information they work best with. It could be a useful [...]

  50. Dorela Said,

    January 27, 2009 @ 2:41 am

    nice post, thanks for sharing!

  51. Screen Patterns — Gold | UI and us Said,

    January 27, 2009 @ 7:20 am

    [...] has done it. From the as-yet unreleased book Designing Web Interfaces comes an archetypal set of 12 Screen Patterns. These ‘blueprints’ for application layout include 100 screenshots real software which [...]

  52. 12 patrones estándar de pantallas » Infotectura Said,

    January 27, 2009 @ 5:25 pm

    [...] mercadeo de su nuevo libro Designing Web Interfaces, Bill Scott y Theresa Neill han publicado un grupo de patrones de pantallas comunes en el diseño web. Es el primero de tres posts, parece un recurso extremadamente [...]

  53. Patrones de Usabilidad para Intefaces de Usuario « websenior Said,

    January 28, 2009 @ 3:03 am

    [...] Un excelente artículo de patrones de usabilidad (en inglés) donde nos sugieren que estética o formación deben tener nuestras pantallas de [...]

  54. Bookmarks for January 21st through January 28th → Stevey.com Said,

    January 28, 2009 @ 8:56 am

    [...] Designing Web Interfaces: 12 Standard Screen Patterns“worthy of review” [...]

  55. Links for 29-01-2009 | Blogmines Said,

    January 28, 2009 @ 5:57 pm

    [...] Designing Web Interfaces – 12 Standard Screen Patterns [...]

  56. storage.goodmix » Blog Archive » links for 2009-01-28 Said,

    January 28, 2009 @ 10:00 pm

    [...] 12 Standard Screen Patterns 12のインターフェースパターン (tags: interface) [...]

  57. Patrones de diseo para sitios corporativos Said,

    January 29, 2009 @ 7:00 am

    [...] | Recopilación de patrones de diseño Etiquetas: CSS diseoweb themes sitioscorporativos blogcorporativios plantillas Comentar [...]

  58. Link Pimp Friday 30/01/09 Said,

    January 30, 2009 @ 2:43 am

    [...] Designing a better user interface. [...]

  59. links for 2009-01-30 « Amy G. Dala Said,

    January 30, 2009 @ 6:01 am

    [...] 12 Standard Screen Patterns (tags: web_design design ui) [...]

  60. Mère Teresa Said,

    January 30, 2009 @ 8:57 am

    Thank you for this interesting work !

  61. splat Said,

    January 30, 2009 @ 4:51 pm

    Cool post, I’m subscribing to this blog.

    What was the website shown in the 2nd dashboard screenshot though? I’d like to know.

    Cheers,

    Splat

  62. Splat Said,

    January 31, 2009 @ 7:03 am

    Thanks for replying.

    I actually mean the first dashboard screenshot — it was pretty late at night where I was :P

    Thank you for the links — very informative.

    Cheers again,

    Splat

  63. floatfix » A discussion in User Experience » Blog Archive » About Patterns Said,

    January 31, 2009 @ 10:34 pm

    [...] Designing web Interfaces  [...]

  64. Weekly Roundup :: gLog - Thoughts from Geoff Alday (a User Experience Designer in Nashville, Tennessee). Said,

    February 1, 2009 @ 5:53 am

    [...] 12 Standard Screen Patterns – For enterprise and web applications.  Nice find since this type of article is usually geared toward websites. [...]

  65. Ergonomie Web » Blog Archive » 12 modèles d’interfaces pour applications web ou desktop Said,

    February 1, 2009 @ 12:29 pm

    [...] des templates de solutions. Vous pouvez en lire plus sur chaque schémas sur le site du livre “Designing Web Interfaces” qui constitue une lecture très intéressante. L’article propose en outre un pdf beaucoup [...]

  66. Seta Digital Blog » Blog Archive » links for 2009-02-02 Said,

    February 2, 2009 @ 10:00 am

    [...] 12 Standard Screen Patterns (tags: webdev design web usability patterns wireframes interface) [...]

  67. whois Said,

    February 3, 2009 @ 3:26 am

    Thanks for post.
    It’s a good food for brains :)

  68. 今日僕が気になったもの_Feb 3 ‘09 | ReInit_creative Log Said,

    February 3, 2009 @ 3:41 pm

    [...] 12 Standard Screen Patterns [...]

  69. builder2 » Links of interest Said,

    February 5, 2009 @ 8:39 am

    [...] 12 Standard Screen Patterns [...]

  70. » OLDaily por Stephen Downes, enero 23, 2009 TIC, E/A, PER…: Said,

    February 9, 2009 @ 12:42 pm

    [...] también una versión PDF. Theresa Neil, Designing Web Interfaces (intefaces de diseño de web). [Liga] [etiquetas: páginas web, [...]

  71. software developement Said,

    February 9, 2009 @ 6:15 pm

    great list..thanks for sharing it. this is really informative.

  72. Rich Internet Application Patterns « Stefosphère 2.0 Said,

    February 10, 2009 @ 1:57 am

    [...] Internet Application Patterns 10 02 2009 Le blog Designing Web Interface propose une synthèse des typologies des sites web à travers 12 modèles, chaque modèle étant [...]

  73. Wednesday, January 21, 2009 — shiner.clay Said,

    February 12, 2009 @ 12:48 pm

    [...] 12 standard screen patterns for web interface design [...]

  74. Methink.com - Ruby on Rails Web Development & Consulting: UI Design Patterns « Said,

    February 18, 2009 @ 5:39 pm

    [...]   - 12 Standard Screen Patterns [...]

  75. Tech4him - Technology with Integrity » Blog Archive » Christian Technology Web Resource Blog Said,

    February 19, 2009 @ 5:45 pm

    [...] 12 Standard Screen Patterns – An interesting article from DesigningWebInterfaces.com. These patterns are specifically discussed in relation to the adoption of RIA platforms. [...]

  76. 현웅재 Said,

    February 19, 2009 @ 8:59 pm

    wow i love it .
    if you permmit i want to write this thema in my blog to korean case and so on.
    how about you?

  77. 웹사이트에서 사용되는 30개의 필수 컨트롤들 | 웹 개발자 아빠의 이야기 Said,

    February 25, 2009 @ 4:08 pm

    [...] 좋은 정보들이 올려져 있습니다. “15 Common Component Patterns“, “12 Standard Screen Patterns” 와 같은 고급 정보들도 들어가 있습니다. Posted in Web RSS 2.0 | Trackback | [...]

  78. lyricsvideo.net Said,

    February 25, 2009 @ 8:46 pm

    Thank you very much for nice screen patterns! I plan to use one of them for redesigning http://www.vietnam-embassy.cn next time.

  79. Programación en Internet » Patrones de diseño de pantallas Said,

    February 27, 2009 @ 2:15 am

    [...] de encontrar la página 12 Standard Screen Patterns. En esta página se describen 12 tipos de diseños de [...]

  80. yamaha Said,

    March 1, 2009 @ 5:22 pm

    glad ive stumbled to your page. thanks for posting this!..this is really helpful. :)

  81. Scarf*oo Said,

    March 5, 2009 @ 6:53 am

    A different kind of post finally, glad I’ve found this. I am right in the process of realigning our CMS tool and this should come in handy.

  82. El_Member Said,

    March 27, 2009 @ 2:25 am

    Fantastic topic Theresa Neil, purely educational I’d say. I’ll bookmark this page for future referencing since I have been doing some web developing lately.

  83. Some thoughts on graphical user interface design (GUI): part 1 | techcenterblog Said,

    April 14, 2009 @ 5:58 am

    [...] are different layouts or screen patterns for different purposes.   Clicky, a web analytics program, is a good example of the Dashboard [...]

  84. rooswanti Said,

    April 14, 2009 @ 6:59 pm

    Wow…nice article, great pdf. Very useful. Thx.

  85. rooswanti Said,

    April 14, 2009 @ 11:32 pm

    I have read PDF version & I have 2 questions:

    1. In your PDF (at page 2), you wrote: “Don’t use tabs in the master or detail pane.”
    I don’t understand why we don’t use tabs in the master or detail pane. What about the complex data? May I use tabs in the detail pane to represent the complex data?

    2. In your PDF (at page 4), you wrote: “Don’t use the bottom pane as an extended area for editing table fields. Use the Spreadsheet pattern or a light weight layer for editing.”
    Why we don’t use it? I think it’s more efficient if we use the bottom pane as the detail pane and also as the editing pane.

  86. website development abu dhabi Said,

    April 20, 2009 @ 8:57 pm

    Excellent demonstration with pictures. You have select very good and informatics topic. I think this is the base for any application. Why don’t you combine your all three parts and publish a book, then sell it on to Amazon.com. I am shore you will get lot of hits like SEO books.

  87. Personal Blog — John Keyes – Linkeyes 1st February 2009 Said,

    April 21, 2009 @ 3:12 am

    [...] would still be reading this, thinking that startups are worth all this hassle” – Dave McClure 12 Standard screen patterns for web interfaces. This wooden Vespa is a very fine piece of craftsmanship. Snakebite is going to [...]

  88. 12 Standard Screen Patterns / Nathan Philpot. Said,

    May 5, 2009 @ 2:54 pm

    [...] 12 Standard Screen Patterns “I want to share an additional set of principles and patterns I have been using for RIA design. By Theresa Neil PreviousMobile Design & Development Workshop Assets var gaJsHost = ((”https:” == document.location.protocol) ? “https://ssl.” : “http://www.”); document.write(unescape(”%3Cscript src=’” + gaJsHost + “google-analytics.com/ga.js’ type=’text/javascript’%3E%3C/script%3E”)); var pageTracker = _gat._getTracker(”UA-3470140-1″); pageTracker._initData(); pageTracker._trackPageview(); [...]

  89. Neue Links / Neustart-Magazin Said,

    May 6, 2009 @ 2:03 pm

    [...] 12 Standard Screen Patterns – Vorlagen und Erläuterungen zum Thema Screendesign-Grundlagen für RIA (Rich Internet Applications). [...]

  90. Tagz | "Designing Web Interfaces: 12 Standard Screen Patterns" | Comments Said,

    May 16, 2009 @ 8:55 am

    [...] [upmod] [downmod] Designing Web Interfaces: 12 Standard Screen Patterns (designingwebinterfaces.com) 1 points posted 3 months, 3 weeks ago by jeethu tags layout [...]

  91. 16 Crucial Webdesign and Usability Best Practice Compilations and Tools | tripwire magazine Said,

    June 4, 2009 @ 1:57 pm

    [...] 12 Standard Screen Patterns [...]

  92. 16个关键，网页设计和可用性最佳实践的汇编和工具 | ⊹⊱⋛⋋ISong榮耀ζ組織™⋋⋛⊱⊹ Said,

    June 11, 2009 @ 5:49 am

    [...] 12个标准屏幕样式 [...]

  93. gaus surahman Said,

    June 20, 2009 @ 12:43 pm

    I am looking for more information on RIA best practices. Bookmarked. Thanks for taking time to elaborate this.

  94. Helen : Сценарий Master/Detail в Blend 3 Said,

    June 23, 2009 @ 10:24 am

    [...] на глаза попался один занимательный пост “12 Standard Screen Patterns” (автор Theresa Neil). Указанные шаблоны по отдельности [...]

  95. Сценарий Master/Detail в Blend 3 - Территория блога - Территория Silverlight Said,

    June 23, 2009 @ 11:06 am

    [...] на глаза попался один занимательный пост “12 Standard Screen Patterns” (автор Theresa Neil). Указанные шаблоны по отдельности [...]

  96. calabonga Said,

    June 23, 2009 @ 1:27 pm

    очень интересный и информативный пост. спасибо.
    very interesting and informative post, thanks

  97. 3d desing Said,

    July 2, 2009 @ 10:01 pm

    Really nice and much informative post great knowledge.

  98. Itákora » Lecturas recomendadas (9) Said,

    July 6, 2009 @ 8:43 am

    [...] Patrones de diseño habituales en entornos corporativos. Visto en Grancomo. [...]

  99. Jay Soni – From Bondage to Freedom… » Blog Archive » What’s Golden Said,

    July 18, 2009 @ 1:32 pm

    [...] in interactive media. It’s unrealistic to think our old methods can fill in all the gaps, but new interaction patterns and visual languages emerge everyday. These are the building blocks for our new design [...]

  100. Twitted by onasis Said,

    July 20, 2009 @ 7:39 am

    [...] This post was Twitted by onasis [...]

  101. 12 Standard Screen Patterns Said,

    August 1, 2009 @ 7:07 am

    [...] See more here: 12 Standard Screen Patterns [...]

  102. tripwire magazine | tripwire magazine Said,

    August 3, 2009 @ 2:40 pm

    [...] 12 Standard Screen Patterns [...]

  103. 35+ Essential Web Design Resources on Best Practice, Tips and Techniques | The Muliati.Com goBlog Said,

    August 3, 2009 @ 10:29 pm

    [...] 12 Standard Screen Patterns [...]

  104. 100+ Essential Design Resources That you should know about | Said,

    August 5, 2009 @ 5:44 am

    [...] 12 Standard Screen Patterns [...]

  105. Up-leveling the Flex User Interface Discussion | Ryan Stewart – Rich Internet Application Mountaineer Said,

    August 11, 2009 @ 12:10 am

    [...] 12 Standard Screen Patterns – A great list of standard UI patterns that you can leverage in your Flex applications. She literally has 100 examples of RIAs that use these patterns. [...]

  106. Twitted by widged Said,

    August 11, 2009 @ 1:46 am

    [...] This post was Twitted by widged [...]

  107. All Things Open Source » Blog Archive » Up-leveling the Flex User Interface Discussion Said,

    August 12, 2009 @ 6:43 am

    [...] 12 Standard Screen Patterns – A great list of standard UI patterns that you can leverage in your Flex applications. She literally has 100 examples of RIAs that use these patterns. [...]

  108. 20 Useful Web Design Tips, Techniques and Best Practice : Useful+ Said,

    August 14, 2009 @ 4:39 am

    [...] 12 Standard Screen Patterns [...]

  109. Twitter Trackbacks for 12 Standard Screen Patterns [designingwebinterfaces.com] on Topsy.com Said,

    August 20, 2009 @ 11:01 pm

    [...] 12 Standard Screen Patterns designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns – view page – cached how to treat Herpes labialis online order clomid drugstore women’s health buy acyclovir online pet meds online free avi download movies hdtv torrent — From the page [...]

  110. Techwave » Blog Archive » 50 Most Usable RIAs Said,

    September 2, 2009 @ 6:06 am

    [...] website prototypes.Noteworthy design elements: Well designed information architecture, use of standard screen patterns and controls for structuring and rearranging a site map and building out each screen and toggling [...]

  111. 50 Most Usable RIAs - Partytow Said,

    September 8, 2009 @ 4:40 pm

    [...] design elements: Well designed information architecture, use of standard screen patterns and controls for structuring and rearranging a site map and building out each screen and toggling [...]

  112. Karl Dubost (karlpro) 's status on Wednesday, 30-Sep-09 13:49:36 UTC - Identi.ca Said,

    September 30, 2009 @ 5:49 am

    [...] Nice summary of Screen Patterns Design http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns [...]

  113. 12 Standard Screen Patterns | My Web Development Bookmarks Said,

    October 13, 2009 @ 5:42 am

    [...] Go here to read the rest: 12 Standard Screen Patterns [...]

  114. 12 Plantillas estándards para diseño de web — jotaerre.net Said,

    October 30, 2009 @ 2:34 pm

    [...] la web Designing Web Interfaces he encontrado este interesante artículo: 12 Standard Screen Patterns donde se pueden encontrar 12 diseños para web corportativas (y no tan [...]

  115. What’s Golden « ThisGlobe.com Said,

    November 4, 2009 @ 7:20 pm

    [...] media. It’s unrealistic to think our old methods can fill in all the gaps, but new interaction patterns and visual languages emerge everyday. These are the building blocks for our new design principles. [...]

  116. Sean Said,

    November 13, 2009 @ 8:42 am

    The PDF download link results in a 404 error. Can you send the document to me via email or notify me once you’ve fixed the download link? I’d like to utilize the thinking here. Thank you.

  117. Genduk Said,

    November 14, 2009 @ 9:45 am

    Nice tutorial, thanks for share

  118. Archetype Said,

    November 25, 2009 @ 9:43 am

    Informative post!!! Thanks for sharing.

  119. » Interface- & Interaktionspatterns Applicationdesign WS09/10 Said,

    December 14, 2009 @ 10:51 am

    [...] http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns [...]

  120. Twitted by nguyentranvu Said,

    December 31, 2009 @ 7:29 pm

    [...] This post was Twitted by nguyentranvu [...]

  121. Danny Foo Said,

    December 31, 2009 @ 7:42 pm

    This is great for me as I’ve to reason with my clients a lot. :)

    And it’s going into my to-buy list too.

  122. Twitted by Mike_More Said,

    December 31, 2009 @ 8:14 pm

    [...] This post was Twitted by Mike_More [...]

  123. 12 Standard Screen Patterns » Web Design Said,

    December 31, 2009 @ 9:52 pm

    [...] 12 Standard Screen Patterns [...]

  124. Twitted by alexeysibirtsev Said,

    January 2, 2010 @ 1:36 am

    [...] This post was Twitted by alexeysibirtsev [...]

Leave a Comment

Trackback URL