The two giants pride themselves for producing cutting edge consumer and business products, and are leading the developments in software and hardware.

But what about their websites? How do they both compare, and more important, which one is better and more usable?

Well, in this article we’ll take a look at both websites for closer examination from a usability point of view.

One important thing to note before we proceed to compare these two websites is that each company’s business revolves around different markets.

Microsoft primarily makes its profits from business to business, which mainly consists of selling licenses to its operating system to computer manufacturers and office suites for enterprises.

That’s not to say that they don’t sell to consumers — they do, and they have consumer only product lines as well, such as the Xbox gaming console, and of course home users also buy Windows and Office. This means that their business targets pretty much everyone, from home computer owners to developers and enterprises; which in turn stretches the purpose of their website to try and serve everyone.

On the other hand, Apple is primarily a consumer company, and makes most of its profit selling hardware, like its iPod music players and Mac computers. This makes the target of Apple’s site much clearer — marketing, selling and providing support for its products to consumers.

They don’t have to worry about selling licenses to manufacturers because they’re the only manufacturer, so the key purpose of the website would be to advertise and promote their multiple product lines, as well as selling them through their online store.

1. Homepage

The homepage is one of the most important pages of the whole site because it’s the first, and in many cases the only chance you get to impress the visitor enough to keep them browsing. You’ve got a few seconds to convince them that the site has enough value for them to keep using it, because if it doesn’t, the visitors will leave.

Apple’s approach to the homepage has been consistent throughout all the years that the site has been running. They use this page as a kind of advertising board that always shows a big ad of their latest product, followed by 3 other ads to another 3 products or news that is important at the moment.

If you’re not interested in any of the 4 suggested items, you can use the large navigation bar at the top, which is split into their core businesses: Mac, iPod and iPhone, followed by a couple of other important links, such as the online store and support pages. The navigation bar also incorporates a search field.

The interesting thing here is that the main ad at the top is huge — indeed it almost covers the entire page. If this doesn’t grab your attention then nothing will. Apple knows the importance of getting the customer’s attention using good marketing, so they’re not afraid to really go for it.

One other thing to note is the lack of content. You’re not distracted by sidebars, notices or extra navigation items — there are only a few items on the page, focusing your attention and making the decision of where to go next easier.

Microsoft has a different approach to their homepage. Firstly, they feature a similar style of ad at the top, designed to be attention grabbing. These are large images, but only one out of 3 ads is shown at a time — you have to hover over the other two to expand them. This focuses attention, but may potentially weaken the effectiveness of the two hidden ads since the visitor has to work to see them. Right at the top of the page is the navigation, together with search.

What’s below the main ads is more interesting though. As I mentioned previously, Microsoft’s business operates in many markets, including both business to business and business to consumer.

The space below acts as a set of highlights and news for these various areas of the business. One big problem with the content featured here is that it’s fairly boring and overwhelming, with a lot of information packed into a very small space, without anything try to make it scannable.

Sure, it’s broken down into bullet points, but the font is small and there are hardly any images to differentiate between the items. As it stands, there is little to attract me to make me want to read through this content because it’s just, well… boring.

2. Flow

What I mean by flow is this: is the site structured and laid out in such a way that I can easily find items to focus on? Do I know what to read after I focus on those items — is the site design directing me across the page with less effort on my part, or do I have to work to try and navigate around the content to find what I need?

Here’s the MobileMe section on Apple.com:

I think Apple has done a great job at structuring all of their pages. Here, the first thing you focus on is probably the picture on the right and then the large headline on the left.

After you’ve read the headline you can proceed to read the marketing blurb below, which leads nicely into a call to action signup button for the free trial. If you’re not interested in the trial, there are more features below to persuade you, each one ending with a “Learn more” link to a more detailed feature page. This leaves no dead ends and keeps the user browsing.

Microsoft seems hit and miss in this department. Here’s the SharePoint section:

Yes, there is a focal point at the top that grabs your attention — the large quote and the image of a server — but what’s next?

All of the content below is extremely monotonous, especially the “Learn More” box with a list of 8 links. The dry presentation gives the user less incentive to click around. Some Microsoft sites use better layout to direct the flow of attention, but they generally all suffer from the same illness: too much content.

When you present the user with too many choices, you make them work — they have to think about what they want and they have to process more information. By reducing choice, Apple directs the users through a more carefully designed funnel, which generally delivers a better experience.

3. Navigation

Apple’s website has a large navigation bar at the top, which remains there consistently whichever section of the site you go to.

The options available show the main sections split by its lines of business as well as a couple of essentials, such as support and the store. The bar also integrates search and branding as the home button displays the Apple logo instead of a label.

Any extra sub-navigation is located on individual site pages and is placed within the context of that page, whether on a sidebar, or as a horizontal bar at the top.

