Your ‘Way of Work’

As a developer you probably already run into this: while developing the UI of your app you’re feeling great and you’re sure your users will love it. Some time later you meet you Beta Testers and ask for feedback and you have to realize that not all users like it the way you designed the app. Most times the story is more complex: some like it and others not and you can spend hours discussing the pros and cons. At the end you have to make decisions:

  • delete what users don’t need – even if it was such a challenge for you to provide this “cool” feature
  • make it customizable from Settings to allow users to go their own way

Running the TimeTracker Enterprise Edition ? In this case the flexibility to customize probably is only targeted to your IT Admin to guarantee that all employees are using the app the same way and HelpDesk can assist easier. To run the Enterprise Edition Employees will get a predefined Profile where some parts of Settings can be invisible or read-only. Read more here. (TBD)

From getting Beta-tester-feedback I removed some parts, added others and also made some parts configurable via Settings.

2014-08-25: added Settings → ‘Way of Work’:

Wow1

From here you can configure

  • Use of NFC
  • Start Tab
  • Bottom Navigation Bar

Defaults look like this:

Wow2

… and can be changed per example to this:

Wow3

NFC

TimeTracker can be triggered by NFC Tags and you have the permission to write your own Tags and also allow your Tags to open TimeTracker if closed.

NFC is a great way to shorten the workflow to Start or Stop times. read more here.

If you have decided not to use NFC then there should be no NFC Tab available and TimeTracker shouldn’t be able to execute Actions by NFC.

If your company has decided to use NFC and to create all NFC Tags under control of IT, there should be no NFC Tab, but TimeTracker will accept them.

Here are the screenshots how a Tabbed Pane can look with or without the NFC Tab. Screenshot is from Enterprise Edition – if using Personal or Group Edition, there’s no ‘Server Queue’.

As always: TabTimeTracker only displays content you’re using.

WowNFC

Removing or showing a Tab is easy stuff:

function manageNfcTab() {
    if (! app.useNfcTags() || ! app.createNfcTags()) {
        if (activeTab == nfcTab) {
            activeTab = homeTab
        }
        remove(nfcTab)
    } else {
        add(nfcTab)
    }
    if (app.useNfcTags()) {
        app.nfcAction.connect(onNfcAction)
    } else {
        app.nfcAction.disconnect(onNfcAction)
    }
}

The TabbedPane will still own a Tab – even if the Tab was removed. So it’s possible to add the Tab again without creating a new one and makes it easy to dynamically show / hide if Settings are changed.

app.useNfcTags() and app.createNfcTags() are C++ methods marked as Q_INVOKABLE getting the values from settings. Removing / adding Tabs we have control how the UI will look like.

If no NFC Tags will be used we have to disconnect the UI from the Signal telling us that there’s an action triggered by NFC Tag.

First Tab

The first Tab visible after opening TimeTracker is the ‘Tracking Live’ Tab from where you can start / stop times easy and fast. There are two different workflows described here: strict mode and free mode. From one customer I learned that there are situations where employees never will start / stop times the ‘normal’ way: all tracked times will be inserted manually. This functionality is part of the ActionBar of your Open tracked Times list, so for this customer it makes sense to start directly with the ‘Open’ tab.

Here’s the code to change the first selected Tab:

 onCreationCompleted: {
    if (app.firstTabIsOpenTab()) {
        activeTab = currentTab
    }
    // ...
}

All must be done inside onCreationCompleted{} of root TabbedPane. app.firstTabIsOpenTab() is a C++ method marked as Q_INVOKABLE getting the value from settings.

Bottom Navigation

There are many properties and informations available for tracked times, so we decided to use a Segmented TitleBar using 4 segments:

  1. Category
  2. Detail
  3. Time
  4. Geo

To switch between segments you have to tap on the specific part of the TitleBar. You can also use the Actions from OverflowMenu or if using a Q5 / Q10 / Passport there’s a keyboard shortcut.

If you device is a Z30 with 5″ screen size there’s a long distance between ActionBar at bottom and segmented TitleBar on top. So there are four Icons at the bottom: tapping on an Icon the corresponding segment will become visible and the selected Icon will be slightly larger. These Icons are only visible in Portrait mode on Touch Screens.

