Difference between Floating action button (FAB) and Raised button - material-design

It would be interesting to know the usage difference between FAB and Raised Button. In which particular use-cases these buttons are to be used. ?
One example.
Can I use FAB in a static position (It doesn't scroll with content) ?
Thanks

Take a look at what official material guidelines say about FAB: (Google design guidelines)
Not every screen needs a floating action button. A floating action button represents the primary action in an application.
and
Make floating action buttons positive actions like Create, Favorite, Share, Navigate, and Explore.
Here some typical examples of FAB:
So what does it look like in real world app? Let's take a look at Gmail:
Always think about the current screen before using FAB. Is there any action that is likely to be used by most of the users? What is the point of this screen? What do you want the users to do with this screen?
FAB can also contain multiple actions (it's not in the official specs though) which are opened after touching the primary FAB. Evernote app uses that for example:
I hope this clears up the FAB usage a bit.
Raised button is regular button that can be used anywhere needed. It's just important to distinguish between raised button and flat button. Material guidelines are here to help you with that: Material design guidelines.

Related

How should a material design dialog box be animated?

I'm writing an application with a material design layout, but can't find any guidelines on how to animate dialog boxes onto the screen.
This suggests that the box should just "ping" into existence, but that seems to go against the ethos of the design, with its animations and tactile feel.
Does anyone have more information on what the correct course of action is?
Here are the specs for dialog boxes, by the way: http://www.google.co.uk/design/spec/components/dialogs.html#dialogs-specs
I took a look at existing Google apps, and it appears that the dialog box fades in at full size. The transition is pretty quick, like 0.25 seconds.
If you go into Developer Options and change Window animation scale to 10x, it will slow things down enough for you to see it clearly.
I chose Google Calendar > New Event, then select the different fields to see the dialog appear.
Here's a screen recording I did that shows the animation.
https://www.youtube.com/watch?v=jbU5yRhSbKg

How to create a user-impaired accessible website: surfing without a mouse?

I have created a webpage using Backbone.js and Marionette.js that mostly consists of a bootstrap accordion view that displays a list of items when the accordion header is clicked. Each item can also be clicked, which will show a hidden div of detailed information that pertains to that particular item.
I would like to make this site accessible to people who might not be using a mouse (Maybe they're visually impaired and using a screen reader? Maybe they just don't like clicking things? Either way.) I'm thinking that this would mean being able to press the Tab key to get to the accordion, pressing Space or Enter to open the accordion, Tabbing down (or down arrow key?) through the list items, and then using Space or Enter to show the selected item's hidden div.
I'm finding it difficult to find information on how to add a feature like this, since searches like "How to make an accessible website that can be used without a mouse" mostly turns up blogs on what a developer should do to add accessibility to a page, and not much on how to do it.
Currently, the page doesn't really respond to any keyboard buttons. Any tips or resources you could share would be extremely appreciated. I've been fiddling with ARIA role tags, but I'm either not doing it right or it's not the answer here.
You have to use tabindex
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.tabIndex
Screen readers automatically read whatever element is the activeElement

Menu Button that does not dismiss options onclick in JavaFX 2

I am quite new in JavaFX and I have a question about the design. I am creating my main menu in FXML using Scene Builder. I have various menu buttons and each of these have a sub-menu. These sub-menu options will open new windows. Is it possible to declare these submenu choices so they do not dissapear after I click on them? If so, can I declare it in my fxml or I have to do it programatically?
Also, is it possible to detach it from the menu button? I would like to have my menu choices around 1 cm away from the menu button itself.
Thank you
Suggested Alternate Solution
If you want more flexibility in positioning a popup menu after a button click as well as fine control over when the menu shows and hides, try using a Button + a ContextMenu rather than a MenuButton.
The relevant methods are:
contextMenu.show(anchorNode, side, dx, dy)
contextMenu.hide()
There is sample code for triggering a context menu on a button press button in the ContextMenu javadoc.
You might also need to monitor the context menu's showingProperty and in a listener show the menu again if the JavaFX system has decided to try and hide it after some user action and you still want the menu visible.
Answers to additional unrelated comments
OK It sounds logical, yet since Im not really good in JavaFX yet, your Idea is quite challenging.
It's not that hard to implement, but from your subsequent comments it sounds like it's probably not the user interface you want for your users anyway (which makes sense to me because the interface you describe in your question seems a little strange).
I thought If it would be easier to have a static xml that have various menu choices, lets say aligned to the right and then whenever I click one of the choices, a new FXML would be loaded in the middle of the screen holding buttons for a submenu?
That seems logical. Sounds like a JavaFX version of a traditional web page layout with a navigation menu on the side controlling a content pane in the center.
A Java only version of that is: How to have menus in java desktop application. You could adapt that to a FXML based version without too much difficulty.
You might also be interested in Managing Multiple Screens in JavaFX.
Also, any tutorial for beginners would be greatly appreciated. These Oracle ones dont make too much sense for me
If you are beginning JavaFX, I recommend using just the Java API portions of JavaFX until you become familiar with them, and then use FXML only after you are comfortable with the Java API.
Personally, I think the Oracle JavaFX Tutorials are excellent. The difficulty for beginners is that the tutorials are also part reference material, which complicates portions of them (especially the deployment related pieces).
If you prefer a different tutorial style see:
Makery JavaFX tutorial (good for beginners)
zenjava tutorials (more advanced)

Web accessibility: does it make sense for focus to go to another element other than the whole page frame or the first focusable element on the page?

My question is about focus management for web accessibility. When we launch a popup/dialog, does focus always need to go to the first focusable element for accessibility reasons or is it acceptable to set focus on an element that we think the user is more likely to want to work with?
For example, if a dialog starts with an input field and a cancel link followed by a dropdown and we think the user would most likely want to work with the dropdown when the dialog loads, is it ok to set focus on the dropdown element? In this case, how would the user know about the previous focusable elements existing on the dialog? But, if the dropdown is where 80% of the users will want to be when the dialog is launched, it doesn't make much sense placing focus on the initial input field...
thoughts?
Based on my research and what public opinion is: http://webaim.org/discussion/mail_thread?thread=5435 it seems like where the focus goes for a modal dialog/popup would depend on the usecase. For example, it makes sense to set focus on the search input field for www.google.com although there are preceding elements that the user can interact with -- this maximizes usability for screen reader and keyboard only users. But, in general the focus needs to go to the first element the user can interact with -- depends on the scenario.
I would caution against setting focus to anything other than the first form element or headings/content that introduce the form. See WCAG 2.0 Focus Order:
If a Web page can be navigated sequentially and the navigation
sequences affect meaning or operation, focusable components receive
focus in an order that preserves meaning and operability. (Level A)
While the case you present is I think an edge case, I think the focus order rules still apply. If you think that most users will want to interact with the select why not put it first in the form rather than set focus to an element in the middle of the form?

Is there a current method of indicating to users that a link won't take them off site?

It's currently impossible for a user to tell if clicking on something will load something in their current page or take them to a new page. I feel that this is why many sites use hoverable dropdown menus, so that they don't have to click anything. This can be messy, though, if you don't intentionally hover over something and forms the habit of hovering over things and expecting a result.
There should be a standard way to identify links as external or internal. Maybe a little hover effect or symbol used in the link?
Is there anything like this, and if not, should there be?
I believe by "internal" you mean that the link does some javascript thing, and does not load a new page.
I think an effective way to indicate an immediate action is by using a button style, rather than a standard looking link. A blue underlined link somehow seems much more likely to jump to a new page than something that looks like a button.
Give the button an appropriate label and/or symbol that indicates an instant action. For example, a button that expands a section open might use a little triangle that rotates as the expanding happens.
You can also establish a consistent style for "internal" actions, use a particular color or style for links that don't take the user to a new page. Sometimes I use blue for normal links and a shade of purple for internal ones.
In general, I find it isn't that important to specify. If a user sees a link or button that like it will get them what they want, they will click it. It is up to you as the designer of the website to decide if the most appropriate action is a new page, or an action on the current page. Unless the user is going to lose some work they have done, going to a new page shouldn't be a problem. If it really took the user by surprise, they can always go back. In my experience, users don't worry about it either way.

Resources