{"id":4261,"date":"2018-01-31T17:12:26","date_gmt":"2018-01-31T14:12:26","guid":{"rendered":"https:\/\/tubikstudio.com\/?p=4261"},"modified":"2023-07-24T11:56:36","modified_gmt":"2023-07-24T11:56:36","slug":"ui-experiments-options-for-recipe-cards-in-a-food-app","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/ui-experiments-options-for-recipe-cards-in-a-food-app\/","title":{"rendered":"UI Experiments: Options for Recipe Cards in a Food\u00a0App"},"content":{"rendered":"

Good food is a good mood – for most people that has been true for decades and centuries. Taking up the big part of human time and activity, no wonder food became one of the hot topics in tech progress. There is a whole bunch of mobile and web interfaces solving a diversity of problems connected with food: websites and applications for cafes and restaurants, recipe apps<\/a> and social networks, food ordering, and food delivery apps. Whatever is the goal behind UI design for a food app, that\u2019s cool when it\u2019s not only helpful but also delicious and attractive.<\/span><\/p>\n

Earlier we have already shared numerous ideas on interface design for this theme. Today let us present a fresh food app design case study, this time concentrated on several recipe card concepts. In this project, Tubik designers Anton Morozov, Ernest Asanov, and Vlad Taran took a chance of UI experiments and analysis for a variety of approaches to content and navigation of recipe cards.<\/span><\/p>\n

\"information<\/p>\n

Project<\/span><\/h2>\n

 <\/p>\n

UI design of a mobile application on cooking and recipes<\/span><\/p>\n

 <\/p>\n

Introduction<\/span><\/h2>\n

In general terms, the designers got the task to design a food app for users who love cooking. It included the recipe database which was constantly updated. Also, the application had a supplies manager. To make UX more extended, it allowed users to find the recipes on the basis of the supplies they currently had at home or create a shopping list to buy ingredients that were missing.<\/span><\/p>\n

According to the brief which presented the client\u2019s preferences, the food app design had to include the following functionality.<\/span><\/p>\n

Required Features<\/strong><\/span>
\n1. Search bar<\/a><\/span>
\n2. Filter button (Information about the number of results and applied filters)<\/span>
\n3. Recipe cards (Recipe picture + Title)<\/span><\/p>\n

Optional Ideas<\/strong><\/span>
\n\u2022 Ratio of ingredients you have to the total number the recipe requires<\/span>
\n\u2022 Cook time<\/span>
\n\u2022 Calories<\/span>
\n\u2022 X button to hide that recipe and show fewer recipes like that<\/span>
\n\u2022 Add to shopping list button<\/span>
\n\u2022 Like \/ save button<\/span>
\n\u2022 Recipe author and his\/her profile picture<\/span>
\n\u2022 Review score<\/span>
\n\u2022 Favorite count<\/span>
\n\u2022 Main ingredients<\/span>
\n\u2022 Share<\/span>
\n\u2022 Direct link to view the recipe source<\/span>
\n\u2022 Consider what type of layout for the recipe feed will work best, grid vs single column.<\/span><\/p>\n

 <\/p>\n

Problem<\/span><\/h2>\n

The client provided the team with a lot of information and ideas on the main screen. The designers had to analyze and prioritize all the points, as there was a high risk of overloading the screen. On the basis of research and analysis, the user scenarios were created to determine which information about the meal in the recipe is found the most important.<\/span><\/p>\n

 <\/p>\n

Solutions exploration: benefits and pitfalls<\/span><\/h2>\n

The designers worked out several options for recipe cards presentation which would effectively present the core data on the limited space of a mobile screen<\/a>. Considering that the recipe card presented the key element of interaction in this app, the final decision had to be grounded on the balance of logic and emotion, effective navigation<\/a>, and aesthetic satisfaction. Having tried different directions, the designers defined three various options of content and controls placement in the layout.\u00a0 Among them, the creative team had to choose the variant corresponding to target audience expectations. Here are the options.<\/span><\/p>\n

 <\/p>\n

\u0430) Recipes shown as a list<\/span><\/h3>\n

Benefits<\/strong>: more content can be shown on the screen.<\/span><\/p>\n

Pitfalls<\/strong>: the photo content looks too small.<\/span><\/p>\n

\"ui<\/p>\n

 <\/p>\n

b) Recipes <\/span>shown as cards (like Pinterest)<\/span><\/h3>\n

 <\/p>\n

Benefits<\/strong>: the dynamic height of the cards allows for placing photos of any layout metrics and headlines of any length<\/span><\/p>\n

Pitfalls<\/strong>: the column for notes and additional elements is too narrow. Card manipulations such as adding ingredients into the shopping list, hiding similar recipes and sharing the recipes to social networks led to applying the long-press\/force touch which was not the most obvious solution for users.<\/span><\/p>\n

\"recipe<\/p>\n

c) Big recipe cards<\/span><\/h3>\n

