隐形窗口

by Michael Loscalzo

通过迈克尔·洛斯卡佐(Michael Loscalzo)

建立网站时要考虑的隐形(但至关重要)注意事项 (Invisible (but crucial) considerations to take into account when building a website)

网站的成功并不仅仅取决于网站的美观 (The success of a website isn’t solely contingent on its beauty)

An ugly website will surely fail, right?

丑陋的网站肯定会失败，对吧？

Wrong.

错误。

Despite its homely appearance, Craigslist operates in 70 countries and receives 50 billion page views per month.*

尽管其外观朴实，但Craigslist仍在 70个国家/地区运营，每月获得500亿次页面访问。*

How can this be? The fonts used are Arial and Times New Roman. Bland color scheme. Where are the pretty pictures?

怎么会这样？使用的字体是Arial和Times New Roman。平淡的配色方案。漂亮的照片在哪里？

Is Craigslist an anomaly?

Craigslist异常吗？

Nope.

不。

Example number two…

示例二…

Few people would try to convince you that Reddit is one of the more visually compelling sites accessible via the world wide web. Nevertheless, Reddit is the 4th most visited website in the United States and ranks 6th globally.**

很少有人会说服您Reddit是可通过互联网访问的更具视觉吸引力的网站之一。不过，Reddit是美国访问量排名第四的网站，在全球排名第六。**

The composition is crowded! Ugh, those tabs and buttons look so dated!

构图很拥挤！ gh，这些标签和按钮看起来太过时了！

These aesthetically-challenged websites are absolutely crushing it, because they’re gorgeous behind the scenes and they provide unique value to their visitors.

这些极富美感的网站绝对压倒了它，因为它们在后台非常漂亮，并且为访问者提供了独特的价值。

I’m not writing this post to encourage you to abandon your personal sense of aesthetics. But, what I’m saying is that sometimes the invisible aspects of a website are even more important than the visible ones.

我并不是在写这篇文章来鼓励您放弃个人的审美意识。但是，我要说的是， 有时网站的不可见方面甚至比可见的更为重要。

从我的错误中学习 (Learning from my mistakes)

In July 2007, I abruptly lost my job as a Graphic Designer when the corporation that I worked for declared bankruptcy. I’d been a part of the internal Marketing team, and my responsibilities included the design of flyers, postcards, brochures, and other printed marketing materials.

2007年7月，当我工作的公司宣布破产时，我突然失去了平面设计师的工作。我曾经是内部营销团队的一员，负责的工作包括传单，明信片，小册子和其他印刷营销材料的设计。

I began to look for a new job and found a number of openings in web development. Technically, I didn’t have much experience. But I was confident that designing for the web was the same as designing for print.

我开始寻找新工作，并发现了Web开发方面的许多空缺。从技术上讲，我经验不足。但是我有信心为网络设计与为印刷设计相同。

During the last decade, I have learned that I was very wrong.

在过去的十年中，我了解到我错了。

In recent years, you have likely heard the proclamation that “print is dead”. Yet there are many that still approach digital content with the same mindset that they applied to printed material, just as I did 10 years ago.

近年来，您可能已经听到“印刷已死”的宣告。但是，就像我十年前一样，仍然有许多人仍然以与印刷材料相同的思维方式来处理数字内容。

In print, we were entranced by visual beauty. We took pride in good kerning and had strong allegiances to our favorite fonts. We accessorized our designs with spot varnish and carefully selected paper stock. When the product looked great, we could bask in a job well done.

在印刷中，我们被视觉美感所吸引。我们以良好的字距调整感到自豪，并对我们喜欢的字体表现出强烈的忠诚感。我们为我们的设计提供了现货清漆和精心挑选的纸料。当产品看起来很棒时，我们可以做好工作。

With digital content, we need to be conscious that our product is interactive. We need to strive to create a marriage of form and function. Don’t forget the invisible!

对于数字内容，我们需要意识到我们的产品是交互式的。 我们需要努力创造形式与功能的结合。 不要忘记看不见的东西！