Read more about Navigation Concepts here.

Screenshots:

WowBottomNav

This is a feature some really like and others not, because it’s not the default platform behaviour. So from now on you can switch them off:

WowNoBottomNav

Feel free to use TimeTracker’s BBM Channel to request customizations you’re missing. There’s already a feature request to us a ‘Quick Insert’ screen to enter all common data in a ScrollView from a single page and only switch on-demand to the more detailed Segmented – Titlebar – View.

 

Back to Settings Main Page

Settings

Flexible Input (Touch, Keyboard, NFC, Pebble, Pen, Beacons)

flexible_input

TimeTracker gives you flexible options HowTo input data:

  • Use your Touch Screen
  • Use Keyboard if you prefer this way to enter data
  • Tap on NFC Tags to Start / Stop the time
  • Start / Stop from your SmartWatch
  • Do CheckIns from Indoor Navigation (Beacons)
  • Touch Pens to sign reports

Touch Screens

touch

This will be the easiest part – all mobile apps are developed with touchscreens in mind.

Think about screen sizes and test on different devices.

Support Portrait and Landscape – always respect the way a user holds the device – an app shouldn’t dictate the orientation.

Keyboard Devices

keyboard

BlackBerry Q5, Q10 and upcoming Passport are great Keyboard Devices. Cascades supports shortcuts – you have to think about carefully and please make them translatable – ‘E’ for Edit can be different for other languages. Always provide same shortcuts for same actions through all pages of your app.

Shortcuts will speed up the way users can do their work – per ex. typing g-g-g from HomeScreen starts a new time. (g means ‘Go On’ and will be a different letter if translated)

NFC

touch2go_cat_3

NFC can be even faster the a keyboard: Touch a NFC Tag and the Action will be executed. Make it easy to create Tags from inside the App – but if the user doesn’t use NFC provide a UI Setting to hide the Tab.

SmartWatch (Pebble)

pebble_timetracker_1_3

Another cool way to get input done is using a smartwatch. TimeTracker 2.0 will support Pebble – currently experimentell implemented.

Imagine a service employee at customer site: he/she wants to start or stop a Time – why not simply doing this from the Pebble in stead of searching for the smartphone, opening the app and do it there.

Beacons

Maybe there are situations where you can start or stop times from detected location: entering or leaving a conference room can start / stop a time. Beacons can help here and tell the app when the conference room was entered or leaved.

Touch Pen (Signature)

touch_pen

You have a Touch Device – why not using the Touch Screen to get a work report signed by your customer.

signing

TimeTracker has a Signature pad built-in for Customer Work Reports and also Employees Accounting Report.

work-in-progress

…. work in progress … more info on flexible input and some sourcecode will follow …

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

More UX Highlights:

Reduce Complexity

Sometimes you’ll run into situations where the amount of informations and decisions can confuse the ‘normal’ user of your app. Without deeper knowledge of use-cases, workflows and background processes wrong pathes can be choosed.
complexity

All the Settings

TimeTracker per ex. can be configured for different workflows and different requirements, also in Enterprise Edition there are some extra properties for data transfer, server communication and more.

  • Left side: first 7 sections from Application menu Settings – there are some more if scrolling down.
  • Right side: only 3 sections

Settings-complexvsreduced

To learn more about Settings in detail please take a look at these Pages.

TimeTracker Profile Manager App

For Enterprise Edition I developed another small BlackBerry 10 APP ‘TimeTracker Profile Manager‘ from where the IT Admin can create Profiles and push them out to employees or send via Email. Then it’s a one-click and Settings are configured. Admin not only can set the values for Settings properties – he/she also can define which fields should become read-only and which parts shoud be hidden.

At the end it could look as easy as you can see from Screenshot above (right side). Now all the difficult decisions can be done by the admin and users only have to add some user-specific data, connect TimeTracker to Calendar, Notebook and Message Account and are done with settings.

If there’s some time I will create a special Wizard guiding users of the Personal Edition to create Settings the easy way.

Detail Pages

ListViews always only show a small part of data inside the rows itself.

