Archive for the ‘mobile design’ Category

Posted on February 15, 2010 - by David Etheredge

Website Design for Smartphones – Part 1

Why every business needs a mobile website

If you haven’t already heard the news, Smartphones are here to stay. Just a few minutes with Google and you can unearth tons of data pertaining to mobile device and smartphone sales projections – for example multiple research firms predict (one example here) that the global mobile market will approach 6.0 billion subscribers by 2014 with something like 33% of those devices being smartphones. Yes, that’s 2.0 billion smartphone users texting and surfing the web while they try to steer their Mini Coopers with their knees. Roads and highways are destined to get a LOT less safe over the next few years. But that’s a different article for another day.

This series of articles is going to explore website design for smartphones. Specifically three questions;

1. Do companies need to develop a mobile website in addition to (or instead of) a traditional website?
2. What should be the goals of a mobile website?
3. What is the process for developing a mobile website?

By the time we’re done, you should have a pretty good grasp of the “why?, what? and how?” of mobile website design for the next generation of web enabled smartphones.

If your business currently relies upon a traditional website for marketing, lead generation, sales or support, then you should strongly consider building a dedicated website for mobile devices. In December 2009, Gartner (the self proclaimed “world’s leading information technology research and advisory company”) dropped this bombshell in a report outlining their Information Technology predictions for the next several years; by 2013 mobile devices will surpass personal computers as the most common web access device worldwide.

Let that sink in a minute or two. In just three years, people globally will be more likely to visit your website using a smartphone than a computer. This fantastic post at ‘If only we’d thought of that’ digs a bit deeper into some of the findings of the Gartner report. Foks, we’re talking about a universal paradigm shift here and the implications are staggering.

Clearly a signficant part of the growth in mobile device sales will come from emerging markets in areas like South America, Africa and India where a large number of consumers can’t afford large ticket items like personal computers and where high speed broadband infrastructure simply won’t exist. But even in the U.S. where personal comuters are almost ubiquitous, you only have to walk into your local Best Buy to see where the market is going – smartphones reside in the most visible section of the store, right in front of the entrance, while personal computers are relegated to the bowels of store – against the far back wall.

It’s a fair bet that U.S. consumers who don’t already have a connected device; the poor, the young or the old, will be more likely to enter the market through a $100 smartphone than a $1000 PC. Best Buy certainly thinks so.

What this means for busineses is pretty clear. If you want to remain relevant to the millions of consumers who will be using smartphones as their primary device for browsing the web, you must have a website optimized for mobile browsing. And you’d better get it done soon because over the next few years, consumers will be increasingly more likley to decide which products and services they wish to buy and who and where to get them from based on information they gather on their phone.

In other words, those businesses that have a high quality, easy to use mobile website which properly drives consumer behavior will have a significant competitive advantage over businesses that do not.

All the big boys are doing it. Geico, Coke and Nike are just a handful of the major national brands scrambling to differentiate themselves from competitors by staking out positions on the mobile web. The mistake that many startups, local and regional companies make is assuming that mobile marketing is too expensive or complicated for any but Fortune 500 companies to pursue.

Not so! If you already have an effective web presence you are only a few steps away from being able to effectively market your company on smartphones.

In the next article in the series, ‘Website Design for Smartphones – Part 2′ we’ll explore the goals of an effective mobile website.

Posted on February 15, 2010 - by David Etheredge

Website Design for Smartphones – Part 2

Goals of Effective Mobile Websites

 

For the most part web users and mobile users are different animals. One’s a hippopatamus comfortably floating in the security of their home or office (or the local Starbucks) grazing on content for minutes and minutes at a time, wandering about as their whims or needs take them. The other is a cheetah dashing at top speed after a specific target, eyes on the kill. Hippos browse, cheetahs hunt.

Clearly this is a generalization, but it is an effective one for analyzing usage patterns for mobile and traditional websites. It all comes down to a single factor – speed. How fast does the site load? How easy is it to determine what content is available on the site and where it can be found? How consice is the messaging? Hippos have minutes or even hours to find and absorb what they need. Cheetahs have seconds.