Let’s unwrap the five “invisible” elements of a great website. There are important decisions that need to be made:

让我们打开一个优秀网站的五个“隐形”元素。需要做出重要的决定：

UX Decisions用户体验决定
UI Decisions用户界面决定
Performance Tradeoffs性能折衷
SEO ConsiderationsSEO注意事项
Data-driven Design Decisions数据驱动的设计决策

用户体验决定 (UX Decisions)

“User experience design (UX, UXD, UED or XD) is the process of enhancing user satisfaction with a product by improving the usability, accessibility, and pleasure provided in the interaction with the product.”***

“用户体验设计(UX，UXD，UED或XD)是通过改善与产品交互时提供的可用性，可访问性和娱乐性来提高用户对产品满意度的过程。” ***

UX is a growing field and is complex to explain. There are definitely “visual” aspects of UX. For the sake of brevity, let’s simply think of UX as “functionally across browsers and devices”.

UX是一个不断发展的领域，解释起来很复杂。绝对有UX的“视觉”方面。为了简洁起见，让我们简单地将UX视为“功能跨浏览器和设备”。

If your content looks beautiful, but is not mobile-friendly, that’s bad UX because the content isn’t widely accessible. If your content is cutting edge, but only works in one browser, that’s bad UX because the content isn’t widely usable.

如果您的内容看起来很漂亮，但不适合移动设备使用，则UX不好，因为无法广泛访问该内容。如果您的内容是最先进的，但是只能在一种浏览器中使用，那是糟糕的UX，因为该内容不能广泛使用。

Far too often, the majority of effort is expended on visuals at the cost of adequate testing, and the price is content that does not function as intended for some (or all) users.

很多时候，大部分精力都花在了视觉上，而付出了适当的测试费用，而价格却是某些用户(或所有用户)无法正常使用的内容。

Learn more about UX from Nick Babich

从Nick Babich了解有关UX的更多信息
Avoid bad UX with tips from Jason Clauß’s Bad UX Roundup

通过JasonClauß的 Bad UX Roundup中的技巧避免不良UX
Learn about UX Writing from Tubik Studio

从Tubik Studio了解UX编写

用户界面决定 (UI Decisions)

“User interface design (UI) or user interface engineering is the design of user interfaces … with the focus on maximizing usability and the user experience.”***

“用户界面设计(UI)或用户界面工程是用户界面的设计……重点是最大程度地提高可用性和用户体验。” ***

Like UX, there is an obvious visual aspect to UI. But when you are developing content, it can be easy to lose sight of the way the end user will interact it. Consistent and intuitive UI is crucial to a successful interactive experience.

与UX一样，UI也具有明显的视觉效果。但是，当您开发内容时，很容易忽略最终用户与之交互的方式。一致且直观的UI对于成功的交互体验至关重要。

Keep in mind, not every user is as familiar with modern interactive experiences. For example, some users may not recognize the “hamburger menu” as the access point for all website navigation.

请记住，并不是每个用户都对现代交互体验感到熟悉。例如，某些用户可能不会将“汉堡菜单”识别为所有网站导航的访问点。

Learn more about UI from Tony Gines

从Tony Gines进一步了解UI

性能折衷 (Performance Tradeoffs)

According to Google, 53% of mobile users will abandon a website that takes more than 3 seconds to load. You can test your website speed for free with GTmetrix.

根据Google的说法，有53％的移动用户会放弃网站，而该网站的加载时间超过3秒。您可以使用GTmetrix免费测试您的网站速度。

Many companies use a Content Management System (CMS) to operate their website. A CMS is a great tool, but it will not help you write clean code for unique content. For example, the wave animation below could have been achieved with an animated GIF, but using CSS cuts down the weight significantly.

许多公司使用内容管理系统(CMS)来运营其网站。 CMS是一个很棒的工具，但是它不能帮助您为独特的内容编写简洁的代码。例如，下面的wave动画可以通过动画GIF来实现，但是使用CSS可以大大减轻重量。

