Choosing Patterns for use in Recipe Finder

So I have done some perusing of sites that outline key User Interface patterns and I wanted to talk about them in coordination with my Recipe Finder project.

15 Common Component Patterns

  • Add Another – I really like this pattern for what it can bring me with the ingredients list. I want to implement a way in which the ingredients can individually add in the amount, type and measure into an ingredient, but there needs to be a simple way to add and remove ingredients. This pattern could provide that.
  • Add/Manage Tags – I like this pattern so that it is easy for users to tag their recipes for search capabilities. I also know this pattern is implemented in Boostrap which I may choose to customize that portion into my project.
  • Add/Edit or Select from Existing – this pattern is interesting and could prove useful on things like the units of measurement. So there would be a selection drop down for unit of measure, but if you don’t see it in the list, you could add your own measurement into it.

10 UI Design Patterns You Should Be Paying Attention To

  • Progressive Disclosure – this is one of my favorite patterns and can be very useful for Responsive Web Design, so that users can only fill in the vital parts of a recipe, but can always add extra information if need be later, or twirl down a drop down to enter information like summary, yield, or tags as extra information that may not be used in the essentials of a program.
  • Clear Primary Actions – I really like the idea of using color to display to the user if their form is ready to be submitted (all required fields filled in). Also for users that cannot use color (color blindness) I would like to display some sort of text along with it to clearly show someone their form is ready for submission.
  • Required Field Marker – just like the previous pattern, this one is clearly needed to display which fields are required to be submitted.
  • Hover Controls – this can be useful, however since it will be a mobile app, probably use clicks or touch events over hover. But this can also be useful for Responsive Web Design, saving real estate where needed.

15 UI Design Patterns Web Designers Should Keep Handy

  • Page Grids – I definitely want to use grids, to make it easy to clearly separate sections of my site and making it easy to move grids vertically when vertical space is only space available for display.
  • Modular Tabs – I definitely like this pattern for my project simply to make it clear what section the user is in. Create Recipe  *  My Recipes  *  Friends Recipes * Public Recipes
    are all likely candidates for menu options to allow people to know what section they are in.
  • Pagination – this might also be a Bootstrap candidate. However I do think on pages that list multiple recipes or images of recipes, pagination could make it easy for a user to traverse a lot of recipes at once.


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>