UX Improvements in IE8 Beta 2

Scenario1: when you browse the web for some foreign food, you come across words you don't know. You want to find out what do they mean quickly in your own language.

Scenario 2: you'd like to keep up with your friends status on Facebook. Instead of going to Facebook homepage and logging in, is there a easier way to subscribe to any update changes and be notified when your friends' change their status automatically?

Scenario3: tabbed browsing is a great innovation but it also generates its own usability problems when you have many tabs open at the same time and some of them are from the same domain. Something like the picture below. Don't you wish there's a way they can be grouped!

Scenario4: when you search in a web or browser search box, wouldn't it be great if the search starts to work immediately as you typing in the search term. This way before you finish typing what you want to search and hit "enter," it can already preview visually the suggested results for you. You can choose the result you want and finish your search much faster.

...

Have you encountered these scenarios or figuring out your own shortcuts to do these day-to-day web browsing activities? What about a single solution for all these scenarios? Let's look at the UX improvements in IE8 Beta 2 then.

You probably heard by now that we released IE8 Beta 2 for public download on Wednesday. I started to use IE8 Beta 1 earlier this year after the MIX announcement and found it was a great platform for developers and designers to build standard compliant websites and learning about integrating Web Slices and Accelerators (use to be called "Activities") into their web projects. However, I didn't see Beta 1 generating excitement in everyday users. IE8 Beta 2 is all about improving people's everyday browsing experience. The IE team blog has a great series of posts talking about IE8 Beta2's "Better Everyday Browsing" features. (post1, post2, post3) I've borrowed some of their screenshots and definitions to talk about the features according to the scenarios above. My teammate Jean-Luc David also interviewed a Senior Product Manager on the Internet Explorer team focusing on how IE 8 is important to Web developers.You can see the video here.

UX improvements

• Accelerators (Scenario1): "Copy-navigate-paste is old. Accelerators are services that you access directly from the webpage in the context of what you’re doing, letting you bookmark, define, email, map and more with a simple selection.Some Accelerators provide previews so that you can view the result without having to leave the current webpage. Clicking on an Accelerator opens a new tab with the full result."  This is a great example of how web services can connect together seamlessly and help users to accomplish their activities faster and easier. In the picture below, the user wants to know what does "Kimchi" mean. He/she just need to highlight the word. An "accelerator icon" will appear, he/she can click on the icon to get a list of web services. Hovering on the "Define with Encarta" will preview the definition of "Kimchi." 

• Web Slices (Scenario2): "A Web Slice is a subscription to part of a web page; when an update is available, IE8 bolds the title of the Web Slice so you know there’s something new to see." I've included a description from one of my colleagues talking about using Facebook Web Slice in more detail.

Web Slices – you can keep up with frequently updated sites directly from your Favorites Bar. If a Web Slice is available on a page, a green Web Slices icon will appear in the upper-right hand corner of the browser. You can then easily subscribe and add the Web Slice to your Favourites Bar in IE8. When new information becomes available, the Web Slice will “glow” for a second or two and then remain bolded. When you click on the Web Slice in the Favourites Bar, it previews relevant information (a slice of information) from the web page. Clicking on the preview takes you directly to the site for more information. The web slice I use the most is a facebook Web Slice. It allows me to easily tell when my friends make updates because the Web Slice is of the “Status Updates” area on my facebook site. Give it a try.

 

• Tab Grouping (Scenario3): "IE8 opens keeps these pages grouped together and color codes them. As you close tabs in a group, IE takes you to the next one in the group; similarly, if you open more tabs from the first site, IE appends them to the group rather than adding them to the end of all the tabs. With this, it’s easy to read and use all the related pages together."

• Visual Search Suggestions (Scenario 4): "New to IE8 beta 2 are Search (text) Suggestions and Visual Search Suggestions which are wired into the Search box. As you type in the Search box, the selected search provider can offer query suggestions and display search results right in place! Not only can the search provider provide text suggestions, they can include images as well. This way you can dynamically narrow down your search results quickly and get single-click access to the web page without having to leave the Search box." In addition to live preview search suggestions from your search providers, the search box also gives the lists of previous searches and the matching sites you've visited in your History. All these great search suggestions are in one place for you to quickly find what you are looking for.

I've just mentioned a few UX improvements for IE8 Beta 2 here, there are many more improvements which enhanced people's performance greatly such as the Smart Address Bar and Find on Page as well as provide users a more safe and private environment to browse the web. These are all UX designs coming from tons of user research. I'll post more detailed posts on IE8 UX in future posts.  Like Office 2007, I see IE8 growing to be another great UI innovation for our flag product. It's in Beta now and is working in progress, we love to hear your feedback!

Qixing