A Lite Checklist For UI/UX Design

A Lite Checklist For UI/UX Design

UI testing is a process of verifying the GUI for its compliance with specifications, general principles, and specific project requirements. In this blog post, Some key points to be followed when designing and testing will be listed:

  • Color contrast, between text and background, button labels, and button color.

  • Match colors associations with brand personality.

  • Consistency in design, in case you use a radius button use a radius border for all elements (images, cards, input fields… etc) with the same radius value.

  • Make Calls to Action (CTAs) Clear, Place them on the right of the website and the application so that whenever users can find them easily and make the color clear and readable. Listed below are the most used CTA colors and what they denote:

    1- Red: Using red helps stand out. It resembles excitement, urgency, and passion.

    2- Green: It acts as a motivator.

    3- Orange: It depicts warmth.

    4- Black, white, and brown are the least used colors for CTA as they do not align with the
    background and have no major significance.

  • You should use the theories of color psychology when picking colors. You can employ this insight into the inner workings of the human mind to promote desired feelings and guide users to certain actions, which can help increase conversion rates.

  • Use the right icons that must visually describe the function and purpose. Make them simple, familiar, and meaningful.

  • When using labels with icons, show the text to the right or below the icon in English and the opposite in Arabic.

  • Don’t use similar icons for different purposes or different icons for the same purpose. Same for labels.

  • Ensure the elements are aligned vertically and horizontally, in the same section, and on the whole page.

  • Don’t use a pattern background with text content to not distract users and to be clear and readable. And don’t add a lot of shapes in the background.

  • Text buttons are typically used for less-pronounced actions, including those located: in dialogs and cards.

  • Check the spelling of all words.

  • Button Status, Creating the types of buttons and the behaviors on the buttons, such as when they are active, when they have hovered, or when they are disabled. Button also created a hierarchy of levels from the most important to the least important levels, namely primary, secondary, and triad.

  • Design easy-to-use navigation:

    1- Keep top-level navigation for the essential navigation options. Limit your top-level navigation links to a maximum of seven choices and create sub-navigation with clear categorization.

    2- Use clear labels for navigation options. Use familiar words for menu options to help visitors understand them better.

    3- Reduce the amount of time required for users to get to the destination. Design your navigation to get visitors where they want to go with the least number of clicks possible. When designing a website, remember the three-click rule, which says that your viewers should never be more than three clicks away from what they are looking for.

    4- Include navigation options in the footer of your site. A footer is where visitors expect to find navigation options and contact information.

  • Avoid distracting autoplay, avoid the autoplay feature. Including an auto-playing video or audio on your site can make it difficult for users to navigate it. Also, these features can make it difficult to find the CTA. Instead of enabling autoplay features, simply allow users to click the play button.

  • Make it easy to scan your pages. Chunk your information into groups to make it easier to digest visually. Breaking walls of text by headers or bullet points.

  • Visual hierarchy entails arranging and organizing website elements so visitors naturally gravitate to the most important elements first by adjusting the position, color, or size of certain elements. Each page has 1 main heading and should be the biggest title on the page. and the section title should be bold and big and the subtitle small and light also the subtitle should be under the section title.

  • Place images near the relevant text and Don’t embed important text inside images.

  • Having a nice-looking 404 page will assist in ensuring the user experience is improved. Also, including quick links on the 404 page would be good for UX.

  • Spacing. The space between sections for example should be the same at the top and the bottom, and the same space on each page. in general, ensure there is consistency with spacing in the design.

  • Always follow the Material Design.