Sunday, January 28, 2018

Data visualization for Roadmap Microsite (Angular and D3.js)

While working for Calypso Technology I was given a task to build a Product Roadmap and Inventory Microsite. This would be a web application which visualize the all Calypso' current products as well as a future roadmap.
Since Calypso was using AngularJS, I employed the the same technology to build a front-end. As a designer I focused on UI and how exactly I would visualize the complex structure of the product line catalog.
I created a prototype, which was ready to be picked up by engineering team and to adopt for production.
For data visualization I used open-source Sankey diagram library based on D3.js. I couldn't find the the library with exact features I needed. So, I forked an existing github project, to create my own library tailored to the needs of this project. I called it styled_sankey.
Below are some examples I created to demonstrate the visual abilities of my new library (from simple to more complex):

On the Angular part the web app was up and running. With single page routing, in-line edit, and D3.js integration.
Screenshots of AngularJS web app:

Screenshot of the proof-of-concept products relationship diagram generated with Styled Sankey D3.js library:

Schema of object relationships:

The proposed database schema:

I have built a working prototype, and one of the hardest part for me, as a designer, was to marry D3.js with AngularJS. This work wasn't complete or tested on real users. However it gives a perspective of the approach to visualization, and modern web application front end libraries. 

Watch the prototype in action Youtube video.

Thursday, June 29, 2017

Interaction Design and Interactive Prototypes (Axure RP)

This page is demonstrating my skills as an Interactive Designer.
If I decide later I will explain how I developed these prototypes, and how I decided each particular interactive solution. Basically, why it works, why it worked for me.

Below are my examples of interactive design, along with the instructions how to use some of their interactive features. These Interactive Prototypes are not part of my portfolio. Notice these are just some examples. I did much more while working in Calypso Technology.

Interactive Prototypes created with Axure RP prototyping software

Forex/Equity Options Flow Pricer
1.    In the datagrid, in the "Enter new trade" only dropdown, choose several different types of trades.
Notice how datagrid is populated with the records.
Click on Buy/Sell and Call/Put icons.
2.    Choose Vanilla trade type. Click on [Hedge] button. Observe Error popup message, and highlighted missing field. Enter some letters inside the highlighted field. Click on [Hedge] button now. Observe how a new raw was added to the datagrid with the information you entered.
3.    Now click on [Save Strat] button. Observe the new Trade ID and transformation of [Save Strat] button into disabled [Saved] button.
4.    Click on the "EQ" (Equity) tab above datagrid. Notice differences in datagrid.
5.    Cells with yellow background are editable. Make empty any "Strike %" cell. Observe "Strike" and "Quantity" cells became editable. Enter anything in "Strike" cell. Observe "Strike %" and "Notional" became non-editable.

 All calculations are coded with JavaScript, styles are done with CSS/HTML.

Forex Trading Quick Entry console
1.    Find "Buy EUR" field. Enter "1M" there. Observe how other fields in the form are auto-populated. You can click on arrow down and choose preselected amount. You can remove any number and manually type your own. Observe the auto-formatting, and auto-calculation, depending on the currency trading rates. You can choose any different "Ccy Pair" and notice the different exchange rate, and currency titles.
2.    Click on the "Buy EUR" or "Sell USD" titles (cells with green or red background). Observe the reverse in colors and notionals.
3.    Play (enter) with different numbers in "Spot", "Spot Margin", "Final Rate", "Margin Value" fields. Observe the auto-calculated changes in fields.
4.    Click on "Create Ticket" green button. Observe the changes in "Position Monitor" datagrid on the right, and added new line in the bottom "Trade Blotter" datagrid.

All calculations are coded with JavaScript, styles are done with CSS/HTML.

LiftDay mobile application
On the Onboard Wizard click on any buttons.
To proceed further during in the wizard click on the dots at the bottom.

Calypso PnL Dashboard
1.    Click on "Close Hints", then click on and different Layouts.
2.    On the left panel choose "P&L Dashboards with Errors", and click on "Errors(2)" tab.

Proof of concept developed with AngularJS

Calypso Product Inventory and Roadmap web application

Recorded video of developed Proof of Concept:

Technologies used: AngularJS web app, and D3.js javascript library with custom component.

See also my Sankey diagram project on GitHub:

And a live example of a Sankey diagram based on D3.js library:

Shoot me a message if you have any questions about these prototypes.

Tuesday, July 15, 2014

Defining a Persona

After some small research I realized it really depends on your own goals – what exactly you want to know about the user. Below are some of my thoughts how to define a persona, but they are rather “recommendations” than a solid template:

Defining a Persona

A persona represents a group of users who exhibit similar behavioral patterns in their use of technology or products, customer service preferences, lifestyle choices, and the like.

A persona details should list relevant to your business [or to your software] items.  One of the ways defining them is to conduct users interviews on the customer side (among potential end users), and starting from 30 interviews we can create a definition of our persona. Other thought how it can be done is through anonymous online surveys.

There are some details we may find about a persona, split on two main categories:

1. Personal Profile

1.     Age range (or broader: demographics)
2.     Location (or broader: cultural background)
3.     General likes/dislikes (list at least several items for each)
4.     Typical day off-work: Common everyday tasks and computer usage (describe)

2. Professional Expertise (these are still very general items. We may ask people to answer very specific question)

1.     Goals/needs
2.     Typical work day: Common everyday tasks, timing, and software usage
3.     [Type of industry of your business] software experience (describe: what, why, how, how long, likes/dislikes)
5.     Experience with a specific software of your interest (what product, why, how many years, likes/dislikes)
6.     Experience of use of operation system (MS Windows, version, years)
7.     MS Office experience

So, basically we should have a list of questions to ask users. 

After asking certain amount of people we can build a bigger picture, i.e. a persona.

10 Principles of Good Design (by Dieter Rams)

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:

BONUS: Axure 8 source:

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?