40 Prominent Little Big User Interface Details | inspirationfeed.com

40 Prominent Little Big User Interface Details



Companies go to far lengths in order to provide the best user experience possible. As Steve Jobs said, “Design is not just what it looks like and feels like. Design is how it works.” Whenever a human interacts with software, the user interface must make it easy, efficient, and enjoyable to operate a machine in the way which produces the desired result.

Users often get used to a specific layout and find themselves knowing common functions by heart. As an example let’s take a look at Twitter. We all know that when you pull down the screen in the official Twitter app, the tweets refresh. While in other iOS applications, I accidentally caught myself pulling down the screen to refresh the layout.

Obviously it did not work, and there are patents involved with this gesture. But isn’t it crazy that my brain naturally performed that function? Something so little is in retrospect very big. These sort of little big details is what makes software stand out. I personally appreciate when companies stress small factors, just so my life could be easier.

In order to understand more clearly, we collected some examples of little big details from major software applications. Littlebigdetails.com is a tumblr blog that showcases little big user interface details. We collected some great examples of little big details from the site. We hope this roundup will serve as great inspiration for your next development project. Who knows, maybe you will learn something new about the software you use on a regular basis.

Mail on Mac OS X Lion

Mail gives you the option to display the telephone number across your entire screen so it’s easier for you to read and dial it.

OSX

When unplugging your headphones from a Mac, it automatically reverts to the most recent volume settings of the new output device.

Google Analytics

To select a period of time, you can select a complete month by clicking the month title

iOS

If you tap the camera icon in the lock screen of iOS 5.1, it bounces up to encourage you to slide.

Gmail

Typing ? in Gmail (when not in a input field) gives you a cheat sheet of all available key commands.

Google Maps

When zooming in to the maximum, the zoom in button merges with the street view button indicating that the next zoom level is with street view.

Tumblr

When viewing audio file you are asked to not download the file.

Quora

When you’re logged out you get a list of places where you’re still logged in with the option to log out

Youtube

When typing in the search box, the autocomplete dropdown size will be limited so it doesn’t cover the video.

Gmail

While in the inbox, the Compose button is red. Then when composing an email, the Send button is red instead.

iPad Keyboard

There are phantom keys in the middle when you split the keyboard in half.

Feedburner

You see this message after you set up your feed and want to view your Feed Stats right away.

Skype

Changing the default chat font to Comic Sans makes the smiley sad.

Vouchercodes

On the unsubscribe page the background & editor’s avatar turns from a blue (sunny day) background to a rainy day when unsubscribing from all newsletters.

Mixcloud

The favicon indicates whether the music is playing or paused.

IMDb

The rating for ‘This is Spinal Tap’ goes up to 11

Facebook

When a comment is not in your set language, there is an option to translate it.

Path

When scrolling in the app, the clock updates itself with the time of the update you’re looking at

Etsy

If you try to send yourself a message on Etsy, you get the error message “Talking to yourself again?”

Gmail

When attempting to sign in with an incorrect password, it reminds you how long ago it was changed.

iCloud

Removes the spaces from the email input field when you go to the password field.

Google Chrome

Accent colour on most visited thumbnails is pulled from the site’s favicon.

Tumblr

There is an ASCII art logo in Tumblr’s HTML source.

Flickr

When uploading files, it shows percentage in the tab, so you can always see the load progress while surfing other sites.

iPod Nano

The Mickey Mouse watch on Apples’ iPod Nano site shows the actual time.

Google Maps

The “map” or “satellite” button” shows the actual area behind it.

Google maps

The iPhone icon represents the actual location of the Apple headquarters inInfinite Loop Cupertino.

Nike+

When people “like” your run after you post it on facebook, you will hear cheers and chants in your headphones.

deviantArt

Visual prompt to encourage users to fill in more details about their profile when registering.

iOS

When using internet on EDGE network, loading icon in status bar rotates slower than it does on 3G.

Google Translate

When translating a beatbox sound in German, the “Listen” button automatically changes into “Beatbox!”.

pv zk pv pv zk pv zk kz zk pv pv pv zk pv zk zk pzk pzk pvzkpkzvpvzk kkkkkk bsch

Threadless

When entering the website, a message in the top bar will appear that the company is able to ship to the country you’re currently in.

Twitter

Tracks accounts that are viewed by unregistered and logged out users. Then prompts them to sign up and follow those accounts automatically.

iA Writer

The icon adapts when it is displayed in different sizes.

Highrise iPhone app

As it loads your account’s database, it presents you with a playable game of tic tac toe.

OSX

The little red close button displays a darker circle inside when your document has unsaved changes.

Spotify

The “Added” column on spotify fades as it gets older.

BBC Radio 1

The video player volume control goes up to 11.

Kickstarter

Click the scissors icon three times and the footer falls down.

Apple iCloud icon golden ratio

In mathematics and the arts, two quantities are in the golden ratio if the ratio of the sum of the quantities to the larger quantity is equal to the ratio of the larger quantity to the smaller one. The figure on the right illustrates the geometric relationship. the golden ratio = 1.61803399

Did you enjoy this article? Know of any sweet little big details? Don’t be shy, comment below and let us know! For more useful articles, please don’t forget to subscribe to the RSS-feed and follow Inspirationfeed on TwitterGoogle+ and Facebook! If you enjoyed the following article we humbly ask you to comment, and help us spread the word!

Use the (arrow) keys to navigate pages


Igor Ovsyannykov

Igor Ovsyannykov

Igor Ovsyannykov is a 23 year old geek, blogger, and designer. He mostly spends his time working here and sharing resourceful knowledge with others. He also enjoys weight lifting, hanging out with friends, and losing his mind to progressive house music. If you would like to reach him, send him an email to inspirationfeed@yahoo.com

You might also like:

2 Comments

  1. Thanks inspirationfeed for this article

    I see this article really useful and it provide some visual appealing about user interface design.

  2. Dylan says:

    Best article yet.

Leave A Reply