{"id":4374,"date":"2017-10-16T14:52:51","date_gmt":"2017-10-16T13:52:51","guid":{"rendered":"https:\/\/dev.popcomms.com\/pop\/?p=4374"},"modified":"2021-10-25T10:26:55","modified_gmt":"2021-10-25T09:26:55","slug":"start-creating-interactive-touchscreen-experience-business","status":"publish","type":"post","link":"https:\/\/dev.popcomms.com\/pop\/start-creating-interactive-touchscreen-experience-business\/","title":{"rendered":"Where to start when creating an interactive touchscreen experience for your business"},"content":{"rendered":"\n<p><span style=\"font-weight: 400;\">Wondering how you should go about creating an <a href=\"https:\/\/dev.popcomms.com\/pop\/touchscreen-experiences\/\" target=\"_blank\" rel=\"noreferrer noopener\">immersive touchscreen experience<\/a> for your business? <\/span><\/p>\n\n\n\n<p>If you\u2019re anything like many of our clients who first come to us, you may have a lot of questions in your head, such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><span style=\"font-weight: 400;\">How do I know I definitely need a touchscreen?<\/span><\/li><li><span style=\"font-weight: 400;\">Is it simply nice to have or will it help me generate business?<\/span><\/li><li><span style=\"font-weight: 400;\">How will I be able to demonstrate ROI?<\/span><\/li><li>What are the benefits of interactives to me and our customers?<\/li><li><span style=\"font-weight: 400;\">What sort of things can I put on a touchscreen?<\/span><\/li><li><span style=\"font-weight: 400;\">Can\u2019t I just stick my website on one and let people use that?<\/span><\/li><li><a href=\"https:\/\/dev.popcomms.com\/pop\/how-much-should-an-interactive-touchscreen-solution-cost\/\" data-type=\"post\" data-id=\"7357\"><span style=\"font-weight: 400;\">What are the costs<\/span><\/a><span style=\"font-weight: 400;\"> &#8211; is it going to be expensive?<\/span><\/li><li><span style=\"font-weight: 400;\">How easy are they to use and maintain &#8211; can I update it?<\/span><\/li><\/ul>\n\n\n\n<p>And so many more! It can be a bit overwhelming, however, we can assure you that touchscreen experiences are definitely worth investing in as long as you go about it in the right way.<\/p>\n\n\n\n<p>As a starting point, we thought we\u2019d put together this blog to give you a better idea of where to begin when thinking of creating an interactive touchscreen experience.<\/p>\n\n\n\n<h2 class=\"has-pop-pink-color has-text-color wp-block-heading\"><span style=\"font-weight: 400; color: #f2168f;\">Think carefully about your audience and goals<\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">In the very early stages of developing a touchscreen experience, the first thing you need to do is consider why you need it in the first place. If you\u2019re a business, what are your objectives? Perhaps you want to inform, educate, raise awareness of your brand or win new business and capture leads. <\/span><\/p>\n\n\n\n<p>It\u2019s also important to think about the people who will be using your touchscreen experience. Who are they? How do they like to interact with technology? What will pique their interest? What information are they after?<\/p>\n\n\n\n<h2 class=\"has-pop-pink-color has-text-color wp-block-heading\"><span style=\"font-weight: 400; color: #f2168f;\">There are two main parts to an interactive touchscreen experience<\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">A touchscreen is made up of two parts; the <\/span><b>visual experience<\/b><span style=\"font-weight: 400;\"> (the content, images and video etc. that you interact with) and the hardware (the screen itself).<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Think of it like looking at a website &#8211; the website itself is the visual experience and you need <\/span><b>hardware <\/b><span style=\"font-weight: 400;\">(like a PC or Mac) to view it.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"724\" src=\"https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2017\/10\/Popcomms_Touchscreen_hardware-software.jpg\" alt=\"\" class=\"wp-image-10226\" srcset=\"https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2017\/10\/Popcomms_Touchscreen_hardware-software.jpg 1024w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2017\/10\/Popcomms_Touchscreen_hardware-software-300x212.jpg 300w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2017\/10\/Popcomms_Touchscreen_hardware-software-768x543.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>As you may have guessed, the visual experience is the most important part as it needs to keep your audience engaged, and help them find the information they want in a fun, informative and visually enticing way.<\/p>\n\n\n\n<p>If they find the experience difficult to use or can\u2019t find what they want, then they\u2018ll walk away.<\/p>\n\n\n\n<h2 class=\"has-pop-pink-color has-text-color wp-block-heading\"><span style=\"font-weight: 400; color: #f2168f;\">The visual experience<\/span><\/h2>\n\n\n\n<p>As mentioned above, you\u2019ll want to think about your business objectives and how these can be achieved through the experience, and equally important is the experience that you want your customers to have.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/04\/touchscreen-interactive-construction-touchtable-ebbsfleet-popcomms-6-1024x640.jpg\" alt=\"\" class=\"wp-image-255\" srcset=\"https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/04\/touchscreen-interactive-construction-touchtable-ebbsfleet-popcomms-6-1024x640.jpg 1024w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/04\/touchscreen-interactive-construction-touchtable-ebbsfleet-popcomms-6-300x188.jpg 300w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/04\/touchscreen-interactive-construction-touchtable-ebbsfleet-popcomms-6-768x480.jpg 768w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/04\/touchscreen-interactive-construction-touchtable-ebbsfleet-popcomms-6-1536x960.jpg 1536w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/04\/touchscreen-interactive-construction-touchtable-ebbsfleet-popcomms-6.jpg 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">At the very least you\u2019ll want to leave them with a positive and memorable experience; but what sort of things do you need to consider?<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Will you need to update the content of your experience regularly?<\/span><\/li><li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">What impression do you want to leave your customers with?<\/span><\/li><li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Will your experience be a permanent fixture, or only for a short event?<\/span><\/li><li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">What sort of things would you like to see on your touchscreen, video, 3d models, links to web pages and other interactive content? <\/span><\/li><li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Does it need to interact with other things on the internet, or other software such as an online demo or data on a company server? <\/span><\/li><li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Are you looking to capture user information, such as contact details or analytics? <\/span><\/li><\/ul>\n\n\n\n<p>These are just some of the questions you\u2019ll need to think about. You\u2019ll then have to design an experience to achieve your goals, and in order to do this you\u2019ll need to consider the experience and how your visitors will interact with your experience.<\/p>\n\n\n\n<p>Here are a few things you should really consider when looking at the visual experience:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><b>Design for different levels of engagement<\/b><span style=\"font-weight: 400;\"> &#8211; you have to take into consideration that people have different attention spans. Some may want to spend time engaging with your experience and exploring, while others may just want to get quick bits of &nbsp;information<\/span><\/li><li><b>Be concise<\/b><span style=\"font-weight: 400;\"> &#8211; People are busy, and at exhibitions they have a lot to do, so be concise with your messaging; get to the point and don\u2019t over complicate your content<\/span><\/li><li><b>Don\u2019t worry too much about the technology &#8211; <\/b>With a good experience, people won\u2019t notice the technology behind it, so don\u2019t get hung up on this; it\u2019s the experience that matters. Leave the technology to your developer<\/li><li><b>Ease of use<\/b><span style=\"font-weight: 400;\"> &#8211; Your experience has to be easy to use, and obvious as to what the user has to do. Minimal design is great but people really need a little extra help with large touchscreens, so include navigational text. Navigation should be large and obvious with clear back navigation. <\/span><\/li><li><b>Seamless design<\/b><span style=\"font-weight: 400;\"> &#8211; Ugly design will put customers off, and also makes content hard to digest. A well-designed experience is pleasing on the eye, and draws people in; it engages and helps them to explore and stay longer<\/span><\/li><li><b>Make it surprising<\/b><span style=\"font-weight: 400;\"> &#8211; The brain gets easily bored and starts to wander, so it\u2019s important that it is kept attentive. By including enough interest and surprise, even if subtle such as simple animations, it helps to keep people engaged<\/span><\/li><li><b>Clean and simple<\/b><span style=\"font-weight: 400;\"> &#8211; Don\u2019t make people think too hard, or give them too many choices; &nbsp;clutter on the screen is confusing and will put people off<\/span><\/li><li><b>Big obvious buttons<\/b><span style=\"font-weight: 400;\"> &#8211; The bigger the screen, the bigger the buttons and content need to be. If the buttons are small on a big screen, people don\u2019t notice them and content becomes lost and confusing <\/span><\/li><li><b>It\u2019s not a workout &#8211; <\/b>If you\u2019re using a really big touchscreen like 65\u201d and larger, try not to put touchpoints all over the place, otherwise, people are going to have to reach to touch them and they won\u2019t do it after a couple of goes.<\/li><\/ul>\n\n\n\n<p>This may sound like a lot to take in, but we can\u2019t emphasise enough how important these elements are. So often, we see touchscreens that aren\u2019t being used because of the experience, and this is a waste of your time and money invested in developing the experience in the first place.<\/p>\n\n\n\n<p>If you\u2019re going to use a touchscreen agency to help develop the experience, then they will take all these considerations into account for you &#8211; we\u2019ll talk about this later in the blog.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/06\/touchscreen-interactive-multitouch-technology-touchtable-arm-popcomms-1-1024x640.jpg\" alt=\"\" class=\"wp-image-8426\" srcset=\"https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/06\/touchscreen-interactive-multitouch-technology-touchtable-arm-popcomms-1-1024x640.jpg 1024w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/06\/touchscreen-interactive-multitouch-technology-touchtable-arm-popcomms-1-300x188.jpg 300w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/06\/touchscreen-interactive-multitouch-technology-touchtable-arm-popcomms-1-768x480.jpg 768w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/06\/touchscreen-interactive-multitouch-technology-touchtable-arm-popcomms-1-1536x960.jpg 1536w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/06\/touchscreen-interactive-multitouch-technology-touchtable-arm-popcomms-1.jpg 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"has-pop-pink-color has-text-color wp-block-heading\"><span style=\"font-weight: 400; color: #f2168f;\">Choosing your hardware <\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Once you have a better idea of the type of experience you want to create for your visitors, it\u2019s then time to start looking at hardware options. <\/span><\/p>\n\n\n\n<p>These might include:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Tables<\/span><\/li><li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Kiosks<\/span><\/li><li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Lectern style<\/span><\/li><li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Giant iTab<\/span><\/li><li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Outdoor<\/span><\/li><li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Videowalls<\/span><\/li><li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">iPads <\/span><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"724\" src=\"https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2017\/05\/Popcomms_Touchscreen_what-are-the-options_02.jpg\" alt=\"\" class=\"wp-image-10215\" srcset=\"https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2017\/05\/Popcomms_Touchscreen_what-are-the-options_02.jpg 1024w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2017\/05\/Popcomms_Touchscreen_what-are-the-options_02-300x212.jpg 300w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2017\/05\/Popcomms_Touchscreen_what-are-the-options_02-768x543.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">You should also think about the space your touchscreen will be going into, and what will be around it &#8211; as well as any other branding that will be there. You might also need to make it obvious that people can go up and use your touchscreen. <\/span><\/p>\n\n\n\n<p>Ideally, you should think about the touchscreen as being part of the stand or space it is going into. You may want your touchscreen to be branded &#8211; or if it is lectern-style (i.e. has a stand), you might want branding on the side so it\u2019s not too plain.<\/p>\n\n\n\n<p>You may also need to think about the messaging around your touchscreen. Sometimes it might not be obvious it\u2019s a touchscreen, and sometimes people can be a little cautious or self-conscious about using screens, so some messaging to encourage them can help.<\/p>\n\n\n\n<p>Having an inviting message on the touchscreen encouraging people to come and explore is really important, and something that most of our first-time clients don\u2019t think of.<\/p>\n\n\n\n<h2 class=\"has-pop-pink-color has-text-color wp-block-heading\"><span style=\"font-weight: 400; color: #f2168f;\">Finding the right developer <\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Although it\u2019s possible to create your own touchscreen experience, we would really advise you to look at working with a specialist developer.<\/span> <span style=\"font-weight: 400;\">Ideally, someone (or a team of someones) who will listen to your challenges, needs and ideas, and give you some guidance on what\u2019s possible. <\/span><\/p>\n\n\n\n<p>It\u2019s important that they have the right experience of developing interactive experiences &#8211; rather than simply specialising in the hardware side of things.<\/p>\n\n\n\n<p>They should be able to show you some examples of their previous work, and client testimonials. And you don\u2019t have to settle for the first person you speak to, either &#8211; we\u2019d advise talking to 2 or 3 different agencies and seeing what they come up with.<\/p>\n\n\n\n<p>Remember, they should be asking you some of the questions we mentioned above, such as working out your business objectives, what kind of experience you want your customers and visitors to have and many more.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"569\" src=\"https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/06\/touchscreen-multitouch-sales-enablement-IHG-popcomms-1-1024x569.jpg\" alt=\"\" class=\"wp-image-8463\" srcset=\"https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/06\/touchscreen-multitouch-sales-enablement-IHG-popcomms-1-1024x569.jpg 1024w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/06\/touchscreen-multitouch-sales-enablement-IHG-popcomms-1-300x167.jpg 300w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/06\/touchscreen-multitouch-sales-enablement-IHG-popcomms-1-768x427.jpg 768w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/06\/touchscreen-multitouch-sales-enablement-IHG-popcomms-1-1536x853.jpg 1536w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/06\/touchscreen-multitouch-sales-enablement-IHG-popcomms-1.jpg 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"has-pop-pink-color has-text-color wp-block-heading\"><span style=\"font-weight: 400; color: #f2168f;\">Conclusion <\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">We hope we\u2019ve managed to give you a better idea of where to start when creating an interactive touchscreen experience for your business. It can be daunting when it\u2019s your first time looking to introduce an interactive &#8211; regardless of what you\u2019ll be using it for. <\/span><\/p>\n\n\n\n<p>Remember, we always recommend seeking out a touchscreen specialist, or agency who specialise in developing them \u2013 rather than a hardware provider \u2013 so you can create truly memorable and engaging experiences.<\/p>\n\n\n\n<p>Would you like to know more about creating a touchscreen experience your customers will love? Then download our Guide or get in touch \u2013 we\u2019d love to hear from you!<\/p>\n\n\n\n    <div class=\"container-wide\">\n    <div\n      is=\"download\"\n      inline-template\n      id=\"download-form\"\n    >\n      <div class=\"download-form-container\"  data-email-title=\"\" data-email-image=\"\" data-email-file=\"\">\n        <div class=\"border-2 \">\n          <div class=\"sm:hidden block relative\" style=\"padding-bottom: 100%;\">\n            <div\n              class=\"absolute top-0 left-0 w-full h-full bg-no-repeat bg-center bg-cover\"\n              style=\"background-image: url(https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/06\/Touchscreen-interactive-presentation-medical-device-corin-popcomms-3.jpg)\"\n            ><\/div>\n          <\/div>\n          <div\n            ref=\"downloadForm\"\n            name=\"download_form\"\n            method=\"post\"\n            action=\"\"\n            onsubmit=\"return false\"\n            class=\"download-form w-full relative\"\n          >\n            <transition name=\"fade\">\n              <div\n                v-show=\"step !== 1\"\n                class=\"absolute flex flex-col top-0 left-0 w-full h-full shadow-md bg-pop-black\"\n                style=\"z-index: 1;\"\n              ><\/div>\n            <\/transition>\n            <div ref=\"downloadFormStep1\">\n              <div class=\"md:grid md:grid-cols-2\">\n  <div class=\"hidden md:block relative\" style=\"padding-bottom: 100%;\">\n    <div\n      class=\"absolute top-0 left-0 w-full h-full bg-no-repeat bg-center bg-cover\"\n      style=\"background-image: url(https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/06\/Touchscreen-interactive-presentation-medical-device-corin-popcomms-3.jpg)\"\n    ><\/div>\n  <\/div>\n  <div class=\"flex flex-col\">\n    <div class=\"h-2\/5 bg-pop-pink text-pop-white p-6 lg:px-8 flex flex-col justify-center\">\n      <h3 class=\"font-semibold text-xl lg:text-2xl\">Download guide<\/h3>\n    <\/div>\n    <div class=\"h-3\/5 flex flex-col justify-between bg-pop-black\" >\n      <div class=\"flex items-center lg:text-lg h-full p-6 lg:px-8 text-pop-white\">\n        Download our guide to creating immersive touchscreen experiences\n      <\/div>\n      <div\n        class=\"flex justify-end cursor-pointer\"\n        @click=\"nextStep()\"\n      >\n        <div class=\"bg-pop-black text-pop-white text-pop-white m-0 px-4 py-2 h-10 leading-0\">\n          Download\n        <\/div>\n        <div class=\"w-10 h-10 p-2 bg-pop-navy\">\n          <svg class=\"w-full absolute left-1\/2 top-1\/2 -translate-y-1\/2 -translate-x-1\/2 transform rotate-90 text-pop-white\" width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n            <path\n              class=\"fill-current text-pop-pink\"\n              d=\"M13.0607 0.625645C12.4749 0.0398579 11.5251 0.0398579 10.9393 0.625645L1.3934 10.1716C0.807611 10.7574 0.807611 11.7071 1.3934 12.2929C1.97919 12.8787 2.92893 12.8787 3.51472 12.2929L12 3.80762L20.4853 12.2929C21.0711 12.8787 22.0208 12.8787 22.6066 12.2929C23.1924 11.7071 23.1924 10.7574 22.6066 10.1716L13.0607 0.625645ZM13.5 24.3137V1.6863H10.5V24.3137H13.5Z\"\n              fill=\"currentColor\"\n            \/>\n          <\/svg>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n            <\/div>\n            <div\n              ref=\"downloadFormStep2\"\n              v-show=\"step === 2\"\n              class=\"absolute flex flex-col top-0 left-0 w-full h-full p-3 sm:p-10  text-pop-white z-10\"\n            >\n              <div class=\"text-sm mb-4\">1 \/ 3<\/div>\n              <div class=\"w-full md:w-5\/6 form-text leading-tight text-base sm:text-xl md:text-xl\">\n  We just need some details to get you started. Please enter your <span class=\"text-pop-yellow\">first name<\/span> and <span class=\"text-pop-yellow\">surname<\/span>.\n<\/div>\n<div class=\"flex-grow flex flex-col justify-center\">\n  <div class=\"my-2 sm:my-4\">\n    <div class=\"input-box relative w-full\">\n  <div class=\"relative overflow-hidden\">\n    <div class=\"input-content transform translate-y-full\">\n      <input\n        name=\"first_name\"\n        class=\"w-full font-normal text-lg sm:text-2xl bg-pop-black text-pop-white \"\n        type=\"text\"\n        v-model=\"form.firstName.value\"\n        placeholder=\"First name *\"\n        @keyup.prevent=\"validateFirstName\"\n      >\n          <\/div>\n  <\/div>\n\n  <div\n    class=\"input-border absolute top-full left-0 transition-colors duration-300\" :class=\"validationHighlight(form.firstName.valid)\" style=\"height: 2px;\"\n  ><\/div>\n  <\/div>\n  <\/div>\n  <div class=\"my-2 sm:my-4\">\n    <div class=\"input-box relative w-full\">\n  <div class=\"relative overflow-hidden\">\n    <div class=\"input-content transform translate-y-full\">\n      <input\n        name=\"last_name\"\n        class=\"w-full font-normal text-lg sm:text-2xl bg-pop-black text-pop-white pr-12\"\n        type=\"text\"\n        v-model=\"form.lastName.value\"\n        placeholder=\"Surname *\"\n        @keyup.prevent=\"validateLastName\"\n      >\n            <svg @click=\"validateLastName\" class=\"absolute h-8 sm:h-auto top-1\/2 transform -translate-y-1\/2 right-0 cursor-pointer fill-current text-pop-white hover:text-pop-pink transition-colors\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n        <path d=\"M36.3746 25.0607C36.9604 24.4749 36.9604 23.5251 36.3746 22.9393L26.8287 13.3934C26.2429 12.8076 25.2931 12.8076 24.7073 13.3934C24.1216 13.9792 24.1216 14.9289 24.7073 15.5147L33.1926 24L24.7073 32.4853C24.1216 33.0711 24.1216 34.0208 24.7073 34.6066C25.2931 35.1924 26.2429 35.1924 26.8287 34.6066L36.3746 25.0607ZM12.6865 25.5L35.3139 25.5L35.3139 22.5L12.6865 22.5L12.6865 25.5Z\"\/>\n      <\/svg>\n          <\/div>\n  <\/div>\n\n  <div\n    class=\"input-border absolute top-full left-0 transition-colors duration-300\" :class=\"validationHighlight(form.lastName.valid)\" style=\"height: 2px;\"\n  ><\/div>\n      <div class=\"hidden sm:block input-guide opacity-0 absolute -bottom-2 right-0 text-sm pt-1 text-right transform translate-y-full text-pop-white\">click or hit enter<\/div>\n  <\/div>\n  <\/div>\n<\/div>\n            <\/div>\n            <div\n              ref=\"downloadFormStep3\"\n              v-show=\"step === 3\"\n              class=\"absolute flex flex-col top-0 left-0 w-full h-full p-3 sm:p-10 bg-pop-black text-pop-white z-10\"\n            >\n              <div class=\"text-sm mb-4\">2 \/ 3<\/div>\n              <div class=\" form-text w-full sm:w-4\/6 leading-tight text-base sm:text-xl md:text-xl\">\n  And now just your <span class=\"text-pop-yellow\">email<\/span> &amp; <span class=\"text-pop-yellow\">company name<\/span>, please.\n<\/div>\n<div class=\"flex-grow flex flex-col justify-center\">\n  <div class=\"my-2 sm:my-4\">\n    <div class=\"input-box relative w-full\">\n  <div class=\"relative overflow-hidden\">\n    <div class=\"input-content transform translate-y-full\">\n      <input\n        name=\"email\"\n        class=\"w-full font-normal text-lg sm:text-2xl bg-pop-black text-pop-white \"\n        type=\"email\"\n        v-model=\"form.email.value\"\n        placeholder=\"Your email *\"\n        @keyup.prevent=\"validateEmail\"\n      >\n          <\/div>\n  <\/div>\n\n  <div\n    class=\"input-border absolute top-full left-0 transition-colors duration-300\" :class=\"validationHighlight(form.email.valid)\" style=\"height: 2px;\"\n  ><\/div>\n  <\/div>\n  <\/div>\n  <div class=\"my-2 sm:my-4\">\n    <div class=\"input-box relative w-full\">\n  <div class=\"relative overflow-hidden\">\n    <div class=\"input-content transform translate-y-full\">\n      <input\n        name=\"company\"\n        class=\"w-full font-normal text-lg sm:text-2xl bg-pop-black text-pop-white pr-12\"\n        type=\"text\"\n        v-model=\"form.company.value\"\n        placeholder=\"Company *\"\n        @keyup.prevent=\"validateCompany\"\n      >\n            <svg @click=\"validateCompany\" class=\"absolute h-8 sm:h-auto top-1\/2 transform -translate-y-1\/2 right-0 cursor-pointer fill-current text-pop-white hover:text-pop-pink transition-colors\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n        <path d=\"M36.3746 25.0607C36.9604 24.4749 36.9604 23.5251 36.3746 22.9393L26.8287 13.3934C26.2429 12.8076 25.2931 12.8076 24.7073 13.3934C24.1216 13.9792 24.1216 14.9289 24.7073 15.5147L33.1926 24L24.7073 32.4853C24.1216 33.0711 24.1216 34.0208 24.7073 34.6066C25.2931 35.1924 26.2429 35.1924 26.8287 34.6066L36.3746 25.0607ZM12.6865 25.5L35.3139 25.5L35.3139 22.5L12.6865 22.5L12.6865 25.5Z\"\/>\n      <\/svg>\n          <\/div>\n  <\/div>\n\n  <div\n    class=\"input-border absolute top-full left-0 transition-colors duration-300\" :class=\"validationHighlight(form.company.valid)\" style=\"height: 2px;\"\n  ><\/div>\n      <div class=\"hidden sm:block input-guide opacity-0 absolute -bottom-2 right-0 text-sm pt-1 text-right transform translate-y-full text-pop-white\">click or hit enter<\/div>\n  <\/div>\n  <\/div>\n<\/div>\n            <\/div>\n            <div\n              ref=\"downloadFormStep4\"\n              v-show=\"step === 4\"\n              class=\"absolute flex flex-col top-0 left-0 w-full h-full p-3 sm:p-10 bg-pop-black text-pop-white z-10\"\n            >\n              <div class=\"text-sm mb-4\">3 \/ 3<\/div>\n              <div class=\"w-1\/2 form-text opacity-0 sm:mb-12 leading-tight text-base sm:text-xl md:text-xl\">\n  Brill! Are you a human?\n  Prove it by simply entering the answer to <span class=\"text-pop-yellow\" v-html=\"captcha.a\"><\/span> <span class=\"text-pop-yellow\">+<\/span> <span class=\"text-pop-yellow\" v-html=\"captcha.b\"><\/span>\n<\/div>\n<div class=\"grid grid-cols-2 auto-cols-auto space-x-4 my-4\">\n  <div>\n    <div class=\"input-box relative w-full\">\n  <div class=\"relative overflow-hidden\">\n    <div class=\"input-content transform translate-y-full\">\n      <input\n        name=\"captcha\"\n        class=\"w-full font-normal text-lg sm:text-2xl bg-pop-black text-pop-white \"\n        type=\"text\"\n        v-model=\"form.captcha.value\"\n        placeholder=\"Your answer?\"\n        @keyup.prevent=\"validateCaptcha\"\n      >\n          <\/div>\n  <\/div>\n\n  <div\n    class=\"input-border absolute top-full left-0 transition-colors duration-300\" :class=\"validationHighlight(form.captcha.valid)\" style=\"height: 2px;\"\n  ><\/div>\n  <\/div>\n  <\/div>\n<\/div>\n<div class=\"form-text flex opacity-0 text-xs\">\n  <div>\n    By submitting this form you agree to POPcomms <a class=\"text-pop-pink underline\" href=\"https:\/\/dev.popcomms.com\/pop\/privacy-policy\" target=\"_blank\">Privacy Policy<\/a>\n  <\/div>\n<\/div>\n<div\n  class=\"absolute bottom-0 right-0 flex justify-center cursor-pointer\"\n  @click=\"submit\"\n>\n  <div class=\"bg-pop-purple text-pop-white m-0 px-4 py-3 h-12 leading-0\">\n    Submit\n  <\/div>\n  <div class=\"w-12 h-12 p-2 bg-white flex items-center justify-center\">\n    <svg class=\"transform rotate-90 text-pop-purple\" width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n      <path\n        class=\"fill-current\"\n        d=\"M13.0607 0.625645C12.4749 0.0398579 11.5251 0.0398579 10.9393 0.625645L1.3934 10.1716C0.807611 10.7574 0.807611 11.7071 1.3934 12.2929C1.97919 12.8787 2.92893 12.8787 3.51472 12.2929L12 3.80762L20.4853 12.2929C21.0711 12.8787 22.0208 12.8787 22.6066 12.2929C23.1924 11.7071 23.1924 10.7574 22.6066 10.1716L13.0607 0.625645ZM13.5 24.3137V1.6863H10.5V24.3137H13.5Z\"\n        fill=\"currentColor\"\n      \/>\n    <\/svg>\n  <\/div>\n<\/div>\n<div class=\"hidden sm:block absolute top-0 right-0 w-1\/2 pointer-events-none\">\n  <svg class=\"watching-eye w-full\" preserveAspectRatio=\"xMidYMid meet\"  viewBox=\"0 0 496 369\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\">\n    <rect class=\"lines\" y=\"-123.89\" width=\"496\" height=\"245.916\" fill=\"url(#pattern5)\"\/>\n    <clipPath id=\"irisclipPath5\">\n      <path class=\"eye-mask\" style=\"transform-origin: 50% 32%;\" d=\"M0 122.813C58.13 49.7951 147.621 3.01562 248 3.01562C348.379 3.01562 437.87 49.7951 496 122.813C437.87 195.83 348.379 242.61 248 242.61C147.621 242.61 58.13 195.83 0 122.813Z\" fill=\"black\"\/>\n    <\/clipPath>\n    <rect fill=\"white\" style=\"clip-path: url(#irisclipPath5)\" class=\"lines\" y=\"0\" width=\"496\" height=\"245.916\"\/>\n    <!-- <path style=\"clip-path: url(#irisclipPath5)\" d=\"M0 122.813C58.13 49.7951 147.621 3.01562 248 3.01562C348.379 3.01562 437.87 49.7951 496 122.813C437.87 195.83 348.379 242.61 248 242.61C147.621 242.61 58.13 195.83 0 122.813Z\" fill=\"white\"\/> -->\n    <ellipse class=\"iris\" style=\"clip-path: url(#irisclipPath5)\" cx=\"247.653\" cy=\"121.806\" rx=\"101.771\" ry=\"102.118\" fill=\"#6F62FF\"\/>\n    <ellipse class=\"pupil\" style=\"clip-path: url(#irisclipPath5)\" cx=\"244.924\" cy=\"78.2744\" rx=\"35.4286\" ry=\"35.4286\" fill=\"#F8F7EE\"\/>\n    <defs>\n      <pattern id=\"pattern5\" patternContentUnits=\"objectBoundingBox\" width=\"0.0241935\" height=\"0.0487972\">\n        <use xlink:href=\"#image0\" transform=\"scale(0.00201613 0.00406643)\"\/>\n      <\/pattern>\n      <image id=\"image0\" width=\"12\" height=\"12\" xlink:href=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAA8SURBVHgB7dGxDQAgCATAdytjwWqwDzuqaBzg7SggITTHN99AzBC3ODoBo3Ds6uJaOAl+DzS+jf\/gE74Bfmo++ZWcm1wAAAAASUVORK5CYII=\"\/>\n    <\/defs>\n  <\/svg>\n<\/div>\n            <\/div>\n            <div\n              ref=\"downloadFormStep5\"\n              v-show=\"step === 5\"\n              class=\"absolute top-0 left-0 w-full h-full p-3 sm:p-10 bg-pop-black text-pop-white z-10\"\n            >\n              <div class=\"text-sm p-3 sm:p-10\">Complete<\/div>\n              <div class=\"grid md:grid-cols-2\">\n  <div class=\"flex flex-col form-text justify-center text-xl p-6\">\n    <div>\n      Thanks, <span class=\"text-pop-yellow\">all done!<\/span><br>\n      Check your email to find your guide.\n    <\/div>\n  <\/div>\n<\/div>\n\n  <svg class=\"hidden md:block absolute right-0 top-1\/2 transform -translate-y-1\/2\" width=\"408\" height=\"336\" viewBox=\"0 0 408 336\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n    <path class=\"finger stroke-current text-pop-black\" stroke-width=\"2\" d=\"M83.8623 99.4615C83.8623 80.9476 99.1777 65.9391 118.07 65.9391L542.543 65.9392C561.436 65.9392 576.751 80.9477 576.751 99.4616C576.751 117.975 561.436 132.984 542.543 132.984L118.07 132.984C99.1776 132.984 83.8623 117.975 83.8623 99.4615Z\" fill=\"#6F62FF\"\/>\n    <path class=\"finger stroke-current text-pop-black\" stroke-width=\"2\" d=\"M197.889 166.867C197.889 148.154 213.369 132.984 232.464 132.984L542.175 132.984C561.271 132.984 576.751 148.154 576.751 166.867C576.751 185.58 561.271 200.75 542.175 200.75L232.464 200.75C213.369 200.75 197.889 185.58 197.889 166.867Z\" fill=\"#6F62FF\"\/>\n    <path class=\"finger stroke-current text-pop-black\" stroke-width=\"2\" d=\"M216.28 234.632C216.28 215.92 231.76 200.75 250.856 200.75L542.176 200.75C561.271 200.75 576.751 215.92 576.751 234.633C576.751 253.346 561.271 268.515 542.176 268.515L250.856 268.515C231.76 268.515 216.28 253.345 216.28 234.632Z\" fill=\"#6F62FF\"\/>\n    <path class=\"finger stroke-current text-pop-black\" stroke-width=\"2\" d=\"M233.937 302.038C233.937 283.524 249.252 268.515 268.144 268.515L542.544 268.515C561.436 268.515 576.752 283.524 576.752 302.038C576.752 320.552 561.436 335.56 542.544 335.56L268.144 335.56C249.252 335.56 233.937 320.552 233.937 302.038Z\" fill=\"#6F62FF\"\/>\n    <path class=\"hand\"d=\"M379.105 137.017C379.105 97.7617 411.579 65.9391 451.637 65.9391H487.545C527.603 65.9391 560.077 97.7618 560.077 137.017V264.483C560.077 303.738 527.603 335.56 487.545 335.56H451.637C411.579 335.56 379.105 303.738 379.105 264.482V137.017Z\" fill=\"#6F62FF\"\/>\n    <path class=\"waves opacity-0 origin-center\" d=\"M130.346 184.698C118.12 186.375 105.723 185.501 93.9727 182.131C82.2223 178.761 71.3854 172.974 62.1767 165.149C52.9679 157.325 45.5964 147.641 40.5482 136.738C35.5 125.834 32.8898 113.957 32.8897 101.891C32.8896 89.825 35.4995 77.8432 40.5475 66.736C45.5954 55.6287 52.9667 45.6481 62.1753 37.4524C71.3839 29.2566 82.2207 23.0319 93.971 19.1886C105.721 15.3452 118.118 13.9706 130.345 15.1553L128.988 26.3128C118.367 25.2836 107.598 26.4777 97.3901 29.8165C87.1825 33.1552 77.7686 38.5627 69.769 45.6823C61.7695 52.802 55.366 61.4721 50.9808 71.1211C46.5956 80.77 44.3283 91.1786 44.3285 101.661C44.3286 112.142 46.5961 122.46 50.9815 131.932C55.3668 141.404 61.7705 149.816 69.7702 156.613C77.7699 163.41 87.1839 168.438 97.3915 171.365C107.599 174.292 118.369 175.052 128.99 173.595L130.346 184.698Z\" fill=\"#3A3EAB\"\/>\n    <path class=\"waves opacity-0 origin-center\" d=\"M121.559 160.297C104.817 160.599 88.7233 154.419 76.8186 143.116C64.914 131.814 58.1735 116.315 58.08 100.029C57.9866 83.7426 64.5478 68.0036 76.3203 56.2741C88.0928 44.5445 104.112 37.7853 120.854 37.4833L120.916 48.2672C107.114 48.5161 93.9081 54.0884 84.203 63.758C74.4979 73.4277 69.089 86.4027 69.166 99.8287C69.2431 113.255 74.7998 126.032 84.6138 135.349C94.4279 144.667 107.695 149.762 121.497 149.513L121.559 160.297Z\" fill=\"#3A3EAB\"\/>\n  <\/svg>\n                <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  ","protected":false},"excerpt":{"rendered":"<p>Wondering how you should go about creating an immersive touchscreen experience for your business? If you\u2019re anything like many of our clients who first come to us, you may have a lot of questions in your head, such as: How do I know I definitely need a touchscreen? Is it simply nice to have or [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":247,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[65,4],"tags":[98,85,14,129,99,155,100],"class_list":["post-4374","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology","category-touchscreens","tag-interactive-content","tag-interactive-display-software","tag-interactive-touchscreen-experiences","tag-progressive-web-app","tag-progressive-web-app-touchscreen-presentation","tag-touchscreen-presentation","tag-touchscreen-programming"],"acf":[],"_links":{"self":[{"href":"https:\/\/dev.popcomms.com\/pop\/wp-json\/wp\/v2\/posts\/4374","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dev.popcomms.com\/pop\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dev.popcomms.com\/pop\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dev.popcomms.com\/pop\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.popcomms.com\/pop\/wp-json\/wp\/v2\/comments?post=4374"}],"version-history":[{"count":0,"href":"https:\/\/dev.popcomms.com\/pop\/wp-json\/wp\/v2\/posts\/4374\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dev.popcomms.com\/pop\/wp-json\/wp\/v2\/media\/247"}],"wp:attachment":[{"href":"https:\/\/dev.popcomms.com\/pop\/wp-json\/wp\/v2\/media?parent=4374"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dev.popcomms.com\/pop\/wp-json\/wp\/v2\/categories?post=4374"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dev.popcomms.com\/pop\/wp-json\/wp\/v2\/tags?post=4374"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}