If a mobile user cannot find and assimilate the information they need in 60 seconds or less, your website has failed as an effective mobile marketing tool.

With this assumption in mind, lets take a look at the primary goals of a commercial webite:

1. Branding.
2. Marketing Communications.
3. Lead Generation & Sales.
4. Productivity Enhancement.
5. Content Distribution.

The purpose of Branding is to create a kind of pavlovian response in consumers so that when they think of a service or product that your company offers, they automatically jump to your brand instead of some competitor. For a lot of consumers, when they hear the word “insurance” they immediately hop to “Geico” or “Aflack” depending on whether or not they have a bigger soft spot for geckos or duckies. The height of success in branding is when consumers start using your brand name (Coke, Frisbee, Kleenex) as the common term for an entire product segment (soft drinks, flying disks, tissues).

In the world of modern marketing where entertainment is king, branding is all about crating an image that is cooler, funnier, sexier or more outlandish than the other guys. Getting noticed = successful advertising. Getting noticed repeatedly = successful branding. For mobile media, this means giving your customers a reason to come back to your site over and over until your brand is a fundamental part of their regular routine.

Of all of the goals associated with successful mobile marketing, Branding is the hardest to achieve. But it’s also the most valuable because it is the primary method by which a potential customer becomes a life-long customer. Good branding through a mobile website means giving users a compelling reason to come back to your site over and over, even if they aren’t necessarily making a purchase.

Coca-Cola does this by creating mobile games and other entertainment applications. Nike does it by offering applications that help athletes train. GoDaddy does it through “adverporn” by parading a never ending stream of “slutty” vixens in front of male consumers in a manner that suggests you’ll eventually see Danica Patrick having hot lesbian sex if you just come back to their website often enough.

All of these methods boil down to a simple rule made famous by the film ‘Field of Dreams’ – build it and they will come. The “it” is compelling content. Create entertainment, educational or productivity content on your website that provides real value to users and they will visit your site repeatedly. Next to simply providing a better product or service than your competitors, the goodwill you create with web visitors in this fashion is the most effective way differentiate your brand in the marketplace.

Marketing Communications is simply the process of telling consumers who you are, what you do and why they should choose you over your compeitors. Truly effective marketing communications drive action, such as getting customers to generate a lead through an email form, to pick up the phone and call your sales force or to close an online or offline sale. Bad marketing communications create unecessary impediments to actions and in the worst case will cause a potential customer to leave your website with the attitude that you are not a company with which they wish to do business.

Website design and marketing communications are not the same thing.  Many web designerers have no understanding of how to properly drive desirable consumer behavior because they have no experience or formal training in sales or marketing. Relying on a designer who is not a trained marketing professional may result in the development of a website that is so poorly conceived that it is a deterrant to potential customers.

It is often better to have no website at all, than to have one with poorly concieved messaging. This is particularly true of mobile websites where you literally have seconds to communicate to a visitor why they should choose your company over your competitors.

For the vast majority of businesses, Lead Generation & Sales are the most important functions of their website. All the content and messaging in the world means nothing if you are not able to eventually convert visitors into sales.

In the mobile realm, the KISS principle fully applies. Searching for, learning about and buying products using a smartphone or other mobile device should be the simplest process possible. For traditional website users, there is a wealth of data informing us that a measurable percentage of potential consumers are lost for each additional step required of the user during the ordering or checkout process.

For mobile users the importance of this lesson cannot be understated – generating a sale or a lead through a mobile device must be so simple and easy that even a South Carolina beauty queen can do it.

It only takes a few minutes for a competent business person to start thinking up ways that Smartphones could be used in the field to cut costs or enhance productivity for just about any business you can imagine.

Combine a GPS locator with a digital camera and an easy to use online form and drivers can send a report to both the police and their insurance company complete with exact location, photos of their car and the other parties insurance, driver’s license and contact information just seconds after an accident occurs.

The potential for using smartphones for productivity enhancement is mind boggling and over the next few years a billion dollar industry is certain to emerge developing smartphone applications just like the one described above. Smartphone application development is a topic we’ll explore in another article, but for now the important thing to understand is that the first step in creating and distributing smartphone applications is to build a mobile website where users will be able to find, learn about and download such applications in the future.

