Archive for the 'gui' Category

Nintendo - DS Browser

Tuesday, October 31st, 2006

Recently the pocket game consoles market has been shocked by a turn that happened. The fancy PSP (Pocket PlayStation) seemed the very favorite for its stunning look and gorgeous display, but the outsider Nintendo DS with a very modest finish, but a totally new user interaction, is overtaken the sells.

nintendo_ds_1.jpg
Nintendo DS design

Basically Nintendo DS instead of a big but passive screen decided to use two tiny displays, one for each collapsible part. The peculiarity is that one of them, the one at the bottom, is touch sensitive so while this can be used more as data input, the other one can have a more data output functionality. This doesn’t necessary sound great if Nintendo didn’t push so well on re-designing the games taking full advantage of this new feature. Basically Nintendo re-invented many of them, creating a totally new and more compelling game experience. The market so far is already rewarding this new more interactive way of playing that is also offered as a much lower cost than the others, and this could definitely be a strength.

The next frontier for this business challenge is Internet, in facts, these consoles come with an embedded wi-fi connection that permits the owners not only to play at the games in the multiuser mode, but also to have access to the web. A browser could make these consoles become an interesting device also for not hard-core gamers, permitting people to check emails, news, or even chatting, using one of the many open wi-fi spots that can be easily found in offices, bars, or even at the neighbors. So this piece of software probably will play a key role on determining the success for these devices.

nintendo_ds_2.jpg
Nintendo DS Browser in the zoom mode

If we consider the higher interactivity that the DS offers, it’s clear that Nintendo had good chances to win the battle, but did they manage to not disappointing the high expectations?

Nintendo DS Browser is the, not so original, name of the recent re-invention from Nintendo that uses Opera Mini 2.0 as HTML render engine and despite low performances, unavoidable for devices with so low hardware profiles, it introduces interesting functionalities that are worth a look.

The text needed to write emails, or simply to fill forms, can be entered or typing in a virtual keyboard in the sensitive screen, or handwriting it in it. The handwriting conversion seems good although I don’t see so much point of having all the sensitive screen used to input two letters at the time. Probably there was room to accept more letters and, if not, entering one letter at the time, without having to go backward every two letters seemed more intuitive to me. Anyway, using the virtual keyboard seems the best option, especially if we consider that people are loosing confidence on writing with pens and mistyping can happen easily.

nintendo_ds_3.jpg
The two text input modalities

As mentioned earlier, Nintendo is pushing on these different functions of the screens, control and display. The solution designed includes the possibility to have the touchscreen as navigation map and the passive screen as zoom for readability. The user is able, pressing a button in the controls bar, to switch the two screens, useful if in the zoomed one there is something to interact with, like links, forms. In this case the user can also move the screen dragging from non-sensible areas. Unfortunately the switch button really isn’t in such a handy place, in fact instead of being in the middle of the two screens is at the very button of the lower one, but of course they had to optimize a lot the few pixels available for the interface. It’s just a shame that the console doesn’t have programmable buttons between the two screens, it this case those would have been very helpful.

Other functions already present in other mobile devices is the scroll by link, basically it is possible pressing a button to go to the next link in the page, of course is not so useful if there are plenty of links, but it remains probably a valid solution for devices that can’t move the cursor so easily and precisely like the DS.

Will be this the key of the success for the DS against the competitors? I personally think so, despite Nintendo browser doesn’t come for free with the console and the user has to pay for it. Higher interactivity will be automatically translated in less frustration when comparing the user experience while browsing on our PCs to the one in these tiny devices, and having so many options to input data in the DS will definitely make the user happier, but the market will be the judge.

Multitouch screens

Sunday, September 10th, 2006

From last year researchers started applying a technique known as FTIR (Frustrated total internal reflection), used in biometric for fingerprint image acquisition, to screens permitting to track more than one touch at the same time. A strength of this kind of solution is that it is relatively cheap, a weakness, instead, is that it requires a camera behind the display to capture the touches, so it means that these device can’t be flat. There could be still useful applications and it could be a very good starting point on experimenting with the design and development of software that uses this richer interaction that soon or later could become more portable, especially if it demonstrates its undoubted utility.

The most developed project based on FTIR seen so far is by Jeff Han that shows an incredibly variety of applications with some very interesting ideas for the interactions (look, for instance, how to control a 3D map with 3 fingers).

jeff_han_0609.jpg
Different applications by Jeff Han

During his demonstration at TED Jeff is very confident about this new kind of interfaces, and, after seeing how to create and scale a keyboard, it becomes quite difficult not to agree with him.

Another project based on the same technique is tabulaTouch by Natural Interaction. At the moment the guys from Chianti didn’t developed yet softwares advanced like Han’s, but they have clear ideas on how to use it in two different contexts: browsing visual objects archives and viewing 3D maps (a more developed version of tabulaMaps).

tabulamaps.jpg
tabulaMaps by Natural Interaction

Considering all the projects they did so far, there is no doubt they will come up with other interesting, maybe more developed, stuff soon.

The last project I’d like to talk about is Tangent, the diploma project by Christian Iten and Daniel Lüthi. It seems at a good status of development, considering all the interaction techniques designed. Some of them are based on neat ideas, for instance the “short-cut” to show the keyboard.

tangent.jpg
tangent by Christian Iten and Daniel Lüthi

It’s interesting also the interaction with physical objects, like the phycon, that reminds me some projects from the Tangible Media Group at M.I.T. Media Lab. I’m wondering which further development could have this project, considering the context where it has been developed.

All the hardware by these projects seems mature enough, despite Jeff Han talked about the possibility of recognizing which finger is which. I can’t imagine yet how it could be possible (maybe controlling the finger prints?), but that would definitely increase the power of an already impressive interface.
Due to the increasing number of researchers interested on this study we can be sure that it won’t take so long to see further developments, especially software-wise if we consider how many designers, me included, would love to play with interfaces like these.

