Day mode

Since all previous posts have showcased the red nightmode of the interface, it is about time to visualise it in day mode. I tried different shades of green, and the a combination of white text, bright green elements and another darker green background shade.

I used red in the previous interfaces because it is one of few colors that do not disturb night vision. It is argued that red might be confused with alarms. That might be true, but I believe this interface manages to separate itself from alarms.

Layered scenario video

Layered scenario video from Hanne Morstad on Vimeo.

A clip of how the captain works with the different interface modes and what interactions he utilises during different stages of a mission to collect a sample from an iceberg. As he gets close to where the operation is most intense, the part of the communication interface the captain actually needs is only the widget showing the name of the person addressing him. Prior to complex operations at sea is when you set up groups and manage them, test connections and such. Closer in time to the operation is when you need some fast choices from the menu, like calling the head engineer and deliver the message that you are taking over power control to enter DP mode.

Menu modes according to stress level

How I have built the communications interface is based on the level of complexity the user needs at a given time. When the captain has a lot to do and can not focus on communication other than talking, the interface will be as minimal as possible, showing only the name of the one talking to him. If the captain has some communication needs that needs to be done quick, the next layer, the radial menu, gives quick access to the most useful features. When the captain is calm, has a cup of coffee and can focus more on complex actions in the communication menu, the next layer is naturally more detailed.
 

 
The interface I built in Adobe Muse shows how the menu is built up:
 

full scenario sketches

Below are the full sketches, based on the layered scenario process we shared in an earlier post.

These sketches helped us to think through how the system should behave in different situations and for different users. These kinds of sketches can be refined, as in the example below.

Continue reading “full scenario sketches”

complex spatial relationships

This next post is melting my brain a little bit… check out the next post¬†for the video sketches that started me down this rabbit hole, and this post for more background on types of spatially fixed content.


Digital designers need to be able to communicate their visions to other people, including clients and developers. Today, we use programs like sketch and principle to make mockups, and we use a common language (pixels, hover-over, global nav, workflow diagram, etc.). The elements and relationships we are describing today are primarily 2D and are displayed on one screen (the move to responsive design has changed this a little).

Our context adds a few complexities – it is a distributed system, meaning it has multiple inputs and outputs, so we aren’t designing for one screen anymore; and it includes augmented reality – a technology that demands new approaches to designing interactions.

Describing the relationships that UI elements in augmented reality have to the physical world requires us to use new systems and new terms. Even seemingly simple elements, like the wireframes in the video below – have complex and dynamic relationships to multiple points of reference in the physical world. How would we describe them to a developer, if we wanted our sketch to be prototyped?

As designers tackling 3D interfaces, we need a system for communicating these spatial relationships – in three dimensions – based on the position and orientation of objects (scale is another factor not fully addressed here). In the sketch above we see UI elements that are spatially locked: to the ship’s window, to the horizon, to a ship moving on the horizon, and several combinations thereof.

What follows is my attempt to make sense of this… through writing, diagrams and a sketching template.

Continue reading “complex spatial relationships”