Finally we have content distribution which is the process of making media and data available to users in various forms including articles, pictures, videos and audio files.

For many businesses content distribution is not currently of primary importance. But for newspapers, tv & radio networks, universities, the blogosphere and the entertainment industry at large, content distribution is the cornerstone of their surival. For such organizations, insuring that online content including news articles, video segments and radio shows are accessible and easy to use on  smartphones will be the difference between success and failure in an online world dominated by mass market mobile users.

And now we come to the heart of the matter – the user. Mass market mobile users have a disease, and the only cure isn’t more cowbell, its a fever. Or to be exact a F.E.V.R

FEVR is an acronym for “Fast Easy Visual Results”. Clearly, making a website load fast, easy to use and understand, visually stimulating and results oriented should be the absolute top priority of every web designer whether they are developing for computer browsers or smartphones!

But it’s not.

Websites are generally designed around text and not graphics. Search engines like text. Programmers like text. Web browsers like text (“http” stands for “hyper text transfer protocol”). Look at the vast majority of websites and you’ll see that the text to graphics ratio is routinely 2 or 3 to 1 or greater.

But people don’t like text so much, they like pictures.  There’s a reason why proud parents open up their wallet to show you photos of their kids instead of handing you a photocopy of juniors birth certificate. For human beings, pictures are a fast, easy and fun way to share information.

Websites that are designed around text are fast for web browsers to load and easy for search engines and computers to process. But if you want to make a site fast and easy for people, you need to build it primarily around graphics, not text.

What this means is that most modern day websites are too complex and too text heavy to drive effective results with mobile users. To drive results, a mobile site must be fast and easy to use and for people, fast and easy equates to a visual medium. Fast, Easy, Visual Results – FEVR!

The good news is that your existing website may already contain most of the content (pictures, multimedia and copy) required to build an excellent mobile website. The bad news is that building a good mobile website is more akin to creating a printed marketing piece like a brochure, sales kit or catalog, than it is to building a traditional website. In other words, you probably need to redesign your existing website if you wish to effectively engage mobile users.

To learn more about how to build a mobile website, check out ‘Website Design for Smartphones – Part 3′.

If you haven’t already done so, you may find it useful to read ‘Website Design for Smartphones – Part 1‘.

Posted on February 14, 2010 - by David Etheredge

Website Design for Smartphones – Part 3

Website Design for Mobile Devices

So how do you build a good mobile website? In part this will depend on your market and your consumer, but there are general principles that can help guide you along the way;

1. Navigation on a mobile website should be as simple and intuitive as possible. You cannot ask mobile users to “figure out” how to find content on your site, it must be obvious. Mobile Users know exactly how to exit your mobile site and if they can’t figure out how to get what they want immediatly, that’s exactly what they will do.
2. Where possible, use pictures, not text to communicate with mobile users. Text should be used to supplement information on your site, but the more graphically rich your mobile site is, the more effective it will be at quickly and easily driving user behavior. This advice runs counter to generally accepted best practices for traditional website design because search engines rely almost entirely on textual, not graphical, content for determining search rankings.
3. Optimize mobile sites for real users first, not search engines. Many of the worst practices in traditional website design orginated from the need to optimize websites so that they would rank well on search engines. Google and other search engines have spent years attempting to retrain the web design industry to build website for people and not search engine spiders. Although search optimization will still be an important part of mobile website design, it is essential that it take a back seat to human usability factors.
4. Understand the specific  goals of mobile users and design your site to accomplish those goals as quickly and efficiently as possible. When a person on a smartphone visits your website, it is likley that they are looking for something very specific (contact information, driving directions, pricing or other specific informaton on products or services you offer, customer support, etc.). Where traditional websites may focus on “selling” customers on a company, product or service, a mobile site needs to help customers go directly to the information or content that they require.
5. Insure mobile content is “light weight” so that it loads as quickly as possible. With near universal access to broadband in the U.S., traditional websites have increased in size and complexity as the use of Flash, streaming audio and video and other interactive media has become commonplace. Content load times that may be acceptable to a personal computer user on broadband may not be acceptable to a mobile user on a wireless network.
6. When in doubt, follow the “FEVR” principle of mobile design. Make your mobile site fast and easy to use, communicate visually using graphics as much as possible and drive user behavior towards very specific results. Fast, Easy, Visual, Results.

