智能手机网站设计的表现!

人们越来越多地使用他们的智能手机,台式电脑的替代品,即使是活动,如购物和采购。越来越多的人摆脱台式机和手机优化的网站上购买的产品和服务,网站创建者可以使用建立的设计模式,以帮助启动一项移动电子商务项目。
有一个很好的移动电子商务的经验是相当重要的。事实上,最近的研究发现,人们有67%的可能进行购买,如果一个网站,他们已经达到了自己的手机是智能手机友好的。
电源的设计模式,他们告诉你其他设计师如何解决类似的问题,所以,你是不是总是重新发明轮子。它们还可以使您设计的方式,以满足人们的期望开发从他们使用的其他网站,他们鼓励你考虑的设计方法,你会不会想到在自己的网站。
在这篇文章中,专注于智能手机,而不是平板电脑,我们来看看设计模式和方法用于移动电子商务功能,包括以下内容:
首页页面, 网站导航, 建议搜索, 搜索结果中, 搜索过滤和排序, 产品页, 照片画廊, 购物车, 检查的帐户或作为嘉宾, 表格。
本文中的所有例子都来自运行在智能手机上的浏览器的移动网站。大多数是从大型跨部门的零售商,因为他们有大量的产品目录的功能,如搜索,过滤和排序的搜索结果,需要一个深思熟虑的方法。电子商务也有无数的本地应用程序,这些模式可以适用于他们。
(非凡的注意:订阅的粉碎电子书图书馆,并得到即时的无限访问所有粉碎图书,公布在过去和未来,包括数字版本,我们的印刷书籍。至少有24质量电子图书一年,60电子书在第一年。订阅!)
主页 在移动设备上访问时,主页的有关内容,帮助用户找到他们所寻找的。常见的模式是简单的单栏布局的特色网站或产品类别的促销和单栏列表。关键字搜索,通常包括主页,链接到商店定位器和注册形式的宣传电邮及忠诚度计划。
亚马逊和梅西的混合使用的促销内容和列表菜单中。
目标的宣传内容占用更多的屏幕空间,不是一个简单的列表,但更强的视觉冲击。threadless的使用的仪表盘模式,这是比较常见的,在本机应用程序在移动电子商务网站。
如果购物者来到你的网站快速比较价格,然后一个简单的列表模式和搜索功能可能是更可取的。如果他们是来探索促销和销售,然后由目标所采取的方式可能是比较合适的。为了回答这些问题,你需要挖掘分析,以了解消费者在您的网站正在做的。
站点范围的导航 除了使用作为主导航中心的主页,也有许多网站导航菜单大部分自己的网页中,通常会在标头中。这使购物者能够很容易地从一个网站的一部分,到另一个,而无需返回到主页。
lowe的站点范围内的菜单的每个选项的图标。百思买的菜单中有两栏布局,导航按钮,而不是列表项。lowe的菜单包括页面出现时,而百思买的页面的内容推下来的画面。
梅西的站点范围内的菜单,其中包含的子菜单选项。cvs有两列菜单的每个选项的图标。在这两种情况下,菜单被显示在页面顶部的。
正如你可以看到从上面的截图中,有几种方法来设计站点范围内的菜单。lowe的设计是简单的,和图标添加一个漂亮的视觉抛光位。事实上,其余的页面淡出到背景中,当用户选择使用的导航帮助用户专注于当前的任务。cvs似乎比较混乱中,有两列选项,每个项目都配有图标。cvs'菜单还放置的特定抽头目标彼此靠近,可呈现的触摸屏上的可用性问题。
有趣的是,大型电子商务网站通常没有太多的导航选项一次显示。他们试图平衡视觉的导航与您的网站的信息架构设计,仔细考虑的项目,应在全球导航。使用网站分析看菜单选项购物单击帮助你决定了什么应该是在菜单中。不同的设计方案进行a / b测试和可用性测试,看一个人是否有太多的选项和压倒的人,不只是建议,但必须找到最佳的解决方案 - 为您的企业和您的用户。
建议搜索 建议搜索,也被称为提前键入或自动完成,结果显示潜在的,作为购物键入几个字符。常用搜索到的条件,这是一个真正的方便购物者,特别是如果搜索词是长期的。建议搜索的一个限制是,点击虚拟键盘上错误的字符是很容易的,这将改变建议的结果。显示常见的“正确”的结果,而不是可能是有用的。另外,考虑使用一个改进的自动推荐图案键入需要输入查询,以减少的量,以最有效的方式,并利用移动带宽较慢。
office depot的网站在搜索框中:键入“draf”?带来了几种可能的结果。错误输入“拖”而不是“draf”的人谁是试图找到起草用品会导致意外的结果。攻牙到预定的相邻的信1是虚拟键盘上的常见问题。
虽然设计者人错误输入查询不能做任何事情,他们可以确保有其他的方法来得到到产品页面输入错误的结果,如钻的产品类别或站点范围内的菜单中的顶级类别的下拉列表。网站管理人员也可以罚款调整自己的搜索功能,建议“草案”查询类型为“dragt的结果。”你有能力做到这一点,将取决于您使用的搜索引擎技术。
搜索结果 用于移动电子商务网站的搜索结果:表显示和网格显示两种主要的模式。表格显示缩略图的照片和一些基本信息,如产品名称和价格在一个紧凑的行。网格显示大图片的描述性信息较少。有些网站允许消费者在这两种视图之间切换。
zappos的搜索结果中显示其一个网格,允许其产品的大照片,一个明智的选择,像鞋的销售市场。沃尔格林有一个表,其中包括在商店寻找项目,将项目添加到购物车按钮。
officemax公司要求消费者在选择一个子类别广泛的搜索字词,如“纸”。一个子类一旦被选中,结果显示为一个表。搜索的“剪刀”,其中就有更少的子类,消费者直接到表视图的结果。
有消费者选择一个子类别,可能会出现问题,如果它不清除的产品适合在一个复杂的层次结构。在的officemax公司上面的例子中,有人找他们的家用打印机为8.5×11英寸的纸张可能不知道是否在“复制”或“多用途纸激光打印纸。”一个更好的方法可能是在搜索过滤器中列出的子类别,在那里他们可以在上下文中与其它过滤器一样,“颜色”和“大小”。定期测试(每4-6个星期)具有代表性的用户,通常搜索的术语和最畅销的产品可以让您深入了解哪种方法是更好的。a / b测试也可以发现其中的一个方法是否得到更多的人的产品页面,并导致更高的转换率。
gap的网站的访问者看到一个表,显示默认情况下,看到一个网格显示的选项。请注意,差距也保持在关键字字段中的搜索字词。
峡让消费者选择如何,让他们从一个简单的扫描列表的视图放大图片查看搜索结果。差距可能保留一些产品的信息,但-例如价格-在网格显示(作为zappo的)。详细信息,如价格和颜色使它更容易为购物者确定哪些产品,他们希望了解更多有关。
保持该领域中的术语也提醒消费者他们寻找什么,并让他们很容易缩小结果的另一个词(如“红”)的搜索字词。
搜索峡为“男装t恤”需要购物的页面没有结果(未显示),并没有链接到搜索结果为“男子吨的衬衫。”间隙可以提高其搜索通过添加一个“难道你的意思吗?”的类型结果页面的问题。谷歌处理这种情况,列出“男装t恤”建议的查询,然后提交结果为“男装t恤”,如果该建议被忽略。
排序结果 结果排序,帮助消费者组织沿着一个连续的值,通常是数字的,如价格和消费者的评级结果一大套。通用接口模式进行排序的按钮和下拉菜单。
沃尔玛让消费者选择三个按钮对结果进行排序。西尔斯使用类似的方法,但与“分段控制”。javascript框架,如jquery mobile的这些应用程序接口部件更容易为设计者提供。
jc penney公司可以通过下拉菜单进行排序,稍微定制的风格,而eddie bauer的使用浏览器的默认下拉菜单。这两个触发浏览器的本地控制下拉菜单(在这些例子中,iphone选择器)。
沃尔玛的按钮之间的间距的大小和大方,让您更好的自来水的目标,不过,公平地说,沃尔玛只有三个选项,而西尔斯有四个。西尔斯列入“全部”按钮可以让购物者回到原来的结果页面,如果他们没有找到他们想要的东西后,排序。使用下拉菜单是一个比较安全的选择,因为它是现代移动浏览器的支持,并允许较长的列表的排序选项。然而,它也需要花费大量宝贵的空间。这些类型的设计权衡,可以定期检测与评估。
筛选结果 过滤器使购物者,缩小其结果的基础上的一个或多个属性,如颜色,品牌和规模。过滤器通常是组织的类型(称为面),与每个小刻面(例如下出现的几个值,颜色是一个面,和红色的一个方面是值)。通用接口模式显示过滤选项的下拉菜单,下拉列表和手风琴显示。从一个面内时,可以应用一个或多个值中选择滤波。虽然允许一个单一的搜索值超过一个方面,技术上是可行的,它带有一个更高的互动成本,并可能导致的任何结果(例如,交叉培训,成本不超过75美元的运动鞋)。
cvs使用下拉菜单中的“筛选”选项卡中进行筛选。选择一个菜单选项,将立即对结果进行筛选。jc penney公司提供了一个下拉列表中,选择过滤器和显示产品的数量相匹配的过滤器值。jc penney公司也可以在一个屏幕上,贸易是购物者点击“应用”按钮被选中多个值从一个方面。
科尔的每个过滤器类型,使用的手风琴公开了一组复选框。threadless的暴露了其搜索方面作为按钮的值。在这两个网站,选择一个过滤器值将立即筛选结果。
显示项目的数量可根据每个面值到什么样的消费者将得到每次选择提供了更大的透明度。threadless的“的方式显示所有可用的内容值占据整个屏幕,但它为消费者提供了在一目了然地查看所有的过滤提供给他们的选择。无论你采取这种方式,或者使用像科尔的手风琴很可能依赖上的方面值是多少目前对于一个给定的产品类别。如果您的
上一个:在网站上线的时候你做了什么 其实网站需要一点仪式感
下一个:手机网站建设后如何维护手机网站
惠水网站建设,惠水做网站,惠水网站设计