Human-Centered Design

Page tree

Versions Compared

Old Version 9

changes.mady.by.user Robert Fay

Saved on

compared with

New Version 10

changes.mady.by.user Robert Fay

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.


Info

This is a widget that can be used on every page for navigation. Rather than using the Atlassian User Interface (AUI) nav component, I instead used buttons, so "blue hyperlinked" items refer to those that can be selected and this example with "Overview" without blue text refers to the selected state. Note the right-aligned nav idea to allow people to choose methods on the fly.


HTML
<nav class="aui-navgroup aui-navgroup-horizontal">
<div class="aui-navgroup-inner">
<div class="aui-navgroup-primary">
<div class="aui-nav-heading"></div>

	<button class="aui-button aui-button-light">
	Overview
	</button>

	<button class="aui-button aui-button-link aui-dropdown2-trigger" aria-controls="services-dropdown">How We Can Help  
	</button>
	<aui-dropdown-menu id="services-dropdown" aria-controls="services">
		<aui-section id="services">
        	<aui-item-link href="#">Coaching</aui-item-link>
			<aui-item-link href="#">Events</aui-item-link>
			<aui-item-link href="#">Standards</aui-item-link>
			<aui-item-link href="#">Training</aui-item-link>
		</aui-section>
		</aui-dropdown-menu>

	<button class="aui-button aui-button-link aui-dropdown2-trigger" aria-controls="results-dropdown">Customer Results  
	</button>
	<aui-dropdown-menu id="results-dropdown" aria-controls="results">
		<aui-section id="results">
        	<aui-item-link href="#">Case Studies</aui-item-link>
			<aui-item-link href="#">Data-driven Results</aui-item-link>
		</aui-section>
		</aui-dropdown-menu>

	<button class="aui-button aui-button-link aui-dropdown2-trigger" aria-controls="insights-dropdown">Insights  
	</button>
	<aui-dropdown-menu id="insights-dropdown" aria-controls="insights">
		<aui-section id="insights">
        	<aui-item-link href="#">Blog</aui-item-link>
			<aui-item-link href="#">Methods</aui-item-link>
			<aui-item-link href="#">Videos</aui-item-link>
		</aui-section>
		</aui-dropdown-menu>
		
		<button class="aui-button aui-button-link">
		<a href="#">Our Team</a>
	</button>		
</div>

<div class="aui-navgroup-secondary">
<div class="aui-nav-heading"></div>
<button class="aui-button aui-dropdown2-trigger" aria-controls="methods-dropdown"><span class="aui-icon aui-icon-small aui-iconfont-configure"></span>
  Methods & Tools  
</button>

<aui-dropdown-menu id="methods-dropdown" aria-controls="right-aligned">
	<aui-section id="right-aligned">
        <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/Affinity+Diagram">Affinity Diagram</aui-item-link>
        <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/Card+Sorting">Card Sort</aui-item-link>
        <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/Change+Management">Change Management</aui-item-link>
        <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/Collaborative+Sketching">Collaborative Sketching</aui-item-link>
	</aui-section>
</aui-dropdown-menu>
</div>
</div>

...