This collection captures findings of consistent, unique or interesting interfaces and design flows from across the web.

I designed Dropular just as I would design a desktop application — the UI and related logic runs on the host computer (client). The host knows how to present a GUI and the host knows about user input, end-user’s environment state and so on, making UI code running on the client-side the natural choice. Then again, there’s always data. Dropular.net communicates with one or more backend access points to read and write data, verify authentication and so on.

Since I have begun design­ing iPhone app inter­faces last year, I have been deeply in touch with the nuances of the inter­faces of native and non-native apps. As a designer who is also adept in print design and has an acute typo­graph­i­cal sense, I can­not help but keep notic­ing the flaws and imper­fec­tions of the 44-pixel rhythm.

The goal is not to make your user interface as realistic as possible. The goal is to add those details which help users identify what an element is, and how to interact with it, and to add no more than those details.

People who understand user experience, user psychology, and interaction design are going to design great user interfaces in any medium. There is nothing special about the web that makes it more or less challenging than designing on an iPad. They are just different. And good designers know the differences, understand the limitations, and will design something great for each.

Over the last couple of years, the iPhone has greatly popularized the tab bar navigational model for mobile handsets. Apple has put together a design rationale for the tab bar in their Human Interface Guidelines (HIG) along with lots and lots of other information — they do however leave some question unanswered. Having worked with interaction and graphical design for iPhone applications during the last couple of years I’ve managed to pick up some lessons the hard way, and in this post I would like to share my thoughts on a couple of do’s and don’ts.

We hear plenty usability tips and techniques from an incalculable number of sources. Many of the ones we take seriously have sound logic, but it’s even more validating when we find actual data and reports to back up their theories and conjectures.

For months, I’ve been trying to figure out why Google Maps’s city labels seem so much more readable than the labels on other mapping sites.

Ignoring the blank slate stage is one of the biggest mistakes you can make. The blank slate is your app's first impression and you never get a second...well, you know.

The different timing of all five animations coordinate to make the page transition whoosh. You can barely notice the animations individually and as for perceiving them all in combination, forget it. But you’re not supposed to notice them. You’re simply supposed to get a tiny thrill of seeing one page whoosh in to replace the other, of using a device that somehow seems alive.

Normally when you think of “bad design”, you think of laziness or mistakes. These are known as design anti-patterns. Dark Patterns are different – they are not mistakes, they are carefully crafted with a solid understanding of human psychology, and they do not have the user’s interests in mind.

Gmail’s recent update brought us a strange new UI element:1



Clicking on the checkbox selects all emails. The arrow, on the other hand, allows you to make more specific selections:

In other areas, the improvements are questionable at best. Graphical user interfaces are typically full of symbols. Most graphical elements you see on your screen are meant to stand for ideas or concepts. The little house on your desktop isn’t a little house, it’s «home». The eye isn’t an actual eye, it means «look at the selected element». The cog isn’t a cog, it means «click me to see available commands».

I haven’t checked recently, but I bet the huge percentage of desktop computing time is still spent reading, typing or futzing with a mouse. If I’m right, and if you’re sitting, human ergonomics dictates some limits to range of motion and form factors to reduce repetitive stress. As long as these facts are true, well designed keyboards and mice are hard to beat, and even if they aren’t, they’ll still be around for a long long time anyway.

The underlying secret to beautiful user interface design is realism: making 2D objects on your screen appear to sit in 3D space with volume, surface properties and undulations that might appear in real life. These faux 3D objects have highlights and shadows just like objects on your desk might have, and they have textures that emulate real objects from glass to sandpaper and everything in between. Designing beautiful user interfaces has more to do with the why than the how.

Martin Gimpl’s Stripes is a conceptual user interface that uses a zoomable window management model similar to the one found in Chrome OS, but foregoes tabs completely.

I love this form because it is so straightforward. If you're an existing user, it's only one step to log in. For a new user, the form takes you to a second page that asks you for a little more information and also prepopulates the email you entered.