sara.liu

搜狐焦点细节设计盘点

细节决定成败呀

awoke|man:



写此文的目的,就是为了和各位探讨一下设计思路,所以没有从整体设计角度出发,只盘点了一些非常琐碎的设计细节,如有不同意见欢迎随时跟我交流。








  1.  登录框设计细节







(由于焦点的门户性质,用户对登录需求不强烈,所以我选择电子交易平台e购房的登录界面做分析。)







  • 设计初衷是为方便用户






登录模块设计了邮箱的自动填充,但是并没有常用的@163、@qq、@gmail等等,而都是搜狐旗下的公司邮箱,这个设计主要是为了让用户提高输入效率,次要是推广搜狐旗下的品牌,但结果却是用户找不到自己的邮箱后缀而不得不手动输入,主要设计目的没有达到,于是这就成了一个本末倒置的设计体验。






搜狐焦点细节设计盘点



优秀细节:

在选择自动填充邮箱后,焦点切换到密码框, 用户登录动作更连贯。




可改进建议:

输入密码时,应该增加大写开关提示,例如:





搜狐焦点细节设计盘点




改进小建议:若是想要简化页面登录注册按钮,也可将登录和注册界面合并.



例如,亚马逊新用户注册与老用户登录整合在一个界面里,降低用户认知学习成本,界面依旧简洁高效


搜狐焦点细节设计盘点






  1.  搜索框设计细节






搜索框在网站设计中比较突出,在焦点这种信息量巨大的网站中尤为重要,是用户使用最频繁的组件,所以优秀的网站在搜索框中的设计一定是最细致的。二手房为例,搜索框采用选择下拉框和搜索框组合,提高搜索结果精度。















  • 反馈要及时也要有记忆








首页搜索模块采用下拉分类搜索, 当输入只一个字母时下拉列表就已经及时的显示了相关结果.


搜狐焦点细节设计盘点






美中不足的缺点,搜索框反馈的内容排序是固定的, 
并不能记住我刚刚输入过的内容.这个设计可以参考百度搜索的设计.(虽然是细微的设计,却充满了诚意,也能让用户爱上你的网页)



搜狐焦点细节设计盘点






可能改进的建议:当鼠标hover状态,下拉列表没有展开,而是需要用户点击操作,连续选择本是一个连贯动作,但每次需要点击鼠标中断了用户流畅的动作。






搜狐焦点细节设计盘点








  • 别让用户遗憾的走








当我准备在回龙观矩阵小区租房,但是我以为小区叫矩阵人家,于是我在搜狐焦点租房板块,搜索矩阵人家结果出现了这个结果...







搜狐焦点细节设计盘点






没有找到搜索结果让我很震惊,我只记得小区名字,不知道其他查询办法,于是我断定这个网站收录信息太少,含泪默默关闭了搜狐的网页,打开了ganji.com...






搜狐焦点细节设计盘点








赶集网的结果显然要好很多,主要几点:



1.给出建议,减少用户思考,防止用户不知所措。



2.结果配合吉祥物卡通图片,降低用户认知成本,强化品牌概念,用户倍感亲切。



3.对关键词作出判断,系统根据我的搜索关键词,给出我可能要找的结果,大大增加用户再搜索的操作成本,用户好感度大增。






在设计关联导航时,应该为用户设计好“下一步”操作和相关联的链接,避免出现空空的界面和用户不知所措的看着屏幕。考虑周全的设计会建立起网站内部关联的关系网络,推荐访客可能相关的操作或结果,不应该留一片空白给用户,否则只能看着用户带着遗憾离开你的网站。












  1.  信息架构的细节设计








(以二手房页面为例)处理多个搜索结果是很头疼的事情,将信息分类,给商品贴标签已经成为组织成网站信息架构的有效手段。下面是条件检索中手动输入限制条件的设计。











  •  
     温和的对待用户








以价格为条件将商品分类的时候,网站支持用户手动输入价格区间,本是很人性化的设计,却留下了一些影响体验的遗憾。







搜狐焦点细节设计盘点






当如图所示,输入5000-1000的区间后,系统会弹出一个对话框,提醒你按照价格范围(也就是从小到大的顺序)输入。






这是一个很不友好的操作提示,让用户本来流畅温和的体验突然被弹出窗口打断,而给用户心理造成了厌恶感,不仅影响流畅操作也给用户心理造成压力。在设计过程中应该极力避免弹出窗口。






这一点设计可以参考淘宝网的设计。






搜狐焦点细节设计盘点






淘宝网的手动筛选当输入5000-1000,系统会智能理解用户而不是只理解数字逻辑,显示结果为1000-5000区间的商品。



并且输入框还限制了输入内容只能为数字,当你输入字母或标点后光标抖动,这样不会有对话框打断用户的操作(焦点二手房的输入框是允许输入非数字的,输出结果当然也是弹出对话框)。


这种识别程序应该被设计的更有智慧,优秀的设计能默默纠正错误而用户毫无察觉。







  1. 合理的信息展现形式







简洁的页面让用户更舒服,能更好的传递想表达的信息。门户网站的首页信息密集,用户难以找到需要的内容,Hick定律告诉我们面临选择越多,用户决定的时间越长,需要辨别信息的思考也增加,同时用户耐心会降低,导致用户离开网站不会再来。



那么面对门户网站繁多的信息,合理的信息架构和内容组织就至关重要了,不仅能使网站变得简洁,还能保留信息被用户发现。










  • 巧妙的广告投放位置






如下图,搜狐焦点家居主页左侧,有四个展开信息列表,列表上层导航按钮处加入了沙发和卫浴的广告,由于导航栏要与整个左侧页面宽度对齐,所以这个广告投放巧妙地利用了导航栏多余的位置,从观众熟知的广告位脱离出来,引起观众注目增加了转化率、点击率,同样也节省了主页的空间。






搜狐焦点细节设计盘点







同样巧妙的还有亚马逊左侧全局导航的广告设计






亚马逊利用导航栏自动展开的空白出,放置了与该导航页面相关的广告,大大提升广告和用户相关性。





搜狐焦点细节设计盘点








合理的信息架构和内容组织可以大大节省页面的空间,提升页面层次感,还能提升转化率,并且最重要的是提升用户体验。



还有很多广告展示的细节,比如hover显示更多内容、随着鼠标轨迹动态展示等,都合理地利用了信息架构展示原则。








  • 焦点通的去全局导航设计







进入搜狐二手房板块,每个页面都有顶部的搜狐导航甚至是搜索框,唯一没有顶部全局导航就是焦点通的页面。焦点通是针对房产经纪人的房屋发布管理平台,由房产经纪人登录后进入。



由于使用者是房产经纪人,考虑到他们的使用场景(同时管理多个网站的帐号,只对自己发布的房源信息感兴趣,没有浏览其它网站内容的需求),所以焦点通的设计思路也是,功能工具化、页面差异化、尽量简洁页面,去除一切不需要的信息,这就是去除全局导航的关键原因。








搜狐焦点细节设计盘点







设计网页功能应该充分考虑用户使用场景,了解用户真实需求才能有的放矢,否则再华丽的设计也会是徒劳无益。







评论

热度(1)

  1. sara.liuawoke|man 转载了此文字
    细节决定成败呀