UI and UX Best Practices

User Interface (UI) and User Experience (UX) - Understanding how they complement each other

• User experience (UX) design is the process of organizing the feelings and interaction people should get from using the interface
• User interface (UI) design is the process of creating visual stimulation with what (website/application) people interact with
• Working together to develop great UI in order to heighten the UX

Greetings, and thanks for reading. The following article is a collection of articles that I have read/viewed and been inspired by via the web. I have given credit to those who I borrowed imagery from or content from (please see endnotes); but please forgive me if I neglected to include everyone as accurately as possible. Fear not I am not making money from this, I am just sharing my collected knowledge with the general public to better enhance the end user experience with the end goal of better retention and clearer communication. Enough, of this disclaimer stuff, let's go!.

Right brain/left brain thinking

I have read many articles that equate UX/UI to LEFT brain/RIGHT brain thinking (ie, analytical versus creative thinking). I do not share this opinion, perhaps since I come from the creative side of things (so this could be a key influencer). However, it is my opinion that the UX/UI are integral, and while we may treat as two seperate topics, I believe they cannot be so easily separated as they work together.

Understanding Visual Hierarchy - Case Studies

• Users look for visual queues to tell them where they can click before exploring the page with their mouse
• Visual presentation of an interface should guide users from one action to the next without feeling overbearing
• Content helps users focus on sections of interest – switching them from scanning to actually reading the copy

Digital Content - Usability Testing

• Eye tracking studies have shown that 79% of users will skim the page for content and only 16% read word-for-word
• Providing User-Centric content at a lower-literacy level promotes scanning and improves performance metrics
• Usability metrics (collected before and after content for a major pharmaceutical website was simplified) showed that all user types increased in satisfaction

The F-Pattern (Text Heavy Sites)

• Web users tend to browse heavy text sites based on their reading habits. In the US, the left side of the screen is heavily favored, in an F-pattern
• Important information should be placed across the top of the design
• Less important, but still key information should be placed along the left edge of the design often in bullet points for scanning purposes

The Z-Pattern (Less Text Heavy Sites)

• Z-Pattern scanning occurs on pages that are not centered on the text
• The reader first scans a horizontal line across the top of the page (whether because of the menu bar, or simply out of a habit of reading left-to-right from the top)
• When the eye reaches the end, it shoots down and left (again based on the reading habit), and repeats a horizontal search on the lower part of the page

Incorporating Content into Design

Designers can work with copywriters on:

• Concise and scan-able web content
• Clear and direct naming conventions
• Simplified, actionable headlines
• Starting subheads, paragraphs, and bullet points with information-carrying words
• Links to drive users through the site

User-centric writing:

• Focus on the benefits service
• Have a conversation with readers
• Avoid industry and business jargon or “marketese”

Fitts’s Law

Fitts’s law communicates that an object’s “weight” is a big determinant in what attracts eyes and mouse clicks

https://en.wikipedia.org/wiki/Fitts%27s_law

Applying Fitts’s Law for Better Conversions

• Case studies have provided general confirmation of Fitts’s law within UI design. In this example, usability testing was implemented on an existing website to monitor visual hot spots

• The large “NO FEES” starburst image gained most of the attention (red heatspot), but it is not a call-to-action button nor was it considered the important information on the page
• The misplaced prominence drew users attention away from other more important elements such as the phone number and Call To Action
• The testing allowed designers to reassess the important features of the site and adjust design appropriately

• In the revised version, the “Call Now” button gained much more attention than before, as well as the check list bullets of services
• Lesson learned: Ensure the elements with prominence are the ones that matter, and that you aren’t giving too much weight to visuals that don’t encourage customers to take action

The Power of Directional Cues

• Human beings have a natural tendency to follow the gaze of others, and we have been coached since birth to follow arrows directing us to where we should be looking/going
• During website A/B testing, in this “A” example, the baby’s face is drawing a lot of attention

