Design Challenge in MoneyBag App - 2 in 1 Enabling : A Case Study

Introduction

2 in 1 devices are PCs which can work both in laptop and tablet modes. The laptop mode would have mouse and key board and the tablet mode would have touch and multi touch gestures as the primary input modes.

2 in 1 - Design Challenge

Apps are usually developed for either laptop mode devices or tablet mode devices but the design for 2 in 1 devices has to be very different and strategic to not only handle both the modes of input but also leverage them to enhance the app experience for the user.

Pro Tip: The app should not just work in both tablet and laptop mode but it should be optimized for both the modes. This is a challenge for all developers since developing just for one mode itself is usually a complex work.

MoneyBag App - 2 in 1 Design Challenge

We faced a similiar challenge when we optimized MoneyBag for 2 in 1 devices with both Mouse / Keyboard and Touch Inputs. This was hugely a design challenge as the design should respond to both modes and also not feel out of place.

MoneyBag is a Desktop application primarily designed for Mouse and KeyBoard input. We worked with Intel to enable MoneyBag for a 2in1 device which means that the app will be able to respond to both desktop and tablet modes of operation seamlessly switching between the two modes.

This was a complicated design issue since touch would need largely spaced buttons than mouse. But having large buttons on screen like a touch app totally spoiled the look of the app and would also be unnecessary in non-touch devices and also in cases where the user wants to work just with mouse.

Additional Requirements from Intel

The main considerations we got from Intel to enable an app for 2 in 1 are the following:

1. Minimum of 10% UI changes between mode switches

2. Dynamically Update App UI

3. Add a manual override feature (In devices where the switch is not automatically capture

Solution

After several real time concepts and designs we decided on having two menus, a small and compact menu for mouse in the main page of the app but another menu with large and spaced menu buttons for touch operation. The large and spaced menu will be hidded which slides out when needed (when the user wants to use touch), gives the context menu and slides in when the operation is over and never obstructs the main design in anyway.

This is very cool since it does not affect the app’s design in anyway and at the same time eases the user’s effort if he or she wants to use touch as the input mode. This is a hybrid design approach where we cater equally to two of the most important input modes, mouse and touch, without compromising on the design aesthetics or the ease of use. The keyboard as always is supported in both the modes.

We believe that this would be key milestone in designing apps for Ultrabooks and mouse + touch based hybrid devices and would be a proven design pattern for future 2 in 1 apps.

Summary:

1. Recent 2 in 1 Ultrabooks have awesome tablet and laptop modes which take both mouse/keyboard and touch inputs.

2. The application design should cater to both mouse and touch inputs and ensure that they don’t over lap to kill the overall design.

3. Having same set of buttons for touch and mouse would prove counter- productive and hence the design should come up with innovative ways of handling that.

4. Hidden menu is only one of such concepts where the main meny is contextually shown based on the current mode.

5. There will be small menu items in laptop mode and large and spaced buttons in case of tablet mode. The touch menu would be hidden and hence it would not impact the overall design of the app.

Authors,

Suresh and George

www.theblueinnovations.com

 

For more complete information about compiler optimizations, see our Optimization Notice.