Here are my thoughts about some creative UI elements that were coined during the last 5 years, from the small details to those that changed the way we interact with our devices.

Pull to Refresh

One less button to tap. Invented by Loren Brichter, the man behind Atebits and Tweetie. One of the most significative innovations in UID that had happened since touch screens came out, and here I mean since 2007 when the iPhone was released. It’s hard to imagine ourselves hitting a refresh button in every app we want to update its content. Now, in iOS at least, we simply pull to refresh instinctually, and it’s rapidly becoming a common pattern in iOS.

Twitter acquired Tweetie in April 9, 2010, and filed a patent for this gesture which apparently will not be enforced.

Swipe to [action]

Let the user discover. Additionally, Tweetie introduced a new swiping to display a menu ‘behind’ the tweet. iOS had already swiping for delete, but Tweetie used differently.

Today many apps use this same gesture to display a menu with actions, others, like Tweetbot have used it in a very clever way: Swipe right to see the tweet they are replying to, and swipe left to see the tweets that replied to this tweet. It’s genius. One can follow a conversation easly and jump to other conversations that developed in the way. This gesture-based feature alone makes Tweetbot a winner in my list.

Accelerometer

Look mom, no hands! It is repeatedly said by Jen Simmons, the devices we hold in our hands, are now more capable than the PCs we have on our desktops. Our phones and tables have now GPS, Cellular data, accelerometer, gyroscopes, vibration motors, HD cameras, Retina displays, compass, and everything else a PC has. The question is how are we taking advantage of this?

Instapaper makes a great use of the accelerometer. It detects the inclination of your iPhone or iPod Touch and atomatically scrolls up or down just by tilting your device. Genius.

GPS & Maps

(Image from A Book Apart – Mobile Fist, by Luke Wroblewski)

New search for new type of input. Yahoo! (yes… Yahoo!), made a great use of the map in the app Sketch-a-Seach (not available anymore). Instead of displaying the list of items based on a filter or radius around your current location, the app allows the user to draw the boundary where he/she is interested in discovering local businesses. Again, mobile wins over desktop.

3D iBooks

The invisible UI. The Status Bar in iOS is 40px on the iPhone and 42px on the new iPad. These smart-pants at Apple decided to leave that area “unused” to allow space to a very-well-done 3D effect when flipping the page. This effect is perfectly noticeable with the black iPad as the screen color continues seamlessly into the iPad frame. Do you want to blow your mind? Turn off the lights and start turning pages.

Slide to Unlock

2-year olds really appreciate this. Remember the old want o unlock a phone before 2007? Every phone had its own way to do it, but there was always a screen modal that would tell you what keys you needed to press in order to unlock the phone. In most cases the passcode was Any Key + #. There was not one single 2-year old that could unlock those phones because they would need to know how to read! Today every 2-year old can unlock an iPhone or iPad, and these will never accidentally unlock while in your pocket.

Pinch to Create item

Getting rid of the buttons. Buttons are a hack, says Josh Clark. It seems that at Clear took it very seriously. Why tap a ‘+’ button to add a new item? Simply pull to add a new one to the top of the list, or pinch two items apart to create one between the two. So far the only utility app I know of without buttons at all.

Menu Buttons

Provide clues. The challenges with menus is that they can be long lists, and that sometimes they can’t remain visible to the user at all moments. So, what is the most common practice to let the user know there is a menu? Usually this is a button at the top left corner. Kara McCain suggested that these buttons should be like sparklines, ”data-intense, design-simple, word-sized graphics”. Translated to a GUI, the icon in the button should represent the way the items will be presented on the list. Best solution so far, and provides visual feedback to the user on what to expect. Here are four examples:

Five years laters the iPhone was launched seems we are starting to understand the importance of mobile, content and UX in these devices, and as these become more powerful and capable, I am sure new UI elements will be born.

Ryan Block on the new iPad:

One of the things I found most interesting playing with the new iPad is that, as it turns out, the difference a Retina Display makes is even more exaggerated on a 10-inch tablet than it is on a 3.5-inch phone — and that’s in addition to everything else. It’s not just a linear improvement, it’s actually greater than the sum of its pixels. This screen has changed what a tablet should be, and trust me, you won’t want to go back.

As the iPhone approches end of cycle and a new release is expected sometime in September or October. Some rumors of a 4” display have surfaced. This sounds difficult to believe if the developers have to redesign their apps. But what if they their apps would just look bigger without resizing. First, the resolution would have to decrease from 326ppi to 288ppi. Would the new display still be called ‘Retina Display’? Why would Apple sacrifice quality over quantity? I don’t know what Apple will do, but I am extremely happy with the size and resolution of the iPhone 4 display.

Unlike any of Apple’s product announcements, I didn’t want this day to come. However, as Gruber says in his article, it was a well thought and planned transition.

How do you replace the irreplaceable man? Like we’re seeing. An open-ended medical leave, where he retains the CEO title. A continuation of strong new products, including a major improvement to the iPad, the device that is upending the entire computer industry. The ceding of day-to-day operations and leadership to Tim Cook, his right-hand man and chosen successor.

A few words about this redesign. The goal was a clean and simple design as I want the reader to have an easy time reading it.

I recently read the book Responsive Design from Ethan Marcott and motivate me to start using this approach in this new design. So it doesn’t matter where do you read this blog, you will be presented with an optimized layout for your screen.

For many years I learned web design techniques by deliberate practice and looking at the code from other websites. Little did I know that this approach wasn’t providing me with the best techniques or implementations. Again, It was until I signed up in Twitter that started learning about web standards, fluid layouts, progressive enhancement and better tools for the job. Having that said, This will be always a work in progress.

I chose WordPress as CMS because I was familiarized with it, and didn’t want to spend more time learning something new right now. I wanted this out as soon as possible for some personal reasons. However I am very excited to start leaning Expresion Engine, Drupal and Perch.

Why the ugly QR Code? Well, it provides an ‘easy’ & quick way for people to get my contact information without making it readable to spammers. Sure, I could have a vCard file download link or display the information using microformats. But I  don’t want it to be displayed. I agree that QR Codes are hazardous as you don’t where they will take you, and they are not practical if you don’t have a QR reader installed in your phone. Hey, maybe someday camera apps will have a reader included.

As a designer I get a lot of questions about where to see my portfolio. So here it is. I personally don’t like portfolios because most of the times they show only the aesthetics and not the conversations with the client or the reasons behind each piece.

If you have any comment about the design or coding about this site, please email/call/tweet me, I’ll be happy to listen, learn or discuss.

Apple, Inc. was, several times today, the most valuable public company in the world as measured by market capitalization. Apple’s market cap briefly passed ExxonMobil today, just after 1PM, reaching $341.55 billion in valuation. ExxonMobil was valued at $341.42 billion.

Tomorrow is Today.

Watch the video and tell me if you don’t get dizzy. When I first saw the touch screens or tablets embedded in front seat I actually thought it was a good idea. After using it for 5 minutes I got terribly dizzy.

On these tablets you can watch movies, listen to preloaded music, browse the web and play games. I bet it would been an amazing experience if they offered only movies to watch, no music, games or web, just movies. Sometimes offering more ends up harming the User Experience.