Chris Love's Official ASP.NET Blog

Navigation

Resources

Fashion Statement

Apple has developed a brand name that people just want associated with themselves. As I thought about it I remembered my early teen years back in the 80's and how much I wanted Ocean Pacific t-shirts because that was the brand all the cool kids were wearing. Jordache, Polo, Swatch Watches etc. were the things to have and of course be seen having. It was not about the product itself. What value did it offer over a regular t-shirt, cheap Timex or Levis? Parents everywhere were posing that question: why should they pay $20 for a t-shirt when the $8 t-shirt accomplished the same goal, to clothe you.

In the many times I have flown out of Ft. Lauderdale's Terminal B, I have sat near passengers waiting for a flight to Islip, NY, on Long Island. I enjoy my time in airports; they serve as a petri dish to me, where I can watch normal people and how they use their mobile devices. So sitting next to this consistent crowd has created many opportunities to observe the following scenario.

Typically there are at least 1-3 Islip passengers talking on their phone, very loudly of course. Usually about how much money they have. But the thing that really strikes me is how these folks hold the phone. Most people hold their phones so it is snugly in their hands with their fingers gripping it on one side, the phone resting against their palm and thumb pressing against the opposite side. Not these folks, they are all talking on an iPhone. So they hold the phone in some sort of Vulcan greeting fashion so their fingers are split in a V, with the index and pinky fingers on opposite sides. The bottom of the phone resting on the bottom of their palms. Its an awkward grip. Go ahead try it for yourself.

One thing I always notice is I can see that shiny Apple logo gleaming between those two middle fingers. Its all about the logo.

Cheap

At the other end of the spectrum I see many adults using their flip or good old-fashioned hand-crank feature phones. Of course the only feature about these phones is they can make phone calls and send text messages. Chatting with a few folks (yes I do talk instead of just stare) I ask why they did not get one of the cheap Android smartphones. Typically the answer is they did not want the data charge because they could not see themselves ever needing to surf the web. I can certainly appreciate their position.

When I talk to Android owners, not geeks, and ask why they chose an Android over the iPhone, it almost always comes down to price. They bought the cheapest smartphone, usually the free one. They were willing to add the data plan, but not pay several hundred dollars for the phone. Fashion was not important to them.

Sometimes I press further and ask why they chose the Android over the cheap Windows Phone (I mean seriously they are often $0.01). Usually they ask what's a Windows Phone? I show them mine and they usually have a moment of feeling ripped off by the store salesman, but that is another topic.

Of course then there are the customers that go into the mobile store looking for Windows Phones only to be told they don’t wont that by the sales person. I have witnessed this twice myself.

Looking at the tablet market I think these same decision values. iPad is the clear dominator at the moment, mostly because Android tablets are priced too high with a tangible quality difference. However we see the HP TouchPad flying off the shelves at $99. The Kindle Fire is also selling in high numbers at $200. This tells me there is going to be a HUGE market for tablets in the sub $500 market. It also tells me the adoption of tablets is following the same exact pattern smartphones have followed.

The Tech Meme world is currently buzzing over why no one buys Windows Phones. Honestly a lot of it comes down to the sales guys in the stores. They get nicer commissions on Droids, period. Technology reviewers tend to like the Windows Phone, but that only goes so far.

I read studies every week about consumer decision making. Sometimes they make sense to me, other times not. I base that on my pure anecdotal surveys. I realize there are often some cultural influences, for example I have not been out of North America in a long time. So decision patterns in other countries will vary I am sure.

The masses choose technology based on price. A smaller but very significant market does not care so much about price and will pay a premium for a brand name. Those purchasing based on price may feel clueless when comparing their options and tend to rely on a trusted figure, the commissioned sales person. In many ways consumer purchasing habits do not change whether it is clothes or technology, only the things they consume.

Posted: Wednesday, December 28, 2011 8:36 AM by Chris Love | 0 Comments

Filed under: Opinion, Mobile, WP7, Windows Phone 7, iPad, iPhone, Android

How FedEx.com Could Increase Customer Satisfaction and Profits with 10 Minutes of HTML5

Earlier this week I needed to setup a FedEx account to have a package delivered. Since I use my iPad for most web site interactions these days I decided to sign up using the tablet and the on screen keyboard. Needless to say the experience did not go well or I would not being this as a teaching opportunity. I was able to register, but it could have gone much better and taken quite a bit less time. So today I am going to show how spending about as much time as a typical user needs to register FedEx could radically increase customer satisfaction, increase new customer registrations and reduce overhead by having frustrated users contact FedEx support channels for help.

Mobile devices are becoming a common way to access the web and devices like the iPad, Android tablets and upcoming flood of Windows 8 tablets are large chunks of market share from classic desktop and laptops. Mobile commerce is growing by numbers similar to the mid 90s when consumers began shopping online in large numbers, giving way to huge growth in package delivery companies like FedEx and UPS. So having a quality tablet experience should be a top priority for FedEx and any company wanting to interface with modern consumers and businesses.

If I have not shared enough on my blog or you have not been to one of my recent presentations on mobile development I preach a mantra of developing touch/mobile first. This includes form design. The first rule of thumb in the modern mobile, touch first architecture when it comes to online forms is to minimize the amount of fields a user needs to complete. The next rule is to drive the soft keyboard to accommodate the user. Next you want to provide the customer as much guidance and real-time validation as possible. Fortunately HTML5 gives us some new tools to enhance input types with browser native functionality.

When you create a new user on the FedEx.com site it is a two part form. The first part collects basic contact and shipping information. The second part collects credit card information. Knowing what I know about e-commerce and shipping I am not sure they could streamline the fields in the forms much more than it is. But what they could do is spend about 10 minutes of time upgrading their form's markup to leverage the new input types and attributes to drive a much better user experience.

For a traditional desktop user these fields add some value, but where they really help is on today's touch interfaces, like the iPad. As I will show in the screenshots below there are numerous times the experience could be much improved with very little additional markup. As tablets and smartphones become more and more ubiquitous utilizing the new HTML5 features becomes a required feature of any web form.

To start with, the first time you load the FedEx site you are prompted to select your home country. Not to divert from the main thread of this post, but using the built in geolocation functionality would make this a lot nicer the majority of time. You have a drop-down list to select your country. And FedEx does list every single country in the world, which is a rather long list to scroll through. You may be asking why not just use the keyboard to type the county? And yes that would be a good option, but most users will not realize this is an option.

NOTE: Tap or Click each of these screen shots to see a full-sized version.

After selecting your country and you have selected to create a new account the registration form appears. Another side note, make the link to open the registration form more touch friendly, just saying.

Personally I wish the first field had focus automatically set, but this is not a huge deal to me. However you could use the new autofocus attribute to make this happen.

HTML5 Input Types - http://www.w3.org/TR/html5/states-of-the-type-attribute.html#states-of-the-type-attribute

E-Mail

