UI Patterns

http://patterntap.com/ - Pattern Tap
http://developer.yahoo.com/ypatterns/ - Yahoo! Design Pattern Library
http://ui-patterns.com/ - UI-patterns.com

http://www.sitepoint.com/examples-mobile-design-patterns/ - done reading
http://www.sitepoint.com/examples-mobile-design-pattern-part-2/ - done reading
http://www.sitepoint.com/examples-mobile-design-anti-patterns/ - done reading

  1. Keep the number of fields in your form (especially registration form) to the minimal. Users are a bit defensive about giving you their information. Only collect information that you really need.
  2. Scoped Search: This is a type of pattern that lets you select criteria or filters before starting your specific search. You can choose to search in different folders before or after clicking on the search button. It is a simple, fast and good possibility to get quickly to the wanted result. The search box on Amazon has a drop-down select box that allows you to select the categories that you want to search in.
  3. Search with auto-complete: This is probably the most used search pattern in mobile (but also web) applications. When you start writing what you intend to search, the system displays a set of possible results. This shows what other people previously search. This also allows the user to quickly complete his or her search by quickly choosing appropriate option.
  4. Saved and recent searches: This is undoubtedly a very useful pattern that makes it simple to select from previous searches and respects the users’ known behavior. In fact, in this way they wont’t have to replicate the same keywords or choose the search criteria because their searches are already saved in the system.
  5. Gallery: Pinterest app itself is organized on a grid system. Images followed by the title and the author of the pin are displayed one next to the other in a vertical sense, so that the user can see more content simply by scrolling down. If he wants to see an image more in detail, he just has to tap on it and then he’ll have the possibility to pin it himself, add a comment, send it and so on. Galleries are the best solution to show multiple content in less space.
  6. Dialog
  7. Tooltip
  8. Tour
  9. video demos
  10. colorful in-screen messages instead of modal dialogs.
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License