大大改善用户体验的10个小细节
发布时间:2008-09-17 13:27:00
以下是我做美工的两年生活中一条条总结出来的经验,每一点都是我常用的,虽然不是什么大学问,但我觉得要互相学习才能提高,所以现在拿出来和大家一起分享,如果你觉得实用就拿去试试,然后留个评论,我就很高兴了,不喜欢的可以路过。费话少说,下面正式开始。
1.加载大图片时,显示loading小图片。
这招是我最常用的。当我们要加载一张比较大的图片时,如果能加载图片的同时,显示loading的小图片,那样看起来就人性化很多。当加载完成时,图片会盖住loading小图片,这是一个很有用的小技巧。要实现这个小功能,只要在网站的公共样式表上添加下面这个样式 ,就可以实现了。
img {
background-image:url(loading.gif);
background-position:center;
background-repeat:no-repeat;
}
解释一下上面的代码,懂CSS的站长可以略去这段。第一行“img”指向页面的全体图片元素(看到样式表的优势了吧,只要一句,就能作用于网站的全体同类元素,不是DIV+CSS的网站站长是不是有想法了?呵呵)。第二行“background-image:url(loading.gif);”是指为图片添加一个以图片为背景的背景(读起来有点拗口)。这个loading.gif是你要你自己上传的加载小图片。第三行:background-position:center;把背景图片居中,这样看起来比较顺眼。第四行:background-repeat:no-repeat;就是让loading.gif小图片只显示一个,如果没有这句,就用出现很多排列起来的loading.gif小图片,这要注意一下。
2.选填表单右边显示“可不填”。
这是我最初在QQ网站的留言本上看到的,当时看到个人信息的一些表单旁边写着“可不埴”的时候,真的是感觉非常舒服,你想想,人家好不容易有空给你留言,你还想人家慢慢看你的留言说明吗?给你留言,当然想简要完事啦。你却动不动跳出个“表单内容不能有空”这不把人家吓跑才怪。这个小技巧可以应用于各大论坛的用户注册,留言本等地方,不要只在必填框旁边加个红*就算了,这样对于熟悉网站的人来说当然没问题,但你要考虑到各种各样的网民。“可不填”三个字,就能大大提高用户体验,为什么不试试呢。
3.保证每个页面都有回首页的连接。
为什么要主这个呢?因为我看到很多网站都没注意到这个小细节,有一次我在一个论坛上登陆,成功后,他跳转到另一个页面提示登陆成功,等了十几秒它都不自动返回,但我又已经顺手把多的页面关掉了,所以,只剩下一个页面了,我又不能返回,他又没有返回首页的链接,一气之下,我就关掉浏览器走人了。所以,建议站长朋友们有空多检查一下自己的网站,看是不是有些页面是孤独的。
4.在执行AJAX操作时,如果响应时间过长,应提示用户加载超时。
这个在AJAX中,可以使你的程序更人性化的小技巧,不多说了,你看下面的代码就明白。如果你看不明白的话,就不要乱改网站,会出错的。这是一个用户验证的程序片段,注意红色部分。
var timeLast;
//发送信息
function submitSelectItem()
{
var postStr="uid="+document.getElementById("userName").value+"&pwd="+hex_md5
(document.getElementById("passWord").value);
timeLast=window.setTimeout("show_timeout()",15000 );//超过15000毫秒后显示超时
show_waitting();
createXMLHTTP();//创建XMLHttpRequest对象
var url="ajax/chcekUser.aspx?time="+TimeDemo();
xmlHttp.open("POST",url,true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded:charset=UTF-8");
xmlHttp.onreadystatechange=getResponseRusult;
xmlHttp.send(postStr);
}
//回调函数
function getResponseRusult()
{
if(xmlHttp.readyState==4)//判断对象状态
{
if(xmlHttp.status==200)//信息成功返回,开始处理信息
{
clearTimeout(window.timeLast);
var reint=xmlHttp.responseText;
switch (reint) {
case "1":
show_success();break ;
case "2" :
show_tryCountOut();break ;
default :
show_error();break ;
}
}
}
}
5.可能的不良后果提前提醒用户。
如果你的页面很大,特别是要用到很多表格时,加载时间可能会很长,这时候要提前告诉用户。“页面可能加载时间比较长,请耐心等待....”之类的。
6.拿到美工做给你的页面,一定要测试不同的浏览器。
这主要是有些美工不太负责,你不要求他就不测试。所以要自己测试一下,发现在其它浏览器显示不正常时,要求美工修改。我做的页面都经过火孤,IE6,IE7,OPERA等测试才交给客户的。我觉得交给客户不成熟的东西会对自己形像不好。
7.文章标题采用缩略时,要在“title"有完整描述。
这点在很多SEO教程中都说过的,我就不分析了。
8.用户人性关怀。
如果网站使用了注册制度,主页应该为新用户和老用户登录提供链接。并且要有某种方式让我知道自己已经登录了,友好方法(“欢迎回到不爱学习网,lanmeng”)。
9.让我看到自己正在寻找东西。
主页应该让我想要任何东西显而易见——如果它在站内某个地方话。... ... 还有我没有寻找。同时,主页也应该让我看到一些很精彩,我也许感兴趣内容——就算我并没有寻找它们。
10.告诉我从哪里开始。
在一个新网站里,无从下手感觉糟糕透了。这点对新用户比较有效。可以这样判断下:
if(session.isNewSession){
//新用户向导。
}
猜你喜欢
- 在面向对象的理论中,有两个核心的概念:类和实例。类可以看成是一个模板,实例就是根据这个模板创建出来的对象。但在 Python 里面,类和实例
- 本文实例讲述了mysql存储过程之创建(CREATE PROCEDURE)和调用(CALL)及变量创建(DECLARE)和赋值(SET)操作
- 如果你是个赛车手,并且按一下按钮就能够立即更换引擎而不需要把车开到车库里去换,那会是什么感觉呢?MySQL数据库为开发人员所做的就好像是按按
- 话不多说,请看代码------------------------------------------作者:张欣宇-----时间:2013-
- 自动签到的python脚本源码新建一个python文件,checkin.py,保存到电脑上某个位置,我这里保存到的是E:\pyproject
- 正则表达式是Python程序设计中非常实用的功能,本文就常用的正则表达式做一汇总,供大家参考之用。具体如下:一、字符串替换1.替换所有匹配的
- 当前需求:有group和factor两张表,一个group对应多个factor,现在想查询有效的group和对应的有效的factor,两个表
- 前言本文总结了mysql中DCL,常用的一些权限控制,后续使用到其他会继续补充。一、用户控制管理创建用户create user '用
- 楔子有几天没有更新 Python 文章了,本次我们来聊一下 Python 的集合是怎么实现的?之前我们介绍过字典的实现原理,它底层是基于哈希
- 现在大多数Centos6.x版本的系统python都是2.x,现因开发需求需要安装前端代码的构建工具glue,故必须要做python版本的升
- 代码:hello.py#!/usr/bin/python# coding: utf-8# hello.pydef application(e
- 以下为引用的内容:DROP PROCEDURE test_insert ;DELIMITER ;;CREATE PROCEDURE test
- 一、python3的安装建议安装python3,python2在未来将不再维护。python官方下载地址https://www.python
- 最近用uniapp开发h5 实现扫码功能前端界面如图首先打开uniapp官网,在uni-app官网上发现uni-app不支持H5扫码功能。失
- 网页过渡是指当浏览者进入或离开网页时,页面呈现的不同的刷新效果,比如卷动、百叶窗等。这样你的网页看起来
- css当中有许多平时很少用的属性,但是这些属性有时候被发掘出来以后就会立刻引起一些人的追逐,首字大写就是这样一种效果。最近越来越多的blog
- 类的定义# class是定义类的关键字,ClassName为类的名称class ClassName:# 在这里写其他内容passclass
- 之前一直遇到js插件生成的元素,click事件无效的问题,重新绑定也不行,终于找到解决方法,在此记下来。同时加深对js事件处理机制的理解。1
- 介绍今天有个不正经的需求,就是要快速做一个restful api的性能测试,要求测试在海量作业数据的情况下客户端分页获取所有作业的性能。因为
- Golang中使用http.FileServer使用http.FileServer可以管理向浏览器返回静态文件http.Handle(&qu