Tapping on a row usually you’ll see a Details Page.

per ex. from List of Open Tracked Times there are many many properties. I tried to reduce complexity this way:

  • Using Segemented TitleBar to divide the details logically
  • First Segment always gives an overview with “Shortcut” – Icons to jump to other Segments
  • Icons on Overview Segment telling the user about the content
  • Each Segment only displays values from context – unused fields hidden
  • Adding Marker Icons to vusualize conditions (Overnight-Travel, Crossing-Borders, Summertime, …)
  • Tapping on Icons or Overflow Menu enables to go deeper into details

Take a look at Dynamic Pages, Navigation Concepts and Lists.

Workflows

Analyze the daily workflows of Users, see what’s the common way and provide this as your default – or make some ways configurable so user can decide where to go.

While flowing through the Workflow always enable the user to cancel or to go deeper into single steps. I’m doing this from Start / Stop Time – Workflow: running 1-2-3 the default way and providing an “Edit” Action from Stop to enable th user to change Time Category or more before saving.

More UX Highlights:

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:

BBM Channel integrated

bbm_color

BBM Channels are a great way to communicate with your community. BBM Channels are free and easy to create – so why not integrating them into TimeTracker. You can get access to TimeTracker Channel the normal BBM – way and look for Channels you’re interested in.

Integrating BBM Channel for TimeTracker

Even better it’s directly integrated into the App. Simply swipe down from top to get the Application Menu:

Bbmc1

Tapping on BBM Channel the very first time you must confirm to subscribe the Channel.

Bbmc2

Now you have access directly from inside TimeTracker:

Bbmc3

Get the newest informations about TimeTracker. Feel free to use the Comments to ask questions.

Integration of BBM Channel using Cascades Invokation Framework is really easy stuff. This code explains it all:

ActionItem {
    id: bbmChannelAction
    title: "BBM Channel"
    imageSource: "asset:///images/ic_bbm.png"
    attachedObjects: [
        Invocation {
            id: invokeBBMChannel
            query {
                invokeTargetId: "sys.bbm.channels.card.previewer"
                invokeActionId: "bb.action.OPENBBMCHANNEL"
                uri: "bbmc:C00165746"
            }
        }
    ]
    onTriggered: {
        invokeBBMChannel.trigger("bb.action.OPENBBMCHANNEL")
    }
}

Enterprise Edition – Work Perimeter BES 10

Attention: If you’re running TimeTracker from BES 10 in Work Perimeter, you don’t have access to BBM Channels yet. Perhaps this will become possible with upcoming eBBM Suite.

Bbmc4

Here’s the 1-line (C++ Code) to check if your App is running from Work Perimeter:

bool ApplicationUI::isWorkPerimeter()
{
    return QDir::currentPath().contains("enterprise");
}

To make it easy to find the TimeTracker Channel I added a Dialog – otherwise the User taps on the Action and nothing happens. Here’s the slightly modified onTriggered() from source above:

onTriggered: {
    if(app.isWorkPerimeter()){
        showDialog(qsTr("TimeTracker BBM Channel"),
            qsTr("You cannot open BBM Channel directly from Work Perimeter.\nPlease switch to Private Perimeter and search for TimeTracker's BBM Channel.\nType 'TimeTracker' to search or the BBM Channel Pin: 'C00165746'"))
    } else {
        invokeBBMChannel.trigger("bb.action.OPENBBMCHANNEL")
    }
}

You’ve seen it’s easy to integrate BBM Channels. Thanks to BlackBerry providing BBM Channels as a FREE service.

More Info about deep integration:

Bluetooth LE (Beacon, Pebble)

Let users decide HowTo track a Time:

  • Touch: Open TimeTracker APP and Start / Stop Times – there’s a QuickStart / QuickStop 1-2-3
  • Shortcuts: From Keyboard Devices (Q5, Q10, Passport) use Shortcuts to Start / Stop
  • NFC Tags: Tap your Phone on a NFC Tag to Start / Stop
  • Beacons: Automatic CheckIn by detected Location (InDoor)
  • Smartwatch: Start / Stop from your Pebble

