{"id":18255,"date":"2019-11-07T15:05:33","date_gmt":"2019-11-07T15:05:33","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=18255"},"modified":"2020-09-03T12:06:27","modified_gmt":"2020-09-03T11:06:27","slug":"ux-inspiration-the-jerrycan","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/ux-inspiration-the-jerrycan\/","title":{"rendered":"UX inspiration from history: the Jerrycan"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">For a long time, people did not need to think about radically different design of fuel canisters. Up until 1938 people used square, rounded and even triangle-like jerry cans. If you look back in history, few people might need to transport huge fuel reserves in canisters of 20 litres or so.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In 1936, Germany created a secret project to build a universal canister for Wehrmacht. As a result, one of the greatest masterpieces of industrial design was created and copied by other armies and can be set as an example of the fantastic user experience design to this day.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Let\u2019s take a close look at the main differences and features of this design, what advantages it has and why even after 80 years from the moment of creation it is still in use. What we can learn from it and what we can borrow to the digital world.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">The Shape<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1ZEgoPSGFjzTKt8hl-Ea5CA.jpeg\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1ZEgoPSGFjzTKt8hl-Ea5CA.jpeg\" alt=\"Yellow Jerry Can\" width=\"1658\" height=\"900\" \/><\/a><br \/>\nThe jerrycan has the shape of the parallelepiped, and it is easily transportable in large quantities without risk. As you can see in the picture below the German troops had to carry fuel in vast amounts, and that\u2019s why the design had to be as ergonomic as possible. This design allows you to fold up to five jerrycans by stacking them one on top of the other. Rounded corners reduce the probability of damage to the canister itself and surrounding objects. Also, the jerrycan can be easily attached to a car or a tank. This feature allowed to have one kind of canister for all types of troops. Plus, it saved a lot of money in production. The production of the body shape is two halves which are welded to each other to prevent leaks.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The design of the shape teaches us a few things:<\/strong><br \/>\n1. Use less details as possible to reduce the cost and simplify the design in production.<br \/>\n2. Do not overcomplicate your product. (Despite the fact the American version of jerrycan had a more accessible way of cleaning and faster emptied and filled it wasn\u2019t successful because of a large number of seams it flowed heavily.)<br \/>\n3. Start with one product in the line. (At that time there was only one size of the jerrycan \u2014 20 litres. They didn\u2019t start with 3 different formats like nowadays: small, medium and large. Later on, this canister has been modified and more sizes appeared.)<a><br \/>\n<\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-18269 size-medium aligncenter\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/0_8XT7ceDrGGZ5Y4MZ-600x383.jpeg\" alt=\"\" width=\"600\" height=\"383\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2019\/10\/0_8XT7ceDrGGZ5Y4MZ-600x383.jpeg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2019\/10\/0_8XT7ceDrGGZ5Y4MZ.jpeg 640w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Steel was the primary material that was used to create canisters at that time. Today, factories are using plastic and various kinds of polymers which make canisters more durable and lightweight. Besides, at that time metal was a very cheap production material for making millions of jerrycans.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a><img class=\"aligncenter size-full wp-image-6580\" title=\"\" alt=\"\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img class=\"size-full\" title=\"\" alt=\"\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1_tR8vYBQsDFC_MpeIJjZdg.jpeg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1_tR8vYBQsDFC_MpeIJjZdg.jpeg\" title=\"\" alt=\"\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Also, you can see a concavity on the sides of the jerrycan; it increases the rigidity and prevents deformation of the entire structure. Additionally, as I mentioned earlier, it has rounded corners, and it\u2019s not for beauty. Rounded corners are adding safety to the construction and prevent it from damaging people and other objects. So, as you see this is a very thoughtful UX solution which prevents us from some future problems during transportation. I would encourage you to do the same with interface design, problem solution first and only after we can add beauty to it. I would bet there were no people at that time who would say: \u201cWhat a beautiful jerrycan\u201d but a lot of people who have said: \u201cThis is a handy thing.\u201d<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a><img class=\"aligncenter size-full wp-image-6580\" title=\"\" alt=\"\" \/><\/a><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">The Handle<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1GGerYFsIlTrFPGGPsfJ1Ig.jpeg\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-6580 size-full\" title=\"image from commons.wikimedia.org\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1GGerYFsIlTrFPGGPsfJ1Ig.jpeg\" alt=\"3 handles on top allowing one and two people to carry\" width=\"1991\" height=\"1290\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The next is the handles of the canister. This part demonstrates the perfectly thought out user experience design and full understanding of how to assemble this object in production. In the picture above you can see that the canister has three handles in one.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Suppose you are strong enough to carry a full jerry can of gasoline, but if you need help you can always ask another person to help you by using the second handle. In other words, two strong people will be able to carry 3 canisters at the same time. As we can see, the design of the handle was maximally tailored to the needs of the army where time was a valuable resource and moving canisters from one place to another could take more time by using handle just for one person. Also, having three handles will give us the ability to move empty canisters much faster. In this case, each person can have up to four empty jerrycans in hands.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The best about handle that it\u2019s fully replaceable part. You can detach it by using welding as well as attach it to another jerrycan. So, we can see that the handler is a reusable part of the canister and it gives us a lot of flexibility in fixing. The handle reminds me React library where you have a lot of flexibility with components. For the canister, engineers came up with literally all the option that can happen to the jerrycan. They knew that the weakest place of the jerrycan is the bottom part. Usually, canisters have been placed on the wet ground and because of that metal bottom could rust and in this case, you could easily reuse the handle by detaching from one jerrycan and reuse it in another place.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a><img class=\"aligncenter size-full wp-image-6580\" title=\"\" alt=\"\" \/><\/a><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">The Cap<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1_hIc_YOPNCinIB-Zv2nOrw.jpeg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1_hIc_YOPNCinIB-Zv2nOrw.jpeg\" alt=\"image by retrozakaz\" width=\"1991\" height=\"1290\" \/><\/a><\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A canister cap is also a work of art. The lid itself performs the same function as the triple handle \u2014 it saves a tremendous amount of time when opening and closing the canister. Before this mechanism appeared, all jerrycans used a classic screw cap that you can see on each water bottle in stores today. Plus, this design has better endurance compared to screw cap which has the way of being erased from frequent use.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Summary<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">As we can see every piece of this object has been created for the convenience of people, who will use it. I think that creatives who are designing interfaces can learn a lot from this design. Sometimes we are to attached to the visual side of the interface, and we forget about the practical side. And let\u2019s do not forget about the fact that this is a physical object that has to be created once and then produced in large amounts. But in the digital world, we can test our solutions in one click and make changes instantly.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Originally posted on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/uxdesign.cc\/ux-inspiration-from-history-01-jerrycan-5890bf815961\">Taras' Medium<\/a> page.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>For a long time, people did not need to think about radically different design of fuel canisters. Up until 1938 people used square, rounded and even triangle-like jerry cans. If you look back in history, few people might need to transport huge fuel reserves in canisters of 20 litres or so. In 1936, Germany created a secret project to build&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/ux-inspiration-the-jerrycan\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":299,"featured_media":18346,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[499],"tags":[],"class_list":["post-18255","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"description\" content=\"The design of jerrycan of the 1938 model which is an example of great industrial design and how UX should be applied to products\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marvelapp.com\/blog\/ux-inspiration-the-jerrycan\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UX inspiration from history: the Jerrycan | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"The design of jerrycan of the 1938 model which is an example of great industrial design and how UX should be applied to products\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/ux-inspiration-the-jerrycan\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2019-11-07T15:05:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-09-03T11:06:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2019\/10\/20.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"700\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"4 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/marvelapp.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/ux-inspiration-the-jerrycan\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2019\/10\/20.png\",\"width\":1600,\"height\":700},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/ux-inspiration-the-jerrycan\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/ux-inspiration-the-jerrycan\/\",\"name\":\"UX inspiration from history: the Jerrycan | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/ux-inspiration-the-jerrycan\/#primaryimage\"},\"datePublished\":\"2019-11-07T15:05:33+00:00\",\"dateModified\":\"2020-09-03T11:06:27+00:00\",\"description\":\"The design of jerrycan of the 1938 model which is an example of great industrial design and how UX should be applied to products\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/ux-inspiration-the-jerrycan\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/ux-inspiration-the-jerrycan\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/ux-inspiration-the-jerrycan\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/873d787c06c6c17c8572ec45752d6137\"},\"headline\":\"UX inspiration from history: the Jerrycan\",\"datePublished\":\"2019-11-07T15:05:33+00:00\",\"dateModified\":\"2020-09-03T11:06:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/ux-inspiration-the-jerrycan\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/ux-inspiration-the-jerrycan\/#primaryimage\"},\"articleSection\":\"User Experience\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/ux-inspiration-the-jerrycan\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/873d787c06c6c17c8572ec45752d6137\",\"name\":\"Taras Savytskyi\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abb5c6f001c03c78aff30ffed282cac0dc0faf70f2ea026bcdaf1e413429e601?s=96&d=mm&r=g\",\"caption\":\"Taras Savytskyi\"},\"description\":\"Senior Product Designer at Statflo | taras.link\",\"sameAs\":[\"http:\/\/taras.link\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/18255","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/users\/299"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=18255"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/18255\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/18346"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=18255"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=18255"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=18255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}