Microsoft has a similar navigation bar on the homepage, but that navigation bar is not consistent across the site. Actually, all of the sub-pages tend to use their own navigation bar, in style and in content. The homepage navigation thus acts as a site map to the rest of the Microsoft website sections.

In a lot of the navigation bars, including the one on the homepage, Microsoft uses drop-down menus — unlike Apple. They don’t just use drop-down menus — they use huge drop-down menus. In some cases, the menu even has a scrollbar (in Firefox):

Is this good or bad? In a recent Alertbox entry, Jakob Nielsen, a well known usability guru, has written that mega drop-down menus can work.

They work because they present a lot of choices in groups, so they allow for easier scanning as you can jump to the group that you want and scan the items inside them. You have to get certain things right though, like the order of the groups and only mentioning each element once, for them to work well.

In this case, I think it makes sense for Microsoft to go the route of the drop-down menus, but I feel that they may have gone a little too far. For example, some options point to the same thing, like the ‘Office’ drop down and ‘Office’ option in the ‘All Products’ drop down.

The drop-down also blocks the content below, so if you accidentally moused over the menu, you have to mouse off from it again to get to the content below — all the while being careful not to hover over other items.

There are also a lot of options under each group — sometimes showing about 13 items, which makes processing the options much more difficult. Also, the inconsistency of navigation across the different sections makes it much harder to jump from one area of the site to another, e.g from the Office site to the Xbox site.

4. Readability

Because most of the content on the sites is text, it’s vital to ensure that everything is readable and legible. Here are the main things to consider when working on readability of your site’s content:

• Make the text large enough so that it’s easy to see and read.
• Ensure that there is enough contrast between the text and background.
• Provide enough white space around the text to keep other content and graphics from distracting the reader.
• Provide plenty of headings or highlighted/bold text to allow users to quickly scan the content for key information.
• Add images and icons to make it easier to focus on individual sections of the text, i.e. product or feature descriptions.
• Keep the text short and to the point.

Let’s see how Microsoft and Apple fare in this area. Here’s a typical page on the Apple.com website:

Apple does a great job of keeping everything easy to read. The text is generally small, but never too small so as to be a problem. Headings are set in heavier type and stand out, allowing you to quickly get the gist of each section.

Apple also makes heavy use of white space to separate everything apart and adds images to make each text blurb more interesting.

Here’s a typical page from Microsoft.com from the Windows section:

It follows the general usability guidelines by breaking things down into small bite size pieces of text that are easy to digest. It looks a lot busier than the Apple site because there is more content on one page and there are many different treatments for headings and highlighted words.

Too much variety causes visual chaos on the page, with each different colored or bold item competing for your attention. In this case, the page really needs to be simplified to make it easier for the viewer to process.

Here’s another page, this time from the Microsoft security section:

The text on this page is probably a little too small to be comfortable to read, and the site needs more white space around the content to separate the text. Let’s see what a really busy page on Apple’s site looks like:

This is the Apple store. Really busy with lots of products and category links everywhere. Fonts get pretty small to allow more content to fit in, although good use of white space ensures things are still usable.

5. Search

Apple’s search is integrated into the navigation bar. When you type something in the search box you actually get live search results with AJAX, by way of a little box which pops up, showing you the results as you type.

It’s very well done — there is no lag when typing, the results are grouped in categories and are fetched very quickly, usually before you finish typing your full query. Here’s what it looks like:

If you want to see more results you can just hit Enter when you’ve finished typing and you’ll be taken to the standard search results page. It’s very clean and organized by categories.

You can drill the results further down by category, selectable from the menu on the right. It’s functional and clean, and works well when you’re trying to find any products that they sell.

Microsoft has a more familiar search results page that looks a lot like Google (or any other search engine these days).

That’s because it uses Microsoft’s own Live search engine. It’s certainly good at finding what you’re looking for and got the results that I wanted. The format of the results is one big list, which makes sense for Microsoft because of the nature of their business, with a lot of sub-pages and different content to search through.

It’s functional, but the look and feel is different to the other pages, which makes it look like you’re browsing a different website.

6. Aesthetics

Apple’s website aesthetics closely mirrors that of its product line. The navigation bar looks like it’s crafted out of aluminum and features gentle gradients and indented text.

There are also plenty of reflections and minimalist design elements. Apple has always worked on unifying the look and feel of its interface across its entire product line, from the hardware to software, and their website is no exception.

Do aesthetics have anything to do with usability? Actually, they do. Research shows that people perceive better looking interfaces as more usable.

Attractive interfaces will set better first impressions and may even make their users more tolerable to problems. So how does Microsoft fare in the aesthetics department? Here’s the Internet Explorer 8 page:

The site follows a faint Windows theme with the light blue clouds, but there is little else to say that this is a page for Internet Explorer or Windows.

