Your application should make it easy to navigate through all the features and topics.
Tapping through Pages
As described I’m using a combination of TabbedPane as root with NavigationPanes as Tab and Pages or Sheets put on top.
Users can always use the standard way: Tap on a Tab to get the root Page of this Tab, then use Actions or tap on rows of Lists to get more informations from Pages pushed on top. To go back swipe back from page to Page or use the back Action from ActionBar or swipe back from ActionBar to get direct access to the root TabbedPane.
Use Shortcuts
Alway think on your customers using devices with physical keyboard and provide Shortcuts:
Shortcuts can make Navigation easy and fast on Keyboard Devices. Don’t forget to translate the keys to avoid collision with system-wide shortcuts translated by BlackBerry 10.
Shortcut {
key: qsTr("Alt + r")
}
More infos on Shortcuts see here: Touch vs Keyboard
Provide alternate ways
It’s always a good idea to provide some alternative ways: let the user decide HowTo work with your app.
One of the most important Pages are the Details of Tracked Times. To get a clean UI and to avoid too many informations / fields on one single Page I segmented the content using a Segmented TitleBar:
titleBar: TitleBar {
kind: TitleBarKind.Segmented
options: [
Option {
text: qsTr("1. Category")
imageSource: OrientationSupport.orientation != UIOrientation.Landscape ? "" : "asset:///images/category_tb.png"
value: 0
selected: true
},
Option {
text: qsTr("2. Detail")
imageSource: OrientationSupport.orientation != UIOrientation.Landscape ? "" : "asset:///images/details_tb.png"
value: 1
selected: false
},
Option {
text: qsTr("3. Time")
imageSource: OrientationSupport.orientation != UIOrientation.Landscape ? "" : "asset:///images/ic_clock_stopwatch_tb.png"
value: 2
selected: false
},
Option {
text: qsTr("4. Geo")
imageSource: OrientationSupport.orientation != UIOrientation.Landscape ? "" : "asset:///images/details_tb.png"
value: 3
selected: false
}
]
Here’s the TitleBar:
Images will only be displayed in Landscape:
Segmented TitleBars are really helpful to segment the content …
… but from my POV there’s a drawback on large devices like 5″ Z30:
it’s a long way from the bottom to the top and to tap on a Title to switch the content. So I added two alternate ways to navigate through the content:
- ActionItems from Overflow Menu
- NavigationRow at the bottom directly above the ActionBar
Now it’s up to the User: tap on the title directly, tap an ‘More’ and select Action or Tap on the Bottom-Navigation-Row.
Current selected TitleBar-Segment is disabled in ActionItems and displayed using a slightly larger Icon in Bottom-Navigation-Row.
Rotating to Landscape: the Bottom-Navigation-Row disappears, because now the way is much shorter and I need the space to display content:
Working on a Keyboard Device ActionItems have shortcuts to navigate by Keys.
Content is king
You know: Content is King – don’t let the User think about Navigation Structures or how content is split using Segments. Provide some more natural Navigation: This Page also has Content-Based-Navigation:
Perhaps a new user of the app doesn’t know where to find Contact Info: simply tap on the blue colored Icon and TimeTracker automatically switches to 2. Detail – Segment, where all the Contact Data is displayed:
From this kind of implicite navigation users learn it the easy way how your app is structured.
Using GestureHandlers it’s easy done:
gestureHandlers: [
TapHandler {
onTapped: {
// do your stuff
}
}
]
To make segment-switching more visible to the user I also added an Animation. You’ll see this from the Videos.
Provide short ways
There are some situations where it makes sense to offer users a direct Navigation. per ex. from Tab Reports ActionBar User can directly jump to History or to all Open Tracked Times.
There are more concepts HowTo make navigation easy for TimeTracker – will write later on this – for now I hope you got some ideas.
More UX highlights:
timetracker10.wordpress.com 
You must be logged in to post a comment.