At the same time, it needed to look good on the iPad. This of course, brought up a completely different discussion since the existing site looked and functioned quite nicely using the iPad safari browser. The only downside, from the clients perspective (and potential users), it didn’t give the feeling of an Ipad app, which in itself, gives the website a substantial amount of value (real or illusional). So the solution; allow the user to easily switch between the mobile and full version of the site. I foresee this becoming a standard practice. ESPN.com does an excellent job of executing this with a nice splash screen prompting the user to choose either mobile or standard.

Anyway, back to making it feel like a mobile app/experience without creating a drastically different version of the site. Yall ready know what it is, Jquery Mobile. Jquery, surely becoming one of those buzz words which can be thrown around vicariously with absolutely no knowledge of what-the-heck it is. It’s cool. I get it. I appreciate the effort. Jquery mobile, however, is a slightly different can of worms.

I’ll let http://jquerymobile.com/ explain it best:

“A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.”

I gotta say, the setup was a breeze. The only modifications we made to the html were adding a few html 5 attributes such as:

‘data-role=”page” data-role=”listview” data-theme=”c”

Jquery Mobile takes care of the rest.

The majority of the work lies in rethinking the way your users will interact with the site now that it’s displayed with ¼ of the screen real estate. In addition, users interacting with your site on a mobile browser are more likely to be looking for a very specific snippet of information and they will want to find it fast. In other words, you need to remove all the fluff. Once you get the whole ux dilemma resolved, your 90% of the way there.

Of course, it’s always good to specify your own mobile css overrides for certain scenarios. One good example is; the CMS required the contact information be editable in one large CK editor rich text block. The contact information was formatted in tables (oh no). For the mobile devices these tables where too wide to fit the smaller screen size effectively without zooming. So, throw in a lil:

table.contact td {display: block !important;}

BAM! We are good.

There is one caveat. Jquery mobile, it’s in alpha release (ughh). A little bit of risk, very little, but based of our testing with multiple mobile platforms, there have been no glaring issues. So Jquery Mobile, I’m an official fan.

http://www.fitbit.com/

I have had a couple of arguments in my day regarding this seemingly harmless question… where do you place the primary action? Also, how do you make sure the primary action is appropriate in the hierarchy of your webpage?

Lets take a simple form for instance, say a registration form or a simple yes/no confirmation message, where do you put your save/submit and cancel buttons. Here are two distinct theories.

1. Grouped together on the left. Submit to the left of cancel: this works pretty well, the eye naturally flows from the last field to the save button. BAM! The user has submitted the form. However, there is a case where it gets a little awkward. If we are in a multiple page form, maybe some sort of checkout process, and we replace cancel with the word back and save with the word next, it seems totally weird. You would never see Google search results with previous being on the right.

2. Grouped together on the right. Submit to the right of cancel. This one is still effective. This is what the mac OS does and it makes sense. If you were to turn the page of a book, signaling you were done reading the current page, you would turn the page on the bottom right corner. This makes sense.. but most people are accustomed to pc’s which float both buttons to the right with the save button being on the left (the complete opposite!). However, when we replace the save with next and cancel with back, it totally makes sense now.

So let’s get scientific, ill go get my lab coat… lots of user testing including eye tracking has been done on the subject i.e. http://www.lukew.com/resources/articles/web_forms.html and basically it turns out… it really doesn’t make that big of a difference (ha ha, so much time wasted reading this post). The only setup in which users encountered failure was when the save and cancel buttons where split across the document.

So What Have I Found… Making the primary action ‘pop’ is the real key. The best way to do that is to GET RID OF THE OTHER BUTTON! In the case of the multiple page form I started putting the back action at the top of the form in more of a breadcrumb location to avoid putting two buttons down there in the first place. Now there are cases in which removing the cancel button all together simply won’t work. So in this case is best option is to play down the button visually. Making it simply a link or making the button smaller, feels awkward. The best solution seems to be subduing it using color, shape, and shadow. Floating the buttons to the right gives the eye a little more time to travel from the last field but the impact will be fairly trivial, there are probably much more important challenges for a ux designer to worry about..

- dedicated to stubborn tech guys.

This shot is from Quantum of Solice in case you don’t recognize it (a movie I liked, but Andy hated).  Its basically a giant, fake, movie product placement version of Surface.

I’m attending a small focus group Thursday put on by Microsoft to help brainstorm uses of this technology in education.  I was invited by a client at Johns Hopkins and I think I’m going to be the only person there without a PHD.

The idea is to get familiar with its capabilities, then brainstorm ideas for using it to support teaching strategies like cooperative and experiential learning.  The cool thing about it (other than the multitouch capability) is it can identify optical tags (basically barcodes) and position graphics and menus in the location of the object the tag is on.  The example Microsoft shows is a restaurant with their wine bottles tagged.  You put a bottle on the table and you get a bunch of info to explore like which dinner menu items go well with that wine and other stuff.  Kind of a lame example, but that’s what they’ve got.  So, that should be fun to play around with as a teaching tool.

It can also pull data out of your Windows Mobile phone and let you do stuff with it on the display, but I don’t think many elementary school kids have those.

if I’m allowed to, I’ll post about the ideas after Thursday.

Operating-system-interface-design-between-1981-2009

10_outstanding_icon_metaphors