The look and feel is very generic and doesn’t do enough to differentiate itself or build a coherent brand. Here’s another page; this is the Download Center:

Again, we have a completely different design, although the light blue color is used here too for the backgrounds. If there was no title on the page, could you tell that this is a Microsoft or Windows page? Probably not.

The designs are overall pretty good, but pretty good just isn’t enough. There are plenty of inconsistencies and a lack of polish, which puts Apple ahead in this area.

7. Consistency

Consistency is important because it allows you to develop usage patterns. This basically means that if your site has a consistent interface throughout, your visitors will quickly learn how it works and will be able to use this knowledge in any of the new pages that they visit, since they’ll all be using the same, or very similar, interface.

Apple does a great job of keeping the interface consistent. All of the product pages feature very similar aesthetics and are structured in the same way.

The whole site looks and feels the same throughout and the global navigation bar at the top is always there, on every page. This means that the entire experience is very unified and coherent — you know you’re on the same website wherever you go.

Here’s a Microsoft page for the Azure platform:

Could you tell that this is a Microsoft page if you took away their logo? Custom graphics, styles and color palettes across all the Microsoft sections help little to maintain a coherent brand image on the web.

Microsoft really struggles here. There are many different sections across Microsoft.com and they all feature their own look and feel, including their own navigation.

So once you go to a section on their site, be it the Microsoft store, the Office site, or the Security pages, they will all look and feel like separate websites.

What’s worse, the global navigation bar is also gone, meaning that you have to go back to the homepage, or the site map, to see an overview of all of their sites. It’s really an ecosystem of websites hosted under the same domain and therefore it doesn’t get the benefit of consistency that Apple has. The brand image is also terribly fragmented making it impossible to define what a Microsoft site looks like.

Conclusion

Which site is the winner? If you’re looking at usability alone, Apple comes out ahead. They have a better designed homepage that offers less choice, which means the user needs to think less.

They have consistent navigation across all of their pages. They use a lot of white space and sub-headings to make everything more readable, yet they keep things simple by not overusing too many different text treatments.

The Apple site is generally more user friendly and offers a much better experience to consumers who use it to check out Apple’s latest products.

Having said this, the Apple website is much smaller in scale than Microsoft’s site. Unlike Apple, Microsoft hosts many different sites and sections under the Microsoft.com brand, creating a whole ecosystem of sub-sites. Each site is packed with information and the Live powered search that Microsoft offers tends to yield good results. The biggest problem for Microsoft is consistency.

Microsoft just doesn’t have a consistent, coherent and unified brand. Every section looks and feels different. There is no global navigation and there are not many visual clues that tell the user that this is a Microsoft site — unlike Apple, where the whole site shares one unique aesthetic that mirrors that of their hardware and software, thus creating a powerful brand.

For these reasons, I think Apple is the clear winner here.

Written exclusively for WDD by Dmitry Fadeyev. He runs a blog on usability called Usability Post.

What do you think? Have we got it right? We’d love to read your thoughts and comments, so go ahead and leave us a comment below…

Never Ending WordPress Business Bundle – only $14!

There are many ways to test a website before launching, and these include having multiple browsers and operating systems installed, running virtual machines with different configurations or using a hosted image service where a screenshot is produced for a given browser version and operating system to be used for comparison purposes.

Starting today, there’s a new way for testing browser compatibility developed by Microsoft and it’s called SuperPreview. In this article, I’ll be giving you a brief review of SuperPreview as well as comparing and listing alternate systems for testing your website designs.

Overview

SuperPreview is a new free standalone application from Microsoft (still in beta) which enables you to see how your websites will look across different versions of Internet Explorer making migration from IE6 to 7 and 8 much easier than before, without have to start up a Virtual Machine to run IE6, or have a separate computer dedicated to running IE6. They’ll also be releasing a paid version which will handle the non-IE browsers. In this review, I’ll be discussing the free version only. I should mention that this is a very early preview release, so more features and fixes should be coming in the future.

Availability

The beta version of SuperPreview will be announced today at the Mix09 conference and will be available for free download to the general public shortly after that. [UPDATE] Software was released today prior to MIX09, and earlier than originally expected and is now available: Download Microsoft SuperPreview

I was approached by Microsoft to test an early beta version and I’ve been working with their development team over the past few days by giving them feedback and suggestions.

The release version of SuperPreview for Internet Explorer will be available in the summer of 2009.

There’s also a full version which includes support for Firefox and Safari. This is a PAID version which will be part of Expression Web 3. You will have the option to enable it from Expression Web or as a standalone. Estimated release date is also summer of 2009.

SuperPreview

SuperPreview is a pretty cool idea and it’s the first time that I’ve seen this kind of browser testing functionality available as a standalone application as opposed to a hosted service. You basically enter the URL (or local file) that you want to test and it shows you the preview in two versions of IE at the same time, in a split window. It comes with the IE6 rendering engine built-in and requires you to have IE7 or IE8 in order to compare them.

