About System Mail Design

This article mainly expresses the meaning: the Mail design and the webpage design has the huge difference. If you can use the text do not use the picture, if you want to use the picture also remember to add content to the Alt attribute of the picture, if it is possible to give a clear unsubscribe link.

The direct inducement to write this article is this afternoon that huge crash Taobao registration experience (note, I said is to my experience of the great difference, did not say user experience!) ）。 E-commerce products in the design, we will most frequently face a module is the EDM

, and accumulated some ideas in the process, recorded together.

System Mail can be easily divided into 2 categories: Reminder classes (registration reminders, subscription reminders, birthdays or holiday reminders), EDM (http://www.aliyun.com/zixun/aggregation/8805.html > E-mail marketing).

As a reminder class system mail, I personally feel relatively simple, as long as the grasp: concise, direct 2 elements is enough. Reminder class Mail does not need fancy decorations, do not need exaggerated expression, because the user is the only thing he needs to know the content of the message at the same time click on the link he needs is enough, the proposed use of text format.

>> for the sender: To identify, you can use the site name directly. such as: Twitter, Flickr Mail

>> for headers: It's enough to indicate where the message is and what type of information needs to be handled. such as: Kentzhu is now following in twitter!

>> for the head of the message: need to have a fixed head, the general direct use of the website logo is enough. Of course, also see part of the EDM is logo+ site navigation. Recommended not put, because the role of reminder mail is to allow users to quickly complete the task, not to promote, difference and EDM mail.

>> Note to the message content:

1 Never use pictures! I think this is the biggest difference with web design, web designers will use large and color buttons to attract the user's visual attention, but in the mail design is a huge mistake! Because almost all mail systems do not load pictures by default when they accept mail. Therefore, the most powerful way to attract visual in the mail is writing! For example, Taobao registered reminder mail, using 2 huge login button, but, the default time picture is blocked, so the whole message blank ...

2 link address must use plaintext! The current mainstream reminder email link is a text chain with a clear text link at the same time, it is also possible. Because some mail systems may filter text hyperlinks, it is possible to avoid this by having the same address set to hyperlinks and clear text links.
3 If you really want to use the picture, then, please add the "Alt" attribute to the picture. So even if the picture is blocked, you can know what the picture represents. For example, Flickr alerts are great at this point.

>> for the text: Please be concise, describe what this is the action, the user how to do OK, the other long-winded don't! Because in this module, the user's goal is a single, you need to use a more simple page to allow users to complete the task quickly, this is OK.

>> others: If you can please tell users how to unsubscribe from similar emails (don't learn rogue Amazon!)! To kindly tell the user not to reply directly to the message.

Second, EDM mail for users, users may be more concerned about the richness of their content and visual effects. Therefore, EDM mail must not be pure text, and the main purpose of EDM mail is to attract users to the site and even to purchase, so it will be more complex.

>> for headlines: Be sure to attract people. But the premise is to articulate the content and not too long.

>> for the width of the page: recommended control under 650px. Personal comparison tends to use 650px, because this width whether for 2 or 3 columns of the design is easier to layout (excluding 10px gap, and then divide it, it is clear that the number is easier to handle).

>> for the content of the page: because the use of pictures is unavoidable, but the important content must use the text, even if the use of the picture must be given a text logo! There's a good EDM on this point. The EDM header is the logo+ mode, the logo uses the ALT attribute, and the dominant navigation is a direct and practical form of text link. This way, even if the entire message picture is blocked, important information can be displayed.

>> for the use of pictures: It is recommended to give each picture a fixed width and height and alt attribute identification, while not using background pictures.

>> for boot: The general EDM will leave a source address on the Web, so please give a hyperlink in the obvious position of your EDM, "if the picture can't be displayed, click here to view it" so that some users can be guided even if they are blocked.

>> about consistency: If you send an EDM on a regular basis (this is like nonsense), please note that using a unified style, mainly the page header and footer style unification. If you have a periodical number, please join the periodical number and time!

>> about reminders: How to unsubscribe, how to contact the necessary content and so on the bottom of the page, to be a polite promoter. At the same time, if you are willing to provide unsubscribe button, please be sure to try to achieve a key unsubscribe ....

>> Some supplements: System mail production should always pay attention to follow the message play to go, open faster; the page should not be too long, recommended in 2 screen. About the specific layout and design and listen to decomposition.

Yes, I do. EDM one (intentionally shielding pictures)

Source: http://www.ikent.me/blog/2313