VR Interaction Researcher, UX Designer
JMGO VR, Shanghai China
6 Months
Designing a 3D VR home scenes & shopping experience based on spatial interaction research for next generation product.
为下一代产品设计基于空间交互研究的3D虚拟现实购物体验。
In this project, we utilized a design thinking process to research and design a home scene and shopping experience for users in a 3D interaction system, in response to the novelty and user interaction challenges of next-generation VR/XR products.
在这个项目中,我们运用设计思维研究和设计一个基于 3D 交互的主场景和购物体验,以应对下一代 VR/XR 产品的新颖性和用户交互方面的挑战。
The Process
The initial user research involved studying the user experience of VR home world & shopping and the technical aspects of spatial interaction. The findings were used to identify a problem and conceptualize a solution. Low-fidelity digital prototypes were designed for user testing and then iterated to a high-resolution, final prototype.
最初的用户研究涉及VR家居购物的用户体验研究和空间交互的技术研究。研究结果用于确定问题并构思解决方案。我们设计了低保真度数字原型进行用户测试,然后迭代到高分辨率的最终原型。
👇 How I came up with the final design
Research #1
Ergonomic Data Analysis
人体工学数据分析
To achieve a deeper and longer-lasting experience, UX design should prioritize ergonomic considerations to reduce user fatigue and improve usability.
为了达到更深度,时间更长的体验,UX 设计优先需要考虑的是符合人体工学,以降低用户疲劳,提高使用效率。
User body dimensions
体态数据
I collected anthropometric data (shown in Figure 1) on user body dimensions from four sources: the "Physical Characteristics and Age-related Changes in Chinese Urban Adults Aged 20-25 Years" [1]report released by the Sports Science Research Institute of the General Administration of Sport of China, “the Chinese national standard GB 10000-88 on adult human body dimensions”[2], "Research on Virtual Human Modeling Techniques Based on International Anthropometric Data”[3] and ”Research on defining the dimensions of kitchen work areas based on human activity domains“[4].
根据中国国家体育总局体育科学研究所发布的 《中国20-25岁城市成年人身体形态特征及年代变化特点 》,《中国GB 10000—88成年人人体尺寸标准》《基于国际人体测量学数据的虚拟人建模技术研究》以及《基于人体活动域的厨房作业区尺寸界定研究》, 我取得了用户人体工学的体态数据,如表1所示。
Table 1
Body Dimensions | Length/ cm | Eye height ratio/ % |
Body Height 身高 | 168 | 107.14% |
Eye height 眼高 | 156.8 | 100% |
Shoulder Height 肩高 | 136.7 | 87.18% |
Arm 手臂 | 73.3 | 46.74% |
Upper Arm 大臂 | 31.3 | 19.96% |
Lower Arm 小臂 | 23.69 | 15.11% |
Hand 手 | 18.31 | 11.68% |
Shoulder Width 肩宽 | 40.5 | 25.8% |
Standing body dimensions
站姿体态数据
A person with a height of 1680 mm was used to model the human body, with the shoulder joint as the rotation axis and the distance from the shoulder joint to the fingertips as the radius.
By calculation, the maximum range of upper limb operation is within a space with a radius of 720 mm, the maximum grip action is within a range of 600 mm, and the most favorable grip range is within a space with a radius of 300 mm.
The gray area in the figure represents the relatively effective range of human limb operation.
身高为1680 mm 的人体模型,以肩关节为旋转轴,肩关节至手指端的距离为半径。
通过计算可知,上肢最大限度操作行为在半径为720 mm 的空间内,最大抓取动作在半径为600 mm 的范围内,最有利的抓取范围在半径为300 mm的空间内。
图中的灰色区域是人体肢体操作行为相对有效的活动范围。
Sitting body dimensions
坐姿体态数据
Controllers that are frequently used should be installed within a 400mm radius of the normal working position. Occasionally used controllers should be installed within a 500mm radius, and rarely used controllers should be within a 700mm radius.
Controllers should be visible to the operator from any viewing angle so that their status can be checked. Additionally, all controllers must be within reach of the operator in a sitting position.
经常使用的控制器,应安装在离正常工作位置半径不超过400mm的范围之内; 偶而使用的控制器,应安装在离正常工作位置半径不超过500mm的范围之内; 不常使用的控制器,应安装在离正常工作位置半径不超过700mm的范围之内; 控制器无论在什么观察角度上,操作者都应看见它们,以便检查其状态; 全部控制器均应置于坐姿操作者够得着的范围之内
Arm activity area analysis
上肢动域分析
Based on upper extremity tests performed on 6 users, and additional research conducted by Milligan College Occupational Therapy Students on "Elbow, Wrist, and Forearm Range of Motion and Manual Muscle Testing Demonstration Videos", the data presented in Table 2 was obtained.
通过对6位用户的上肢测试,结合《Elbow, Wrist, and Forearm Range of Motion and Manual Muscle Testing Demonstration Videos by Milligan College Occupational Therapy Students. Kinesiology》[6] 的研究,得到了 表2 中的数据。
Table 2
Gesture | Angle (degree) |
Elbow flexion 肘关节屈曲 | 0-150 |
Pronation 尺桡关节旋前 | 0-80 |
Supination 尺桡关节旋后 | 0-80 |
Wrist flexion 腕关节屈曲 | 0-80 |
Wrist extension 腕关节伸直 | 0-80 |
Wrist ulanr deviation 腕关节尺侧偏移 | 0-30 |
Wrist radial deviation 腕关节桡侧偏移 | 0-20 |
Thumb movement 拇指活动 | 0-70 |
Comfortableness statistics of joint motions
上肢活动舒适度数据
Under external loading, the most uncomfortable joint movement is horizontal shoulder extension, followed by wrist extension. The most comfortable movement is elbow flexion, followed by shoulder flexion and horizontal adduction.
Shoulder joint movements require a large amount of torque, which can easily lead to discomfort for the operator.
When under load, the discomfort in the wrist joint becomes more severe.
在外加载荷作用下,不舒适程度最高的是肩关节水平伸展,其次是腕关节背屈;最舒适的是肘关节屈曲,其次是肩关节前伸和水平屈曲。 肩关节活动的力矩较大,很容易让作业者产生强烈的不适感。 在有载荷作用时,腕关节的不舒感变得强烈。
Competitive Analysis & User Interviews
竞品分析&用户访谈
We conducted competitive analysis with the home & shopping experience of the most popular personal VR headset devices, and compared that process with 2D online shopping, to identify and understand the missing points of a VR shopping.
我们对最受欢迎的个人VR头显设备的家庭和购物体验进行了分析,并将该过程与2D在线购物进行比较,以寻找和了解VR购物缺失和可以提升的环节。
What do we want to find out?
我们想了解什么
What processes are involved in VR home exploration and online shopping?
What factors influence a person's decision to make a final purchase during online shopping?
What are the most significant pain points that cause indecision and anxiety in the online shopping process?
How does the online shopping process differ for present VR products compared to traditional online shopping?
VR 家庭探索和在线购物的流程是怎么样的? 在网上购物时,什么因素会影响一个人做出最终购买决定? 在网上购物过程中,导致犹豫和焦虑的最主要痛点是什么? 现有VR产品的在线购物流程与正常在线购物流程有何不同?
Research Insights
研究洞察
Existing VR products often feature 2D interactions for home scenes, and shopping categories are mostly virtual products, which cannot provide users with a physical purchasing experience.
There is a certain level of risk when purchasing physical products, which can cause stress and anxiety for buyers.
The biggest pain point is that purchasing virtual products cannot provide a real shopping experience, while purchasing physical products requires users to make decisions with incomplete information.
现有的VR产品中,Home场景多为2D交互,购物类别大多是虚拟产品,无法为用户提供实物购买体验。
在购买实物产品时,存在一定的风险,这会给购买者带来压力和焦虑。
最大的痛点在于购买虚拟产品无法带来真实的购物体验,而购买实物产品时用户需要在信息不完善的情况下做出决定。
CONCEPT #2
Experience Pillars
体验支柱
To address the issue of users lacking a physical shopping experience, we have conceptualized a new VR experience to make the user's virtual shopping experience more realistic and tactile.
Immersive: The user's interactions should be more than just simple button clicks. Easy to learn: Most people will be using VR for the first time, so the interaction process should be simple and intuitive. More than just an experience: VR should not just be an entertainment device, it should be a tool that can solve real problems.
为了解决用户没有实物购买体验的问题,我们构想了全新的 VR 体验,让用户的虚拟购物体验更真实可触摸。
沉浸式: 用户的操作不止简单的点击按钮。 易于学习: 大多数人都是第一次使用 VR,所以交互过程应该简单且符合直觉。 不只是体验: VR 不应该只是娱乐设备,它应该是能解决真正问题的工具。
VR Controller Far UI Interaction Concepts
VR 手柄远 UI 交互概念
The ray cast maintains the same angle as the controller button surface, which aligns with user intuition.
To reduce frequent interaction fatigue and keep it within the user's comfortable field of view, we decrease the use of wrist joint extremes.
When using a comfortable elbow angle, the user should be able to point the ray towards the visual focus of the panel.
The ray is emitted from the virtual controller at an angle of approximately 77.1 degrees to the vertical direction (trigger key).
射线投射保持与控制器按钮表面相同的角度,与用户的直觉相一致。
为了减少频繁的交互疲劳并保持它在用户舒适的视野范围内,我们减少了手腕关节的极端使用。
当使用舒适的肘部角度时,用户应该能够将光线指向面板的视觉焦点。
射线从手柄射出,角度与手柄按钮斜面倾角一致,建议与竖直方向(Trigger 键)夹角大约在77.1度。
VR Controller Far UI Interaction Concepts
VR 手柄远 UI 交互概念
When the wrist is in an extreme position, the recommended ray length is between 32cm-35cm based on the calculated ray angle of 77.1 degrees and a distance of 85cm to the current primary panel within the user's comfortable field of view.
When the distance to the panel is less than 32cm, the ray length is variable but cannot pass through the UI panel.
手腕在极限状态下,按照前文计算出的射线角度77.1,在用户舒适视野内的结合目前一级面板距离85cm,射线长度建议在32cm-45cm。
距离面板< 32cm 时,截断消失,射线为不可穿透面板的可变长度。
VR Controller Near UI Interaction Concepts
VR 手柄近 UI 交互概念
The user will be guided to interact with UI elements using a bubble/arrow/small circular cursor. When the cursor intersects with a UI element, the selection action is completed.
When the cursor intersects with UI elements, there should be haptic feedback to provide users with a sense of touch.
Additionally, the selected UI element should change in appearance, such as changing color, to indicate that it has been selected.
使用气泡型/箭头/小圆环片光标引导用户与 UI 元素接触,当光标与 UI 元素有交叉时即完成选择动作
当光标与 UI 元素相交时,有震动反馈 与 UI 元素相交时元素呈现被选中状态,颜色变化
VR Controller Near UI Interaction Concepts
VR 手柄近 UI 交互概念
The motion space and control space overlap.
Based on previous ergonomic data, the near-interaction UI is placed within a space with a radius of 300 mm.
An anchored panel or a wearable device such as a wristband.
运动空间与控制空间重叠。 根据之前的人体工学数据,近交互 UI 放置范围在半径为300 mm的空间内。 可以是锚定面板形式,也可以是可穿戴形式如手环。
VR 3D Far UI Interaction Concepts
VR 3D 远 UI 交互概念
Ray Cursor 射线光标
The joystick is used to move the cursor forward and backward, highlighting the target nearest to the cursor, which can improve the selection efficiency.
Advantages: it is as fast as traditional raycasting, with higher accuracy, and can easily move the target in depth.
Disadvantages: it is not suitable for moving targets.
使用摇杆推动光标前进后退,高亮距离光标最近的目标物能有效的提高选择效率。
优点:像传统射线一样快速,且准确度更高;可以轻松对目标物进行深度移动。
缺点:不适合移动的目标。
VR 3D Far UI Interaction Concepts
VR 3D 远 UI 交互概念
Gravity Zone 重力区间
Tilt the joystick forward or backward to bring all objects in the scene closer or farther away at a constant speed. If the distance between the object and the user is less than a certain threshold, the object will be completely transparent. Then use traditional raycasting for selection.
Advantages: The position and size of objects in the scene have changed, but the relative positions have not.
Disadvantages: Not suitable for quickly selecting moving targets.
通过向前或向后倾斜摇杆将场景中的所有对象以恒定的速度靠近或远离。 如果对象与用户之间的距离小于阈值,则该对象将是完全透明的。之后使用传统射线进行选择。
优点:场景中物体的位置和大小都发生了改变,但是相对位置不变。
缺点:不适合快速选择移动的目标。
VR 3D Far UI Interaction Concepts
VR 3D 远 UI 交互概念
Flower Cone 光锥射线
The user selects objects in two stages. First, the user controls a cone that encompasses the estimated area where the target may appear. The size of the cone can be adjusted by tilting the joystick forward/backward.
When the Trigger is pressed, the user enters the second selection stage, where all objects within the cone are displayed on a grid. The user can select the target directly on the grid using the ray or, if the target is not on the grid, the user can return and readjust the size of the cone.
Advantages: The visual size can be controlled by the size of the flat circular base of the cone, and the grid arrangement is clearer.
Disadvantages: It may change the position of the target object.
用户分两个阶段选择对象。 首先,用户控制一个锥体囊括目标可能出现的估计区域。 可以通过向前/向后倾斜摇杆来调整圆锥的大小。
按下Trigger时,用户进入第二个选择阶段,在该阶段中,该圆锥内的所有对象都显示在网格上。 用户可以使用 射线直接在网格上选择目标,或者,如果目标不在网格上,用户可以按下按钮返回并再次调整圆锥的大小。
优点:可视化大小可以通过圆锥的扁平圆形底座的大小来控制,网格排列更清晰。
缺点:会改变目标物的位置。
VR 3D Far UI Interaction Concepts
VR 3D 远 UI 交互概念
Grid Wall 网格墙
When the user presses the controller button, all objects are arranged in a grid with a constant ratio, and all objects in the scene are completely reorganized into new positions with different sizes. Traditional raycasting can be used to select targets on the grid. The original position information of objects is temporarily lost with the grid layout.
Advantages: Simple operation, clearer grid layout, suitable for quick selection in simple scenes.
Disadvantages: The original position information of objects is temporarily lost with the grid layout.
当用户按下控制器按钮时,所有对象都以恒定的比例排列在网格上, 将场景中的所有对象完全重新组织到具有不同大小的新位置。 使用传统射线在网格上选择目标。 对象的原始位置信息随着网格布局暂时丢失。
优点:操作简单,网格排列更清晰,适合简单场景的快速选择。
缺点:对象的原始位置信息随着网格布局暂时丢失。
VR 3D Far UI Interaction Concepts
VR 3D 远 UI 交互概念
Lasso Grid 套索网格
users can draw any shape of path by long-pressing the controller trigger. When releasing the trigger, all the tracked objects are displayed on the grid layout. Then The ray is used to select targets on the grid. Pressing a button allows users to go back and redraw the path.
Advantages: Easy operation, clearer grid arrangement, suitable for fast selection in simple scenes, especially for scenes in motion.
Disadvantages: It may change the position of the target object, and it may be difficult to select when there are too many objects.
使用套索网格,用户可以通过长按控制器扳机键绘制任何形状的轨迹(参见图)。 释放扳机键时,跟踪中的所有对象都显示在网格布局上。 如果跟踪没有关闭,程序会自动完成它。 射线用于选择网格上的目标。 按下按钮允许用户返回并再次绘制轨迹。
优点:操作简单,网格排列更清晰,适合简单场景的快速选择,尤其是运动中的场景。
缺点:会改变目标物的位置,数量过多时不好选择。
PROTOTYPE #3
Controller Interaction
手柄交互
During user testing, our previous research data and concepts were largely validated.
在用户测试中,我们之前的研究数据和概念基本得到了验证。
VR Home Scenes and shopping Experience
VR 主世界和购物体验
We used what we learned from user testing the first prototype as well feedback from the users to create a high-fidelity prototype to test the look and feel of the VR experience.
我们根据用户对上一个原型的测试和反馈,创建了一个高保真度原型,以测试VR体验的外观和感觉。
CONCLUSION #4
Final Result
最终成果
The controller interaction has been documented as BLOO design guidelines and research report,60% (2D interaction part)from the report has been used on the 1st generation product.
手柄交互设计已经被整理成为 BLOO VR 设计规范和研究报告,其中关于 2D UI 交互的部分(60%)已经被应用与第一代产品上。
Future Considerations
未来设想
More user testing and iteration 更多的用户测试和迭代
Due to the limitation of technology support and the project timeline, we were only able to conduct one round of user testing and create a 2D high-fidelity prototype. However, I believe that continued user testing and iteration are crucial to refine the design and improve the user experience.
由于技术支持和项目时间的限制,我们只能进行一轮用户测试并创建一个2D高保真原型。然而,我相信持续的用户测试和迭代对于完善设计和改进用户体验至关重要。
Add animations 添加动画
I believe that incorporating fluent animations can enhance the user experience, making it more natural and pleasant. Animations can also help to explain our innovation and give personality to the overall product.
我认为将流畅的动画融入其中可以增强用户体验,使其更加自然和愉悦。动画还可以帮助解释我们的创新,并赋予整个产品个性。
Multi-modal experience polish 多模态体验的优化
As a VR project, it's important to me to eventually create a multi-modal interaction experience for users in a beautifully rendered space, complete with delightful ambient sound and natural haptics. This will help to create a more immersive and engaging user experience. 作为VR项目,我希望最终为用户创建一个多模态交互体验,包括美丽的渲染空间,令人愉悦的环境声音和自然的触觉反馈。这将有助于创造更具沉浸感和吸引力的用户体验。
References 参考文献
[1]穆荣荣. 中国20-25岁城市成年人身体形态特征及年代变化特点[D].上海体育学院,2017.
[2]中国成年人人体尺寸标准:GB 10000—88[S].1988.
[3]戚福洲,侯进,黄永坤.一种基于国标人体测量学数据的虚拟人建模方法[J].计算机工程与科学,2015,37(04):783-789.
[4]李和森,柳冠中.基于人体活动域的厨房作业区尺寸界定研究[J].包装工程,2020,41(18):280-286+293.DOI:10.19554/j.cnki.1001-3563.2020.18.036.
[5]军事装备和设施的人机工程设计手册:GJB/Z 131-2002 [S].2002.
[6]张睿明,柳忠起,周前祥,谌玉红,李晨明.人体上肢关节活动范围的舒适性评价[J].中国安全科学学报,2018,28(08):75-80.DOI:10.16265/j.cnki.issn1003-3033.2018.08.013.
Baloup, M., Pietrzak, T. and Casiez, G. (2019) “Raycursor,” Proceedings of the 2019 CHI Conference on Human Factors in Computing Systems. doi: 10.1145/3290605.3300331.
Batmaz, A. U. and Stuerzlinger, W. (2020) “Effect of fixed and infinite ray length on distal 3D pointing in virtual reality,” Extended Abstracts of the 2020 CHI Conference on Human Factors in Computing Systems. doi: 10.1145/3334480.3382796.
Chen, Y., Sun, J., Xu, Q., Lank, E., Irani, P. and Li, W. (2021) “Empirical evaluation of moving target selection in virtual reality using egocentric metaphors,” Human-Computer Interaction – INTERACT 2021, pp. 29–50. doi: 10.1007/978-3-030-85610-6_3.
Daydream app Quality Requirements - Design | Google VR | google developers (no date) Google. Google. Available at: https://developers.google.com/vr/distribute/daydream/design-requirements#UX-C1 (Accessed: April 19, 2023).
Elbow, wrist, and forearm range of motion and manual muscle testing demonstration videos (2014) YouTube. YouTube. Available at: https://www.youtube.com/watch?v=hZvvLJhdgPE (Accessed: April 19, 2023).
Henrikson, R., Grossman, T., Trowbridge, S., Wigdor, D. and Benko, H. (2020) “Head-coupled kinematic template matching: A prediction model for Ray pointing in VR,” Proceedings of the 2020 CHI Conference on Human Factors in Computing Systems. doi: 10.1145/3313831.3376489.
Lu, Y., Yu, C. and Shi, Y. (2020) “Investigating bubble mechanism for ray-casting to improve 3D target acquisition in virtual reality,” 2020 IEEE Conference on Virtual Reality and 3D User Interfaces (VR). doi: 10.1109/vr46266.2020.00021.
MaxWang-MS (no date) Mixed reality toolkit 3 developer documentation - MRTK3, Developer Documentation - MRTK3 | Microsoft Learn. Available at: https://learn.microsoft.com/en-us/windows/mixed-reality/mrtk-unity/mrtk3-overview/ (Accessed: April 19, 2023).
Mayer, S., Schwind, V., Schweigert, R. and Henze, N. (2018) “The effect of offset correction and cursor on mid-air pointing in real and Virtual Environments,” Proceedings of the 2018 CHI Conference on Human Factors in Computing Systems. doi: 10.1145/3173574.3174227.
Ro, H., Byun, J.-H., Park, Y. J., Lee, N. K. and Han, T.-D. (2019) “AR pointer: Advanced Ray-casting interface using laser pointer metaphor for object manipulation in 3D augmented reality environment,” Applied Sciences, 9(15), p. 3078. doi: 10.3390/app9153078.
Scaffolding in VR: Interaction design for stacking and assembly (2021) Leap Motion Blog. Available at: https://blog.leapmotion.com/scaffolding-in-vr-interaction-design-for-stacking-and-assembly/ (Accessed: April 19, 2023).
Sun, J., Stuerzlinger, W. and Riecke, B. E. (2018) “Comparing input methods and cursors for 3D positioning with head-mounted displays,” Proceedings of the 15th ACM Symposium on Applied Perception. doi: 10.1145/3225153.3225167.
Wagner, J., Stuerzlinger, W. and Nedel, L. (2021) “Comparing and combining virtual hand and virtual ray pointer interactions for data manipulation in immersive analytics,” IEEE Transactions on Visualization and Computer Graphics, 27(5), pp. 2513–2523. doi: 10.1109/tvcg.2021.3067759.
Yu, D., Zhou, Q., Newn, J., Dingler, T., Velloso, E. and Goncalves, J. (2020) “Fully-occluded target selection in virtual reality,” IEEE Transactions on Visualization and Computer Graphics, 26(12), pp. 3402–3413. doi: 10.1109/tvcg.2020.3023606.
肩膀關節角度測量(shoulder range of motion) - 吱吱復健 (no date). Available at: https://relive.tw/shoulder-range-of-motion/ (Accessed: April 19, 2023).