Benefits<\/strong>: photo content attracts maximum attention<\/span>
\nPitfalls<\/strong>: the screen features only one recipe, the additional functionality still isn\u2019t obvious for users.<\/span><\/p>\n

\"recipe<\/p>\n

Final solution<\/span><\/h2>\n

The creative team preferred the emotional variant. Coming out to the market, the product has to be ultimately attractive. That will enable the creators to collect the feedback and analytics data which can be used as a basis for the next stage of the creative search for solutions enhancing user experience. Unobtrusive and elegant animation during the first interaction will prompt about the additional functionality that is hidden under the card and available on swipe down.<\/span><\/p>\n

 <\/p>\n

Additional details: filters placement<\/span><\/h2>\n

The filter panel allows a user to sort out the list of recipes. The user can apply pre-sets: for example the preset \u201ccook\u201d shows only the recipes based on the ingredients currently available for the user. Also, the filters can be manually customized. The panel is placed in the bottom part of the screen to add more convenience to the operations with the app by one hand.<\/span><\/p>\n

\"recipe<\/p>\n

Bottom line<\/span><\/h2>\n

In Apple<\/a>, they say: \u201c…the first thing we ask is what do we want people to feel?\u201d Not everyone considers the issues connected to users\u2019 feelings and emotions before they start creating a new digital product. Today most designers strive for functionality. However, when people\u2019s feelings and emotions become a priority, the product gets the features and details which let the users love it.<\/span><\/p>\n

Recommended reading<\/span><\/h2>\n

If you\u00a0are interested to see more practical case studies with creative flows for\u00a0UI\/UX\u00a0design, here is the set of them.<\/span><\/p>\n

Watering Tracker. UI for Home Needs<\/a><\/span><\/p>\n

Home Budget App. UI for Finance<\/a><\/span><\/p>\n

Night in Berlin. UI for Event App<\/a><\/span><\/p>\n

Big City Guide. Landing Page Design<\/a><\/span><\/p>\n

Vinny\u2019s Bakery. UI Design for E-Commerce<\/a><\/span><\/p>\n

Upper App. UI Design for To-Do List<\/a><\/span><\/p>\n

Health Care App. UI for Doctors<\/a><\/span><\/p>\n

Wedding Planner. UI Design Concept<\/a><\/span><\/p>\n

Toonie Alarm. Mobile App UI Design<\/a><\/span><\/p>\n

SwiftyBeaver. UX\/UI Design for a Mac Application<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

