How do I design UI / UX for a Glass App?

To design UI for Glass, follow these steps from paper to pre-viz:

A. start with an idea

  1. imagine a use case, including a persona, a desire, and / or a task.
  2. put pen to paper: create storyboards of the user experience.
  3. craft a basic UI with your tools of choice : Illustrator, Photoshop.
  4. keep the layout very clean & simple
  5. keep in mind that the information displayed is the augmentation of the unfolding experience, and not the focus of it!
  6. use bold, high contrast typography & graphics
  7. remember that all graphics are semi-transparent overlays of the actual present reality for the user.
  8. remember that the actual live info area is a very small rectangle, covering only about 5% of the user’s total field of view. For a rough feel, hold a 9″ tablet at arms length, just up and to the right of your head.
  9. You can complete all the above steps using a basic still photograph as the background. The photograph should obviously reflect the context of the app’s primary usage environment.
  10. Add movement. Import the UI elements into the pre-viz tool of your choice. Personally I prefer Keynote. Design your transitions. Motion graphics experience is very helpful. Consider metaphors.

 

B. create a video pre-visualization

Finally, you may wish to simulate the possibilities of what users will actually see:

  1. given your specific use case, go out into the field and shoot some first person PoV video. This can be accomplished with any camera in video mode, just hold it close to your temple and try to move your head naturally as your record. Use as wide-angle a lens as you have available. The wider the angle, the less perceptible shakes and vibrations will be. Post-process the video in iMovie or similar for added image stabilization.
  2. Place the recorded movie in the background of your pre-visualization engine. Your graphics will basically serve as the simulation of the Glass video overlay.
  3. Carefully synchronize the timing of your motion graphics to the underlying video imagery. Tell a story.

Here are two examples I’ve created using the above techniques:

  • StarFinder, a virtual planetarium app for Glass:
  • Path, an augmented hiking app for Glass:

 

C. create an actual prototype

  1. For an actual live prototype,  use a tablet computer with a back-facing camera. Write some simple code to port the live camera feed onto the screen, and overlay your graphics and interface atop the feed at 50% transparency. Hold the tablet at arms length, level with your head. This roughly simulates the field of view and positioning of the Glass display.

Enjoy,
Greg