UI.

10个提示创建更具可用的网络

WebDesignerDepot员工 经过 WDD员工  |  6月4日,2009年

无论’您的投资组合,博客,营销网站或一系列游戏,我们都希望吸引访客到我们的网站,并确保他们拥有愉快的体验。

可用性测量香港跑狗图的级别’S的经验,可以在特点是可以完成给定任务的容易;无论’完成了先前知识,或者让香港跑狗图学习一种新的交互方式。我认为Jakob Nielson在他说的时候可能会解释一下:

“可用性是一种质量属性,可评估香港跑狗图界面的使用程度如何。这个单词“usability”还指在设计过程中提高易用性的方法。”

在本文中,我希望为您提供某种形式的 可用性 checklist,将来自表单设计的主题涵盖到您可以应用于任何Web项目的简单导航提示。

 

1.创建主动导航

让香港跑狗图知道他们的网站部分’重新进入,或他们的类别 ’通过驾驶可以为任何网站提供巨大的可用性。主动导航是此时几乎自动的可用性概念之一。我们都有自己的方式创造它。

创建主动导航的理想情况是执行服务器端,因为它会大量切断所需的HTML和CSS的量。如果生成活动状态服务器端ISN’t an option, 操纵你的身体元素 通过直接风格,每种导航元素也是一个精致的选择。

作为第三种选择,你很容易 使用JavaScript创建活动导航.

您的主动导航状态应始终与悬停状态不同。

主动和悬停导航例子

 

2.可点击标签& buttons

When you take the time to mark up a form properly a user can click a label to activate the associated form element and there’是一种简单的方式来展示它。这是一个很好的功能,建立在HTML中。不幸的是,很少有香港跑狗图知道这个香港跑狗图界面的自然宝石。

让香港跑狗图知道标签只需点击一行或两个CSS(取决于您的写入方式)将光标从默认文本插入更改为更可点客和友好的指针。

用悬停效应形成标签

 

现在每个人都是’很好地知道提交按钮可点击。一世’总是认为这是奇怪的–显然可点击– element doesn’t使用与链接相同的光标。所以我还希望将此一点CSS应用于按钮:

label, button, input[type="submit"]{cursor:pointer;}

 

3.链接您的徽标

没有将徽标链接到您的网站’主页是我更令人沮丧的事情之一’越过于网上。我可以’理解为什么有人不会’t so this. It’S这么容易,现在,它’安全说,香港跑狗图期待它。

连接您的徽标是如此常见的是,许多网站正在查找标有链接“Home” isn’对于香港跑狗图只是单击徽标以导航到主页,不再有用。

诸如Facebook之类的网站,通过添加来追踪香港跑狗图点击“ref”每个导航元素的参数。以下是Facebook如何链接其徽标的示例:

Facebook

 

 

4.增加一个链接上的命中区域

大约一年前,来自37股的瑞安歌手写了一篇关于他们的文章 填充链接目标,以便更加悲伤 在Basecamp。这是您可以通过简单地添加一些链接的填充来使用的另一个小型可用性技巧,以使可点击的区域更大。

这是任何网站的一个很好的补充,它可以帮助防止在链接上误入歧,这通常会有点令人沮丧。它还可以帮助您在移动网络设计中进行很多,香港跑狗图点击他们的手指,并且真的需要链接上额外的大型命中区域。

苹果手机

 

5.添加焦点以形成字段

将焦点应用于表单领域是UI设计的趋势。它让香港跑狗图知道他们刚刚造成的东西发生(这是有意义的?)。它’S快速简便的方法来传递对香港跑狗图的有用,不引人注目的信息。说些什么:“嘿!你只是点击了这里。” Can be very useful.

一个聚焦的形式元素

 

6.提供有用的404页

让香港跑狗图感到舒适是非常重要的,并且在屏幕上显示大型Apache错误消息’做到这一点的最佳方法。一个有用的404页面可以走很长的路,它就不了’t必须包含数字“4” or “0”, as they aren’对于除了开发人员以外的任何人都非常有帮助。除此之外,没有人真正需要知道幕后发生的任何事情的错误代码。香港跑狗图只需想要一个网站来工作他们期望的方式。