Site speed is tied directly to your SEO and UX!

网站速度直接取决于您的SEO和UX！

Learn more about improving website speed from Nikole Haiar

从Nikole Haiar了解更多有关提高网站速度的信息

SEO注意事项 (SEO Considerations)

“Search engine optimization (SEO) is the process of affecting the online visibility of a website or a web page in a web search engine’s unpaid results ...” - Wikipedia

“搜索引擎优化(SEO)是影响网站或网页在网络搜索引擎的未付费结果中的在线可见性的过程……” -Wikipedia

Google strives to drive their users towards content that is safe, relevant, mobile-friendly, and loads quickly. Other search engines operate in a similar fashion. Can people find your awesome content? If you are not considering SEO, your ranking can be nonexistent. Typically, a higher ranking can mean more traffic for your content.

Google努力促使其用户访问安全，相关，适合移动设备并快速加载的内容。其他搜索引擎以类似的方式运行。人们可以找到您的精彩内容吗？如果您不考虑SEO，则您的排名可能不存在。通常，较高的排名可能意味着您的内容有更多的流量。

SEO is a huge topic with many facets. Patrick Curtis describes a 32% increase in organic traffic from fairly simple on-page SEO techniques.

SEO是一个涉及多个方面的巨大话题。帕特里克·柯蒂斯(Patrick Curtis)表示，通过相当简单的页面SEO技术，自然访问量增加了32％。

Learn more about SEO from WordStream

从WordStream了解有关SEO的更多信息

数据驱动的设计决策 (Data-driven Design Decisions)

How can you prove that your design or campaign has produced a return on investment? We now have access to an array of tools that will help us evaluate the Key Performance Indicators (KPIs) of our web content. These metrics offer objective evidence and we no longer have to rely on personal opinions alone.

您如何证明您的设计或活动已产生投资回报？现在，我们可以使用一系列工具，这些工具将帮助我们评估网站内容的关键绩效指标(KPI)。这些指标提供了客观的证据，我们不再需要仅依靠个人意见。

There are a ton of tools! But here are some examples…

有很多工具！但是这里有一些例子……

Google analytics: Measures website, app, digital, and offline data to gain customer insights.

Google Analytics(分析)：测量网站，应用程序，数字和离线数据，以获取客户见解。
Social media analytics: Twitter, Facebook, and YouTube all offer helpful analytics tools.

社交媒体分析： Twitter ，Facebook和YouTube均提供有用的分析工具。

Regardless of your talent and experience, it is nearly impossible to create a perfect website that requires no adjustments. What type of devices are your visitors using to view the content? Where are they from geographically? How were they referred to the website? What content is most popular? We can evaluate the metrics, form a hypothesis, revise, and test. This process can be repeated to refine a website.

无论您的才华和经验如何，几乎都不可能创建不需要任何调整的完美网站。您的访客使用什么类型的设备查看内容？他们来自哪里？他们是如何访问该网站的？最受欢迎的内容是什么？我们可以评估指标，形成假设，进行修订和测试。可以重复此过程以完善网站。

Learn more about making data-driven design decisions from freeCodeCamp (Post written by me ?)

了解更多有关通过freeCodeCamp进行数据驱动的设计决策的信息 (我写的帖子 ？)
Learn more about KPIs from David Zheng

从David Zheng了解有关KPI的更多信息

? Thank you for reading! If you enjoyed this story you can Read more or Follow me on Twitter.

？感谢您的阅读！如果你喜欢这个故事，你可以[R EAD更多 Ø 的 R F ollow我的Twitter上。

* Source: expandedramblings.com

*资料来源： expandedramblings.com

** Source: https://www.alexa.com/siteinfo/reddit.com May 13, 2018

**资料来源： https : //www.alexa.com/siteinfo/reddit.com 2018年5月13日

翻译自: https://www.freecodecamp.org/news/invisible-but-crucial-considerations-to-take-into-account-when-building-a-website-17a64e0e7c57/