I just saw this excellent video from AT&T Archives, 1970 Saul Bass’ Pitch Video for Bell System Logo Redesign.
It’s impressive how relevant and up to date all the aspects of the corporate identity redesign presented here are relevant today.
It also made me think how many things we take for granted, for example before this redesign all the people installing and repairing telephones at this huge company did it with their own clothes, with only a tag on their shirt distinguishing them from plumbers, electricians and other workers.
One of the untold rules on the web is that if you click the logo, it takes it to the home page. This is inprinted in my brain.
I’ve had the newest google redesign, with the menu on google logo hover for over a month now, and I still haven’t adapted to it.
I’m at the phase where my cursor avoids it like the plague and when I remember to actually use it, I get a strange feeling like some Pavlovian reaction knowing I’ll get beaten if I get near it.
Four days ago, I changed my personal browsing to Firefox after a couple years on Chrome just because of the font rendering.
You see, I love fonts and beautiful letters matter to me, and Chrome only does horizontal sub-pixel antialiasing while Firefox does that plus vertical antialiasing, resulting in smoother font edges, specially noticeable on the top and the bottom of curved letters like O and S where they appear jagged on Chrome and smooth on Firefox.
I’ve also noticed that on Firefox the kerning, the space between the letters, is less accurate but I’ll leave this for another post.
Back to the google redesign – Now that i’m on Firefox, the google apps gmail, google+, calendar and others are shown with the second newest design, with the black bar on top. While I’m not a big fan of it either, I feel so much better without the fear of putting my mouse near the dreaded logo because it doesn’t have the rage inducing and Pavlovian dog beating hover menu.
The new google apps have a refresh button that I’ve been using more, specially on reader, because of the fear of the logo. And now that I have the choice between the logo and the refresh button, I press the logo with a strong sense of revolt and pleasure, like a dog when he’s destroying a pillow he shouldn’t. He knows he’ll get beaten but the pleasure is much greater so he defies the rules and does what his instinct tells him.
Pagination on mobile is usually done with infinite scrolling or a ‘load more’ button when you reach the bottom, but when you’re required to use a pagination element, how do you do it?
A good pagination should provide:
previous and next page links
the total number of pages
first and last page links
current page number
a quick way to get to an arbitrary page number
The problem here is you want big buttons that are easy to click, but they take space and you don’t want to lose any functionality, so the common ‘«first «prev 12 13 14 15 of 28 16 17 18 next» last»’ pagination is too bulky for use in a mobile touch screen.
To solve this problem, I merged some points shown above to save space without compromise in functionality. Starting with the common
the ‘«first and last» page links’ can be merged with the total number of pages simply by transforming them into a numerical link. That leads us to
«prev 1 … 12 13 14 15 16 17 18 … 28 next»
which is shorter with no loss of information or functionality.
Now the ’12 13 14 15 16 17 18′ links give us the current page number and some control to get to nearby pages. Notice how 14 and 16 function the same as «prev and next» links, repetition which is fine on desktop with lots of space, but for mobile we have to cut redundancies like these.
In order to save space, we can replace the whole ’12 13 14 15 16 17 18′ portion with either a dropdown <select> tag or a numerical <input> field which default to the current page number. Both work well even if you have a large number of pages because the iPhone and android browsers have good dropdown selectors.
note: If you’re using the input field, don’t forget to specify type as number so the browser shows the numerical keyboard.
This is the pagination I ended up with:
Large buttons, prev and next links, visual representation of current page and total number of pages, first and last page links and the possibility to quickly go to an arbitrary page number, all in 5 buttons and an input field. I could have also done it with a dropdown <select>.
Also notice how the previous page and first page links are greyed out and they do nothing when you click on them, and how the input field and go button are bundled together.