UI prototyping tool with widgets that can be grouped and edited is supercool

September 3, 2011 – 8:16 pm

UI prototyping tool with widgets that can be grouped and edited is supercool

Mockups become increasingly efficient when you have the ability to group objects and it becomes super powerful when you can edit the groups without ungrouping the objects

MockupTiger now has the ability to Edit groups Editable Mockup Groups/Symbols

When you group objects, the position is maintained with the child objects. You can stretch and drag the group objects. The child objects will enlarge or shrink based on the action you perform on the group. How do you edit the text of individual child Once you define the group, it becomes cumbersome to ungroup just for changing the text. For e.g If we want to change the text on the comment bubble, we simple double click on the bubble comment The UI will detect the mouse click and transfer the edit operation to the respective child.

Read more about building How to edit wireframe mockup groups

MockupTiger Wireframes is the best HTML5 wireframing application for Websites and Business Intelligence dashboards

Consider Dashboard Software for your next Excel Dashboards

wireframes

Is there any easy way to build Dashboards that are static in nature?

September 3, 2011 – 1:32 am

Is there any easy way to build Dashboards that are static in nature?

Did you ever imagine that you can simply punch some data
and create beautiful dashboards?

Dashboards that are static in nature?

So what is a static Dashboard?

A dashboard where you build the charts first and then punch data inside the charts. Later when you have new updates, you come back and edit the data directly. You can use these kind of simple dashboards without any technical knowledge.

They are so easy to use, just drag the charts from the library and then update the data.

One such mechanism of creating static dashboard is discussed here using Mockuptiger.

kpi_dashboard

wireframes

mockups

Read more about Static Dashboards

wireframes

Tiger can do both wireframes and mockups (tigger,tiggr,tigr)

HTML5 Mockups – Wireframes font rendering is tricky

August 31, 2011 – 12:06 pm

HTML5 Font rendering is tricky. It is not consistent across browsers.

Read how MockupTiger fixed the font rendering issue. You will also notice that with the fix, it is now possible to add any of your favourite font for wireframes. Why just limit to Comic Sans or Arial. Try the Google web fonts for instance.

Build beautiful Dashboard prototypes with MockupTiger Wireframes

Goodbye Excel! now I can have true charting prototypes with Wireframes and mockups from MockupTiger

mockups

Clickable Mockups – Wireframes with prototyping

August 28, 2011 – 8:07 am

When you build website wireframes or prototypes, clickable mockups is a standard requirement.

MockupTiger when released had Clickable prototyping feature using the Text widgets

Now all the text widgets, icons can be linked. There is a new element called hotspot that you can overlay on any kind of object/widget to simulate Clicking or interactivity

Read more about building Clickable Prototypes using Mockups

MockupTiger : Introducing new way to wireframe your Dashboards

August 18, 2011 – 11:11 am

InfoCaptor is now over 6 yrs old and over these years we have done numerous custom dashboard development work using our own software.

When the customer approaches us for a dashboard requirement usually they have a spreadsheet and very little documentation on what is required on their dashboard.

During this initial conversation we ask for any kind of paper sketch that they can share with us so we can begin analyzing the data and requirements.

We would then build a quick dashboard and send screenshots. The customer then starts seeing how their data is getting painted and suddenly their imaginative juices starts flowing. They come back with suggestions and improvements on the screenshot we just sent.

This process was almost the same for each and every customer we built the dashboard for and became too time consuming and un-productive.

So slowly we started building a Mockup Tool just for Dashboards

MockupTiger is our new webbased wireframing application.

You can create website sketch or full dashboard prototype in minutes.

Dashboard Wireframe

 

Focus. Focus. Focus

  • Just focus on the dashboard structure and layout
  • Use sample or test data to simulate the charts
  • Use real website widgets
  • Be more creative and flex with the options you want on your dashboard

Please visit MockupTiger for more details

How to Choose the Right Chart for You

March 13, 2011 – 10:05 am

While this might seem the least of your concerns when you are learning to dashboard, the question over which chart to use and when provides a stumbling block for many people. Some might find that they are all set to begin, before realising that they aren’t sure whether a bar chart or a line chart should be used. Others might select a chart without much thought, complete and implement their dashboard, without ever wondering if perhaps there may have been a more effective layout available.

In order to correctly select your chart you must first look at your data and decide what you want your chart to do. What information or story should it provide to the user? Once you have settled this question, the hardest part is over. Once you have decided what you need, you may realise that you need to move your data around a bit, so that it highlights the issues that are of most import. For example if you have decided that you want to show an evolving trend, you will need to arrange all of your data chronologically. If you wish to compare different aspects you may wish to adopt a data arrangement that is conducive to this. Occasionally you may wish to make use of pivot tables and formulas.

From here it should be a straightforward matter to decide which chart you would like to use. It is a good idea to make yourself familiar with all of the different options that are available, before you decide on a certain one. Excel has a wide range of charts, and most of them can be added to your dashboard easily and efficiently. Once this has been done you may wish to format the chart, adjust the title, label axes etc.

Add a Scroll Bar to a Table on your Excel Dashboard

March 8, 2011 – 8:28 am

When creating an Excel dashboard using Infocaptor you may often choose to include a table. This is usually fine and straightforward if the table is relatively small, with only a handful of entries. However it is usually more likely that your table will be large and detailed, with a number of entries. In this case it is neither practical nor useful to put all of the table on your dashboard. It would take up too much space, and in reality you would be left with a page containing a single table and maybe a chart or two.