Hint: Beacons and Pebble are in beta yet and will be available later this year

Beacons (In-Door CheckIn)

particle_large_trans-600x630

Particle iBeacon by KST

You want to track In-Door-Locations ? Automatically start a Time from location ? Entering a MeetingRoom and start: Working Time – Task Meeting ?

We’ll add Beacon – Support to do this: automatically start a new TimeTracker Event if Location sent by Beacons changed: you can decide if this is done by UUID, Major or Minor values.

Pebble

You like your Pebble Smartwatch ?

pebble_red

Service Employees are working at customer site and have to Start / Stop times. Why searching the phone, open the App and Start / Stop a Time while the SmartWatch is always reachable.

TimeTracker 2.x will allow you to start / stop times directly from your Pebble and also to see how much time spent on current work.  Pebble will also remind you to send Account Reports.

First prototype using Scripting Engine by BlackBerry 10 App Talk2Watch pro:

TalktowatchAndPebble

Start TimeTracker Script from Pebble, Start a Time and immediately get feedback from TimeTracker APP:

pebble_timetracker_1_3

Inside TimeTracker APP you’ll see which Times are tracked by Pebble:

TrackedByPebble

….. more information and a detailed blog article on this will follow …

work-in-progress

TimeTracker Permissions

permissions_timetracker

Location

Switch on if TimeTracker should track GPS Coordinates and / or Reverse Geocoding

Calendar

Switch on to get your Tracked Times automatically inserted into a Calendar and to get a Reminder if reports are due

Contacts

Switch on if you want to connect Contacts to tracked times to make it easy to call a customer, get the route etc

EMail and PIN Messages

Switch on to be able to send your Reports or Data as Mail

Notebooks

Switch on to enable connecting Notebook Entries to tracked times

Shared Files

Most of your data will be stored inside secure sandbox. Check Shared Files if you deal with Signature Files or you want to use BlackBerry Work Drives, Dropbox or Box to store Reports or Data

Device Identifying Information

TimeTracker needs your BlackBerry PIN if using Group or Enterprise Edition. Your Manager or IT Admin will identify you using the unique BlackBerry PIN.

Use Local Time

Always local time first

Tracking Times at Start or Stop:

Q5tz1

Timestamp is displayed in local time (17:23), TimeZone is +02:00 and it’s DST (sommertime) – visualized by the little sun.

… an easy-to-understand Page.

More Info on TimeZone

ca_world

Tapping on the World Icon more details become visible:

Q5tz2

Now details from current TimeZone are visible: Timezone is ‘Europe/Amsterdam‘, Offset is 2 hours from GMT: +02:00 and we can check that GMT is 15:23, where local time is 17:23

Tapping again on the World Icon hides the TimeZone – it’s a toggle.

Here’s the code from QML how this was done:

Container {
  id: tzToggleContainer
  property bool showTimeZone: false
  onShowTimeZoneChanged: {
      startTimeZoneData.visible = showTimeZone
  }
  layout: DockLayout {
  }
  ImageView {
      imageSource: "asset:///images/ca_world.png"
      scalingMethod: ScalingMethod.AspectFit
      horizontalAlignment: HorizontalAlignment.Right
      verticalAlignment: VerticalAlignment.Top
      gestureHandlers: [
          TapHandler {
              onTapped: {
                  tzToggleContainer.showTimeZone = ! tzToggleContainer.showTimeZone
              }
          }
      ]
  }
}

To get the ‘TAP’ on the Image a TapHandler was attached to the ImageView. In onTapped() the value of a custom property (bool showTimeZone) was toggled between true and false. This property is bound to the visible property of another Container: startTimeZoneData

QML makes it easy to connect Objects. This can be done by default properties (visible) or by adding custom properties (showTimeZone).

onShowTimeZoneChanged {} is automatically ‘generated’ by QML and I’m using this to set the visibility of another Container.

Hint: I’m not always using the ‘shortest’ way  to make the code easier to understand. In this case I could have done:

Container {
  id: startTimeZoneData
  visible: tzToggleContainer.showTimeZone
}

Now the knowledge what happenstapping on the ImageView isn’t immediately visible.

