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

tumblr m1deuucih11qea4hso1 5001 40 Prominent Little Big User Interface Details

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

tumblr m193w3qk6h1qea4hso1 5001 40 Prominent Little Big User Interface Details

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

Google Analytics

tumblr m0u4e69ibs1qea4hso1 5001 40 Prominent Little Big User Interface Details

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

iOS

tumblr m0klndyjxb1qea4hso1 5001 40 Prominent Little Big User Interface Details

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

Gmail

tumblr m0hi1zkeds1qea4hso1 5001 40 Prominent Little Big User Interface Details

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

Google Maps

tumblr lyzcc3wdcr1qea4hso1 2501 40 Prominent Little Big User Interface Details

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

tumblr lzuujallzp1qea4hso1 5001 40 Prominent Little Big User Interface Details

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

Quora

tumblr lysdzwipoy1qea4hso1 5001 40 Prominent Little Big User Interface Details

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

Youtube

tumblr lyppah9r0p1qea4hso1 5001 40 Prominent Little Big User Interface Details

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

Gmail

tumblr lyrwjaxatd1qea4hso1 5001 40 Prominent Little Big User Interface Details

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

iPad Keyboard

tumblr lyx1xxl3lk1qea4hso1 5001 40 Prominent Little Big User Interface Details

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

Feedburner

tumblr lysk6kux9t1qea4hso1 5001 40 Prominent Little Big User Interface Details

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

Skype

tumblr ly6xdz00vb1qea4hso1 2501 40 Prominent Little Big User Interface Details

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

Vouchercodes

tumblr lxxx6zwa2o1qea4hso1 5001 40 Prominent Little Big User Interface Details

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

tumblr lxjl7su6bj1qea4hso1 5001 40 Prominent Little Big User Interface Details

The favicon indicates whether the music is playing or paused.

IMDb

tumblr lwxr64ggbw1qea4hso1 5001 40 Prominent Little Big User Interface Details

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

Facebook

tumblr lvzubqvpkx1qea4hso1 5001 40 Prominent Little Big User Interface Details

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

Path

tumblr lvvp96fqf51qea4hso1 5001 40 Prominent Little Big User Interface Details

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

Etsy

tumblr lvdodmplkb1qea4hso1 5001 40 Prominent Little Big User Interface Details

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

Gmail

tumblr lv9y1g1bjw1qea4hso1 4001 40 Prominent Little Big User Interface Details

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

iCloud

tumblr lulwvlpkea1qea4hso1 5001 40 Prominent Little Big User Interface Details

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

Google Chrome

tumblr ltqkcnfgnk1qea4hso1 5001 40 Prominent Little Big User Interface Details

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

Tumblr

tumblr lt9kmwxbir1qea4hso1 5001 40 Prominent Little Big User Interface Details

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

Flickr

tumblr lsuphaq9rx1qea4hso1 5001 40 Prominent Little Big User Interface Details

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

iPod Nano

tumblr lsmzakncs41qea4hso1 4001 40 Prominent Little Big User Interface Details

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

Google Maps

tumblr lsot9pwol31qea4hso1 5001 40 Prominent Little Big User Interface Details

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

Google maps

tumblr ls72j7hx7x1qea4hso1 2501 40 Prominent Little Big User Interface Details

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

Nike+

tumblr lr61u8h28g1qea4hso1 4001 40 Prominent Little Big User Interface Details

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

deviantArt

tumblr lqu8jaqb5q1qea4hso1 5001 40 Prominent Little Big User Interface Details

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

iOS

tumblr lq4bzwypy51qea4hso1 r1 4001 40 Prominent Little Big User Interface Details

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

Google Translate

tumblr lpg9osinz31qea4hso1 5001 40 Prominent Little Big User Interface Details

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

tumblr lpodvg5jvv1qea4hso1 5001 40 Prominent Little Big User Interface Details

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

tumblr lp4bayr06w1qea4hso1 5001 40 Prominent Little Big User Interface Details

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

iA Writer

tumblr lq3ekpyrbg1qea4hso1 5001 40 Prominent Little Big User Interface Details

The icon adapts when it is displayed in different sizes.

Highrise iPhone app

tumblr lnep74t2ll1qea4hso1 4001 40 Prominent Little Big User Interface Details

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

OSX

tumblr lhuupgrqhj1qea4hso1 r1 1001 40 Prominent Little Big User Interface Details

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

Spotify

tumblr lm80xuqtcj1qea4hso1 4001 40 Prominent Little Big User Interface Details

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

BBC Radio 1

tumblr lmgexs1cao1qea4hso1 2501 40 Prominent Little Big User Interface Details

The video player volume control goes up to 11.

Kickstarter

tumblr lmxkcqh1tt1qea4hso1 5001 40 Prominent Little Big User Interface Details

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

Apple iCloud icon golden ratio

tumblr lmtv7t2pkx1qbpnjzo1 5001 40 Prominent Little Big User Interface Details

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


 40 Prominent Little Big User Interface Details

Igor Ovsyannykov

Igor Ovsyannykov is a 21 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:

3 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