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>