Download PDF
[PDF 2.06MB]
Figure 1: Calligra* Gemini Stage in tablet mode
Figure 2: Calligra* Gemini Words in tablet mode
Introduction
The release of Calligra* Gemini, an open source office suite updated with a transforming interface for 2 in 1 devices, is a cool step in office application design. Imagine making last minute changes to your presentation, then handing your customer the 2 in 1 device in tablet mode so your presentation plays before them with touchscreen interaction. Or imagine being able to easily edit a text document when you’re using your 2 in 1 device in tablet mode. The transformable user interface (UI) added to these applications—Calligra* Stage for presentations and Calligra* Words for word processing—will make this kind of usage a reality.
Why Calligra
KO GmBH has been producing quality open source applications and tools for some time. Last year, with Intel’s help, they released their first Gemini product, Krita* Gemini. This product is a painting and illustration application with a transformable UI that was downloaded 100,000 times in 2014. The transformable UI in Krita Gemini makes the app particularly useful for users with 2 in 1 devices, who can now easily create or edit images while on the go. Figure 3 shows a 2 in 1 devices transforming from one mode to the other.
Figure 3: Example 2 in 1 Device, Dell XPS* 12, mid-transformation
KO GmBH and the Intel team again joined forces to produce Calligra office suite applications with transformable UI’s for Intel 2 in 1 devices. After recognizing the growing success of 2 in 1 devices, development lead Dan Leinir Turthra Jensen was joined by Intel’s Björn Taubert in creating the code for 2 in 1 transformation in Calligra Gemini. Calligra is a suite of applications including whiteboard, flowchart, database, spreadsheet, and drawing applications in addition to the word processing and presentation apps we are discussing in this article. These two applications were chosen primarily because of their usefulness on touch-only devices, thus allowing for a single application that can work on the desktop, tablet, and for our purposes, the 2 in 1 device.
Change the UI for “Touch-ability”
Because of the experience the team had in developing Krita Gemini, they already had the technical expertise to add 2 in 1 support. The hardest part was determining how much to change the UI for the word processing and presentation apps in Calligra. The team approached their users and experts to develop a list of “must keep on the screen” controls. They set out to create a great experience for their users in new ways not available before the 2 in 1 device. They had to take into account more than the traditional mouse and keyboard inputs that have been the foundation of office applications since the first graphical user interfaces. They added touch support with a focus on improving a select number of usage models. They watched users operating the Calligra office apps differently depending on the circumstance, and they saw an opportunity to create apps that adapted to the users’ intention.
These scenarios drove the developers’ decisions. For the user wanting to have easy access to all the options the app provides, the team first updated their desktop UI. This was the case for both applications in this article. Single users operating Calligra Stage or Words in an office environment had all they needed and expected in the usability of the office suite. However, once touch was added (and therefore traditional inputs removed), the user experience needed to change. Mobility, collaboration, and consumption became much more important. Instead of simply being an either/or experience of creation or consumption, the simultaneous experiences of both become more commonplace. Adding the 2 in 1 device to the mix allows for the best traditional experience while supporting these new experiences.
The developers made carefully considered changes for each application when determining the tablet mode versus the desktop mode UI. They focused the desktop UI on access to full editing tools, but designed the tablet mode UI with fewer on-screen options for review, comment, and consumption.
Figures 4 and 5 show the Calligra Gemini desktop UI for Stage and Words. The team decided to provide many status indicators and shortcuts on the desktop UI screen for the user creating new documents or performing edits. In Figure 4, notice there are multiple options for navigating slides and a number of shortcut buttons that provide access to a myriad of features. Each app has over 70 clickable controls and actions when running in the desktop UI.
Figure 4: Stage desktop mode for creation and editing
Figure 5: Words desktop mode for traditional word processing
This versatility had to be reined in to adapt the apps for the tablet UI. In contrast to desktop mode, Figures 6 and 7 show the tablet UI with the number of actions available on the screen reduced to as few as 5. These controls were chosen with the intent of supporting review, commentary, and simplified editing by a group of users in a setting more public than an individual’s office, maybe a conference room full of people. For example, the tablet UI for Stage allows the user to add an image, but does not provide controls for charts and other more complex visuals.
Figure 6: Stage tablet mode for quick editing
Figure 7: Words tablet mode for editing and annotating
The KO GmBH team went further to support more usage scenarios that met their users’ needs for collaboration features. For Stage they chose to make a presentation “play” screen with whiteboard-like (highlighter) and projection screen-like (pointer) functionality in tablet mode. The red pointer allows for laser pointer-like, on-the-fly focus that does not stay on the screen for more than a second or two. The yellow highlighter produces a screen focal point that stays until the slide is changed. Neither action is an actual edit of the document. Figures 8 through 10 show the Stage play screen in tablet mode.
Figure 8: Stage tablet mode for review and play
Figure 9: Stage tablet mode red pointer in action
Figure 10: Stage tablet mode yellow highlighter in action
When the team designed the tablet UI for word processing, other methods were considered, again focusing on the collaboration features users wanted. The team added edit options to the tablet mode with colorful messages for instant feedback as shown in Figure 11.
Figure 11: Words tablet mode example visual annotation
The final element the team approached was making sure there was a pure document consumption view available in both apps. These modes are shown in Figures 12 and 13. A nice feature of the Words “Distraction-free” view is that it is very convenient for reading documents in natural portrait orientation.
Figure 12: Words distraction-free mode view in portrait orientation
Figure 13: Stage desktop mode for individual consuming
Add a Manual Transform UI Element
Since some users want to use the app in ways developers don’t always consider, the Gemini team made it easy for users to transform the UI manually. All the team did was add a single UI element to get from desktop to tablet mode and back as shown in Figure 14. Advanced users will be grateful for this button.
Figure 14: Manual transform button in desktop (left) and tablet (right) modes
The UI transformation code is provided for your reference in Figure 15.
// Snip from Gemini - Perform 2-in1 Mode Transition via Button:
#ifdef Q_OS_WIN
bool MainWindow::winEvent( MSG * message, long * result ) {
if (message && message->message == WM_SETTINGCHANGE && message->lParam)
{
if (wcscmp(TEXT("ConvertibleSlateMode"), (TCHAR *) message->lParam) == 0)
d->notifySlateModeChange();
else if (wcscmp(TEXT("SystemDockMode"), (TCHAR *)
message->lParam) == 0)
d->notifyDockingModeChange();
*result = 0;
return true;
}
return false;
}
#endif
void MainWindow::Private::notifySlateModeChange()
{
#ifdef Q_OS_WIN
bool bSlateMode = (GetSystemMetrics(SM_CONVERTIBLESLATEMODE) == 0);
if (slateMode != bSlateMode)
{
slateMode = bSlateMode;
emit q->slateModeChanged();
if (forceSketch || (slateMode && !forceDesktop))
{
if (!toSketch || (toSketch && toSketch->isEnabled()))
q->switchToSketch();
}
else
{
q->switchToDesktop();
}
//qDebug() << "Slate mode is now"<< slateMode;
}
#endif
}
void MainWindow::Private::notifyDockingModeChange()
{
#ifdef Q_OS_WIN
bool bDocked = (GetSystemMetrics(SM_SYSTEMDOCKED) != 0);
if (docked != bDocked)
{
docked = bDocked;
//qDebug() << "Docking mode is now"<< docked;
}
#endif
}Figure 15: Snip from Gemini - Perform 2 in1 Mode Transition via Button
Conclusion
App developers already know to consider user needs when designing features. What the 2 in 1 does is allow designers more choices in providing the best experience for their users by making apps that tailor the UI to the users’ intentions. It is very exciting to see something as “everyday” as productivity apps made better with some carefully thought through user interface changes available only on a 2 in 1 device. Productivity never felt so good.
References & Links
Download Calligra Gemini from their web site under the Windows* at http://userbase.kde.org/Calligra/Download, and learn more about Calligra Gemini at http://heap.kogmbh.net/leinir/.
Find information about touch development and 2 in 1 devices:
Introducing the Intel Developer Zone
2 in 1 Information
Touch Developer Guide for Ultra Mobile Devices
Ultrabook and Tablet Windows* 8 Sensors Development Guide
Designing for Ultrabook Devices and Touch-enabled Desktop Applications
How to Write a 2 in 1 Aware Application
Mixing Stylus and Touch Input on Windows* 8
Krita* Gemini* - Twice as Nice on a 2 in 1
Krita Gemini 2 in 1 UI Change
About the Author
Tim Duncan is technology enthusiast and an Intel engineer described by friends as “Mr. Gidget-Gadget.” Currently helping developers integrate technology into solutions, Tim has decades of industry experience, from chip manufacturing to systems integration. Find him on the Intel® Developer Zone: Tim Duncan (Intel), on Twitter: @IntelTim.