SSW Foursquare

Rules to Better Interfaces (Reports, Charts and Dates) - 7 Rules

If you still need help, visit Website Design and User Experience and book in a consultant.

  1. Charts - Do you make graphs easy to digest?

    Graphs are a great way to display data in an easy to follow visual format. Some graphs, however, are easier to read than others. We recommend staying away from 3-D Graphs and keeping it simple! If you have complex data, it's also a good idea to display 2 or 3 simpler graphs rather than one complex one - the aim of the game is to make digesting the information as simple as possible for your audience.

    Graph
    Figure: Good Example - Are your graphs simple to understand?

    badGraph
    Figure: Bad Example - When there's more than four preceptual units, a graph becomes hard to digest

    GoodGraph
    Figure: Good Example - You can split your graphs to make them easer to understand

  2. Charts - Do you use bar graph rather than pie graph?

    Line graph Line graphs are used to track changes over short and long periods of time. When smaller changes exist, line graphs are better to use than bar graphs. Line graphs can also be used to compare changes over the same period of time for more than one group.

    Pie Chart Pie charts are best to use when you are trying to compare parts of a whole. They do not show changes over time.

    Bar Graph Bar graphs are used to compare things between different groups or to track changes over time. However, when trying to measure change over time, bar graphs are best when the changes are larger. https://nces.ed.gov/nceskids/help/user_guide/graph/whentouse.asp

    This is a fancy way of saying use the right graph for the right purpose. Pie graphs fulfill a specific requirement, unlike a bar graph which is more multi-purpose.

    Pie graphs are used to show the general composition of an element. It's good for seeing at a glance what section is dominating, but it doesn't handle details very well.

    Figure: Bad Example - This Pie Graph is too complicated and difficult to understand.

    PieGraph Good
    Figure: Good Example - This Pie Graph has been simplified and it is easy to see at a glance that Nike sold the most sneakers this month compared to others.

    Figure: Good Example - This Bar Graph data hasn't even been processed but it's still readable.

  3. Dates - Do you keep date formatting consistent across your application?

    Date formats should always be kept consistent across your application, more importantly, it should be kept consistent with the operating system's regional settings otherwise this will cause significant confusion for your users.

    BetterInterface RegionalSettings
    Figure: Operating System's Regional Settings

    Figure: Bad example - Screens with inconsistent date formats

    Figure: Good example - Screens with consistent date formats

    The best way to do this in your code is to grab the culture information from the application thread and use it to automatically format your Datetime data type. Do not use hard coded datetime formatting strings unless it's absolutely necessary.

    startTimeTextBox.Text = resultResults.StartTime.ToString("dd/MM/yyyy hh:mm:ss");

    Figure: Bad Example - Using hard coded formatting string

    'VB.NET
'Initial CultureInfo settings for the application
Public initialCulture As CultureInfo
...
...
txtDateCreate.Text = CType(txtDateCreate.Tag, System.DateTime).ToString(initialCulture.DateTimeFormat)

    Figure: Good Example - Using culture info to format datetime

  4. Dates - Do you keep Time formats consistent across your application?

    Time formats should be consistent across your application, to give the application a very professional and consistent look.

    Figure: Bad Example - Three screens with inconsistent time formats

    Figure: Good Example - Three screens with consistent formats

  5. Dates - Do you use Calendar controls effectively?

    In Outlook, the Calendar control has a number of important features:

    • Saturday and Sunday are displayed at the end.
    • Days that have data associated with them are bold
    • The current day is highlighted with a box

    Users are familiar with the Outlook calendar control. When the calendar controlis used it should incorporate all of these features of the Outlook calendar control.

    Figure: Bad Example - Calendar Control - Sunday is at the front, today's date is not highlighted, and items with data are not bolded

    Figure: Good Example - Calendar Control - Monday is at the front, today's date is highlighted, and items with data are bolded

    We have a program called SSW Code Auditor to check for this rule.

  6. Reports - Do you configure every dimension’s "All Caption" to be "All"?

    In OLAP (Online Analytical Processing) cubes, dimensions are ways to categorize data. For example, in a sales cube, you might have dimensions for Time, Products, and Geography. Each dimension can have a hierarchy, and the top level is often represented as "All," which aggregates the data across all members of that dimension.

    Default Behavior

    By default, the top level of each dimension is labeled as "All" followed by the dimension name. For example:

    • "All Products" for the Products dimension
    • "All Time" for the Time dimension
    • "All Geography" for the Geography dimension

    This default labelling can be redundant and might not add clarity to the reports generated from these OLAP cubes.

    Improve Clarity by Adjusting the 'All Caption'

    Simplify and unify the representation of the top level in each dimension to improve the clarity and appearance of reports.

    Adjusted Setting: The 'All Caption' property for each dimension is set to "All" without the dimension name.

    Dimension Caption: "All Products"
    Dimension Caption: "All Time"
    Dimension Caption: "All Geography"

    Figure: Bad example (Before adjustment) - In this scenario, the prefix "All" followed by a space and the dimension name can make reports look cluttered and does not add meaningful information

    Dimension Caption: "All"

    Figure: Good example (After adjustment) - In the improved scenario, each dimension's top level simply reads "All," eliminating redundancy and making the data presentation cleaner and more straightforward

    How to make the change

    1. Access the properties - In your OLAP cube design tool, locate the properties for each dimension
    2. Adjust the 'All Caption' - Change the 'All Caption' property from "All [Dimension Name]" to just "All"
    3. Apply and test - Save your changes and generate a report to ensure that the top level of each dimension now simply reads "All", making the report more aesthetically pleasing and easier to understand

    Adjusting the 'All Caption' property in your OLAP cube dimensions simplifies report headings and enhances readability. This minor change can significantly impact the professionalism and clarity of your reporting solutions.

  7. Reports - Do you keep Reporting criteria simple?

    1. Have Selection for filters e.g. Date Ranges
    2. Have Selection for chart options e.g. Show Legend

    3. Don't have selection for chart groupings e.g. By Month or By Product

      • Crystal and Access these are built into the report and it is very complex to have a generic solution.
      • Also it is disorientating for the user to have this as a selection

    More Options for Reporting

We open source. Powered by GitHub