美文网首页互联网产品思考@产品设计
设计一个地道的海外购物网站

设计一个地道的海外购物网站

作者: 晶晶__ | 来源:发表于2018-01-04 17:39 被阅读160次

    西方人的大脑和亚洲人真有不同吗?在设计面对西方用户的电商网站过程中,要注意哪些设计原则?

    从8月份接手京东海外站设计项目,对海外用户的购物习惯开始逐渐了解,分享给大家。

    西方人尤其关注场景中的前景物体,而东亚人会在理解整个场景上花费更多的时间。—— 密歇根大学

    也就是说,西方人在处理琳琅满目的复杂界面时会非常吃力,认知负担重;而对于东亚人,在面对眼花缭乱的界面时,能相对容易从复杂界面中筛选出自己所需信息的。因此 “ 简洁 ” 对于西方用户来说,是非常重要的。从信息提供、到交互互动、再到视觉体现上,都要严格遵守这个原则。接下来我们看看如何围绕 “ 简洁 ” 进行界面设计。

    一. 横向信息维度一致

    复杂的界面表达会消耗用户过多的精力,每一种样式的切换,都意味着用户需从头认知一遍看到的信息。试想在商场中,同样的时间段内,高频率的穿梭在各装修店铺 VS 在一家店逛的感受差异,那种情况精力消耗更大?

    因此,在界面的表达中,我们建议一屏内的设计表达应相对稳定,遵循相同的规则和相似的表达样式:

    . 一横栏只展示一个维度的内容,尽量避免出现一行两个及以上维度。

    . 一通栏内的单元格大小,可采用均等,或大小结合的样式,但不建议超过两种尺寸。

    Wal-Mart、Target首页


    二. 清晰的模块名称

    互联网用户的注意力是很短暂的,在视线扫过的过程中,如果没有第一时间获得/理解界面表达的信息,很可能这块信息就会被用户忽略。因此从信息名称、内容呈现都应该有非常明确的表达。

    我们可以看到海外网站的模块名称都会使用非常清晰的表述,或者说不会用太多的隐喻、比喻来包装文字。比如国内你会看到 “ 爱逛街 ”、“精致有格”等;而国外不管是名称还是维度都会更明确, 比如 “ Deals on Amazon Devices(亚马逊设备的交易)” 、“Why shop on Spring(为什么在Spring购买)。

    Amazon 标题 服务保障标题


    三. 明确的点击指引

    操作前可预期是交互设计非常重要的原则之一。不要指望用户会像探索游戏、完成重要资金操作一样,在你的界面上不断尝试,模糊或者没把握的操作,会被用户放弃。

    恩,哪里可以点,点了会去哪里,一定要说清楚了。

    点击入口指引


    四. 入口图简洁有预期,突出商品

    海外电商以展示商品本身为主,直观让用户感知到,这个入口会带给自己哪些商品的售卖。新的海外网站改版中,慢慢融入了场景的概念,但在展示场景中,仍然会突出商品本身的展示。

    商品入口图

    五. 简要、明确、踏实的反馈很重要,自助、高效也许并不那么适用

    国内常见的售后操作比如退换货 ,大多采用表单自助提交的方式完成。而对于外国用户来说,更习惯问答式客服处理。他们也能接受自助的方式,但是会担心自己因为信息填写错误,而影响处理结果;所以更倾向于人工确定的服务,客服电话或邮件往来、在线问答等。比如,Amazon都是通过问答式邮件或电话解决所有问题。


    六. 不同语言版本文字长度兼容性

    英文的HISTORY,翻译成俄文就变成了История просмотров。如果你的站点需要提供多语言版本,在样式设计上要考虑横向空间的扩展度。

    再比如价格,美元的 ¥100 到了韩币就是 ₩106064 ,而卢布是 5724.25 ;所以不建议实际价格和划线价放在一行处理。


    七. 清楚各国禁忌(如动物形象等)

    这一点很少遇到但非常重要。比如京东印尼站,主形象没有延续狗的形象而是用了马,就是因为狗在印尼是禁忌的动物。


    八. 根据网站本身特点差异化运营

    - 欧美网站会更重单品,轻店铺、品牌。但对于新入驻欧美的国内电商品牌,集中展示品牌有利于口碑的建立。

    - 欧美网站的优惠活动多以直降、优惠码这种简单的形式存在,优惠券的形式在线下使用较多,线上几乎很少看到。但近期也会看到亚马逊等网站也开始尝试领优惠券的方式,这种形式欧美用户是否会很好接受,还待研究。

    Amazon 优惠券

    以上就是做海外网站几个核心要点啦~

    补充两篇相关文章,大家可以看看 《UI国际化》《跨境电商国际差异》

    相关文章

      网友评论

        本文标题:设计一个地道的海外购物网站

        本文链接:https://www.haomeiwen.com/subject/jbrdwxtx.html