Creating fluid user experiences

Recently we have been co-operating with Linja Design, brainstorming and prototyping UI/UX ideas. One of their concept is branded as "Zax 2.0", idea being to tilt the flickable area so that it reveals more content into the direction user is panning so he/she will see "further ahead". To understand what I'm talking about, please check this video.

I know there already is Cooliris and friends using similar method, but do you think this could be utilized still a bit more? Where and how would you use this if it would be easily available in the platform?

I'm open to all ideas and to prove it, show here a world premiere of "Powered by Zax 2.0" 5-in-a-row game in N900:



(And no, game is not available from anywhere yet, just under construction ;-) )

Comments

roope said…
Hi, cool work.

My Captain Obvious list would be:

- The browser

:)
January 27, 2010 at 5:24 PM
Kaitsu @ QUIt Coding said…
roope: Yes, browser is definitely in the prototyping queue!
January 28, 2010 at 9:18 AM
mrp said…
all type of lists, media player internet radio list as an example. Scrolling ends often for me up with unwanted selection when I'm trying to choose right one while scrolling still takes place
January 28, 2010 at 10:09 AM
Chris said…
This kind of a thing would probably be most useful when viewing your photos. You'd move your finger to see what kind of images are coming up, but still you could have one image large enough on the screen to see it in great detail.

However, I don't see why this couldn't be useful in the desktop views as well. If the Maemo 5 desktop view would be extended to pan up and down as well as left and right, this kind of view would be great for that. You could begin to pan up or down and then immediately see that "no, I didn't place the widget I want on that desktop after all". Or something of the sort.

I think generally viewing text would be cool as well, as you could get a Star Wars kind of "Once upon a time in a galaxy far away..." view. I think here it should be restricted that you can only go up or down. Would be really cool and intuitive. I'd definitely dub this as the "Star Wars text view". :D

Looks really promising!
January 30, 2010 at 1:11 PM
dandelion said…
hi,

yes obviously web browsing, but the desktop could use the help, especially the list of apps, currently its a slow interface.

and of course maps and any graphical applications.

im an artist and designer and not at all interested in games. if i wanted games i would have bought a toy. hint, hint, hint.

enjoy peace and love,
dubbydanny
January 31, 2010 at 4:27 AM
Unknown said…
is it possible for web browing and maps, if the tilt state can be left like that by default or and an option to keep it like that, so that you dont have to hold your finger on the screen. So if im reading an article or blog it would display like the intro text to star wars. I think that would be better. Again an option to keep screen tilted without needing to hold with finger. (or toggle, by double or triple tapping.
January 31, 2010 at 5:17 PM
Post a Comment

Popular posts from this blog

Qt 5.10 QML Shape testing

Image
When implementing component into QtQuick UI which needs something more than rectangles, images and texts, pure declarative QML hasn't been enough. Popular choices to use for items with some sort of vector drawing are QML Canvas , QQuickPaintedItem  or QNanoPainter . But with Qt 5.10 there will be supports for new Shape  element with paths that contain lines, quads, arcs etc. so I decided to install Qt 5.10 beta3 and implement all tests of "qnanopainter_vs_qpainter_demo" with also QML + Shape elements. ( This kinda makes it "qnanopainter_vs_qpainter_vs_qmlshape_demo" but not renaming now ). So here is in all glory the same UI implemented with QNanoPainter (left), QQuickPaintedItem (center), and QML+Shape (right): Hard to spot the differences right? If only there would be a way to prove this, some way to x-ray into these UIs... like QSG_VISUALIZE=overdraw  to visualize what Qt Quick Scene Graph Renderer sees? Here you can see that scene graph sees QNan...
Read more

Introducing QNanoPainter

Qt World Summit is just about to start! I’m not participating this time, but wanted to contribute one-more-thing to discuss in UI groups at the heart of Berlin ;) During the past about six months we at QUIt Coding have had a side-side-project called QNanoPainter. This library is designed for implementing custom QQuickItems into Qt5 scene graph. Currently if you want to implement custom Qt Quick item, options are at least: QQuickItem : Offers best performance due to Qt5 scene graph integration. But QSG* classes are relatively low-level with vertices, indices & materials. Painting more complicated things requires quite an expert and even then productivity is not very high. QQuickFramebufferObject : This is a good option if you want to draw with OpenGL into QQuickItem. But as we all know, OpenGL is also quite low-level API so no productivity wins here. QQuickPaintedItem : This means painting with good old QPainter C++ API. Weakness of QPainter with modern graphics accelerated ...
Read more

Qt 5.10 Rendering Benchmarks

Image
Qt 5.10.0 RC packages are available now and actual release is happening pretty soon. So this seems to be a good time to run some rendering benchmarks with 5.10, including new QML Shape element, QQuickPaintedItem and QNanoPainter . After my previous blog post , some initial comments mentioned how QML Shape didn't reach their performance expectations. But I think that might be more of a "use the right tool for the job" -kind of thing. This demo application is very much designed to test the limits of how much heavily animated graphics can be drawn while keeping performance high and while having its own strengths, QML Shape likely isn't the tool for that. To prove this point, there is a new ' flower ' test case in QNanoPainter demo app which renders a nice flower path, animating gradient color & rotation (but not path). Combining it with new setting to render multiple items (not just multiple renders per item) and the outcome looks like this with 1 and 1...
Read more