Change TimeZone

There can be situations where user has to change the TimeZone: perhaps he/she forgots to start tracking at beginning of travel or smartphone is not set to automatically use the TimeZone from current location.

To change the TimeZone simply tap on the Name (Europe/Amsterdam) and a list of Countries will be pushed on top.

First entry is the Current TimeZone detected from the Phone:

Q5tz3

Tap on a Country and the Timezone will be changed. All re-calculations of Date and Time are done under-the-hood. More details on TimeZone Support see Menu below.

Change Day and Time

If user has the permission to change the Time he/she simply taps on the Start Time and a new Page will be pushed on top allowing to change the Day and / or Time:

Q5tz4

You see: all is simple and easy for default workflow, complexity is hidden, but if there must be something changed it’s also easy to do.

More infos::

TimeZones

Supporting TimeZones is essential for mobile Business App TimeTracker.

ca_world

TimeTracker ‘knows’ some different kinds of  TimeZones:

  • current TimeZone detected from current Location
  • @Home TimeZone aka Company TimeZone
  • UTC / GMT TimeZone with Offset +00:00

By default the local TimeZone is visible for the User.

@Home / Company TimeZone is stored under User Settings.

UTC is always used by internal calculations.

As long as the TimeZone is the current TimeZone it’s easy to get by C++, because the TimeZone is available from CalendarService:

// .hpp
bb::pim::calendar::CalendarService mCalendarService;

// .cpp
QString ConnectedCalendar::currentCalendarTimeZone()
{
    return mCalendarService.settings().currentSystemTimezone();
}

There’s a list of all available TimeZones available deep inside BlackBerry 10. From Device Settings – Date and Time Users can select a TimeZone:

device-list-tz

Unfortunately this list isn’t available from Cascades – there’s no API 😦

So I had to rebuild this from informations in the web on the TimeZones used by BlackBerry.

If selecting a TimeZone manually at first you have to select a Country:

Z30tz1

Z30tz2

I have not implemented logic to find out if the selected TimeZone is using DST (Summertime) for a given Day, so the User will be asked:

Z30tz3

This is only needed in very rare cases, so I think we can live with the workaround – hopefully Cascades will support this soon.

Here TimeZone ‘America/Los_Angeles’ DST was selected:

Z30tz4

Please take a look at the calculated time: 18:36 from 13:37 to 23:13 – TimeTracker caclulated correct because there’s a TimeZone difference of 9 hours between +02:00 and -07:00.

Calendar && two TimeZones

TimeTracker entries can automatically be added to a connected Calendar.

TimeTracker supports multi TimeZones per item as you can see above where we started in Germany and stopped in LA.

Calendar only supports one TimeZone per event, so we have to recalculate start and stop times both using the TimeZone from start. Here’s the corresponding Calendar Event from tracked time with two TimeZones:

Z30cal_tz

Instead of Event ending on July-14 23:13 the Calendar entry ends on July-15 08:13. To inform the user about the real stop time, I added a comment under ‘Notes’.

Here are the times details from Calendar Event:

Z30cal_tz_detail

As usual: all complexitiy hidden to the User !

More infos::

Countries

Crossing Borders

border_cross_gray

For some companies it’s important to know that Service Employees crossed a border between Countries. (Some travel costs will change)

The question comes up HowTo detect this from TimeTracker. We already get the Coordinates from GPS, but from Coordinates there’s no knowledge about the Country this Coordinate belongs to.

The good thing: besides Geo Location Services there’s also a Reverse Geocoding Service getting the address from tracked Coordinates. This address not only contains Street and City, but also the Country. Now it’s easy: as soon as the Country changes, a border was crossed.

It’s up to you HowTo configure the behaviour. If you only want to be notified about the fact that a border was crossed, you only have to track Start and Stop. You need some more details ? Configure Travel Time Category to be tracked continously which means every 15 or 30 minutes or so.

Here GPS Tracking and reverse Geocoding was done at Start and Stop:

Z30_bordercross

TimeTracker detects two different Countries (Germany, United States) and inserted a Marker Icon between Start and Stop to show that a Border was crossed.

More infos: