Interface Love

Nokia N900 must be a "mobile" computer. Not just a computer.

2009-09-02T16:58:00.000-07:00

"You don't need separate applications for this. Just like the web on your home computer." from N900 hands on video, The Nokia Blog.

Maemo 5 and N900 looks great, but this way of thinking is very bad for "mobile" devices. I can watch YouTube videos? Very nice, but I really prefer to use an application for that! Those web sites are not designed to be used in 3.5 inch 800x480 screens. And the user will not be sitting in front of a computer, he/she will be on the go. Using his/her fingers to navigate tiny links.

Mobile usage scenarios are different. We-need-separate-applications!

Fermantle File Chooser Brainstorming

2009-06-11T13:52:00.000-07:00

There is a discussion about Maemo 5 file chooser UI. I'm not familiar with the new Maemo UI. But I think the space can be used more effectively. There is a new row for more content in my version of the file choser. This is my version:

And this is the original UI:

And what about this:

Instead of this:

Palm Pre intro video

2009-06-06T03:27:00.000-07:00

Palm Pre intro video. I like it.

Apple patenting what Windows Mobile had for years

2008-12-26T05:02:00.000-08:00

"According to the patent application, simple input commands like delete and space would be controlled with simple back and forward-swipe motions. While remapping something that is already readily available through a screen key is of minor value, this technique could also be used to introduce completely new functions, and augment the iPhone's somewhat gimped text manipulation." Read more

How innovative. Windows Mobile on screen keyboard had this feature for years! So this means there are innovative parts of Windows Mobile that worth copying.

Dialog boxes

2008-12-24T14:39:00.000-08:00

This is an example of a poorly designed dialog box.

1. Too much text.
2. The dialog box tells user what to do, but they can't do anything unless they close it. You have to memorize the steps.
3. The steps are in wrong order! Menu names must be written in an order that is meaningfull to the user. "Change conversion settings" must come second in the sentence.
4. There is no "Adobe PDF" menu or a "Change conversion settings" menu item anywhere!

Windows Mobile today screens from PPC 2000 to Windows Mobile 6

2008-12-21T07:29:00.000-08:00

"The Windows Mobile UI has certainly changed over the years from the days of Pocket PC 2000, to the more present, Vista-inspired Windows Mobile 6. We've put together a graphic that shows the evolution of the Windows Mobile interface over the last five versions." http://discuss.pocketnow.com/showthread.php?threadid=22442

Oh my God. Forget the ugliness, look at the wasted space!

PointUI 2 interface video

2008-12-21T06:15:00.000-08:00

PointUI is preparing the second version of their cool software. More information at: http://pointui.com/

Lack of multi-tasking breaks iPhone user experience

2008-11-19T13:55:00.000-08:00

Lack of multi-tasking breaks iPhone user experience. Take App Store application on the iPhone for example. When user taps on Install button, App Store application is closed. When you go back to the App Store, you are at the beginning of a huge application list. It should at least store your last position in the list. Another example might be online radio applications. I enjoy listening online radios. But when I need to use another application, I must quit.

The Unfinished Swan - Tech Demo

2008-11-18T17:37:00.000-08:00

Wow!

Via Handful of Nothing

Minority Report OS or "It will be very tiring to use computers in the future"

2008-11-14T17:02:00.000-08:00

So this is G-Speak. The "Minority Report OS". It is cool as other multi-touch prototypes. Maybe even cooler. But is this type of interaction is the best choice to use computers? I never used something similar to this, but it looks like it requires a lot of physical activity. Think about our interaction with our current computers. We are so lazy that we invented keyboard shortcuts!

Via Endagdet

Firefox for Windows Mobile first screenshots

2008-10-22T13:35:00.000-07:00

"So far, all we knew about Mozilla’s Fennec browser was a bunch of well-meant but completely void-of-substance announcements. However, this has just changed"

You can view the screenshots at: http://tamsppc.tamoggemon.com/2008/10/13/firefox-for-windows-mobile-first-screenshots-surface/

Opera Mobile 9.5 UI Screenshots from Mobile Review

2008-10-20T05:51:00.000-07:00

"If you run through some announcements of latest and greatest Windows Mobile powered communicators, you will surely notice that at least two manufacturers are committed to embed Opera Mobile 9.5 into their offerings as the default solution for web browsing."

You can read more at: http://www.mobile-review.com/articles/2008/opera-9-5-en.shtml

Nokia Tube UI

2008-10-18T00:04:00.000-07:00

"Designing touchscreen-enabled phones, Nokia tried to tweak them both for finger- and stylus-based data input." I'll be honest, I think this GUI looks ugly.

You can read more at:
http://www.mobile-review.com/review/nokia-s60-5th-edition-en.shtml

HTC Dream with Andoid OS

2008-08-30T11:47:00.000-07:00

Engadget posted some photos of HTC's Android based device. Read more

Kinoma Play for Windows Mobile UI

2008-08-29T12:04:00.000-07:00

WM Experts made an excellent review of Kinoma Play for Windows Mobile. Kinoma Play has its own interface and it looks sweet. Read more at WM Experts

Newton UI Screenshots

2008-08-29T11:58:00.001-07:00

Newton user interface in 100 screenshots. I've used the Newton emulator to capture these images. It is interesting to see that this old Newton interface is better and prettier than Windows Mobile 6.1 user interface.

By the way, images are watermarked with "mobilyazilar.com" text because I'm a writer in that site too.

Click here to view Newton UI Screenshots

Newton UI Screenshots page 5

2008-08-29T11:43:00.001-07:00

This was the last page of Newton GUI screenshots. Thanks for viewing!

Select a page: 1 2 3 4 5

Newton UI Screenshots page 4

2008-08-29T11:38:00.001-07:00

Click to go to the next page of Newton GUI Screenshots

Or select a page: 1 2 3 4 5

Newton UI Screenshots page 3

2008-08-29T11:29:00.001-07:00

Click to go to the next page of Newton GUI Screenshots

Or select a page: 1 2 3 4 5

Newton UI Screenshots page 2

2008-08-29T11:23:00.001-07:00

Click to go to the next page of Newton GUI Screenshots

Or select a page: 1 2 3 4 5

Newton UI Screenshots page 1

2008-08-29T11:00:00.000-07:00

Click to go to the next page of Newton GUI Screenshots

Or select a page: 1 2 3 4 5

Garmin Nuvifone UI at Engadget

2008-01-30T17:06:00.000-08:00

Garmin announced its new Nuvifone and its first UI shots are at Engadget.

Pointui Home

2007-12-28T03:00:00.000-08:00

This is another attempt to bring iPhone style to the Windows Mobile platform. Looks very cool. Do not forget to watch the video below.

Some text from the video:

Welcome to Pointui Home. Home is not like any other prodcut you have used before, so please spend a moment learning some key features.

The screen you are looking at is called the Home Screen.

At the top of this screen is the Information Bar.

The Information Bar contains information related to your signal strength, your data connections, volume settings, and battery status.

Your volume settings can be changed by clicking the volume button.

The Arrow at the top right of the screen is known as the Return Arrow. It will return to the previous screen.

Clicking the cog in the top right will take you to the Settings Menu. The Settings Menu lets you configure your device.

The black Status Bar at the very bottom shows you are on the first screen but there is another to the right you can visit.

You can slide across to see what is in the Personal category.

You can slide the list up and down to browse through them. You can also scroll lists by Bookmark for quick navigation. Bookmark scrolling is activated when you scroll on the right side of the list.

To go back to the categories you just slide left.

You can navigate through the applets by sliding your finger.

Below the Applet Ribbon are the Communications and Media Controls. Should you miss a call, receive a new email or text message an indicator will appear on the respective control.

Located at the bottom of the screen is the Application Bar.

Official Web Site

Samsung P520 Armani User Interface

2007-12-26T16:25:00.000-08:00

A review full of Samsung SGH-P520 user interface screenshots. From the source of great reviews, Mobile-Review.

More at Mobile-Review

This sounds familiar! (Desktop UI on a mobile device)

2007-12-25T08:48:00.000-08:00

"The machine is amazingly slow. Every time you open or close a window, icons slowly trickle onto the screen one by one. [...] Microsoft can produce as many carefully manufactured survey results as they like - the fact is that familiarity issues or no familiarity issues, the Win95 user interface is fundamentally unsuited for use on a handheld machine. Maybe first-time users will be reassured for the first few minutes of use - though I doubt it - but to gain a reasonable degree of usability, Microsoft will have to face reality and ditch the Windows user interface."

This was written in 1999. Nine years after the Cassiopeia A-11A, we are still talking about the problems of Windows Mobile user interface. Thank god iPhone is out. It is only competition that makes Microsoft move forward.

Read more about Cassiopeia A-11A

Google Android User Interface

2007-12-24T08:40:00.001-08:00

In my opinion Adroid does not have an exiting interface. But Michael Mace thinks it has problems too. "I think it's a great design, but it's awfully reminiscent of the interface in Yahoo Go. Maybe that's just a coincidence, but Google lately has shown a disturbingly Microsoftian tendency to borrow ideas from others. The overall interface design is relatively clean, at least compared to the overdesigned clutter that you see on a lot of smartphones. But it's optimized to look pretty on a computer screen rather than be usable on a real-world phone."

Look at the image below. Two horizontal bars making the small screen even smaller. This is not a good design decision. This is wasting valuable screen space.

Michael Mace on Adroid - Mobile Opportunity

Android First Look - Mobile-Review

A visual tour of Adroid UI - Engadget

The Android User Experience, Could Chaos Reign?

Why Mike Rohde declined an Apple job opportunity

2007-12-23T06:08:00.000-08:00

"About a month ago, late on a Monday night, I received an intriguing email. A senior recruiter at Apple found my blog, reviewed my design work and wondered if I might interested in a position on the iPhone/OS X design team. [...] If I was interested in moving ahead with this, the next step was an icon design project and an essay on my solution for a UI design challenge." Why Mike declined this opportunity? More at Mike's blog.

Nokia n800 interface video

2007-12-22T03:17:00.000-08:00

Nokia n800 is no longer "the latest thing" but if you wonder how its interface is, this is probably the best video you can find. "I created a video in response to viewing the James Kendrick video on the HTC Advantage yesterday. It shows how I think the Nokia N800 compares to the Advantage. You be the judge! You can download it as high resolution 30 minute 50+ MB video in full 800 X 480 size to get a real feel for the N800’s screen." Click for more info.

Samsung YP-P2 user interface

2007-12-19T15:53:00.000-08:00

One of my favorite gadget sites, Pocketables, reviewed Samsung's new touch-screen media player. There is also a video showing the UI. "The interface is well designed and easy enough for anyone to just pick up and use, but using the touchscreen can sometimes be a bit of a nuisance (and not just because it's a magnet for fingerprints and smudges). Responsiveness is the biggest issue for me, as there is often a slight delay between a finger tap and the system's action." Click here to read Jenn's review.

Nokia n810 (OS2008) interface video

2007-12-18T11:22:00.000-08:00

Internet Tablet Talk has prepared a video about the new OS2008. "This is part II of my Nokia N810 Internet Tablet walkthrough. In the video I show OS 2008, show what’s new, and demo Rhapsody."

More at Internet Tablet Talk.

DuoSense Multi-Touch Technology

2007-12-16T05:55:00.000-08:00

"N-Trig makes the DuoSense technology that powers the Dell Latitude XT's touch-sensitive and pen-enabled display. This is the only input device in the market that combines a pressure-sensitive pen with multitouch into a single surface, which allows for seamless iPhone-style finger interaction—perfect for broad, direct object manipulations—and precise stylus for electronic ink input and drawing."

Gizmodo

N-Trig

Wii without Wiimote? ZCam 3D Camera!

2007-12-16T05:34:00.000-08:00

Ever wanted to control your computer with your hand gestures? Although the music is horrible, this video is a must see: Link

Developers offical web site is here.

Coming soon: Canola 2

2007-12-16T05:08:00.000-08:00

Canola 2 is coming soon. You can visit its website while waiting: http://openbossa.indt.org.br/canola2/

You can also visit Macelo Eduardo's weblog for background information about Canola's interface: http://www.marceloeduardo.com/blog/

And here is a video of Canola 2 on Nokia n770:

Zumobi

2007-12-15T15:31:00.000-08:00

Zenzui became Zumobi. "Zumobi lets you access and share web-based content on your mobile phone in an innovative, new way. Get the information you need – and the entertainment you want – in snack-sized bites throughout the day by zooming through Zumobi’s widget-like Tiles. The Zumobi mobile content application provides a unique, lush, and engaging zooming user interface that makes it incredibly easy and fast to navigate through the content that you care about."

The Unwired on Zumobi (ZenZui)

Offical site

Windows Mobile Carousel Menu (links)

2007-12-15T15:12:00.000-08:00

Links: One Two Three Four

This seems to be the best one:

OpenMoko 2007.2 screenshots

2007-12-04T10:53:00.000-08:00

Work-in-progress OpenMoko interface screenshots. Click here to see all of them.

iPhone vs HTC Touch: Interface wars

2007-07-18T05:46:00.000-07:00

WMExperts.com - Via MobilitySite

MPX: Linux multi-touch surface computing

2007-07-16T14:32:00.000-07:00

Everybody is working on multi-touch and surface computing nowadays. This time it is a Linux based project.

Things get a lot more interesting when you connect a MPX-enabled Linux system to a Mitsubishi Electric's DiamondTouch display table. Like Microsoft Surface, the DiamondTouch is also a "multi-user, debris-tolerant, touch-and-gesture-activated screen for supporting small group collaboration" surface.

While the DiamondTouch employs a different technology than Microsoft's TouchLight or Han's FITR hardware, the final result is even better because the MPX-DiamondTouch combination actually recognizes four different unique users. Microsoft Surface and Jeff Han's developments allow multiple users to interact with it, but they don't recognize as unique yet.

However, there are drawbacks: This solution requires "each user to touch a different conductive pad" for the system to recognize them and according to MPX's developer: "The DT is good for detecting multi-touch from different users but not good at detecting multi-touch from the same user." Still, it will be interesting to see MPX evolve, specially if they can get it to work in other kind of Minority Report-style hardware interfaces.

Ellipses: The great misunderstanding

2007-07-15T01:23:00.000-07:00

This is a very common mistake. Many developers, including myself, use ellipses when a button or a menu command opens another window. Vista UX guide says this is wrong:

Menus

While menu commands are used for immediate actions, more information might be needed to perform the action. Indicate a command that needs additional information (including a confirmation) by adding an ellipsis at the end of the label.

In this example, the Print... command displays a Print dialog box to gather more information.

Proper use of ellipses is important to indicate that users can make further choices before performing the action, or even cancel the action entirely. The visual cue offered by an ellipsis allows users to explore your software without fear.

This doesn't mean you should use an ellipsis whenever an action displays another window—only when additional information is required to perform the action. For example, the commands About, Advanced, Help, Options, Properties, and Settings must display another window when clicked, but don't require additional information from the user. Therefore they don't need ellipses.

Note: When determining if a menu command needs an ellipsis, don't use the need to elevate privileges as a factor. Elevation isn't information needed to perform a command (rather, it's for permission) and the need to elevate is indicated with the security shield.
Buttons

End the label with an ellipsis if the command requires additional information for successful completion. Don't use an ellipsis when the successful completion of the action is to display another window, such as with commands like About, Advanced, Options, Properties, or Help Topics.
Exception: Graphic labels don't take an ellipsis.

Correct: (if a Print options dialog is displayed)

In this example, after the button is clicked, the Print options dialog is displayed and requires more information from the user.

Incorrect:

In this example, after the button is clicked, the Options dialog is displayed, but more information from the user is not required.

For browse buttons, use short browse buttons (labeled "...") when there are more than two browse buttons in a window. Always use the short version when you want to display a browse button in a grid.

For directional buttons, use a single angle bracket and have it point in the direction where the action takes place.

Command Links

Ellipses mean that more information might be needed to perform the action. Properly used command links don't need ellipses because they have an immediate effect.

Links

End the link with an ellipsis if the command needs additional information (including a confirmation) for successful completion. Don't use an ellipsis when the successful completion of the task is to display another window—only when additional information is needed to perform the task.

Print...

In this example, the Print... command link displays a Print dialog box to gather more information.

Print

By contrast, in this example a Print command link prints a single copy of a document to the default printer without any further user interaction.

Proper use of ellipses is important to indicate that users can make further choices before performing the task or cancel the task entirely. The visual cue offered by an ellipsis allows users to explore your software without fear.

Toolbars

While toolbar commands are used for immediate actions, sometimes more information is needed to perform the action. Use an ellipsis to indicate that a command requires more information before it can take effect. Put the ellipsis at the end of the tooltip and label, if there is one.

In this example, the Print... command displays a Print dialog box to gather more information.

If a command cannot take effect immediately, however, no ellipsis is required. So, for example, sharing settings doesn't have an ellipsis even though it needs additional information, because the command can't possibly take effect immediately.

The Sharing Settings command doesn't have an ellipsis because it can't take effect immediately.

Because toolbars are constantly displayed, and space is at a premium, ellipses should be used infrequently.

Serene Phone: Yet another program launcher for WinMob

2007-07-14T11:57:00.001-07:00

Serene Phone is a program launcher for Windows Mobile, and it has some cool features. It seems to be inspired by iPhone but unlike many others, its interface is not a direct copy of iPhone interface.

Serene Phone - Via PocketPCThoughts

Windows Mobile: Jealous of iPhone

2007-07-14T04:17:00.000-07:00

Well, it should be! iPhone may be lacking lots of features, but it has a great interface. There are many projects to make Windows Mobile better in this aspect.

"The developer also wants to let everyone know that the intent of this project is not to duplicate the iPhone interface but...take some of the principles of that user interface and bring it to Windows Mobile platform! One of the big keys here is operating the phone with just the thumbs. The Beta (or better Alpha) isn't yet available for public download but you can register on the site if you are interested to become a Beta tester."

WhoNeedsAniPhone.com Conceptualizes New WM UI - Via PocketPCThoughts

Links

2007-07-14T01:10:00.000-07:00

User Interface Guidelines
Collection of UI guidelines.

Paul Hibbits
"Paul D. Hibbitts is a usability/user interface design specialist and university instructor based in Vancouver, BC, CANADA."

GuideBook
Graphical User Interface Gallery

More links coming soon!

UI Guidelines

2007-07-14T01:05:00.000-07:00

Windows Vista UX Guidelines

Mac OS Apple Human Interface Guidelines

Palm OS Garnet OS (Palm OS) User Interface Guidelines | Zen of Palm

Windows Mobile Windows Mobile 6 Design Guidelines

Nokia All Nokia guidelines

I love UIs

2007-07-14T01:00:00.001-07:00

I don't know why, but I love user interfaces. So I started this blog to share my love.