Never More Black Screens

Do you like dark themes ? There’s much discussion on dark themes – not only if developing for BlackBerry – also from Eclipse IDE – Community. Seems Black is Beautiful !

I want to discuss another ‘black’ topic:

Black Screens

This should never happen: your user taps on an Action or Button or Tab and gets an empty screen because you’re

  • displaying Lists without any data
  • displaying dynamic Pages where no fields are in

You won’t notice this while testing your app where you always have data. It’s a golden rule: Before deploying an App test it as a fresh installed app and go through all parts of your App.

Here are some samples from TimeTracker App and tips HowTo avoid “Black Screens”.

Empty List

The List of Open Tracked Times can be empty if running the app for the first time or if all tracked data is sent with accounting report and moved to History.

In this case I’m showing a Calendar Image from current month and some text to explain the situation. Compare this with an empty screen, where the user has no idea why no data was displayed – esp. if it’s the first time the app was opened and user is learning.

BlackOrNot

In QML I’m checking if the data model is empty:

// check data model size
if (data.length == 0) {
    emptyList()
}
// this function handles empty lists
function emptyList() {
    monthLabel.text = qsTr("Nothing Open")
    monthContainer.month = monitorTime.currentAccountingMonth()
    animateScrollView.play()
    scrollView.visible = true
}

Let’s take a deeper look at the code:

Label text is nothing special.

month is a custom property to store the current month I’m getting from a C++ method. I’m using this month to construct the name of the Image.

It’s a boring Page with no real content – so I’m using an Animation to let the Month Image fly in from rigth.

Also I’m setting the ScrollView to visible. Normaly this Page displays data inside a ListView. If no data – the ListView will be empty. I defined a ScrollView directly on top of the ListView:

ScrollView {
    id: scrollView
    visible: false
    horizontalAlignment: HorizontalAlignment.Center
    Container {
        id: contentContainer
        layout: StackLayout {
            orientation: LayoutOrientation.TopToBottom
        }
        Container {
            id: monthContainer
            property string month: "01"
            property alias toDay: monthLabel.text
            topPadding: 60
            layout: DockLayout {
            }
            ImageView {
                id: image_01
                opacity: 0.9
                imageSource: "asset:///images/month_" + monthContainer.month + ".png"
                verticalAlignment: VerticalAlignment.Center
                horizontalAlignment: HorizontalAlignment.Center
            } // end imageview
            Label {
                id: monthLabel
                text: ""
                horizontalAlignment: HorizontalAlignment.Center
                verticalAlignment: VerticalAlignment.Center
                textStyle.fontSize: FontSize.Small
                textStyle.color: Color.Black
                multiline: true
            }
        } // end monthContainer
    }
} // end scrollView
// followed by ListView

The Animation looks like this:

 

attachedObjects: [
    TranslateTransition {
        id: animateScrollView
        target: scrollView
        fromX: OrientationSupport.orientation == UIOrientation.Landscape ? 1280 : 768
        toX: 0
        duration: 800
    }
]

Cascades makes it easy to use Animations. I want to let the Image fly into the scrren from right side, so I’m using a TranslationTransision.

There will be some Videos where you can see it in action.

Here’s a similar Page from History of tracked data:

Black2

History Page is a dynamic Page only showing icons from Months where data is stored.

No Data found

Sometimes there should be data, but you cannot find it or it’s work-in-progress. Here are two scenarios from a Segmented Page:

Black3_4

Left side: This is a Time Category where you have defined to track GPS Coordinates at Start and at Stop (see Settings ), but TimeTracker didn’t found Coordinates.

Right side: This is a Time Category where no Geo Location should be tracked – per ex. Time category ‘Rest / Break’. I decided to have this Segment (4. Geo) always visible at same position to provide a constant UI, so I have to tell the User why it’s empty.

Now for both situations we found a way to tell the User what happened and Black Screens are avoided. BTW: The Background Image in bottom part of Page is only visible on Touch Screens in Portrait – not in Landscape and not on small square screens like Q5 / Q10. This Image is different if data was found:

No_black

It’s some more work to develop, but your users will enjoy your app !

More UX Highlights: