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 vote and comment on it.

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

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

  1. Mega Drop-Down Navigation Menu

    I got the idea for this pattern from Jakob Nielsen's Alertbox article. According to the article, "Mega drop-down navigation menus" work better than regular drop-downs.

    Read the article here: http://www.useit.com/alertbox/mega-dropdown-menus.html

    93 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…)
    • 55 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…)
      • 40 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…)
        • 29 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…)
          • Field Error Indicator

            Indicate clearly errors on the form.

            24 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…)
            • Inplace Modal

              Modal(Lightbox/thickbox) displays are great to focus users' attention on to a particular task. There are some places where the user needs to be focussed on a particular portion of a web page without losing the context of the surrounding user interface elements. Inplace modal displays a overlay around the user interface element that needs focus.

              Unfortunately, I don't have the application where I am using this idea published yet. But here is a demo of the concept with the jQuery script:

              http://site.ringce.com/code/jQuery/jquery-inplace-modal.html

              18 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 →
              • group/user/role/permission administration

                An administration page for viewing groups, adding a group, viewing group members, adding users, adding users to the group, giving roles (or permissions) to those users

                17 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…)
                • 13 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…)
                  • periodic refresh

                    periodically refresh a page; update displayed data dynamically.

                    12 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…)

                      I hadn’t recognized this as a pattern before you suggested it, thanks. Now when I identified it I see this pattern in use all the time: Gmail, Twitter search, Google Docs etc. But, is this a UI design pattern, or AJAX/coding pattern instead? Or, is this a pattern at all, or rather just part of other patterns? Those are few things I need to consider before turning this idea into a pattern.

                      One more thing: I’m going to focus now more on patterns people need when they make early sketches of the UI, and this pattern is a bit out of the scope. But, after I have finished that theme, I’ll consider this pattern again.

                      Edit: Just found a good screencast example of periodic refresh on Flickr from Designing Web Interfaces: http://flickr.com/photos/designingwebinterfaces/3259238059/

                    • 11 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…)
                      • Matrix

                        Show items in matrix view. This gives visibility to all item attributes and allows easy comparison between items.

                        10 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…)
                        • Assign multiple words from a taxonomy

                          Allow a user to assign a content element (e.g. an image) with a number of words from a hierarchical list.

                          9 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…)
                          • Search result filters

                            Patterns for filtering and reducing the results of a given search.

                            8 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…)
                            • Advanced Controls / RIA Controls

                              In addition to basic input controls, people would probably need a pattern describing more advanced controls.

                              8 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…)
                              • Realtime notifications

                                Ajax same window notification of users actions.

                                7 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…)
                                  under review  ·  1 comment  ·  Admin →
                                • select a global region or a country

                                  graphical pattern for permitting user to select her region or country for purposes of localization/translated sites

                                  6 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…)

                                    This is a very common design problem, but I think noone has patternized this yet. I’ll add it to my to do-list, thanks!

                                  • Pull to refresh on touch devices

                                    On list-based apps on touch devices such as the iPhone, the user is able to "pull" down to refresh the page http://www.usabilitypost.com/2010/07/21/pull-down-to-refresh/ Used in the official Twitter app to retrieve new tweets

                                    5 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…)
                                    • Header/Dropdown product navigation

                                      This is an interesting solution for Header, but it also functions as a dropdown navigation
                                      http://www.sram.com/sram/road/products/sram-red-front-derailleur

                                      5 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…)
                                      • tabbed carousel lists

                                        Multiple small tabs across the top of a function list. tabs represent function groups, list items represent subfunctions. Conceptually similar to the windows menu line but with all sublist items fitting in the same list box space - transition between lists carousel fashion for pizazz!

                                        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 →

                                          Do you happen to know any Website that is using this pattern? I’d be interested to see an example how it works.

                                        • global search field gets bigger

                                          The global site search field on some sites expand on entry. This keeps the search field small until needed, and visually unobtrusive, and makes it more welcoming for typing search criteria when needed.

                                          See
                                          * http://ux.stackexchange.com/
                                          * http://apple.com/
                                          * http://telstra.com/

                                          Also, the expanded search field might occlude alternative functions being disregarded by the user's choice to use global search -- see ux.stackexchange for example.

                                          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 →
                                          ← Previous 1 3 4
                                          • Don't see your idea?

                                          Suggest New Design Patterns

                                          Feedback and Knowledge Base