Lessons from Microsoft: 10 Web Design pitfalls to avoid

Today, we will analyze the web design practices and tendencies of big-name software companies to see if we can learn something to avoid mistakes in our own work.

Agree or disagree with my opinion, feel free to comment on the suggestions below. As a professional designer, your point of view is valuable and I look forward to your thoughts.

Occasional Grumble

I'm sorry if you hate it when the article is full of nit-picking nagging. I usually like to praise good design rather than criticize bad design, but when David Appleyard and I decided to write a Microsoft design Trend analysis article, it seems that we have to see what is messy, ugly, or even failure of things.

To avoid criticism, I don't mention Apple in the following analysis or compare it to Apple alone. This is not because the PC is the least controversial to Mac, but because we just want to look at the design and development of web sites that we think are really lacking in practice. Microsoft is a very successful company and it will not be obscured by some problems. In fact, as noted later, Microsoft has some very good designers in some site teams, and we just propose that there should be a higher and more comprehensive quality control.

For this reason, let's analyze some of Microsoft's lack of design and development practices where you can benefit from this knowledge

#1 beware of certain forced Plug-ins

The recent friction between Apple and Adobe has made us realize that relying on a completely closed Third-party plugin to create a Web site can eventually lead to some serious consequences. Microsoft seems to be repeating the mistake that the Web site is increasingly dependent on Silverlight.

I browsed the Microsoft site to prepare this article for the information is that the pop-up window is often harassed, notify me that the system does not install Silverlight so it is not the original way to browse these pages. My question is, "Why take this path?" "Especially for some simple slide effects, the techniques available are everywhere," he said. Admittedly, this is Microsoft's own Silverlight, so it's good business sense to support it, but that doesn't mean that joining them is the best option.

Whether you're a fan of Silverlight or not, my advice is to be very cautious if your site's functionality relies on any Silverlight or similar technology. The debate over whether to continue using flash development sites has continued to heat up, with second-tier systems like Silverlight becoming more gambling. If possible, stick to Cross-browser, compliant code and tools-don't ask your visitors for extra operation or installation.

#2 Attention Resolution

This is my biggest complaint to Microsoft because it looks like a sloppy design. There is no doubt that it is a narrow way to minimize the size of the file and to keep the picture clear, but I can't help but think that Microsoft seems more inclined to show ugly, jagged jpg than the professional sites.

The number of dial-up Internet users has been decreasing, and the acceptable image size has become larger. But this does not mean that you can no longer pay attention to the necessary small size of the picture size to make small, but now here, the weight of the design becomes so heavy, resolution too small will greatly reduce the appearance of the site quality, the picture becomes self-defeating!

It would be ironic that you would have liked to use pictures to make your site look better, but in the process it ultimately reduced your sense of beauty. If possible, preview the pictures you're dealing with on different monitors, pay attention to how much distortion, how many artifacts you can accept.

#3 disorganized

Sometimes you follow the usual design rules, and in the end, something seems visually poor. Looking at Microsoft's Web site I came across a lot of these pages, such as this one, although trying to use an arrangement based organization, it looks messy.

So where's the problem? Simply put, there is a lot of stuff in a relatively small space here. Even though they are definitely trying to make content layout, and also enhance visual readability through icons, the end result is still quite unbalanced.

If you look closely, you'll find that the four columns of this page seem to be designed by four different people, just squeezing them together. The picture on the left is really heavy relative to the right, the text color is a bit intermittent, the content is clumsy staggered, the column lacks enough blank breathing space, it is difficult to see their layout independence.

The lesson here is to wrap your page in the column information, careful content information is too complex. There is no doubt that there are many situations where more content is required, but it should be organized in a coherent and attractive manner, such as the following beautiful example (from a non-Microsoft website).

#4 Contradictions

Starting from Microsoft.com, open a huge navigation pull-down menu, choose a site to visit different places, you will find that no matter which link, you click out the page is quite different than the homepage, even in the same Drop-down menu out of the page is so big difference.

Browsing Microsoft's Web site is like playing a spinning roulette. You can hardly guess where you are going and the next page you are looking for. Some of the pages have swooshy (graceful style curves) backgrounds, while others are gradient backgrounds or even divergent rings. Most Web pages seem to tend to be blue, but not the same blue, and there are some pages that completely ignore the blue tendencies.

The problem is that consistency is required whether your site is 2 pages or 200 pages. Users will feel more comfortable with a limited amount of time when they become familiar with the workings and interface of a Web site. Giving something completely different on every few pages can make browsing more confusing and the user experience very inefficient.

In addition, creating a strong and unified brand is a good business because it helps customers to associate with your company in a more independent way. Of course, Microsoft has a number of different brands, which are all extended from the homepage, but even the Microsoft.com core pages, the image style and navigation methods seem to be significantly different.

#5 Clip Art Center design

Look at the inevitable existence of clip art in Microsoft Office, which is obviously a bit absurd. But the icon design has come a long way since 1995, and it's time to give up the particular style you see in the picture.

The above examples from the Microsoft Web page make me feel goose bumps, especially the ugly "beginner Developer" logo. I don't know what a back-force label is. Why attack a magical plant, hover the display to help attack or flee the scene? All I know is that visual communication here is a mess.

That's why CSS galleries exist in the world like ourselves. Not so you can steal other people's designs, but you'll be able to glimpse the development of the design you are developing over the past decade. Browse these CSS galleries, just like at the mall fashion store, to show your crazy aunt she doesn't have to dress as if she's going to sunny and Cher's show.

