Tourist Application Sketch

Tourist Application Sketch

Design
Challenge

Paper: Liu, X. B., Kirilyuk, V., Yuan, X., Olwal, A., Chi, P., Chen, X. A., & Du, R. (2023, April).

Visual Captions: Augmenting Verbal Communication With On-the-Fly Visuals. In Proceedings

of the 2023 CHI Conference on Human Factors in Computing Systems (pp. 1-20).
Review the raw data and create a conceptual design for the use of on-the-fly visuals in a different context. The context for the assessment is the design of an app for tourists walking around exploring a new city (e.g. Paris). The goal is to review the raw data and propose an adaptation of the tool reported in the paper, on a conceptual design level, with the touristic exploration context in mind.

Part I: Mental Model

Part I: Mental Model

Part I: Mental Model

Reviewing Data and findings

Based on the raw data [1] provided, it indicates that from Visual Captions, an open-source Chrome plug-in, Keywords will be extracted and visualized based on the dialogue and contextual semantics between users. These would then be converted from text into pictures, emoticons, videos animated pictures, 3D models and wireframes.

 
Mental Model Description based on the given design challenge.

 

Norman, A. Donald emphasised, "People form mental models through experience, training, and instruction. The mental model of a device is formed largely by interpreting its perceived actions and its visible structure" [2, p.17].

The figure below is a possible user mental model based on the design challenge:

Reviewing Data and findings

Based on the raw data [1] provided, it indicates that from Visual Captions, an open-source Chrome plug-in, Keywords will be extracted and visualized based on the dialogue and contextual semantics between users. These would then be converted from text into pictures, emoticons, videos animated pictures, 3D models and wireframes.

 
Mental Model Description based on the given design challenge.

 

Norman, A. Donald emphasised, "People form mental models through experience, training, and instruction. The mental model of a device is formed largely by interpreting its perceived actions and its visible structure" [2, p.17].

The figure below is a possible user mental model based on the design challenge:

Fig. 1. Users’ mental model based on the touristic exploration context. Source: Created by the author.

 

In preparation for travel, users would prepare documents. During the journey, they would prepare a translation application, go shopping and explore the city. Afterwards, people would like to manage logistics like tax refunds, share photos with family and friends, and plan future adventures.

 

 

Part II: Conceptual Model Description

Part II: Conceptual Model Description

Part II: Conceptual Model Description

Fig. 2. Users’ conceptual model based on the touristic exploration context. Source: Created by the author.

 

A high-level interaction between users and the application

 

A couple from Beijing exploring Rome, pre-downloaded the app for travel advice. Upon landing, they booked a taxi to their hotel. With the aid of the app, they changed their hotel buffet service. The app using the Live navigation map led them to the Colosseum. Exiting the Colosseum, they found a building. The app told them it was Michelangelo's former residence.

Part III: Conceptual Model Visuals

Part III: Conceptual Model Visuals

Part III: Conceptual Model Visuals

Sketching about how the application works

 

Sketching is the third step of the Double Dimond model, serving as a pivotal phase in testing and exploring various solutions.[3]

Fig. 3. The design council’s Double Diamond model [3]

Airport pick-up visual scenario

Fig. 4. The app will extract the pick-up driver information from the screenshots of the user's mobile phone album. Source: Created by the author with images from Google.

Check-in translation visualization scenario

Fig. 5. When communicating with multiple people, users can choose to create a channel, scan the code to join, identify and translate into their mother tongue, and visualize the mother tongue. Source: Created by the author with images from Google.

Scan to identify visual images

Fig. 6. The app will automatically recognize images, search the Internet and provide background information about the building. Source: Created by the author with images from Google.

Part IV: Design Considerations

Part IV: Design Considerations

Part IV: Design Considerations

Designers should consider the following three design principles:

 

First, “Support Internal Locus of Control” [4]. Designers should give users the freedom to control private photo albums. To protect privacy, users have the right to choose to turn off the use permissions of specific photo albums.

 

Second, “Contrast and uniformity” [5, p.139]. “A design without contrast is seen as a gray…” Most of the app usage scenarios are outdoors, so the color contrast and font size contrast should be obvious.

 

Third, according to Norman, A. Donald [2, p. xii], the concept of "Feedback" is crucial in design principles. When users use real-life navigation, if they take the wrong path, they must promptly remind and provide feedback on the latest status.

Reference

Reference

Reference

[1] "Bruce" Liu, V. Kirilyuk, X. Yuan, et al., "Visual Captions: Augmenting Verbal Communication With On-the-fly Visuals," in Proceedings of the 2023 CHI Conference on Human Factors in Computing Systems, ACM, Apr. 22-29, 2023, pp. 1-20. DOI: 10.1145/3544548.3581566.

 

[2] Norman, A. Donald, The Design of Everyday Things, 2002 Edition, 2002.

 

[3] Steve Bromley (May 29, 2020). How To Run the Right Kind Of Research Study With The Double-Diamond Model. Smashing Magazine [Online]. Available: https://www.smashingmagazine.com/2020/05/research-study-double-diamond-model/ [Accessed: 08 November 2023]

 

[4] Authorless. Shneiderman’s Eight Golden Rules of Interface Design. Capian [Online]. Available: https://capian.co/shneiderman-eight-golden-rules-interface-design [Accessed: 15 November 2023]

 

[5] J. J. Garrett, The Elements of User Experience, 2nd ed. New Riders, 2010.

Create a free website with Framer, the website builder loved by startups, designers and agencies.