The first field I have a real problem with is e-mail. Because all the text input fields are type='text' there is nothing special about any of them. HTML5 has some great new INPUT types to help users enter correct values. One of those new types is email. These new input types provide a couple of things that traditionally have been the realm of JavaScript. The email type will cause touch devices like most smart-phones and tablets to display an e-mail optimized on screen keyboard. If you notice the screen shot below you will see the keyboard is a traditional QWERTY keyboard. But when type='email' an e-mail optimized keyboard is displayed. So instead of the a large space bar being displayed the @ key is displayed. The QWERTY keyboard requires you to select the numeric keyboard to access the @ key.

Additionally when using type="email" automatic validation occurs when the form is submitted. Again this is very helpful to users. One thing I have learned over the years is how little our customers actually know about the data we are collecting from them, in particular what is and is not valid. So any guidance we can offer can go a long way.

A second thing to note is how the first letter is automatically capitalized. This is often problematic because many systems are case sensitive. This too can be dealt with by adding autocapitalize="off" to the INPUT tag markup. As far as I know this is an iOS 3+ feature and not officially part of the HTML5 spec at this time.

Auto Correct

The next helpful feature new HTML5 input attributes offer is turning off Auto Correct. Last week I discovered the site, DamnYouAutoCorrect.com and found my self laughing in tears for about an hour. Some question the validity of some of the auto-corrected conversations, but after being corrected numerous times by all the current mobile platforms I think they are very believable. Just yesterday I sent a message with 'Tom' in it and auto correct changed it to 'Turk'.

I find iOS to be extremely frustrating because the auto correct just happens and you have to go out of your way to not have text changed. So instead of focusing on the keys, and if you are not a teenage girl most likely this applies to you, you have to keep an eye on that little balloon and disrupt your typing flow to tap it so the word you are typing is not automagically changed to something completely strange.

Fortunately mobile Safari supports the autocorrect attribute. You can set this to either on or off. Setting it to off will turn off auto correct for that input field, thus freeing your users to type what they need. Which when filling in an address could be very helpful on just about any field. Think about how many times some odd sounding street name or town would be improperly corrected without the user noticing.

Postal Code

My next suggestion is the Postal Code field. In the US this is going to be a 5 digit value. Sometimes users will actually know their 4 digit extension, but this is very rare. In fact the FedEx form is configured for 5 numbers. So setting it to type="number" is the correct choice. This will display the numeric keyboard, making it really easy for users to enter the correct value.

By default the input field will display up and down spinner buttons on a numeric field. In WebKit this can be suppressed with the following CSS:

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

Applying the -moz- vendor code where -webkit- is used seems to suppress the spinner in FireFox. I tried adding -o- for Opera, but no luck. I am not even going to try Internet Explorer 9 because none of this is supported sadly. I believe we will see a much improved experience sometime next year.

I am going to sidetrack for a moment here because this is one of the things that has lingered with me for about a decade now. I have done hundreds of sites where a user needs to enter an address. Zip Code and address validation services are plentiful these days. I have had a full US zip code database for about 10 years now that I maintain through a subscription. It is real easy to lookup a city and state once the zip code is known. By convention we place the postal code field after the city and state, which make the user type both of those values. If you live in some city named by Native Americans you know what I mean.

With modern AJAX techniques, up to date postal code databases and address validation services I propose the conventional order of these fields be changed to Postal Code, followed by City and State. Not only are you releasing users from typing these values you are reducing the amount of errors entered that cause confusion later in work flows and create even more work later. In a few cases a user might need to select from a list of 2-4 cities covered by a zip code, but this too can be solved with a simple tap to select metaphor. For a company like Fedex this could probably eliminate thousands upon thousands of mis-delivered packages each year.

Phone Number

Back to how HTML5 can make registering for a FedEx account much easier, phone numbers. Again this is numeric, but we also need delimiters or at least the convention is to include grammatic delimiters like dashes or parentheses and dashes. I personally like periods or none at all. You can add some JavaScript to the mix to accomplish this, but with HTML5 comes the placeholder attribute. Here you can provide a valuable watermark to guide the user before they start typing in numbers.

Another new Input type is 'tel'. Like the 'email' type it will validate the user's input as a valid phone number using the native browser capabilities. It will also drive the on screen keyboard, making it much easier for the user to enter the correct values.

Credit Card

My next suggestion for FedEx's new customer registration is on the second page, where the user enters their credit card. The first field is really not needed. Credit card types can easily be detected using the first few numbers. 6011, for example means Discover, numbers starting with 5 are Master Card, Visa starts with 4, 3 === American Express, etc. But if you really must have the user manually chose a list of touchable brand icons are much easier for user to navigate. A user can simply tap the icon to select, swipe to select in Windows 8 and move on. Currently FedEx uses a drop-down list. While functional, not as simple. Icons are quickly recognizable and are easily touched.

Next the credit card number and security codes both need to be numeric fields. Since I have already covered this, I one spend more time here.

The next two fields are the expiration date. In the past I have use the exact same combination used on the FedEx site. However, in light of today's growing use off touch screens I think changing this to a more visible, touchable metaphor would be better. There are only 12 months in a year, so just list them, maybe in a 2 or three column list with the months touchable. Even a radio button list would work. Next the years, you are typically not going to need more than 10 or 12 years. Banks generally do not issue expiration dates beyond 3-4 years, but I have seen some as far out as 8. So covering 10-12 years should make you safe here. Again a touchable list is helpful.

One thing I did run into trying to select the year on my iPad was the list of years showing for a split second, then opening the list of months. I spent several minutes trying to select the year before I noticed the next and previous buttons at keyboard's the top left corner. I said aha! This was the tab button I had been looking for on the iPad. So I had to select the months then hit the next button to tab to the next field, the expiration year. I imagine 9 out of 10 users will not realize this and simply give up on registering, costing FedEx thousands of customers, hello UPS.

On a side note, I did consider the new date input types, but because this would lead to a user scrolling far in the future I thought it might not be as easy as just touching the month and year.

The remaining fields should all be numeric.

Finally, what about non-HTML5 browsers and those that do not support the Safari only attributes? This is where graceful degradation and polyfils come into play. Modernizr will 'fix' older browsers do you can still apply styles correctly to these fields, if you have created any custom styles. When a browser encounters a type it does not recognize it will just assume it is type='text' so the user can still enter the values be none the wiser. Also, yesterday Microsoft announced they would finally be automatically upgrading everyone to IE 8 and 9 yesterday, which is a huge victory for web developers everywhere! It also looks like Microsoft will support a large portion of the new input types and attributes in IE 10.

Another feature included in the latest Modernizr is Yep-Nope support. I wont cover that here, but basically it allows you to load any JavaScript functionality needed to implement unsupported new HTML5 INPUT features covered today as needed.

I have setup a jsFiddle page with some of the new input types needed for the FedEx updates for you to try out on your touch devices. I used it to create some screen shots and do some verification. I testing this sample in Chrome, Safari, FireFox and Opera as well as the iPad and a Motorola Xoom.

I hope this real-world example demonstrates just how easy it is to upgrade an existing form to make your users much more successful and satisfied with your web applications. My suspicions are if FedEx will spend about 10 minutes upgrading this registration form they will not only increase measurable customer satisfaction they will also have a measurable increase in new customer registrations. Applying these simple techniques site-wide will have an extreme impact for FedEx, especially when you count the daily volume their site supports. Even if your web application does not handle the same amount of volume as FedEx these simple techniques can go a long way to making you a success. Little things add up and mean a lot over time.

Posted: Friday, December 16, 2011 1:53 PM by Chris Love | 0 Comments

To Say Mobile is to Set A False Limit on Your Reach

I am really excited to be Tellago's Chief Mobility Officer. I have an official title that is chic and I get to play with a lot of toys everyday. No you cannot have my job! But there is something I think is misleading in that title and that is the term mobile. The term tends to be overplayed because it implies a certain limit on application reach that is unacceptable to me. To say an application is either desktop or mobile, consumer or enterprise is really bad and we need to change this perception.

The technology world is changing, radically fast. The way we interact with systems today is changing quickly from the fixed monitor, keyboard, mouse setup we have used since the 70s. The hardware and the way consumers interact with all the complex software systems that we have built in the past (and currently) has changed, period. It is a touch first, on the go consumer demand, the existing client experiences we have built the past two decades just cannot handle. This cuts across both consumer and enterprise platforms.

Instead of thinking about the traditional desktop with a keyboard and a mouse, think about the glass and other newer natural inputs like Kinect providing voice and body gestures. Think about your users usage context. Are they walking around, at their desk, in their car, on the train, at lunch? How can you make them successful as quickly as possible.

Is you user going to be moving between client devices? If so how much have you considered continuous client capabilities? Can your customers easily flow from one context to the other without a disruption?

These are all modern things software architects must consider when not only architecting the client user experience, they must also consider how the backend is structured. Is your backend flexible enough to allow for varying clients to use? Is your backend scalable and available? Have you heard about the cloud and considered how that might change your strategies?

Is your organization or customer consumerized yet? Do you even know what I mean when I say consumerized IT? If not you really need to check with your employees to find out how many have brought in a smartphone or tablet to your corporate environment. Next, ask how many would like to have access to their business applications from those devices and how are you handling these demands?

If you don't think that makes a difference I say think again. Unemployment may be high at the moment; but good, forward thinking employees are in high demand. Having a modern technology environment can go a long way in attracting new, higher quality, more productive employees to fill those positions you have and no I am not limiting this to just technology workers.

Recently Mark Zuckerberg and Sheryl Sandberg talked about the lack of qualified technology employees in an interview with Charlie Rose. You think the employees Facebook, Apple, Amazon and other high profile/successful startups want will come to your outdated environment?

Just this weekend I was talking to a friend who works in a large company with a national footprint about the use of mobile technologies. Eventually, as it seems to always degrades, he said something like 'you have to understand my company is behind the times...". How many times do I hear this from just about everyone working in a traditional enterprise? It is depressing to think about. I even feel the depression oozing out of the person saying it. It's self-defeating. I think it is sad that far too many adults are so averse to minor risks and a chance at being a linchpin and leading their industry. Even more important, do we have a civilized society that has grown to repressing innovations from our employees?

Modern applications are mobile, but they are so much more. Modern applications are touch and context friendly. They are not developer first applications. They make users successful and provide multiple moments of delight. How many times have I heard friends, family members and customers say they want computers (ie software) to just work? More than I should. This tells me we have failed up to this point creating applications that users actually want. Our customers should look forward to using our software the way an 11 year old boy can't wait to come home from school to play a video game or watch his favorite ninja cartoon. Applications should be so easy to use that a 6 year old can pick up a device and find ways to be productive without any help.

As I evaluate user experiences across the mobile platforms I still see this outdated philosophy being used. I love the Windows Metro UI, but as I survey the marketplace I dare say less than 5% of the available Windows Phone applications really implement it. The Apple UI is over simplified and boring. The Android applications scream developed by a developer for a developer.

There are a few applications that break the boundaries and create great user experiences. Flipboard is my go to application, a simple news reader if you break it down technically. But it has made reading the news an experience I look forward to ever evening after diner. Think about the news readers we have all been using for the past 20 years (yes I am thinking back to my NNTP days in college). They all look like Outlook or even cruder. They all use the same basic tree display where you can group things by topics, maybe, and then drill into news sources by name then articles. On the right-hand side you typically have a content panel where you can read the currently selected article, boring and tedious.

Flipboard not only allows you to flip pages it flips the tired news reader metaphor on its head and shakes it all up. Now headlines come more to life as you read through the day's articles. Each page is laid out slightly differently than the previous page. Images are included with the headlines along with the short description or first few sentences of each article. I get to experience every single article in a quick manor by scanning and open the articles I want to read further. This is something classical printed papers have always offered that always seemed to be missing in the digital, RSS heavy world we live. But even better, the content is overwhelming, not the application. I touch the story to open it up, I can physically connect with the data.

If you have spent time like me at least watching the many sessions on Metro UI from BUILD you witnessed Jensen Harris perform a similar transformation with one of the sample news reader application.

http://channel9.msdn.com/events/BUILD/BUILD2011/BPS-1004 (aprox 20 minute mark)

Basic News Reader Before Transformation

New Metro Styled News Reader

Flipboard is not the only application breaking the boundaries, I see others that are not afraid of disrupting the accepted limits for their market. But where I see this failing in a big way is inside the enterprise walls. Big monolithic style custom business applications are just poorly done. The experience is typically not user and data focused, at least not as much as you think. If you think you are different you probably are not. I have built many of these systems and most likely so have you or at least been a part of one of those projects. It could be a completely customized from end to end solution or a customization of a big provider's application like SharePoint or SAS, etc. It could even be seen as a success when it is launched, but visit that application in a year or two and see if you have the same feelings.

I think enterprises, and honestly let's go ahead and lump consumer applications, fall into the false limits group. This is where you say this is how everyone else does it so we have to do it this way because it cannot be done any other way. Don't get me wrong I really do not want to revisit PowerPoint 95 or GeoCities experiences by any means. But I do want to challenge you to think about the false limits you set for yourself and your organization. I think the Blog post that has stuck with me the most this year was penned by Seth Godin back in March, Accepting False Limits.

"The key to this disconnect is the unspoken part about time and effort and fear. I agree that you will never ship that product or close that sale or invent that device unless you put in the time and put in the effort and overcome the fear. But I don't accept for a minute that there's some sort of natural limit on your ability to do just about anything that involves creating and selling ideas."

Seth is great and I enjoy reading his Blog each week. But he is not the first person to challenge me in this way. I had a history/psychology teacher in high school who preached the same thing. Nine seasons of high school and college football saw me challenged the same way over and over again by coaches, teammates and situations.

Today we have a great opportunity for all of us in the technology sector because the cloud and the easy access to touch first, mobile devices have empowered not only our end users but us. We can build some really awesome experiences. Earlier this week I was watching a video Samsung released showing a transparent, flexible, touch friendly mobile device. I mean, how cool is that? What could I do with that? [insert Minority Report reference here].

Also earlier this week Jesus Rodriguez, the visionary behind Tellago, posted a rather long post on a similar topic, Enterprise Software Sucks but it Doesn’t Have To.

In it he points out many valid points the enterprise must consider. But he and I both don't want our pontifications to feel like a beat down, but rather a pep talk. We here at Tellago believe this and are pushing ourselves, customers and the entire industry to embrace emerging technologies to properly push things forward.

"I see enterprise software as one of the biggest opportunities to drive change to the business world."

Mobile adoption is forcing a change to a great new set of software experiences. Behind the curtain the cloud is empowering us to build the necessary back ends to make these interfaces truly viable. Mobile is much more than just a phone or a table,t its about a new client medium that is preferred by customers. We must rethink the way all of us think about our applications, both consumer and business focused. If you are unwilling to think about touch and mobility then you are actively choosing to ultimately fail. You will fail to attract customers and employees that will carry you to the next big movement in another 10-15 years. Can you afford to take that chance? Can you reinvent yourself and your classical environment? Maybe you and your organization should just be the focus of an episode of Hoarders instead. Now is the time, we have a real, tangible opportunity to clean out the junk we have accumulated over the past 20 years.

Posted: Friday, December 09, 2011 12:42 PM by Chris Love | 1 Comments

Filed under: Opinion, Mobile, HTML5, Touch, enterprise mobility

Black Friday SmartPhone Deals on Windows Phone

So you want a new phone or are thinking about getting a new phone for someone. Amazon has the deal for you. A few days ago I wrote some hands on reviews about some of the new breed of Windows Phones I got to hold. They are all very strong phones with the great features and functionality offered by Windows Phone.

Amazon is starting this year's Christmas season off in style offering all their non-iPhone smartphones for only a penny with a service contract. This means there should be little to no barrier to get that new Windows Phone! This means you can get the new Samsung Focus S 4G if you are in AT&T or the new HTC Radar 4G on T-Mobile. The Focus 4S, Titan and Radar are all 4G capable phones. Sprint customers can upgrade to the HTC Arrive (which is my primary phone). Verizon customers can get the HTC Trophy.

All these phones run the Mango version of Windows Phone and should receive next year's important updates as well. As of this afternoon I still have not seen the monster sized HTC trophy listed on the Amazon site, except for the unlocked version.

So if you have been considering a phone upgrade this is certainly your greatest opportunity. Remember Windows Phones are the only phones that come with Microsoft Office and XBox capabilities built right in. of course tight Facebook and Twitter integration are included.

Personally I have an iPhone, Droid and Windows Phone. Windows Phones does a great job hanging with the iPhone experience. Even USA Today featured an article touting Windows Phone, “The Windows Phone platform is a total joy to use”. The only drawback is the weak browser, but for a typical consumer this is not going to be too prohibitive. As far as Android I find it to be a chaotic platform to say the least, not very consumer friendly in my opinion.

So go, get that new smartphone, or three for you and your family this Christmas.

Posted: Friday, November 25, 2011 10:38 AM by Chris Love | 0 Comments

Filed under: Mobile, WP7, Windows Phone 7

2 Years Still Thankful for Tellago

Two years, it's hard to comprehend how fast the time has flown and how much my life has changed. November 2 marked my two year anniversary with Tellago and I thought I would try to express what these past two years have been like today, Thanksgiving. Back in July 2010, after about 8 months after joining Tellago I wrote about my experiences and thankfulness at the time.

Honestly not much has changed, I can still say those expressions are still true, which is a good thing. In that first post I wrote about the culture here, where I had been in my life both professionally and personally. Since that post Tellago keeps expanding with some extremely talented folks. We honestly do push each other, a lot and ultimately bring out talent I am not sure we could have found on our own.

Since April I have been working on Moesion with what I can only categorize as an all star team. That sounds great, but you should have been in some of our meetings this summer. Fire and passion are two words that I like to use. So much so I found myself having to take some rather long walks to cool off or collect my thoughts. In the end though I firmly believe we won. We not only created what I truly believe is a groundbreaking tool, we have created some amazing new architecture that will only lead to even more great things. And that is something not many companies, especially Tellago's size can say.

Tellago Twitter Accounts

Jesus Rodriguez	@jrdothoughts
Gustavo Muchado	@machadogj
Jose Romaniello	@jfroma
Pablo Cibraro	@cibrax
Vishal Mody	@modyvishal
Leandro Bofffi	@leandrobuffi
Nico Ibarra Salazar	@nycklander
Uri Katsir	@urikatsir

The culture at Tellago is something else. I am not sure I could thrive professionally or personally in a typical enterprise like I have been able to the past two years. My mind never shuts down, but there are things I have to do as a person. Somehow there is a natural balance afforded by the Tellago lifestyle. Honestly I don't think my co-workers minds shutoff either, so we get each other.

Tellago is a split personality, we have both a consulting and startup garage, Tellago Studios. On one hand we have a steady stream of growth fueled by the demand for our consulting work. This means we have a steady stream of income and opportunity to never loose touch with real world problems and needs. On the other hand we have Tellago Studios, which gives us a valuable outlet to express ourselves and push the boundaries that we might not have the opportunity to do if we just focused solely on customer work.

Actual Tellago Family Portrait

Each Friday afternoon as a company we stop for an hour, put on our headsets, turn on our video cameras and spend an hour talking about technology. This is our weekly Dojo, and we cover a broad range of topics, from big data, to mobile, to node js and more. Being a geographically dispersed organization this give us a chance to visually connect with each other. Personally I find it nice to see my coworkers once in a while, even if it means shaving before noon :). The topics are often something new that I might otherwise not have the time to explore. And because Tellago is comprised of a diverse talent pool we always seem to have someone with firsthand topical knowledge.

For me the past year has been full of challenges and rewards. In late October 2010, Jesus sat me down and asked me to take the mobility lead. I was excited because I knew this would be a fantastic opportunity to focus on an area I was becoming fascinated with as well as a lot of responsibility. I think the past year has been wonderful for me because I have not only had a chance to take a lead, but challenged myself and the team to push boundaries that not many other places have gone. If you get a chance to use or review Moesion I hope you realize what I mean.

Life in Tellago is not for everyone, but in Tellago we have roles for many. Not everyday is perfect, but more often than not you find yourself with that exhausted feeling of a great accomplishment. You also find yourself sharing joy and excitement each week with the victories your Tellago family members have earned. One thing I believe is required of everyone is passion, a love for technology on the edge and a connection with those you work with. Over the past 2 years there have been days I had to question myself, and feel the exhaustion but reflecting over the past 24 months I have to say I am at a place I feel like I fit well, that meshes with my personality and goals. I am truly thankful to be part of Tellago.

Posted: Thursday, November 24, 2011 11:57 AM by Chris Love | 1 Comments

Filed under: Personal, Tellago

How To Invoke the JavaScript Console on Your iPad

Debugging AJAX on a mobile device is tricky at best. There are no Firebug or F12 tools available. This means we do not have a nice way to set break points or step through our code when there is an error. Not to mention how do you even know when there is an error or what error actually happened?

Invoking the Mobile Safari, iPhone & iPad, is actually pretty easy. You need to open up the settings on your iOS device, then select Safari. Your screen will look like the following:

At the bottom of the screen you will see a Developer line. Touch it and you will now see the following:

Simply touch, not swipe, the On/Off toggle to the right of the Debug Console line. Now when you open any site in Mobile Safari you will now see the Debug Console bar at the top of every page. Anytime the console.log or console.[anything] is used on the page you will see it reflected in the debug bar. When an error is logged you will see that as well. To actually see the log, just touch the debug bar.

While this is not a perfect solution I have found it to be extremely valuable when troubleshooting my mobile applications. iOS is pretty easy, Android has an option available and I hope to write about it soon. At this point I do not know of anything available in Windows Phone.

Posted: Friday, November 18, 2011 8:55 AM by Chris Love | 1 Comments

Filed under: Mobile, iPad, iPhone

Hands On With New Breed Of Windows Phones

Last night I had an opportunity to attend a Windows Phone Inner Circle event where I got to try out many of the newest Windows Phone handsets. I even won a new HTC Titan, which is just a beast. While I was really excited to hold and experience these new phones actually running with something besides the in store demos you see at the local AT&T store, I was disappointed not to see one of the new Nokia Windows Phones. I am going to share photos, specs and impressions about each of the phones I got to examine.

HTC TITAN

Can I say this phone is appropriately name. It is the largest mobile phone I have ever held. The tiles on the home page are large and viewable from across the room. If my mom were on AT&T this would be a great phone for her. The touch targets are nice and large. The soft keyboard is not as clumsy as most because the keys are almost large enough to tap confidently like you could on a small laptop’s keyboard.

Despite it’s amazing size it is still a lightweight machine packing a 1.5GHz processor with 16GB of onboard storage. It also has a front-facing camera, which is actually useful and fun. This will come into play as Windows Phone users start using Tango and a much anticipate Skype application. The rear camera is a nice 8MP and does have a drastic difference in quality compared to the 1.3MP front camera.

HTC RADAR

This unit is getting some nice exposure with a frequently run T-Mobile commercial. Compared to its sibling Titan this handset features a modest 3.8” screen. It also has a 1GHz processor and 5MP camera. Currently it is listed as a $199 T-Mobile phone. You should also note this phone supports 4G.

SAMSUNG FOCUS S

Again the Super Amoled screen is awesome on this successor to the popular Focus. A nice sized 4.3” screen with a 1.4GHz processor. It is very similar to the HTC Titan in everything else. The Samsung Focus S is sure to be another extremely popular Windows Phone

ACER ALLEGRO

This is Acer’s first entry in the Windows Phone world and it looks like this phone is available in France. I don’t expect this handset to be available in the US anytime soon. It is a nice sized phone, 3.6” screen, which compares to the first generation Windows Phones. A 1GHz processor and 5MP camera makes it pretty close to my HTC Arrive.

Fujitsu IS12T

The first Windows Phone featuring Mango was this Fujitsu IS12T handset. The unit I got to hold sported a hot pink case. Its specs are similar to the ACER unit, its screen is 3.7”. This phone is currently available in Japan and other parts of Asia.

LG Jil Sander

If you are like me you have to be asking yourself, why did LG name this Windows Phone the Jil Sander? Turns out Jil Sander is a fashion designer that is becoming big in wearable electronics. Again, not a US available handset, and sports similar specs to the ACER and Fujitsu handsets. It does have a 3.8” screen. One thing I did like about this unit is the phone’s buttons were not actually part of the screen, but part of the plastic chrome at the bottom of the phone. This should help unintentional swipes of the Windows, Search and back buttons while you are playing games! The phone itself was also different in that it sports a plastic casing, where other handsets are much more metallic.

AT&T and T-Mobile are the US carriers sporting new Windows Phones handsets. But as you can see there are many new phones for non-US carriers. All in all the new handsets are great. It’s nice to see both HTC and Samsung offering Windows Phones on some of their premiere handsets.

One thing that stood out to me is how light most of these phones are. My primary phone is an HTC ARRIVE (Sprint), which features a QWERTY keyboard. While I hesitate to say it is heavy, I will say it is solid. I think it might event be fair to say if the iPhone had a QWERTY option it would feel very similar. None of these new phones sported a keyboard and were all really light in the hand. Heck the first time I held the Focus S I thought it might have a negative mass! In reality it’s a miniscule 119g, which is nothing when compared to my HTC Arrive or iPhone 4.

Each of the handsets were fast and responsive, even the 1Ghz units. I think that is a testament to how well the Windows Phone OS has actually been engineered.

Compared to my iPhone 4 and Android phones these handsets are just as good. In fact compared to my Android handset all these phones seem much better. Hopefully Microsoft’s changes in marketing the Windows Phone will start paying off. These new handsets will certainly help.

Posted: Thursday, November 17, 2011 12:56 AM by Chris Love | 2 Comments

Filed under: WP7, Windows Phone 7

Better UX Through INPUT Tags And Why They Are Important For Mobile

As browsers adopt more and more HTML5 goodness developers need to be cognoscente of new features to create better and better user experiences. As far back as I can remember the INPUT element has been a workhorse that allows the web to collect information from users. You have always been able to specify if the input field is text or a password by setting the type. Other options include buttons, checkboxes, file uploads and just about anything else we have needed for basic data entry.

As users and platforms continue to mature it has become more and more evident that type=”text” was just not going to cut it. Too often a developer has been forced to use something like the masked edit plugin or some other JavaScript to format data and limit certain character inputs. This often meant adding a class hook like class=”phone” or class=”email” to drive a custom engine. As the world races forward with newer natural user inputs like touch the need to drive specialized soft keyboards has become more important.

The Current Chrome Support for HTML5 INPUT Types

Fortunately HTML5 helps us out. New INPUT types expand the usefulness of this long-time friend. We now have a quick way to define a native color picker, date/time inputs, email, numbers, ranges and much more. Of course browser support varies, but all the modern browsers support search, tel, url and email. Opera supports all the new HTML5 INPUT types. Of course Internet Explorer 9 does not support any of the new types, which also carries into Windows Phone.

Chrome Doing Native E-Mail Format Validation

Chrome Doing Native Required Field Validation

Opera Displaying a Native Color Picker

