Google redesigns itself, Part 2 [REBLOG]

Regarding my post yesterday about Google Search’s new interface, Google had some things to say about its new design:

This post was originally written by Jon Wiley. It was posted on the Official Google Blog here. The post has been edited for this blog by Deathgleaner.

The Google design, turned up a notch

5/06/2010 12:30:00 PM

This week we introduced our latest update to search, and I wanted to share a bit of our thinking on the design team. In short, we tried to take all the things we strive for at Google and make them better: powerful technology, snappy results, simplicity and a fun and quirky personality. Our goal was to take a design known by millions of people and make it better. As a designer, it’s hard to think of a more exciting challenge.

During our process we focused on people’s rising expectations for search. As the web has evolved over the past decade, people have been typing more sophisticated searches and seeking out specialized search tools to match. To keep pace with rapid change online, we have teams of engineers working across Google to develop new ways to present and refine search results. Our central challenge with our latest redesign was to figure out how to squeeze all these tools and technologies into a single page.

A common way to expand the flexibility of a website has been to add a left-hand panel of links, often referred to by designers as a “left-hand nav.” We’ve been creating mocks of left-hand panels since the earliest days of Google and have tested these designs with users as far back as 2006. Overall, we’ve found they can provide a great way to navigate without getting in the way of the main content, but they can also be distracting. Our users want more powerful tools, but they also want the simplicity they’ve come to expect from Google.

As a first step towards finding that balance, we introduced the Search Options panel last May, including a toggle to open and close. This way we could quickly try out new search tools, such as refinements by time and content types. Using the lessons from Search Options, designers, researchers and engineers worked side-by-side to explore a vast array of possibilities for a permanently open panel of search tools. We made hundreds of prototypes and gathered feedback from user studies, Googlers and through experiments — including one of our largest visible experiments ever. In the end, we came up with a design that provides dynamic, relevant search tools on the left, while lightening and updating the aesthetics all around. Here’s a picture of the Search Options panel (left) and our new results page (right):

We knew that adding a left-hand panel would inevitably add some weight to the results page, so we took a number of steps to lighten other aspects of the design. The overall visual redesign started with the Google logo. Here’s an image comparing the old logo (top) and the new logo (bottom):

The new logo is lighter, brighter and simpler. We took the very best qualities of our design — personality and playfulness — and distilled them. The logo was the foundation for new icons and hundreds of tiny alterations designed to accommodate and seamlessly integrate the expanded functionality of the left-hand panel. For example, we lightened up the footer at the bottom of the page by removing the blue shading and the underlines on the links, lightening the color and expanding the search box. Here’s a picture of the old footer (top) compared with the new (bottom):

While I’m very happy about our latest improvements, a designer’s work is never done. We’re already testing additional refinements and we’ll continue to listen to all of you as we work to continue making search better.

If you’re curious, here are some of the other design prototypes we tried (you might have to click to magnify some of these images):

1. Blue homepage: We’ve always had a strong affinity for blue — after all, blue is usually the color of web links, so it binds the web together. It became the basis for many designs.
2. Blue button: The big blue button made it all the way to our first external experiment, where it was promptly rejected by users. We heard you loud and clear and changed the button in the next round.
3. Universal bars: This design emphasizes different types of results with labeled blocks in the main results pane, such as books, news and shopping.
4. Blue results: This is one of the final blue designs we created and marks the point when we renamed the “Web” link to “Everything” — a label that gets closer to the intent of our mission to organize all the world’s information.

Posted by Jon Wiley, Senior User Experience Designer

End reblog

Here’s some interesting quotes I found while reading this:

• “During our process we focused on people’s rising expectations for search. As the web has evolved over the past decade, people have been typing more sophisticated searches and seeking out specialized search tools to match.” About the sidebar that Google has just introduced, I’m inferring that Bing and Yahoo! did this out of user expectations. Finally, Google steps up to other users’ expectations.
• “In the end, we came up with a design that provides dynamic, relevant search tools on the left, while lightening and updating the aesthetics all around.” What Google had before was a collapsible search options sidebar. Now, they make it visible with less clutter.

