{"id":89126,"date":"2021-02-24T12:46:07","date_gmt":"2021-02-24T10:46:07","guid":{"rendered":"https:\/\/happybrain.it\/ui-design-al-top"},"modified":"2021-09-14T09:22:19","modified_gmt":"2021-09-14T07:22:19","slug":"ui-design-al-top","status":"publish","type":"post","link":"https:\/\/happybrain.it\/en\/2021\/02\/24\/ui-design-al-top\/","title":{"rendered":"Top of UI Design"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column column_width_percent=&#8221;80&#8243; gutter_size=&#8221;3&#8243; overlay_alpha=&#8221;50&#8243; shift_x=&#8221;0&#8243; shift_y=&#8221;0&#8243; shift_y_down=&#8221;0&#8243; z_index=&#8221;0&#8243; medium_width=&#8221;0&#8243; mobile_width=&#8221;0&#8243; width=&#8221;1\/1&#8243;][vc_custom_heading heading_semantic=&#8221;h1&#8243; uncode_shortcode_id=&#8221;115384&#8243;]Optimize 100% your design&#8230; Assured results![\/vc_custom_heading][vc_column_text uncode_shortcode_id=&#8221;311798&#8243;]How much time do you spend to optimize your website, funnel and conversion processes?<br \/>\nMuch of this analysis work is focused on meeting user expectations and increasing user engagement. These <a href=\"https:\/\/www.paldesk.com\/8-rules-of-good-ui-design\/\" target=\"_blank\" rel=\"noopener\">8 rules<\/a> can help you improve your design![\/vc_column_text][vc_custom_heading separator=&#8221;yes&#8221; separator_color=&#8221;yes&#8221; uncode_shortcode_id=&#8221;205004&#8243;]1. Accessibility[\/vc_custom_heading][vc_column_text uncode_shortcode_id=&#8221;199707&#8243;]Accessibility is one of the aspects that is usually taken into account only after the release, especially if users complain of difficulties using the site or the app. The majority of web designers know, however, that the choice of <b>suitable colors<\/b>, <b>readable fonts<\/b> and the <b>immediate call to action <\/b>insertion are an integral and fundamental part of the design.<\/p>\n<p>Don\u2019t forget to check also on mobile. 60% of the traffic to your site will come from <b>smartphones<\/b>. Make sure everything works well and that the most important content is visible on the first scroll or easily accessible.<\/p>\n<p>Finally check the <b>loading speed<\/b>. If the content takes a long time to display, the user may get tired and quit. You can help with cache systems, minification of resources (HTML, CSS, JS), use of CDN and of course choice of read images or new generation (webp).[\/vc_column_text][vc_custom_heading heading_semantic=&#8221;h3&#8243; separator=&#8221;yes&#8221; separator_color=&#8221;yes&#8221; uncode_shortcode_id=&#8221;120297&#8243;]2. Linearity and consistency[\/vc_custom_heading][vc_column_text uncode_shortcode_id=&#8221;143955&#8243;]The keyword for your project and design is consistency. What does that mean? Simple! Follow these simple rules:<\/p>\n<ul>\n<li aria-level=\"1\">few fonts and used in a coordinated manner with distinction between titles and paragraphs;<\/li>\n<li aria-level=\"1\">visual elements or unique design schemes for photos and icons;<\/li>\n<li aria-level=\"1\">design coherence between desktop, mobile and any other systems such as mobile apps.<\/li>\n<\/ul>\n<p>If some element is out of tune, you may lose the trust of the users. Consistency brings confidence, professionalism and therefore positive results in the short and long term![\/vc_column_text][vc_single_image media=&#8221;89128&#8243; media_width_percent=&#8221;100&#8243; alignment=&#8221;center&#8221;][vc_custom_heading heading_semantic=&#8221;h3&#8243; separator=&#8221;yes&#8221; separator_color=&#8221;yes&#8221; uncode_shortcode_id=&#8221;549778&#8243;]3. Contents[\/vc_custom_heading][vc_column_text uncode_shortcode_id=&#8221;812416&#8243;]Start from the definition of the sitemap! Organize your content so that they are well distinguished and above all<b> interesting.<\/b> How many users could you attract by talking about <b>vertical topics<\/b>? Remember to add text images. We all got much lazier! So using photos and icons is an excellent solution to store concepts and make you understand the content of that page immediately.<br \/>\nSpend some time <b>updating<\/b>, don\u2019t let your project become static over time. Always try to offer new topics to become a point of reference.[\/vc_column_text][vc_custom_heading heading_semantic=&#8221;h3&#8243; separator=&#8221;yes&#8221; separator_color=&#8221;yes&#8221; uncode_shortcode_id=&#8221;116131&#8243;]4. All right?![\/vc_custom_heading][vc_column_text uncode_shortcode_id=&#8221;756749&#8243;]It takes a <b>semi-minimalist approach.<br \/>\n<\/b>No mess, sure, but don\u2019t limit yourself too much. Guide your target audience to completing your purchase or goal lead, in a clear and simple way. Get help from other users with recommendations and pass the word.<br \/>\nTry to anticipate emotional and rational needs, using design to create <b>connections.<br \/>\n<\/b>The idea is that the user feels free to explore your site or app without feeling abandoned. So use pop-ups, videos, dedicated calls to action and easily recognizable pictograms to help them reach the content of interest.[\/vc_column_text][vc_custom_heading heading_semantic=&#8221;h3&#8243; separator=&#8221;yes&#8221; separator_color=&#8221;yes&#8221; uncode_shortcode_id=&#8221;128544&#8243;]5. Feedback in real time[\/vc_custom_heading][vc_column_text uncode_shortcode_id=&#8221;792247&#8243;]What happens? Have I registered? Have I sent the order? Have they received my message?<br \/>\nReal-time feedback to the user involves him more in the processes.<br \/>\nUse design elements that can interact with your target audience. <b>Alerts, error or success messages, page loading<\/b>, <b>hovers<\/b> that react to mouse movement, touch or swipe. Your project must always respond to the user![\/vc_column_text][vc_custom_heading heading_semantic=&#8221;h3&#8243; separator=&#8221;yes&#8221; separator_color=&#8221;yes&#8221;]6. Icone mon amour![\/vc_custom_heading][vc_column_text uncode_shortcode_id=&#8221;127907&#8243;]Some items are <b>easily recognizable<\/b> by users, so\u2026 Talk to icons!<br \/>\nThe graphic symbols can help you to convey important concepts such as payment methods, return conditions, transport information that are essential today in decision-making.<br \/>\nYour users should always recognize all the design elements as buttons and interactive objects without thinking twice. This brings <b>clarity and familiarity<\/b> to the entire design. On the other hand, if you create your own icons and other items that deviate from the standard (such as using a different icon for search instead of a magnifying glass), you risk completely confusing the user. And confusion, as you know, leads to abandonment.[\/vc_column_text][vc_single_image media=&#8221;89129&#8243; media_width_percent=&#8221;100&#8243; alignment=&#8221;center&#8221;][vc_custom_heading heading_semantic=&#8221;h3&#8243; separator=&#8221;yes&#8221; separator_color=&#8221;yes&#8221; uncode_shortcode_id=&#8221;330589&#8243;]7. Patterns of movement[\/vc_custom_heading][vc_column_text uncode_shortcode_id=&#8221;137912&#8243;]Most users are used to the <strong>fast scrolling<\/strong> of the page. Keep this in mind in the design process.<br \/>\nThe pagination of the elements has almost completely disappeared. It completes the user\u2019s <strong>memory schemes<\/strong>by following his habit, taking into account the gestures and interactions of the menu.<br \/>\nTo simplify these findings you can use tools such as <a href=\"https:\/\/crazyegg.com\" target=\"_blank\" rel=\"noopener\">Crazyegg<\/a>, <a href=\"https:\/\/www.datatrics.com\" target=\"_blank\" rel=\"noopener\">Datatrics<\/a> or <a href=\"https:\/\/www.hotjar.com\/\" target=\"_blank\" rel=\"noopener\">HotJar<\/a>. These software helps you to build scroll maps and heat maps to better understand the processes of using your site by users.[\/vc_column_text][vc_custom_heading heading_semantic=&#8221;h3&#8243; separator=&#8221;yes&#8221; separator_color=&#8221;yes&#8221; uncode_shortcode_id=&#8221;986306&#8243;]8. Winning hierarchy[\/vc_custom_heading][vc_column_text uncode_shortcode_id=&#8221;104327&#8243;]The most important elements must always be at the top of the page! Value key content using different fonts, sizes and colors. Use color to create contrasts and get a priority effect, using similar visual elements for a greater sense of order (see step 2). The goals for you and your designer must be:<\/p>\n<ul>\n<li aria-level=\"1\">create order;<\/li>\n<li aria-level=\"1\">facilitate the movement;<\/li>\n<li aria-level=\"1\">offer an intuitive navigation;<\/li>\n<li aria-level=\"1\">improve the user experience.<\/li>\n<\/ul>\n<p>[\/vc_column_text][vc_custom_heading heading_semantic=&#8221;h4&#8243; separator=&#8221;yes&#8221; separator_color=&#8221;yes&#8221;]That&#8217;s all folks :)[\/vc_custom_heading][vc_column_text uncode_shortcode_id=&#8221;863925&#8243;]A few simple rules can help your design to be more effective and incisive. By focusing on the needs of the user and following the <b>best practices<\/b> of the web and your reference sector, you can create a digital product that can <b>overcome current and future competitors.<\/b><\/p>\n<p>Bad news\u2026 The <b>average life <\/b>of a web project or mobile application is <b>3 years.<\/b> So get ready to keep it updated over time to always be in pole position![\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>How can you make your website or application more effective? Follow these 8 simple rules to best your lead and conversion processes.<\/p>\n","protected":false},"author":1,"featured_media":89127,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[281],"tags":[235,244],"class_list":["post-89126","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design","tag-web-design","tag-strategy"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/posts\/89126","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/comments?post=89126"}],"version-history":[{"count":0,"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/posts\/89126\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/media\/89127"}],"wp:attachment":[{"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/media?parent=89126"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/categories?post=89126"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/tags?post=89126"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}