Other than providing some guided input features one of the great advantages these new input types force is the display of a tailored keyboard. For example when a user is on a SmartPhone or tablet with no QWERTY keyboard a soft or digital keyboard is displayed on the screen. If you use one of these phones you quickly realize there is a lot of extra tapping that must be done to switch between the lettered keypad to the numeric to the special character keypad. Which when you are typing an e-mail or url quickly becomes a nuisance. Fortunately the majority of mobile platforms will honor the new HTML5 input types and display a more appropriate soft keyboard, giving the user a much easier way to enter the desired characters as they are typing with their thumb.

So as you are designing your next web form please leverage these new input types. You should also include a good polyfil library such as Modernizr in your page to ensure you can style these types correctly for Internet Explorer. The benefits of these new input types really shines on SmartPhones and today’s tablets.

Posted: Wednesday, November 16, 2011 7:42 AM by Chris Love | 1 Comments

Filed under: User Experience, UX, Mobile, HTML5

Making hashchange Work Better on Windows Phone

Recently I have been creating single page web applications utilizing URL fragments. Essentially this is a new twist to an old technique that has been around for a very long time. While not used as much these days I remember around a decade ago a common technique on long pages was to provide links to sections, like the link I provided to the W3C about URL fragments, http://www.w3.org/TR/WD-html40-970708/htmlweb.html#h-4.1.1. notice the #h-4.1.1 fragment at the end of the URL? That tells the browser to look for a DOM element with the name property of ‘h-4.1.1’. When the browser locates the element it scrolls the page so the element is displayed at the top of the page.

That technique is a bit dated these days, but as the use of AJAX has grown a new set of problems have emerged. As a use interacts with AJAX applications data is sent and retrieved to and from the server, thus changing the state of the application. As this occurs the user may want to use the back and forward buttons as if complete new pages were loaded. But since everything was changed within the existing page, pressing the back button takes the user to the actual page or site the visitor had open before the current page. This is very problematic for both the end use and application architect.

The use of URL fragments helps us solve this problem to a large degree because each time the URL’s hash is changed a new entry is placed in the browser’s history array. The browser also fires the hashchange event, or at least it is supposed to. A modern web application should bind an event handler to the window’s haschange event to hydrate the page or view accordingly.

While I plan on talking more about single page web applications in the coming weeks today I wanted to focus on what seems to be a bug on the Windows Phone.

When I first tried out one of my single page applications in the Windows Phone Mango emulator (this was before it was available on my phone) I noticed the back button not responding correctly at all. I would have to hit back several times before the back action would actually kick in, especially on the home page. I checked and double checked everything on my phone, desktop and tablet. The only platform I could recreate this issue was in the Windows Phone emulator and my Windows Phone (then running NoDo).

Just to make sure it was not my code I tried some mobile web sites using jQuery Mobile and SenchaTouch I knew also used the single page architecture. Sure enough they were failing as well.

Without going into great detail on my fix here it is:


    var target = $.bbq.getState("target") || "";

    if (target === "") {

        $.bbq.pushState({ target: "#home" });

    } else {

        $.movies.loadTargetedPage(target);

    }

To manage my URL fragments I rely on the Back Button Query plugin. It has two important methods, pushState, where you push the values wanted in the new URL fragment. The getState method simply retrieves the desired portion of the fragment. Here I am using a parameter named target to identify the element’s id I want to display.

In the sample above I get the current value of the target parameter if it is empty I then immediately push a value. “#home”. This causes the browser to essentially do a refresh and seeds the browser’s history array somehow. If the target parameter has a value then the logic proceeds to hydrate that page.

Applying this fix does not seem to cause any harm to other browsers that are not afflicted with this deficiency. It does require you to handle this situation appropriately though. In other words you can’t just rely on the jQuery ready method to be the place you kick off the page hydration, you must isolate it to the hashchange event handler. Which once you change your mindset to function well within a single page concept is not so hard.

I have seen a few other sites using what I think is this same technique once I became aware of the problem. This tells me there are other browsers and platforms I have not investigated where this is an issue. For me I have only been able to recreate it on Windows Phone. This does fall into the category of I don’t know why, but I know this solved the issue for me. So if you know why or have a better fix, please feel free to share.

Posted: Tuesday, November 15, 2011 11:11 AM by Chris Love | 1 Comments

Filed under: AJAX, User Experience, jQuery, UX, WP7, Windows Phone 7

Creating a Mobile Web Application on the iPhone and iPad

What seems like one of the least known features in the mobile web space is the ability to create a web app on the iPhone and iPad. If you hit the button in mobile Safari you will have several options. One is “Add To Home Screen”. This gives you the ability to add a bookmark to the home page, making it easier to launch the site. It can also put you on equal footing with native apps.

Having a home page icon, even if it is a simple screen shot is nice. But there are several things you can do to make this feature give you even more leverage. You can add a META tag to designate your application’s icon. There are two more META tags you should also add, apple-mobile-web-app-status-bar-style and apple-mobile-web-app-capable. These two META tags will drive the experience to be like a native application. You also need to set the Viewport to match the device’s width in the page’s Header. This you should do for any mobile targeting web site. The last feature you should probably add is some code to let your user’s know they can add the application to the Home Screen.

Adding an Apple Touch Icon

Having a proper icon on the device’s home page is a big deal when you want to establish your application. iPhone and iPad allow mobile web developers to designate the icon used with the apple-touch-icon META tag. The Apple Touch icon is similar to the favicon, but better. Where the favicon designates the icon to be used in desktop browser’s address bar the Apple Touch icon is used on the iOS home screen and sits with the native app icons. Ultimately the end user experience can be a native app experience.

If you download the Mobile HTML5 Boilerplate it includes the proper META tags as well as Touch Icon placeholder images. This should serve as a good starting point for your application. From there you should design a proper icon to represent your application. You can do this in any graphic editing tool, like Paint.Net or Photoshop. There are also a few online tools, but so far I have not been impressed enough to recommend any of them.

Can You Spot the Touch Icons for The 2 Mobile Web Apps?

The Touch Icon is a key feature of a mobile web app, but there are still more features to implement to fully create a web app.

The Apple Mobile Web App Meta Tags

The next META tags you should add to your application tell iOS to run your web application like, well an application. The apple-mobile-web-app-capable tag says, I am an application treat me as such. So when a user has added your web application to the desktop and they touch your icon (see above) the application will launch as a native application, without the Safari browser chrome.

<meta name="apple-mobile-web-app-capable" content="yes" />

When the web application is launched using this feature the device’s status bar is still displayed. You can designate if the bar is translucent black or black using the . If you use the black-translucent the application will display using the full screen with the status bar overlaying the top few pixels of the application. If set to default or black the application will be display below the status bar.

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

The only drawback to this technique is the application is run using a previous version of the Safari JavaScript engine. The only reason I have read as to why is Apple claims there is a security reason for this. Personally I have not noticed any issues to date, so I am not currently too concerned about this.

Notifying the User To Add A Web App To The Home Screen

Finally, to bring this all together it helps to tell your user they can add your web application to their home screen. After all if they don’t add the application to their home screen all these advantages do not materialize. As main stream apps like Amazon’s Kindle and Financial Times web apps launched earlier this year I noticed they helped users add their apps to the home screens.

