Interface/Interaction Design (Documentation Process)

Documented by Wei LUO

Guided by Prof. Peter von Maydell

University of the Arts Bremen – Digital Media

11.09.2020 Switching Camera Gif

Create a meaningful Gif animation – Feedback gif for switching mobile phone camera front to back

Gif description

11.18.2020 MS Teams Widget

Create a little panel that floats over the MS Teams software, that lets anyone click on a counter. After a certain amount of clicks (or votes), a message will appear to the speaker to “move on” or “stop talking” or the like. The counter is hidden, which means no one can see how many votes have been placed, and it may ignore multiple votes from troll-listeners or the like.

Gif description

12.09.2020 Timezone Reminder Widget

Create a small widget that reminds people of a time-zone difference.

After message has been sent, a small widget will pop-up, which includes information about the destination, the local time of destination and a time-zone difference.

gif description

01.13.2021 Spatial Navigation Interface Design

Research on Spatial Navigational Competence

  1. Cue Navigation and Guidance for the Route Learning
  2. Allocentric Coding Process and Egocentric Coding Process
  3. Exploration and Spatial Cognitive Maps
  4. People navigate via their knowledge of landmarks against a larger landscape.

Related Reflection

  • How to keep user’s excitements (being interested/motivated in the route learning)?
  • How and when we use map more “playfully”?
  • How to make user remember the landmarks/routes/hints more effectively (a deeper impression)?
  • What is the information stored in Spatial Cognitive Maps?

Strategies for A Better Understanding of Wayfinding

  1. Use landmarks to provide orientation cues and memorable locations.
  2. Create well-structured paths.
  3. Create regions of differing visual character.
  4. Provide signs at decision points to help way-finding decisions.

Four Stages for Pedestrian Navigation (Pure Walking)

  1. Initial Geo-Identification: recognize the environment
  2. Identification of Destination: identify the destination
  3. Route Confirmation and Route Control: require the route control
  4. Destination Confirmation: confirm the destination

Spatial Navigation – Landmark Function

This navigation exercise aims to improve the user’s spatial navigational competence during way-finding by repeating and highlighting those landmarks’ information for users on the way.

Representation State: Place A – Place B way-finding route

  1. First, show all the recognizable landmarks categories in a common flat icon way.
  2. When the user is exploring the place via navigation function, landmarks will show up with a close-up/highlighting animation.
  3. The original 2d flat landmark icon will keep flashing or even being changed into a 3d pattern when the user almost arriving and passing through this landmark.

  • When the user arrives in the position pointed in green, the 2 mall landmark and the 3 hospital landmark will start to flash in turn on the interface.

Types of Landmarks:

  • Global Landmarks
  • Local Landmarks
  • Personal Landmarks (The place with special memory for each user)

Question: How to present a global/local/personal landmark in different ways?

The way of changing icon (from 2d to 3d)

How to add a personal landmark

Direction Orientation

Interface Prototype

Conclusion of the landmark function

  • Before starting navigation, give a quick look/overview on the landmark area for users.
  • Use different types of icons/drawings to identify/present them.
  • Provide the opportunity for user to have more interactions with those landmarks.

Further problems to be considered

  • It is difficult to exactly define either a landmark is global or local.
  • After I decided to use different colors and shapes to represent different types of landmarks, the navigation interface becomes cluttered due to various visual elements.
  • The way how to design/present the direction orientation when using navigation.

Leave a comment