• Unfortunately, from a marketing standpoint, this is a problem because the copy isn’t commanding enough attention
• In the “B” version, users continued to focus on the baby’s face again (from the side), but then also directly followed the baby’s line of sight to the headline and opening copy
• Lesson learned: Visuals are an important part of a site’s overall design, but most pages can be optimized by including images that serve as visual cues for where visitors should look next

Prioritizing the Interface

Planning the interface structure (site map, wireframes) starts with identifying appropriate navigation, ultimately accommodating for the specific user audience needs

• Take inventory: Identify the most common tasks users may want to perform
• Prioritize: Assign priority levels of high, medium, or low to common user tasks. Give prominence in the UI to paths and destinations with high priority levels and frequent use

Sequence: Identify the different paths that users may take and use those paths to define your navigation:

1. List frequent destinations prominently in your navigation
2. Group related tasks together and use those groupings to structure your navigation

Google Material

• Material design is guided by print-based design elements – such as typography, grids, space, scale, color, and imagery – to create hierarchy, meaning, and focus that immerse the user in the experience
• It adopts tools from the field of print design, like baseline grids and structural templates, encouraging consistency across environments by repeating visual elements, structural grids, and spacing across platforms and screen sizes

The google layouts scale to fit any screen size, which simplifies the process of creating scalable applications

• Structure: https://material.google.com/layout/structure.html
• UI Responsiveness: https://material.google.com/layout/responsive-ui.html

Navigation Patterns

• Tabs (typical main navigation)
• Nested navigation (hierarchical list)
• Expanding navigation (accordion style menu)
• Cascading navigation (drill downs)
• Navigation drawer (primarily mobile and tablet off-canvas menu)
• Bottom navigation bar (mobile/tablet tools)
• https://material.google.com/patterns/navigation.html

Style Consistency

• Establish styles in your UI design that easily distinguishes interactive elements from content and apply them religiously
• Design a legible and approachable layout that enables users to scan

The total cognitive load, or amount of mental processing power needed to use your site, affects how easily users find content and complete tasks.

Overlays / Pop-ups

• Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks
• They retain focus until dismissed or a required action has been taken

? When to use (use sparingly as they are interruptive):

• Alert user
• User inputs
• User confirmation
• More information (brief)
• Simple menus
• Full-screen dialogs for mobile, when space is limited

Links

• Text-only hyperlinks are helpful methods to move the user to the next step
• Text anchor links allow users to jump to other content within the same page
• Generally, text links have a low hierarchy and fall inline with other copy

Buttons

• Buttons can be used for any interaction including form submission or other UI elements with hyperlinks (CTAs) and have more precedence than links

Button styles should be dictated by the type of interaction they perform

• Functional elements (open navigation drawer, close dialog window, slideshow controls)
• Submissions (User input)
• Call-To-Actions
• Overlay triggers

Keep styles limited and consistent. For Example:

• All buttons might have 6px rounded corners
• Submit buttons might always be red with a drop shadow

Additional Style Best Practices

Create a color pallet that’s applied systematically and religiously

• Static content primarily consist of shades of grey and the primary color
• ONLY use the secondary brand color for interactive elements (buttons and links)

? Define your regions and ensure sufficient contrast

Font Styles by Text Element (Header 1, Header 2, Header 3, Paragraph)

• Keep styles as limited as possible to reduce number of classes
• Hint: pay attention to your style sheets. More styles = more code

Icons

• Use iconography often to communicate faster

Background images

• Be careful applying background images in responsive designs

Use animations/video sparingly and effectively

• Comes at a high cost of resources for creation and the user engagement
• 99% of animations are fast and subtle. Make a strong case for the 1%

Variable fields

• Be mindful of character length in templated areas such as forms or where results may populate. Consider maximum content length when designing
• Test extremely short headlines and extremely long ones
• You have limited control over breaks and rags in interactive content. Optimize width for best overall flow without forced returns
• Always assume there will be more content than what’s reasonable and optimize for space

