欢迎访问 夜阑小雨 我的学习碎片档案,这里记录了我的学习内容和工作中经验,希望给您带去帮助。

移动电子商务可用性:主页和导航

flash 夜阑小雨 809℃ 0评论

主页设计

布局

传统的网站经常是充斥着图片、广告展示区域Flash广告、AJAX效果、多层导航菜单和许多按钮。如果用智能手机访问传统网站,通常需要像使用小孔查看地图那样的放大缩小页面。也需要很长的时间来读取这些大容量的内容。看一下Sephora和Target的传统主页在iPhone上的表现:

sephorahome

target-home

现在看一下Tickets.com和Barnes and Noble的Web主页和经过优化过的移动站点主页:

ticketscom1

bnmobi3

为了在小屏幕上提高可用性,你将会注意到大多数移动网站主页都限制图片的使用,不包含传统的导航菜单。Best Buy就避免使用完整的导航,仅显示一个搜索框、门店选择和客服电话:

bbmo

Barnes和Noble的移动主页也配置了搜索功能和门店位置选择功能,但并没有提供商品的目录导航,取而代之的是客户服务选项和Top 10销售列表。对于移动端来说,合乎情理的是“人们通常是搜索而非浏览”,而搜索者更倾向于使用搜索框。这是一个合理的假设,特别是当输入很困难时和产品的名称或作者名很长时。

另外一个使用“瘦”导航菜单的方式是像Moosejaw的老网站和 Sephora的网站那样:

oldjaw

msophora

很少情况你会看到在移动网站主页上会有产品推销。但Amazon和Moosejaw的新站就是这么做的,但总体来说图片很小,布局也很简单:

moamazon

momoose

Moosejaw原来的主页相当温和且实用,不符合Moosejaw它狂野的风格。新的主页设计的更加个性化,增加了更多的娱乐内容而不仅仅呈现出产品目录。就像他们一贯的口号传达的“假如你很无趣”,这也是Moosejaw主要的消费群高中生和大学生所崇尚的特征。

boredjaw

其实并没有捷径能指导你做出完美的移动网站主页(仅提供搜索和必要的客服链接,仅提供简单菜单和精简推销广告),但必须确保它有清晰的信息架构和仅提供必须的信息和工具来帮助进行搜索、产品选择和客户服务。这些对于你的移动战略至关重要。

字体/字形

许多移动设备屏幕的颜色对比很弱,并不能在白天、夜晚、车里或其他光线不足的地方提供足够清晰的视觉体验。所以要小心处理这些低对比度色彩的屏幕,避免使用暗色的背景上使用很淡颜色的字体,尤其是白色带下划线的文本。

无论是否是衬体字形,链接和其他文本如果都是大写的将很难阅读。

移动设备的浏览器通过不同的方式控制样式表。它们可能或可能不会缓存外部的样式表,也可能支持某些样式元素或不支持样式表。如果你有某些针对移动设备的特殊样式表,并没有办法来保证所有的设备都能正常显示它。所以,最好的方式是给所有的非文本方式的元素以一个文字描述,就像在为关闭图片显示功能的email客户端设计一文所提到的。

导航

菜单栏

在手机上显示菜单栏的最好方式是纵向显示,并只在首页显示顶级目录。你将不得不决定(在用户已经选择展开一个顶级目录的情况下)是否在二级导航中显示该级的展开内容或二级的分类目录,或使用一个下拉式表达,像这样:

searsmenu

在选择并展开顶级目录后的部分:

sears2

其他的像Sephora和Moosejaw的老版本使用下拉式层级式的表现方式:

oldjaw1

momoose11

这两种方式都有它们的优势和劣势。展开菜单的方式不再需要读取和滚动条,而下拉方式需要在每次选择后有更多的页面读取。如果你是为使用数字键盘输入的手机进行设计,那么下拉式的菜单更容易管理,这意味着需要更少的对应数字按钮。

无论你选择了哪种方式,请确保对触摸屏来说链接是很明显的(不要像Moosejaw的旧版本或Target的,下图)。当链接和按钮太小或太靠近时,很容易误操作。通过数字键盘直接进行导航会很有帮助。

targethome

在页面的末尾使用“返回”或“回到首页”链接返回页面顶部是很方便的,特别是当表单项比较多时。

图片导航

我不推荐使用图片导航。这有可能混淆用户,因为图片通常不是非常像可点击的链接,除非它们是产品的缩略图或按钮。此外,图片增加了页面加载时间,且图片做的标签很难阅读。就像Ralph Lauren的“Shop”标签(找不到吧?)。而且小的图片无法带来增值,只可能是对视觉造成压力。

rlmobi

标签

清晰是对于交互操作、目录和链接的标签来说是最重要的。因为页面可能加载的很慢,所以要尽可能的减少链接通往何处的歧义。Ralph Lauren的“Entertainment”(上图)就是一个不太清晰的标签实例。

面包屑

记住一个古老的建议“让链接看上去像链接”。面包屑是链接,所以他们应该看上去像链接。我发现常见的错误是在头部隐藏面包屑,且太靠近logo和使用全大写并不带下划线。Sephora的面包屑很容易被忽视,并且很容易让人混淆“Mobile Reviews”是一个标语还是一个链接(显然不是一个链接)。

sephnav

Moosejaw的老版面包屑被棕色的背景栏所隐藏,并且全部大写不带下划线。这很容易被忽略,尤其是出现在页面中心时(见上面的截图)。

Tickets.com在这点上做的不错。面包屑在顶部,字体很大。在底部,“Back to Reggae,” “Back to Concerts” and “Home.”放置的也很清晰。

targetbackto

因为不是所有的移动设备都有回退键,所以移动网站没有多余的空间留给侧边栏导航。面包屑是非常重要的元素,尤其是当目录和字母来展开到2或3层时。请记住,要让面包屑看上去像面包屑(使用下划线并用>来分隔),并且要放在每个页面的顶部或底部。

转载请注明:夜阑小雨 » 移动电子商务可用性:主页和导航

喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址