Tufuga Media

Reasons to use a standing desk

Fri, 02 Dec 2011 15:24:13 -0500

My coworkers know I recently started using a standing desk (if you can call it that…its a big box stacked on reams of paper on top of my new desk). I did it because I head on a whim that it’s good for you and helps you stay more alert. I figured I’d give it a try and I like it! However, since people ask all the time, I did a little research to see what the actual health risks of sitting are.

Effects of sitting include:

64% more likely to die from heart disease
Electrical activity in leg muscles shut off immediately
Enzymes that help break down fat drop 90% immediately
Good cholesterol drops 20% after 2 hours
Insulin effectiveness drops 24% and risk of diabetes rises
Your metabolism goes into rest when you are sitting
Could cause muscle stiffness, poor balance and mobility, lower back and neck pain
Could cause blood clotting, resulting in heart attacks
Reduced bone density
Shortening of the leg muscles
Poor posture
Weakened glutes and tight hip flexors cause your pelvis to tilt forward, putting stress on lumbar spine, resulting in lower-back pain and giving you a protruding gut

Facts/Figures

Each extra hour of watching TV is 11% higher death risk
Those with sitting jobs have twice the rate of cardiovascular disease as people with standing jobs
Sitting can negate exercise benefits. Those who exercise and also sit for 3 hrs a day in front of the TV/in office are just as fat as those who dont. Wonder what 8 hrs/day will do?
Between 1980 and 2000, exercise rates stayed the same, sitting time increased 8%, obesity doubled
Obese people sit 2.5 hours more per day than thin people

UX Fail: Coupons.com

Tue, 15 Nov 2011 00:00:00 -0500

My wife asked me to print some coupons for her and I was blown away by some of the UX choices Coupons.com made. For this post, I’m going to let the screenshots and captions do the talking.

Note that I am using Google Chrome. IE6 is supported, but not Chrome?! They support Safari, which is also webkit, but not Chrome?

Wait, why is printing a 3 step process? I need to install a plugin to print? Did I read that right?

Yep, they were serious. I have to install something on my computer to allow me to print. I wonder if anyone ever showed these guys the print function available on, oh, every modern computer and browser?!

Okay, plugin installed, back to this screen. At this point I’m just curious what happens.

At this point I click print and nothing happens. No visual feedback. I didn’t get the usual print window that always comes up. I walk over the printer and TADA! my page has printed. Funny, because I actually wanted to pick another printer to print to, but apparently that’s not important to the coupon.com group.

Fail.

Why Apple doesn't have a mobile site

Fri, 11 Nov 2011 00:00:00 -0500

Apple.com has been one of the most copied and ripped off website designs and its design elements are scattered across more websites than I can count. It is one of the trendsetting websites that seem to set direction as to how websites should look and interact with the user.

While attending the UI16 conference this week in Boston, I attended Luke Wroblewski’s workshop on mobile. I let my mind wander as he discussed some things I was already familiar with and I had this thought:

Why doesn’t apple.com have a mobile website?

Let me share what I discovered. I think there is a lesson to be learned by the fact that there is no mobile apple.com experience. When Steve Jobs unveiled the iPhone, he touted it as a revolutionary internet communication device. It was. I just re-watched his keynote and grabbed a few words he used when describing the mobile internet experience of 2007, when the iPhone was announced:

“Its sort of the baby internet.” “It’s bad out there today.” (referring to the mobile internet) “We are not creating a baby web browser or WAP browser, but a real browser. The first full HTML browser on a phone.” “We are bringing the real internet to your phone.” “We show you the whole New York Times website.”

Let me break down what I think he means. I had a Windows Mobile 5.0 phone that I used, only on occasion, to browse the internet. Using my up-down-right-left key I could jump to different links, similar to trying to use the Tab key on your desktop to jump to the link you want to click on, was annoying and slow. Some sites didn’t work at all. Other sites offered a streamlined mobile site, but it lacked full content and was still difficult to navigate.

What made the iPhone a revolutionary communication device was it offered the full internet. You could get to any content on any site (except for Flash based sites and media). You could view all content. It was a real browser.

Unfortunately, some people think their mobile site should only contain a portion of their “full site”. Sure, its much nicer to have web pages optimized for mobile so we don’t have to zoom in and out on all the pages to read the text. Sure, its nice when pages are lighter so they are faster to view over a 3g connection. Sure its nice to take advantage of mobile capabilities like GPS. However, these benefits should not be provided at the cost of cutting content.

