Seminar 2: Creative prototyping session – AR Interface

After working on two different ideas during the prototyping session,we decided to chose the AR Interface that the Glasses is expected to display.

We started from the sketch we came up with last session.

The initial sketch 

We wanted to make sure the the components that the glasses is going to display should not interfere with the field of view of the cyclist because this could be dangerous and leads to unfortunate consequences ,so we followed the design template that is recommended by Google Glass Explorer Edition guide. The suggested template below is usually used to distribute the content cards,and called “Card regions”, but we found it helpful since we are not going to display a load of information at the same time.

Card Regions

The red area usually contains the main content and it will be the most important area to the cyclists so we tried to place the minimal amounts of the components , the blue strip is the footer where the navigation signals and direction could be placed, the green squares are for Padding and it will be ignored because it is usually trivial to the cyclists , and the burble area on the left side usually contains image or column for important content and we will use it to place the map and some information as we planned when we sketched the initial interface.

During the last week we took some pictures in Uppsala, to make our prototype more realistic,in the following sets of pictures we shows how the design developed till we reached the finial prototype.

The (point of view) shot through the regions template

Then we decided to place the information widget on the top-left corner within the main content area,the widget contains the time ,the weather status ,the heart rate of the cyclist and the burned calories. The map is also placed on the bottom-left corner and it shows the location of  the cyclists using GPS technology.

The placement of the information widget and the map 

To provide the user with consistency ,we decided to use Material design components, like the icons of the info widgets because it offers great level of Affordances ,since it is widely used in web designs , mobile OS and other applications.

The final result of this was the following after changing the level of the opacity of the info widget .

To imagine how the navigation signals will be displayed , we followed the same previous steps and placed the navigation panel in the footer where it displays signs and the minimal amount of the information to help the cyclist to reach his destination.

Next to the map the speed of the bike and the number of the notifications could displayed as well.

The final interface 

 Finally , we applied the design to another point of view shot near Polacksbacken  ;D

Seminar 2 – Creative Prototyping Session

On the second seminar, we splited into two groups to come up with 2 physical prototypes,Imad and Joseph worked on sketching an interface for standalone application that you can use on any device that can be attached on the bike stem to help the cyclist with the navigation,(you can read about thier work in the previous post here).

Mauro , Joosep and me were working on the Google Glass idea , and since we don’t have the ability to get a real one , we made one out of a cartoon package using the materials that was provied to us during the session .

Also we tried to imagine the interface of the AR glasses, and tried to place the content in a good way to provide a consistent and elegant interface without disturbing cyclist field of view .

The above sketch suggest that we place the map on the bottom-left side of the field of view, and some information on the top-left corner (or the navigating directions),while displaying the speed  and notifications about the upcoming hills and the remaining time to reach the destination in the footer.
The seminar was fun and helped us to have more clear vision about the project. We are working currently to develop our prototypes according to Google Glass guideline to come up with more realistic demonstrations that we will share in the next post.

Pre Seminar Meeting #1

So, today we met again, we wanted to decide on the interface we are going to design for the second assignment. During our brainstorming session we came up with different ideas, but we narrowed it down to two different models that we want to present for the second seminar. Here they are:

1- Smart googles with built-in voice recognition technology that will aid on real time navigation. These will have minimized interface in order to avoid  clutter on the user’s vision that could be dangerous while riding a bike. We want to include a map on one of the corners of the vision field, the map shoud be as minimalistic as possible, we thought of the map on the videogame “Metal Gear”, neon lines on a single colour background, color dots indicate our position, destination, and other features. We want a sleek user experience for this googles, the interface should be smooth, fast, accurate, and give a sense of sophistication.

2- A 7″ tablet-like touch device that can be attached to the bike using a frame. This  navigation system will be very similar to applications that already exist, we though of Garmin or Waze over Google Maps. This interface does not have to be minimal so we could include more features and visual options for a better experience. We want to use a touch screen,  geolocation, voice recognition to navigate easily, it could also be connected to the internet and include various extra features such as live notifications. We want a satifying user experience for this product, it should be simple but complete, robust and reliable, easy to navigate with an intuitive user interface and a complete range of features.