Apparently, Google also had more redesigns than I thought, including the bluification of its search: “We’ve always had a strong affinity for blue — after all, blue is usually the color of web links, so it binds the web together. It became the basis for many designs.”

Thanks for finally realizing our needs, Google.

Twitterfox is now Echofon

I’m not sure why the word changed, but I love Echofon! The latest version of Twitterfox was 1.8.2, and then all of a sudden Twitterfox announced their “new” product, Echofon. Besides the name change, there are many interface changes to Echofon.

One such change is the logo. Instead of the classic Twitter “t”, it is now a speech bubble outlined in blue.

Tweets are also grouped together (see figure at right)

Echofon displays twenty tweets by default, but one of the cool features is that when you are about to reach the end of your tweets, Echofon brings up your next twenty tweets and the cycle repeats.

The default color scheme is now silver-grey instead of light blue, and matches especially with Mac OS.

Echofon includes the In reply to… text.

One more new feature is that you can see your direct-message Inbox and Outbox.

I would recommend Twitterfox users to make the upgrade right away to enjoy a better tweeting experience.

MuseScore: A free music notation program that’s actually good

I’ve been looking for a music notation program forever that’s free, powerful, and isn’t a demo, and I finally found it.

I got the MuseScore application through a newsletter from Mac OS X freeware. It’s quite a big program though, but 100 megabytes later, I finally got to open the application for the first time. At first glance, it was much simpler than other similar programs I had tried previously. There were only a few toolbars for note input, playback, and editing, but that’s all I really needed. I knew this was an app that I would actually keep and use.

Entering notes in MuseScore is a piece of cake, and there are so many ways to do it. Just select a note value in note input mode and move the mouse to where you want the note to be. Or, you can type in notes with the keyboard (A-B-C-D-E-F-G) and move them with the Up or Down arrow. Inputting chords was also easy; just press Shift + (A, B, C, D, E, F, G) and it will build a chord. MuseScore will even fill in rests for me so that I didn’t have to! I especially appreciated the many ways that I could enter and edit notes, whether it be with mouse input, keyboard input, MIDI input, or a combination of the three.

Slurring and ties were also easy to accomplish in MuseScore. I just had to press “S” or “+”, respectively, and it would automatically form a slur. Then, to change the start and end positions, I just did Shift+Right or Shift+Left. Ties were done automatically just by pressing the “+” key.

MuseScore is also very intelligent. It follows the standard rules of music notation. It knows when to beam up, beam down, and how to break the beams of notes. 1st-and-2nd endings, dynamics, articulation, fingering, and grace notes are a walk in the park in MuseScore. However, there are still a few difficulties with voicing, where there are two or more voices in a single staff. MuseScore supports up to four voices per staff, but it can take a while to learn to input with voicing, and MuseScore still has a few bugs to address before voicing gets really simple.

One of the most useful features in the program is the playback. Unlike other programs, you can specify how you’d like the music to be played back, be it at a soft or loud, fast or slow, reverberant or not; it’s your choice. The playback tool is great for checking accurate note input, which brings me to one other point: when entering notes, MuseScore cannot tell the difference between E-flat and D-sharp, that is, no matter how you enter E-flat or D-sharp, MuseScore will recognize it as E-flat. However, there is a script pre-installed called Pitch Spell that tries to guess which one of the enharmonic notes it is.

Along with piano music, MuseScore also handles chamber music, violin music, symphony scores, and even kazoo music, although I haven’t tried them yet.

Other features in MuseScore include:

• Cross-beam notation (see figure at right):
• Automatic note head positioning in a staff
• Highlighting out-of-range tones (which apparently doesn’t work all the time)
• Plug-ins to create chord charts, color notes, insert note names, etc.
• Page and text style editing
• Export as PDF, PNG, SVG, MusicXML and many other formats
• …and pretty much anything you can write on real music notation paper, including triplets, line breaks, and so much more!

A few things don’t quite work yet:

• Voicing has a few bugs, including chord note positioning
• Arpeggiando positioning
• Slurring across multiple lines
• Beaming with triplets
• Mixed meter/key signature

I give MuseScore an 8.5/10 and highly recommend it to anyone who has been looking for a free yet powerful music notation program. Download at http://musescore.org.