Now that the general recommendations are out of the way, let’s get into some specifics. The following methodology is certainly not the only way of designing a mobile website, but we believe it is an effective way to do so.

Mobile Website Structure

The vast majority of mobile websites can be built around the same core structure:

1. A home page
2. A contact us / locate us page or section
3. A products or services page or section
4. A “who we are / what we do” page or section
5. A “why us?” page or section

Home Page: The home page should display the company logo, a short descriptive tagline, a graphic that visually underscores the organization’s products, services or area of interest, and navigation to the other core pages or sections of the site.

Contact / Locate Page or Section: The contact us page should allow the user to directly contact the company by phone, text message, email and/or live chat (the more options the bettter). For brick and mortar companies, a “locate us” function should be included that allows the user to generate driving directions in real time from their current location to the nearest store or office. In cases where the user is encouraged to connect directly with a specific individual at the company (Real Estate, Insurance Brokers, Lawyers) a personal bio with pictures and contact info for each member of your “team” should be included.

Product / Services Page or Section: Structure of the Product / Services section of a mobile website will vary greatly from business to business. In some cases, a list with short descriptions may be sufficient to drive users to an event that generates a lead or sale for your company. In other cases a full online store may be appropritate. Whatever the case, product and service listings must be easy to search or filter on according to the user’s need and they must be presented in such a manner that the user can quickly guage their interest and move on to the next item.

Unlike web stores, where users can potentially view a larger number of products or services all together on a single page, mobile users will probably be required to flip through a series of items one after another. As a result it is essentail that mobile product and serivce offerings be segmented in very precise categories so that users can quickly drill down to the exact items they are looking for by selecting the appropriate category.

“Who We Are / What We Do” Page or Section: One of the worst mistakes that companys make on traditional websites is failing to clearly and simply state who they are, what they do and where they conduct business. A mobile website should include a page that quickly and clearly provides this information to potential customers. The more specific information a user has about a company, the more likely a transaction is to occur. Websites that omit this information, either intentionally or by design, come across as potentially being undependable or “shady” (and they often are!)

“Why Us?” Page or Section: Another big mistake in website design is failure to provide sufficient reasons why a user should choose your company over your competitors. A “Why Us?” section may provide customer testimonials or references, links to your profile on organizations such as the BBB or Dun & Bradsteet, promotional offers and coupons, or it could include a portfolio or your work, a list of clients or a summary of recent projects. In any event, giving potential clients some reason other than just price or product selection to pick you over your competitors is almost always an excellent idea.

Obviously you don’t need to actually call your Why Us section, “Why Us”! For SavvyDog Design’s iPhone website, our “Portfolio” section is used to provide visitor’s with a compelling reason why they should choose us over another design company.

There are other types of content you may need beyond those mentioned above (for example Publishing sites will require sections for various types of content they distribute), but in general these five elements will form the core of almost every good mobile website.

 Mobile Webpage Structure – Introducing Mobile Cards and Decks

So far throughout this series of articles we’ve struggled to differentiate traditional web design from mobile web design while using the same terminology for both processes. This can certainly be confusing, so internally we’ve decided to change the way that we refer to structural elements on mobile websites.

The terms “page” and “section” are derived from books and other literary formats and their use stresses the textual nature of traditional website design. If, as we’ve proposed previously, we are to think of web design for mobile devices in a more graphical way, then it makes sense to refer to ”pages” and “sections” in a way that accentuates the principles of effective design for the mobile medium. To this end, we refer to mobile pages as “cards” and to sections on a mobile site as “decks”.

Whether you look at playing cards, postcards, greeting cards or collectible card games like Magic the Gathering or Yugio, its evident that printed cards often feature a “graphic heavy” design principle where information is communicated through pictures first with text used in a supporting role or not at all. Such cards also tend to be restrictred to a small size that can easily be taken in and understood in a glance. Finally, all cards of a similar type tend to follow a very formalized structure designed to pack a lot of information into a small, but well organized area.

