Adrian Esquivel
October 12, 2021
Articles

UX and UI - Evolving Customer Experience

<span  style="font-weight: 400;">UX and UI, user experience and user  interface, form a marriage between aesthetics and product usability that  guides the journey of a user when they visit your site and sets the tone for  your overall customer experience.</span><span style="font-weight: 400;">Well executed UI/UX design  influences everything about the user’s behavior from how much time they spend  on your site to how much money they are willing to invest in your products  and services. UI/UX embodies your marketing and is the vehicle for  introducing your brand, and is also responsible for a client’s  </span><i><span style="font-weight: 400;">first  approach</span></i><span style="font-weight:  400;"> interacting with your product.</span><span style="font-weight: 400;">There’s a fantastic Marilyn  Monroe quote from Gentlemen Prefer Blondes,</span><i><span  style="font-weight: 400;"> “Don't you know that a man being rich  is like a girl being pretty? You wouldn't marry a girl just because she's  pretty, but my goodness, doesn’t it help?”</span></i><span style="font-weight: 400;">Your customers won’t buy  your product </span><i><span style="font-weight:  400;">just </span></i><span style="font-weight:  400;">because it is attractively presented and your site is easy to  navigate...or will they?</span><h1><span style="font-weight: 400;">“U” Is All about  </span><i><span style="font-weight:  400;">Them</span></i></h1><span style="font-weight: 400;">The story goes like  this...Once upon a time a cognitive scientist named </span><a  href="https://en.wikipedia.org/wiki/Don_Norman"  target="_blank" rel="noopener"><span  style="font-weight: 400;">Don  Norman</span></a><span style="font-weight: 400;">  invented the term UX and decreed that it embodied every aspect of the end  user’s interaction with a company’s website, products, services, and  features.</span><span style="font-weight: 400;">Every element of a site’s  accessibility revolves around user testing, user experience, and the user  interface. In the “U” world, clean lines and sharp graphics go far beyond  looks, extending to influence user navigation and click actions. Object  placement; where your buttons are located, where your navigation menu is  placed, etc. all influence what a user will select first from the  page.</span><h1><span style="font-weight: 400;">User  Interface</span></h1><h2><span style="font-weight: 400;">Art lesson 101:  Perspective</span></h2><span style="font-weight: 400;">There are certain rules in  art and design, the rule of thirds for example says to place your subject in  the left or right third of an image, leaving the other 2 thirds more open.  Especially in mediums like photography, this rule leads to compelling shots.  Why? Because the viewer’s eye is drawn straight to the subject since there  isn’t a lot else left to focus on.</span><span style="font-weight: 400;">Obviously, you don’t want a  web page with a solitary button on the left third of the page, but you do  want to keep your </span><b>key elements </b><span  style="font-weight: 400;">in mind, and make sure they maintain  the user’s focus.</span><span style="font-weight: 400;">On a webpage, art subjects  become access points and what the user’s eyes are drawn toward is what they  will click on. This is how user interface design controls page pathways and  navigation.</span><h2><span style="font-weight: 400;">Don’t Break the  Wheel</span></h2><span style="font-weight: 400;">There are universal page  elements that are familiar. The primary navigation bar and menu icons go at  the top of the page. Shopping cart icons generally live in the top right. Key  information and links live in the footer. When you are considering your user  interface design it’s important to remember that you’re not  </span><i><span style="font-weight:  400;">inventing</span></i><span  style="font-weight: 400;"> a user experience, you’re building  off the universal elements of what we have standardized in terms of hosting  on the internet.</span><h2><span style="font-weight: 400;">4 Types of User  Interface</span></h2><span style="font-weight: 400;">Keeping “universal page  templates” in mind, the next step is to determine the type of user interface  you want. This part links largely to </span><b>User  Experience</b><span style="font-weight: 400;">. First,  answer the question, “what type of product do I have?” Website? Web-based  application? Mobile App? Then ask, “how will the user interact with  your product?”</span><b>Command Line Interface</b><span style="font-weight: 400;">Not all your UI  requirements will be for consumers. Though not common, Command Line Interface  requires users to type appropriate instructions directly into the command  line. If you’re designing something like a cloud based terminal, shell, or  panel then you might take a functional approach to your design.</span><b>Menu-driven Interface</b><span style="font-weight: 400;">The menu-driven Interface  presents the user with a range of options in list form through a menu. Some  considerations you might take:</span><ul><li style="font-weight:  400;" aria-level="1"><span style="font-weight:  400;">Will the menu be full screen like at a gas  station?</span></li><li style="font-weight:  400;" aria-level="1"><span style="font-weight:  400;">Will you need a dropdown menu for site  navigation?</span></li><li style="font-weight:  400;" aria-level="1"><span style="font-weight:  400;">Is the menu triggered and displayed through a  popup?</span></li></ul><b>Graphical User Interface</b><span style="font-weight: 400;">The Graphical Interface is  familiar territory, these are your classic click-through websites. Your users  may be viewing on a larger screen, and using a mouse or trackpad. You can be  a little more generous with elements and buttons as there is usually more  page real-estate to play with. Graphical Interfaces also offer a lot of space  for branding and company messaging which plays a huge part in UI  design.</span><b>Touchscreen Graphical User Interface</b><span style="font-weight: 400;">Often, Touchscreen  Interfaces need to be identical, or similar to their Graphical counterparts.  This is the medium where your users will be consuming your product via  devices, like their phone or tablet. Their fingers will be their primary  navigation tools. With touchscreen, not only do you have to prioritize your  elements, but you have to make them easy to pinch, zoom, and swipe with a  finger, so designing around gestures becomes a factor.</span><h1><span style="font-weight: 400;">User Experience  Elevates Customer Experience</span></h1><span style="font-weight: 400;">If Old Don Norman declared  that UX encompassed all of the interactive and product objectives, I would  argue that his philosophy would also include the importance of  UI.</span><img class="aligncenter wp-image-15211 size-medium"  src="https://teckpert.com/wp-content/uploads/2021/08/EeCZ-3GXoAIvX2x-300x256.jpg"  alt="UX UI" width="300" height="256"  /><span style="font-weight: 400;">UX is the basis for UI, it  determines what needs to be featured, what should be clicked first, and maps  the pathways that UI attempts to guide the user to. The primary goal of both  UI and UX is to facilitate the customer journey that the company needs to  facilitate to not only sell, but to teach the user about the product and  educate them on how to use it.</span><ul><li style="font-weight:  400;" aria-level="1"><span style="font-weight:  400;">Does an element need to be  downloaded?</span></li><li style="font-weight:  400;" aria-level="1"><span style="font-weight:  400;">Are their system requirements?</span></li><li style="font-weight:  400;" aria-level="1"><span style="font-weight: 400;">Is  the product accessible to the user’s physical  location?</span></li></ul><span style="font-weight: 400;">Multiple factors influence  pathway decisions. The more clear those pathways are, and the more solid  their foundations, the more exceptional your customer service will be. If  something is easy it will bring satisfaction to the end  user.</span><span style="font-weight: 400;">UI and UX are all about  conveying clarity. The tech landscape is not always easy to navigate.  TECKpert can help. </span><a  href="https://teckpert.com/assessment/" target="_blank"  rel="noopener"><span style="font-weight:  400;">Reach out to our team today for an assessment  </span></a><span style="font-weight: 400;">and  see how we can help you clarify your company objectives and convey them  through design.</span>