Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Bio Menu

No description
by

Cera Taj

on 13 December 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Bio Menu

definition
place menu items in a circle around the clicked point. Therefore the user moves the mouse at different angles to reach different options, rather than moving it different distances. Angles are easier than distances to hold in motor memory than distances, and the user of the pie menu does not need to move the mouse such accurate distances. These factors make pie menus faster to use than rectangular menus
Bio Menu
we had two choices:
Traditional:
Cascading line menu (CS)

Visual search
Visual search results
Cascading line menus are good for visual search and therefore good for novices, particularly when there are lots of options to choose from.

Navigation - calculation
Navigation - calculation
Bio menus can work in specific situations :
(the best situations )
low number of options.
items can be represented as icons without a text, etc .

Advantages
Speed
Comfort
Subjective Visual Appeal

Disadvantages
Scalability
Information Density
Items may be obscured
Affordance
New:
Compact radial layout menu (CRL)

Cascading line menu wins every time.
14% - 31 % faster.
The more items on each level, the clearer the lead.

Navigation - results
Pie menus win in every version.
Up to 34% better on level 3
Because pie menus are so good at “navigating”, they are a great solution for expert users.

Why is the pie menu better?
Generally shorter navigation paths
No steering tunnels to worry about


Types of Bio menus
2. Position : Fixed or Directly contextual
Layout on
iPad
Path
3. Non-hierarchical
example :Second life
4. Hierarchical
Clock-wise: TechKnack, Kodu, Krystin Samp’s CRL, OneNote
Example of Bio menu

Gnome-Pie is a circular application launcher for Linux. 
OneNote
Use radial menus to display OneNote commands on Windows 8 tablet 
Air Command on the Galaxy Note 3
1.Hybrids
example :Maya and Blender
<button class="cn-button" id="cn-button">+</button>
<div class="cn-wrapper" id="cn-wrapper">
   <ul>
       <li><a href="#"><span class="icon-picture"></span></a></li>
       <li><a href="#"><span class="icon-headphones"></span></a></li>
       <li><a href="#"><span class="icon-home"></span></a></li>
       <li><a href="#"><span class="icon-facetime-video"></span></a></li>
       <li><a href="#"><span class="icon-envelope-alt"></span></a></li>
   </ul>
</div>
<div id="cn-overlay" class="cn-overlay"></div>


THE MARKUP
THE CSS
.csstransforms .cn-wrapper {
  font-size:1em;
  width: 26em;
  height: 26em;
  overflow: hidden;
  position: fixed;
  z-index: 10;
  bottom: -13em;
  left: 50%;
  border-radius: 50%;
  margin-left: -13em;
  transform: scale(0.1);
  transition: all .3s ease;
}
/* class applied to the container via JavaScript
that will scale the navigation up */
.csstransforms .opened-nav {
  border-radius: 50%;
  transform: scale(1);
}


How To Building A Circular Navigation With Css Transforms

(function(){
var button = document.getElementById('cn-button'),
wrapper = document.getElementById('cn-wrapper'),
overlay = document.getElementById('cn-overlay');

//open and close menu when the button is clicked
var open = false;
button.addEventListener('click', handler, false);
button.addEventListener('focus', handler, false);
wrapper.addEventListener('click', cnhandle, false);

function cnhandle(e){
e.stopPropagation();
}

function handler(e){
if (!e) var e = window.event;
e.stopPropagation();//so that it doesn't trigger click event on document

if(!open){
openNav();
}
else{
closeNav();
}
}
function openNav(){
open = true;
button.innerHTML = "-";
classie.add(overlay, 'on-overlay');
classie.add(wrapper, 'opened-nav');
}
function closeNav(){
open = false;
button.innerHTML = "+";
classie.remove(overlay, 'on-overlay');
classie.remove(wrapper, 'opened-nav');
}
document.addEventListener('click', closeNav); })();






THE JAVASCRIPT
1.
2.
3.
Full transcript