Mobile - Research and Considerations

Desktop first or mobile first?

• Designing primarily for the desktop and treating mobile as an afterthought was no longer working
• So, the world responded by designing primarily for mobile and treating the desktop as an afterthought
• It didn’t solve the problem – it just flipped it around
• We need to always be thinking about how to solve for all device sizes for different users

Functionality Considerations by Device Size

Research indicates that:

• Desktop users with larger screen sizes expect key functionality to appear at the top of the screen
• Tablet users are using both hands (including index fingers) in landscape orientation

Smartphone users are doing many of the actions in portrait mode with their dominant hand’s thumb

• This provides insights for designers to keep the navigation and functionality toward the bottom and middle of the screen

Functionality Considerations by User Experience Level

Balance appropriately between new users and power users

• Some applications are really used once and seldom revisited. For those situations,it can definitely make sense to design the interface to be “Fisher Price simple”
• However, if you’re designing an application that people will use on a regular basis as part of their job, it may also make sense to focus on issues of visibility and efficiency first, even if it leads to a more complicated interface

Navigation Considerations

• In recent research, both on mobile and on desktop, people were significantly more likely to use the navigation when all or some of the options were visible
• Navigation bars and tab bars take space on a mobile page, and work well when the number of navigation options is small
• Sites that are primarily task oriented can use a homepage-as-navigation-hub pattern
• Hamburger menus for mobile accommodate a large number of options, but can be less discoverable

Mobile Navigation: Facebook Case Study

• In their iOS app, Facebook tested dozens of different interface designs, and compared them on all metrics until they found that the row of buttons at the bottom main screen resulted in the best UI/UX design
• So, when critical parts of an application are made more visible, usage of them can increase
• Facebook found that not only did engagement go up when they moved from a “hamburger” menu to a bottom tab bar but other important metrics went up as well

Best Practice Summary

Best Practices Tips

• Create a linear navigation that is distinct and prominent
• Hiding navigation and content reduces visibility and will not aid user’s scanning behavior
• Users will scroll if the content looks appealing
• Adhere to a strict grid
• The fold is well-known, users expect to scroll when needed

Pre-submission Considerations

Each team’s submission process is unique

• Will all device size views be required for submission?
• Mobile wireframes required?
• Are hyperlinks needed in the submission PDF?
• Will the PDF be annotated?
• Do we need to show every state of an interaction or can it be annotated?
• Is the final review prior to migration or after QC of migrated files?
• Optimize files for production and submission guidelines first, development requirements second
• What supporting documents are needed?

Design and Digital Communication

Design and Digital Touchpoints

Site-map and Wireframes

• Post-kick off, collaboration meeting between digital, copy and design to discuss content, navigation and structure
• Digital will prepare first draft of site map and wireframes, then review with design
• If mobile design is required for submission, then digital team will prepare mobile wireframes for design; collaboration as needed
• If mobile design not required for submission, then mobile design will be implemented during development

Design

• Prior to account team review, design and digital will have a collaboration meeting todiscuss application of design to the wireframes and any additional recommendationsor adjustments
• As needed to make it work!

=================================

References

https://material.io

https://www.uxpin.com

https://usabilitygeek.com/better-ux-before-ui/

https://www.healthline.com/health/left-brain-vs-right-brain

https://www.wedevz.com/blog/unique-uiux-web-designs/

https://www.uxpin.com/

https://www.fastcodesign.com/3032719/ui-ux-who-does-what-a-designers-guideto-the-tech-industry

https://en.wikipedia.org/wiki/Website_wireframe

https://www.applicoinc.com/blog/whats-difference-ux-ui-design/

https://eyeondesign.aiga.org/whats-the-difference-between-ux-ui-design/

https://uxmovement.com/products/wireframe-patterns-design-at-a-pro-level-withease/