“Mobile first” is a content strategy. Remember, mobile should just be a different rendering of the same content. The rule is, if something isn’t important enough to make it onto your mobile site, then why is it on your desktop site? Desktop sites are not junk drawers for obscure content. All web pages could do with some content cleanup, and mobile is a great opportunity for some spring cleaning.

I think Apple chooses not to create a mobile site because I believe they want to promote the full web for all devices. However, I wish they would lead out in creating a mobile optimized experience that offers the same content as their desktop site that isn’t missing any content or features. I look forward to the day that we have mobile sites that share the same content as the desktop experience but are optimized for screen size, touch inputs, and connection speeds. Then we’ll really have a mobile experience worth talking about.

Mobile doesn't mean limited

Thu, 20 Oct 2011 00:00:00 -0400

Mobile web is still a relatively new area, and best practices haven’t been established – take everything you hear about mobile, including what I say, with a grain of salt. I’ve heard several times that mobile experiences should be watered down, slimmer experiences than the desktop version meaning that there is less content available on the mobile site than there is on the desktop site. My solutions manager heard this at the Web 2.0 conference he attended, and brought it up yesterday. I believe there are compelling reasons why this is a bad mobile strategy.

User experience considerations

Every time I get directed to a mobile site on my phone, I nervously start browsing for what I want to see. Here’s why I’m nervous. While mobile internet browsing is awesome, it is nowhere near as effective as browsing on a desktop/laptop. Because of this, browsing on the phone is a more significant time investment than browsing on a desktop. Additionally, phones are slower because they connect over a 3g connection. I am frequently annoyed to find that after spending time searching for the info I need on the mobile site, I discover the page doesn’t exist on mobile and I am forced to restart my search on the desktop site. I’m redirected to the homepage and must start again, pinching and zooming and panning around on a desktop site, trying to get drop down menus to behave right so that I can (hopefully) find what I’m looking for. Since desktop sites are rarely, if ever, optimized for touch, it is possible that I won’t be able to find the content I need on the desktop site when browsing with a phone or tablet. So, basically:

A partial mobile site will inevitably interrupt a user’s browsing experience, forcing them to start their search for information all over again on a slower, heavier, desktop site.
Many full, desktop style websites are not optimized for touch. Dropdown menus, Flash features (for iOS), small text, and many other desktop conventions do not work on the mobile devices
Many mobile users are connecting through a slower, 3G connection or less. Sending the full desktop website is too heavy for most of these connections to respond well

What about “focus” on mobile?

I have been hearing a lot of discussion around focusing the mobile browsing experience. People sometimes bring up use cases like, “Joe is dashing from the airport to his taxi and needs to find the location of the hotel…”. As Josh Clark mentioned in the UIE Podcast these on-the-go use cases are fun to build towards, but are a terribly incomplete picture. While these rushed use cases are real, they are not the only use case. People also check their mobile devices while waiting in line at the grocery store, sitting on their couch, and other more relaxed situations. In these situations, users would find an on-the-go optimized site unsatisfactory. Some recent data is revealing that people are using their phones for much more than just on-the-go tasks. Luke Wroblewski has posted some great data about mobile use. Some quotes from Luke’s Data Monday roundup and a few other data points :

