linxfit 7 gdk ux tips

13
7 Tips for Google Glass GDK UX Our approach and what we have learned so far LynxFIT Wellness rough Wearables

Upload: mauro-canziani

Post on 10-Feb-2017

18 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: LinxFIT 7 GDK UX Tips

7 Tips for Google Glass GDK UXOur approach and what we have learned so far

LynxFITWellness �rough Wearables

Page 2: LinxFIT 7 GDK UX Tips

e started designing our �rst Glass experience with the GDK by using the Google Glass Design

Principles (https://developers.google.com/-glass/design/principles) as the main guide.

As we found ourselves trying to bring to the user a fun 20 to 30 minutes long continued �tness experience, using video, sound, voice, sensors, automated actions, heavy data processing, internet data connectivity and high frequency rendering cards, we realized we had big challenges to overcome and we needed to come up with extra principles of our own to apply to GDK Development.

A few weeks ago, our �rst app “LynxFIT, your personal trainer for Glass” was launched as a featured app on the MyGlass Store. Our dream of building an immersive experience whereby users were educated on how to engage in a quanti�able �tness activity

became a reality. Going through the approval process itself taught as a lot regarding the Glass review team’s evolving philosophies and mindset.

Recently, we launched a beta testing GDK version of our second app “Genie, magnify life on Glass”. For this one there were a di�erent set of challenges as we attempted to provide a �uid experience for having Glass remember things for the user and help with getting things done (GTD). With this Glassware we are experimenting with how to design new interaction patterns such as lists behaviors doing intensive use of Glass gestures. We’re using an agile approach by launching a proto-type early and listening to quick user feed-back.

In the hopes that others can bene�t of our learning process we are sharing what we went thru and what helped us.

Welcome to

LynxFIT

Loading...

2

W

Page 3: LinxFIT 7 GDK UX Tips

Welcome to

LynxFIT

Loading...

LynxFIT Demo

20:00

Day 2

Workout time

Rest nowNext up situps

Step 1 of 15

00:0900:17

Squats

2

50 reps

Start

Beginner

LynxFIT Demo

Day 24

Beginner

Aphrodite

Day 11

Intermidiate

Les Mills TrueGrit

Day 2

WORKOUT

MENUOPTIONS

WORKOUTSELECTION

INTRO &LOADING DATA

3

Page 4: LinxFIT 7 GDK UX Tips

Glass comes out of the box with an incred-ibly simple, thoughtful, and minimalistic user interface. As you start developing your GDK app, you will quickly realize that you can get access the full potential of the device. It is with this realization that the blank canvas can get a bit scary. Our suggestion is build for Glass espe�cically and avoid user experiences built for mobile and desktop. Try to stick to what is already

known to the user by using the existing interaction patterns such as the menu item options, scroll cards, swipe forward/back-ward.

Maybe one of the most overlooked GDK patterns is to actually use cards as a unit even when on GDK. What we mean by this is to design card by card versus a �ow of changes on a screen.

For LynxFIT, we divided the 30 minute experience on speci�c and distinctive cards, creating a new card every time there is a state change (as in rest, versus demonstration, versus activity). Also, we originally attempted to use scroll cards for selection and to have the user tap on them for a direct action. We were directed by the review team to add a menu even with a single option to make it card compatible.

1. Don’t reinvent the wheelRespect the existing Glass UX, patterns and interac-tions

4

LynxFIT Demo

20:00

Day 2

Workout time

Page 5: LinxFIT 7 GDK UX Tips

240px 30px320px

65px

240px 30px320px

65px50

240px 30px320px 240px 30px320px

Roboto Light 26px

Roboto Thin45px

Roboto Light 26px

Roboto Light 26pxThin 45px

Roboto Light 26px

Thin 45px

Roboto Light 26pxThin 45px

Roboto Light 26px

Roboto Light 26pxThin 45px

5

Page 6: LinxFIT 7 GDK UX Tips

On Genie when the user tells Genie to remember something, we process that input and give feedback to the user as far as how that info is being stored. So, “buy bananas” gets a voice feedback of “bananas added to your shopping list”.Also, on Genie, when you are scrolling through a list and you get to the end of it we do give a sound feedback indicating there are no more notes on the list..On LynxFIT, one of our examples of system driven feedback is the “get ready” voice announcement when the rest period is coming to an end and a new activity is about to start.

�e user experience on Glass is very personal and while the user is engaging in micro-interactions with the system, we need to keep engaging the user’s attention by providing timely information. �at’s one of the advantages of GDK versus Mirror API as you can give real time feedback no matter if you’re teaching, guiding, quantifying or motivating.Every user action could have a visual, audio or voice feedback from the system

to maintain that personal engagement.For instance, it’s a standard Glass behavior to give a tug when the user attempts to scroll right or le� on an immersive card, giving additional feedback regarding the impossibility to do so.

�ere might be cases in which the system is driving a timed process or other system conditions, and in those cases the user needs to get updated at least by voice.

2. Connect to the user personallyMaintain the user updated and informed, on the loop at all times

6

Page 7: LinxFIT 7 GDK UX Tips

7

Intro

TIME

UI

SCREEN

TTS

SOUNDNOTIF.

≈10sec ≈30sec

Start activitynotification

Today we'll do 3 series of 10 activities including…

Alright lets go! Half way there Rest now

Get ready,next up...

Great job today, congrats, you're done

Start restnotification

Finishnotification

30sec 15sec ≈10sec

5sec 5sec 5sec

Video Activity Rest Finish

LynxFIT Demo

20:00

Day 2

Workout time

00:17

Squats

2

50 repsRest nowNext up situps

Step 1 of 15

00:0903:00

04:45

Workout time:

Total time

Page 8: LinxFIT 7 GDK UX Tips

On LynxFIT, if there is an error playing a video, which will disrupt the �ow we’ll let the user know, but if we successfully send a data update to the server, only a subtle indication that the process is done is needed.

Be sure to only give relevant (non intru-sive) feedback to the user. Avoid giving unexpected feedback from async processes that are not relevant to the user. If a process is running asynchronously on the background and everything goes well, the user doesn’t care, we don’t need to let them know “your data was uploaded” (in most cases) that is in the past for them. We

could have only subtle indications that the process ended running, such as having a refresh icon while we’re trying to reach the server and hiding it when done. If some-thing goes wrong on a background process or some irrecoverable error happens then it might be vital to notify the user in an immersive way following the guidelines with a Glass styled error message.

3. Only interrupt when relevant Avoid the unexpected, only give relevant feedback

8

Page 9: LinxFIT 7 GDK UX Tips

On LynxFIT we turn the screen o� during rest times. When the beginning of an activity is approaching, we give the user a voice clue so they can get ready in the new position. Once the activity starts we activate the screen for a few seconds and then go back to dimmed down screen and o� screen as time goes by.

�is is one of the most important ques-tions you can ask yourself in order to have a simple, uncluttered, clean user interface:Can a user glimpse at this card and get the information/feedback they need but no more than what they need?�is approach will guide you on a path to show only the important information at each particular moment.

Also, keep in mind to design considering hardware limits. Optimize battery life and

heat by managing resources in a minimal-istic way. Because resources are �nite on a Glass device, we need to be very mindful at the time of designing. Keep videos short, ideally less than 3 minutes, even less if at all possible. Try to keep the screen o� or dimmed when it’s not essential to the experience.Use voice and sounds for user orientation to support dimmed or o� screens.

4. The “glimpse” approachKeep it short and keep the screen on only when needed

9

Rest nowNext up situps

Step 1 of 15

00:09

Page 10: LinxFIT 7 GDK UX Tips

Always prioritize the UI render:- menu options: give sound feedback and close menu option before continue with your logic- in transitions, launching immersive cards/chang-ing cards situations: try to render the UI the quickest as possible, doing heavy processing in the background.

When you look at the experience you’re designing as a whole, you need to end up with a completely �uid experience. �e visible interface for your app can’t be waiting for things to happen, such as data

to come from the server or heavy process-ing. �reading is the key to make your interface �uid and always give priority to the user experience, hiding long, slower or heavy processing on the background.

5. UI firstKeep your UI agile and flowing

10

Page 11: LinxFIT 7 GDK UX Tips

On LynxFIT, we decided to allow the user to pause the current activity, go out of immersive mode and let them navigate the timeline �eely. Once the user is on the timeline we are completely out of the way, silent and ready to pick up where they le�.On Genie, we allow the users to minimize their immersive interaction with the lists and navigate the timeline �eeley being able to return to a live card to the le� of the ok glass and simple re-launch or exit.

Let the user interact with the timeline as much as possible. If your experiences is immersive, let the user go to the timeline and allow her to recreate the state she had before, once she comes back.Avoid giving voice or sound noti�cations if the user is somewhere else in the time-line and your app is not active.�e safest way to do this might be to allow a state of pause which can hold on all processing until the user comes back.

�e �ip side of the coin, is to allow other Glassware to interrupt you gracefully. Expect the unexpected, other glassware could disrupt you experience, be ready. For instance a call can come in, noti�cations might tempt the user, we need to allow for these interruptions and be able to come back to the prior status as if nothing ever happened. Don’t make the user go to step 1 just because they got a phone call.

6. Be a good neighbor Don’t interrupt other Glassware and let other Glass-ware interrupt you gracefully

11

Squats50 reps

Tap to resume

Page 12: LinxFIT 7 GDK UX Tips

On LynxFIT, we decided to have our workout selection and details on the web, as we’ll do with premium subscriptions and custom workouts in the near future. We also handle the settings as far as scheduling workouts on the web and we use Mirror API to allow users to share their Pie (pace, intensity and endurance statistics) as well as to get scheduled notices for their daily �tness �x.

�ere are a few functionalities that as of today, Mirror API can achieve in a better more natural way than GDK can. Use it!Examples are oauth login, sharing with contacts and apps, reminders and noti�ca-tions, scheduled tasks, all of these can and should be done with Mirror API.

Also, there are tasks with certain level of complexity that will be best lived on a web or mobile companion than they would in Glass. Examples of this are complex interactions with content, content or feature purchases and settings.

7. Mirror API can help An augmented Mirror: GDK apps can use Mirror to enhance themselves

12

38%

Pace

75%

Intensity

64%

Endurance

just now

Workout 1

Page 13: LinxFIT 7 GDK UX Tips

LynxFITwww.lynx�t.com

Author: Mauro Canziani -@mcanzianiEditing: Cecilia Abadie - @cabadieNoble Ackerson - @nobleackerson

May 2014