Archive for January 6th, 2007

Smartphone touchscreen-based UI idea

I spent my whole evening creating mockups for a cellphone UI and as a result I got too much into this work that I half-burned the bread that I was baking in the oven… I am pretty happy with the result though, in terms of how I envision a cellphone UI to work. I used a bunch of icons from Tango, GPE and Resco and put it all together, as I don’t care how it looks exactly at this stage, but how it actually works. The UI should be landscape-compatible, resolution-independent but the current one is designed for QVGA screens at 2.8″, smaller than that will be difficult to read. The service line is 18 pixels, the taskbar 22, the softkey bar 20 and the main body 260. The mockup below looks big just because the DPI of your desktop screen is not high enough. If such a phone was to be manufactured it would be smaller than most PocketPC phones in the market today.

The UI is touchscreen-based, but it is 100% usable with the 6 buttons + joystick as you can see in the mockup below, without the need to use a stylus. The foremost left button loads the dial screen when pressed, while it loads the Call Log when log-pressed. The button 2 is a softkey, the button 3 opens the current application’s menu when pressed once and becomes an application switcher when long-pressed. Then, there is the joystick with its normal operation, softkey/button 4, button 5 closes modal windows or reverts to the previous open application (without closing down the current one), while button 6 hangs up when on a call, closes the current app when not on a call, and powers down when long-pressed.

The service line supports 11 icons (there is space for 1 more with some redesign, e.g. a Spotlight-like search icon and ability) which can show modified versions of their icons when something is changing to their status (e.g. if you have email/sms/mms the email icon will show the number of unread messages or when you have an IM message it will animate the IM icon). Each of these From left: service, data service (grps, edge, 3g) and if you are connected or not, how much volume, profiles, bluetooth if on/off/connected, irda on/off/connected, wifi on/off/connected and how much signal, messaging and how many unread messages, IM on/off/new-messages, show virtual keyboard on/off, battery. Each of these icons open good-looking popup icons with information and buttons to their preference panels when clicked either directly with the stylus or via navigating to them when long pressing button 3 and then pressing “up” in the joystick (in order the focus to go up, to the service line).

The second line is the taskbar. The phone boots by default to the “Summary” screen. In my mockup above you see only one more application open, the audio player. If you were to close down the media player, then the “Summary” header would expand. If you were to open more applications, it would shrink, to fit all the icons from these apps. If too many apps are open, the current application’s header collapses and only shows its icon, while in the “apps in the background” darker tab an arrow will let you scroll left and right in order to view all your open apps. When you press the header of the current application or its icon, its main menu opens up (kinda like in PalmOS’ but with one difference: one menu item allowed, but with many submenus). The “x” on the right side of the taskbar closes the current application. The “Summary” is the only application that never closes.

The date/time on the bottom of the screen is always there, no matter what app you have open (except full screen apps of course that use their own softkey code, e.g. Opera Mini and games). You can change the time by clicking on it or when in the Summary screen after you keep scrolling down to the last item, the last thing it will focus would be the datetime widget. The summary itself allows for plugins, hopefully more stable than Windows Mobile’s. ;-)

On the second mockup there is the keyboard (which allows to use two languages), some widgets (keyboard should popup automatically when focusing an input field), there some more applications open, and you can also see the service line having modified icons: now the signal is not as strong, the tower now supports 3G but it’s not connected, Bluetooth is connected to a device (animated rainbow colors), IrDA is ON, WiFi is ON and has 60% signal, there are no unread messages, IM is OFF, and the battery is at around 30%. All widgets are accessible using the joystick, including tabs and toolbar icons.

When in landscape mode the two softkeys stack on the top right corner and all the bars actually keep their original sizes so nothing is getting squashed out of the screen. Because the datetime is not possible to be displayed in the landscape mode, a datetime plugin loads in the Summary screen (with the potential to show times for 2 more timezones). While putting the two softkeys in the corner looks bad and it has a questionable usability, one has to ask himself if he would like that extra 4800 pixels to be usable, or to be dead space… Personally, I prefer to have more usable space. Besides, devices that use landscape by default can place the two hardware softkeys vertically so the layout in the mockup makes more sense.

Ok, enough dreaming, off to bed.