BioIQ UX for the Ultrabook

We are in the thick of things as we complete week-1 of the Intel Ultimate coder challenge. In this week’s post we will focus on some of the UX decisions that we have made and the rationale behind them. We will also share some how-to for the developer in you, who may be thinking about your own apps and/or plans for building one on Windows 8-Ultrabook.


To Metro or Not to Metro, that is the question!

Short answer - Yes, we will have a Metro version. (We will call it Metro, until we know better) Read on for a longer answer. If you are an app developer and are thinking about the app store ecosystem in the next few months (in the Win-Intel context) we see three main options - (a) Be on the Intel AppUp store (b) Be on the Win 8 store in the ‘metro’ mode (c) Be a ‘desktop’ app distributing directly (ie without using the store)

There are many reviews of the new Windows modes on the web, like this gizmodo review, so I will not spend too many pixels on that.  Except to say that I am on the upbeat/optimistic-on-Win 8 camp, although I expect it to go through the usual teething phase.


As a reminder, one of our big goals here is to increase the potential ‘reach’ to our app (beyond users of IOS and Android) to the PC.   This goal is on the request of our current users, ie teachers who want to use it in their classes.

In terms of adoption cycles, our target market (schools, teachers, the broader edu space) is likely to follow a slow upgrade path.   A case in point - right now, we are talking to a school that wants our apps on IOS 4.1, instead of the recommended minimum of 4.3.   We expect Win 7 to be around for sometime, hence we will plan to have an AppUp store version of BioIQ.

In terms of devices, as one of the judge (Chippy aka Steve) called out, the ‘reference device’, as lending itself to the notion of ‘snackable’ mode and ‘productive’ mode.  At the device level, we see that notion as the ‘tablet’ mode and the ‘laptop’ mode.  At the interaction level, we see that notion as touch interaction and mouse interaction.  At the OS level, we see that notion as ‘Metro’ mode and ‘Desktop’ mode.  And at a user mind set level, we see that notion as ‘Consumption’ mode and ‘Creation’ mode.

Our app is a consumption mindset app, so we will also take a forward-looking view and build for Windows 8 Metro.   Now, a Metro app will work in the desktop mode too, but if/when it comes to design considerations, we will favor the Metro mode, and this aspect is what we will talk about in the rest of this post.


BioIQ and Metro UX Considerations

As one of the judges (Jon Rettinger ) said in his week-1 post that the Ultrabook comes with a ‘less forgiving’ screen, which we agree with.  How to make a game like BioIQ seem natural / work well on itis the challenge we have.  Below are some of the elements that we are breaking the problem into and what we are doing within each area.


Screen Orientation