Matteo Spinelli has created a nice little script to invoke this prompt. It works for both iPhone and iPad.

So I hope this post helps you make your web applications more native. While Apple seems to be the only mobile OS provider that has grasp these concepts you can add a nice icon to the home page on your Android as well. It does honor the Apple Touch icon META tag. Sadly Microsoft does not have anything similar available for Windows Phone. Personally this is a big deal and both Google and Microsoft really need to jump on and extend these features. For example opening up the live tile feature to web applications should be a no brainer for Microsoft. I am not holding my breath and fully expect them to ignore this potential competitive advantage.

Posted: Friday, November 11, 2011 8:32 AM by Chris Love | 1 Comments

Filed under: User Experience, UX, Mobile

The Death of Flash and Silverlight

This week there has been news that Silverlight 5 might just be the last version of the technology that never really seemed to get any real traction. This morning I woke to several stories about Adobe killing any further development of it's flash mobile plugin. Both Microsoft and Adobe seem to understand the future of client development does not lie in a proprietary plugin technology, but in HTML5.

Flash has long been the standard bearer of richer experiences inside browsers. Designers have often deferred creating real web sites to making them entire flash applications. As a developer I have always questioned this strategy for many reasons. First is the misuse of the technology that often leads to a very large application payload a user had to download. Next is it meant death to search engine optimization.

When Silverlight was first released I was really interested, honestly I was. I actually read Adam Nathan's new XAML book on the flight from RDU to Vegas for MIX that year. I liked it because it seemed like something as a .NET developer I could negotiate and the demonstrated user experiences were really stunning, far better than I had ever even seen imagined with Flash.

I remember being at a party later that week chatting with someone involved with Silverlight's development. I asked him when it would be included with Internet Explorer? His answer was no, they would not be doing that, users would have to manually download the plugin. At that moment I felt it might be doomed before it ever got started. I try to stay in touch with real users out of necessity and I knew that would not go over well. I think that has played out over time with less than 3/4 users installing the Silverlight plugin.

But I was still willing to think this was going to work out. I even called my mother to tell her how cool it was. Now before you laugh, she was running an online business at the time and wanted to know how she might leverage Silverlight. As soon as I could get the SDK installed I did and started my adventure to create some rich user experiences.

I quickly figured out this might not work out. Silverlight development is darn hard. I mean it is easy to get something working, but to do something well it is extremely hard. If you survey the Windows Phone marketplace you quickly see what I mean. If not then you are never going to get it.

Now for Flash. This has been a degrading option over time in my opinion. I did not like it in the 90's and I have never liked it since. It is a memory and CPU hog. The best thing that Apple may have ever done is to not support for Flash on the iPhone. I have several Android devices, 2 tablets and a phone. Nothing drains the batteries faster then watching a flash video. My laptop CPU just races and the entire time and the unit gets over heated often when something Flash is running, including YouTube.

I chuckle when I see Android commercials touting Flash support. Unless you are a geeky geek this means little to nothing to you. I think about the 'normal' people I am friends with on Facebook and the messages and comments they make about my tweets. How most of them comment they get really lost reading them. I also see them talk about their phones and I see a lot of confusion about the Android platform. They just want to watch YouTube. And let's face it I can watch YouTube on Windows Phone, my iPhone and any other platform without using Flash.

Bringing this full circle both Microsoft and Adobe are abandoning Silverlight and Flash in favor of the superior option available today, HTML5. I feel justified in saying superior because to end users it's just there and to developers there is nothing crazy they have to learn. Recently Adobe purchased Nitobi, the parent company of PhoneGap. Adobe has also purchased some companies that own HTML5 editing tools, etc. Their public line going forward is Flash will be used to create cross-platform native applications.

Panic seemed to overtake the Silverlight ecosphere this time last year when it was overshadowed at the PDC to HTML5. Of course with the Windows 8 announcements opening up HTML5 on Windows 8 the days of Silverlight are numbered. To a lot of developers this is bad, because they have invested a lot of time and resources in what they believed to be the future.

What does this really mean? Well first I feel more and more justified in the path I have chosen over the past 4-5 years, one where I chose to become proficient in AJAX, HTML and CSS instead of Silverlight. When I really sat down just over a year ago to survey mobile development options, I just could not for see a world where every application ment having 3-5 different client applications. I know the realities of cost and expertise that requires and I know in the long rn users, small businesses and corporations just cannot tolerate these expenses. The power of an application is not in it's platform specific application and the overbearing regulations imposed by the platform owners <cough>Apple</cough>. It is not about a locked down tool like Silverlight or Flash, it's about the data, the end users and their sense of ownership and portability.

Because of this the future of mobile is HTML5 and mobile web applications. For now, there are a few restrictions, but if you know about the device APIs you should realize those few limitations are going away in the near future. In fact I will go so far as to say the platform that adopts these APIs the soonest will gain the most <cough>Microsoft R U Listening</cough>.

Honestly I don't see Android as being that platform. Apple has a huge lead right now over Microsoft. Microsoft really needs to upgrade the mobile browser experience ASAP and by this time next year Apollo must support a majority of the Device APIs.

Just because Flash and Silverlight are basically dead does not mean rich user experiences are gone. Just the opposite, they have laid the foundation. I take it almost as a personal challenge when I am told I can't do something in HTML5 that I know can be done. I recreate native control experiences all the time, and others have too. So don't cry about loosing your proprietary platform of choice. If you learned about making great user experiences you can be right at home using HTML5. If you only learned the platform (i.e. Silverlight or Flash) you still have a curve in front of you. I have been in the camp that's has said these technologies are coming to an end and felt sort of vindicated this week to read as much.

Posted: Thursday, November 10, 2011 9:07 AM by Chris Love | 1 Comments

Filed under: FLASH, Silverlight, Mobile, HTML5

Touch Friendly Design – Bringing Life to Lists

Yesterday I talked about how creating traditional <A> driven navigation can be problematic in today’s touch first world. In yesterday’s demonstration I pointed out how using hyperlinks and a traditional menued navigation scheme can lead to user error when touching a target. Today I wanted to extend my thoughts by showing how even using a hyperlink in a list of links can be just as problematic.

The iPhone has made the use of vertical list common. Often menu options are listed on top of each other with some sort of gradient behind them. This is an iOS convention and creates what is known as pogo sticking as a user jumps from one page to another.

The problem I often see is just the text is the active action item in the list. This means the user has to touch the text itself to invoke the desired action. Of course if the text is large enough, say 24px or more and long enough (think several words) the odds of success can be high. But often this is not the practice. Complicating matters is developers still using <A> tags to link to the target page.

Instead of using a hyperlink that wraps the text my experience is telling me the better way is to bind a click event handler to the container <LI> element. This means no matter what text is contained inside the list item when the user touches anywhere in the list item it will invoke the desired navigation action.

