全新的聊天对话交互方式—Parallel Chat案例学习【UXRen译#201】

作者:Daniel Korpai    | 翻译:Stella 审校:惜惜

 

引言:作为一款社交APP,颠覆了传统的聊天界面。在Parellel Chat上,用户可以在多个聊天中自由切换,并且在聊天过程中便捷地插入附件。

发信息可能是2017年最常用的沟通方式。无论是在上下班途中,在学校,在工作中,还是躺在家里的沙发上,我们几乎随时随地在聊天。研究表明,Messenger和Whatsapp每天处理的信息超过600亿条。

 

一、接受挑战

因为在移动设备上发消息与我的生活息息相关,所以我决定参加UpLabs的挑战。这个挑战的要求是为app或网站设计聊天的交互流程,且必须满足以下几点:

  • 聊天界面必须打破无聊的常规
  • 能方便快捷地添加附件,且不会影响聊天进程
  • 可以在多个聊天中自由切换
  • 是独一无二的设计,也必须解决当下我们面临的体验问题

 

二、挖掘核心痛点

我是伴随着计算机和互联网发展而成长的“Y一代”,所以几乎整天都沉迷在手机上。虽然这可能是个坏习惯,但也正因如此,我才能发现在用手机聊天时,平常人不太会注意到的体验细节问题。

你一定很熟悉这种场景,当聊天对象把一个问题接着一个地抛给你时,你需要指明你正在解答的是哪个问题。这不仅放慢了聊天的速度,也容易导致极大的误会。

这里该回答哪个问题?也许是花5天的时间游遍巴黎,再用3天的时间休息,也许她应该订5天的酒店,其中3天观光,2天只是放松…在这个场景中,我们不知道回答的是哪个问题。

在手机上发信息的另一大难题是,当你同时与多人聊天时,你必须先回到聊天列表,选择其他的聊天会话,然后才能输入聊天内容。

所以我在这个挑战中要解决两个关键问题:

  1. 如何在同时收到多个问题时,指出回答对应的是哪个问题?
  2. 如何不用回到列表重新选择,就能够在多个对话中快速切换?

 

三、设计思路

我需要用一个动态原型来演示这个问题的解决方案,但是在制作动态原型之前,我会先在Sketch里进行设计。

在设计过程中,我想打造一个用户熟悉的,与当下最流行的社交APP类似的聊天界面。我不想设计出一款对潜在的用户来说是完全陌生的、全新的聊天界面,因为这会让使用产品的难度加大,并且难以照顾到细节问题。

为了让聊天界面既给人熟悉的感觉,又能用独特的设计语言来解决问题,我把时下最流行的几款社交APP(例如:iMessage,Messenger和Skype)的元素以一种美观且协调的方式组合起来。

 

四、原型展示

在画原型时,我的目的是使用简短,快速且有趣的动画(主要是跳转的动画),来演示出迅速、即时响应和准确的聊天界面交互方式。

GIF图

 

第一个问题的解决方案:

  • 受iMessage中贴图的拖拽方式的启发,我设计了一个操作方式,即让用户可以直接把消息拖拽到对话中,这样就可以把回复放到对应的问题下方了。

 

第二个问题的解决方案:

  • 我设计了一个解决方案,即你可以通过简单的滑动,在最近的会话中进行切换,也可以从app顶部向下滑动以方便选择正在与你聊天的人。

 

五、结语

这个挑战项目给了我非常大的动力,让我更多关注到每天都会面对的微小的设计问题。我相信我们不能在没有质疑、也没有改进的情况下,就满足于当前现有的解决方式,即便这个质疑与改进的过程充满了艰辛,也可能会失败多次,但有些事情终究是值得坚持的。

 

互动评论精选

  • JasonCK:
    非常好的设计。我很喜欢拖拽回复消息的方式,但是体验了几次之后发现一个问题,如果你可以拖拽消息放到任何会话下面,这是否会扰乱聊天的时间线?人们可以随意地插入之前所没有的消息吗?我的想法是当人们输入“?”时,比如“晚餐你想吃什么?”,它会被确认为一个问题,你可以点击它来回答。
  • jonathan brazeau:
    你的主意不错。但关于你的解决方案,仍有些问题需要澄清。如果你想回复任何消息,好的做法应该是直接单击来回复。虽然我也不知道界面会设计成什么样,但总需要有个通知系统,可以看到回复的是哪条消息,且可以轻松地定位到这条消息。你还需要对回复消息这个功能做视觉设计。
  • Prashant Tyagi:
    很好的方法。但是关于第二种解决方案:应该有一个后退箭头按钮,因为如果用户不想滑动,那么可以直接返回列表,只需一次点击就可以了。
  • Jason Clauss :
    关于第二种解决方案,我看到了一个潜在的问题:太容易不小心滑动到错误的聊天会话,然后不加考虑就发出一条信息,特别是如果你没有给他们非常鲜明的聊天标记。例如,你最不想告诉你的老板:“我一整天都在想你。等不及今晚见你了。或者发给你的同事鲍勃,“嘿,伙计,我觉得鲍勃有酗酒问题。”

 

看完这篇文章,你有什么想法呢?欢迎讨论!审校者惜惜列了2个问题,试着来解答一下吧~

(你可以在本文页面底部的评论区进行评论,无需注册和登录)

  • 除了作者的方案,你还能想出更好的方案来解决问题一吗?
  • 如果你是作者,如何解决评论一和评论二中的问题?

 

参考资料:

关于评论1和评论2 的作者回复:非常感谢你的反馈,这个问题很有帮助!如果加上一些特定的限制,我认为拖拽回复消息的解决方案会更好。例如你只能在最近的10-15条消息中使用这种类型的回复(因此你不能无限地返回并开始重构整个会话流程),而且你只能将一条消息放到所要回复的消息下面。

 


更多译文:

实战打脸:有毒的NPS净推荐值
UI/UX小白案例学习:我的停车场
手把手教你玩转VR界面设计
如何让用户初遇你的app时就一见钟情?
全部200+篇译文>>

 

申请加入UXRen翻译组>>

uxren-fanyizu-00

 


译者:Stella 审校:惜惜

作者:Daniel Korpai

原文标题:《Parallel Chat — UI/UX case study of a new chat interaction》

原文链接:https://medium.muz.li/parallel-chat-ui-ux-case-study-of-a-new-chat-interaction-7ea6779f884b

发布日期:Sep 10, 2017

版权声明:

  • 本文版权归:UXRen翻译组 所有;
  • 转载带有“UXRen译”抬头的翻译文章,文章标题必须保留“UXRen译”字样;
  • 转载文中必须保留:“UXRen翻译组”、“作者”、“译者”及“审校者”信息;
  • 转载文末必须保留本译文网页链接地址;
  • 如未遵照上述规则转载,视为侵权,UXRen社区保留随时追责的权利。

 

 
UXRen公众账号 关注UXRen微信公众号(cnUXRen)

UXRen社区欢迎各界用户体验从业者及学生投稿优质原创文章。投稿请关注UXRen社区公众账cnUXRen(上面有二维码)留言“我要投稿”,小编会及时与您取得联系。


版权声明:除转载文章外,本站所有文章版权归UXRen社区所有,转载请注明出处:UXRen社区,并保留本站原文链接地址。本站部分文章来自互联网及公开渠道,如有侵权请及时联系我们。邮箱:contact@13tech.com.cn

您可能还喜欢...

发表评论

电子邮件地址不会被公开。