Some people might recommend that you simply include the highest five or so results of the table on your dashboard, and eliminate the rest. However this may not be a very effective solution. Not only does it limit the amount of data your dashboard can hold, it drastically reduces its effectiveness as a business intelligence solution. User are not given a complete overview of the operation’s current status, and will have to go elsewhere to find the information they require.

A very simple method of eliminating this problem is to include a scroll bar in your data table. This is actually quite simple and does not require any programming or coding knowledge. In order to do this, place your complete set of a data on a single excel sheet. Then create a table for your dashboard. You should keep this table relatively small, with a limited number of rows, so that it does not take up too much space on the dashboard. Then click on Menu, followed by View, and then Toolbars. Choose ‘forms’ and then select scrollbar and create one on your page. Then right click on a cell in your table where you want your scroll bar to be. Then right click on the scroll bar and choose format control. You must set the maximum value to 91 and the minimum value to 1. Incremental change should also be 1, while the Page change should be set to the number of rows on your dashboard table.

Now you must connect your dashboard table to the table containing the original data. In the cell link box you write =OFFSET(Data!B3, Calculation!$C$4,0), where B3 represents the column containing your data and C4 is the position of your scroll control. You should now see a scroll bar in your dashboard table.

Make Tables Easier to Read Using Conditional Formatting

March 3, 2011 – 7:50 am

Many Excel dashboards make primary use of charts in order to display their data. However from time to time it is necessary to include a table, whether it is providing additional information for a chart, or if it is providing a range of filtering options. Occasionally horizontal bar charts can resemble tables also, and can benefit from some conditional formatting to improve their overall clarity.

Conditional formatting means implementing a set of formatting rules that are based on certain conditions. For example if you have a table with a list of names, you could tell Excel to color each cell that contains a name beginning with the letter A in grey, while each cell containing an entry beginning with the letter B should be in white, and so on. Generally the colors chosen for conditionally formatting are not too strong, and are usually just there to provide a slight but noticeable contrast between cells.

If you wish to apply conditional formatting to a data series you must first select the data in question, and then go to ‘Format’. From here you should be able to select ‘Conditional Formatting’. You will then be given a range of options on which conditions you would like to impose, and how you would like them to be formatted. It is also possible to implement conditional formatting using custom codes, which must be written individually as required.

Take Your Excel Dashboard in a New Direction by Embedding a Flash Video

February 26, 2011 – 9:00 pm

Many people are unaware of the full capabilites of Excel. Sadly most of us consider it an instrument for tables, data sets and charts, workmanlike, unappealing and sort of boring. However there is in fact a wide range of options open to Excel users, which can be translated into Excel dashboards, and embedded Flash videos are a perfect example of this.

It is actually quite a simple process to embed a Flash video into an Excel workbook. Firstly you must have the Developer tab enabled in your Excel application. From there you click on ‘Insert’ and then ‘More Controls’. This will provide you with additional options to those already included on your standard ‘Insert’ menu. You should then have an option to select ‘Shockwave flash object’. From there it is simply a matter of deciding where you want to put your video. This can be done by drawing a rectangle the size of the embedded window on your page, using the mouse cursor.

Once your rectangle has been drawn you must then tell Excel which video you would like to place in the window. Right click on the rectangle and choose ‘Properties’ followed by ‘Movie’. Then enter the hyperlink to your video, followed by ?fs=1&hl=en_US. Once you have closed the ‘Properties’ tab, you should then exit the Developer view by clicking on ‘Design Mode’. You will then be able to see your video beginning to load on your page.

Different Options for Stacked Bar Charts Part 3

February 21, 2011 – 1:57 pm

So far we have looked at the standard stacked bar charts, separated stacked bar charts and partially overlapping stacked bar charts as potential Excel charts that can be added to a business dashboard using Infocaptor. All of these are viable and useful charts, which can be very effective when used correctly.

Another available type of stacked bar chart uses a technique known as mirroring. In this type of chart, two data sets are displayed as mirror images of each other. In other words one data set is displayed in an upright position, similar to a standard bar chart. Then the second data set is attached to the base of this chart, and inverted. Each column then has an inverted, differently coloured column attached to its base. This is a good idea in that it allows for a very direct and clear comparison between both groups. However it does require additional processing for Excel to create a chart of this kind. A further drawback is that only two datasets can be displayed in this manner.

Finally there are two approaches to stacked bar charts that are generally not very useful. One is the technique of complete overlapping. This is similar to the partial overlapping approach except that one column is placed directly over another. While this might initially seem viable, there are in fact a number of complications with this method. For example, you will generally have one data set in the foreground, which works well as long as the columns belonging to the second dataset are taller than those in front. Once the opposite occurs however you will be unable to see the second column as it will be hidden behind the first. In order to render the concealed column visible, it is then necessary to render the column in the foreground transparent. As you can see, this quickly becomes messy and can render the final chart almost incomprehensible.

The last type of stacked bar chart we will look at has one data set positioned normally, as for a typical bar chart, while the second data set is inverted and placed overhead. There is then a gap between both data sets. This of course requires additional calculations in order to create a clear layout with a sufficient gap, and these charts can be difficult to interpret.