feng-gui homepage

Feng-GUI Dashboard

Feng-GUI Dashboard analyzes the attention and attraction in your webpages and advertisement.

How to use the Dashboard:
Upload an image:
Browse to select an image file and press upload. Wait until the image is uploaded and appears at the bottom images carousel.
Learn more about input images

Analysis Parameters:
Select the image at the bottom images carousel, adjust the Analysis and Report parameters.
Learn more about heatmap Analysis and Reports

Generate the reports:
Click Analyze. Wait few minutes for the page to reload.

Save Reports:
Click the Download button to save the report files to your computer.

Reports

Attention Heatmap report

The Attention Heatmap displays the most attractive elements of the image in the form of "hot" and "cold" spots. The Attention Heatmap report is a predicted eye tracking report which show how areas of the original image attracts the attention.
The heatmap colors range from green through yellow to red. The colors are representing low, medium and high levels of attention, respectively. Areas with no color implies that this area will be over looked.

Gaze Plot report

The Gaze Plot report visualizes the scan paths and order between elements inside the image. A Gaze Plot report is also referred as scanpath report. It is made of a series of short stops (called fixations) and fast movements of an eye (called saccades).
Fixations are marked with circles along with a number that state the order in which the eyes move between fixations.
The first fixation is marked with the number (1).
On average, fixations last for around 200 ms during the reading of linguistic text, and 350 ms during the viewing of a scene.

Use the Gaze Plot report to visually demonstrate fixations order and gaze paths.

Opacity map report

The Opacity map report tones down information that is not attractive and visually displays what your viewers may perceive during the first few seconds of visual inspection.
The most transparent areas are those that attract more attention.

Use the Opacity report to identify which areas are being perceived and which are being ignored.

Areas of Interest report

The Areas of Interest report (AOIs) lets you define areas inside the image and determine the percentage of the attention this area is drawing.
Areas of Interest report is also referred as Regions of Interest report (ROIs)

The percentage value is the value of attention comparing to the attention at the rest of the image.
0% means no attention at all, and 100% means this area will be mostly noticeable.
Use the Areas of Interest report to compare results between different versions of your design and layout.

AOIs report

To generate an AOIs report, First, analyze the image.
Switch to the "Original" tab.
Click on "Add Area" to add a new AOI area.
Resize and move the AOI area to adjust its location and dimensions.
Switch to the "AOIs" tab and see the AOIs report updated with the latest AOIs details.

Account information

Display information about your account along with purchased and used credits.
  • The credit is charged only when uploading an image. For each image you upload, you can generate any amount of attention analysis with no extra charge.
  • Every credit package has different expiration period.
  • Web API accounts can also log in and use the dashboard.

Input Image

  • Size limits
    Upload image can be no larger than 5MB.

  • Formats
    You can upload images from any of the following file formats: PNG, JPG, JPEG, BMP, GIF

  • Dimensions
    • Recommended 1024x768
    • Minimum 800x600. Using smaller dimensions may result in reducing accuracy of the heatmap.
    • Maximum 1600x1200. Using larger dimensions will not improve the heatmap accuracy and noticeably increases the heatmap processing time, which can cause a service timeout error.

    • Prefer to use wide images and not narrow images.
    • Create a website snapshot which contains only the webpage itself. Do not include the surrounding browser UI elements.
      To create a web snapshot, you can use a browser add-on such as Screengrab.
      See Screengrab firefox add-on install page.
    • Capture the "Above the Fold" part of the webpage.

  • Quality
    Use your highest quality images. We recommend on using PNG. As JPEG is a lossy compression method, which adds compression artifacts into the image.
    If you do not have an original file as PNG, do not simply save the JPEG as PNG because this will result in an even larger file and will not improve the image quality.

Analysis Settings

Specifies which sub algorithms to include in the analysis. Analysis includes by default, visual features such as colors contrast and orientation and many more. See a complete list of features analyzed.
  • View Type
    This parameter currently has no impact on the heatmap. By selecting a value you are helping Feng-GUI system to learn more about the content inside input images.

  • View Distance
    Set the viewer distance from this image. Default is centimeters. Use meters for testing distance imagaes such as billboards.

  • Face detection
    Mark this check box only if the image contains faces.

  • Text detection
    Mark this check box only if the image contains text.

  • Skin detection
    Mark this check box only if the image contains human skin.

Output Settings

Specifies how the output heatmap file is generated and its content.
Report settings removed from Dashboard v3. Instead, the output is presented in few reports. You can control the report settings through the Web API.
  • Circle HotSpots
    Draw circles around the areas of highest attention. The hotspots are also referred as fixations

  • Generate Gaze Plot
    Draw the scanpath between hotspots. The resulting series of fixations and saccades is also called a scanpath.

  • Draw Gaze Order Numbers
    Draw numbers next to each hotspot representing the order in which they will be viewed. Time of each fixation 200ms-350ms

  • Merge Heatmap with original image
    Uncheck this if you wish to generate the heatmap image without a merged layer of the original image.

  • Draw heatmap legend
    A map legend is the little box in the corner of the heatmap which contains parameters information. (always true)