    
|
Have you heard the rumors about the new iPhone 5c? Where the ‘C’ supposedly stands for cheap, okay maybe not, they say it probably stands for the various color options. Then again, these are rumors, so it could stand for checkmate mobile industry, now your move. On the heels of these rumors comes another announcement that Tim Cook met with the head of China Mobile which is like the Verizon of China. Apple has already been selling iPhones / iPads in China and the numbers are far from paltry, however this deal could create a massive explosion in sales.
China Mobile is the largest mobile telecom provider with a subscriber base of more than 740 million. Less than one fifth of their subscribers have 3G which is about 148 million subscribers eligible to buy an iPhone. With a cheaper iPhone and a deal with China Mobile, Apple could solely sell to China and still hit their revenue numbers. There are already thousands of Chinese apps in the app store but millions of new iPhone users means more users hungry for apps. If you have a successful app then you might consider providing it in Mandarin or better yet contact some ex-pats living in China and ask them what kind of apps they think would be viable.
Looking at the top 100 apps in the Chinese app store games seems to dominate the rankings. But there’s still room for the likes of a Chinese version of apps like Instagram, SnapChat, Vine, FlipBoard, LetterPress. It’s a market ripe with opportunities and with a little creativity you could come out on top. That said, I would like to leave you with a little Chinese proverb: “Be not afraid of growing slowly, be afraid only of standing still.”
The post Apple’s Next Move and Why iPhone Developers Should Learn Mandarin appeared first on Treehouse Blog.
]]>|
|
|
|
 |
