• 《一目了然——WEB软件显性设计之路》读书笔记


    《一目了然——WEB软件显性设计之路》读书笔记
    第二章 理解用户,然后忽略他们
    只会用20%左右的软件功能。
    只会用一种操作模式,并且坚持。
    养成了自己对软件工作原理的理解。

    讽刺的是,用户往往希望他们使用的软件有更多的额外功能,但实际上他们缺很少会去用他们。如何找到用户的真实需求呢?
    切勿假设。依靠调研。实境调查。

    设计方法:
    1、以用户为中心的设计:
    在用户群相对狭窄的起步阶段它很容易建立起核心用户。
    角色设计:
    假设你正在设计一个图片库网站,其中一个角色就应该这样描述:
    格雷格,26岁,出版设计师,来自加州圣何塞市。熟练掌握Adobe Photoshop和Illustrator软件,对WEB设计了解较少,但最近几周承接的WEB项目越来越多,几乎快不能胜任。他的设计作品(以商业杂志和宣传册广告居多)曾多次获奖。他习惯于使用图片库网站,尤其是Getty Images,曾经常在上面买一些高清晰的图片。他对这类网站的最大不满是从成百上千张图片中找到最需要的很费时间。
    这份简单的对假象用户格雷格的描述揭示了几个关键点。首先,格雷格是电脑和WEB的熟练用户,并且希望更多地了解WEB设计。其次,作为项目承接人,他的时间有限,从海量图片库中搜寻所需的挫折感较强。第三,他需要高质量图片,以便能继续获奖。

    2、以活动为中心的设计:
    很多产品并非由于深入理解用户而伟大,而是深入理解认人的行为。比如ipod就是在非充分理解用户的情况下设计的。有一个概念是如果我们只关注某个人,给这些人带来了好处,付出的代价就是损害了其他人。但理解活动本身就能够引领所构建的产品不只支持一部分人,而是服务大众。
    任务是这样的一种情况,它有单一而具体的目标,比如“回复这封电子邮件”。活动则是更大的一个集合,它由一些聚合在一起的任务组成的,比如“处理今天的邮件”这样的活动意味着阅读邮件,回复,查找信息,有时拷贝和黏贴到邮件,检查日历安排以及其他一些关联任务。
    任务流程表:首页——产品分类——台灯目录——银质夹式金属台灯——购物车——结账离开。

    撰写用例:
    用例可以从较高层面上描述软件被应用的大致场景,或者详细描述屏幕上发生的每一个操作和用户如何与界面进行交互。
    例子:写推荐
    完成初稿:
    步骤1:用户点击“写推荐”文字链接,立即就在下面出现了一个很短的表单。技术说明:这个表格是隐藏在一个DIV中的,代码会附加在页面底部。
    步骤2:用户完成推荐。
    步骤3:用户点击OK按钮提交表单
    步骤4:点击“关闭”离开(可选)

    撰写特例:(主要用例中未涉及到,但会发生的次级用例)
    最终版本:
    步骤1:用户点击些推荐文字链接,立即就在下面出现了一个很短的表单。技术说明:这个表格是隐藏在一个DIV中的,带吗会附加在页面底部。表单展开后,该文字链变成“关闭”链接。
    步骤2:用户完成推荐。
    步骤3:用户点击“OK”按钮提交推荐,并在表单上方显示成功信息。
    步骤4:用户点击“关闭”链接关闭表单。
    特例:
    步骤3a:用户点击“关闭”链接而未完成表单。技术说明:这类似于“退出”动作,输入的数据将消失且表单隐藏。但因为DIV(层)是依据隐藏和显示来判断,因而默认这些数据仍将保留,待用户二次点击“写推荐”时会重新出现。

    自动聚焦(Auto-focus):输入框的自动聚焦。

    第三章:够用就好
    给产品做减法:坚持做最重要的事情,好的创意可以搁置一旁。留下你认为产品应该拥有的,然后砍去一半,把功能削减到只剩下最最重要的为止,如此循环。
    去掉页面上一半的文字,在剩余的文字再去掉一半。

    非必要性测试:
    该功能具有助于提升用户完成某项非常重要任务的能力吗?

    60秒期限:
    给你60秒的时间,你会选择去掉哪些功能?

    第四章:支持用户的心智模型
    心智模型:换句话说就是我们通过自身的经验以及在现有知识的基础上对新事物加以吸收后认为正确的事情。他可能不是事实,通常确实如此。用户若是对一款软件感觉良好,就会去理解他。把软件做到尽可能地简单易于理解——即便那些理解完全是错误的,就做到了显性设计。

    比如删除功能。在现在生活中(心智模型),垃圾桶不会问我是否确认要扔掉,但是我能够经常从垃圾桶中挑出些东西。

    界面诊断:将实现模型的设计转变为心智模型。
    例子:树形图
    “高级用户更精通于使用树形图,如果你的软件面向普通用户,不要使用树形图。”
    抛弃树形图,选择层叠列表吧。

    在制作线框图时,请密切注意下述三点,我们称之为3R:
    Requirements:
    Reduction:
    Regularity:

    原型本质上是线框图的交互版本,其他人可以借此看到如何互动,比如如何在网页间导航,一些特定应用如拖拽效果的购物车如何表现等。原型可以有不同的质量度,制作方式,这些无关紧要,重要的是要在合理的精确度内揭示产品如何工作。
    原型方便在做深入调整前就收集反馈。
    纸质原型、HTML原型、点进原型、Flash原型。

    易用性测试:
    缺失浏览器自测:脱离浏览器的功能进行测试,尝试操作一些任务。(导航要做到能够不需要前进、后退按钮。)
    5秒钟测试:列出特别需要清晰简明的页面和应用,在不同窗口或者打印出来交给用户。每次一张地给用户看,持续5秒钟,并让他们记下所看到的一切内容。
    访谈测试:3-8名用户持续数天,或者2-3名用户一个上午。开始之前,列出用户要完成任务的列表,准备相应的实验室,一间可以开展访谈的房间,最好还有录屏工具。
    招募测试者:在网站放通知,邀请用户参与。
    实境可用性测试:访谈测试存在一个弊端,用户是以批判的态度参与测试的,这会影响到测试结果的真实性。

    第5章 让菜鸟即刻上路
    中级用户才是最庞大的使用群体。
    快速上路:
    欢迎界面、小提示、有效利用空白。

    指导性暗示:当页面中出现提示信息(如一行对用户交互后结果的说明)时,指导性文字应以小字号出现,小于该页面的主流字号,并且紧邻他正说明的交互要素。
    1、当表单需要特定数据类型,而用户又不是十分清楚时。
    2、当需要用户输入特定格式的数值(如”123456-A“时)
    3、当对操作结果不清楚或不知如何操作
    当表单域带有默认数值时,该默认数值应当以半灰色字显示。

    界面诊断:应用指示性设计
    例子:注册页面的完成按钮,可以考虑在所有步骤均完成后才可点击,以减少挫折感。

    选择合适的默认值:
    用户并非开发人员所想象的那样希望自行配置和定制软件。
    不要强迫用户在每一步都不得不做决定,你可以为用户做决定,提高他们的效率。

    信息设计:
    用户搜寻信息的四种模式及其设计策略。
    1、了解型:在这种搜索方式中,用户了解他们要找什么,也知道与之搭配的关键词。支持这种信息搜寻方式的最典型方法是导航、索引和搜索功能。
    2、探索型:对于探索性搜索,用户可能知道他们要找的东西,但可能不知道与之搭配的关键词。在这种情况下,现实相关信息对用户就是莫大的帮助,因为他加快了用户找到合适关键词并成为了解型的步伐。
    3、不知道型:这种类型的用户可能认为他们需要的是这类东西,但事实上搜索的却是另一样东西,或者他们只是在网上漫无目的地瞎逛。对于这种模式,提供链接到更详尽信息的短小精练的提示能减少用户浏览错误信息的时间。
    4、重新搜寻型:这种类型适用于那些常识搜寻之前已经找到信息的用户,最简单的办法就是尽可能地让用户标注他们喜欢的页面或者记录最近的活动。

    卡片分类:用来决策一些易于理解的导航。
    最简单的应用到软件的卡片分类法是索引分类,即在卡片上写下所有计划构建的功能,然后把它们交给一些合适的用户,由他们根据自己的判断决定这些功能应如何组织。

    重复利用欢迎界面。
    使用一键点击。

    当我们设计软件时,应当关注有哪些类似的模型或相关应用。

    提供帮助:
    与直觉相悖的是,其实只有专家用户才最喜欢查阅帮助文档。初级用户和中级用户极少会挖掘或搜索现成的帮助文档。大多数用户希望帮助信息是现成的,不需要找就能得到。

    第6章 巧妙应对出错
    解决出错最好的方式就是阻止它们发生。
    poka-yoke设备:任何用来预防错误的设施都可以成为poka-yoke设备。

    预防型:在错误产生之前就组织它,比如水槽边上的出水洞。大问题、小修补。消除错误发生的可能性。

    检查型:嵌入式验证。在页面中由Javascript来处理,对用户提交的信息提供实时的检验以确认其正确性。

    把错误转化为机会:举例说明:当用户用Squidoo搜索无结果时,Squidoo会把错误转化为机会,他鼓励用户自己创造该条记录。


    摒弃模式化:
    无模态:允许用户在打开的对话框中更改设置。
    文档模式:屏蔽一切操作,用户可以切换到其他软件或者软件的其他文档。
    应用模式:屏蔽一切操作,用户可以切换到其他软件。
    尽量少用Alert进行提示(应用模式),而是提供用户直接改错的方法。

    如何应用无模态模式:
    应用撤销功能(避免了用户必须仔细选择是否),不再询问用户是否确认。并有效提示用户如何撤销。

    嵌入展开的模式:适合FAQ

    设计宽容的软件:37singals公司设计的另一款软件写字板软件,用一种独特的方式来处理用户的最严重操作:全部删除。在某个写字板被删除后,用户会收到一条提示邮件,邮件中包含撤下操作的连接,在7天内有效。

    第7章 一致性设计
    视觉层次:突出重点。标题字体稍大。

    比例:尽量减少图形部分,为用户的交互要素留出足够的空间。

    对齐:行距、左右对齐。

    排版:
        首先,不要在不同界面中更换字体。选择一种字体,然后一直用它。这是保持Web连贯性的最简单方法。
        第二,为页面上标题之类特殊的元素选择一种字体,为其他的内容选择另一种字体。两者之间必须有明显的区别。
        第三,不要使用三种以上的字体。
        最后,限制字号和字色。标题、正文、连接、已点击过的连接和未点击过的链接等分别有自己的颜色,然后在每个页面都使用同样的设置。

    空间记忆:
        首先,用户必须知道页面上都有哪些东西。
        第二,他必须知道这些东西分布在什么地方以及彼此之间的联系。
        最后,他必须知道鼠标所在的位置与之之间的关系。

    设计模式:把界面的一切元素联系起来。帮助用户在已有的软件的使用经验基础上学习使用新软件。
        强烈推荐《Designing Interfaces》
        设计模式库:www.designinginterfaces.com developers.yahoo.com/ypatterns
       
    聪明的不一致:比如推荐图书根据用户的不同习惯而改变比较好。

    平衡无规则性:
    颜色:当你决定界面使用何种颜色时,请为那些需要突出显示的元素准备一到两种附加颜色。只要确保对比色能与网站其他部分的颜色搭配好就可以了。
    尺寸:如果你用尺寸来突出页面原色,请确保页与页之间的尺寸增幅一致,这种一致能让用户在使用软件时确信大尺寸等同于很重要。

    过程向导:用链接代替文字。

    第8章 精简与优化
    不断地改进精简视同为简洁的唯一途径。

    一、清理页面:
    降低图形的比例、保持结构化图形层的最小化。

    删除一些单词:
        将说明文字移到“What's this”的帮助文档链接中。
        生动、简短地描写。我们几乎不可能通过文字吸引用户的注意力。
        避免自卖自夸:多用截图、立即尝试按钮、概括的收尾语、压缩视频连接。
        利用开关词代替大量的文字。

    用户查找信息的能力,在使用空白多的页面上要次于密度较高的页面。而从美学上来说,空白适中的页面更美观。

    空白可以很好地对页面进行分割,而不必依赖于图形。

    二、清理任务流程
    清理任务流程并不难,只需在使用软件过程中,检查所有操作是否合理即可。

    记下办理业务时所经历的每个页面的所有事项,并列成清单,然后给自己60秒钟的时间,勾掉你认为可以排除的事项并将其移至一个新的列表,保存下来以备后用。

    做完这步后,将完成业务所需的页面列成表单记录下来,检查这些页面能否被合并。

    检查一下是否能创建从一个页面切换到另一个页面的快捷方式。

    最后,在允许(或需要)编辑的页面上,修改设计以使编辑能够以内嵌的方式实现,而不是让用户在编辑页面时编辑,完了再回到只读的显示页面查看。

    第9章 改良比创新重要
    让软件友好一点:
        不要打断用户的操作流程。
        让用户快速完成。
        不要强迫用户理解与操作无关的事情。
    2010-12-13 22:14发表 
  • 相关阅读:
    iphone自动识别电话以及变色的解决
    chrome浏览器模拟微信
    获取一个图片的真实宽高
    iview插件
    vue aixos请求json
    ajax请求文件流下载
    检测打开设备
    轮播图
    rem适配
    easyui月份插件如何监听
  • 原文地址:https://www.cnblogs.com/carl2380/p/2178672.html
Copyright © 2020-2023  润新知