从滚动条消失看细节设计

我相信所有设计师都是注重细节的!即使有时迫于种种原因,无法达到像期望般完美,但心中一定有份纠结的坚持。

最近的项目中,给选择器设计备选列表,发现了一个“由细节引发的细节问题”。下图是示例。很简单,在一个固定区域内做多选,当有很多备选时,滚动显示更多内容。(原本意图

图A:原本的意图,和期望达到的效果

但实现出来之后,发现一个问题:滚动条被隐藏掉了。只有当在备选内容区滚动鼠标时,滚动条才会显示出来。这会影响到用户对这个功能区块的认知,根本察觉不到还有更多内容。(出乎预料

图B:滚动条不见了,这可不是我们期望的

更多

可读性:优化文本长度

Readability: the Optimal Line Length
Baymard.com版权所有
作者:Christian Holst
译者:UCD翻译小组波希米亚
原文地址: http://baymard.com/blog/line-length-readability

译者序:直接捞干的来了!

提升文本可读性的关键之一,就是让每行文本承载合适的字数。这不仅仅是设计一下文本宽度的问题,它也应该是一个易读性的问题。

文本最佳长度是每行承载50-60字符,包括空格(“Typographie”, E. Ruder)。也有其他资料建议不超过75字/行也可以接受。但你一定会问,不按这样的标准做又会怎样?

  • 太长-如果一行里文字太多,用户眼球很难长时间聚焦文本。因为文本长度过长会让人很难注意到段落的起点和终点。此外,对于这么大块文本来说,也很难对当前行进行继续阅读。(译者注:稍一走神儿,就找不到读到哪了。都有过这样的经历吧?)
  • 太短-如果一行里文字太少,眼睛要不停的来回扫视,破坏了阅读节奏。同时,每行文本太短也样会让人觉得紧张,这行没看完就跳到下一行去了(很可能一些重要的词会被跳过)。

原本跳到下一行文字时,潜意识里是会那么有点小亢奋(只要别太频繁,原因见上面两点)。因此在每一行的开头,读者的精力都很集中,但这种专注会逐渐消褪,可能还没等把这行看完(“Typographie”, E. Ruder)。

更多

10条可用性方面的启发

译序:这篇文章是可用性大师 Jakob Nielsen 在10年前总结的,到今天仍然受用。通过这个时间跨度,可以得出,可用性话题不是某个时代的产物,一些研究经验时至今日也依然值得借鉴。看似短小的10条启示中,融入了大量项目经验,这些内容也将继续指导设计者,在新的互联网技术推动下,创造出更加高质量的产品。

不要把它当作教程来看,它只是思想精髓的提炼。在各式各样的项目中,会遇到千奇百怪的情况,会跟各种角色的人一同协作完成目标。只有当大家达成共识,才能更好地提高效率,这10条启发正是纽带。

其实,这是10条关于界面设计的基本准则。之所以称之为“启发”,是因为它们来源于实际经验,而非枯燥的理论知识。

系统状态的可见性

应始终让用户了解当前发生的事情,并在恰当的时机给予反馈。

系统与现实世界的匹配

讲用户听得懂的语言,无论单词、短语还是阐述一些概念,把术语留给机器去读。遵循现实世界的准则,让信息表现的自然、符合逻辑。

用户控制和行动自由

用户在功能选择上犯错是常有的事儿,这就需要为其提供一个“紧急出口”,不必再通过额外的对话就能离开那里。提供撤销和重做功能。

更多

用户体验案例研究:设计微博应用

UX Case Study: Designing a user-focused web app
Brian Cray版权所有
作者:Brian Cray
译者:UCD翻译小组波希米亚
原文地址: http://briancray.com/2010/01/26/ux-case-study-designing-user-focused-web-app/

这篇文章记录了Nearby Tweets改版的完整设计过程。Web开发者和商家期望借此获取些灵感。用户则更有兴趣找寻这些设计中所蕴藏的东西。当然,我希望能在文章结尾了解到你的想法和反馈!OK,我们开始吧。

故事的起因是这样地…

这一切开始于对Nearby Tweets的第一次迭代,目的是让当地的人与人、商家与商家之间能够通过一种简单的形式相互取得联系。

但产品开发向来不可能十全十美,只有不断迭代——产品好坏取决于用户认可。因此,借Uservoice的机会得尽我所能快地跟用户接触。通过Uservoice,用户可以针对Nearby Tweets的改版进行投票。

更多

信息分类是为了更好的索引

你不得不承认,今天网络发展之迅速,信息流动速度之快、量之大,是我们不曾考虑过的,但现在它就真真切切地摆在我们面前。如何接纳信息,怎么处理、消化它们成了互联网用户要花精力去解决的大问题。

“好记性不如烂笔头”,儿时长辈总是如是教导我们,但这条法则放在今天,未必有些跟不上节奏。在这个信息爆炸的时代,想把看到听到的事情都一一记下,哪里来得及;机械的记忆并不能帮你解决“组织”问题,学会如何管理信息才是王道(当然,这里说的“组织”不是指Organization)。如果你已经能熟练地搜索引擎,这已经是一个好的开始,因为你发现动态地使用关键字,可以更快地找到想要的信息。而关键字就是一种索引标记。

如果这么说太抽象,那来想想你是如何为IM、SNS中好友进行分类的。首先考虑下为什么要给他们分类?其次,怎么分类?5-4-3-2-1,时间到!给好友分类是为了更快地在众多联系人中找到他,节省时间。在寻找联系人的过程中,分类扮演了索引的角色,它是帮你完成定位的一条捷径。再来说说我是如何分类的:我把所有联系人按公司、学校进行划分。刚参加工作时也曾按圈子把公司人分类,后来发现这么分太泛泛,我得一直记得某个人是什么角色,而相对来说,公司属性更明显且便于记忆。同学就不用说了,如果想再细分,学校就是最好的天然属性。这么看,公司、学校就是一种索引标记。

图书如何分类?细心的你可能发现现在很多书封面的角落里都会注上“上架参考:经济类”,这是为了让此书出现在书店合适的分类系统中,让读者更容易发现它。这是出版方和作者有意对图书进行的索引。这个分类产生的过程是:先有内容,后有分类。这里要联想到,在写博客时,顺序也应当如此,“出版”发布前,给它个“上架参考”,当然这个参考就是博客的分类目录、标签(Tags)了。分类目录是文章的范围,标签(Tags)则是经提炼后的内容关键字,是对标题的补充,帮助记忆。所以,标签(Tags)就是一种索引标记。

电影(DVD)、歌曲(CD)本身所带有的属性(如出版公司、导演、演员、歌手、歌曲名等)已经足够标识这个产品,再使用Tags打上标签对识别这个产品就没有太大意义了。有天然属性的信息,就用这些属性做索引,免得“脱裤子放屁——费二遍事”。

值得一提的是,分类并不单单是给人看的,同时也是给机器看的。用户不断地抽取、提炼核心关键字给计算机学习,让机器去做分类、索引这样的重复工作,帮助用户提高效率。