Touch devices have rightfully been praised for generally being much more intuitive than the decades-old computer mouse and keyboard. Users interact directly with touch interfaces, which narrows the gap between human act and software response. Yet typing on mobile devices — in particular on smartphones — is quite the horror story. It’s slow, painful and error-prone.
The obvious culprits are keyboard character size and proximity of the keys, but there are many other important aspects to consider, including:
During a recent large-scale 1:1 mobile usability study of 18 of the largest mobile commerce websites, we observed how certain features and limitations of modern touch keyboards can collide with the user’s expectations of how to fill out a form. When this happens, users quickly grow frustrated, as one form-field validation error pops up after another or, worse yet, the user gets stuck and ultimately abandons the website.
When faced with a suboptimal touch keyboard implementation, users lose confidence in the website, and some even doubt their own ability to fill out a form on a smartphone. Clearly, a good mobile experience requires good form usability, and implementing touch keyboards is a key part of that.
In this article, we will look a bit deeper into the usability issues surrounding touch keyboards, including five design guidelines that will alleviate some of these pains. The guidelines are an excerpt from the 147 guidelines in the M-Commerce Usability Report. We previously looked into 10 guidelines for mobile e-commerce here on Smashing Magazine; these 5 guidelines on touch keyboards are more generic and apply to any mobile website on which the user interacts with a touch keyboard.
Furthermore, we’ve also benchmarked the mobile websites of the top 50 online retailers against these five guidelines and found that an astounding 98% get one or more of these wrong, and 70% of the top mobile websites get at least two wrong (as of 31 July 2013). While some of the guidelines might seem obvious at first, clearly we all need to pay better attention when so many multi-million dollar e-commerce stores get them wrong.
Issue: Poor auto-correction is frustrating when users actually notice it, and can be detrimental when they do not.
Auto-correction often works very poorly for abbreviations, street names, email addresses and other words that are not in the dictionary. This caused significant issues throughout testing and resulted in a great deal of erroneous data being submitted as test subjects completed their purchases.
As this subject typed in the street name “westheimer” on the website for Toys’R’Us, the phone incorrectly auto-corrected to “weathermen” (left). However, the subject did not notice this, submitted the form and received a validation error (right). (Large view)
One major problem with auto-correction is that users often fail to notice the correction (because they are focused on what they are typing instead of what they have typed). This is fine if the correction is correct, but it can be detrimental if it is wrong. For example, in multiple instances during testing, valid addresses were auto-corrected to invalid ones and submitted because the subject didn’t notice the auto-correction.
On websites without address validators, this resulted in orders being shipped to wrong addresses, unless the subject was particularly attentive on the order-review page (after all, auto-corrected data often looks very similar to the intended input, making users less likely to notice the error). Of course, auto-correction fails miserably in the address field not just in edge cases (such as with “weatherman”), but with common (and standardized) abbreviations, such as “Rd” being auto-corrected to “Ed.”
That being said, auto-correction did prove helpful in other scenarios when it corrected invalid data to valid data. Disabling auto-correction on all fields (such as comment fields), therefore, is not recommended. Instead, use discretion, and disable it on fields for which the dictionaries are weak. This typically includes proper names of various sorts (streets, cities, persons) and other identifiers (email addresses, coupon codes, etc.).
While seemingly simple, in practice this is by far the most neglected part of touch keyboard usability; almost every single top mobile commerce website gets this one wrong. The benchmark reveals that 92% of them haven’t disabled auto-correction on the address field. Given the severity of the problems caused by auto-correction on address and email fields, it’s astonishing how few actually disable auto-correction here.
You can disable auto-correction by adding the autocorrect attribute to the input tag and setting it to off, like so:
<input type="text" autocorrect="off" />
Issue: Inappropriate keyboard layouts slow down typing, and users generally mistype long number sequences on standard keyboards because of the small hit area and the close proximity of the numeric keys.
One of the main limitations of touch keyboards on smartphones is their size. The letters themselves are minuscule. In fact, a character on an iPhone 4 in portrait mode measures 4 × 5.9 millimeters.
Compare this to Apple’s own design guidelines, which recommend that all clickable interface elements be of least 6.85 × 6.85 millimeters because anything below that would yield very poor click accuracy. (Microsoft and Nokia also recommend a minimum hit area of approximately 7 × 7 millimeters). Predictably, this results in misspellings.
But by changing an attribute or two in the code of your input fields, you can instruct the user’s phone to automatically show a keyboard optimized for the requested input. For example, you can invoke a numeric keyboard for a credit-card field, a phone keyboard for a telephone field, and an email keyboard for an email address. This saves the user from having to switch from the traditional keyboard layout, and, in the case of numeric inputs, minimizes typos because these dedicated keyboards have much larger keys, thus reducing the chance of accidental taps.
The credit-card input on Best Buy invokes the standard keyboard layout, so the user has to first switch to the numbers and special characters view (middle) and then type out the 16 digits without a single typo. This was a difficult task for many subjects, who looked to and from their card and phone while trying to hit the miniature buttons stacked against one another. (Large view)
Throughout testing, multiple subjects noticed these dedicated keyboards and commented on them approvingly. In fact, on iOS, the hit area of a key is 471% larger on the numeric keyboard than on the traditional keyboard (209 × 108 pixels versus 52 × 76 pixels). More importantly, we recorded significantly fewer typos in numeric inputs when a numeric keyboard layout was displayed. This led to fewer validation errors, which, in turn, resulted in a better and more seamless shopping experience on those websites. This was especially true of long sequences, such as phone and credit-card numbers.
On the left, a subject accidentally hits the dash button instead of the “1” button due to the small size and proximity of buttons on the standard keyboard layout. A number-optimized keyboard layout would have been more appropriate. On the right, when the user fills out the “Day phone” field on GAP’s website, a special phone-optimized keyboard appears, showing buttons that are 471% larger than those on the traditional keyboard. (Large view)
Another benefit of dedicated keyboard layouts is that they indicate the required input, which is helpful if the label is out of sight or the user is unsure of what to enter. However, note that numeric keyboard layouts can be limiting because they do not allow the user to enter alphabetic characters and allow only a few, if any, special characters or separators. Invoking these keyboards on fields where they are the best match, therefore, is important, which includes phone numbers, ZIP codes, credit-card numbers and credit-card security codes. Similarly, make sure your formatting examples are actually possible to replicate using the invoked keyboard.
Typing a phone number according to the example format given here (“555-555-5555”) is not possible on iOS because the keyboard layout does not include the dash character. (Interestingly, entering it on Android is possible, which goes to show why testing on multiple platforms helps to ensure that you don’t require formatting that is only possible on some.) (Large view)
Given these substantial usability benefits, one would think that these dedicated keyboards are widely used. Yet, 60% of the top mobile commerce websites do not invoke them for one or more of the layouts for email addresses (email keyboard), phone numbers (phone keyboard) or credit-card numbers (numeric keyboard).
Technically, there are a few ways to invoke the numeric keyboard layouts, and also slight distinctions between them (i.e. phone versus number), with slightly different behaviors across platforms (iOS, Android, etc.). In general, two HTML attributes will invoke a numeric keyboard layout, namely the type and pattern attributes.
The type attribute carries semantic meaning and should be used only when an appropriate type is available for your input, which is the case for phone numbers and email addresses. For numeric inputs, however, providing a pattern attribute instead is recommended. (Note that you might want to add a novalidate attribute if you only want the browser to invoke the keyboard and not enforce this format.)
For any phone fields, use this:
<input type="tel" />
For any other fields where you want to invoke a numeric keyboard, use this:
<input type="text" pattern="\d*" novalidate />
For any email fields, use this:
<input type="email" />
As mentioned, there are some distinctions between the types of numeric keyboard layouts, as well as some differences between mobile platforms. For example, on iOS, the code provided above to invoke the phone layout would produce a keyboard that allows the user to enter digits and a small set of phone-related special characters and separators, whereas the code for invoking the numeric keyboard would allow the user to enter only digits. Meanwhile, on Android, the phone keyboard layout is also invoked but with vastly more special characters, allowing for richer formatting of the phone number.
Yet, the numeric keyboard invoked by the pattern attribute isn’t support by Android at all; instead, it simply invokes the regular alphanumeric keyboard. While you could use type="number" to invoke a numeric keyboard on both iOS and Android, setting the type to number carries semantic meaning that in many cases wouldn’t be appropriate (for example, a credit-card number is a numeric sequence, not a number).
Therefore, we recommend the more defensive strategy of using pattern="\d*", which produces an enhanced experience on iOS while having no implications on other platforms that do not yet support this behavior. (Of course, if the field does represent a number, such as a price or quantity, then type="number" should obviously be used.)
Issue: When one field invokes a dedicated keyboard layout but other similar fields do not, users are confused and begin to question the type of input requested by the field without the dedicated keyboard.
Invoking the appropriate keyboard layout for a particular input field is great (see the previous recommendation), but be sure to do it consistently throughout your website, or else you could greatly confuse the user. In other words, if a ZIP code field invokes a numeric keyboard, then similar input fields should have the same behavior.
While this might sound obvious, many websites fail to invoke dedicated keyboard layouts consistently. For instance, the flower store FTD (pictured above) invokes a numeric keyboard for the credit-card number but not for the very next security-code field, even though both values are always numeric.
Of the top 50 grossing online retailers, 54% get this wrong on their mobile websites, where one or more of the telephone, credit-card or CVV fields don’t invoke a numeric touch keyboard. These 54% break down as follows (in absolute numbers): 24% invoke the numeric inputs for none of these three numeric inputs (which, although consistent, is consistently bad), and the remaining 30% (including FTD) are inconsistent, with the numeric keyboard layout being invoked on only some of the fields.
Even more surprising is just how confused some of the test subjects were by this during the usability tests. They began questioning their initial interpretation of individual fields, thinking that perhaps something else was required. For example, upon seeing the standard keyboard layout for the “Card security code” (pictured on FTD’s website above), the subjects began wondering whether this was the three-digit code on the back of their credit card or one of the many other strings printed on the card.
Issue: Users are either vexed or confused when “Next” and “Previous” buttons take them to fields that are illogically sequenced.
During testing, the subjects struggled with websites that failed to honor the behavior of the “Next” and “Previous” buttons. The expected behavior is straightforward: When the user clicks the “Next” button, they expect to be taken to the next logical field in the form, without any changes and without the form being submitted. The same goes for the “Previous” button, just in the opposite direction, of course.
This goes beyond just having the right tab sequence (although that is a good start). Things often go awry when dealing with dynamic fields that depend on the user’s prior selection. In these instances, we’ve seen the data of users get deleted or the tab sequence violated. One must be particularly careful with the interfaces of custom forms, too. For example, in the Disney Store, a custom-designed state selector isn’t part of the tabbing sequence (because it technically isn’t an input element), and so users are sent right past the state field.
After filling in her ZIP code here (left), the subject hit the “Next” button, which correctly took her to the “Location Type” drop-down menu (right). But, as shown, the website cleared the subject’s previously inputted data. Obviously, data should persist when “Next” and “Previous” buttons are used. (Large view)
These buttons essentially function as the mobile version of keyboard tabbing; therefore, they should adopt the same sequential principles as desktop tabbing. They should provide a fast way to get from one field to the next without having to use a pointer (whether a mouse or finger). This is particularly important on mobile because screen space is so limited when the keyboard is open that the next field might be partially obstructed, making the “Next” button even more convenient to use. So, while the “Next” and “Previous” buttons might not be used by all users, the consequence of dishonoring the behavior of these buttons is significant.
Luckily, most websites get this one right. As long as the code is clean, mobile browsers will, by default, set the tabbing sequence according to the order of appearance of the fields. Of the top mobile websites, only 4% get this wrong.
Issue: Nearly all subjects believed their email address had to be in lowercase, so auto-capitalizing this data adds needless friction to the process.
The default behavior of smartphones is to auto-capitalize the first letter in standard text fields, which is usually desirable. However, disabling this auto-capitalization is preferable in a few cases, especially for email addresses, which most test subjects wanted to be in lowercase.
This subject noticed the capital “J” and went back to replace it with a lowercase “j” because he was unsure whether the capitalized version would work. (Large view)
Multiple times during testing, subjects noticed an uppercase letter and made an explicit effort to replace it with the lowercase equivalent. Most explained that they were unsure whether uppercase characters were allowed or whether email addresses in general were case-sensitive. On websites that had disabled auto-capitalization in the email field, no subject ever actively capitalized the first character. Disabling auto-capitalization for email and other appropriate fields (such as URLs) is recommended, then.
Among the top mobile commerce websites, 38% don’t disable auto-capitalization on email address fields, leaving them as plain-text input fields, and leaving less technically inclined users in doubt.
Auto-capitalization can be disabled by adding the autocapitalize attribute to the <input> tag and setting it to off, like so:
<input type="text" autocapitalize="off" />
Of course, for email fields, you should set the type attribute to email:
<input type="email" autocapitalize="off" />
On iOS, setting the type to email will automatically disable auto-capitalization. However, still set the autocapitalize attribute because that will also work on iOS and might be needed on other platforms that do not yet support the email input type or that implement it differently.
While these fundamentals might seem obvious at first, remember that 98% of the world’s largest mobile commerce websites violate at least one of these (see the complete list). And 70% get two or more of these “basic” touch keyboard guidelines wrong. In fact, 24% haven’t optimized their inputs for touch keyboards at all, whether by omitting basic keyboard layouts (phone, email, numeric), invoking them inconsistently (or consistently poorly), not disabling auto-correction where appropriate, or not disabling auto-capitalization for email fields.
One reason for this lack of compliance might be that very thorough testing would be required to spot all of the pitfalls across a large website — hence, the third recommendation of invoking keyboard layouts consistently, which in an ideal world shouldn’t even need to be mentioned. Another reason, mentioned in a prior Smashing Magazine article, is that mobile and touch interfaces represent a relatively new platform, with an entirely new interaction method that requires attention to a myriad of small details — details that we as Web designers and developers are not yet accustomed to actively looking and designing for.
For this reason, we’ll end this article with a cheat sheet of the most common pitfalls when working with input fields for touch interfaces, along with copy-and-pastable code and a mobile touch-optimized demo of fields that invoke the correct keyboards, which you can use as a checklist when designing and developing mobile- and tablet-optimized websites.
These fields are typically included in the following types of forms: account registration, account sign-in, search, surveys, the entire checkout process, comment forms, and contact forms. We recommend searching your entire code repository to catch every single instance of these.
(al) (ea)
© Christian Holst for Smashing Magazine, 2013.
]]>|
|
For me, working with startups has been a huge learning experience. Over the last two and a half years I’ve experienced working both in-house and as a consultant for two startups, as well as recently agreeing to provide my services to a third. I’m still very much in the early stages of my journey but my experiences have already taught me a lot, and hopefully I can pass on some of the knowledge I’ve acquired.
If you’re thinking about working for a startup but have no previous experience and are unsure what to expect, there are a few things that you need to know:
We often hear about startups that seemingly come out of nowhere, go on to do big things and are hailed as overnight successes. However, the truth is that these success stories are often built on the back of years of hard work, struggle and any number of previous failures.
Take video game developer and entertainment company, Rovio Entertainment, for example. They spent 8 years working on other games and were close to bankruptcy before finally hitting it big with Angry Birds, which went on to become the best selling iOS game ever.
The fact is that these things take time and although it won’t happen overnight, Rovio’s story is proof that with hard work and dedication anything is possible.
Everybody has to start somewhere, and most founders start out with nothing but an idea and a bit of cash to get the ball rolling. This usually isn’t enough to pay their team a proper wage, if anything at all. Instead, when joining a startup early on, you will often have to make agreements to work in exchange for shares or on the promise of a lump sum once the company secures enough investment to be able to reward you for all those unpaid hours.
Unfortunately, success isn’t guaranteed, so there’s always a chance that you could end up with nothing in return but a memorable learning experience. This is why before choosing to work with a startup you must ask yourself whether you truly believe in the idea and have faith that the team has what it takes to make the business a success.
Imagine the scenario. You’ve joined a startup and you’ve been working tirelessly for months on end when finally you get that phone call – “Great news! Someone said they’re going to invest enough money to see us through to launch!”.
It’s exactly what you’ve been waiting to hear, so nobody can blame you for wanting to breathe a sigh of relief and celebrate the occasion, but don’t reach for the champagne just yet.
There’s a big difference between someone saying they’re going to do something and actually doing it. I’ve experienced it on many occasions now where a promise of investment has never materialized. The reasons why vary, but ultimately the result is the same and it can be very demoralizing. This is why it’s important not to get your hopes up, but at the same time remain positive and continue to move forward.
Even if a deal falls through, it’s not the end of the world, something even better could be waiting just around the corner.
If the news of multi-million dollar acquisitions by the likes of Facebook and Google is tempting you to work with a startup then you might want to rethink your plans. Not only are the chances of this happening to you very slim but it also shows that your priorities are all wrong.
We can all dream about deals like the one Facebook made with Instagram, but that shouldn’t be your primary driving force.
It’s like making the decision to go freelance. People leave well paid jobs with little to no client base in order to pursue a career as a freelancer, but why do they do it? Ask most freelancers and the first reason they’ll give you is because they get to choose who they work with and what projects they work on. It gives them the freedom to carve their own path.
The same principle should apply to working with startups. In the beginning you’ll have nothing to work with but a general idea and a blank canvas. What should be driving you is the desire to use it to create something that will have an impact on people’s lives, whether it’s made to entertain them, make their life easier or provide them with the tools to make an impact in their own way. Whatever it is, you will have the opportunity to help shape the outcome.
The point is that in the beginning the product should be your main concern. Once you’ve got that right then you can start thinking about the financial rewards.
Nobody likes failing and sometimes the thought of it can scare us, but a little bit of fear never hurt anybody. However, if you find that your fear has become so overwhelming that it’s holding you back and stopping you from taking risks, then you need to do something about it.
This persistent fear of failure is also known as Atychiphobia and often leads a person to live a constricted lifestyle. The causes range from growing up with demeaning parents or family members, to experiencing a single traumatic event as a result of a past failure.
If you suffer from it, it’s likely that you will have been carrying this fear around with you for some time, and while whatever past experience that triggered your fear may not have been your fault, you have to remember that the problem is a subconscious one. You are the one responsible for how you deal with it. If you let it get the better of you and stop you from pursuing potentially very rewarding opportunities then you will only have yourself to blame.
Although there is no quick fix, ultimately the solution lies within your own mind. You just have to be willing to change the way you think about failure and learn to cope with it in a more positive way. This can be achieved through various methods of self-help and there’s plenty of information available online to help you get started.
It is easier said than done but the sooner you start making steps towards overcoming your fear, the sooner you will be on your way to unlocking your full potential.
This only really applies to those thinking about working in-house, but even though you may get hired for having a particular set of skills, which you will use to fulfil a certain role, it doesn’t mean that you won’t be given other responsibilities.
A small team has a lot of ground to cover and there can be lot to think about, especially in the early days. Who’s going to keep track of finances? Who’s going to look for the best deals on furniture and equipment? Who’s going to do the research on potential investors? Who’s going to make the pitch? Who’s going to manage the social media accounts? The list goes on.
After all, it’s a team effort, and being flexible will make you a valuable team player.
Temporarily wearing a different hat may even teach you a thing or two.
When you’re working within any team there’s bound to be some differences of opinion, and things are no different at a startup.
It’s safe to say that everyone’s main goal will be to build a successful product, but the chances are that they will all have different ideas about how to do it. Due to this, it’s inevitable that conflict will arise from time to time. However, it’s not necessarily a bad thing and it shouldn’t be something you shy away from.
It’s actually far better for you and the team to be open and honest about how you feel about something rather than keeping your opinions to yourself. People may not agree with what you have to say but there’s value in different points of view and it can make you think about problems differently, which can lead to new and innovative solutions.
A team that’s not afraid to challenge each other will ensure everyone is encouraged to stay at the top of their game and this will not only benefit you as an individual but it will also allow the team to perform more effectively as a whole.
As I said at the beginning I’m still very much in the early stages of my journey but I know that no matter what happens, whether I succeed or fail, the experiences have been invaluable.
I’ve acquired skills and learnt lessons that will stay with me for life and make me much better equipped to deal with whatever challenges may lie ahead.
Now, the important question is what lies ahead for you?
Have you worked with startups? What has the experience taught you? Let us know in the comments.
| 50 High-Quality Texture Backgrounds – only $10! |  |
|
|
|
|