Remember to always be free and borderless, to go beyond the popular design from the self. The world is changing, beware of being too stubborn and conservative.

#6 text alignment and overflow

Another trend that cannot be overlooked in Microsoft's Web site is that the text is constantly being broken and clearly spilling out of bounds.

It's a fairly easy problem to solve, and it just takes a little effort and attention. Just be sure to take advantage of free tools like Adobe's browser labs to make sure your layout is not compromised in the mainstream browser.

When it comes to cross-browser consistency, the undeniable CSS layout is like a tricky beast, but that little mistake can make your site's quality drop, so it's worth your time to solve it.

#7 lack of alignment

Sometimes a given page is handed to me and it is a challenge to me to point out the flaws in the design. For example, in the following page, I originally wanted to find this small window to use the ballast-click not to get bigger, but the longer I look at the page, I am confused about the intention of the layout of this page.

If you are familiar with basic design theory, you know, learning to implement a consistent line is the key to excellent web layout. As shown in the image above, the visual alignment of the left, middle, and right of the site is strangely mixed, connecting the stools blank at the top, presenting a bizarre visual stream for the content information.

In addition, if you browse the above page, you will see that the whole content seems to be trying to center the page, but as the middle crosses across a band, the page seems to be centered to the right.

#8 AD Clutter

The following figure, free design blog like to put a lot of ads, which is to give us revenue way to support the continued provision of content services. But if you're running a professional business site, and you want to reduce content messages and specialize in advertising, you have to think carefully.

Microsoft.com's pages are full of ads that actually reduce the beauty of the Web page. Sometimes these ads are directed directly to other Microsoft pages, sometimes to other companies or partners. The concept of navigating your site to other subordinate sites is understandable, but there is a big difference between how to achieve it.

There is a fact that most netizens now learn to recognize, ignore, or even dislike banner ads. This is not to say that this type of advertising in the appropriate target and design also has no effect, not to say that Microsoft users do not click at all, I really feel suspicious is that there is no better way to deal with it?

As you can see, if the Microsoft website is to navigate users to their mobile phones and other items, the simple way is to set up a messy, non-standard (intelligent design) advertising system throughout the site. However, it seems that the content of the ads integrated into the site, with the attention of users, there will be a very good click-through.

In addition, this integration will make the design more unified and harmonious. Because they prefer to add a unit instead of dividing a column. By the way, this may be my understanding of Microsoft's "efficiency cost" approach, but I'd like to warn you not to let them mislead you. In most cases, the site you are designing will not be a gigabit network like Microsoft, so it is better suited to a solid design that avoids the visual clutter caused by too much advertising.

Obviously, there are many types of websites that are not suitable for advertising. You need to think about whether your site is selling products or services, or whether you need additional revenue and ad harassment.

#9 lack of white breathing space

In the printing design, the designer arranges "the interest area" on each page, the usual practice is to add the rectangular area at the edge of the page, define the safe range of the place content, avoid the page too squeeze force or the page edge is crowded. Most web designers do this intuitively, and it's obvious that you don't want the content to be too loose, so you squeeze it to the side of the browser.

However, as the screenshot above shows, some of Microsoft's Web pages do not seem to value this view. On the contrary, the content of the page always starts at no blank or edge (at least in the browser I use).

The navigation on the left is not built into this page and feels like it's truncated (yes, it's probably due to the fact that I don't have IE). The lesson of this example is: Always be aware of the edges of the browser window. Unless you break the rules for some obvious visual effect. Keep your content, especially the interactions and links, in an edge-safe area so users don't feel crowded when they use it.

If you take a closer look at the screenshot above, you can see some examples of Microsoft's designers failing to consider whether the text blocks of these pages are floating properly in the mainstream browser. This is an interesting trend for Microsoft, many web designers, all day long to make a special adaptation for IE browser, but a large company such as Microsoft obviously can not so indifferent, not to other systems to check their own work.

#10 underutilized Talents

Despite the many negative comments about Microsoft's Web design, I was pleasantly surprised to find that they also have a lot of websites and web pages that look attractive.

Many of the sites make me believe that Microsoft is really thinking about layout, color selection, cross-browser compatibility, above are two examples. As you can see, there are a few talented people somewhere in Microsoft's dyeing that can help Microsoft out of the recession.

These designers, no matter who they are, should be promoted to the right position so that they can build synergies and make each Microsoft Web designer conform to the same standards. They can build a strong network brand by building a lot of pretty sites that clearly belong to the same business in a maze-like location.

The last thing I suggested was, find your own type of talent and give them a voice of encouragement, rather than letting him grieve over the team, appointing the strongest designers and developers to the right positions where they can influence the visual communication of each corner to a particular brand.

This effectively establishes a clear, consistent, and stringent branding strategy and sends different branding strategies to each designer and developer.

thought summary

In short, although Microsoft has a number of highly talented web designers, these people's work is almost overwhelmed by the large number of substandard content, and these standards, we feel that even if only a year of work for designers and developers can expect to do.

Fortunately, we can use Microsoft as a lesson to make it clear that these methods of work are wrong. When it comes to the quality of working products, never be pessimistic that you are just a lone freelancer or a small design company, and you can't beat the big companies and design firms.

I've found that it's easy to find a designer who works at home in the world and finds better designers than sitting in front of big companies. You have to enjoy the fact that you don't have to coordinate and control the quality of the work of hundreds of of designers. Try to use the small amount of resources you have to combine your own boundless creativity and motivation to create some beautiful and powerful design and create some of the best sites on the web.

Source: Designshack

Compiling: Mazingtech