<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Interface Design - Vasilis Baimas, XD Designer</title>
	<atom:link href="https://www.vbaimas.com/category/interface-design/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.vbaimas.com/category/interface-design/</link>
	<description></description>
	<lastBuildDate>Thu, 09 Mar 2023 11:46:08 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.1.1</generator>

<image>
	<url>https://www.vbaimas.com/wp-content/uploads/2020/04/cropped-logo-browser-1-48x48.png</url>
	<title>Interface Design - Vasilis Baimas, XD Designer</title>
	<link>https://www.vbaimas.com/category/interface-design/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Global Navigation In User Interface Design</title>
		<link>https://www.vbaimas.com/global-navigation-in-user-interface-design/</link>
		
		<dc:creator><![CDATA[Vasilis Baimas]]></dc:creator>
		<pubDate>Sun, 01 Sep 2019 16:24:00 +0000</pubDate>
				<category><![CDATA[Interface Design]]></category>
		<guid isPermaLink="false">http://www.vbaimas.com/?p=1975</guid>

					<description><![CDATA[<p>As a UI designer or developer, you are constantly dealing with an amazing and unpredictable element: the user. Users rely on your help to guide them through your website, frequently taking turns that you can&#8217;t anticipate. What is a Navigation Menu? The navigation menu is typically found at the top of each website, or both [&#8230;]</p>
<p>The post <a href="https://www.vbaimas.com/global-navigation-in-user-interface-design/">Global Navigation In User Interface Design</a> appeared first on <a href="https://www.vbaimas.com">Vasilis Baimas, XD Designer</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">As a UI designer or developer, you are constantly dealing with an amazing and unpredictable element: the user. Users rely on your help to guide them through your website, frequently taking turns that you can&#8217;t anticipate.</p>



<h2 class="wp-block-heading">What is a Navigation Menu?</h2>



<p class="wp-block-paragraph">The navigation menu is typically found at the top of each website, or both at the top and bottom of the screen. Clicking on a menu item brings up a list of related items. Users can make a selection by moving the cursor over the items and clicking on the desired choice.</p>



<p class="wp-block-paragraph">Generally, global navigation represents the top-level pages of a site structure, or the pages below the home page.</p>



<ul class="wp-block-list">
<li>The main navigation provides an overview and answers important questions users may have when they first come to a site.</li>



<li>It allows users to switch topics, helping visitors get to other sections of a site efficiently.</li>



<li>Global navigation aids in orientation, helping users to understand where they are on a site.</li>



<li>It also helps when users get interrupted while navigating and reminds visitors when they are on a site.</li>
</ul>



<h2 class="wp-block-heading">Make the Navigation Menu Usable.</h2>



<p class="wp-block-paragraph">Menus are a navigation method that allows users to go directly to specific parts of a website. Almost every good website has at least one menu. A useful feature is search, which helps users find further information not found in the main menu.</p>



<p class="wp-block-paragraph">Usability refers to how easily and quickly a device can be learned and put to work. If it takes two minutes to figure out a menu, then it probably suffers from poor usability. However, if its purpose and use are immediately clear, then the menu has good usability.</p>



<p class="wp-block-paragraph">It&#8217;s important to note that our definition of usability emphasizes &#8220;quickly&#8221; instead of &#8220;beautifully&#8221;.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p class="wp-block-paragraph">One of the first things you learn in usability testing is that a system should be simple to use and fast.</p>
</blockquote>



<p class="wp-block-paragraph">Usability is more important than aesthetic splendor, as design and corporate branding can often conflict with usability. Time savings are also a more quantifiable measure of a design&#8217;s success compared to its alternatives.</p>



<h2 class="wp-block-heading">Usability Problems</h2>



<p class="wp-block-paragraph">For example, if you give a user the task of finding a particular piece of information with your menu, you may discover that it takes extra time when the menu includes branding or other overhead.</p>



<p class="wp-block-paragraph">However, we also aim to make the menu easy for users to use. If your menu is immediately readable and understandable, but the user has to position their mouse pointer in tiny squares to operate it, the menu is still not usable. This is illustrated in the example opposite, which has many problems, including mysterious wording and bad contrast. The biggest usability problem is that you have to click on the title to navigate to any subsection.</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><div class="wp-block-image">
<figure class="aligncenter size-full"><img fetchpriority="high" decoding="async" width="2560" height="2200" src="https://www.vbaimas.com/wp-content/uploads/2021/02/vbaimas-usable-menu-homepage.jpg" alt="The Main Navigation Menu" class="wp-image-4031" title="The Main Navigation Menu" srcset="https://www.vbaimas.com/wp-content/uploads/2021/02/vbaimas-usable-menu-homepage.jpg 2560w, https://www.vbaimas.com/wp-content/uploads/2021/02/vbaimas-usable-menu-homepage-300x258.jpg 300w, https://www.vbaimas.com/wp-content/uploads/2021/02/vbaimas-usable-menu-homepage-590x507.jpg 590w, https://www.vbaimas.com/wp-content/uploads/2021/02/vbaimas-usable-menu-homepage-768x660.jpg 768w, https://www.vbaimas.com/wp-content/uploads/2021/02/vbaimas-usable-menu-homepage-1536x1320.jpg 1536w, https://www.vbaimas.com/wp-content/uploads/2021/02/vbaimas-usable-menu-homepage-2048x1760.jpg 2048w" sizes="(max-width: 2560px) 100vw, 2560px" /><figcaption class="wp-element-caption">The Main Navigation Menu</figcaption></figure>
</div></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="2560" height="2200" src="https://www.vbaimas.com/wp-content/uploads/2021/02/vbaimas-usable-menu-entire-page.jpg" alt="The Subsection" class="wp-image-4032" title="The Subsection" srcset="https://www.vbaimas.com/wp-content/uploads/2021/02/vbaimas-usable-menu-entire-page.jpg 2560w, https://www.vbaimas.com/wp-content/uploads/2021/02/vbaimas-usable-menu-entire-page-300x258.jpg 300w, https://www.vbaimas.com/wp-content/uploads/2021/02/vbaimas-usable-menu-entire-page-590x507.jpg 590w, https://www.vbaimas.com/wp-content/uploads/2021/02/vbaimas-usable-menu-entire-page-768x660.jpg 768w, https://www.vbaimas.com/wp-content/uploads/2021/02/vbaimas-usable-menu-entire-page-1536x1320.jpg 1536w, https://www.vbaimas.com/wp-content/uploads/2021/02/vbaimas-usable-menu-entire-page-2048x1760.jpg 2048w" sizes="(max-width: 2560px) 100vw, 2560px" /><figcaption class="wp-element-caption">The Subsection</figcaption></figure>
</div></div>
</div>



<p class="wp-block-paragraph">When we establish guidelines for good usability in web menus, we aim to make it easy and quick for users, who are often but not always customers, to navigate your website and complete their tasks.</p>



<h2 class="wp-block-heading">Rules To Improve the Usability of Navigation Menus</h2>



<p class="wp-block-paragraph">This is not an exhaustive list of rules for designing a navigation menu, but they are certainly all factors you need to keep in mind when creating one.</p>



<h3 class="wp-block-heading">Navigation Menus Should Take Into Consideration the User’s Primary Task</h3>



<ol class="wp-block-list">
<li>Navigation menus should consider the user&#8217;s main task.</li>



<li>They must be distinct from the content.</li>



<li>The user should be able to easily scan the navigation menu for information.</li>



<li>Navigation menus must be clearly readable.</li>



<li>They should also be easy to operate.</li>



<li>Navigation menus should load as quickly as possible.</li>



<li>They must behave as the target user would expect.</li>



<li>They must work on multiple browsers, just like the overall website.</li>



<li>Navigation menus must be logical across the site.</li>



<li>Usability should be prioritized over branding.</li>



<li>They should show the user&#8217;s location within the site.</li>



<li>Another important point is that they must be easily accessible.</li>
</ol>



<h2 class="wp-block-heading">Good Examples Of Global Navigation</h2>



<h3 class="wp-block-heading">WordPress.org</h3>



<p class="wp-block-paragraph"><a href="http://wordpress.org/" target="_blank" rel="noreferrer noopener">WordPress.org</a> is a popular website platform that allows users to use it as a CMS. You can find more information about it at its <a href="https://wordpress.org/" target="_blank" rel="noreferrer noopener">official website</a>.</p>



<figure class="wp-block-image alignwide size-full"><img decoding="async" src="https://www.vbaimas.com/wp-content/uploads/2021/02/vbaimas-usability-menu-WordPress.png" alt="WordPress. The Page Of Get Involved." class="wp-image-4041" title="WordPress. The Page Of Get Involved."/><figcaption class="wp-element-caption">WordPress. The Page Of Get Involved.</figcaption></figure>



<p class="wp-block-paragraph">The global navigation of WordPress displays the location of the current page. This is achieved by changing the color of the selected page label. To draw extra attention to the user, WordPress uses an arrow to point out the selected label.</p>



<h3 class="wp-block-heading">A-List Apart</h3>



<p class="wp-block-paragraph">A list Apart is a prominent <a href="https://alistapart.com/">online magazine<span class="ex"></span></a> for web design and web development.</p>



<figure class="wp-block-image alignwide size-full"><a href="blob:https://www.vbaimas.com/e5350a0f-3edc-4f4c-a400-b205924ce4ec"><img decoding="async" width="2010" height="1712" src="https://www.vbaimas.com/wp-content/uploads/2019/09/global-navigation-a-list-a-part.png" alt="The Main Navigation Menu Of A-List Apart" class="wp-image-1976" title="The Main Navigation Menu Of A-List Apart" srcset="https://www.vbaimas.com/wp-content/uploads/2019/09/global-navigation-a-list-a-part.png 2010w, https://www.vbaimas.com/wp-content/uploads/2019/09/global-navigation-a-list-a-part-300x256.png 300w, https://www.vbaimas.com/wp-content/uploads/2019/09/global-navigation-a-list-a-part-590x503.png 590w, https://www.vbaimas.com/wp-content/uploads/2019/09/global-navigation-a-list-a-part-768x654.png 768w, https://www.vbaimas.com/wp-content/uploads/2019/09/global-navigation-a-list-a-part-1536x1308.png 1536w" sizes="(max-width: 2010px) 100vw, 2010px" /></a><figcaption class="wp-element-caption">The Main Navigation Menu Of A-List Apart</figcaption></figure>



<p class="wp-block-paragraph">The navigation is kept to a minimum and unnecessary graphics are avoided. This feature allows readers to engage with the text without becoming distracted.</p>



<h3 class="wp-block-heading">Amazon</h3>



<p class="wp-block-paragraph">Another example is Amazon, an American multinational technology company and one of the world&#8217;s largest online retailers.</p>



<figure class="wp-block-image alignwide size-full"><a href="blob:https://www.vbaimas.com/5f26ea6b-acce-cc48-960c-805cf662a5a0"><img loading="lazy" decoding="async" width="2032" height="1616" src="https://www.vbaimas.com/wp-content/uploads/2019/09/global-navigation-amazon.png" alt="The Vertical Sidebar of Amazon" class="wp-image-1977" title="The Vertical Sidebar of Amazon" srcset="https://www.vbaimas.com/wp-content/uploads/2019/09/global-navigation-amazon.png 2032w, https://www.vbaimas.com/wp-content/uploads/2019/09/global-navigation-amazon-300x239.png 300w, https://www.vbaimas.com/wp-content/uploads/2019/09/global-navigation-amazon-590x469.png 590w, https://www.vbaimas.com/wp-content/uploads/2019/09/global-navigation-amazon-768x611.png 768w, https://www.vbaimas.com/wp-content/uploads/2019/09/global-navigation-amazon-1536x1222.png 1536w" sizes="auto, (max-width: 2032px) 100vw, 2032px" /></a><figcaption class="wp-element-caption">The Vertical Sidebar of Amazon</figcaption></figure>



<p class="wp-block-paragraph">Amazon utilizes a vertical/sidebar navigation, which arranges items in a single column on top of each other. This type of navigation is a versatile pattern that can be found on virtually every kind of website. It can accommodate a long list of links and can be used alongside sub-navigation menus or on its own. It is easily applied to primary site navigation that contains a lot of links.</p>



<h2 class="wp-block-heading">In Conclusion</h2>



<p class="wp-block-paragraph">It&#8217;s important to keep in mind that everything you publish on the web is intended for a user, and each user has unique background and real-world demands. Any efforts to make their web experience faster and easier is valuable to them, and ultimately to you.</p>



<p class="wp-block-paragraph">By ensuring that the navigational structure is easy-to-use and clear, you can encourage visitors to spend time on your site. This also helps direct them to the content or features that are important to them and your business.</p>
<p>The post <a href="https://www.vbaimas.com/global-navigation-in-user-interface-design/">Global Navigation In User Interface Design</a> appeared first on <a href="https://www.vbaimas.com">Vasilis Baimas, XD Designer</a>.</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