A visual guide to Opera 10

Just a few of the many new features in Opera 10:

The main window

Of course, there are a few bugs.

Speed Dial is highly customizable and provides quick access to your most viewed sites

You can search from the address bar or the search bar

Opera comes with widgets

100/100 on the Acid3 Web Page rendering test

Opera 10 has the most advanced statusbar of any web browser

The search bar supports multiple search engines

The tab bar can be expanded to show previews of webpages

Right-clicking a web page brings up this context menu

Opera 10 comes with a very stylish RSS feed reader

Mousing over a tab shows a preview of that tab

Opera 10 has a sidebar featuring widgets, mail, notes, and much more

Opera’s preference dialog makes the browser highly customizable

Opera 10 is the latest installment in the Opera Browser series. It features the Presto 2.2 rendering engine, an accelerator for loading web pages on slow connections, customizable skins and many more that make this browser such a versatile web surfing application.

Unfortunately, it can be very complicated to customize Opera, since there are so many buttons and drop-downs to digest, but once you get the handle on this great web browser, it will integrate seamlessly into your online life.

I give Opera 10 an 8.5/10 rating and recommend it to anyone who hasn’t tried it out yet.

Review: HootSuite 2.0

Just a few days after Twitter launched its new homepage, HootSuite also revamped their interface. They offered an “early upgrade to HootSuite 2.0″ for everyone.

I tried out the new interface, and I must say it’s not bad. For those people who have used the old HootSuite before, the interface isn’t too difficult to navigate. For people who haven’t used this Twitter client, though, the interface may look quite complicated, but is also very intuitive.

One of the major changes in the HootSuite 2.0 interface is the addition of multiple columns. By default there’s the home feed column, mentions, direct messages inbox, and pending tweets in a three-column-at-a-time view. In the old HootSuite, these columns used to be separate tabs. I believe the change from tabs to columns was a smart choice since some people like me want to view multiple things at once.

The multi-user support is also a key feature in HootSuite. In HootSuite 2.0, different Twitter accounts appear as separate tabs. This is also very helpful, since it is easy to navigate to different accounts, but if you manage a lot of accounts, it gets cumbersome. The tabs can also be reordered by drag-and-drop, another time-saving feature.

Other features in HootSuite include:

• User profile viewing
• Favorite, direct-message, reply, and re-tweet
• Auto-refresh
• Embeddable columns (which don’t work for me)
• And much more!

I would give HootSuite an 8.5/10 and would seriously recommend it to anyone who has multiple Twitter accounts or who just loves tweeting.

Review: Firefox 3.5

Firefox 3.5, the long-awaited mega-upgrade to the already awesome Firefox browser by Mozilla, just came out today at around 8:00am. Within about 3 hours, Firefox 3.5 had already been downloaded a million times in the United States alone.

I have been eagerly awaiting the release of this new version of Firefox, and when it came out this morning, I didn’t hesitate in downloading the update. Now that I’ve been using it for a while, here are some of the things you can expect:

Logo Redesign

At first, I didn’t even see any changes to the Firefox 3.5 logo. But if you look closely, you will see that there have been a few color modifications, especially in the tail of the fox. It looks much more rich than the old logo.

New Interface

For the eagle-eyed users, you will notice that the borders of the navigation bar buttons have gotten much skinnier, which saves just the tiniest bit of space, but it’s worth it. Mac users will also notice a slightly different loadin bar in the status bar.

The tabs don’t look too different, besides a “New Tab” button that can’t be removed. I think it’s also defaulted to show the tab bar even when you only have one tab on.

Your add-ons’ interfaces may look different too, just because of Firefox’s new interface. The add-ons themselves haven’t changed.

History and Private Browsing

Finally, Firefox introduces Private Browsing. Safari was the first browser to introduce it. Private browsing allows you to surf the web without anyone knowing. This is especially helpful if you’re using a public computer. In History, there’s also a “Forget this site” function when you right-click a website. The function deletes all the items in the history that link to that particular site. It’s like a super-charged delete function. And, if you want to clear all your history or just part of it, you can clear history within 2 hours, 6 hours, and so on.

