信息扁平化

前几天曾将信息扁平化列为五条手机交互设计原则其中之一,未查找到相关内容,个人尝试从概念、缘由和实现方法等方面分析。

概念

较少的信息层级关系,用户通过操作跳转较少的页面即能找到想要的信息。

缘由

1.信息结构以深度为主。从淘宝UED的文章中看出web注重深广度平衡

在整个树形结构中,链接的层数被称为网页链接的深度(depth)。而在树形结构里,最底层页面包含的页面总数被称为网页链接的广度(breadth)。

但此条对于淘宝的网页和手机客户端并不适用,这两者实现的功能是:选择商品种类→找到商品→购买→付款,信息框架中最底层的界面大多扭转到付款界面,并不是正常的树型结构。此概念对于豆瓣到挺适用,网页结构是树型,首页是树根,小组中的话题、电影评论和书评是树枝;而淘宝网页是倒树型结构,热门商品、搜索入口和商品目录是树枝,付款是树根。

由于手机屏幕的限制,淘宝随身购的主界面只有选择商品和搜索商品,较弱的广度入口,信息深度更为明显。

2.每跳转一次界面,都会损失用户流量。随身购的目的在于引导用户查找到想要的商品并且支付,如完成操作要跳转5个界面比跳转7个界面的订单量会更多。

3.界面跳转比网页复杂。手机客户端中没有像面包屑那样显示路径的功能,必须一层层返回。

ds_photosscreens

如在iPhone中查看照片,从照片返回到照片目录需要点击两次导航栏上的返回。

mockup_2

从上图的手机客户端的信息结构示意图中可以看出,从“界面C”跳转到“界面I”的路径为:C→B→A→HOME→H→I。

另外,手机客户端没有像web那样操作方便的导航方式,如目录、树状导航和面包屑等。如iPhone的照片目录与照片显示在两个界面中,在web的照片目录和照片可以显示在同一个界面中。如树状导航显示在手机界面中,会导致页面过长。

ui_navbarmultisegment

↑如在iPhone程序中使用上图的面包屑,会导致如下几个问题:

  • 占据标题的显示空间。
  • 无法显示单个内容的状态。
  • 面包屑越多,显示区域越少,也就难以点击。
  • 难以表示用户所处信息的深度。

以上的问题与web面包屑的作用相违背的,如果担心用户容易在程序中迷失,不用“back”按钮而才采用面包屑路径,这可能就意味着用户进入深层次的信息才能找到他们想要的,这时更应该做的是减少信息的深度。

方法

iPhone tab

增加tab。将并列的信息显示在同一个界面中,减少页面的跳转。

mockup_4

从“界面C”跳转到“界面I”的路径为:C→B→A→H→I。此时A是真正意义上的HOME界面,C的层次由原先的第4级变为第3级。

mockup_7

流程的快捷通道。在界面A中增加达到C的快捷方式,虽然在逻辑上C还是第4级,但是对于用户而言,C是第3级。如购买电影票的流程是:选择电影(A)→选择电影院(B)→选择场次(C),如果在A界面中显示,XX电影院正在热映《诸神之战》,点击之后直接跳转到选择场次(C)。

mockup_8

区分流程的主次。假设数据显示8成以上的用户都选择使用快捷方式,那么B就不是流程中的必要环节,而是次要的流程,那么原先第4级的C界面变为第3级。
mockup_6

提取重要信息。第3级有3个界面BFE,用户要查看这3个界面才能决定哪个界面是需要的,在逻辑上BFE是并列的,如能提取BEF的重要信息,用户在A界面就能决定选择第3级的哪个界面。假设A为选择电影界面,BEF是各个电影的放映场次及电影票价,如在A界面中即能得知BEF电影的最低票价,就能帮助用户省去对比票价的过程。这种做法并不能使得信息扁平化,BEF属于广度的信息,如能从用户的角度区分BEF的重要性,同样能压扁广度,减少点击的次数。如果用户选择了B流程,B流程也是最简单的,跳转2次界面就能完成任务,而E和F跳转4次才能完成同样的任务,那么也能实现信息扁平化的目的。

信息扁平化》有8个想法

  1. 信息扁平化为什么还以深度为主呢?是不是有些矛盾?
    传统网站和手机上的网站信息架构都应该是采用树形结构吧,只不过结构之间的跳转方式不同。
    手机上的web和客户端,更多采取单线程的跳转方式。
    我觉得你提出的解决方法,简化为一句话,就是:如何方便的实现页面之间的跳转。
    并且这几种方法在普通的web设计中都是经常采用的。

  2. 方便跳转是信息扁平化的重要原因。

    信息扁平化讨论的重点当然是深度,是如何压扁深度。

  3. 扁平化 和深度并不矛盾

    关键是现在的wap 怎么去实现 看看现在的wap页面 还是以web的思想来设置

    现在的手机操作空间小 操作也不方便 速度也慢 如何简化怎么不去考虑

    那些栏目之类的为何不用就是js展现 所谓的导航也就解决了

  4. 信息量真大,搬个小凳子认真看。一直在想国内移动互联网,是走应用模式呢,还是浏览器模式呢

  5. 文中所谓的信息扁平化实际上是指减少信息的层级,减少页面的跳转吧?但我觉得在手机上未必一定合适。。。
    如果将BEF的重要信息都呈现在A页面,那A页面势必会增加大量信息,面对屏幕那么小的手机,这样做会导致的结果是:
    1.增加每个页面的长度,可能会将之前的A页面扩大一屏甚至两屏,这样用户仍然需要下拉页面翻页才能看到原本属于BEF页面的内容,这样也并不一定比让页面跳转更容易操作
    2.影响A页面本身信息的传达,将BEF页面的信息放到A页面,那A页面将没有重点,当会让用户当在web上一个页面呈现过多信息,用户都容易找不到北,更别说在一个那么小的屏幕上了。。。

评论已关闭。