Suggest New Design Patterns

Share your ideas for new design patterns with us

Did you spot a new UI design pattern? Suggest a new pattern here! We will do our best to add new patterns we have missed to our library.

Your suggestion for a new design pattern

You've used all your votes and won't be able to post a new idea, but you can still search and comment on existing ideas.

There are two ways to get more votes:

  • When an admin closes an idea you've voted on, you'll get your votes back from that idea.
  • You can remove your votes from an open idea you support.
  • To see ideas you have already voted on, select the "My feedback" filter and select "My open ideas".
(thinking…)

Enter your idea and we'll search to see if someone has already suggested it.

If a similar idea already exists, you can support and comment on it.

If it doesn't exist, you can post your idea so others can support it.

Enter your idea and we'll search to see if someone has already suggested it.

  1. List Building Groups

    Using 2 lists and 2 grids create or build from one list to another. For example here are all my available options in list one. And here are the ones I choose to create. A user would add/remove from List 1 to create the wanted items in list 2

    4 votes
    Vote
    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      I agree to the terms of service
      Signed in as (Sign out)
      You have left! (?) (thinking…)
    • Mutton

      Mutton is a menu and a button combined. More here: http://hanamidesign.com/blog/ux-pattern-mutton-menu-button/

      4 votes
      Vote
      Sign in
      Check!
      (thinking…)
      Reset
      or sign in with
      • facebook
      • google
        Password icon
        I agree to the terms of service
        Signed in as (Sign out)
        You have left! (?) (thinking…)
      • Invisible Sign-Up

        Services like Geni and Tripit have already made sign-up almost invisible. Also single sign-on systems like OpenID are steps towards better.

        4 votes
        Vote
        Sign in
        Check!
        (thinking…)
        Reset
        or sign in with
        • facebook
        • google
          Password icon
          I agree to the terms of service
          Signed in as (Sign out)
          You have left! (?) (thinking…)
          planned  ·  1 comment  ·  Admin →
        • 4 votes
          Vote
          Sign in
          Check!
          (thinking…)
          Reset
          or sign in with
          • facebook
          • google
            Password icon
            I agree to the terms of service
            Signed in as (Sign out)
            You have left! (?) (thinking…)
          • administration page

            perhaps this is similar to dashboard but i would like to see the whole design because administration page design is quite complicated especially if you deal with lots of data ( such as e-commerce )

            4 votes
            Vote
            Sign in
            Check!
            (thinking…)
            Reset
            or sign in with
            • facebook
            • google
              Password icon
              I agree to the terms of service
              Signed in as (Sign out)
              You have left! (?) (thinking…)
            • Market Information

              A block of high-level information with multiple tabs, for displaying a lot of information in a small space, often with links to the full data. As found on the Wall Street Journal and similar sites.

              4 votes
              Vote
              Sign in
              Check!
              (thinking…)
              Reset
              or sign in with
              • facebook
              • google
                Password icon
                I agree to the terms of service
                Signed in as (Sign out)
                You have left! (?) (thinking…)
                1 comment  ·  Admin →
              • Activity feeds

                The feed of aggregated information displayed to the user in a stream of activity.

                4 votes
                Vote
                Sign in
                Check!
                (thinking…)
                Reset
                or sign in with
                • facebook
                • google
                  Password icon
                  I agree to the terms of service
                  Signed in as (Sign out)
                  You have left! (?) (thinking…)
                • List between 1000 - 6000 items

                  A way to display a list of about 1000 - 6000 items. Can Select one or more. As well as being able to un-select them as well.

                  4 votes
                  Vote
                  Sign in
                  Check!
                  (thinking…)
                  Reset
                  or sign in with
                  • facebook
                  • google
                    Password icon
                    I agree to the terms of service
                    Signed in as (Sign out)
                    You have left! (?) (thinking…)
                    1 comment  ·  Admin →
                  • Warnings and warning symbols

                    Sometimes you want to tell the user that something is wrong with a warning of some kind, in forms for instance.

                    4 votes
                    Vote
                    Sign in
                    Check!
                    (thinking…)
                    Reset
                    or sign in with
                    • facebook
                    • google
                      Password icon
                      I agree to the terms of service
                      Signed in as (Sign out)
                      You have left! (?) (thinking…)
                    • Associate two items from two lists with one another.

                      We are builiding an interface for a Wiki-like application, where wikis will be reused in different contexts. We will provide users with a list of wikis and a list of contexts. Each list will be filterable (by type to search), then the user will execute an associating between a chosen wiki and context.

                      4 votes
                      Vote
                      Sign in
                      Check!
                      (thinking…)
                      Reset
                      or sign in with
                      • facebook
                      • google
                        Password icon
                        I agree to the terms of service
                        Signed in as (Sign out)
                        You have left! (?) (thinking…)
                      • 3 votes
                        Vote
                        Sign in
                        Check!
                        (thinking…)
                        Reset
                        or sign in with
                        • facebook
                        • google
                          Password icon
                          I agree to the terms of service
                          Signed in as (Sign out)
                          You have left! (?) (thinking…)
                        • Hide unflagged options

                          This display pattern only presents the flags that are on in the data until the user edits the information. For example, a ticketing system might have the options: "accessibility issue", "usability issue", "compatibility issue", etc. These are all yes/no options and the form to change them will likely have checkboxes.

                          When the ticket is displayed to the user who is reviewing the ticket, only the items that are checked will be displayed.

                          3 votes
                          Vote
                          Sign in
                          Check!
                          (thinking…)
                          Reset
                          or sign in with
                          • facebook
                          • google
                            Password icon
                            I agree to the terms of service
                            Signed in as (Sign out)
                            You have left! (?) (thinking…)

                            Thanks for the suggestion and apologies for late reply – I was on vacation. I think this is more a design principle (something like “keep it lightweight”), rather than a design pattern, but I could use this idea in some of the existing patterns and upcoming patterns.

                          • CRUD - Record Create, Read, Update, Delete

                            We have lots of database tables that have minimal editing needs by the user - Country Codes, Tax codes, Product prices, and so on - and these all currently use a simple format for CRUD, but it was designed by developers and looks very bland, and quite possibly could have far better usability, and certainly a better design.

                            Our process is:

                            Find screen - which also has an ADD NEW button. Enter values for any parameters relevant to search for and press FIND button. Matching records displayed in a grid with an EDIT link. The corresponding Edit form allows CLONE,…

                            3 votes
                            Vote
                            Sign in
                            Check!
                            (thinking…)
                            Reset
                            or sign in with
                            • facebook
                            • google
                              Password icon
                              I agree to the terms of service
                              Signed in as (Sign out)
                              You have left! (?) (thinking…)
                              1 comment  ·  Admin →
                            • Lightbox / Overlay

                              Draw user's attention by showing a modal window in the middle of the screen and dimming other content.

                              3 votes
                              Vote
                              Sign in
                              Check!
                              (thinking…)
                              Reset
                              or sign in with
                              • facebook
                              • google
                                Password icon
                                I agree to the terms of service
                                Signed in as (Sign out)
                                You have left! (?) (thinking…)
                                planned  ·  0 comments  ·  Admin →
                              • Mouse scroller pagination

                                Use the mouse wheel for pagination.

                                3 votes
                                Vote
                                Sign in
                                Check!
                                (thinking…)
                                Reset
                                or sign in with
                                • facebook
                                • google
                                  Password icon
                                  I agree to the terms of service
                                  Signed in as (Sign out)
                                  You have left! (?) (thinking…)
                                • Reviewing large amounts of text fields

                                  A pattern that shows how to show text for review or editing after a user fills out a long form

                                  3 votes
                                  Vote
                                  Sign in
                                  Check!
                                  (thinking…)
                                  Reset
                                  or sign in with
                                  • facebook
                                  • google
                                    Password icon
                                    I agree to the terms of service
                                    Signed in as (Sign out)
                                    You have left! (?) (thinking…)
                                  • Global Home Link

                                    Link the site logo to home page.

                                    3 votes
                                    Vote
                                    Sign in
                                    Check!
                                    (thinking…)
                                    Reset
                                    or sign in with
                                    • facebook
                                    • google
                                      Password icon
                                      I agree to the terms of service
                                      Signed in as (Sign out)
                                      You have left! (?) (thinking…)
                                    • 3 votes
                                      Vote
                                      Sign in
                                      Check!
                                      (thinking…)
                                      Reset
                                      or sign in with
                                      • facebook
                                      • google
                                        Password icon
                                        I agree to the terms of service
                                        Signed in as (Sign out)
                                        You have left! (?) (thinking…)
                                      • Sliding Date Picker

                                        Sliding date picker allows users to pick dates with slider bar. By dragging the bar over the time-line, the dates change instantly.

                                        http://ajaxorized.com/introducing-the-sliding-date-picker/

                                        2 votes
                                        Vote
                                        Sign in
                                        Check!
                                        (thinking…)
                                        Reset
                                        or sign in with
                                        • facebook
                                        • google
                                          Password icon
                                          I agree to the terms of service
                                          Signed in as (Sign out)
                                          You have left! (?) (thinking…)
                                        • User Cards

                                          User Card pops out when hovering over someones profile picture or display name. It is a small panel presenting a larger version of the user's display image, the user's full display name, and other relevant information about the target. User Cards can be used to provide a way for users to get more information about other community members without interrupting their current task. It is also helpful way to prevent identity-related clutter on the screen.

                                          Extra benefit of using User Cards is that by providing an easy way to get more info about other community members, they make it easier…

                                          2 votes
                                          Vote
                                          Sign in
                                          Check!
                                          (thinking…)
                                          Reset
                                          or sign in with
                                          • facebook
                                          • google
                                            Password icon
                                            I agree to the terms of service
                                            Signed in as (Sign out)
                                            You have left! (?) (thinking…)
                                          • Don't see your idea?

                                          Suggest New Design Patterns

                                          Feedback and Knowledge Base