主页 > L潮生活 >9个网站设计容易遗漏的小细节 >

9个网站设计容易遗漏的小细节

2020-06-06来源:L潮生活
点赞:262
9个网站设计容易遗漏的小细节

要设计出一个使用者体验绝佳的网站,除了视觉美观、功能完整之外,细节也是不可或缺。甚至我们可以说,两个功能相近的网站,决定使用者体验差异的关键,正是细节。〈 9 Small User Experience Details Most Websites Miss 〉 这篇文章提供了九个网站设计者可以思考的细节。1

1. 访客点过的超连结

不论是新闻、Google 搜寻结果、部落格文章或是 Facebook 上的内容,一般来说都会有很多连结。以 Google 搜寻为例,如果我们点过的搜寻结果其连结没有「上色」,那我们很可能会忘记哪些搜寻结果是已经点开来查看过的。如果点过的连结颜色会与没点过的不同,便能让使用者一眼分出哪些是已经点过的。

我们熟悉的 Google、CNN、BBC、纽约时报等都有这样的设计,不过像是华尔街日报、联合新闻网等则没有。其中 Google、Yahoo 与纽约时报都是用紫色做为区隔。

2. 点击网页 Modal Window 以外的地方应该要能关闭
9个网站设计容易遗漏的小细节

有时候网站会出现一个浮出视窗,例如我们要分享 Facebook 上的贴文时跳出来的那种,不过比较讨厌的是当我们要关闭那个视窗时,点击视窗以外的地方并不能直接关闭视窗,只能点右上角的「X」,这样样一来我们还得精準地移动滑鼠,显得不是那幺方便。

9个网站设计容易遗漏的小细节

这个部分 Twitter 就做得不错,在使用者发表推文的浮出视窗外点一下,就可以关闭视窗了。即便是编辑推文的中途不小心关闭视窗,再打开一次就可以了,编辑到一半的内容会在那边等待使用者去完成。

9个网站设计容易遗漏的小细节

点外视窗外面的灰色区域以关闭视窗,是不是比点击「X」简单多了呢?
3. 网页载入后,让游标出现在第一个输入框

当使用者看见网页上出现待填的表单,这个时候如果游标可以直接出现在第一个待填的栏位,不必劳驾使用者移动滑鼠,那幺体验自然会比较好。

另外一个例子是 Yahoo 字典,他们的游标会自动出现在查找单字的栏位,而不是上方的网页搜寻——毕竟使用者都点进来字典了,要找的当然是单字而非网页。

4. 按下 Enter/Return 就可以送出表单
9个网站设计容易遗漏的小细节

不知道大家有没有这样的经验——填完表单按下 Enter 键之后却什幺也没发生?原来是要移动游标点击「送出」按钮。在台湾,登入露天拍卖网站时输入完帐号密码后,一定要以点击「登入」按钮的方式登入,要是输入完毕直接按 Enter,系统会坚持:请用滑鼠点选登入按钮 XD

这样的设计有好有坏,例如可以避免因为误触而送出未完成的表单,但相对而言麻烦许多,毕竟有很多情况只是我要登入一个网站,而不是要转帐或是送出大学联考的志愿序。当然,最好的情况是针对表单的特性设计避免使用者意外送出表单,例如在送出重要表单前再跳出一个确认对话框避免误触情形。

5. 当游标移到图示的时候,给点功能提示吧
9个网站设计容易遗漏的小细节

我们知道在网站上使用图示代替文字描述是个优雅的方式,例如垃圾桶代表删除、购物车代表,呃,购物车。但是并非每个人都这幺熟悉这些你我觉得很常见的图示背后所代表的含意,例如比较少接触电脑或网路的使用者,此时文字上的描述就显得很重要。

6. 记得在部落格放上连回网站的连结

现在绝大多数的网路服务都会放上部落格连结,但是别忘了要在部落格上加入连回网站的连结。这只是个小细节,也许使用者可以按一次「上一页」回去部落格,或是简单移往旁边的分页即可,但是别忘了,我们常说好的介面设计是让使用者无法察觉的设计,万一使用者「发现」自己找不到回去网站的路,岂不就糗了?

例如「Castro」这个最近刚推出的 podcast app,网站跟 app 本身都设计得不错,可是点了部落格连结,读完他们发表的宣言或是产品更新资讯后却会发现:回不去产品页面了。

7. 单独展示图片或照片时,尺寸要比缩图还大

相信大家都看过部落格文章或是购物网站的商品介绍,这些页面上往往会有「灯箱」设计,目的是放大文章里的缩图,单独展示图片或照片,可是有时候会遇到一种很瞎的状况——展示出来的尺寸根本没有比较大,甚至还会有变小的情形。请记得使用者单独点击照片的时候,是希望可以看到更大尺寸的图片,而不是欣赏灯箱本身的效果。

8. 让使用者可以编辑已发送的讯息或贴文

一般而言,像是部落格或网路相簿等等,都会让使用者编辑已经发送出去的内容,然而有些情况并不适合让使用者「反悔」,例如 ID、留言等等,因为那容易造成混淆或是误会。

不过近年一些大型的网站例如 Facebook,已经开放让使用者编辑已发出的状态或是留言,只是依旧会留下编辑前的版本供他人检视。最近 Twitter 也传出在实验让使用者「编辑」已发出的 tweet。2

9. 不要同时使用「Sign In」与「Sign up」

如果网站的语言是英文,那幺「Sign In」与「Sign Up」儘量不要同时使用,假如选择「Sign In」,那幺代表注册的词最好改用「create account」,假如注册要用「Sign Up」,那登入就可以用「Log In」。当然,中文网站大概比较不需要担心这种情形。

以上九点都是网站设计上的小细节,但若不注意,却有可能导致乏善可陈的使用者经验,反之,如果想要做到让使用者完全没有察觉,顺畅而愉快地使用网站,那幺这些细节便是不可忽视的。

  1. 9 Small User Experience Details Most Websites Miss↩
  2. Twitter is reportedly working on an ‘Edit’ feature to let you make “slight changes” to tweets↩

相关阅读

随便看看