Thursday, October 23, 2014

User Interface: At The Gym

User interfaces are all around us, and sometimes are so ubiquitous that we don't notice them. (In general, it's my experience that you shouldn't notice a user interface if the designer has done their job right--you should have an intuitive experience that streamlines whatever data you need to input or get back.) So most people probably never even think about their treadmill or elliptical when they think about interfaces in their lives. Yet, there they are, keeping track of how far we've run, what our heart rates are at, how many calories we've burned, the works.

Generally I burn my time on the treadmill by listening to audiobooks--which is a great way to multitask your entertainment while still getting work or exercise or other needed tasks done. But I decided to focus on the user interface when my apartment building got brand new treadmills. The old interfaces had been pretty basic: LED screens indicating your incline, cycling through various datapoints. The new shiny interfaces practically begged me to go exploring.

First Impressions

When I first saw the shiny new interface, I was generally impressed with the simplicity of the start screen. There was no temptation to crowd it and use every last inch of the screen. Instead we had two main options to get started, as well as four smaller buttons regarding media options, language, and security. The groupings seemed a little odd at first, but the two media controls and the language option were grouped as User Settings, whereas the Security button in the upper right seems to more of an administrative level. In terms of use patterns, the least used options were in the upper right corner.

The big green Quick Start button was very attractive to me as a user because it seemed to simplify the basics of what could have been overwhelming options on my shiny new treadmill.

If I have one complaint about this screen, it's that the four smaller buttons look more like status icons than touchable buttons. I could see users mistaking their grayed flat forms for an ideogrammatic label (indicating connectivity or a static state) as opposed to a button that activates a menu. When active, the buttons turn orange, but until they do, the user is not necessarily aware that they are buttons as they do not have any additional styling that matches other buttons in this interface suite.

The Basics

This seemed to be the default screen. It contained a navigation panel at the bottom center, a tools flyout in the bottom right, a largish stop button, and a central area containing rotating data. (I have labelled many components to this screen, and you can view the larger version by clicking on the image.)

The Navigation Panel consisted of seven buttons: A) Ipod media controls B) TV media controls C) the Track view D) Workout view E) Basic Data View F) Virtual Trails view and G) Gym view. (Of these, the Gym view was the only view I didn't really delve into.) Each view would replace the large data panel in the middle. These, unlike the buttons from the previous screen, have distinct styling that indicates button-hood.

The large data panel in the middle rotated through various types of information, which could be determined manually by using the dropdown appended to the arrow in the upper left. Calories per hour, mets/joules, distance, time all alternated in the top centre spot, while Incline and Speed were displayed in the secondary spots. The size of the information made it easy to glance down--important because it can be hard to read smaller displays while running at faster speeds.

Up top, the "speedometer" (I) with its varying colour displays would actually show you what exercise zone you were in: Weight Loss (green), Aerobic (yellow), and Performance (red). I appreciated the use of the traditional colour coding which matched the expectations I had with the old LED style displays, but went one further in terms of colourblindness disability, as the new display was clearly delineated and readable without solely relying on red-green cues.

The Tools flyout (J) provided quick access to various options regarding incline and speed--although it should be noted that the treadmill itself had manual controls on the handles as well. For machines equipped with fans, it also allowed for fan control.

Finally, a large easy to find and colour-cued red STOP button (H) in the bottom left corner made it easy to end any exercise session. (Once again, there were manual stop buttons available on the front panel of the machine, and the safety over-ride clip would also stop the machine if pulled.)

The Track

Speaking from a user standpoint, I alternated between the Track and Basic Data view the most often. I particularly liked this screen because I could use it to time interval bursts on my own WITHOUT having to rely on a program which would not take my own level of fitness into account. I could choose to run straightaways or full laps. I could also view each segment as an achievement. When running, it has been my experience that I do best and can go longest when I view each data point as the next achievable "carrot". For example, if I've run for fifteen minutes and then take a look at the Track view and think, "Well, if I run to the end of this lap, I'll have an even ten laps," I am more likely to run that extra lap. Switching back to the Basic Data view, I might then realise that I am only 15 calories from a round number, so then I run to make that round number.

Basically I really liked having multiple forms of input and visualisation. It made making mental running goals easier, and made it easier for me to exercise.

You will note that in the Track view, the data we were viewing in the Basic Data screen switches to the top left and right corners. Again dropdown arrows appear, allowing the user control over which data they see when.

Virtual Tracks

Another appealing feature of this new interface was the virtual tracks. You could choose one of six virtual tracks in both urban and rougher terrains. While the actual visualisation felt a little dizzying to me personally (rather like the effect one gets while reading in a car or a bus), I can see how it would spice up the workout.

However, once I was in the virtual track screen, I was unaware that I could actually show the virtual track full screen. I felt like there could be more signposting visually on that score.

The TV Channel Controls

I feel like this is a clunky use of space. In places where a channel list could go on for hundreds of channels, this menuing requires possible finer control of swiping (which is awkward while running) and could be annoying to navigate if you miss the channel you wanted the first time round. Most people are likely to be aware of what their favourite channels are locally, so while I would have the up/down stepper to the left, I would likely replace the main panel with numbers so people could input channel numbers rather than go through a lengthy scrolling grid. This was the screen I was least favourably inclined towards, from both a user and UX vantage point.

Summary Screen

I enjoyed having this summary screen laid out, particularly the Touch For More Time feature. It had been my habit to try and screenshot my summaries on the old LED screens, but half the time, they would disappear before I could whip my camera out. (And annoyingly, if you weren't running, the old machines would replace my data with INCREASE SPEED. So you had to half-heartedly jog or ellipticize your way along while trying to take a screenshot. So frustrating.) Here I could simply press a button while leisurely documenting my workout. Instagramming heaven!

Exporting Workout Data

Finally, you could export your workout data if you also had the TrueFit app. (I don't--I rely on my old screenshots.) All you had to do was plug in your iPod and press Export Data and ZIP, there it went. As with the previous screen, the designers recognised that you might forget to attach your iPod and a handy button for more time was added.

Summing It Up

In general I felt this was an attractive interface, designed to dispense a lot of data, but fairly easy to navigate. Getting started was intuitive. Exercising was friendly to multiple types of folks, allowing for both visual and data driven runners. Generally things that were colour coded were also clearly labelled, making it a friendlier experience for the colour blind.

There was some consistency and styling issues between the menu and button types that I feel might have been a factor of design creep. The pop-ups and flyouts seemed to vary between screens, and as you can see the Data Exporting screen has a different look and feel than the Summary screen or the Basic Data screen. (Distracting to me: The radius on the upper right and lower left corners varies between those two panels as well. However, as functionality was not impaired, this is an aesthetics nitpick, and not a user experience nitpick.) Button styles varied from a chrome-and-gel look (very tangible) to utilitarian and boxy with faint gradients to a flat ideogrammatic style.

In general information was grouped and displayed in a manner congruent with Western reading patterns. Fonts were readable, even while running, text styles for labels varied but not to a distracting degree.

As a user, I felt that the overall interface contributed to an enjoyable workout experience and was a step up from the old LEDs.

Thursday, October 17, 2013

UI: Remember Accessibility

So, this morning I started going over the latest guidelines for designing for iOS7. Hoo boy. I ran into issues within the first few screenshots. The new look and feel is designed to be flat, non-diagetic, non-skeumorphic, AND is too low-contrast to be really friendly to many many folks with eye issues. I myself am cursed with a pair of eyes I sometimes wish I could re-roll the stats on, and I could tell that the new font choices were a recipe for eye strain. They made them taller and spindlier and removed the subtle drop shadows that had helped them contrast against backgrounds.

Not only did the new font choice look problematic, but the samples they gave touting best practices often went for low-contrast looks. The Weather app displayed the weather on top of a lovely picture of a sky, complete with clouds. White text on partially white background? You are not making this easy for us, Apple. It didn't improve as I got down a little further to a section labelled Let color simplify the UI. Now, I'm a big fan of appropriate uses of color to signpost information BUT one has to consider that not everyone can perceive differences in colour. Obviously there are folks with colour blindness and I often like to use colour as a secondary marker for that reason alone. But then they actually suggest that the yellow highlight colour in Notes is a good example of this. I took a look at the screenshot and squinted. And squinted some more. I'm NOT colour blind. I can see them, but MAN, that's a recipe for eye strain right there, making those icons yellow on light grey.

That's just my mediocre eyes. There are folks with worse issues. An online acquaintance has a father with contrast loss, and she detailed his issues in this post where she explains that even navigating the unlock screen is now difficult for him. It's nigh impossible for him to get into his settings to change things around.

I think it might behoove Apple and other developers to preserve high-contrast skins of their OS and apps. Design isn't solely about making things look good, it's about retaining functionality and enhancing useability while doing so.

Sunday, September 8, 2013

UX-UI In Daily Life

Case Study: The Rental Car

John and I recently moved back to the Seattle area after living in SF. We had sold our car upon moving to San Francisco, and haven't yet replaced it. But our friends' children were having a birthday party in Olympia and we thought it would be a great chance to hang out and catch up. So I set about snagging a car for the weekend. I initially checked out Avis, because we'd booked with them for our Hawaii trip, but thought I would look into Hertz as well. Here's what I noticed:

(Click on images to see full-size.) Avis's site is less appealing with a static picture of a man by a car not clearly shown. (When I went back for screenshots, they'd replaced this man with a picture of their BMW contest winner.) Hertz alternates pictures of adventures (mountains, boat docks, family picnic) with a shot of a sample car clearly shown. Avis's boxy and constrained layout felt cramped, while Hertz's site promised a journey on the open road.

Hertz has a book-as-guest vs. a book-as-member option, clearly reminding users that they aren't necessarily logged in. Such a pet peeve to lose all my info entered upon log-in. Hertz tackles that here by reminding the user that they can login now. Avis just has a continue button, leading to the common mistake of entering all the info first and then getting the option to log-in, which may or may not clear things and reset forms.

Hertz smartly infers when an overnight drop-off is wanted, gives user option and info, Avis does not, halts process.

Breadcrumbs at top: Hertz wins again, for large clearly signposted breadcrumbs in the registration process, each with it's identifying marker. Avis: Small breadcrumbs, less obvious, and only a single label to tell which page you are on. If you need to go back in the process, you can tell exactly where with the Hertz breadcrumbs, but with Avis, you might need to guess.

Car lists: Hertz wins for me personally here because they show the cars and car types, in large open boxes that have all the detail I need plus clearly marked boxes that show me the difference in paying later vs. now. The Avis site is slightly more slickly designed here, but you have to manually select a car to see what it looks like and what seems like it was intended to be sleek and streamlined actually just turns into a wall of stat choices with no context. I preferred the more open layout of the Hertz list as I can see the cars easily by scrolling and don't have to open and close drop-downs.

Avis did just note that I'd stepped away from my session. I had a choice of whether or not to keep the session. Dunno what happens if it times out, but at least it signposts that the server may need to refresh information.

Things I'd like to see, but haven't interacted enough with the site to know: cookied information, so you can edit at any point in the registration process without losing ALL the entered info.

Anyway, this is just off the top of my head so far, not super in-depth. But I was trying to figure out why the Avis site wasn't appealing to me as much even though I have and had previous positive knowledge of Avis. (Avis rescued us in SF, and they are our rental car for Hawaii.) In the end, Hertz ended up winning me over for this car rental. Some of that was the cost, but some of it was also the design, and how easy they made it for me to compare prices.

Sunday, August 12, 2012

Park Perusal

I really love spending time in Golden Gate Park. Specifically, I love spending time at the museums and the arboretum and the tea garden, which is what I did today. I went through the Gaultier exhibit at the De Young--sorry, no sketches there--and then hit the science museum. Here's two sketches from my wanderings.

Sea Dragons in the Steinhart Aquarium. Little buggers are hard to sketch because they are in a low-light area and swim around, so you have to sketch them one segment at a time. The security guard finally told me it was okay to take a picture as long as I didn't use a flash. (I was so glad, because I've never photographed 'em before, due to the No Photography signs. Turns out iPhone cameras are okay if no flash.)

Detail from the arch area over the amphitheatre on the Music Concourse.