Considering the screen-size of mobile devices, BioIQ was intended to work in landscape mode. On the Ultrabook, we will continue with this screen orientation.  In a pure tablet like version of Ultrabook (when such a device hits the market we can see the need for supporting it.  For this version of the app, we will stick to the basics.

A screenshot of the game play screen, on the reference device is below

BioIQ Game Play in Metro Mode


Touch Interface

As one of the judges (Helena Stone ), said in her week-1 post, the key to a good app is leveraging features of the Ultrabook, in the context of the app.  For BioIQ, the touch interface is the key - it aligns with the philosophy of bringing interactivity into the the game.   At the heart of this philosophy is the fact that we don’t expect the user to have any prior knowledge about the topic at hand. In other words, the aim of the learning experience is ‘trial and error’.  So the interaction is to ‘try’ to label a part of the picture, make mistakes and eventually get the correct answer.

Here is a photograph of the game play screen, with touch based label-drag/drop on the current build

BioIQ Plant Game Play dragging the label (touch)

BioIQ Plant Game Play dragging the label (touch)

BioIQ Plant Cell Game drag-and-drop the label (touch)

Future apps, on our drawing board, follow this philosophy of the game play itself being the learning experience.


White Spaces

As you can see from the first screenshot, the larger screen (relative to a mobile) can make one feel the need to use it.   We are considering our options but haven’t reached a decision whether we should address it and how.  The options we are considering are:

  •  Embrace the white space, ie don’t try to fill up space because it is available. Instead increase the size of the picture and make that the focus of screen.  Even have a more detailed rendition of the picture for the Ultrabook
  • When we originally built BioIQ, we had considered building out an element of time into the game.   We had decided that our iOS and Android releases would not have such a feature.  We could use the available real estate to introduce such a feature.  One of the judges (Chris Maunder) mentioned in his week 1 post,  that making the experience more immersive would be exciting.  We agree and think that this element of a ticking clock (potentially implemented in more creative ways) could bring such an experience
  • We have had some of our users request that the app should provide more details (a ‘read more’ if you will, on a given topic.  So far we have taken the idea that, for folks who are interested, there is a lot of material available on the web and hence have stayed away from making the experience too content heavy.  However, this is a valid option too.

To the extent possible, we like to take actual user inputs before such decisions.  However, in this instance, we may just proceed with an option like the above (we haven’t listed every idea here).   In any case, we are going to park this decision and come back to it in a future sprint, in it makes sense.


Screen Sizes and Scaling

Both Android and iOS devices have good mechanism to support different screen sizes and resolutions.

Although we are currently building for the reference hardware that Intel provided, we expect various screen-sizes and resolutions to appear over time (different device manufacturers and different price points will ensure this).   This implies that we need to plan for multiple sizes and resolutions.

Given that BioIQs’ content is primarily image driven, we will go with a fixed layout.  The app will then incorporate a scale-to-fit approach, based on the screen dimensions.  If your app were text heavy, then considering an adaptive layout is likely to be better.


App Bar

AppBar is a metro app and a context toolbar.  If you need an analogy, it’s the equivalent to the tool/menu bar in a desktop (Win 7) application (I suspect that a designer at MS, will not like that description J ).  Current versions of BioIQ have a navigation menu that fits with this paradigm quite nicely.


Here is a screenshots with the App bar in the Full View (refer next section)

BioQ Metro Home-screen in full-view mode


(early build screenshot)


And a code snippet, showing how the app bar is implemented

BioIQ Metro App-bar code snippet

You can read up more on the app bar on MSDN here ( MSDN Javascript example).


Metro Screen Views (Full, Snapped, and Fill)

The wide screen of the reference device (and likely tablets based on Win 8) provides an interesting flexibility in screen states, a luxury that we don’t typically have on a typical mobile device.  The user will play the game in the ‘Full’ view context.  The app will use the ‘Snap’ view area for providing the user with game level context.  The user will be able to play the game in Fill view, and this view will also provide the game achievement context, as show in the above screen shot (from our early buid).

This MSDN article is a good one to understand the views.

Here is a code snippet, showing how the views are implemented

BioIQ Metro SnapView screen-shot


JQuery.ui vs WinJS


Windows provides us the option of using WinJS library for the app.   Currently, we use JQuery.ui on the Android and iOS apps.


As we have said before; our objective is to increase user reach with this version of the app, but we do not wish to increase the cost of future maintenance and upgrades to the app.  In other words, we will have a balancing act to do between optimizing (of UI and performance) for Windows 8 and maintaining feature parity across platforms and potential future upgrades on all platforms.

Some elements (like the AppBar), which is unique to the Metro app, lends itself to the WinJS implementation.  Others (like the game play screen itself) may be better off retaining in the JQuery.ui implementation.

Hence, we are leaning to the approach of using WinJS style sheets and override it wherever necessary.  The benefit of this approach is that the app will have a Windows 8 look and feel on the windows only elements and will be consistent across platforms.


Reference Link

A good reference MSDN resource on UI & UE for Metro-style application is here.


The Week Ahead

As you can see from the screen shots, we have made good progress. But  long way to go.   This turned out to be a way longer post than we had intended… time to get back to putting everything we said above, together … see you in a week.

PS: Let us know if you would like us to talk about something specific next week.



for Team Clef

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
Enter the characters shown in the image (to confirm you are not a machine)