在off机会上,香港跑狗图确实找到了自己“Page not found”, it’在他们可能能够找到他们的信息的地方来领导他们的更多有用’通过提供一些道歉文本,搜索框或建议一些可能的目的地来重新寻找。但尽量不要将责任归咎于香港跑狗图登陆错误的URL。

Blogussion 写了一篇伟大的文章 创建信息丰富的404页 这列出了一些非常好的提示,甚至是我们中间人的WordPress香港跑狗图的代码。

404错误

 

7.使用语言创建休闲环境

在网络上写作是现在的一个大主题。它’s like we’重新浏览一些巨大的清单处理问题:HTML,CSS,渐进式增强,可访问性,WEBS写作以及所有包涵式“Web standards”.

We’重新听到关于网上的写作,似乎不断变化。从那些日子里 史蒂夫克鲁格 告诉我们将我们的内容缩小为50分,以便尽可能使用项目符号列表。

现在我们’所有人都应该写作我们’再与朋友交谈,这一切都追溯到让香港跑狗图觉得自己’在一个舒适的环境中。当您在您的网站上休闲时,它使香港跑狗图感到不那么强调,所以即使他们遇到一些混乱的东西,他们仍然可以感受到放松和非正式的答案,因为他们寻找他们的答案。

长椅

 

8.应用线路高度以获得可读性

线高度是可以直接从物理媒体继承的东西之一,例如书籍和报纸。这些来源已经存在数百年,并且已经有足够的时间来掌握可读性和线路高度。所以下次你’困扰着这个,唐’害怕破解宣传教科书并检查出来。

这是网络设计的一个方面,可以很容易地忽略和容易滥用。我通常以约1.4em的线高度开始,并根据设计和内容从那里调整它。

线高度的例子

 

9.利用空间到组元素

将项目组合在一起是最简单的方式的方法之一。您可以用图像,边框或只是普通的旧空间来做到这一点。使用空白空间到组元素在相关元素之间创建自然关联,即使在浏览读取时,也可以通过香港跑狗图轻松拾取。

随着眼睛扫描页面,香港跑狗图将自然地首先读取标题。这与前10名列表(:: ahem::)发生了很多。希望内容有趣,足以抓住一些注意力并吸引香港跑狗图更密切阅读。通过以某种方式设计内容,您可以在正确的方向上推送香港跑狗图,以便与之相关的事情实际上看起来像它们’re related.

空白

 

10.可访问

通过进入,我不’t均值第508条和ADA合规性。可访问性,在这种情况下,意味着在存在问题(响应性)时为您的香港跑狗图在那里。

如果可用性全部是关于试图确保您的香港跑狗图不’令人沮丧和离开,响应能力是你最后一系列防止香港跑狗图到一小数点击的竞争对手之一。

最终,您可以执行所有测试,并遵循您可以掌握的所有可用性建议,但每个人都不同。香港跑狗图将迷茫和丢失,最终需要一些帮助。您留下香港跑狗图困惑的时间可能是将回来的人和赢得人的人之间的区别’t.

在谈论可访问性时,许多人默认违反了关于视觉损害的对话,但可访问性远远超出了这一点。例如,您必须让您的网站访问具有带宽限制的香港跑狗图(拨号连接,小区服务,慢速网络)和旧浏览器(一些公司获胜’t让员工升级浏览器)。

如果我们尽最大努力使我们的网站尽可能地访问,并迅速响应问题,我们可以创造一个整体体验,将使香港跑狗图不​​断想要更多。

客户服务很重要… even on a blog.


专门为WDD编写 蒂姆赖特,web designer / developer和blogger。你可以找到更多的写作 Csskarma. 或者 关注Twitter上的时间.

您是否在网站上遵循所有这些原则?我们如何创建一个更好更具可用的网络?我们’d喜欢听到你的评论…