Sounds a lot like an iPhone screen doesn’t it?

And when you have a large number of cards of the same size and type, you typically organize them into a “deck”, which, assuming you are dealing with a liminted number of cards, is an excellent structure for viewing a series of cards one after the other until you find the one you want.

Now you might be saying to yourself, “who cares what terminology you use to describe pages and sections in a website?” The answer is that in the design world, the name we give to something we wish to create often informs our perception of how that element should be designed.

The term “page” suggests to a designer that they should follow literary principles; a lot of text with some or no graphics in support and a variable document length depending on the amount of text involved.

The term “card” suggests a medium where graphics are more important than text, where there is a very limited amount of space in which to work and where a rigid format should be enforced to ensure quick, easy assimilation of information depicted in the design.

The use of the term “deck” instead of “section” enforces the idea that all similar cards on a mobile website (such as products, items in a portfolio, or team bios) should follow the same layout and be organized in a such a way as to allow the user to easily “flip” between them in order to quickly locate and “pull out” the one they are looking for.

So now that we’ve explored the structure for mobile websites, we can get down to the last and most important bit – the actual development process.

Mobile Website Development

1. Project Specification – work with a Marketing professional to define the primary goals of your mobile website, outlining the specific user activities that the site should drive, such as lead generation, calls to action or product sales. Define the simplest possible path(s) for users to achieve the desired activities and avoid building unecessary or frivolous content into the specification. Also include a detailed list of the types of mobile devices you wish to specifically support with your mobile website (you will probably need to discuss this with your mobile developer in advance as device support is a complex issue).
2. Development Specification - working from the Project Specification, have a User Interface Designer or Website Architect create and provide you with a site map that lists every card or deck to be included in your mobile website and a navigational structure that clearly shows how users will navigate between various elements of the site. In addition, the Development Specification should discuss any user activity that can take place on any card in the site which will require additional coding or development (such as e-commerce, database integration or interactive media). Revise the site and navigational maps until they accurately represent the entire mobile site you wish to build.
3. Graphic Design – work with a Graphic Designer to develop the artwork and layouts for the home page, each deck template (a consistent graphical structure within which all cards of similar content will be built) and all individual cards in the site that are not part of a deck. Where necessary, use placeholder artwork and text until the general elements of the design are completed and approved.
4. Working Shell (optional) – work with an HTML coder to create a working shell of the site that allows users to navigate between all of the decks in the site. For small sites, this step may be unecessary, but for large, complicated sites, testing navigation and site structure in this manner prior to building out all final content can save time and money in the event the navigational design has some unforseen flaw.
5. Content Placement – work with a Graphic Designer and a Marketing communications specialist to author / edit and layout final content for every card in the site. Final layouts for cards can be viewed and approved in static form (.jpg or .pdf for example) before they are handed off to the coder to create the BETA version of the mobile website.
6. BETA Website – work with a mobile applications / website developer to build the final version of your mobile website. Make certain the developer provides you with a fully functional version of the website (a BETA version) which you can test through a web browser on a personal computer, before the site is published for mobile use. Also, make sure the developer will test to find and fix any “bugs” with the site so that it performs as intended on the mobile devices / smartphones you intend to target.
7. Go Live and QA Test – have your developer take the website live and then immediately allocate the time and resources necessary to self test your mobile website on all target devices possible. In many cases developers will warranty their work from defects which arise from development issues for a period of 30 – 60 days but after that, the client will be responsible for the cost of fixing any issues which are not identified during the warranty period. It is almost always in the client’s best interest to perform (or hire a third party to perform) thorough Quality Assurance testing even if the developer provides testing as a part of their service.
8. Show Off Your Mobile Site – Congratulations, you’ve got an awesome new sales tool with which to taunt your competitors and woo new customers! Whip out your iPhone and impress some random person in a bar with your new site.

If you haven’t already done so, you may find it useful to read the first part in this series - ‘Website Design for Smartphones – Part 1‘.