Xinghui Yan: Hello, everyone. My name is Xinghui, also go by Erica. Today, I'm presenting our work that explored user perceptions and expectations of shapes for dialog designs. This work was done during my summer internship at Google Material design.
Xinghui Yan: Thanks to my great team for their kind support and guidance in conducting this work. In today's user interface designs, shape is a fundamental visual characteristic.
Xinghui Yan: As the mobile UI gradually evolves to a more flat design, shapes serve as important clues for users to distinguish UI components.
Xinghui Yan: For example, Google material design develops a shape scale for UI components with different rounded corners, ranging from none to fully rounded.
Xinghui Yan: These shapes are assigned to different components, such as a button, a list item, or a dialog.
Xinghui Yan: Different design systems also have different guidelines on the shape.
Xinghui Yan: On the other hand, shapes can make UI design more expressive and stylish.
Xinghui Yan: Google Material You explores new shapes as UI containers.
Xinghui Yan: Shapes are used to enhance the visual aesthetics of a user interface, or used to express a distinct perspective in a sytle or a brand.
Xinghui Yan: However, we're still unclear about what shapes offer to UI regarding their semantic meanings.
Xinghui Yan: Does a certain shape make the displayed information seem more important or urgent? How do users perceive and expect the information presented in containers with different shapes.
Xinghui Yan: Hence we sought to understand the impact of shapes on user perceptions and expectations for the information displayed.
Xinghui Yan: We used dialog UI as a case study here, you can think of a pop-up window showing an alert on your screen. We chose a dialog UI because it is used to display diverse messages, and often interrupts the user's interaction flow.
Xinghui Yan: To achieve this goal, we started by creating 6 dialog UIs with different shapes as containers. As you can see on the screen, here we group these dialogs into 3 pairs
Xinghui Yan: for our preliminary investigation. For Pair 1, it includes the typical angular basic and rounded basic dialog. Pair 2 includes two hexagon shapes
Xinghui Yan: with angular and rounded corners.
Xinghui Yan: With pair 3, we designed a circle and a wiggly circle as dialog containers. With these shapes, we aimed to probe users’ perceptions of different shapes used for UI components.
Xinghui Yan: We conducted an online survey with 200 participants, and had them compare 3 pairs of dialog UIs regarding characteristics like trustworthiness, and perceived importance of the displayed messages.
Xinghui Yan: We also selected 8 typical dialog messages to represent important, non-important, and app versus system messages to probe users’ perception of which dialog is more expected to present a certain message.
Xinghui Yan: For the data analysis, we did the descriptive analysis and statistical modeling to examine how shapes and different types of messages played a role here.
Xinghui Yan: If you are interested, please refer to our paper.
Xinghui Yan: What did we find?
Xinghui Yan: First our results showed that users seem to prefer rounded dialog designs because dialog UI with angular shapes were less likely to be chosen to be more attractive, playful, or unique, compared to UI containers with rounded shapes.
Xinghui Yan: However, we found that different dialog designs did not seem to hamper user trust and perceived security.
Xinghui Yan: We used different messages to represent important versus non-important messages. We found that shapes could impact the perceived importance of the displayed content.
Xinghui Yan: We found a significant difference for pair 2. The angular hexagon versus rounded hexagon. Participants had a significantly higher tendency to expect the angular dialog to display an important message.
Xinghui Yan: like an app crash message over the rounded dialog.
Xinghui Yan: As you can see in the figure here, for the non-important messages
Xinghui Yan: relatively only around twenty-percent of participants would expect an angular hexagon to display an Ad or a Thank-you message.
Xinghui Yan: Now, I want to share what we've learned from this study. I'll discuss 2 aspects: design implications and our study design. Starting with design implications, our findings suggest that designers may consider exploring the shape story of UI components.
Xinghui Yan: Designers can include more diverse shapes for UI designs, because from our results, unique shapes do not hamper user perception on trustworthiness and security of the dialog design.
Xinghui Yan: Using diverse shapes does not only mean to be more stylish or express branding.
Xinghui Yan: It also means that we may smartly use different shapes to indicate the importance of a message
Xinghui Yan: so that users could determine their attendance to the message by just glancing at the container shape.
Xinghui Yan: Future research would perform a comprehensive mapping between shapes and semantic meanings in the context of UI component design.
Xinghui Yan: However, since our results show that shapes could alter user perceptions and expectations for the displayed information in dialog UI, designers and researchers want to be more mindful of the semantic meanings that UI characteristics offer.
Xinghui Yan: Typical characteristics include color, shape, typography, and icon, which all embody semantic meetings
Xinghui Yan: In the future researchers may want to conduct an investigation on the semantic meanings embodied in different UI styles. If designed appropriately, the selection of shapes or other characteristics can facilitate user interactions.
Xinghui Yan: So, if researchers want to dive into the design of UI components,
Xinghui Yan: how can they design the studies? We benefit a lot from the study design to yield interesting and informative results.
Xinghui Yan: Here I want to share two interesting and helpful tips.
Xinghui Yan: first, we benefit from the use of comparison-based surveys to quickly perform an investigation on specific UI characteristics. Initially, we tried to present each single prototype to users and ask about their perceptions.
Xinghui Yan: Then we realized that some of the dialog designs either were familiar to them or relatively too novel, which made it challenging for users to translate their perception into numerical values.
Xinghui Yan: So when asking users to compare 2 designs or prototype side by side, is quite easy for users, and it will actually yield more informative results.
Xinghui Yan: The second tip is to situate the study of visual characteristics under specific scenarios. If you ask participants which of the following pop-up windows do you expect to display an important message?
Xinghui Yan: Users may find a difficult to recall what is an important message.
Xinghui Yan: So we provided participants with specific scenarios, and had them compare different dialogs under each scenario in order to obtain data of higher quality.
Xinghui Yan: We believe that such scenario-based evaluation has the potential to be extended in future research.
Xinghui Yan: Here is a summary of our work. We conducted an online survey study with 200 participants to explore user perceptions and expectations of different shapes used for dialog UI.
Xinghui Yan: Our studies show that rounded dialog designs were preferred, but overall different dialog shapes do not hamper perceived trustworthiness or security.
Xinghui Yan: Importantly, we found that shapes could alter the importance of the messages displayed in a dialog.
Xinghui Yan: Our studies suggest to first explore the shape story of UI components, but be mindful of the semantic meanings that shapes offer. In terms of the study design, in the future researchers may consider using situation-based and comparison-based surveys to investigate specific UI characteristics.
Xinghui Yan: Okay. Now I want to thank you. Thank the material design team, the colleagues and folks from the Material Design team. And thank you very much for your time to listen to my talk.