Video and Audio

Firefox now has video and audio support, meaning that instead of having to download video/audio to play it, you can play it right in your browser. Firefox now supports .ogg formats of video/audio.

JavaScript

The JavaScript performance has definitely been accelerated, although it’s not quite the 2X faster that Mozilla claims. It’s closer to 1.25-1.5X.

Bugs

Your add-ons may clash with each other. For example, TwitterFox and ScribeFire will leave some “residue” on each other if you open them simultaneously.

For existing Firefox users, I recommend that you upgrade immediately and for people who don’t use Firefox yet, I highly recommend it, with a rating of 9/10.

Internet Explorer 8 is… Good?

I never thought I would say that.

Since I got Internet Explorer 8 just a few hours ago, I have not had any problems with it. Seriously! My feelings and thoughts to Internet Explorer 8 were always negative beginning with my bad experience with Internet Explorer 6. It was buggy, crashed a lot, and as all my friends claimed, had too many un-fixed security holes.

Today, I took a leap of faith and downloaded IE8 as part of a huge update for my computer. I opened up the browser and was immediately pleased by its look. The tabs looked much better, for one. But it seemed kind of empty and bloated at the same time. The address bar had way too many buttons in all the wrong places (for example, Back/Forward in front of the Address bar and Stop/Refresh after it). The menubar was all by itself and I couldn’t drag my bookmarks bar up to it.

New features in Internet Explorer 8 include this Compatibility Mode button which is supposed to format out-of-date web pages to fit better in IE8. The new Internet Explorer also supported other search engines, although very limited, which I liked. Text input was faster, browsing was faster, and there was a new private browsing feature called InPrivate, which suits me if I have to sneak-use my computer while my parents are gone . Other than that, the only other minor inconvenience so far is that a close tab button is only present on the foreground tab, not any other background tabs.

After much consideration, I would give Internet Explorer a 8/10 and would recommend it, as long as you’re willing to wait 30 minutes for it to update your current Internet Explorer version. Now, it has almost the same exact features as Firefox, plus a few extra (and to some people, useless) features.

Scribbles: A Great Bitmap editor for Mac

About a week ago, my friend Darren (a.k.a. onekopaka) got an application for twitter called Tweetie. He started using it, so when I hovered over the “From Tweetie” part of the tweet, it went to a URL called atebits.com

Intrigued, I followed aling and discovered that atebits.com also authored this “revolutionary” new app called Scribbles. I had been searching for a new bitmap editor other than sucky old Paintbrush, and I finally came across Scribbles. Without hesitation, I downloaded the program and to my delight, it was not an annoying .pkg file that required admin permission to install. I could try it for myself without hacking my Mac!

The moment I opened the application, I wondered “where did everything go?” The user iinterface was very simple: a color picker, four “function” buttons and a brush selector. I quickly discovered that each button did way more than I expected. My favorite feature was the 3-in-1 move feature, which comprised of move, rotate, and resize. Scribbles also ran much faster tan sluggish Paintbrush, and I knew that I would stick with this for a while.

A few days later, I designed the header image for this blog using Scribbles. I also discovered that I could publish my drawings to the atebits website, and I did that with “Dots in a Matrix”, a drawing I made, literally, in two seconds. I also discovered the tracing paper function which allowed the Scribbles canvas to be semitransparent so that I could trace an image from a website. I started doing one today, but gave up. However, there are some great artworks that have been done using the tracing paper feature.

Although this program was awesome, it did lack a few features. It had a brush, but only a brush; no fill color, no rectangle, circle, square… but there were a plurality of brushes from rainbow to calligraphy. The color picker was also lacking in some features such as the ability to select preset colors and define colors by a hexadecimal code. It was, indeed, just a color wheel. Unfortunately, Scribbles wasn’t really a “free” application, meaning to get the “full” version, you had to pay $19.95, which is an overrated price to pay just to get rid of an inconspicuous watermark and disable the registration reminder screen.

Scribbles’ functionality and simplicity both deserve big stars, but it does lack in some features. I would recommend the software to all you Mac Users, and I give it a rating of 8/10.