Tuesday, December 10, 2013

Axure RP: Image over button - Where do I put the interaction?

Tool: Axure RP 7 Beta. It's a software to create high-fidelity interactive prototypes.

The problem: to create a button with custom image over it. On mouse hover over the button or over the image we want to display button's different style. In Axure 7 you can select image and button and convert them to Dynamic Panel, then you can apply any mouse/keyboard events interactions to it, for example OnMouseEnter and OnMouseOut. However, in this case, you will loose interaction styles on the button when your mouse is over the image instead of the button: button will not be highlighted.

Solution: First, create the Button Shape, and place the Image over it. Style it in the way it appeals to you. Now, select the both, the button and the image, and convert them into dynamic panel:

Give the new dynamic panel a name. It's a good practice: Double-click on the dynamic panel. It will bring Panel States dialog:  
Rename the default "State 1" to "Normal". It's optional, but more informative than just a "State 1" name, and will make better sense for you down the road: 
Duplicate "Normal" state to new state. Name it "Over". Or you can add a new state, and copy-paste the content from state 1 to state 2:
Double-click on the new state name to enter it. You should see the tab title saying panel name/state. Here is "MyDynamicPanel/Over":
Edit the content as you want it to appear on mouse hover. I edited the button background and text color:
Go back to you page. In the Interactions area on the right click "More Events" and choose OnMouseEnter:
In the Case Editor dialog, in "Click to add actions" area, click on "Set Panel State" :
Select "Set This Widget state to", at the bottom right of the dialog select the state "Over":
Submit the dialog. Now you should have "OnMouseEnter" interaction set "this to Over":
Repeat the interaction setup for "OnMouseOut" interaction. This time "set this widget" to "Normal" state:
Now you have both interactions set, and your button is ready! :
Now it's possible to go further, add OnMouseDown interaction, and "Set this widget to Down". UPDATE: I rebuilt this example, and added a third, "Red" state. To achieve proper interactions, I added OnMouseDown and OnMouseUp custom actions.Look at this self explanatory screenshot:
  The web page now looks like this (I added some explanations):
 You can see the result of these steps in live action here: http://kardash.net/portfolio/Calypso/Axure_button_example/home.html

BONUS: Axure 8 source: http://kardash.net/portfolio/Calypso/Axure_button_example.rp

Tuesday, November 26, 2013

SVG - XML based vector graphics to replace GIFs and PNGs

While doing UI design I faced problems with animated spinners, which I created in GIF format. One problem is I have to place spinning images on top of differently colored tiles, on various colors, which I cannot control. And second is the tiles are scalable, and the animated GIFs should scale as well. But they don't.

These issues though can be addressed by SVG format, which is supported by all major browsers except Internet Explorer (of course). IE doesn't understand animation in SVG.

(Note: if the SVG graphics doesn't work on this page as described, or for any other reason, you can visit a standalone demo page. On that demo page instead of <embed> tag I use <img>, which in the case of simple SVG animation works exactly the same. However to render it properly in Blogger posts I have to use either <embed> or <object> tags.)
Notice rough edges, and scaling quality loss on the last tile:

Well, with one compatibility issue: animation doesn't work in any version of Internet Explorer. Let's see what else we can do with SVG format.

Mouseover (achieved by CSS inside of SVG file)


All the non-animated SVG above are rendered as designed in all major browsers today. There are issues with animation in Firefox and Opera, but workarounds are possible. All css styling and scripting are inside of SVG files. SVG graphics was created in Adobe Illustrator, and then edited in text editor.

Tuesday, August 13, 2013

Design practice: How fast the transition animation for expandable panels should be

At some point I had an argument with a developer on how fast the transitional animation should be. In our application, Calypso Navigator, we are using a transition animation to give users a feedback of the expanding/collapsing process, and to explain this task visually by drawing more attention to the change.
This software has three main areas, which are collapsible panels: Main Menu, Favorite Tiles, and Windows Manager, as shown below.

[Expanded All screenshot]

[Collapsed All but Main Menu screenshot]

[Collapsed All but Favorite Tiles screenshot]

On my opinion the animation was too slow, at some cases it took about a second, however in my thinking it had to be instantaneous. The argument of the developer was: if it will be that fast, and the user can’t visually track what is changing and how, then the animation doesn’t make sense at all.

I opened Google page attempting to find what professional world’s opinion on this matter is, and found this guideline:

Here is the general thought over the use of the animation:
“Strategic use of animations and transitions can make your program easier to understand, feel smoother, more natural, and of higher quality, and be more engaging. But the gratuitous use of animations and transitions can make your program distracting and even annoying.”

So, further reading verbalized what I was thinking intuitively. The animation doesn’t have to affect the user’s productivity. And the first requirement to the speed of the animation is: it has to be quick, precisely: 200 milliseconds or less .
It’s important that the animation is easily ignorable, and doesn’t distract user’s flow. It’s not annoying, overly complex or overly long. It doesn’t create an additional delay: the user doesn’t have to wait to move to the next action. Good animations are not forcing users to watch. No matter how engaging or natural the animation is, nobody wants to wait for them exclusively.

And since Calypso Navigator is the productivity tool, the following applies to it. While a few special experiences can stand out, most other animations should have these characteristics (in the application with the focus on productivity):
Natural, realistic
Subtle, subdued
Fast, efficient

I created a special demo of transition animation (with the fade effect) in Calypso Navigator with the speed of 150 milliseconds, which is optimal by my perception:

What do You think about the transitional animation speed?