Just watching these videos you realize how two cursors as input can be already very powerful to use a GUI. So I still don’t know why computers after more than 20 years still can’t handle two different mice. Is if for the same reason people never knew about some clever experimental keyboards?

BumpTop Prototype

Thursday, July 6th, 2006

Recently many blogs started spreading a very fascinating project. A group of developers started a project called BumpTop Prototype aiming at extending the operative system desktop functions (managing files) with other metaphors related to the experience in the “real” world, or more precisely on the “real” desk.

bumptop_th.jpg
The interface of the software.

I am definitely not a fanatic of 3D interfaces and I really like features keyboard oriented like Expose or Spotlight (both included in recent version of MacOS X) or researches like Archy, but in this case the project is targeting tablet PCs and so the interaction is limited only to the pen making it much more interesting. A doubt I have is that personally I find some real world metaphors quite limiting, just imagine the advantage of the ubiquity, so a file could be in different piles, or that the files can have a different aspect than reality, and you can use it to add information, using different colors or shapes. For these reasons personally I would consider the removal of some “real” life limitations.

Having said that, this project is impressive and considering the growing market of tablets it could have really a bright future. It will be interesting to know when this kind of computer will use multi-touch screen though, so people could eventually interact with two hands and more fingers. When it will happen, and it will happen, we will really see hardcore experimentation, almost like this :)

Watching all the interactions with the files one by one we can see very interesting ideas that show how much effort and attention the guys behind this project put in it. Probably all of these interactions look almost ideal from the demo video, but without a functional testing done in person, it would be quite stupid to come to final conclusions.

We definitely look forward to try a version on our computers but we can easily say that so far this seems probably the most promising experiment on 3D interfaces, removing many doubts interfaces like Project Looking Glass by Sun, or other I saw so far, brought.

Update: I just found out that a friend very recently reviewed it too (in Italian). I’m not suprised to find many common opinions.

Sony - www.playstation.com

Thursday, July 6th, 2006

Sony launched, not sure when, a huge Flash application as website for Playstation. It’s massive, technically very complex and it could seem like the one that products like Flex from Adobe could deliver but the quality and smoothness of the interactions and other particulars made me think it has been developed “simply” in Flash.

pscom_06_home.jpg
A screenshot of the homepage when reviewed.

At the moment I am not such a big Playstation user so I came across the website only because of an interesting lecture about music composing games to Josh Randall (Creative Director at Harmonix Music Systems).

The first thing I noticed was the video player embedded in the interface. When clicked on a thumbnail, a new window is internally created including the thumbnails in it, it looked as a very seamless solution.

pscom_06_videointerface.jpg
The thumbnails before and after the selection of the movie.

Another interesting feature is the rollover on some objects that shows the content only after a couple of seconds. Important thing during these delays is an animation showing clearly the progress of the timer. I saw a similar feature long time ago on handheld devices that showed menus after a long press in the screen, with the due countdown.

pscom_06_rollover.jpg
A sequence of the rollover interaction (click to enlarge).

For the same aspects this option could not be very comfortable because you have to wait two seconds every time you want to get the information related to the link, but in a complex interface full of elements it allows having not so much visual noise while the user is moving around with the mouse and passes unavoidably over some items he is not interested in. So it gives the possibility to show much more content than without the delay. Maybe half of the time would have been enough to avoid that kind of noise since usually the speed of the mouse is not that slow.

They implemented this delayed interaction in almost all the components around.

pscom_06_list.jpg
List box rollover effect.

There are many other features on the website deserving attention, the homepage in particular shows interesting functionalities so I would definitely suggest a visit to appreciate how much a big website like that can experiment in high interactive interface design.

BBC Two - Broadband website

Thursday, July 6th, 2006

Last February BBC launched BBC Two on a new broadband website. Broadband because it has been designed to host videos, both on the homepage and also through popups, furthermore, its interface enhances the typography design and pictures instead of long texts.

bbctwo_06_homepage.jpg
A screenshot of the homepage when reviewed.

The web designers really pushed the boundaries of the available technology, not only for the complex grid of the page but also for the Flash movie they added as background (rotating clouds)! Definitely many brave decisions in fact, despite the fact that they made many workarounds to make it as more accessible as possible, they chose to use Flash 8 as video player in the homepage (of course we know that the rapport between size and quality isn’t comparable with older versions). For the video popups they initially tried a flash menu that replaced the html one, particularly useful for anti-aliasing text ability. Later they removed this option, probably due to compatibility issues or for issues relating to scrollable list of items.

A particular feature implemented is worth a discussing. I am referring to the fading of the content of the video popup. In fact when a popup is opened to show us a video the interface of the window is hidden according to the mouse position. If the mouse is outside the window, and so presumably the user has no intention on interacting with the window, the interface fades out (get darker).

bbctwo_06_popup.jpg
The popup with the video player.

This feature helps users to focus on the video removing possible distractions. The popup window does not cover the whole screen and leaves the page behind as it was, probably not a perfect solution yet. Of course, from a technology viewpoint this could be a problem due o the presence of two different browser instances, the window behind could be easily another software thus it wouldn’t be worth the effort. An option could probably be to resize the popup size based on user’s screen, however we know how much users don’t like this and that it would be a drama for people with more than a display.

The funny, or sad, thing is that I designed a very similar feature for my blog before I saw BBC Two website (header and sidebar fadeout after not interacting with them for few seconds), but unfortunately my blog was announced a few months later, so well done to them, especially for their courage to implement such a feature and also other tiny high interactive controllers, like the one of the homepage video, in a website with such a broad audience.

bbctwo_06_video.jpg
The video embedded in the homepage.