The case study presenting the part of UX design flow for a food app: layouts and animation showing benefits and pitfalls of various recipe cards in mobile UI. <\/p>\n","protected":false},"author":3,"featured_media":10262,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2,4,7,9],"tags":[447,463,468,16,469,20,479,57,482,100,485,144,487,147,489,256,491,319,502,324,504,331,515,336,365,440],"coauthors":[],"class_list":["post-4261","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation","category-case_study","category-processes_and_tools","category-ui_ux","tag-tubik-studio","tag-ui-design-article","tag-ui-design-process","tag-animation","tag-ui-design-tips","tag-app-design","tag-usability","tag-case-study","tag-user-experience","tag-design","tag-user-experience-design","tag-design-services","tag-user-experience-design-process","tag-design-studio","tag-user-experience-examples","tag-interaction-design","tag-user-interface","tag-mobile-app","tag-ux","tag-mobile-design-inspiration","tag-ux-design-article","tag-mobile-ui","tag-uxui","tag-motion-design","tag-product-design","tag-tubik"],"acf":[],"yoast_head":"\nUI Experiments: Options for Recipe Cards in a Food\u00a0App.<\/title>\n<meta name=\"description\" content=\"The case study presenting the part of UX design flow for a food app: layouts and animation showing benefits and pitfalls of various recipe cards in mobile UI.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tubikstudio.com\/blog\/ui-experiments-options-for-recipe-cards-in-a-food-app\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UI Experiments: Options for Recipe Cards in a Food\u00a0App.\" \/>\n<meta property=\"og:description\" content=\"The case study presenting the part of UX design flow for a food app: layouts and animation showing benefits and pitfalls of various recipe cards in mobile UI.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tubikstudio.com\/blog\/ui-experiments-options-for-recipe-cards-in-a-food-app\/\" \/>\n<meta property=\"og:site_name\" content=\"Tubik Blog: Articles About Design\" \/>\n<meta property=\"article:published_time\" content=\"2018-01-31T14:12:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-24T11:56:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/01\/UI-design-food-app-tubik.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"1000\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Marina Yalanska\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marina Yalanska\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/ui-experiments-options-for-recipe-cards-in-a-food-app\/\",\"url\":\"https:\/\/tubikstudio.com\/blog\/ui-experiments-options-for-recipe-cards-in-a-food-app\/\",\"name\":\"UI Experiments: Options for Recipe Cards in a Food\u00a0App.\",\"isPartOf\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/ui-experiments-options-for-recipe-cards-in-a-food-app\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/ui-experiments-options-for-recipe-cards-in-a-food-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/01\/UI-design-food-app-tubik.jpg\",\"datePublished\":\"2018-01-31T14:12:26+00:00\",\"dateModified\":\"2023-07-24T11:56:36+00:00\",\"author\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\"},\"description\":\"The case study presenting the part of UX design flow for a food app: layouts and animation showing benefits and pitfalls of various recipe cards in mobile UI.\",\"breadcrumb\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/ui-experiments-options-for-recipe-cards-in-a-food-app\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tubikstudio.com\/blog\/ui-experiments-options-for-recipe-cards-in-a-food-app\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/ui-experiments-options-for-recipe-cards-in-a-food-app\/#primaryimage\",\"url\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/01\/UI-design-food-app-tubik.jpg\",\"contentUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/01\/UI-design-food-app-tubik.jpg\",\"width\":1500,\"height\":1000,\"caption\":\"UI design food app tubik\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/ui-experiments-options-for-recipe-cards-in-a-food-app\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tubikstudio.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"UI Experiments: Options for Recipe Cards in a Food\u00a0App\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\",\"url\":\"https:\/\/tubikstudio.com\/blog\/\",\"name\":\"Tubik Blog: Articles About Design\",\"description\":\"Tubik Studio\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\",\"name\":\"Marina Yalanska\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"caption\":\"Marina Yalanska\"},\"url\":\"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"UI Experiments: Options for Recipe Cards in a Food\u00a0App.","description":"The case study presenting the part of UX design flow for a food app: layouts and animation showing benefits and pitfalls of various recipe cards in mobile UI.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/tubikstudio.com\/blog\/ui-experiments-options-for-recipe-cards-in-a-food-app\/","og_locale":"en_US","og_type":"article","og_title":"UI Experiments: Options for Recipe Cards in a Food\u00a0App.","og_description":"The case study presenting the part of UX design flow for a food app: layouts and animation showing benefits and pitfalls of various recipe cards in mobile UI.","og_url":"https:\/\/tubikstudio.com\/blog\/ui-experiments-options-for-recipe-cards-in-a-food-app\/","og_site_name":"Tubik Blog: Articles About Design","article_published_time":"2018-01-31T14:12:26+00:00","article_modified_time":"2023-07-24T11:56:36+00:00","og_image":[{"width":1500,"height":1000,"url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/01\/UI-design-food-app-tubik.jpg","type":"image\/jpeg"}],"author":"Marina Yalanska","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Marina Yalanska","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tubikstudio.com\/blog\/ui-experiments-options-for-recipe-cards-in-a-food-app\/","url":"https:\/\/tubikstudio.com\/blog\/ui-experiments-options-for-recipe-cards-in-a-food-app\/","name":"UI Experiments: Options for Recipe Cards in a Food\u00a0App.","isPartOf":{"@id":"https:\/\/tubikstudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tubikstudio.com\/blog\/ui-experiments-options-for-recipe-cards-in-a-food-app\/#primaryimage"},"image":{"@id":"https:\/\/tubikstudio.com\/blog\/ui-experiments-options-for-recipe-cards-in-a-food-app\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/01\/UI-design-food-app-tubik.jpg","datePublished":"2018-01-31T14:12:26+00:00","dateModified":"2023-07-24T11:56:36+00:00","author":{"@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f"},"description":"The case study presenting the part of UX design flow for a food app: layouts and animation showing benefits and pitfalls of various recipe cards in mobile UI.","breadcrumb":{"@id":"https:\/\/tubikstudio.com\/blog\/ui-experiments-options-for-recipe-cards-in-a-food-app\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tubikstudio.com\/blog\/ui-experiments-options-for-recipe-cards-in-a-food-app\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/ui-experiments-options-for-recipe-cards-in-a-food-app\/#primaryimage","url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/01\/UI-design-food-app-tubik.jpg","contentUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/01\/UI-design-food-app-tubik.jpg","width":1500,"height":1000,"caption":"UI design food app tubik"},{"@type":"BreadcrumbList","@id":"https:\/\/tubikstudio.com\/blog\/ui-experiments-options-for-recipe-cards-in-a-food-app\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tubikstudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"UI Experiments: Options for Recipe Cards in a Food\u00a0App"}]},{"@type":"WebSite","@id":"https:\/\/tubikstudio.com\/blog\/#website","url":"https:\/\/tubikstudio.com\/blog\/","name":"Tubik Blog: Articles About Design","description":"Tubik Studio","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f","name":"Marina Yalanska","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd","url":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","caption":"Marina Yalanska"},"url":"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/"}]}},"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/4261","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/comments?post=4261"}],"version-history":[{"count":4,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/4261\/revisions"}],"predecessor-version":[{"id":14482,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/4261\/revisions\/14482"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media\/10262"}],"wp:attachment":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media?parent=4261"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/categories?post=4261"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/tags?post=4261"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/coauthors?post=4261"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}