I also recommend adding enough padding to provide a reasonable separation between the text in each list item I have found that at least 6px of padding between text works well. This means a padding-top:3px; padding-bottom:3px; should be used. Of course you can increase those values as needed.

As we built Moesion we ran into this issue. Initially we followed the common guidance of making the text a hyperlink. But quickly I realized this was more folly than good practice. I found myself having to tap, tap, tap to get a response and on top of that I often wanted to touch to the right side of the list instead of the left, where the text is located.

In the above screenshot from the SQL Server Moesion application you can see how varied each list item can actually be. The first column in this table is simply named Id and the 5th column is IsOpenedInNewWindow. So the potential row’s text length is all over the place and completely unpredictable from a client layout perspective. Our Moesion application actually retrieves the information from the server, which our customer has defined their own SQL databases, tables and their column names. So 2 letters to 256+ letters is the potential text length.

So after the initial experiences I decided it was going to guarantee a much higher user experience (meaning the user would successfully touch the desired target) if we abandoned the hyperlink model and opted for a click event hander bound to the <LI> instead. On a side note, this also made adopting a single page application model much easier too.

If we examine the code it looks something like the following:

$("li.sql-column").click(function(e){



    e.preventDefault();

    e.stopPropagation();



    window.location = "{my target url w/params}";

});

A pretty simple jQuery click event handler. Adding the e.preventDefault and e.stopPropagation just ensure nothing bubbles up past the <LI> and our click event handler. This can be important when you have nest elements that respond to click (or touch events) differently.

What about search engines. First Moesion is a Line of Business application so search engine ranking inside the application is not desired. But what if I had a public facing web application, like a product catalog? Right now my answer would be to include the hyperlink somewhere within context, but make it not so prominent as to intrude. The other step would be to capture the hyperlink’s click event and stop the default action (more on why in another post). This way the search engine spider can still consume the link and give you the link juice you desire.

$("li.sql-column, li.column > a").click(function(e){    

    e.preventDefault();    

    e.stopPropagation();    

    window.location = "{my target url w/params}";

});

Expanding a user’s potential touch area can radically increase your user satisfaction and does not have to impede your search engine strategy. This does require you rely on more modern AJAX techniques over legacy hyperlinking. This is one of the first steps required to start leveraging modern web application architecture. The problem is not limited to just mobile web or web sites, it seems to carry through to many native apps as well. So adopting this strategy for any touch-first application can be very beneficial.

Posted: Wednesday, November 09, 2011 8:34 AM by Chris Love | 0 Comments

Filed under: AJAX, User Experience, HTML, jQuery, UX, HTML5

Touch Friendly Design–Making Touchable Targets

The way we design application clients has radically changed in the past couple of years with the proliferation of SmartPhone and tablets with touch screens. Touch is the newest common user input methodology. Sadly it seems to be broadly ignored by the developer majority. By this I want to call attention to the way we design modern web and native mobile applications, which tends to retain aspects common to legacy web sites.

In particular the use of anchor <A/> tags and other small action points that are not difficult to reach with a mouse. Now that I have tablets and smartphones in my life I spend more time consuming content (i.e. reading) on my iPad than I do on my laptop. Instead of moving a mouse cursor around the screen I am directly touching the navigational target or content I want to interact with. As smartphones and tablets gain a larger and larger market share this is becoming more common across all aspects of computer usage. But it seems developers are still stuck on legacy techniques that make touch interactions frustrating in many cases.

One of the most common scenarios I have encountered is the display of a traditional desktop, mouse-friendly web site. Why is this a bad thing? Traditional navigation uses hyperlinks, which are typically limited to just the text. Another thing that often does not translate so well to a touch device is drop-down menus.

I was near a Fry’s last week (thanks Desert Code Camp!) and wanted to see if they had a new battery for my laptop. Bringing up the frys.com site on a phone loads the desktop site, a bad thing in and of itself. But they desktop site, even if this was a tablet is difficult to navigate because the navigational targets are too small and too close.

Frys.com Homepage on the iPhone – Think How Hard It is to Touch Navigate

Why are hyperlinks a bad thing, how else are you going to traverse through a web site? Well by nature they are not touch friendly. Unless you make explicit efforts to control the dimensions, padding and margins of a hyperlink the size of a hyperlink touch target is limited to the text wrapped by the <A/>.

If you read the Apple Human Experience Guidelines you see a recommendation of at least a 44x44 pixel square for a touch target.

Give tappable elements in your application a target area of about 44 x 44 points.

-Apple User Experience Guidelines

The Microsoft touch point recommendation is for a 9mm square. The reason they recommend 9mm is after conducting a large set of user testing. They found that users make fewer mistakes when targets are bigger and the 9mm target offers the best set of balance between hit rate success and layout flexibility.

As a side note, I find it interesting that Apple chose to recommend a size in pixels, where Microsoft chose millimeters. While 44 pixels is much easier to the average web developer to understand, millimeters is probably more useful. Screen sizes and pixel densities vary across devices (and monitors for that matter). So fixing a touch target with pixels may not necessarily mean it is a good touch target when pixel densities increase. Desktop monitors, phones and tablets are all increasing pixel densities to give us a richer and richer visual experience. So choosing pixels as your unit of measure may not hold up in the long run.

Over the past few months I have been using a simple demo to illustrate the issues with traditional touch targets compared to modern, touch-first targets. I built this example after spending the summer making a high percentage of mistakes navigating around web sites on my Nook Color, iPad and Motorol Xoom tablets. The Nook offered the worst experiences as most web sites do not detect it as a tablet or touch device, and it has the smallest screen real-estate. Since it was the first touch device I had the levels of frustration with traditional navigation were high.

In this example there are two menus that represent what a typical web site might look like. On the top you see a traditional horizontal navigation using hyperlinks, wrapping text. When the user clicks the hyperlink with the mouse they are taken away to the target page. Notice how the click targets as relatively small with minimal spacing between them. While this works with a mouse, human fingers are going to generate a lot of missed targets.

Below the mouse friendly menu is a more touch friendly version. Instead of using hyperlinks as the action item the entire <LI> element is actionable by binding a click event handler. Each menu item is now at least a 90px by 36px rectangle. There is also a margin of 12 pixels between each menu item. When a user touches the menu item with their thumb or index finger they should have a very high probability of touching the desired menu option.

Compare the Best Buy mobile experience to the Fry’s experience. While there is no where near as many navigational options it is effective, especially to a phone user. Everything on the page is ‘touchable’.

The problem of not following a touch-first design approach is not limited to web sites and web apps it seems to proliferate through native mobile apps as well. I download and try many native apps and see tiny touch targets all the time. This includes controls such as radio buttons and checkboxes. The traditional indirect mouse friendly interfaces we have used the past 2 decades are rapidly degrading as we enter the world of direct, touch first client devices. As developers and front-end designers we must keep this in mind. Failure to do so most likely means the failure of your business.

Posted: Tuesday, November 08, 2011 9:27 AM by Chris Love | 2 Comments

Filed under: User Experience, UX, Mobile, Touch