A major drawback is that, at this time at least, they have no concrete plans to release a Mac version, although this may be added in the future. I had to test this on my Mac using Parallels which produced a few bugs, such as slow response time and flickering on some of the loading screens. Also, the user interface is pretty unattractive and not very user friendly in my opinion, although they claim to be fixing this for the final release.

Also, there’s no hosted solution available yet, which would be especially useful for those of us on Macs who cannot install IE for testing purposes.

Key Features:

• Pointer Modes: Allows you to click on individual page sections for comparison. The section’s HTML tag name, its class or ID name, size and position attributes are displayed in the status bar.
• Image viewing: Compare Photoshop comp against the baseline browser to ensure that everything lines up in the browser to match your original design.
• Dom Highlighting: You can highlight specific DOM elements to see which where there are alignment differences between the browsers. It displays the positions of  the rendered elements and their CSS properties.
• Positioning Guides/Rulers: Use rulers to measure the layout differences between browsers. When you position a ruler in one browser window, the ruler in the second browser moves with it.
• Layout views: View side-by-side either horizontally or vertically, or overlay mode.
• Zoom: To select the level of magnification.
• Multiple resolutions: Not yet available in this beta release, but will be included in future releases.
• Thumbnail display: Previews a thumbnail at the bottom of each panel with a miniature map like view of the entire site so that you can quickly click on a different area of the page.

Examples:

The toolbar showing the different guides and rulers

Guides and rulers with DOM highlighting show the differences in rendering in IE6 and IE7

Choosing local browsers, remote browsers or images (screenshot of full version with non-IE browser support)

Pros:

• No need to install IE6.
• Side by side comparison and choice of layout views.
• Can compare Photoshop comp against baseline browser.
• Guides and rulers to measure positioning differences between browsers.
• Overlay mode will show if there are many discrepancies.
• DOM highlighting is useful to find and identify differences quickly.
• Zoom capability.
• Free for IE browser previews.
• Displays PHP and ASPX pages (provided that you have PHP installed on your system).
• Supports whatever the native browser supports, including Ajax and JavaScript.

Cons:

• Currently it works with IE8 in IE7 emulation mode, which is apparently about 90% good. They’re working on making true built-in IE7 and IE8 rendering.
• No version for Mac yet.
• Resolution option not currently available in the beta version.
• Free version only compares among different versions of Internet Explorer and paid version only compares among browsers that you have installed.
• Unattractive UI and icons (at least in the beta version).
• Overlay mode is confusing to identify which browser is which.
• No hosted solution available yet.
• No support for ActiveX (including Flash).
• Cannot compare with Mac browsers.
• Cannot click on links to navigate the site.
• Slow refresh/loading time (at least running XP in Mac with Parallels).
• Thumbnail preview is useless for very long web pages.

Other Testing Methods

A common method for testing a site (besides installing a number of browsers and operating systems) is to use a hosted service that takes screenshots of your web page as viewed in different browsers and operating systems. Here are a few of the most popular ones:

BrowserShots

Supports multiple browsers, Java, Flash, Javascript and screen resolutions. Easy to use and free.

Browser Photo

Supports multiple browsers and versions as well as Windows, Mac and Linux. From 800×600 up to 1024×768. Price: $15 for one time use, or $150 per domain/year for unlimited use

CrossBrowserTesting

Supports multiple browsers and operating systems. You pay per minute of usage. Requires Java. Free trial.

Browsercam

Supports any browser, any operating system. Includes JavaScript, DHTML forms and more dynamic functionality. Option for remote access and mobile page development. From $19.95 for one day usage for browser capture.

BrowsrCamp

MAC OS X browser testing using screenshots. From 800 px resolution up to 1600. Free for Safari 3.1.2 screenshots. Paid service from $3 per day.

NetRendered

Checks how a website is rendered by Internet Explorer 7, 6 or 5.5. Free.

Litmus

Checks every browser and any platform and includes bug tracking. 50 test a month is free but only for IE7 and Firefox 2. 23 Browser support starts at $24 per day.

Finally, you could install multiple browsers, or use virtual machines for further testing.

Virtual Software:

Allows you to install multiple operating systems on the same computer

• VMWare
• Microsoft Virtual PC

Further reading:

http://www.thesitewizard.com/webdesign/multiplebrowsers.shtml
http://css-discuss.incutio.com/?page=BrowserTesting

Disclaimer from WDD’s editor: This post is a personal review of SuperPreview. I was not compensated in any way by Microsoft or any other company for reviewing this product or the others. The opinions expressed here are solely my own.

Please post below what other systems you use for testing your website designs across different browsers and different versions.

Never Ending WordPress Business Bundle – only $14!