“eBay is on its way to process around $4 billion in mobile sales in 2011, double the number it logged last year. Three purchases are made through eBay’s mobile applications every second. 2,600 vehicles are purchased through eBay’s core iPhone apps every week. 13 pieces of clothing, shoes or accessories are sold every minute through eBay’s mobile apps.” From Luke’s article (Source: http://techcrunch.com/2011/10/09/ebay-vp-steve-yankovich-en-route-to-4b-in-gross-mobile-sales-tctv/)
“Blue Nile sold a diamond ring that cost more than $300,000 via mobile and sees large jewelry purchases, running from a few thousand to tens of thousands of dollars, via smartphones happen quite frequently.” From Luke’s article (Source: http://www.internetretailer.com/commentary/2011/09/15/customer-says-i-do-300000-mobile-transaction)
35% of all searches on Yelp.com came from a Yelp mobile app (http://officialblog.yelp.com/2011/02/via-yelp-mobile-yelpers-call-a-local-business-every-other-second.html)
I have heard somewhere (cannot find the source at the moment) that Yelp’s mobile users represent only 10% of their users, yet they generate the 35% of the searches on Yelp.

I believe it is possible, through good interaction and visual design, to maintain focus on certain tasks that on-the-go users need, while still providing general users the ability to browse and find information that they need. I think that saying your mobile content doesn’t need to be 1:1 with your desktop content is a bit of a design cop-out. Admittedly, this isn’t always possible, but it should be a mark we all strive for. Good design can make this possible without making the mobile page overwhelming. As mobile design best practices start to form, this task will continue to become easier and easier for teams to do. Designers should strive to use repeatable patterns in their design to make the building and maintenance of the different browsing experiences as easy for developers as possible. Having 30 different text styles, inconsistent paddings and margins, etc make these sites hard to create and maintain.

So what about mobile first?

To me, today at least, mobile first means more about content than it does about design. If you don’t think content belongs on your mobile site, perhaps it doesn’t belong on your desktop site. I think “mobile first” means to streamline your content. Desktop experiences are generally bloated, with so much noise and clutter that it is difficult to locate the information you need. There is a common web content phrase that says, “Cut your words in half, then cut them in half again.” This speaks to the fact that desktop sites just have way too much content. If we think mobile content first, it helps keep both the mobile and desktop experience navigable and easy to use, providing a better experience across the board.

Mobile shouldn’t be limited

As a principle or guideline, we should strive to provide 100% of our web content to mobile devices. While the display of that content may vary, perhaps we don’t have all the same widgets, features, ads, etc, the content should be 1:1 as much as possible. The only caveat has to do with device capability. A common one, for example, is location services for mobile phones. This gives us some different things we can do on mobile vs desktop. Desktop as well has unique capabilities which justify a slightly different experience from mobile.

UX Fail : Sencha Touch Mobile Website

Mon, 17 Oct 2011 00:00:00 -0400

Just a quickie here today. Sencha Touch is a mobile development framework. I’d heard about it but never looked into it, until today. I looked for it using my iPhone. Kinda funny though…they don’t have a mobile site! Quick tip, if you make a mobile platform, seems kind of ridiculous to NOT have a mobile version of your site. They do have demo’s of the product, but I was forced to locate it using the desktop version of the site, not optimized for my screen size or touch based interactions. Sorry Sencha.

UX Fail : Office Depot Website

Wed, 05 Oct 2011 00:00:00 -0400

Due to a recent interest in design and user interaction, its not often that I find a website from a major company that is awful. I found one: Office Depot.

This navigation system is awful. Take a look. Upon clicking one of the buttons in the horizontal bar, you are given a super menu dropdown with two different category lists and two PROMO or AD elements…in a MENU! No more explanation needed. This is a UX fail!

Rapid Prototyping for Mobile (iOS, Android, and More) with Fireworks using TAP

Thu, 22 Sep 2011 00:00:00 -0400

Rapid Prototyping for Mobile (iOS, Android, and More) with Fireworks using TAP:

As I’ve been involved with different mobile projects recently, I’ve run up against some obstacles. It is difficult to design on a desktop screen when the app/site will be used on a mobile device. You MUST preview your design on the device it will be viewed on. This can be a bit of a hassle, sending images to to the device for previewing. Also, interaction is extremely important on mobile devices. We have found that our interactions, when implemented, aren’t as brilliant as we thought they would be when we were working in Photoshop. Unfortunately, so far, the only way to test our designs was to wait until they were marked up.

Yesterday, I discovered a builder called TAP which enables you to use Adobe Fireworks to create interactive prototypes for mobile devices. I’ve recently started using Fireworks over Photoshop for web design because it has tools better suited for web design tasks, allows you to create interactive prototypes and even make pixel perfect designs. It has been great. I was really hoping I could take advantage of these tools to develop prototypes for mobile without having to mark up the designs. However, the HTML export doesn’t display well on a mobile device without some significant tweaking of the HTML, which isn’t ideal for developing prototypes quickly. TAP not only facilitates rapid prototyping, in my opinion, goes above and beyond. TAP supports sliding animations which replicate animations you see on many native apps. It also supports gestures, like swiping. I have tested it on iOS and Android and it works great! I’m surprised I haven’t seen this tool around yet. Go to their website and read more about it: http://unitid.nl/2011/03/touch-application-prototypes-tap-for-iphone-and-ipad-using-adobe-fireworks/

UX Win : Bank of America Password Validation

Sat, 17 Sep 2011 00:00:00 -0400

No one likes filling out forms on websites. I recently registered with Bank of America since they now own my mortgage. I thought their password check was helpful and creative.

When it comes time to create a password, when you start typing in the first field, a bubble pops up telling you the requirements for the password. If you have met a specific requirement, the text is green with a green checkbox. Those which are not met show up in red with a “do not enter” type of symbol.

By the time I finished typing in my password, all of the requirements had turned green, so I knew my password was okay.

A similar bubble popped up for the password verification field. There was only one requirement: the passwords must match.

I like this approach. Telling a user their password isn’t valid after they have submitted a form isn’t a great user experience, especially if field data isn’t preserved on the screen reload. Realtime, clear visual feedback is ideal! Good work Bank of America! I’m glad my money will be going to a company with a great website user experience.

UX Fail : Toyota Prius

Fri, 16 Sep 2011 12:00:00 -0400

One of the company cars I use from time to time is a Toyota Prius. The first time I drove one, I quickly realized how much I take for granted a interface design for a car. The Prius was so frustrating to me that it became the inspiration for featuring User Experience Fails on my blog. Keep reading to see more about my experience.

If it aint broke…

The Prius replaces the key with a key fob. Car manufacturers have been experimenting with replacing the key for several years. I personally think this is ridiculous. Why break a convention that has worked so well for so many years? This keyfob is bulky. I can understand the conventional key makes the car easier to steal, but lets not get carried away! Throw a chip in the key and you’re done. By biggest gripe with the keyfob came when trying to start the car. I’ve used some keyfobs where when you are within a close proximity to the car, you can push a button to start the car. It took me 5 minutes to realize I had to put the Prius keyfob into a random slot on the dashboard. Then, when I pushed the “power” button, it was difficult to know if the car is on or not. Since it’s electric, you dont hear the engine, and its difficult to distinguish whether or not the car is “on” or “running”.

And it gets worse

Other things I didn’t like: the gear shift knob. It is missing a key feature for any design: a visual indicator of the state in close proximity to the item switching the state. Most gear shifters physically rest in whatever gear you are in. On the Prius, after you move the lever into a particular spot it resets back to a resting space. The indication of what gear you are in is way up high in the dash near the windshield. The dash is long, so its further than it appears in the picture. Also, you don’t use the gear lever to put the vehicle in park. It is a separate button. My next headache was climate control. Most vehicles have physical knobs for this but the Prius drives everything through a touch screen interface. Seems cool in theory, but now I feel like I’m driving and texting every time I want to turn off the AC. It takes much greater mental effort and attention to control the settings using the touch screen than a physical knob you can feel for and turn without looking. I really think this is a safety concern, personally, especially since I dont feel the touch screen UI is very intuitive and the screen isn’t very receptive to the touch. At the end of the day, you have to put up with a lot of annoyances to get 50+ mpg. Not worth it to me.

Finally, some focus to this blog

Fri, 16 Sep 2011 00:00:00 -0400

This blog/site has evolved significantly over the years. In fact, this site started as my very first website which was more of a portfolio website back in the days where I did mostly motion graphics and I didn’t know the difference between HTML and CSS. Believe it or not, that was only 2 years ago, almost exactly!!! For those who know me personally, that may seem surprising. The last two years have been quite a journey as I have explored my interests and talents to find a good fit. My interests have been all over the board, but thanks to a full time job, I think I’m finally starting to focus.

I’ve wanted to have a regular blog as a way to explore my interests. Writing, like teaching, has a way of clarifying concepts in my mind. While I do hope someone out there benefits from what I have to say, I’m mostly doing this blog for me.

I’ve always felt that a good blog has focus. My blog has never been good because it lacks focus. Take a look at a sampling of my past posts and you’ll see what I mean. No more of this (hopefully). I want to focus on interaction design, which is a pretty broad subject. I have some fun ideas. I want to showcase good and bad examples of interaction or user design. I’ve got a little backlog already of some. Everything from cars to websites and everything in between.

By the way, I’m still working on the site design. It’s kind of hard to build navigation for content that doesn’t exist, so I’m thinking of letting the blog go for a bit before I add some more navigation elements to help users find articles relevant to their interests. Until then, just enjoy the articles in linear fashion!